diff --git a/webui/index.html b/webui/index.html
index 85eb9885..7d83e32d 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -8000,7 +8000,24 @@
                 </div>
                 <button class="confirm-modal-close" onclick="closeRateLimitModal()">✕</button>
             </div>
-            <div class="confirm-modal-content rate-limit-modal-content">
+     !-- Split modules (was: script.js) — core.js must load first, init.js last -->
+    <script src="{{ url_for('static', filename='core.js') }}"></script>
+    <script src="{{ url_for('static', filename='media-player.js') }}"></script>
+    <script src="{{ url_for('static', filename='settings.js') }}"></script>
+    <script src="{{ url_for('static', filename='search.js') }}"></script>
+    <script src="{{ url_for('static', filename='sync-spotify.js') }}"></script>
+    <script src="{{ url_for('static', filename='downloads.js') }}"></script>
+    <script src="{{ url_for('static', filename='wishlist-tools.js') }}"></script>
+    <script src="{{ url_for('static', filename='sync-services.js') }}"></script>
+    <script src="{{ url_for('static', filename='artists.js') }}"></script>
+    <script src="{{ url_for('static', filename='api-monitor.js') }}"></script>
+    <script src="{{ url_for('static', filename='library.js') }}"></script>
+    <script src="{{ url_for('static', filename='beatport-ui.js') }}"></script>
+    <script src="{{ url_for('static', filename='discover.js') }}"></script>
+    <script src="{{ url_for('static', filename='enrichment.js') }}"></script>
+    <script src="{{ url_for('static', filename='stats-automations.js') }}"></script>
+    <script src="{{ url_for('static', filename='pages-extra.js') }}"></script>
+    <script src="{{ url_for('static', filename='inimit-modal-content">
                 <p class="rate-limit-description">Spotify has temporarily blocked API access. All Spotify features (search, enrichment, playlists) are paused until the ban expires.</p>
                 <div class="rate-limit-details">
                     <div class="rate-limit-detail-row">
diff --git a/webui/static/api-monitor.js b/webui/static/api-monitor.js
new file mode 100644
index 00000000..3784e28c
--- /dev/null
+++ b/webui/static/api-monitor.js
@@ -0,0 +1,3799 @@
+// == API RATE MONITOR GAUGES   ==
+// ===============================
+
+const _rateMonitorState = {};
+const _RATE_GAUGE_SERVICES = [
+    'spotify', 'itunes', 'deezer', 'lastfm', 'genius',
+    'musicbrainz', 'audiodb', 'tidal', 'qobuz', 'discogs',
+];
+const _RATE_GAUGE_LABELS = {
+    spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer',
+    lastfm: 'Last.fm', genius: 'Genius', musicbrainz: 'MusicBrainz',
+    audiodb: 'AudioDB', tidal: 'Tidal', qobuz: 'Qobuz', discogs: 'Discogs',
+};
+const _RATE_GAUGE_COLORS = {
+    spotify: '#1DB954', itunes: '#FC3C44', deezer: '#A238FF',
+    lastfm: '#D51007', genius: '#FFFF64', musicbrainz: '#BA478F',
+    audiodb: '#00BCD4', tidal: '#00FFFF', qobuz: '#FF6B35', discogs: '#D4A574',
+};
+
+// SVG constants — 240° arc, gap at bottom
+const _G = { size: 160, cx: 80, cy: 84, r: 56, stroke: 8, startAngle: 240, totalArc: 240 };
+
+function _gPt(angle, radius) {
+    const rad = (angle - 90) * Math.PI / 180;
+    const r = radius || _G.r;
+    return { x: _G.cx + r * Math.cos(rad), y: _G.cy + r * Math.sin(rad) };
+}
+
+function _gArc(startDeg, endDeg, radius) {
+    const r = radius || _G.r;
+    const s = _gPt(startDeg, r), e = _gPt(endDeg, r);
+    const sweep = ((endDeg - startDeg + 360) % 360);
+    const large = sweep > 180 ? 1 : 0;
+    return `M${s.x},${s.y} A${r},${r} 0 ${large} 1 ${e.x},${e.y}`;
+}
+
+function _handleRateMonitorUpdate(data) {
+    const grid = document.getElementById('rate-monitor-grid');
+    if (!grid) return;
+
+    if (!grid.children.length) {
+        for (const svc of _RATE_GAUGE_SERVICES) {
+            const div = document.createElement('div');
+            div.className = 'rate-gauge-card';
+            div.id = `rate-gauge-${svc}`;
+            div.onclick = () => _openRateModal(svc);
+            grid.appendChild(div);
+        }
+    }
+
+    for (const svc of _RATE_GAUGE_SERVICES) {
+        const d = data[svc];
+        if (!d) continue;
+        _rateMonitorState[svc] = d;
+        const container = document.getElementById(`rate-gauge-${svc}`);
+        if (!container) continue;
+
+        const value = d.cpm || 0;
+        const max = d.limit || 60;
+        const pct = Math.min(value / max, 1);
+        const accent = _RATE_GAUGE_COLORS[svc] || '#888';
+        const label = _RATE_GAUGE_LABELS[svc] || svc;
+        const worker = d.worker || {};
+        const wStatus = worker.status || 'stopped';
+        const isRateLimited = d.rate_limited === true;
+
+        // Build or update the card content
+        let gaugeWrap = container.querySelector('.gauge-arc-wrap');
+        if (!gaugeWrap) {
+            // Full rebuild
+            container.innerHTML = `
+                <div class="gauge-card-header">
+                    <span class="gauge-card-dot" style="background:${accent}"></span>
+                    <span class="gauge-card-name">${label}</span>
+                    <span class="gauge-card-status" data-status="${wStatus}">${_workerStatusLabel(wStatus, worker)}</span>
+                </div>
+                <div class="gauge-arc-wrap">${_buildGaugeSVG(svc, value, max)}</div>
+                <div class="gauge-card-stats">
+                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${value.toFixed(0)}</span><span class="gauge-card-stat-label">calls/min</span></div>
+                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${worker.calls_1h || 0}</span><span class="gauge-card-stat-label">last hour</span></div>
+                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${(worker.calls_24h || 0).toLocaleString()}</span><span class="gauge-card-stat-label">24h</span></div>
+                </div>
+                ${svc === 'spotify' && worker.daily_budget ? _buildBudgetBar(worker.daily_budget) : ''}
+                ${isRateLimited ? _buildRateLimitBadge(d) : ''}
+            `;
+        } else {
+            // Fast update — only change values
+            _updateGauge(gaugeWrap, value, max, svc);
+
+            // Update status
+            const statusEl = container.querySelector('.gauge-card-status');
+            if (statusEl) {
+                statusEl.dataset.status = wStatus;
+                statusEl.textContent = _workerStatusLabel(wStatus, worker);
+            }
+
+            // Update stats
+            const statVals = container.querySelectorAll('.gauge-card-stat-val');
+            if (statVals[0]) statVals[0].textContent = value.toFixed(0);
+            if (statVals[1]) statVals[1].textContent = worker.calls_1h || 0;
+            if (statVals[2]) statVals[2].textContent = (worker.calls_24h || 0).toLocaleString();
+
+            // Budget bar (Spotify)
+            if (svc === 'spotify' && worker.daily_budget) {
+                let budgetEl = container.querySelector('.gauge-budget-bar');
+                if (!budgetEl) {
+                    const div = document.createElement('div');
+                    div.innerHTML = _buildBudgetBar(worker.daily_budget);
+                    const statsEl = container.querySelector('.gauge-card-stats');
+                    if (statsEl) statsEl.after(div.firstElementChild);
+                } else {
+                    const b = worker.daily_budget;
+                    const pctB = Math.min(100, Math.round((b.used / b.limit) * 100));
+                    const fill = budgetEl.querySelector('.gauge-budget-fill');
+                    if (fill) { fill.style.width = pctB + '%'; }
+                    const label = budgetEl.querySelector('.gauge-budget-label');
+                    if (label) label.textContent = `${b.used.toLocaleString()} / ${b.limit.toLocaleString()} daily`;
+                }
+            }
+
+            // Rate limit badge
+            let badge = container.querySelector('.gauge-rl-badge');
+            if (isRateLimited) {
+                if (!badge) {
+                    const div = document.createElement('div');
+                    div.innerHTML = _buildRateLimitBadge(d);
+                    container.appendChild(div.firstElementChild);
+                } else {
+                    const mins = Math.ceil((d.rl_remaining || 0) / 60);
+                    const timeEl = badge.querySelector('.gauge-rl-time');
+                    if (timeEl) timeEl.textContent = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
+                }
+            } else if (badge) {
+                badge.remove();
+            }
+        }
+
+        container.classList.toggle('danger', pct > 0.8 || isRateLimited);
+        container.classList.toggle('active', value > 0 || wStatus === 'running');
+        container.classList.toggle('rate-limited', isRateLimited);
+    }
+}
+
+function _workerStatusLabel(status, worker) {
+    if (status === 'not_configured') return 'Not configured';
+    if (status === 'paused') return worker.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
+    if (status === 'idle') return 'Idle';
+    if (status === 'running') return 'Running';
+    return 'Stopped';
+}
+
+function _buildBudgetBar(budget) {
+    const pct = Math.min(100, Math.round((budget.used / budget.limit) * 100));
+    const cls = budget.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
+    return `<div class="gauge-budget-bar ${cls}">
+        <div class="gauge-budget-fill" style="width:${pct}%"></div>
+        <span class="gauge-budget-label">${budget.used.toLocaleString()} / ${budget.limit.toLocaleString()} daily</span>
+    </div>`;
+}
+
+function _buildRateLimitBadge(d) {
+    const mins = Math.ceil((d.rl_remaining || 0) / 60);
+    const text = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
+    return `<div class="gauge-rl-badge"><span class="gauge-rl-dot"></span>RATE LIMITED<span class="gauge-rl-time">${text}</span></div>`;
+}
+
+function _buildGaugeSVG(svc, value, max) {
+    const { size, cx, cy, r, stroke, startAngle, totalArc } = _G;
+    const label = _RATE_GAUGE_LABELS[svc] || svc;
+    const accent = _RATE_GAUGE_COLORS[svc] || '#888';
+    const pct = Math.min(value / max, 1);
+    const endAngle = startAngle + pct * totalArc;
+    const arcEnd = startAngle + totalArc;
+    const glowId = `glow-${svc}`;
+
+    // Endpoint dot position
+    const dot = pct > 0 ? _gPt(endAngle, r) : null;
+
+    // Gradient ID for the colored arc
+    const gradId = `grad-${svc}`;
+
+    const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
+
+    return `
+        <svg viewBox="0 0 ${size} ${size}" class="rate-gauge-svg">
+            <!-- Background track -->
+            <path d="${_gArc(startAngle, arcEnd)}" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="${stroke}" stroke-linecap="round"/>
+
+            <!-- Danger zone marker (last 20% of arc, subtle) -->
+            <path d="${_gArc(startAngle + totalArc * 0.8, arcEnd)}" fill="none" stroke="rgba(239,68,68,0.1)" stroke-width="${stroke}" stroke-linecap="round"/>
+
+            <!-- Active arc (CSS handles glow via drop-shadow) -->
+            ${pct > 0 ? `<path class="gauge-active-arc" data-color="${color}" d="${_gArc(startAngle, endAngle)}" fill="none" stroke="${color}" stroke-width="${stroke}" stroke-linecap="round" style="filter:drop-shadow(0 0 6px ${color}60)"/>` : ''}
+
+            <!-- Endpoint dot -->
+            ${dot ? `<circle class="gauge-dot" cx="${dot.x}" cy="${dot.y}" r="5" fill="${color}" style="filter:drop-shadow(0 0 4px ${color}80)"/><circle cx="${dot.x}" cy="${dot.y}" r="2.5" fill="#fff" opacity="0.9"/>` : ''}
+
+            <!-- Scale labels: 0 and max -->
+            <text x="${_gPt(startAngle, r + 16).x}" y="${_gPt(startAngle, r + 16).y}" text-anchor="middle" dominant-baseline="middle" fill="rgba(255,255,255,0.2)" font-size="9" font-family="-apple-system,sans-serif">0</text>
+            <text x="${_gPt(arcEnd, r + 16).x}" y="${_gPt(arcEnd, r + 16).y}" text-anchor="middle" dominant-baseline="middle" fill="rgba(255,255,255,0.2)" font-size="9" font-family="-apple-system,sans-serif">${max}</text>
+
+            <!-- Center content -->
+            <text class="gauge-value" x="${cx}" y="${cy - 12}" text-anchor="middle" dominant-baseline="middle">${Math.round(value)}</text>
+            <text class="gauge-unit" x="${cx}" y="${cy + 6}" text-anchor="middle">/min</text>
+
+            <!-- Service label -->
+            <text class="gauge-label" x="${cx}" y="${cy + 28}" text-anchor="middle">${label}</text>
+        </svg>
+    `;
+}
+
+function _updateGauge(container, value, max, svc) {
+    const { r, stroke, startAngle, totalArc } = _G;
+    const accent = _RATE_GAUGE_COLORS[svc] || '#888';
+    const pct = Math.min(value / max, 1);
+    const endAngle = startAngle + pct * totalArc;
+    const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
+
+    // Update center value
+    const valText = container.querySelector('.gauge-value');
+    if (valText) valText.textContent = Math.round(value);
+
+    // Update active arc
+    const activeArc = container.querySelector('.gauge-active-arc');
+    if (pct > 0) {
+        const d = _gArc(startAngle, endAngle);
+        if (activeArc) {
+            activeArc.setAttribute('d', d);
+            activeArc.setAttribute('stroke', color);
+            activeArc.style.filter = `drop-shadow(0 0 6px ${color}60)`;
+        } else {
+            // Rebuild the whole gauge when transitioning from 0 to active
+            container.innerHTML = _buildGaugeSVG(svc, value, max);
+            return;
+        }
+    } else if (activeArc) {
+        activeArc.remove();
+        // Also remove dots
+        container.querySelectorAll('.gauge-dot').forEach(d => d.remove());
+        const innerDot = container.querySelector('.gauge-dot + circle');
+        if (innerDot) innerDot.remove();
+        return;
+    }
+
+    // Update endpoint dot
+    const gaugeDot = container.querySelector('.gauge-dot');
+    if (pct > 0 && gaugeDot) {
+        const dot = _gPt(endAngle, r);
+        gaugeDot.setAttribute('cx', dot.x);
+        gaugeDot.setAttribute('cy', dot.y);
+        gaugeDot.setAttribute('fill', color);
+        gaugeDot.style.filter = `drop-shadow(0 0 4px ${color}80)`;
+        const inner = gaugeDot.nextElementSibling;
+        if (inner && inner.tagName === 'circle') {
+            inner.setAttribute('cx', dot.x);
+            inner.setAttribute('cy', dot.y);
+        }
+    }
+}
+
+// ── Rate Monitor Detail Modal ──
+
+let _rateModalService = null;
+let _rateModalInterval = null;
+
+function _openRateModal(serviceKey) {
+    _rateModalService = serviceKey;
+    const label = _RATE_GAUGE_LABELS[serviceKey] || serviceKey;
+    const accent = _RATE_GAUGE_COLORS[serviceKey] || '#888';
+
+    let overlay = document.getElementById('rate-modal-overlay');
+    if (overlay) overlay.remove();
+
+    overlay = document.createElement('div');
+    overlay.id = 'rate-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) _closeRateModal(); };
+
+    const isSpotify = serviceKey === 'spotify';
+    const currentData = _rateMonitorState[serviceKey] || {};
+
+    overlay.innerHTML = `
+        <div class="rate-modal">
+            <div class="rate-modal-header">
+                <div class="rate-modal-header-info">
+                    <div class="rate-modal-header-dot" style="background:${accent}"></div>
+                    <div>
+                        <h3>${label}</h3>
+                        <span class="rate-modal-header-sub">${currentData.cpm || 0} calls/min — limit ${currentData.limit || '?'}/min</span>
+                    </div>
+                </div>
+                <button class="watch-all-close" onclick="_closeRateModal()">&times;</button>
+            </div>
+            <div class="rate-modal-body">
+                <div class="rate-modal-section-title">24-Hour Call History</div>
+                <div class="rate-modal-chart-wrap">
+                    <canvas id="rate-modal-chart" width="700" height="280"></canvas>
+                    <div class="rate-modal-chart-legend" id="rate-modal-chart-legend"></div>
+                </div>
+                ${isSpotify ? '<div class="rate-modal-section-title">Per-Endpoint Breakdown</div><div class="rate-modal-endpoints" id="rate-modal-endpoints"></div>' : ''}
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Fetch main history + per-endpoint histories for Spotify
+    const historyPromises = [
+        fetch(`/api/rate-monitor/history/${serviceKey}`).then(r => r.json())
+    ];
+    if (isSpotify) {
+        const activeEps = Object.keys(_rateMonitorState.spotify?.endpoints || {});
+        for (const ep of activeEps) {
+            historyPromises.push(
+                fetch(`/api/rate-monitor/history/spotify:${ep}`).then(r => r.json()).catch(() => null)
+            );
+        }
+    }
+    Promise.all(historyPromises).then(results => {
+        const main = results[0];
+        const epHistories = isSpotify ? results.slice(1).filter(Boolean) : [];
+        _renderRateChart(main.history || [], main.rate_limit || 60, accent, epHistories);
+    }).catch(() => { });
+
+    if (isSpotify) {
+        _updateSpotifyEndpoints();
+        _rateModalInterval = setInterval(_updateSpotifyEndpoints, 1000);
+    }
+}
+
+function _closeRateModal() {
+    const overlay = document.getElementById('rate-modal-overlay');
+    if (overlay) overlay.remove();
+    if (_rateModalInterval) { clearInterval(_rateModalInterval); _rateModalInterval = null; }
+    _rateModalService = null;
+}
+
+function _renderRateChart(history, rateLimit, accent, epHistories = []) {
+    const canvas = document.getElementById('rate-modal-chart');
+    if (!canvas) return;
+
+    // HiDPI support
+    const dpr = window.devicePixelRatio || 1;
+    const W = 700, H = 280;
+    canvas.width = W * dpr;
+    canvas.height = H * dpr;
+    canvas.style.width = W + 'px';
+    canvas.style.height = H + 'px';
+    const ctx = canvas.getContext('2d');
+    ctx.scale(dpr, dpr);
+
+    const pad = { top: 24, right: 24, bottom: 36, left: 50 };
+    const plotW = W - pad.left - pad.right;
+    const plotH = H - pad.top - pad.bottom;
+
+    ctx.clearRect(0, 0, W, H);
+
+    // Build data points
+    const now = Math.floor(Date.now() / 1000);
+    const start = now - 86400;
+    const points = [];
+
+    if (history.length > 0) {
+        const histMap = new Map(history.map(h => [h[0], h[1]]));
+        for (let t = start; t <= now; t += 300) {
+            const bucket = Math.floor(t / 60) * 60;
+            let sum = 0;
+            for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
+            points.push({ t, v: sum / 5 });
+        }
+    }
+
+    const maxVal = Math.max(rateLimit * 1.15, ...points.map(p => p.v), 1);
+
+    // Grid lines (horizontal)
+    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
+    ctx.lineWidth = 1;
+    for (let i = 1; i <= 4; i++) {
+        const y = pad.top + plotH * (1 - i / 4);
+        ctx.beginPath();
+        ctx.moveTo(pad.left, y);
+        ctx.lineTo(pad.left + plotW, y);
+        ctx.stroke();
+    }
+
+    // Danger zone band
+    const dangerY = pad.top + plotH * (1 - rateLimit / maxVal);
+    const grad = ctx.createLinearGradient(0, pad.top, 0, dangerY);
+    grad.addColorStop(0, 'rgba(239, 68, 68, 0.08)');
+    grad.addColorStop(1, 'rgba(239, 68, 68, 0.02)');
+    ctx.fillStyle = grad;
+    ctx.fillRect(pad.left, pad.top, plotW, dangerY - pad.top);
+
+    // Rate limit line
+    ctx.strokeStyle = 'rgba(239, 68, 68, 0.5)';
+    ctx.setLineDash([8, 5]);
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(pad.left, dangerY);
+    ctx.lineTo(pad.left + plotW, dangerY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+
+    ctx.fillStyle = 'rgba(239, 68, 68, 0.6)';
+    ctx.font = '10px -apple-system, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(`Rate limit: ${rateLimit}/min`, pad.left + 6, dangerY - 6);
+
+    // Draw area fill + line
+    if (points.length > 1) {
+        // Area gradient fill
+        const areaGrad = ctx.createLinearGradient(0, pad.top, 0, pad.top + plotH);
+        // Parse accent to rgba
+        areaGrad.addColorStop(0, accent + '30');
+        areaGrad.addColorStop(1, accent + '05');
+
+        ctx.beginPath();
+        points.forEach((p, i) => {
+            const x = pad.left + (i / (points.length - 1)) * plotW;
+            const y = pad.top + plotH * (1 - p.v / maxVal);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.lineTo(pad.left + plotW, pad.top + plotH);
+        ctx.lineTo(pad.left, pad.top + plotH);
+        ctx.closePath();
+        ctx.fillStyle = areaGrad;
+        ctx.fill();
+
+        // Line
+        ctx.beginPath();
+        points.forEach((p, i) => {
+            const x = pad.left + (i / (points.length - 1)) * plotW;
+            const y = pad.top + plotH * (1 - p.v / maxVal);
+            if (i === 0) ctx.moveTo(x, y);
+            else ctx.lineTo(x, y);
+        });
+        ctx.strokeStyle = accent;
+        ctx.lineWidth = 2;
+        ctx.lineJoin = 'round';
+        ctx.stroke();
+
+        // Glow effect
+        ctx.shadowColor = accent;
+        ctx.shadowBlur = 8;
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+    }
+
+    // Per-endpoint lines (Spotify breakdown)
+    const legendEl = document.getElementById('rate-modal-chart-legend');
+    if (epHistories.length > 0) {
+        const epColors = ['#1DB954', '#FF6B6B', '#4ECDC4', '#FFE66D', '#A78BFA', '#F97316', '#06B6D4', '#EC4899', '#F472B6', '#34D399'];
+        const legendItems = [];
+
+        epHistories.forEach((epData, idx) => {
+            if (!epData || !epData.history || epData.history.length === 0) return;
+            const epName = (epData.service || '').replace('spotify:', '').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+            const color = epColors[idx % epColors.length];
+            legendItems.push({ name: epName, color });
+
+            const histMap = new Map(epData.history.map(h => [h[0], h[1]]));
+            const epPoints = [];
+            for (let t = start; t <= now; t += 300) {
+                const bucket = Math.floor(t / 60) * 60;
+                let sum = 0;
+                for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
+                epPoints.push({ t, v: sum / 5 });
+            }
+
+            if (epPoints.length > 1) {
+                ctx.beginPath();
+                epPoints.forEach((p, i) => {
+                    const x = pad.left + (i / (epPoints.length - 1)) * plotW;
+                    const y = pad.top + plotH * (1 - p.v / maxVal);
+                    if (i === 0) ctx.moveTo(x, y);
+                    else ctx.lineTo(x, y);
+                });
+                ctx.strokeStyle = color + 'BB';
+                ctx.lineWidth = 1.5;
+                ctx.lineJoin = 'round';
+                ctx.stroke();
+            }
+        });
+
+        // HTML legend below chart
+        if (legendEl && legendItems.length > 0) {
+            legendEl.innerHTML = legendItems.map(item =>
+                `<span class="rate-chart-legend-item"><span class="rate-chart-legend-dot" style="background:${item.color}"></span>${item.name}</span>`
+            ).join('');
+        }
+    } else if (legendEl) {
+        legendEl.innerHTML = '';
+    }
+
+    // X-axis labels
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.font = '10px -apple-system, sans-serif';
+    ctx.textAlign = 'center';
+    for (let i = 0; i <= 6; i++) {
+        const t = start + (86400 * i / 6);
+        const x = pad.left + (i / 6) * plotW;
+        const d = new Date(t * 1000);
+        const hr = d.getHours();
+        const label = hr === 0 ? '12am' : hr < 12 ? `${hr}am` : hr === 12 ? '12pm' : `${hr - 12}pm`;
+        ctx.fillText(label, x, H - 10);
+        // Subtle vertical grid
+        ctx.strokeStyle = 'rgba(255,255,255,0.03)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(x, pad.top);
+        ctx.lineTo(x, pad.top + plotH);
+        ctx.stroke();
+    }
+
+    // Y-axis labels
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.textAlign = 'right';
+    ctx.font = '10px -apple-system, sans-serif';
+    for (let i = 0; i <= 4; i++) {
+        const v = maxVal * i / 4;
+        const y = pad.top + plotH * (1 - i / 4);
+        ctx.fillText(Math.round(v), pad.left - 8, y + 4);
+    }
+
+    // Empty state
+    if (points.length === 0) {
+        ctx.fillStyle = 'rgba(255,255,255,0.15)';
+        ctx.font = '13px -apple-system, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('No call history yet — data populates as API calls are made', W / 2, H / 2);
+    }
+}
+
+function _updateSpotifyEndpoints() {
+    const container = document.getElementById('rate-modal-endpoints');
+    if (!container) return;
+    const endpoints = _rateMonitorState.spotify?.endpoints || {};
+    const entries = Object.entries(endpoints).sort((a, b) => b[1] - a[1]);
+
+    if (entries.length === 0) {
+        container.innerHTML = '<div class="rate-modal-ep-empty">No active Spotify endpoints — start an enrichment worker or search to see activity</div>';
+        return;
+    }
+
+    const limit = _rateMonitorState.spotify?.limit || 171;
+    container.innerHTML = entries.map(([ep, cpm]) => {
+        const pct = Math.min(cpm / limit * 100, 100);
+        const name = ep.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+        const color = pct > 80 ? '#ef4444' : pct > 60 ? '#eab308' : '#1DB954';
+        return `<div class="rate-modal-ep">
+            <span class="rate-modal-ep-name">${name}</span>
+            <div class="rate-modal-ep-bar"><div class="rate-modal-ep-fill" style="width:${pct}%;background:${color}"></div></div>
+            <span class="rate-modal-ep-value">${Math.round(cpm)}/min</span>
+        </div>`;
+    }).join('');
+}
+
+async function fetchAndUpdateSystemStats() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/system/stats');
+        if (!response.ok) return;
+
+        const data = await response.json();
+
+        // Update all stat cards
+        updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
+        updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+        updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
+        updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
+        updateStatCard('uptime-card', data.uptime, 'Application runtime');
+        updateStatCard('memory-card', data.memory_usage, 'Current usage');
+
+    } catch (error) {
+        console.warn('Could not fetch system stats:', error);
+    }
+}
+
+function updateStatCard(cardId, value, subtitle) {
+    const card = document.getElementById(cardId);
+    if (card) {
+        const valueElement = card.querySelector('.stat-card-value');
+        const subtitleElement = card.querySelector('.stat-card-subtitle');
+
+        if (valueElement) {
+            valueElement.textContent = value;
+        }
+        if (subtitleElement) {
+            subtitleElement.textContent = subtitle;
+        }
+    }
+}
+
+async function fetchAndUpdateActivityFeed() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/activity/feed');
+        if (!response.ok) {
+            console.warn('Activity feed response not ok:', response.status, response.statusText);
+            return;
+        }
+
+        const data = await response.json();
+        console.log('Activity feed data received:', data);
+        updateActivityFeed(data.activities || []);
+
+    } catch (error) {
+        console.warn('Could not fetch activity feed:', error);
+    }
+}
+
+// Cache last feed signature to avoid unnecessary DOM rebuilds (prevents blink)
+let _lastActivityFeedSig = '';
+
+function updateActivityFeed(activities) {
+    const feedContainer = document.getElementById('dashboard-activity-feed');
+    if (!feedContainer) return;
+
+    if (activities.length === 0) {
+        if (_lastActivityFeedSig === 'empty') return;
+        _lastActivityFeedSig = 'empty';
+        feedContainer.innerHTML = `
+            <div class="activity-item">
+                <span class="activity-icon">📊</span>
+                <div class="activity-text-content">
+                    <p class="activity-title">System Started</p>
+                    <p class="activity-subtitle">Dashboard initialized successfully</p>
+                </div>
+                <p class="activity-time">Just now</p>
+            </div>
+        `;
+        return;
+    }
+
+    const items = activities.slice(0, 5);
+    // Build signature from titles+subtitles to detect actual changes
+    const sig = items.map(a => a.title + a.subtitle).join('|');
+    const feedChanged = sig !== _lastActivityFeedSig;
+    _lastActivityFeedSig = sig;
+
+    if (!feedChanged) {
+        // Just update timestamps without rebuilding DOM
+        const timeEls = feedContainer.querySelectorAll('.activity-time');
+        items.forEach((activity, i) => {
+            if (timeEls[i]) timeEls[i].textContent = timeAgo(activity.time);
+        });
+        return;
+    }
+
+    // Full rebuild only when feed content actually changed
+    feedContainer.innerHTML = '';
+    items.forEach((activity, index) => {
+        const activityElement = document.createElement('div');
+        activityElement.className = 'activity-item';
+        activityElement.innerHTML = `
+            <span class="activity-icon">${escapeHtml(activity.icon)}</span>
+            <div class="activity-text-content">
+                <p class="activity-title">${escapeHtml(activity.title)}</p>
+                <p class="activity-subtitle">${escapeHtml(activity.subtitle)}</p>
+            </div>
+            <p class="activity-time">${timeAgo(activity.time)}</p>
+        `;
+        feedContainer.appendChild(activityElement);
+
+        if (index < items.length - 1) {
+            const separator = document.createElement('div');
+            separator.className = 'activity-separator';
+            feedContainer.appendChild(separator);
+        }
+    });
+}
+
+async function checkForActivityToasts() {
+    if (socketConnected) return; // WebSocket handles this (instant push)
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/activity/toasts');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const toasts = data.toasts || [];
+
+        toasts.forEach(activity => {
+            // Convert activity to toast type based on icon/title
+            let toastType = 'info';
+            if (activity.icon === '✅' || activity.title.includes('Complete')) {
+                toastType = 'success';
+            } else if (activity.icon === '❌' || activity.title.includes('Failed') || activity.title.includes('Error')) {
+                toastType = 'error';
+            } else if (activity.icon === '🚫' || activity.title.includes('Cancelled')) {
+                toastType = 'warning';
+            }
+
+            // Show toast with activity info
+            showToast(`${activity.title}: ${activity.subtitle}`, toastType);
+        });
+
+    } catch (error) {
+        // Silently fail for toast checking to avoid spam
+    }
+}
+
+// --- Watchlist Functions ---
+
+/**
+ * Toggle an artist's watchlist status
+ */
+async function toggleWatchlist(event, artistId, artistName) {
+    // Prevent event bubbling to parent card
+    event.stopPropagation();
+
+    const button = event.currentTarget;
+    const icon = button.querySelector('.watchlist-icon');
+    const text = button.querySelector('.watchlist-text');
+
+    // Show loading state
+    const originalText = text.textContent;
+    text.textContent = 'Loading...';
+    button.disabled = true;
+
+    try {
+        // Check current status
+        const checkResponse = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const checkData = await checkResponse.json();
+        if (!checkData.success) {
+            throw new Error(checkData.error || 'Failed to check watchlist status');
+        }
+
+        const isWatching = checkData.is_watching;
+
+        // Toggle watchlist status
+        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
+        const payload = isWatching ?
+            { artist_id: artistId } :
+            { artist_id: artistId, artist_name: artistName };
+
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to update watchlist');
+        }
+
+        // Update button appearance
+        const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
+        if (isWatching) {
+            // Was watching, now removed
+            icon.textContent = '👁️';
+            text.textContent = 'Add to Watchlist';
+            button.classList.remove('watching');
+            if (gearBtn) gearBtn.classList.add('hidden');
+            console.log(`❌ Removed ${artistName} from watchlist`);
+        } else {
+            // Was not watching, now added
+            icon.textContent = '👁️';
+            text.textContent = 'Watching...';
+            button.classList.add('watching');
+            if (gearBtn) gearBtn.classList.remove('hidden');
+            console.log(`✅ Added ${artistName} to watchlist`);
+        }
+
+        // Update dashboard watchlist count
+        updateWatchlistButtonCount();
+
+    } catch (error) {
+        console.error('Error toggling watchlist:', error);
+        text.textContent = originalText;
+
+        // Show error feedback
+        const originalBackground = button.style.background;
+        button.style.background = 'rgba(255, 59, 48, 0.3)';
+        setTimeout(() => {
+            button.style.background = originalBackground;
+        }, 2000);
+    } finally {
+        button.disabled = false;
+    }
+}
+
+/**
+ * Update the watchlist button count on dashboard
+ */
+async function updateWatchlistButtonCount() {
+    if (document.hidden) return; // Skip polling when tab is not visible
+    if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll
+    try {
+        const response = await fetch('/api/watchlist/count');
+        const data = await response.json();
+
+        if (data.success) {
+            _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
+            // Update sidebar nav badge
+            const wlNavBadge = document.getElementById('watchlist-nav-badge');
+            if (wlNavBadge) {
+                wlNavBadge.textContent = data.count;
+                wlNavBadge.classList.toggle('hidden', data.count === 0);
+            }
+            const watchlistButton = document.getElementById('watchlist-button');
+            if (watchlistButton) {
+                const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
+                if (countdownText) {
+                    watchlistButton.title = `Next auto-scan in ${countdownText}`;
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Error updating watchlist count:', error);
+    }
+}
+
+/**
+ * Check and update watchlist status for all visible artist cards
+ */
+async function updateArtistCardWatchlistStatus() {
+    const artistCards = document.querySelectorAll('.artist-card');
+    const artistIds = [];
+    for (const card of artistCards) {
+        const artistId = card.dataset.artistId;
+        if (artistId) artistIds.push(artistId);
+    }
+    if (!artistIds.length) return;
+
+    try {
+        const response = await fetch('/api/watchlist/check-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_ids: artistIds })
+        });
+
+        const data = await response.json();
+        if (data.success && data.results) {
+            for (const card of artistCards) {
+                const artistId = card.dataset.artistId;
+                if (!artistId) continue;
+
+                const button = card.querySelector('.watchlist-toggle-btn');
+                if (!button) continue;
+                const icon = button.querySelector('.watchlist-icon');
+                const text = button.querySelector('.watchlist-text');
+
+                const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
+                if (data.results[artistId]) {
+                    if (icon) icon.textContent = '👁️';
+                    if (text) text.textContent = 'Watching...';
+                    button.classList.add('watching');
+                    if (gearBtn) gearBtn.classList.remove('hidden');
+                } else {
+                    if (icon) icon.textContent = '👁️';
+                    if (text) text.textContent = 'Add to Watchlist';
+                    button.classList.remove('watching');
+                    if (gearBtn) gearBtn.classList.add('hidden');
+                }
+            }
+        }
+    } catch (error) {
+        console.error('Error batch checking watchlist status:', error);
+    }
+}
+
+/**
+ * Initialize/refresh the watchlist sidebar page
+ */
+async function initializeWatchlistPage() {
+    try {
+        const emptyEl = document.getElementById('watchlist-page-empty');
+        const gridEl = document.getElementById('watchlist-artists-list');
+        const countEl = document.getElementById('watchlist-page-count');
+        const overrideBanner = document.getElementById('watchlist-page-override-banner');
+
+        // Fetch count, artists, scan status, global config in parallel
+        const [countRes, artistsRes, statusRes, globalRes] = await Promise.all([
+            fetch('/api/watchlist/count').then(r => r.json()),
+            fetch('/api/watchlist/artists').then(r => r.json()),
+            fetch('/api/watchlist/scan/status').then(r => r.json()),
+            fetch('/api/watchlist/global-config').then(r => r.json()).catch(() => ({ success: false })),
+        ]);
+
+        const count = countRes.success ? countRes.count : 0;
+        const artists = artistsRes.success ? artistsRes.artists : [];
+        const scanStatus = statusRes.success ? statusRes.status : 'idle';
+        const globalOverrideActive = globalRes.success && globalRes.config && globalRes.config.global_override_enabled;
+
+        // Update count
+        if (countEl) countEl.textContent = `${count} artist${count !== 1 ? 's' : ''}`;
+
+        // Update nav badge
+        const navBadge = document.getElementById('watchlist-nav-badge');
+        if (navBadge) {
+            navBadge.textContent = count;
+            navBadge.classList.toggle('hidden', count === 0);
+        }
+
+        // Empty state
+        if (count === 0) {
+            if (emptyEl) emptyEl.style.display = '';
+            if (gridEl) gridEl.style.display = 'none';
+            watchlistPageState.isInitialized = true;
+            return;
+        }
+        if (emptyEl) emptyEl.style.display = 'none';
+        if (gridEl) gridEl.style.display = '';
+
+        // Store artists for sorting
+        watchlistPageState.artists = artists;
+
+        // Last scan summary strip
+        const scanStrip = document.getElementById('watchlist-last-scan-strip');
+        const scanText = document.getElementById('watchlist-last-scan-text');
+        if (scanStrip && scanText && statusRes.completed_at && statusRes.summary) {
+            const completedDate = new Date(statusRes.completed_at);
+            const ago = _formatTimeAgo(completedDate);
+            const found = statusRes.summary.new_tracks_found || 0;
+            const added = statusRes.summary.tracks_added_to_wishlist || 0;
+            scanText.textContent = `Last scan: ${ago} — ${found} new track${found !== 1 ? 's' : ''} found, ${added} added to wishlist`;
+            scanStrip.style.display = '';
+        } else if (scanStrip) {
+            scanStrip.style.display = 'none';
+        }
+
+        // Global override banner
+        if (overrideBanner) overrideBanner.style.display = globalOverrideActive ? '' : 'none';
+        const settingsBtn = document.getElementById('watchlist-page-settings-btn');
+        if (settingsBtn) {
+            settingsBtn.classList.toggle('watchlist-global-settings-active', globalOverrideActive);
+            settingsBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> ${globalOverrideActive ? 'Global Override ON' : 'Global Settings'}`;
+        }
+
+        // Render artist cards
+        if (gridEl) {
+            gridEl.innerHTML = artists.map(artist => {
+                const pills = [];
+                if (artist.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
+                if (artist.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
+                if (artist.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
+                if (artist.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
+                if (artist.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
+                if (artist.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
+                if (artist.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
+                const sourceBadges = [];
+                if (artist.spotify_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-spotify">Spotify</span>');
+                if (artist.itunes_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-itunes">iTunes</span>');
+                if (artist.deezer_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-deezer">Deezer</span>');
+                if (artist.discogs_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-discogs">Discogs</span>');
+                const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id;
+                return `
+                    <div class="watchlist-artist-card"
+                         data-artist-name="${artist.artist_name.toLowerCase().replace(/"/g, '&quot;')}"
+                         data-artist-id="${artistPrimaryId}"
+                         data-last-scan="${artist.last_scan_timestamp || ''}"
+                         data-added="${artist.date_added || ''}">
+                        <label class="watchlist-card-checkbox" onclick="event.stopPropagation();">
+                            <input type="checkbox" class="watchlist-select-cb"
+                                   data-artist-id="${artistPrimaryId}"
+                                   data-artist-name="${escapeHtml(artist.artist_name)}"
+                                   onchange="updateWatchlistBatchBar()">
+                            <span class="watchlist-checkbox-custom"></span>
+                        </label>
+                        <button class="watchlist-card-gear"
+                                data-artist-id="${artistPrimaryId}"
+                                data-artist-name="${escapeHtml(artist.artist_name)}"
+                                onclick="event.stopPropagation();"
+                                title="Artist settings">
+                            <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87a.48.48 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"/></svg>
+                        </button>
+                        <div class="watchlist-card-image">
+                            ${artist.image_url ? `<img src="${artist.image_url}" alt="${escapeHtml(artist.artist_name)}" onerror="if(!this.dataset.retried){this.dataset.retried='1';this.src=this.src;}else{this.parentElement.innerHTML='<div class=\\'watchlist-card-image-fallback\\'>🎤</div>';}">` : '<div class="watchlist-card-image-fallback">🎤</div>'}
+                        </div>
+                        <div class="watchlist-card-info">
+                            <span class="watchlist-card-name">${escapeHtml(artist.artist_name)}</span>
+                            <span class="watchlist-card-meta">${formatRelativeScanTime(artist.last_scan_timestamp)}</span>
+                        </div>
+                        ${sourceBadges.length > 0 ? `<div class="watchlist-card-sources">${sourceBadges.join('')}</div>` : ''}
+                        ${pills.length > 0 ? `<div class="watchlist-card-pills">${pills.join('')}</div>` : ''}
+                    </div>
+                `;
+            }).join('');
+
+            // Wire up gear buttons
+            gridEl.querySelectorAll('.watchlist-card-gear').forEach(button => {
+                button.addEventListener('click', () => {
+                    openWatchlistArtistConfigModal(button.getAttribute('data-artist-id'), button.getAttribute('data-artist-name'));
+                });
+            });
+
+            // Wire up artist card clicks
+            gridEl.querySelectorAll('.watchlist-artist-card').forEach(item => {
+                item.addEventListener('click', (e) => {
+                    if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) return;
+                    const artistId = item.getAttribute('data-artist-id');
+                    const artistName = item.querySelector('.watchlist-card-name').textContent;
+                    openWatchlistArtistDetailView(artistId, artistName);
+                });
+            });
+        }
+
+        // Scan status
+        const scanStatusEl = document.getElementById('watchlist-scan-status');
+        const liveActivityEl = document.getElementById('watchlist-live-activity');
+        const scanBtn = document.getElementById('scan-watchlist-btn');
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+
+        if (scanStatus === 'scanning') {
+            if (scanStatusEl) scanStatusEl.style.display = '';
+            if (liveActivityEl) liveActivityEl.style.display = 'flex';
+            if (scanBtn) { scanBtn.disabled = true; scanBtn.classList.add('btn-processing'); scanBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Scanning...'; }
+            if (cancelBtn) cancelBtn.style.display = '';
+            pollWatchlistScanStatus();
+        } else {
+            if (scanStatusEl && statusRes.summary) {
+                scanStatusEl.style.display = '';
+                const summaryEl = document.getElementById('watchlist-page-scan-summary');
+                if (summaryEl) {
+                    summaryEl.style.display = '';
+                    summaryEl.innerHTML = `<span class="sync-stat">Artists: ${statusRes.summary.total_artists || 0}</span><span class="sync-separator"> • </span><span class="sync-stat">New tracks: ${statusRes.summary.new_tracks_found || 0}</span><span class="sync-separator"> • </span><span class="sync-stat">Added to wishlist: ${statusRes.summary.tracks_added_to_wishlist || 0}</span>`;
+                }
+            }
+        }
+
+        // Start countdown timer
+        const nextRunSeconds = countRes.next_run_in_seconds || 0;
+        startWatchlistCountdownTimer(nextRunSeconds);
+
+        watchlistPageState.isInitialized = true;
+
+    } catch (error) {
+        console.error('Error initializing watchlist page:', error);
+        showToast('Failed to load watchlist', 'error');
+    }
+}
+
+/**
+ * Initialize/refresh the wishlist sidebar page
+ */
+async function initializeWishlistPage() {
+    try {
+        const emptyEl = document.getElementById('wishlist-page-empty');
+        const nebulaEl = document.getElementById('wishlist-nebula');
+        const countEl = document.getElementById('wishlist-page-count');
+        const tracksSection = document.getElementById('wishlist-category-tracks');
+        const statsStrip = document.getElementById('wishlist-stats-strip');
+
+        const [statsRes, cycleRes, albumRes, singleRes, watchlistRes] = await Promise.all([
+            fetch('/api/wishlist/stats').then(r => r.json()),
+            fetch('/api/wishlist/cycle').then(r => r.json()),
+            fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
+            fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
+            fetch('/api/watchlist/artists').then(r => r.json()).catch(() => ({ success: false })),
+        ]);
+
+        // Build artist name → image URL map from watchlist
+        const _artistImageMap = new Map();
+        if (watchlistRes.success && watchlistRes.artists) {
+            for (const wa of watchlistRes.artists) {
+                if (wa.artist_name && wa.image_url) _artistImageMap.set(wa.artist_name.toLowerCase(), wa.image_url);
+            }
+        }
+
+        const { singles = 0, albums = 0, total = 0 } = statsRes;
+        const currentCycle = cycleRes.cycle || 'albums';
+
+        if (countEl) countEl.textContent = `${total} track${total !== 1 ? 's' : ''}`;
+        const navBadge = document.getElementById('wishlist-nav-badge');
+        if (navBadge) { navBadge.textContent = total; navBadge.classList.toggle('hidden', total === 0); }
+
+        const statAlbums = document.getElementById('wishlist-stat-albums');
+        const statSingles = document.getElementById('wishlist-stat-singles');
+        const statCycle = document.getElementById('wishlist-stat-cycle');
+        if (statAlbums) statAlbums.textContent = albums;
+        if (statSingles) statSingles.textContent = singles;
+        if (statCycle) statCycle.textContent = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+        if (total === 0) {
+            if (emptyEl) emptyEl.style.display = '';
+            if (nebulaEl) nebulaEl.style.display = 'none';
+            if (tracksSection) tracksSection.style.display = 'none';
+            if (statsStrip) statsStrip.style.display = 'none';
+            wishlistPageState.isInitialized = true;
+            return;
+        }
+        if (emptyEl) emptyEl.style.display = 'none';
+        if (nebulaEl) nebulaEl.style.display = '';
+        if (tracksSection) tracksSection.style.display = 'none';
+        if (statsStrip) statsStrip.style.display = '';
+
+        _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], _artistImageMap, currentCycle);
+        startWishlistCountdownTimer(currentCycle, statsRes.next_run_in_seconds || 0);
+
+        // Live processing: check if wishlist download is active and start polling
+        _startNebulaLivePolling(currentCycle, _artistImageMap);
+
+        wishlistPageState.isInitialized = true;
+
+    } catch (error) {
+        console.error('Error initializing wishlist page:', error);
+        showToast('Failed to load wishlist', 'error');
+    }
+}
+
+/* ═══════════════════════════════════════════════════════════════════
+   WISHLIST NEBULA — Artist orbs with album/single satellites
+   ═══════════════════════════════════════════════════════════════════ */
+
+function _renderWishlistNebula(albumTracks, singleTracks, artistImageMap, currentCycle) {
+    const field = document.getElementById('wl-nebula-field');
+    if (!field) return;
+    artistImageMap = artistImageMap || new Map();
+
+    const artistMap = new Map();
+    function _parse(track, type) {
+        let sd = track.spotify_data;
+        if (typeof sd === 'string') { try { sd = JSON.parse(sd); } catch (e) { return null; } }
+        if (!sd) return null;
+        const raw = sd.album;
+        const albumName = (typeof raw === 'string' ? raw : raw?.name) || 'Unknown';
+        const albumImage = (typeof raw === 'object' && raw?.images?.[0]?.url) || '';
+        let artist = 'Unknown Artist';
+        if (sd.artists?.[0]?.name) artist = sd.artists[0].name;
+        else if (typeof sd.artists?.[0] === 'string') artist = sd.artists[0];
+        return { track: sd.name || 'Unknown', artist, album: albumName, image: albumImage, type, id: track.spotify_track_id || track.id || '' };
+    }
+
+    for (const t of albumTracks) { const p = _parse(t, 'album'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); const a = artistMap.get(p.artist); if (!a.albums.has(p.album)) a.albums.set(p.album, { image: p.image, tracks: [] }); a.albums.get(p.album).tracks.push(p); } }
+    for (const t of singleTracks) { const p = _parse(t, 'single'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); artistMap.get(p.artist).singles.push(p); } }
+
+    if (artistMap.size === 0) { field.innerHTML = '<div class="wl-nebula-empty">Your wishlist is empty</div>'; return; }
+
+    const sorted = [...artistMap.entries()].sort((a, b) => {
+        const ac = [...a[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + a[1].singles.length;
+        const bc = [...b[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + b[1].singles.length;
+        return bc - ac;
+    });
+
+    function _hue(n) { let h = 0; for (let i = 0; i < n.length; i++) h = n.charCodeAt(i) + ((h << 5) - h); return Math.abs(h) % 360; }
+
+    let html = '';
+    sorted.forEach(([name, data], idx) => {
+        const total = [...data.albums.values()].reduce((s, a) => s + a.tracks.length, 0) + data.singles.length;
+        const hasAlbums = data.albums.size > 0;
+        const hue = _hue(name);
+        const sz = total >= 10 ? 'orb-lg' : total >= 4 ? 'orb-md' : 'orb-sm';
+
+        // Enhancement 1: prefer watchlist artist photo over album cover
+        let img = artistImageMap.get(name.toLowerCase()) || '';
+        if (!img) { for (const [, ad] of data.albums) { if (ad.image) { img = ad.image; break; } } }
+        if (!img && data.singles.length) img = data.singles[0].image || '';
+
+        // Enhancement 3: pulse if this artist has albums and current cycle is albums
+        const pulseClass = (hasAlbums && currentCycle === 'albums') ? ' orb-pulse' : '';
+
+        // Enhancement 7: staggered entry animation
+        const delay = Math.min(idx * 60, 800);
+
+        html += `<div class="wl-orb-group" data-artist="${escapeHtml(name)}" style="animation-delay:${delay}ms">`;
+
+        // Enhancement 2: hover tooltip
+        html += `<div class="wl-orb-tooltip">${escapeHtml(name)}<br><span>${total} track${total !== 1 ? 's' : ''}</span></div>`;
+
+        html += `<div class="wl-orb ${sz}${pulseClass}" style="--orb-hue:${hue}" onclick="_toggleOrbExpand(this)">`;
+        html += `<div class="wl-orb-glow"></div>`;
+        html += img ? `<img class="wl-orb-img" src="${img}" alt="">` : `<div class="wl-orb-initials">${escapeHtml(name.substring(0, 2).toUpperCase())}</div>`;
+        html += `<div class="wl-orb-ring"></div>`;
+
+        // Enhancement 5: album art ring (show up to 6 album covers around the orb)
+        const ringCovers = [];
+        for (const [, ad] of data.albums) { if (ad.image && ringCovers.length < 6) ringCovers.push(ad.image); }
+        for (const s of data.singles) { if (s.image && ringCovers.length < 6) ringCovers.push(s.image); }
+        if (ringCovers.length >= 3) {
+            html += `<div class="wl-orb-art-ring">`;
+            ringCovers.forEach((url, i) => {
+                const angle = (360 / ringCovers.length) * i;
+                html += `<img class="wl-art-ring-item" src="${url}" style="--ring-angle:${angle}deg" alt="">`;
+            });
+            html += `</div>`;
+        }
+
+        html += `</div>`; // /orb
+
+        // Enhancement 8: clickable artist name → navigate to artist detail
+        html += `<div class="wl-orb-label" onclick="event.stopPropagation(); _navigateToArtistFromWishlist('${escapeHtml(name)}')" title="View artist">${escapeHtml(name)}</div>`;
+        html += `<div class="wl-orb-meta">${total} track${total !== 1 ? 's' : ''}</div>`;
+
+        // Expanded content
+        html += `<div class="wl-orb-expanded">`;
+        if (data.albums.size > 0) {
+            html += `<div class="wl-album-fan">`;
+            for (const [an, ad] of data.albums) {
+                const tileId = 'wl-tile-' + an.replace(/\W/g, '_') + '_' + idx;
+                html += `<div class="wl-album-tile" data-album="${escapeHtml(an)}" onclick="_toggleAlbumTile(this)">`;
+                html += `<div class="wl-album-tile-art">${ad.image ? `<img src="${ad.image}" alt="">` : `<div class="wl-album-tile-fallback">&#128191;</div>`}</div>`;
+                html += `<div class="wl-album-tile-info"><div class="wl-album-tile-name">${escapeHtml(an)}</div><div class="wl-album-tile-count">${ad.tracks.length} track${ad.tracks.length !== 1 ? 's' : ''}</div></div>`;
+                html += `<span class="wl-album-tile-badge">${ad.tracks.length}</span>`;
+                html += `<button class="wl-album-tile-remove" onclick="event.stopPropagation();_removeWishlistAlbum('${escapeHtml(an)}')" title="Remove album">&#10005;</button>`;
+                // Track list (hidden until tile clicked)
+                html += `<div class="wl-tile-tracks">`;
+                for (const tr of ad.tracks) {
+                    html += `<div class="wl-tile-track">`;
+                    html += `<span class="wl-tile-track-name">${escapeHtml(tr.track)}</span>`;
+                    html += `<button class="wl-tile-track-remove" onclick="event.stopPropagation();_removeWishlistTrack('${escapeHtml(tr.id)}')" title="Remove track">&#10005;</button>`;
+                    html += `</div>`;
+                }
+                html += `</div>`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+        }
+        if (data.singles.length > 0) {
+            html += `<div class="wl-singles-orbit">`;
+            for (const s of data.singles) {
+                html += `<div class="wl-single-moon" data-track-id="${escapeHtml(s.id)}">`;
+                html += s.image ? `<img src="${s.image}" alt="">` : `<span class="wl-moon-fallback">&#11088;</span>`;
+                html += `<div class="wl-moon-label">${escapeHtml(s.track)}</div>`;
+                html += `<button class="wl-moon-remove-btn" onclick="event.stopPropagation();_removeWishlistTrack('${escapeHtml(s.id)}')" title="Remove">&#10005;</button>`;
+                html += `</div>`;
+            }
+            html += `</div>`;
+        }
+        html += `</div></div>`; // /expanded, /group
+    });
+
+    field.innerHTML = html;
+}
+
+// Enhancement 8: navigate to artist detail from wishlist
+function _navigateToArtistFromWishlist(artistName) {
+    // Try to find the artist in the library DB by searching
+    navigateToPage('artists');
+    setTimeout(() => {
+        const searchInput = document.querySelector('.artist-search-input, #artist-search');
+        if (searchInput) { searchInput.value = artistName; searchInput.dispatchEvent(new Event('input')); }
+    }, 300);
+}
+
+function _toggleAlbumTile(tileEl) {
+    const wasExpanded = tileEl.classList.contains('tile-expanded');
+    // Collapse all tiles in this group
+    tileEl.closest('.wl-album-fan')?.querySelectorAll('.wl-album-tile.tile-expanded').forEach(t => t.classList.remove('tile-expanded'));
+    if (!wasExpanded) tileEl.classList.add('tile-expanded');
+}
+
+function _toggleOrbExpand(el) {
+    const g = el.closest('.wl-orb-group');
+    if (!g) return;
+    const was = g.classList.contains('expanded');
+    document.querySelectorAll('.wl-orb-group.expanded').forEach(o => o.classList.remove('expanded'));
+    if (!was) g.classList.add('expanded');
+}
+
+async function _removeWishlistAlbum(albumName) {
+    if (!await showConfirmDialog({ title: 'Remove Album', message: `Remove all tracks from "${albumName}"?`, confirmText: 'Remove', destructive: true })) return;
+    try {
+        const res = await fetch('/api/wishlist/remove-album', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ album_name: albumName }) });
+        const data = await res.json();
+        if (data.success) { showToast(`Removed "${albumName}"`, 'success'); wishlistPageState.isInitialized = false; await initializeWishlistPage(); await updateWishlistCount(); }
+        else showToast(data.error || 'Failed', 'error');
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+async function _removeWishlistTrack(trackId) {
+    try {
+        const res = await fetch('/api/wishlist/remove-track', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ spotify_track_id: trackId }) });
+        const data = await res.json();
+        if (data.success) {
+            showToast('Removed', 'success');
+            await updateWishlistCount();
+            // Re-render nebula to reflect removal
+            wishlistPageState.isInitialized = false;
+            await initializeWishlistPage();
+        }
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+function _filterNebula() {
+    const q = (document.getElementById('wl-nebula-search')?.value || '').toLowerCase().trim();
+    document.querySelectorAll('.wl-orb-group').forEach(g => {
+        const a = (g.dataset.artist || '').toLowerCase();
+        const albums = [...g.querySelectorAll('.wl-satellite')].map(s => (s.dataset.album || '').toLowerCase());
+        const match = !q || a.includes(q) || albums.some(al => al.includes(q));
+        g.style.display = match ? '' : 'none';
+        if (!match) g.classList.remove('expanded');
+    });
+}
+
+async function _nebulaDownload() {
+    // Check if wishlist is already processing
+    try {
+        const statsResp = await fetch('/api/wishlist/stats');
+        if (statsResp.ok) {
+            const stats = await statsResp.json();
+            if (stats.is_auto_processing) {
+                // Navigate to downloads page so the user can see progress
+                navigateToPage('active-downloads');
+                showToast('Wishlist is currently being auto-processed', 'info');
+                return;
+            }
+        }
+        const procResp = await fetch('/api/active-processes');
+        if (procResp.ok) {
+            const procData = await procResp.json();
+            const wishlistBatch = (procData.active_processes || []).find(p => p.playlist_id === 'wishlist');
+            if (wishlistBatch) {
+                // Show the existing download modal
+                WishlistModalState.clearUserClosed();
+                const clientProcess = activeDownloadProcesses['wishlist'];
+                if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+                    clientProcess.modalElement.style.display = 'flex';
+                    WishlistModalState.setVisible();
+                } else {
+                    await rehydrateModal(wishlistBatch, true);
+                }
+                return;
+            }
+        }
+    } catch (e) {}
+
+    // No active process — show category choice
+    const choice = await _showNebulaDownloadChoice();
+    if (choice) await openDownloadMissingWishlistModal(choice);
+}
+
+function _showNebulaDownloadChoice() {
+    return new Promise((resolve) => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.display = 'flex';
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+        const albumCount = document.getElementById('wishlist-stat-albums')?.textContent || '0';
+        const singleCount = document.getElementById('wishlist-stat-singles')?.textContent || '0';
+
+        overlay.innerHTML = `
+            <div class="delete-group-dialog">
+                <div class="delete-group-icon">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="1.8"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                </div>
+                <h3 class="delete-group-title">Download Wishlist</h3>
+                <p class="delete-group-message">Choose which category to process</p>
+                <div class="delete-group-actions">
+                    <button class="delete-group-btn delete-group-keep" id="ndc-albums">
+                        &#128191; Albums &amp; EPs <span style="opacity:0.5;margin-left:6px">${albumCount} tracks</span>
+                    </button>
+                    <button class="delete-group-btn delete-group-keep" id="ndc-singles" style="border-color: rgba(var(--accent-rgb), 0.15); background: rgba(var(--accent-rgb), 0.06);">
+                        &#11088; Singles <span style="opacity:0.5;margin-left:6px">${singleCount} tracks</span>
+                    </button>
+                    <button class="delete-group-btn delete-group-cancel" id="ndc-cancel">Cancel</button>
+                </div>
+            </div>
+        `;
+
+        overlay.querySelector('#ndc-albums').onclick = () => { overlay.remove(); resolve('albums'); };
+        overlay.querySelector('#ndc-singles').onclick = () => { overlay.remove(); resolve('singles'); };
+        overlay.querySelector('#ndc-cancel').onclick = () => { overlay.remove(); resolve(null); };
+
+        document.addEventListener('keydown', function esc(e) {
+            if (e.key === 'Escape') { overlay.remove(); resolve(null); document.removeEventListener('keydown', esc); }
+        });
+
+        document.body.appendChild(overlay);
+    });
+}
+
+function _nebulaBack() {
+    const t = document.getElementById('wishlist-category-tracks');
+    const n = document.getElementById('wishlist-nebula');
+    if (t) t.style.display = 'none';
+    if (n) n.style.display = '';
+    window.selectedWishlistCategory = null;
+    wishlistPageState.isInitialized = false;
+    initializeWishlistPage();
+}
+
+// ── Live processing state for nebula ──
+let _nebulaLivePollInterval = null;
+let _nebulaLastTotal = null;
+
+function _startNebulaLivePolling(currentCycle, artistImageMap) {
+    _stopNebulaLivePolling();
+    _nebulaLastTotal = null;
+
+    _nebulaLivePollInterval = setInterval(async () => {
+        if (currentPage !== 'wishlist') { _stopNebulaLivePolling(); return; }
+
+        try {
+            // Use wishlist stats which has is_auto_processing flag
+            const statsResp = await fetch('/api/wishlist/stats');
+            if (!statsResp.ok) return;
+            const stats = await statsResp.json();
+            const isProcessing = stats.is_auto_processing || false;
+            const newTotal = stats.total || 0;
+
+            // Also check for manual wishlist download batches
+            let hasBatch = false;
+            try {
+                const procResp = await fetch('/api/active-processes');
+                if (procResp.ok) {
+                    const procData = await procResp.json();
+                    hasBatch = (procData.active_processes || []).some(p => p.playlist_id === 'wishlist');
+                }
+            } catch (e) {}
+
+            const active = isProcessing || hasBatch;
+            const nebulaField = document.getElementById('wl-nebula-field');
+            if (!nebulaField) return;
+
+            if (active) {
+                nebulaField.classList.add('nebula-processing');
+                document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
+
+                // Tracks completed — re-render
+                if (_nebulaLastTotal !== null && newTotal < _nebulaLastTotal) {
+                    const [albumRes, singleRes] = await Promise.all([
+                        fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
+                        fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
+                    ]);
+                    _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], artistImageMap, currentCycle);
+
+                    const countEl = document.getElementById('wishlist-page-count');
+                    if (countEl) countEl.textContent = `${newTotal} track${newTotal !== 1 ? 's' : ''}`;
+                    const sa = document.getElementById('wishlist-stat-albums');
+                    const ss = document.getElementById('wishlist-stat-singles');
+                    if (sa) sa.textContent = stats.albums || 0;
+                    if (ss) ss.textContent = stats.singles || 0;
+
+                    // Re-add processing classes after re-render
+                    document.getElementById('wl-nebula-field')?.classList.add('nebula-processing');
+                    document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
+                }
+                _nebulaLastTotal = newTotal;
+            } else {
+                nebulaField.classList.remove('nebula-processing');
+                document.querySelectorAll('.wl-orb-group.orb-processing').forEach(g => g.classList.remove('orb-processing'));
+
+                if (_nebulaLastTotal !== null) {
+                    _nebulaLastTotal = null;
+                    wishlistPageState.isInitialized = false;
+                    await initializeWishlistPage();
+                    await updateWishlistCount();
+                }
+            }
+        } catch (e) {}
+    }, 5000);
+}
+
+function _stopNebulaLivePolling() {
+    if (_nebulaLivePollInterval) {
+        clearInterval(_nebulaLivePollInterval);
+        _nebulaLivePollInterval = null;
+    }
+    _nebulaLastTotal = null;
+}
+
+/**
+ * Sort the watchlist artist grid by the selected criteria.
+ */
+function sortWatchlistArtists(sortBy) {
+    const grid = document.getElementById('watchlist-artists-list');
+    if (!grid) return;
+    const cards = Array.from(grid.querySelectorAll('.watchlist-artist-card'));
+    if (cards.length === 0) return;
+
+    cards.sort((a, b) => {
+        switch (sortBy) {
+            case 'name-asc':
+                return (a.dataset.artistName || '').localeCompare(b.dataset.artistName || '');
+            case 'name-desc':
+                return (b.dataset.artistName || '').localeCompare(a.dataset.artistName || '');
+            case 'scan-oldest': {
+                const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
+                const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
+                return aTime - bTime; // oldest first (never scanned = 0 = top)
+            }
+            case 'scan-newest': {
+                const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
+                const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
+                return bTime - aTime;
+            }
+            case 'added-newest': {
+                const aTime = a.dataset.added ? new Date(a.dataset.added).getTime() : 0;
+                const bTime = b.dataset.added ? new Date(b.dataset.added).getTime() : 0;
+                return bTime - aTime;
+            }
+            default:
+                return 0;
+        }
+    });
+
+    // Re-append in sorted order (preserves event listeners)
+    cards.forEach(card => grid.appendChild(card));
+}
+
+/**
+ * Filter wishlist tracks by search query within the active track list.
+ */
+function filterWishlistTracks() {
+    const input = document.getElementById('wishlist-track-search-input');
+    if (!input) return;
+    const query = input.value.toLowerCase().trim();
+    const tracksList = document.getElementById('wishlist-tracks-list');
+    if (!tracksList) return;
+
+    // For albums view: filter album cards by album name or track names within
+    const albumCards = tracksList.querySelectorAll('.wishlist-album-card');
+    if (albumCards.length > 0) {
+        albumCards.forEach(card => {
+            const albumHeader = card.querySelector('.wishlist-album-header');
+            const albumName = (albumHeader?.querySelector('.wishlist-album-name')?.textContent || '').toLowerCase();
+            const artistName = (albumHeader?.querySelector('.wishlist-album-artist')?.textContent || '').toLowerCase();
+            const tracks = card.querySelectorAll('.wishlist-album-track');
+            let albumHasMatch = !query || albumName.includes(query) || artistName.includes(query);
+
+            // Also check individual track names
+            if (!albumHasMatch && tracks.length > 0) {
+                tracks.forEach(track => {
+                    const trackName = (track.textContent || '').toLowerCase();
+                    if (trackName.includes(query)) albumHasMatch = true;
+                });
+            }
+
+            card.style.display = albumHasMatch ? '' : 'none';
+        });
+        return;
+    }
+
+    // For singles view: filter individual track rows
+    const trackRows = tracksList.querySelectorAll('.playlist-track-item-with-image, .playlist-track-item');
+    trackRows.forEach(row => {
+        const text = (row.textContent || '').toLowerCase();
+        row.style.display = (!query || text.includes(query)) ? '' : 'none';
+    });
+}
+
+/**
+ * Format a Date object as a relative time string (e.g. "2 hours ago")
+ */
+function _formatTimeAgo(date) {
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays === 1) return 'yesterday';
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+
+/**
+ * Show watchlist modal (legacy — kept for backward compatibility)
+ */
+async function showWatchlistModal() {
+    try {
+        // Check if watchlist has any artists
+        const countResponse = await fetch('/api/watchlist/count');
+        const countData = await countResponse.json();
+
+        if (!countData.success) {
+            console.error('Error getting watchlist count:', countData.error);
+            return;
+        }
+
+        if (countData.count === 0) {
+            // Show empty state message
+            alert('Your watchlist is empty!\n\nAdd artists to your watchlist from the Artists page to monitor them for new releases.');
+            return;
+        }
+
+        // Get watchlist artists
+        const artistsResponse = await fetch('/api/watchlist/artists');
+        const artistsData = await artistsResponse.json();
+
+        if (!artistsData.success) {
+            console.error('Error getting watchlist artists:', artistsData.error);
+            return;
+        }
+
+        // Create modal if it doesn't exist
+        let modal = document.getElementById('watchlist-modal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'watchlist-modal';
+            modal.className = 'modal-overlay';
+            document.body.appendChild(modal);
+        }
+
+        // Get scan status and global config
+        const statusResponse = await fetch('/api/watchlist/scan/status');
+        const statusData = await statusResponse.json();
+        const scanStatus = statusData.success ? statusData.status : 'idle';
+
+        let globalOverrideActive = false;
+        try {
+            const globalConfigResponse = await fetch('/api/watchlist/global-config');
+            const globalConfigData = await globalConfigResponse.json();
+            globalOverrideActive = globalConfigData.success && globalConfigData.config.global_override_enabled;
+        } catch (e) {
+            console.debug('Could not fetch global config:', e);
+        }
+
+        // Format countdown timer
+        const nextRunSeconds = countData.next_run_in_seconds || 0;
+        const countdownText = formatCountdownTime(nextRunSeconds);
+
+        // Build modal content
+        modal.innerHTML = `
+            <div class="modal-container playlist-modal watchlist-fullscreen">
+                <div class="playlist-modal-header">
+                    <div class="playlist-header-content" style="width: 100%;">
+                        <h2><svg class="watchlist-header-icon" width="24" height="24" viewBox="0 0 24 24" fill="rgb(var(--accent-rgb))"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> Watchlist</h2>
+                        <div class="playlist-quick-info">
+                            <span class="playlist-track-count">${countData.count} artist${countData.count !== 1 ? 's' : ''}</span>
+                            <span class="playlist-owner" id="watchlist-next-auto-timer">Next Auto${countdownText ? ': ' + countdownText : ''}</span>
+                        </div>
+                        <div class="playlist-modal-sync-status" id="watchlist-scan-status" style="display: ${scanStatus !== 'idle' ? 'flex' : 'none'}; flex-direction: column; align-items: center;">
+                            <!-- Live Visual Activity Display -->
+                            <div id="watchlist-live-activity" class="watchlist-live-activity" style="display: ${scanStatus === 'scanning' ? 'flex' : 'none'};">
+                                <!-- Artist Photo -->
+                                <div class="watchlist-live-activity-col">
+                                    <img id="watchlist-artist-img" class="watchlist-live-activity-artist-img" src="" alt="Artist" onerror="this.style.display='none';" />
+                                    <div id="watchlist-artist-name" class="watchlist-live-activity-label">Waiting...</div>
+                                </div>
+
+                                <!-- Album Cover -->
+                                <div class="watchlist-live-activity-col">
+                                    <img id="watchlist-album-img" class="watchlist-live-activity-album-img" src="" alt="Album" onerror="this.style.display='none';" />
+                                    <div id="watchlist-album-name" class="watchlist-live-activity-label">Waiting...</div>
+                                </div>
+
+                                <!-- Track and Wishlist Feed -->
+                                <div class="watchlist-live-activity-feed">
+                                    <div class="watchlist-live-activity-feed-label">Current Track:</div>
+                                    <div id="watchlist-track-name" class="watchlist-live-activity-track">Waiting...</div>
+
+                                    <div class="watchlist-live-activity-feed-label-orange">✨ Recently Added:</div>
+                                    <div id="watchlist-additions-feed" style="max-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 10px;">
+                                        <!-- Populated by JavaScript -->
+                                    </div>
+                                </div>
+                            </div>
+
+                            ${statusData.summary ? `
+                                <div class="scan-status-summary" style="margin-top: 8px; font-size: 13px; opacity: 0.8;">
+                                    <span class="sync-stat">Artists: ${statusData.summary.total_artists || 0}</span>
+                                    <span class="sync-separator"> • </span>
+                                    <span class="sync-stat">New tracks: ${statusData.summary.new_tracks_found || 0}</span>
+                                    <span class="sync-separator"> • </span>
+                                    <span class="sync-stat">Added to wishlist: ${statusData.summary.tracks_added_to_wishlist || 0}</span>
+                                </div>
+                            ` : ''}
+                        </div>
+                    </div>
+                    <span class="playlist-modal-close" onclick="closeWatchlistModal()">&times;</span>
+                </div>
+
+                <div class="playlist-modal-body">
+                    <div class="watchlist-actions" style="margin-bottom: 16px; display: flex; gap: 12px; align-items: center; padding: 12px 32px; flex-wrap: wrap;">
+                        <button class="playlist-modal-btn playlist-modal-btn-primary watchlist-btn-scan ${scanStatus === 'scanning' ? 'btn-processing' : ''}"
+                                id="scan-watchlist-btn"
+                                onclick="startWatchlistScan()"
+                                ${scanStatus === 'scanning' ? 'disabled' : ''}>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+                            ${scanStatus === 'scanning' ? 'Scanning...' : 'Scan for New Releases'}
+                        </button>
+                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-cancel"
+                                id="cancel-watchlist-scan-btn"
+                                onclick="cancelWatchlistScan()"
+                                style="display: ${scanStatus === 'scanning' ? '' : 'none'};">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+                            Cancel Scan
+                        </button>
+                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-similar"
+                                id="update-similar-artists-btn"
+                                onclick="updateSimilarArtists()"
+                                ${scanStatus === 'scanning' ? 'disabled' : ''}>
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+                            Update Similar Artists
+                        </button>
+                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-settings ${globalOverrideActive ? 'watchlist-global-settings-active' : ''}"
+                                id="watchlist-global-settings-btn"
+                                onclick="openWatchlistGlobalSettingsModal()">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+                            ${globalOverrideActive ? 'Global Override ON' : 'Global Settings'}
+                        </button>
+                    </div>
+
+                    ${globalOverrideActive ? `
+                    <div class="watchlist-global-override-banner" style="margin: 0 32px 12px;">
+                        <span>⚠️</span>
+                        <span>Global override is active — per-artist settings are being ignored during scans.</span>
+                    </div>
+                    ` : ''}
+
+                    <!-- Search Bar -->
+                    <div class="watchlist-search-container" style="margin-bottom: 12px;">
+                        <svg class="watchlist-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="rgba(255,255,255,0.35)"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
+                        <input type="text"
+                               id="watchlist-search-input"
+                               class="watchlist-search-input"
+                               placeholder="Search watchlist..."
+                               oninput="filterWatchlistArtists()">
+                    </div>
+
+                    <!-- Batch action bar -->
+                    <div class="watchlist-batch-bar" id="watchlist-batch-bar">
+                        <label class="watchlist-select-all-label" onclick="event.stopPropagation();">
+                            <input type="checkbox" id="watchlist-select-all-cb" onchange="toggleWatchlistSelectAll(this.checked)">
+                            <span>Select All</span>
+                        </label>
+                        <span class="watchlist-batch-count" id="watchlist-batch-count"></span>
+                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-batch-remove-btn"
+                                id="watchlist-batch-remove-btn"
+                                onclick="batchRemoveFromWatchlist()"
+                                style="display: none;">
+                            Remove Selected
+                        </button>
+                    </div>
+
+                    <div class="watchlist-artists-grid" id="watchlist-artists-list">
+                        ${artistsData.artists.map(artist => {
+            const pills = [];
+            if (artist.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
+            if (artist.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
+            if (artist.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
+            if (artist.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
+            if (artist.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
+            if (artist.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
+            if (artist.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
+            const sourceBadges = [];
+            if (artist.spotify_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-spotify">Spotify</span>');
+            if (artist.itunes_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-itunes">iTunes</span>');
+            if (artist.deezer_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-deezer">Deezer</span>');
+            if (artist.discogs_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-discogs">Discogs</span>');
+            const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id;
+            return `
+                            <div class="watchlist-artist-card"
+                                 data-artist-name="${artist.artist_name.toLowerCase().replace(/"/g, '&quot;')}"
+                                 data-artist-id="${artistPrimaryId}">
+
+                                <label class="watchlist-card-checkbox" onclick="event.stopPropagation();">
+                                    <input type="checkbox" class="watchlist-select-cb"
+                                           data-artist-id="${artistPrimaryId}"
+                                           data-artist-name="${escapeHtml(artist.artist_name)}"
+                                           onchange="updateWatchlistBatchBar()">
+                                    <span class="watchlist-checkbox-custom"></span>
+                                </label>
+
+                                <button class="watchlist-card-gear"
+                                        data-artist-id="${artistPrimaryId}"
+                                        data-artist-name="${escapeHtml(artist.artist_name)}"
+                                        onclick="event.stopPropagation();"
+                                        title="Artist settings">
+                                    <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87a.48.48 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"/></svg>
+                                </button>
+
+                                <div class="watchlist-card-image">
+                                    ${artist.image_url ? `
+                                        <img src="${artist.image_url}"
+                                             alt="${escapeHtml(artist.artist_name)}"
+                                             loading="lazy"
+                                             onerror="this.parentElement.innerHTML='<div class=\\'watchlist-card-image-fallback\\'>🎤</div>';">
+                                    ` : `
+                                        <div class="watchlist-card-image-fallback">🎤</div>
+                                    `}
+                                </div>
+
+                                <div class="watchlist-card-info">
+                                    <span class="watchlist-card-name">${escapeHtml(artist.artist_name)}</span>
+                                    <span class="watchlist-card-meta">${formatRelativeScanTime(artist.last_scan_timestamp)}</span>
+                                </div>
+                                ${sourceBadges.length > 0 ? `<div class="watchlist-card-sources">${sourceBadges.join('')}</div>` : ''}
+                                ${pills.length > 0 ? `<div class="watchlist-card-pills">${pills.join('')}</div>` : ''}
+                            </div>
+                        `}).join('')}
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Add event listeners for gear buttons
+        modal.querySelectorAll('.watchlist-card-gear').forEach(button => {
+            button.addEventListener('click', () => {
+                const artistId = button.getAttribute('data-artist-id');
+                const artistName = button.getAttribute('data-artist-name');
+                openWatchlistArtistConfigModal(artistId, artistName);
+            });
+        });
+
+        // Add click handlers to artist cards (except for gear button or checkbox)
+        modal.querySelectorAll('.watchlist-artist-card').forEach(item => {
+            item.addEventListener('click', (e) => {
+                if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) {
+                    return;
+                }
+
+                const artistId = item.getAttribute('data-artist-id');
+                const artistName = item.querySelector('.watchlist-card-name').textContent;
+
+                console.log(`🎵 Artist card clicked: ${artistName} (${artistId})`);
+                openWatchlistArtistDetailView(artistId, artistName);
+            });
+        });
+
+        // Show modal
+        modal.style.display = 'flex';
+
+        // Start countdown timer update interval
+        startWatchlistCountdownTimer(nextRunSeconds);
+
+        // Start polling for scan status if scanning
+        if (scanStatus === 'scanning') {
+            pollWatchlistScanStatus();
+        }
+
+    } catch (error) {
+        console.error('Error showing watchlist modal:', error);
+    }
+}
+
+function startWatchlistCountdownTimer(initialSeconds) {
+    // Clear any existing interval
+    if (watchlistCountdownInterval) {
+        clearInterval(watchlistCountdownInterval);
+    }
+
+    let remainingSeconds = initialSeconds;
+
+    watchlistCountdownInterval = setInterval(async () => {
+        remainingSeconds--;
+
+        if (remainingSeconds <= 0) {
+            // Timer expired, fetch fresh data
+            try {
+                const response = await fetch('/api/watchlist/count');
+                const data = await response.json();
+                remainingSeconds = data.next_run_in_seconds || 0;
+
+                const timerElement = document.getElementById('watchlist-next-auto-timer');
+                if (timerElement) {
+                    const countdownText = formatCountdownTime(remainingSeconds);
+                    timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
+                }
+            } catch (error) {
+                console.debug('Error updating watchlist countdown:', error);
+            }
+        } else {
+            // Update the display
+            const timerElement = document.getElementById('watchlist-next-auto-timer');
+            if (timerElement) {
+                const countdownText = formatCountdownTime(remainingSeconds);
+                timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
+            }
+        }
+    }, 1000); // Update every second
+}
+
+/**
+ * Close watchlist modal
+ */
+function closeWatchlistModal() {
+    // Stop countdown timer
+    if (watchlistCountdownInterval) {
+        clearInterval(watchlistCountdownInterval);
+        watchlistCountdownInterval = null;
+    }
+
+    const modal = document.getElementById('watchlist-modal');
+    if (modal) {
+        modal.style.display = 'none';
+    }
+}
+
+/**
+ * Populate the linked provider section in the watchlist config modal.
+ * Shows which Spotify/iTunes/Deezer artist is linked and allows changing it.
+ */
+function _populateLinkedProviderSection(artistId, artistName, spotifyId, itunesId, artistInfo, deezerId, discogsId) {
+    const section = document.getElementById('watchlist-linked-provider-section');
+    const content = document.getElementById('watchlist-linked-provider-content');
+    if (!section || !content) return;
+
+    section.style.display = '';
+
+    const sources = [
+        { key: 'spotify', label: 'Spotify', icon: '🟢', id: spotifyId || '', color: '#1db954' },
+        { key: 'itunes', label: 'Apple Music', icon: '🔴', id: itunesId || '', color: '#fc3c44' },
+        { key: 'deezer', label: 'Deezer', icon: '🟣', id: deezerId || '', color: '#a238ff' },
+        { key: 'discogs', label: 'Discogs', icon: '🟤', id: discogsId || '', color: '#b08968' },
+    ];
+
+    let html = '<div class="wl-linked-sources">';
+    for (const src of sources) {
+        const matched = !!src.id;
+        const shortId = src.id ? (src.id.length > 16 ? src.id.substring(0, 14) + '...' : src.id) : '';
+        html += `
+            <div class="wl-linked-row ${matched ? 'matched' : 'unmatched'}" data-source="${src.key}">
+                <span class="wl-linked-icon">${src.icon}</span>
+                <span class="wl-linked-label">${src.label}</span>
+                <span class="wl-linked-status">${matched
+                ? `<span class="wl-linked-id" title="${escapeHtml(src.id)}">${shortId}</span>`
+                : '<span class="wl-linked-none">Not matched</span>'
+            }</span>
+                <button class="wl-linked-fix-btn" onclick="_openSourceSearch('${src.key}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(artistName)}')">${matched ? 'Fix' : 'Match'}</button>
+                ${matched ? `<button class="wl-linked-clear-btn" onclick="_clearSourceMatch('${src.key}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(artistName)}')" title="Clear this match">&times;</button>` : ''}
+            </div>`;
+    }
+    html += '</div>';
+
+    // Per-source search panel (hidden, populated on Fix/Match click)
+    html += `<div class="wl-linked-search-panel" id="wl-linked-search-panel" style="display:none">
+        <div class="wl-linked-search-header">
+            <span id="wl-linked-search-title">Search</span>
+            <button class="wl-linked-search-close" onclick="document.getElementById('wl-linked-search-panel').style.display='none'">&times;</button>
+        </div>
+        <div class="wl-linked-search-input-row">
+            <input type="text" id="wl-linked-search-input" class="watchlist-linked-search-input"
+                   placeholder="Search..." value="${escapeHtml(artistName)}">
+            <button class="watchlist-linked-search-btn" id="wl-linked-search-go">Search</button>
+        </div>
+        <div class="wl-linked-search-results" id="wl-linked-search-results"></div>
+    </div>`;
+
+    content.innerHTML = html;
+}
+
+/**
+ * Open per-source search panel for fixing a specific provider match.
+ */
+function _openSourceSearch(sourceKey, artistId, artistName) {
+    const panel = document.getElementById('wl-linked-search-panel');
+    if (!panel) return;
+    const labels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs' };
+    document.getElementById('wl-linked-search-title').textContent = `Search ${labels[sourceKey] || sourceKey}`;
+    const input = document.getElementById('wl-linked-search-input');
+    input.value = artistName;
+    document.getElementById('wl-linked-search-results').innerHTML = '';
+    panel.style.display = '';
+    panel.dataset.source = sourceKey;
+    panel.dataset.artistId = artistId;
+    panel.dataset.artistName = artistName;
+    input.focus();
+    input.select();
+
+    const doSearch = () => _searchSourceArtists(sourceKey, artistId);
+    document.getElementById('wl-linked-search-go').onclick = doSearch;
+    input.onkeydown = (e) => { if (e.key === 'Enter') doSearch(); };
+}
+
+async function _searchSourceArtists(sourceKey, watchlistArtistId) {
+    const input = document.getElementById('wl-linked-search-input');
+    const container = document.getElementById('wl-linked-search-results');
+    const query = input?.value?.trim();
+    if (!query || !container) return;
+
+    container.innerHTML = '<div style="padding:12px;color:#888;text-align:center">Searching...</div>';
+
+    try {
+        const response = await fetch('/api/library/search-service', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ service: sourceKey, entity_type: 'artist', query })
+        });
+        const data = await response.json();
+        if (!data.success) throw new Error(data.error);
+
+        const results = data.results || [];
+        if (!results.length) {
+            container.innerHTML = '<div style="padding:12px;color:#888;text-align:center">No artists found</div>';
+            return;
+        }
+
+        let html = '';
+        for (const r of results) {
+            html += `<div class="watchlist-linked-search-result" data-id="${escapeHtml(r.id)}" data-name="${escapeHtml(r.name)}">
+                ${r.image ? `<img src="${r.image}" alt="" class="watchlist-linked-result-img">` :
+                    `<div class="watchlist-linked-result-img-placeholder">🎵</div>`}
+                <div class="watchlist-linked-result-info">
+                    <div class="watchlist-linked-result-name">${escapeHtml(r.name)}</div>
+                    <div class="watchlist-linked-result-meta">${escapeHtml(r.extra || '')}</div>
+                </div>
+                <button class="watchlist-linked-select-btn">Select</button>
+            </div>`;
+        }
+        container.innerHTML = html;
+
+        container.querySelectorAll('.watchlist-linked-search-result').forEach(el => {
+            el.querySelector('.watchlist-linked-select-btn').onclick = async (e) => {
+                e.stopPropagation();
+                await _linkSourceArtist(sourceKey, watchlistArtistId, el.dataset.id, el.dataset.name);
+            };
+        });
+    } catch (err) {
+        console.error(`Error searching ${sourceKey}:`, err);
+        container.innerHTML = '<div style="padding:12px;color:#f44;text-align:center">Search error</div>';
+    }
+}
+
+async function _linkSourceArtist(sourceKey, watchlistArtistId, newId, newName) {
+    try {
+        const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ provider_id: newId, provider: sourceKey })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            showToast(`Failed to link: ${data.error}`, 'error');
+            return;
+        }
+        showToast(`Linked to "${newName}" on ${sourceKey}`, 'success');
+        // Refresh the modal
+        const panel = document.getElementById('wl-linked-search-panel');
+        const artistName = panel?.dataset?.artistName || newName;
+        closeWatchlistArtistConfigModal();
+        setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
+    } catch (err) {
+        showToast('Failed to link artist', 'error');
+    }
+}
+
+async function _clearSourceMatch(sourceKey, watchlistArtistId, artistName) {
+    try {
+        const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ provider_id: '', provider: sourceKey })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            showToast(`Failed to clear: ${data.error}`, 'error');
+            return;
+        }
+        showToast(`Cleared ${sourceKey} match`, 'success');
+        closeWatchlistArtistConfigModal();
+        setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
+    } catch (err) {
+        showToast('Failed to clear match', 'error');
+    }
+}
+
+/**
+ * Open watchlist artist configuration modal
+ * @param {string} artistId - Spotify artist ID
+ * @param {string} artistName - Artist name
+ */
+async function openWatchlistArtistConfigModal(artistId, artistName) {
+    try {
+        console.log(`🎨 Opening config modal for artist: ${artistName} (${artistId})`);
+
+        // Fetch artist config and info
+        const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
+        const data = await response.json();
+
+        if (!data.success) {
+            console.error('Error loading artist config:', data.error);
+            showToast(`Error loading artist configuration: ${data.error}`, 'error');
+            return;
+        }
+
+        const { config, artist, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id, watchlist_name } = data;
+
+        // Populate linked provider section (use DB watchlist_name for mismatch comparison)
+        _populateLinkedProviderSection(artistId, watchlist_name || artistName, spotify_artist_id, itunes_artist_id, artist, deezer_artist_id, discogs_artist_id);
+
+        // Check if global override is active
+        let globalOverrideActive = false;
+        try {
+            const globalResponse = await fetch('/api/watchlist/global-config');
+            const globalData = await globalResponse.json();
+            globalOverrideActive = globalData.success && globalData.config.global_override_enabled;
+        } catch (e) {
+            console.debug('Could not check global config:', e);
+        }
+
+        // Generate hero section
+        const heroHTML = `
+            ${artist.image_url ? `
+                <img src="${artist.image_url}"
+                     alt="${escapeHtml(artist.name)}"
+                     class="watchlist-artist-config-hero-image"
+                     loading="lazy">
+            ` : ''}
+            <div class="watchlist-artist-config-hero-info">
+                <h2 class="watchlist-artist-config-hero-name">${escapeHtml(artist.name)}</h2>
+                <div class="watchlist-artist-config-hero-stats">
+                    <div class="watchlist-artist-config-stat">
+                        <span class="watchlist-artist-config-stat-value">${formatNumber(artist.followers)}</span>
+                        <span class="watchlist-artist-config-stat-label">Followers</span>
+                    </div>
+                    <div class="watchlist-artist-config-stat">
+                        <span class="watchlist-artist-config-stat-value">${artist.popularity}/100</span>
+                        <span class="watchlist-artist-config-stat-label">Popularity</span>
+                    </div>
+                </div>
+                ${artist.genres && artist.genres.length > 0 ? `
+                    <div class="watchlist-artist-config-hero-genres">
+                        ${artist.genres.slice(0, 3).map(genre =>
+            `<span class="watchlist-artist-config-genre-tag">${escapeHtml(genre)}</span>`
+        ).join('')}
+                    </div>
+                ` : ''}
+            </div>
+        `;
+
+        // Populate hero section
+        const heroContainer = document.getElementById('watchlist-artist-config-hero');
+        if (heroContainer) {
+            heroContainer.innerHTML = heroHTML;
+        }
+
+        // Set checkbox states
+        document.getElementById('config-include-albums').checked = config.include_albums;
+        document.getElementById('config-include-eps').checked = config.include_eps;
+        document.getElementById('config-include-singles').checked = config.include_singles;
+        document.getElementById('config-include-live').checked = config.include_live || false;
+        document.getElementById('config-include-remixes').checked = config.include_remixes || false;
+        document.getElementById('config-include-acoustic').checked = config.include_acoustic || false;
+        document.getElementById('config-include-compilations').checked = config.include_compilations || false;
+        document.getElementById('config-include-instrumentals').checked = config.include_instrumentals || false;
+        document.getElementById('config-lookback-days').value = config.lookback_days != null ? String(config.lookback_days) : '';
+
+        // Populate metadata source selector
+        const sourceSelector = document.getElementById('config-metadata-source-selector');
+        if (sourceSelector) {
+            const sources = [
+                { key: 'spotify', label: 'Spotify', id: spotify_artist_id, color: '#1DB954' },
+                { key: 'deezer', label: 'Deezer', id: deezer_artist_id, color: '#A238FF' },
+                { key: 'itunes', label: 'Apple Music', id: itunes_artist_id, color: '#FC3C44' },
+                { key: 'discogs', label: 'Discogs', id: discogs_artist_id, color: '#333' },
+            ];
+            const globalSource = data.global_metadata_source || 'deezer';
+            const currentOverride = config.preferred_metadata_source;
+            const globalLabel = { spotify: 'Spotify', deezer: 'Deezer', itunes: 'Apple Music', discogs: 'Discogs' }[globalSource] || globalSource;
+
+            let html = `<button class="config-msrc-btn ${!currentOverride ? 'active' : ''}" data-source="" title="Use global default (${globalLabel})">
+                <span class="config-msrc-icon">🌐</span><span class="config-msrc-label">Default (${globalLabel})</span>
+            </button>`;
+            for (const src of sources) {
+                if (!src.id) continue;
+                const isActive = currentOverride === src.key;
+                html += `<button class="config-msrc-btn ${isActive ? 'active' : ''}" data-source="${src.key}" style="${isActive ? 'border-color:' + src.color : ''}" title="${src.label}">
+                    <span class="config-msrc-label">${src.label}</span>
+                </button>`;
+            }
+            sourceSelector.innerHTML = html;
+            sourceSelector.querySelectorAll('.config-msrc-btn').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    sourceSelector.querySelectorAll('.config-msrc-btn').forEach(b => {
+                        b.classList.remove('active');
+                        b.style.borderColor = '';
+                    });
+                    btn.classList.add('active');
+                    const color = sources.find(s => s.key === btn.dataset.source)?.color;
+                    if (color) btn.style.borderColor = color;
+                });
+            });
+        }
+
+        // Show global override notice if active
+        const existingNotice = document.querySelector('.global-override-notice');
+        if (existingNotice) existingNotice.remove();
+
+        if (globalOverrideActive) {
+            const notice = document.createElement('div');
+            notice.className = 'global-override-notice watchlist-global-override-banner';
+            notice.innerHTML = '<span>⚠️</span><span>Global override is active — these per-artist settings are currently ignored during scans.</span>';
+            const configBody = document.querySelector('.watchlist-artist-config-body');
+            if (configBody) configBody.insertBefore(notice, configBody.firstChild);
+        }
+
+        // Store artist ID for saving
+        const modal = document.getElementById('watchlist-artist-config-modal');
+        if (modal) {
+            modal.setAttribute('data-artist-id', artistId);
+        }
+
+        // Show modal
+        const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
+        if (overlay) {
+            overlay.classList.remove('hidden');
+        }
+
+        // Add save button handler
+        const saveBtn = document.getElementById('save-artist-config-btn');
+        if (saveBtn) {
+            // Remove old listeners
+            const newSaveBtn = saveBtn.cloneNode(true);
+            saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
+
+            // Add new listener
+            newSaveBtn.addEventListener('click', () => saveWatchlistArtistConfig(artistId));
+        }
+
+    } catch (error) {
+        console.error('Error opening watchlist artist config modal:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Close watchlist artist configuration modal
+ */
+function closeWatchlistArtistConfigModal() {
+    const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+    }
+
+    // Clear hero content
+    const heroContainer = document.getElementById('watchlist-artist-config-hero');
+    if (heroContainer) {
+        heroContainer.innerHTML = '';
+    }
+
+    // Clear linked provider section
+    const linkedContent = document.getElementById('watchlist-linked-provider-content');
+    if (linkedContent) linkedContent.innerHTML = '';
+    const linkedSection = document.getElementById('watchlist-linked-provider-section');
+    if (linkedSection) linkedSection.style.display = 'none';
+}
+
+/**
+ * Open watchlist artist detail view (slides in from right)
+ */
+async function openWatchlistArtistDetailView(artistId, artistName) {
+    try {
+        const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
+        const data = await response.json();
+
+        if (!data.success) {
+            showToast(`Error loading artist info: ${data.error}`, 'error');
+            return;
+        }
+
+        const { config, artist, recent_releases, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id } = data;
+
+        // Remove existing overlay if any
+        const existing = document.querySelector('.watchlist-artist-detail-overlay');
+        if (existing) existing.remove();
+
+        const overlay = document.createElement('div');
+        overlay.className = 'watchlist-artist-detail-overlay';
+
+        // Build pills
+        const pills = [];
+        if (config.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
+        if (config.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
+        if (config.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
+        if (config.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
+        if (config.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
+        if (config.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
+        if (config.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
+
+        // Build scan info
+        const scanTimeText = config.last_scan_timestamp ? formatRelativeScanTime(config.last_scan_timestamp) : 'Never scanned';
+        const dateAddedText = config.date_added ? `Added ${new Date(config.date_added).toLocaleDateString()}` : '';
+
+        // Build metadata tags (style, mood, label)
+        const metaTags = [];
+        if (artist.style) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.style)}</span>`);
+        if (artist.mood) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.mood)}</span>`);
+        if (artist.label) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.label)}</span>`);
+
+        overlay.innerHTML = `
+            ${artist.banner_url ? `
+                <div class="watchlist-detail-banner">
+                    <img src="${artist.banner_url}" alt="" onerror="this.parentElement.remove();">
+                    <div class="watchlist-detail-banner-fade"></div>
+                </div>
+            ` : ''}
+
+            <div class="watchlist-detail-content ${artist.banner_url ? 'has-banner' : ''}">
+                <button class="watchlist-detail-back watchlist-detail-back-btn">
+                    ← Back to Watchlist
+                </button>
+
+                <div class="watchlist-detail-hero">
+                    ${artist.image_url ? `<img src="${artist.image_url}" alt="${escapeHtml(artist.name)}" onerror="this.style.display='none';">` : ''}
+                    <div class="watchlist-detail-hero-info">
+                        <h2 class="watchlist-detail-hero-name">${escapeHtml(artist.name)}</h2>
+                        ${artist.followers || artist.popularity ? `
+                        <div class="watchlist-detail-hero-stats">
+                            ${artist.followers ? `
+                            <div class="watchlist-detail-stat">
+                                <span class="watchlist-detail-stat-value">${formatNumber(artist.followers)}</span>
+                                <span class="watchlist-detail-stat-label">Followers</span>
+                            </div>` : ''}
+                            ${artist.popularity ? `
+                            <div class="watchlist-detail-stat">
+                                <span class="watchlist-detail-stat-value">${artist.popularity}/100</span>
+                                <span class="watchlist-detail-stat-label">Popularity</span>
+                            </div>` : ''}
+                        </div>
+                        ` : ''}
+                        ${artist.genres && artist.genres.length > 0 ? `
+                            <div class="watchlist-detail-hero-genres">
+                                ${artist.genres.map(g => `<span class="watchlist-detail-genre-tag">${escapeHtml(g)}</span>`).join('')}
+                            </div>
+                        ` : ''}
+                    </div>
+                </div>
+
+                ${artist.summary ? `
+                <div class="watchlist-detail-section">
+                    <div class="watchlist-detail-section-title">About</div>
+                    <p class="watchlist-detail-bio">${escapeHtml(artist.summary)}</p>
+                </div>
+                ` : ''}
+
+                ${metaTags.length > 0 ? `
+                <div class="watchlist-detail-section">
+                    <div class="watchlist-detail-section-title">Info</div>
+                    <div class="watchlist-detail-hero-genres">${metaTags.join('')}</div>
+                </div>
+                ` : ''}
+
+                ${recent_releases && recent_releases.length > 0 ? `
+                <div class="watchlist-detail-section">
+                    <div class="watchlist-detail-section-title">Recent Releases</div>
+                    <div class="watchlist-detail-releases">
+                        ${recent_releases.map(r => `
+                            <div class="watchlist-detail-release">
+                                ${r.album_cover_url ? `<img src="${r.album_cover_url}" alt="" onerror="this.style.display='none';">` : ''}
+                                <div class="watchlist-detail-release-info">
+                                    <span class="watchlist-detail-release-name">${escapeHtml(r.album_name)}</span>
+                                    <span class="watchlist-detail-release-meta">${r.release_date}${r.track_count ? ` · ${r.track_count} tracks` : ''}</span>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+                ` : ''}
+
+                <div class="watchlist-detail-section">
+                    <div class="watchlist-detail-section-title">Watchlist</div>
+                    <div class="watchlist-detail-watchlist-info">
+                        <span class="watchlist-card-meta">${scanTimeText}</span>
+                        ${dateAddedText ? `<span class="watchlist-detail-info-sep">·</span><span class="watchlist-card-meta">${dateAddedText}</span>` : ''}
+                    </div>
+                    <div class="watchlist-card-pills" style="padding: 0; margin-top: 8px;">
+                        ${pills.length > 0 ? pills.join('') : '<span class="watchlist-card-meta">No release types enabled</span>'}
+                    </div>
+                </div>
+
+                <div class="watchlist-detail-actions">
+                    <button class="watchlist-detail-discog-btn watchlist-detail-discog-action">View Discography</button>
+                    <button class="watchlist-detail-settings-btn watchlist-detail-settings-action">Settings</button>
+                    <button class="watchlist-detail-remove-btn watchlist-detail-remove-action">Remove from Watchlist</button>
+                </div>
+            </div>
+        `;
+
+        // Wire up event listeners (avoids inline onclick escaping issues)
+        overlay.querySelector('.watchlist-detail-back-btn').addEventListener('click', () => {
+            closeWatchlistArtistDetailView();
+        });
+
+        overlay.querySelector('.watchlist-detail-discog-action').addEventListener('click', () => {
+            // Use the ID matching the active metadata source
+            let discogId, source;
+            const activeSrc = (currentMusicSourceName || '').toLowerCase();
+            if (activeSrc.includes('spotify') && spotify_artist_id) {
+                discogId = spotify_artist_id; source = 'spotify';
+            } else if (activeSrc.includes('discogs') && discogs_artist_id) {
+                discogId = discogs_artist_id; source = 'discogs';
+            } else if (activeSrc.includes('deezer') && deezer_artist_id) {
+                discogId = deezer_artist_id; source = 'deezer';
+            } else if (itunes_artist_id) {
+                discogId = itunes_artist_id; source = 'itunes';
+            } else {
+                discogId = spotify_artist_id || discogs_artist_id || deezer_artist_id || itunes_artist_id;
+                source = spotify_artist_id ? 'spotify' : discogs_artist_id ? 'discogs' : deezer_artist_id ? 'deezer' : 'itunes';
+            }
+            if (discogId) {
+                // Close detail overlay and navigate to Artists page
+                closeWatchlistArtistDetailView();
+                // Navigate to Artists page and load discography
+                navigateToPage('artists');
+                setTimeout(() => {
+                    selectArtistForDetail(
+                        { id: discogId, name: artistName, image_url: artist.image_url || '' },
+                        { source: source }
+                    );
+                }, 200);
+            }
+        });
+
+        overlay.querySelector('.watchlist-detail-settings-action').addEventListener('click', () => {
+            // Remove overlay immediately so it doesn't block the config modal
+            const detailOverlay = document.querySelector('.watchlist-artist-detail-overlay');
+            if (detailOverlay) detailOverlay.remove();
+            openWatchlistArtistConfigModal(artistId, artistName);
+        });
+
+        overlay.querySelector('.watchlist-detail-remove-action').addEventListener('click', () => {
+            removeFromWatchlistModal(artistId, artistName);
+        });
+
+        // Append to body as a fixed overlay
+        document.body.appendChild(overlay);
+        // Trigger slide-in animation
+        requestAnimationFrame(() => overlay.classList.add('visible'));
+
+    } catch (error) {
+        console.error('Error opening artist detail view:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Close watchlist artist detail view (slides out)
+ */
+function closeWatchlistArtistDetailView() {
+    const overlay = document.querySelector('.watchlist-artist-detail-overlay');
+    if (overlay) {
+        overlay.classList.remove('visible');
+        overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
+    }
+}
+
+/**
+ * Open global watchlist settings modal
+ */
+async function openWatchlistGlobalSettingsModal() {
+    try {
+        const response = await fetch('/api/watchlist/global-config');
+        const data = await response.json();
+
+        if (!data.success) {
+            showToast(`Error loading global settings: ${data.error}`, 'error');
+            return;
+        }
+
+        const config = data.config;
+
+        // Populate checkboxes
+        document.getElementById('global-override-enabled').checked = config.global_override_enabled;
+        document.getElementById('global-include-albums').checked = config.include_albums;
+        document.getElementById('global-include-eps').checked = config.include_eps;
+        document.getElementById('global-include-singles').checked = config.include_singles;
+        document.getElementById('global-include-live').checked = config.include_live;
+        document.getElementById('global-include-remixes').checked = config.include_remixes;
+        document.getElementById('global-include-acoustic').checked = config.include_acoustic;
+        document.getElementById('global-include-compilations').checked = config.include_compilations;
+        document.getElementById('global-include-instrumentals').checked = config.include_instrumentals;
+        document.getElementById('global-exclude-terms').value = config.exclude_terms || '';
+
+        // Sync "Include Everything" checkbox
+        syncGlobalIncludeAllCheckbox();
+
+        // Update options visibility based on toggle state
+        toggleGlobalOverrideOptions();
+
+        // Update toggle label border
+        const toggleLabel = document.getElementById('global-override-toggle-label');
+        if (toggleLabel) {
+            toggleLabel.style.border = config.global_override_enabled
+                ? '2px solid rgba(29, 185, 84, 0.5)'
+                : '2px solid rgba(255, 255, 255, 0.1)';
+        }
+
+        // Show modal
+        const overlay = document.getElementById('watchlist-global-config-modal-overlay');
+        if (overlay) overlay.classList.remove('hidden');
+
+    } catch (error) {
+        console.error('Error opening global watchlist settings:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Close global watchlist settings modal
+ */
+function closeWatchlistGlobalSettingsModal() {
+    const overlay = document.getElementById('watchlist-global-config-modal-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+/**
+ * Toggle global override options visibility
+ */
+function toggleGlobalOverrideOptions() {
+    const enabled = document.getElementById('global-override-enabled').checked;
+    const options = document.getElementById('global-override-options');
+    if (options) {
+        options.style.opacity = enabled ? '1' : '0.4';
+        options.style.pointerEvents = enabled ? 'auto' : 'none';
+    }
+
+    // Update toggle label border
+    const toggleLabel = document.getElementById('global-override-toggle-label');
+    if (toggleLabel) {
+        toggleLabel.style.border = enabled
+            ? '2px solid rgba(29, 185, 84, 0.5)'
+            : '2px solid rgba(255, 255, 255, 0.1)';
+    }
+}
+
+/**
+ * Toggle all global include checkboxes
+ */
+function toggleGlobalIncludeAll() {
+    const checked = document.getElementById('global-include-all').checked;
+    ['global-include-albums', 'global-include-eps', 'global-include-singles',
+        'global-include-live', 'global-include-remixes', 'global-include-acoustic',
+        'global-include-compilations', 'global-include-instrumentals'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el) el.checked = checked;
+        });
+}
+
+/**
+ * Sync the "Include Everything" checkbox based on individual checkbox states
+ */
+function syncGlobalIncludeAllCheckbox() {
+    const allIds = ['global-include-albums', 'global-include-eps', 'global-include-singles',
+        'global-include-live', 'global-include-remixes', 'global-include-acoustic',
+        'global-include-compilations', 'global-include-instrumentals'];
+    const allChecked = allIds.every(id => {
+        const el = document.getElementById(id);
+        return el && el.checked;
+    });
+    const includeAllEl = document.getElementById('global-include-all');
+    if (includeAllEl) includeAllEl.checked = allChecked;
+}
+
+/**
+ * Save global watchlist configuration
+ */
+async function saveWatchlistGlobalConfig() {
+    try {
+        const globalOverrideEnabled = document.getElementById('global-override-enabled').checked;
+        const includeAlbums = document.getElementById('global-include-albums').checked;
+        const includeEps = document.getElementById('global-include-eps').checked;
+        const includeSingles = document.getElementById('global-include-singles').checked;
+        const includeLive = document.getElementById('global-include-live').checked;
+        const includeRemixes = document.getElementById('global-include-remixes').checked;
+        const includeAcoustic = document.getElementById('global-include-acoustic').checked;
+        const includeCompilations = document.getElementById('global-include-compilations').checked;
+        const includeInstrumentals = document.getElementById('global-include-instrumentals').checked;
+        const excludeTerms = (document.getElementById('global-exclude-terms').value || '').trim();
+
+        if (globalOverrideEnabled && !includeAlbums && !includeEps && !includeSingles) {
+            showToast('Please select at least one release type', 'error');
+            return;
+        }
+
+        const saveBtn = document.getElementById('save-global-config-btn');
+        if (saveBtn) {
+            saveBtn.disabled = true;
+            saveBtn.textContent = 'Saving...';
+        }
+
+        const response = await fetch('/api/watchlist/global-config', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                global_override_enabled: globalOverrideEnabled,
+                include_albums: includeAlbums,
+                include_eps: includeEps,
+                include_singles: includeSingles,
+                include_live: includeLive,
+                include_remixes: includeRemixes,
+                include_acoustic: includeAcoustic,
+                include_compilations: includeCompilations,
+                include_instrumentals: includeInstrumentals,
+                exclude_terms: excludeTerms,
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast('Global watchlist settings saved', 'success');
+            closeWatchlistGlobalSettingsModal();
+
+            // Refresh the watchlist page to update the grid
+            if (currentPage === 'watchlist') {
+                watchlistPageState.isInitialized = false;
+                await initializeWatchlistPage();
+            }
+        } else {
+            showToast(`Error: ${data.error}`, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error saving global config:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        const saveBtn = document.getElementById('save-global-config-btn');
+        if (saveBtn) {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Save Global Settings';
+        }
+    }
+}
+
+/**
+ * Save watchlist artist configuration
+ * @param {string} artistId - Spotify artist ID
+ */
+async function saveWatchlistArtistConfig(artistId) {
+    try {
+        const includeAlbums = document.getElementById('config-include-albums').checked;
+        const includeEps = document.getElementById('config-include-eps').checked;
+        const includeSingles = document.getElementById('config-include-singles').checked;
+        const includeLive = document.getElementById('config-include-live').checked;
+        const includeRemixes = document.getElementById('config-include-remixes').checked;
+        const includeAcoustic = document.getElementById('config-include-acoustic').checked;
+        const includeCompilations = document.getElementById('config-include-compilations').checked;
+        const includeInstrumentals = document.getElementById('config-include-instrumentals').checked;
+        const lookbackDaysVal = document.getElementById('config-lookback-days').value;
+        const lookbackDays = lookbackDaysVal !== '' ? parseInt(lookbackDaysVal) : null;
+        const activeSourceBtn = document.querySelector('#config-metadata-source-selector .config-msrc-btn.active');
+        const preferredMetadataSource = activeSourceBtn ? (activeSourceBtn.dataset.source || null) : null;
+
+        // Validate at least one release type is selected
+        if (!includeAlbums && !includeEps && !includeSingles) {
+            showToast('Please select at least one release type', 'error');
+            return;
+        }
+
+        // Disable save button
+        const saveBtn = document.getElementById('save-artist-config-btn');
+        if (saveBtn) {
+            saveBtn.disabled = true;
+            saveBtn.textContent = 'Saving...';
+        }
+
+        // Send update to backend
+        const response = await fetch(`/api/watchlist/artist/${artistId}/config`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                include_albums: includeAlbums,
+                include_eps: includeEps,
+                include_singles: includeSingles,
+                include_live: includeLive,
+                include_remixes: includeRemixes,
+                include_acoustic: includeAcoustic,
+                include_compilations: includeCompilations,
+                include_instrumentals: includeInstrumentals,
+                lookback_days: lookbackDays,
+                preferred_metadata_source: preferredMetadataSource,
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast('Artist preferences saved successfully', 'success');
+            closeWatchlistArtistConfigModal();
+
+            // Refresh watchlist page if we're on it
+            if (currentPage === 'watchlist') {
+                watchlistPageState.isInitialized = false;
+                await initializeWatchlistPage();
+            }
+        } else {
+            showToast(`Error saving preferences: ${data.error}`, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error saving watchlist artist config:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        // Re-enable save button
+        const saveBtn = document.getElementById('save-artist-config-btn');
+        if (saveBtn) {
+            saveBtn.disabled = false;
+            saveBtn.textContent = 'Save Preferences';
+        }
+    }
+}
+
+/**
+ * Format large numbers with commas
+ * @param {number} num - Number to format
+ * @returns {string} Formatted number
+ */
+function formatNumber(num) {
+    if (!num) return '0';
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+/**
+ * Format last scan timestamp as relative time
+ */
+function formatRelativeScanTime(isoString) {
+    if (!isoString) return 'Never scanned';
+    const diff = Date.now() - new Date(isoString).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return 'Scanned just now';
+    if (mins < 60) return `Scanned ${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `Scanned ${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    if (days < 30) return `Scanned ${days}d ago`;
+    const months = Math.floor(days / 30);
+    return `Scanned ${months}mo ago`;
+}
+
+/**
+ * Filter watchlist artists based on search input
+ */
+function filterWatchlistArtists() {
+    const searchInput = document.getElementById('watchlist-search-input');
+    const artistsList = document.getElementById('watchlist-artists-list');
+
+    if (!searchInput || !artistsList) return;
+
+    const searchTerm = searchInput.value.toLowerCase().trim();
+    const artistItems = artistsList.querySelectorAll('.watchlist-artist-card');
+
+    artistItems.forEach(item => {
+        const artistName = item.getAttribute('data-artist-name');
+
+        if (!searchTerm || artistName.includes(searchTerm)) {
+            item.style.display = '';
+        } else {
+            item.style.display = 'none';
+        }
+    });
+
+    // Refresh batch bar in case visible selection changed
+    updateWatchlistBatchBar();
+}
+
+/**
+ * Start watchlist scan
+ */
+async function cancelWatchlistScan() {
+    try {
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+        if (cancelBtn) {
+            cancelBtn.disabled = true;
+            cancelBtn.textContent = 'Cancelling...';
+        }
+
+        const response = await fetch('/api/watchlist/scan/cancel', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to cancel scan');
+        }
+
+        showToast('Cancel request sent — scan will stop after current artist', 'info');
+
+    } catch (error) {
+        console.error('Error cancelling watchlist scan:', error);
+        showToast(`Error cancelling scan: ${error.message}`, 'error');
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+        if (cancelBtn) {
+            cancelBtn.disabled = false;
+            cancelBtn.textContent = 'Cancel Scan';
+        }
+    }
+}
+
+async function startWatchlistScan() {
+    try {
+        const button = document.getElementById('scan-watchlist-btn');
+        button.disabled = true;
+        button.textContent = 'Starting scan...';
+        button.classList.add('btn-processing');
+
+        const response = await fetch('/api/watchlist/scan', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to start scan');
+        }
+
+        button.textContent = 'Scanning...';
+
+        // Show cancel button
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+        if (cancelBtn) {
+            cancelBtn.style.display = '';
+            cancelBtn.disabled = false;
+            cancelBtn.textContent = 'Cancel Scan';
+        }
+
+        // Show scan status
+        const statusDiv = document.getElementById('watchlist-scan-status');
+        if (statusDiv) {
+            statusDiv.style.display = 'flex';
+        }
+
+        // Start polling for updates
+        pollWatchlistScanStatus();
+
+    } catch (error) {
+        console.error('Error starting watchlist scan:', error);
+        const button = document.getElementById('scan-watchlist-btn');
+        button.disabled = false;
+        button.textContent = 'Scan for New Releases';
+        button.classList.remove('btn-processing');
+        alert(`Error starting scan: ${error.message}`);
+    }
+}
+
+/**
+ * Poll watchlist scan status
+ */
+function handleWatchlistScanData(data) {
+    const button = document.getElementById('scan-watchlist-btn');
+    const liveActivity = document.getElementById('watchlist-live-activity');
+
+    // Show/hide cancel button based on scan status
+    const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+    if (cancelBtn) {
+        cancelBtn.style.display = data.status === 'scanning' ? '' : 'none';
+    }
+
+    // Update live visual activity display
+    if (liveActivity && data.status === 'scanning') {
+        liveActivity.style.display = 'flex';
+
+        // Update artist image and name
+        const artistImg = document.getElementById('watchlist-artist-img');
+        const artistName = document.getElementById('watchlist-artist-name');
+        if (artistImg && data.current_artist_image_url) {
+            artistImg.src = data.current_artist_image_url;
+            artistImg.style.display = 'block';
+        }
+        if (artistName) {
+            artistName.textContent = data.current_artist_name || 'Processing...';
+        }
+
+        // Update album image and name
+        const albumImg = document.getElementById('watchlist-album-img');
+        const albumName = document.getElementById('watchlist-album-name');
+        if (albumImg && data.current_album_image_url) {
+            albumImg.src = data.current_album_image_url;
+            albumImg.style.display = 'block';
+        } else if (albumImg) {
+            albumImg.style.display = 'none';
+        }
+        if (albumName) {
+            albumName.textContent = data.current_album || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
+        }
+
+        // Update current track
+        const trackName = document.getElementById('watchlist-track-name');
+        if (trackName) {
+            trackName.textContent = data.current_track_name || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
+        }
+
+        // Update wishlist additions feed
+        const additionsFeed = document.getElementById('watchlist-additions-feed');
+        if (additionsFeed) {
+            if (data.recent_wishlist_additions && data.recent_wishlist_additions.length > 0) {
+                additionsFeed.innerHTML = data.recent_wishlist_additions.map(item => `
+                    <div class="watchlist-live-addition-item">
+                        <img src="${item.album_image_url || ''}" alt="" onerror="this.style.display='none';" />
+                        <div class="watchlist-live-addition-item-info">
+                            <div class="watchlist-live-addition-item-track">${item.track_name}</div>
+                            <div class="watchlist-live-addition-item-artist">${item.artist_name}</div>
+                        </div>
+                    </div>
+                `).join('');
+            } else {
+                additionsFeed.innerHTML = '<div class="watchlist-live-addition-empty">No tracks added yet...</div>';
+            }
+        }
+    } else if (liveActivity && data.status !== 'scanning') {
+        liveActivity.style.display = 'none';
+    }
+
+    if (data.status === 'completed') {
+        if (button) {
+            button.disabled = false;
+            button.textContent = 'Scan for New Releases';
+            button.classList.remove('btn-processing');
+        }
+
+        // Hide live activity
+        if (liveActivity) {
+            liveActivity.style.display = 'none';
+        }
+
+        // Show completion message in status div
+        const statusDiv = document.getElementById('watchlist-scan-status');
+        if (statusDiv && data.summary) {
+            const newTracks = data.summary.new_tracks_found || 0;
+            const addedTracks = data.summary.tracks_added_to_wishlist || 0;
+            const totalArtists = data.summary.total_artists || 0;
+            const successfulScans = data.summary.successful_scans || 0;
+
+            let completionMessage = `Scan completed: ${successfulScans}/${totalArtists} artists scanned`;
+            if (newTracks > 0) {
+                completionMessage += `, found ${newTracks} new track${newTracks !== 1 ? 's' : ''}`;
+                if (addedTracks > 0) {
+                    completionMessage += `, added ${addedTracks} to wishlist`;
+                }
+            } else {
+                completionMessage += ', no new tracks found';
+            }
+
+            // Update the scan status display with completion message and summary
+            statusDiv.innerHTML = `
+                <div class="watchlist-scan-completion">
+                    <div class="watchlist-scan-completion-message">${completionMessage}</div>
+                    <div style="font-size: 13px; opacity: 0.8;">
+                        <span class="sync-stat">Artists: ${totalArtists}</span>
+                        <span class="sync-separator"> • </span>
+                        <span class="sync-stat">New tracks: ${newTracks}</span>
+                        <span class="sync-separator"> • </span>
+                        <span class="sync-stat">Added to wishlist: ${addedTracks}</span>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Update watchlist count
+        updateWatchlistButtonCount();
+
+        console.log('Watchlist scan completed:', data.summary);
+
+    } else if (data.status === 'cancelled') {
+        if (button) {
+            button.disabled = false;
+            button.textContent = 'Scan for New Releases';
+            button.classList.remove('btn-processing');
+        }
+
+        // Hide cancel button
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+        if (cancelBtn) {
+            cancelBtn.style.display = 'none';
+            cancelBtn.disabled = false;
+            cancelBtn.textContent = 'Cancel Scan';
+        }
+
+        // Hide live activity
+        if (liveActivity) {
+            liveActivity.style.display = 'none';
+        }
+
+        // Show cancellation message
+        const statusDiv = document.getElementById('watchlist-scan-status');
+        if (statusDiv && data.summary) {
+            const scanned = data.summary.total_artists || 0;
+            const newTracks = data.summary.new_tracks_found || 0;
+            const addedTracks = data.summary.tracks_added_to_wishlist || 0;
+
+            statusDiv.innerHTML = `
+                <div class="watchlist-scan-completion">
+                    <div class="watchlist-scan-completion-message">Scan cancelled after ${scanned} artist${scanned !== 1 ? 's' : ''}</div>
+                    <div style="font-size: 13px; opacity: 0.8;">
+                        <span class="sync-stat">Scanned: ${scanned}</span>
+                        <span class="sync-separator"> &bull; </span>
+                        <span class="sync-stat">New tracks: ${newTracks}</span>
+                        <span class="sync-separator"> &bull; </span>
+                        <span class="sync-stat">Added to wishlist: ${addedTracks}</span>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Update watchlist count
+        updateWatchlistButtonCount();
+
+        showToast('Watchlist scan cancelled', 'info');
+        console.log('Watchlist scan cancelled:', data.summary);
+
+    } else if (data.status === 'error') {
+        if (button) {
+            button.disabled = false;
+            button.textContent = 'Scan for New Releases';
+            button.classList.remove('btn-processing');
+        }
+
+        // Hide cancel button
+        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
+        if (cancelBtn) {
+            cancelBtn.style.display = 'none';
+        }
+
+        // Hide live activity
+        if (liveActivity) {
+            liveActivity.style.display = 'none';
+        }
+
+        console.error('Watchlist scan error:', data.error);
+    }
+}
+
+async function pollWatchlistScanStatus() {
+    if (socketConnected) return; // Phase 5: WS handles scan updates
+    try {
+        const response = await fetch('/api/watchlist/scan/status');
+        const data = await response.json();
+
+        if (data.success) {
+            handleWatchlistScanData(data);
+            if (data.status === 'completed' || data.status === 'error' || data.status === 'cancelled') {
+                return; // Stop polling
+            }
+        }
+
+        // Continue polling if still scanning
+        if (data.success && data.status === 'scanning') {
+            setTimeout(pollWatchlistScanStatus, 2000); // Poll every 2 seconds
+        }
+
+    } catch (error) {
+        console.error('Error polling watchlist scan status:', error);
+    }
+}
+
+/**
+ * Update similar artists for discovery feature
+ */
+async function updateSimilarArtists() {
+    try {
+        const button = document.getElementById('update-similar-artists-btn');
+        const scanButton = document.getElementById('scan-watchlist-btn');
+
+        button.disabled = true;
+        button.textContent = 'Updating...';
+        button.classList.add('btn-processing');
+        if (scanButton) scanButton.disabled = true;
+
+        const response = await fetch('/api/watchlist/update-similar-artists', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to update similar artists');
+        }
+
+        showToast('Updating similar artists in background...', 'success');
+
+        // Poll for completion
+        pollSimilarArtistsUpdate();
+
+    } catch (error) {
+        console.error('Error updating similar artists:', error);
+        const button = document.getElementById('update-similar-artists-btn');
+        const scanButton = document.getElementById('scan-watchlist-btn');
+
+        button.disabled = false;
+        button.textContent = 'Update Similar Artists';
+        button.classList.remove('btn-processing');
+        if (scanButton) scanButton.disabled = false;
+
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Poll similar artists update status
+ */
+async function pollSimilarArtistsUpdate() {
+    try {
+        const response = await fetch('/api/watchlist/similar-artists-status');
+        const data = await response.json();
+
+        if (data.success) {
+            const button = document.getElementById('update-similar-artists-btn');
+            const scanButton = document.getElementById('scan-watchlist-btn');
+
+            if (data.status === 'completed') {
+                if (button) {
+                    button.disabled = false;
+                    button.textContent = 'Update Similar Artists';
+                    button.classList.remove('btn-processing');
+                }
+                if (scanButton) scanButton.disabled = false;
+
+                showToast(`Updated similar artists for ${data.artists_processed || 0} artists!`, 'success');
+                return; // Stop polling
+
+            } else if (data.status === 'error') {
+                if (button) {
+                    button.disabled = false;
+                    button.textContent = 'Update Similar Artists';
+                    button.classList.remove('btn-processing');
+                }
+                if (scanButton) scanButton.disabled = false;
+
+                showToast('Error updating similar artists', 'error');
+                return; // Stop polling
+            } else if (data.status === 'running') {
+                // Update button text with progress
+                if (button && data.current_artist) {
+                    button.textContent = `Updating... (${data.artists_processed || 0}/${data.total_artists || 0})`;
+                }
+            }
+        }
+
+        // Continue polling if still running
+        if (data.success && data.status === 'running') {
+            setTimeout(pollSimilarArtistsUpdate, 1000); // Poll every 1 second
+        }
+
+    } catch (error) {
+        console.error('Error polling similar artists update:', error);
+        const button = document.getElementById('update-similar-artists-btn');
+        const scanButton = document.getElementById('scan-watchlist-btn');
+
+        if (button) {
+            button.disabled = false;
+            button.textContent = 'Update Similar Artists';
+            button.classList.remove('btn-processing');
+        }
+        if (scanButton) scanButton.disabled = false;
+    }
+}
+
+/**
+ * Remove artist from watchlist via modal
+ */
+async function removeFromWatchlistModal(artistId, artistName) {
+    try {
+        const response = await fetch('/api/watchlist/remove', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to remove from watchlist');
+        }
+
+        console.log(`❌ Removed ${artistName} from watchlist`);
+
+        // Close detail view if open
+        closeWatchlistArtistDetailView();
+
+        // Refresh the watchlist page
+        watchlistPageState.isInitialized = false;
+        await initializeWatchlistPage();
+
+        // Update button count
+        updateWatchlistButtonCount();
+
+        // Update any visible artist cards
+        updateArtistCardWatchlistStatus();
+
+    } catch (error) {
+        console.error('Error removing from watchlist:', error);
+        alert(`Error removing ${artistName} from watchlist: ${error.message}`);
+    }
+}
+
+
+/**
+ * Get visible checked checkboxes (not hidden by search filter)
+ */
+function getVisibleCheckedWatchlist() {
+    return Array.from(document.querySelectorAll('.watchlist-select-cb:checked')).filter(cb => {
+        const item = cb.closest('.watchlist-artist-card');
+        return item && item.style.display !== 'none';
+    });
+}
+
+/**
+ * Update the batch action bar based on checkbox selection
+ */
+function updateWatchlistBatchBar() {
+    const checked = getVisibleCheckedWatchlist();
+    const countEl = document.getElementById('watchlist-batch-count');
+    const removeBtn = document.getElementById('watchlist-batch-remove-btn');
+    const selectAllCb = document.getElementById('watchlist-select-all-cb');
+
+    if (checked.length > 0) {
+        countEl.textContent = `${checked.length} selected`;
+        removeBtn.style.display = '';
+    } else {
+        countEl.textContent = '';
+        removeBtn.style.display = 'none';
+    }
+
+    // Update select-all checkbox state
+    if (selectAllCb) {
+        const visible = Array.from(document.querySelectorAll('.watchlist-select-cb')).filter(cb => {
+            const card = cb.closest('.watchlist-artist-card');
+            return card && card.style.display !== 'none';
+        });
+        selectAllCb.checked = visible.length > 0 && checked.length === visible.length;
+        selectAllCb.indeterminate = checked.length > 0 && checked.length < visible.length;
+    }
+}
+
+function toggleWatchlistSelectAll(checked) {
+    const checkboxes = document.querySelectorAll('.watchlist-select-cb');
+    checkboxes.forEach(cb => {
+        const card = cb.closest('.watchlist-artist-card');
+        if (card && card.style.display !== 'none') {
+            cb.checked = checked;
+        }
+    });
+    updateWatchlistBatchBar();
+}
+
+/**
+ * Batch remove selected artists from watchlist
+ */
+async function batchRemoveFromWatchlist() {
+    const checked = getVisibleCheckedWatchlist();
+    if (checked.length === 0) return;
+
+    const count = checked.length;
+    if (!await showConfirmDialog({ title: 'Remove Artists', message: `Remove ${count} artist${count !== 1 ? 's' : ''} from your watchlist?`, confirmText: 'Remove', destructive: true })) return;
+
+    const artistIds = checked.map(cb => cb.getAttribute('data-artist-id'));
+
+    try {
+        const response = await fetch('/api/watchlist/remove-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_ids: artistIds })
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to remove artists');
+        }
+
+        console.log(`❌ Batch removed ${data.removed} artists from watchlist`);
+
+        // Refresh the watchlist page
+        watchlistPageState.isInitialized = false;
+        await initializeWatchlistPage();
+
+        // Update button count
+        updateWatchlistButtonCount();
+
+        // Update any visible artist cards
+        updateArtistCardWatchlistStatus();
+
+    } catch (error) {
+        console.error('Error batch removing from watchlist:', error);
+        alert(`Error removing artists: ${error.message}`);
+    }
+}
+
+// --- Metadata Updater Functions ---
+
+// Global state for metadata update polling
+let metadataUpdatePolling = false;
+let metadataUpdateInterval = null;
+
+/**
+ * Handle metadata update button click
+ */
+async function handleMetadataUpdateButtonClick() {
+    const button = document.getElementById('metadata-update-button');
+    const currentAction = button.textContent;
+
+    if (currentAction === 'Begin Update') {
+        // Get refresh interval from dropdown
+        const refreshSelect = document.getElementById('metadata-refresh-interval');
+        const refreshIntervalDays = refreshSelect.value !== undefined ? parseInt(refreshSelect.value) : 30;
+
+        try {
+            button.disabled = true;
+            button.textContent = 'Starting...';
+
+            const response = await fetch('/api/metadata/start', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ refresh_interval_days: refreshIntervalDays })
+            });
+
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error(data.error || 'Failed to start metadata update');
+            }
+
+            showToast('Metadata update started!', 'success');
+
+            // Start polling for status updates
+            startMetadataUpdatePolling();
+
+        } catch (error) {
+            console.error('Error starting metadata update:', error);
+            button.disabled = false;
+            button.textContent = 'Begin Update';
+            showToast(`Error: ${error.message}`, 'error');
+        }
+    } else {
+        // Stop metadata update
+        try {
+            button.disabled = true;
+            button.textContent = 'Stopping...';
+
+            const response = await fetch('/api/metadata/stop', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to stop metadata update');
+            }
+
+        } catch (error) {
+            console.error('Error stopping metadata update:', error);
+            button.disabled = false;
+            button.textContent = 'Stop Update';
+        }
+    }
+}
+
+/**
+ * Start polling for metadata update status
+ */
+function startMetadataUpdatePolling() {
+    if (metadataUpdatePolling) return; // Already polling
+
+    metadataUpdatePolling = true;
+    metadataUpdateInterval = setInterval(checkMetadataUpdateStatus, 1000); // Poll every second
+
+    // Also check immediately
+    checkMetadataUpdateStatus();
+}
+
+/**
+ * Stop polling for metadata update status
+ */
+function stopMetadataUpdatePolling() {
+    metadataUpdatePolling = false;
+    if (metadataUpdateInterval) {
+        clearInterval(metadataUpdateInterval);
+        metadataUpdateInterval = null;
+    }
+}
+
+/**
+ * Check current metadata update status and update UI
+ */
+async function checkMetadataUpdateStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/metadata/status');
+        const data = await response.json();
+
+        if (data.success && data.status) {
+            updateMetadataProgressUI(data.status);
+
+            // Stop polling if completed or error
+            if (data.status.status === 'completed' || data.status.status === 'error') {
+                stopMetadataUpdatePolling();
+            }
+        }
+
+    } catch (error) {
+        console.warn('Could not fetch metadata update status:', error);
+    }
+}
+
+function updateMetadataStatusFromData(data) {
+    if (!data.success || !data.status) return;
+    const prev = _lastToolStatus['metadata'];
+    _lastToolStatus['metadata'] = data.status.status;
+    if (prev !== undefined && data.status.status === prev && data.status.status !== 'running' && data.status.status !== 'stopping') return;
+    updateMetadataProgressUI(data.status);
+    if (data.status.status === 'completed' || data.status.status === 'error') {
+        stopMetadataUpdatePolling();
+    }
+}
+
+/**
+ * Update metadata progress UI elements
+ */
+function updateMetadataProgressUI(status) {
+    const button = document.getElementById('metadata-update-button');
+    const phaseLabel = document.getElementById('metadata-phase-label');
+    const progressLabel = document.getElementById('metadata-progress-label');
+    const progressBar = document.getElementById('metadata-progress-bar');
+    const refreshSelect = document.getElementById('metadata-refresh-interval');
+
+    if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
+
+    if (status.status === 'running') {
+        button.textContent = 'Stop Update';
+        button.disabled = false;
+        refreshSelect.disabled = true;
+
+        // Update current artist display
+        const currentArtist = status.current_artist || 'Processing...';
+        phaseLabel.textContent = `Current Artist: ${currentArtist}`;
+
+        // Update progress
+        const processed = status.processed || 0;
+        const total = status.total || 0;
+        const percentage = status.percentage || 0;
+
+        progressLabel.textContent = `${processed} / ${total} artists (${percentage.toFixed(1)}%)`;
+        progressBar.style.width = `${percentage}%`;
+
+    } else if (status.status === 'stopping') {
+        button.textContent = 'Stopping...';
+        button.disabled = true;
+        phaseLabel.textContent = 'Current Artist: Stopping...';
+
+    } else if (status.status === 'completed') {
+        button.textContent = 'Begin Update';
+        button.disabled = false;
+        refreshSelect.disabled = false;
+
+        phaseLabel.textContent = 'Current Artist: Completed';
+
+        const processed = status.processed || 0;
+        const successful = status.successful || 0;
+        const failed = status.failed || 0;
+
+        progressLabel.textContent = `Completed: ${processed} processed, ${successful} successful, ${failed} failed`;
+        progressBar.style.width = '100%';
+
+        showToast(`Metadata update completed: ${successful} artists updated, ${failed} failed`, 'success');
+
+    } else if (status.status === 'error') {
+        button.textContent = 'Begin Update';
+        button.disabled = false;
+        refreshSelect.disabled = false;
+
+        phaseLabel.textContent = 'Current Artist: Error occurred';
+        progressLabel.textContent = status.error || 'Unknown error';
+        progressBar.style.width = '0%';
+
+    } else {
+        // Idle state
+        button.textContent = 'Begin Update';
+        button.disabled = false;
+        refreshSelect.disabled = false;
+
+        phaseLabel.textContent = 'Current Artist: Not running';
+        progressLabel.textContent = '0 / 0 artists (0.0%)';
+        progressBar.style.width = '0%';
+    }
+}
+
+/**
+ * Check active media server and hide metadata updater if not Plex
+ */
+async function checkAndHideMetadataUpdaterForNonPlex() {
+    try {
+        const response = await fetch('/api/active-media-server');
+        const data = await response.json();
+
+        if (data.success) {
+            const metadataCard = document.getElementById('metadata-updater-card');
+            if (metadataCard) {
+                // Show metadata updater only for Plex and Jellyfin
+                if (data.active_server === 'plex' || data.active_server === 'jellyfin') {
+                    metadataCard.style.display = 'flex';
+                    console.log(`Metadata updater shown: ${data.active_server} is active server`);
+
+                    // Update the header text to reflect the current server
+                    const headerElement = metadataCard.querySelector('.card-header h3');
+                    if (headerElement) {
+                        const serverDisplayName = data.active_server.charAt(0).toUpperCase() + data.active_server.slice(1);
+                        headerElement.textContent = `${serverDisplayName} Metadata Updater`;
+                    }
+
+                    // Update the description based on the server type
+                    const descElement = metadataCard.querySelector('.metadata-updater-description');
+                    if (descElement) {
+                        if (data.active_server === 'jellyfin') {
+                            descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Jellyfin server for artists without photos.';
+                        } else {
+                            descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Plex server for artists without photos.';
+                        }
+                    }
+                } else {
+                    // Hide metadata updater for Navidrome
+                    metadataCard.style.display = 'none';
+                    console.log(`Metadata updater hidden: ${data.active_server} does not support image uploads`);
+                }
+            }
+        }
+    } catch (error) {
+        console.warn('Could not check active media server for metadata updater visibility:', error);
+    }
+}
+
+async function checkAndShowMediaScanForPlex() {
+    /**
+     * Show media scan tool only for Plex (Jellyfin/Navidrome auto-scan)
+     */
+    try {
+        const response = await fetch('/api/active-media-server');
+        const data = await response.json();
+
+        if (data.success) {
+            const mediaScanCard = document.getElementById('media-scan-card');
+            if (mediaScanCard) {
+                // Show media scan tool only for Plex
+                if (data.active_server === 'plex') {
+                    mediaScanCard.style.display = 'flex';
+                    console.log('Media scan tool shown: Plex is active server');
+                } else {
+                    // Hide for Jellyfin/Navidrome (they auto-scan)
+                    mediaScanCard.style.display = 'none';
+                    console.log(`Media scan tool hidden: ${data.active_server} auto-scans`);
+                }
+            }
+        }
+    } catch (error) {
+        console.warn('Could not check active media server for media scan visibility:', error);
+    }
+}
+
+async function handleMediaScanButtonClick() {
+    /**
+     * Trigger a manual Plex media library scan
+     */
+    const button = document.getElementById('media-scan-button');
+    const phaseLabel = document.getElementById('media-scan-phase-label');
+    const progressBar = document.getElementById('media-scan-progress-bar');
+    const progressLabel = document.getElementById('media-scan-progress-label');
+    const statusValue = document.getElementById('media-scan-status');
+
+    if (!button) return;
+
+    try {
+        // Disable button and update UI
+        button.disabled = true;
+        phaseLabel.textContent = 'Requesting scan...';
+        progressBar.style.width = '30%';
+        progressLabel.textContent = 'Sending scan request to Plex';
+        statusValue.textContent = 'Scanning...';
+        statusValue.style.color = 'rgb(var(--accent-rgb))';
+
+        // Request scan (database update handled by system automation)
+        const response = await fetch('/api/scan/request', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                reason: 'Manual scan triggered from dashboard'
+            })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            // Get delay from API response (graceful fallback to 60 if not provided)
+            const delaySeconds = (result.scan_info && result.scan_info.delay_seconds) || 60;
+            let remainingSeconds = delaySeconds;
+            let countdownInterval = null;
+            let pollInterval = null;
+
+            // Update last scan time
+            const lastTimeEl = document.getElementById('media-scan-last-time');
+            if (lastTimeEl) {
+                const now = new Date();
+                lastTimeEl.textContent = now.toLocaleTimeString();
+            }
+
+            // Start countdown timer (visual feedback during delay)
+            phaseLabel.textContent = 'Scan scheduled...';
+            progressBar.style.width = '0%';
+
+            countdownInterval = setInterval(() => {
+                remainingSeconds--;
+
+                // Update progress bar (0% -> 100% over delay period)
+                const progress = ((delaySeconds - remainingSeconds) / delaySeconds) * 100;
+                progressBar.style.width = `${progress}%`;
+
+                // Update progress label with countdown
+                if (remainingSeconds > 0) {
+                    progressLabel.textContent = `Starting scan in ${remainingSeconds}s...`;
+                } else {
+                    progressLabel.textContent = 'Scan starting now...';
+                }
+
+                // When countdown reaches 0, start polling
+                if (remainingSeconds <= 0) {
+                    clearInterval(countdownInterval);
+
+                    // Transition to scanning phase
+                    phaseLabel.textContent = 'Scan in progress...';
+                    progressBar.style.width = '100%';
+                    progressLabel.textContent = 'Media server is scanning library...';
+                    showToast('📡 Media scan started', 'success', 3000);
+
+                    // Start polling for scan completion (5 minutes = 150 polls × 2s)
+                    let pollCount = 0;
+                    const maxPolls = 150; // 5 minutes
+
+                    pollInterval = setInterval(async () => {
+                        if (socketConnected) return; // Phase 5: WS handles scan status
+                        pollCount++;
+
+                        if (pollCount > maxPolls) {
+                            // Polling timeout after 5 minutes
+                            clearInterval(pollInterval);
+                            button.disabled = false;
+                            phaseLabel.textContent = 'Scan completed';
+                            progressBar.style.width = '0%';
+                            progressLabel.textContent = 'Ready for next scan';
+                            statusValue.textContent = 'Idle';
+                            statusValue.style.color = '#b3b3b3';
+                            showToast('✅ Media scan completed', 'success', 3000);
+                            return;
+                        }
+
+                        try {
+                            const statusResponse = await fetch('/api/scan/status');
+                            const statusData = await statusResponse.json();
+
+                            if (statusData.success && statusData.status) {
+                                const status = statusData.status;
+
+                                // Update status display
+                                if (status.is_scanning) {
+                                    phaseLabel.textContent = 'Media server scanning...';
+                                    progressLabel.textContent = status.progress_message || 'Scan in progress';
+                                } else if (status.status === 'idle') {
+                                    // Scan completed
+                                    clearInterval(pollInterval);
+                                    button.disabled = false;
+                                    phaseLabel.textContent = 'Scan completed successfully';
+                                    progressBar.style.width = '0%';
+                                    progressLabel.textContent = 'Ready for next scan';
+                                    statusValue.textContent = 'Idle';
+                                    statusValue.style.color = '#b3b3b3';
+                                    showToast('✅ Media scan completed', 'success', 3000);
+                                }
+                            }
+                        } catch (pollError) {
+                            console.debug('Scan status poll error:', pollError);
+                        }
+                    }, 2000); // Poll every 2 seconds
+                }
+            }, 1000); // Update countdown every second
+
+        } else {
+            // Error occurred
+            showToast(`❌ Scan request failed: ${result.error}`, 'error', 5000);
+            button.disabled = false;
+            phaseLabel.textContent = 'Scan failed';
+            progressBar.style.width = '0%';
+            progressLabel.textContent = result.error || 'Unknown error';
+            statusValue.textContent = 'Error';
+            statusValue.style.color = '#f44336';
+        }
+
+    } catch (error) {
+        console.error('Error requesting media scan:', error);
+        showToast('❌ Failed to request media scan', 'error', 3000);
+        button.disabled = false;
+        phaseLabel.textContent = 'Error';
+        progressBar.style.width = '0%';
+        progressLabel.textContent = error.message;
+        statusValue.textContent = 'Error';
+        statusValue.style.color = '#f44336';
+    }
+}
+
+/**
+ * Check for ongoing metadata update and restore state on page load
+ */
+async function checkAndRestoreMetadataUpdateState() {
+    try {
+        const response = await fetch('/api/metadata/status');
+        const data = await response.json();
+
+        if (data.success && data.status) {
+            const status = data.status;
+
+            // If metadata update is running, restore the UI state and start polling
+            if (status.status === 'running') {
+                console.log('Found ongoing metadata update, restoring state...');
+                updateMetadataProgressUI(status);
+                startMetadataUpdatePolling();
+            } else if (status.status === 'completed' || status.status === 'error') {
+                // Show final state but don't start polling
+                updateMetadataProgressUI(status);
+            }
+        }
+    } catch (error) {
+        console.warn('Could not check metadata update state on page load:', error);
+    }
+}
+
+// --- Live Log Viewer Functions ---
+
+// Global state for log polling
+let logPolling = false;
+let logInterval = null;
+let lastLogCount = 0;
+
+/**
+ * Initialize the live log viewer for sync page
+ */
+function initializeLiveLogViewer() {
+    const logArea = document.getElementById('sync-log-area');
+    if (!logArea) return;
+
+    // Set initial content
+    logArea.value = 'Loading activity feed...';
+
+    // Start log polling
+    startLogPolling();
+
+    // Initial load
+    loadLogs();
+}
+
+/**
+ * Start polling for logs
+ */
+function startLogPolling() {
+    if (logPolling) return; // Already polling
+
+    logPolling = true;
+    logInterval = setInterval(loadLogs, 3000); // Poll every 3 seconds
+    console.log('📝 Started activity feed polling for sync page');
+}
+
+/**
+ * Stop polling for logs
+ */
+function stopLogPolling() {
+    logPolling = false;
+    if (logInterval) {
+        clearInterval(logInterval);
+        logInterval = null;
+        console.log('📝 Stopped log polling');
+    }
+}
+
+/**
+ * Load and display activity feed as logs
+ */
+async function loadLogs() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/logs');
+        const data = await response.json();
+        updateLogsFromData(data);
+    } catch (error) {
+        console.warn('Could not load activity logs for sync page:', error);
+        const logArea = document.getElementById('sync-log-area');
+        if (logArea && (logArea.value === 'Loading logs...' || logArea.value === '')) {
+            logArea.value = 'Error loading activity feed. Check console for details.';
+        }
+    }
+}
+
+function updateLogsFromData(data) {
+    if (!data.logs || !Array.isArray(data.logs)) return;
+    const logArea = document.getElementById('sync-log-area');
+    if (!logArea) return;
+
+    const logText = data.logs.join('\n');
+
+    // Store current scroll state
+    const wasAtTop = logArea.scrollTop <= 10;
+    const wasUserScrolled = logArea.scrollTop < logArea.scrollHeight - logArea.clientHeight - 10;
+
+    // Update content only if it has changed
+    if (logArea.value !== logText) {
+        logArea.value = logText;
+
+        // Smart scrolling: stay at top for new entries, preserve user position if scrolled
+        if (wasAtTop || !wasUserScrolled) {
+            logArea.scrollTop = 0; // Stay at top since newest entries are now at top
+        }
+    }
+}
+
+/**
+ * Stop log polling when leaving sync page
+ */
+function cleanupSyncPageLogs() {
+    stopLogPolling();
+}
+
+// --- Global Cleanup on Page Unload ---
+// Note: Automatic wishlist processing now runs server-side and continues even when browser is closed
+// ===============================
+
diff --git a/webui/static/artists.js b/webui/static/artists.js
new file mode 100644
index 00000000..910fae45
--- /dev/null
+++ b/webui/static/artists.js
@@ -0,0 +1,4611 @@
+// ARTISTS PAGE FUNCTIONALITY - ELEGANT SEARCH & DISCOVERY
+// ============================================================================
+
+/**
+ * Initialize the artists page when navigated to (only runs once)
+ */
+function initializeArtistsPage() {
+    console.log('🎵 Initializing Artists Page (first time)');
+
+    // Get DOM elements
+    const searchInput = document.getElementById('artists-search-input');
+    const headerSearchInput = document.getElementById('artists-header-search-input');
+    const searchStatus = document.getElementById('artists-search-status');
+    const backButton = document.getElementById('artists-back-button');
+    const detailBackButton = document.getElementById('artist-detail-back-button');
+
+    // Set up event listeners (only need to do this once)
+    if (searchInput) {
+        searchInput.addEventListener('input', handleArtistsSearchInput);
+        searchInput.addEventListener('keypress', handleArtistsSearchKeypress);
+    }
+
+    if (headerSearchInput) {
+        headerSearchInput.addEventListener('input', handleArtistsHeaderSearchInput);
+        headerSearchInput.addEventListener('keypress', handleArtistsSearchKeypress);
+    }
+
+    if (backButton) {
+        backButton.addEventListener('click', () => showArtistsSearchState());
+    }
+
+    if (detailBackButton) {
+        detailBackButton.addEventListener('click', () => {
+            // If there are no search results (user navigated directly to artist),
+            // go straight to the main search view instead of showing an empty results page
+            if (!artistsPageState.searchResults || artistsPageState.searchResults.length === 0) {
+                showArtistsSearchState();
+            } else {
+                showArtistsResultsState();
+            }
+        });
+    }
+
+    // Initialize tabs (only need to do this once)
+    initializeArtistTabs();
+
+    // Mark as initialized
+    artistsPageState.isInitialized = true;
+
+    // Restore previous state instead of always resetting to search
+    restoreArtistsPageState();
+    console.log('✅ Artists Page initialized successfully (ready for navigation)');
+}
+
+/**
+ * Restore the artists page to its previous state
+ */
+function restoreArtistsPageState() {
+    console.log(`🔄 Restoring artists page state: ${artistsPageState.currentView}`);
+
+    switch (artistsPageState.currentView) {
+        case 'results':
+            // Restore search results state
+            if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+                console.log(`📦 Restoring search results for: "${artistsPageState.searchQuery}"`);
+
+                // Restore search input values
+                const searchInput = document.getElementById('artists-search-input');
+                const headerSearchInput = document.getElementById('artists-header-search-input');
+
+                if (searchInput) searchInput.value = artistsPageState.searchQuery;
+                if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
+
+                // Display the cached results
+                displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
+            } else {
+                // No valid results state, fall back to search
+                showArtistsSearchState();
+            }
+            break;
+
+        case 'detail':
+            // Restore artist detail state
+            if (artistsPageState.selectedArtist && artistsPageState.artistDiscography) {
+                console.log(`🎤 Restoring artist detail for: ${artistsPageState.selectedArtist.name}`);
+
+                // First restore search results if they exist
+                if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+                    const searchInput = document.getElementById('artists-search-input');
+                    const headerSearchInput = document.getElementById('artists-header-search-input');
+
+                    if (searchInput) searchInput.value = artistsPageState.searchQuery;
+                    if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
+                }
+
+                // Show artist detail state
+                showArtistDetailState();
+
+                // Update artist info in header
+                updateArtistDetailHeader(artistsPageState.selectedArtist);
+
+                // Display cached discography
+                if (artistsPageState.artistDiscography.albums || artistsPageState.artistDiscography.singles) {
+                    displayArtistDiscography(artistsPageState.artistDiscography);
+                    // Restore cached completion data instead of re-scanning
+                    restoreCachedCompletionData(artistsPageState.selectedArtist.id);
+                }
+            } else {
+                // No valid detail state, fall back to search or results
+                if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
+                    displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
+                } else {
+                    showArtistsSearchState();
+                }
+            }
+            break;
+
+        default:
+        case 'search':
+            // Show search state (but preserve any existing search query)
+            if (artistsPageState.searchQuery) {
+                const searchInput = document.getElementById('artists-search-input');
+                if (searchInput) searchInput.value = artistsPageState.searchQuery;
+            }
+            showArtistsSearchState();
+            break;
+    }
+}
+
+/**
+ * Handle search input with debouncing
+ */
+function handleArtistsSearchInput(event) {
+    const query = event.target.value.trim();
+    updateArtistsSearchStatus('searching');
+
+    // Clear existing timeout
+    if (artistsSearchTimeout) {
+        clearTimeout(artistsSearchTimeout);
+    }
+
+    // Cancel any active search
+    if (artistsSearchController) {
+        artistsSearchController.abort();
+    }
+
+    if (query === '') {
+        updateArtistsSearchStatus('default');
+        return;
+    }
+
+    // Set up new debounced search
+    artistsSearchTimeout = setTimeout(() => {
+        performArtistsSearch(query);
+    }, 1000); // 1 second debounce
+}
+
+/**
+ * Handle header search input (already in results state)
+ */
+function handleArtistsHeaderSearchInput(event) {
+    const query = event.target.value.trim();
+
+    // Update main search input to match
+    const mainInput = document.getElementById('artists-search-input');
+    if (mainInput) {
+        mainInput.value = query;
+    }
+
+    // Trigger search with same debouncing logic
+    handleArtistsSearchInput(event);
+}
+
+/**
+ * Handle Enter key press in search inputs
+ */
+function handleArtistsSearchKeypress(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        const query = event.target.value.trim();
+
+        if (query && query !== artistsPageState.searchQuery) {
+            // Clear timeout and search immediately
+            if (artistsSearchTimeout) {
+                clearTimeout(artistsSearchTimeout);
+            }
+            performArtistsSearch(query);
+        }
+    }
+}
+
+/**
+ * Perform artist search with API call
+ */
+async function performArtistsSearch(query) {
+    console.log(`🔍 Searching for artists: "${query}"`);
+
+    // Check cache first
+    if (artistsPageState.cache.searches[query]) {
+        console.log('📦 Using cached search results');
+        displayArtistsResults(query, artistsPageState.cache.searches[query]);
+        return;
+    }
+
+    // Update status
+    updateArtistsSearchStatus('searching');
+
+    // Show loading cards immediately if we're in results view
+    if (artistsPageState.currentView === 'results') {
+        showSearchLoadingCards();
+    }
+
+    try {
+        // Set up abort controller
+        artistsSearchController = new AbortController();
+
+        const response = await fetch('/api/match/search', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                query: query,
+                context: 'artist'
+            }),
+            signal: artistsSearchController.signal
+        });
+
+        if (!response.ok) {
+            throw new Error(`Search failed: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log(`✅ Found ${data.results?.length || 0} artists`);
+
+        // Transform the results to flatten the nested artist data
+        const transformedResults = (data.results || []).map(result => {
+            // Extract artist data from the nested structure
+            const artist = result.artist || result;
+            return {
+                id: artist.id,
+                name: artist.name,
+                image_url: artist.image_url,
+                genres: artist.genres,
+                popularity: artist.popularity,
+                confidence: result.confidence || 0
+            };
+        });
+
+        console.log('🔧 Transformed results:', transformedResults);
+
+        // Cache the transformed results
+        artistsPageState.cache.searches[query] = transformedResults;
+
+        // Display results
+        displayArtistsResults(query, transformedResults);
+
+    } catch (error) {
+        if (error.name !== 'AbortError') {
+            console.error('❌ Artist search failed:', error);
+
+            // Provide specific error messages based on the error type
+            let errorMessage = 'Search failed. Please try again.';
+            if (error.message.includes('401') || error.message.includes('authentication')) {
+                errorMessage = 'Spotify not authenticated. Please check your API settings.';
+            } else if (error.message.includes('network') || error.message.includes('fetch')) {
+                errorMessage = 'Network error. Please check your connection.';
+            } else if (error.message.includes('timeout')) {
+                errorMessage = 'Search timed out. Please try again.';
+            }
+
+            updateArtistsSearchStatus('error', errorMessage);
+        }
+    } finally {
+        artistsSearchController = null;
+    }
+}
+
+/**
+ * Display artist search results
+ */
+function displayArtistsResults(query, results) {
+    console.log(`📊 Displaying ${results.length} artist results`);
+
+    // Update state
+    artistsPageState.searchQuery = query;
+    artistsPageState.searchResults = results;
+    artistsPageState.currentView = 'results';
+
+    // Update header search input if different
+    const headerInput = document.getElementById('artists-header-search-input');
+    if (headerInput && headerInput.value !== query) {
+        headerInput.value = query;
+    }
+
+    // Show results state
+    showArtistsResultsState();
+
+    // Populate results
+    const container = document.getElementById('artists-cards-container');
+    if (!container) return;
+
+    if (results.length === 0) {
+        container.innerHTML = `
+            <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: rgba(255, 255, 255, 0.6);">
+                <div style="font-size: 24px; margin-bottom: 12px;">🔍</div>
+                <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">No artists found</div>
+                <div style="font-size: 14px;">Try a different search term</div>
+            </div>
+        `;
+        return;
+    }
+
+    // Create artist cards
+    container.innerHTML = results.map(result => createArtistCardHTML(result)).join('');
+    observeLazyBackgrounds(container);
+
+    // Add event listeners to cards
+    container.querySelectorAll('.artist-card').forEach((card, index) => {
+        card.addEventListener('click', () => selectArtistForDetail(results[index]));
+
+        // Extract colors from artist image for dynamic glow
+        const artist = results[index];
+        if (artist.image_url) {
+            extractImageColors(artist.image_url, (colors) => {
+                applyDynamicGlow(card, colors);
+            });
+        }
+    });
+
+    // Update watchlist status for all cards
+    updateArtistCardWatchlistStatus();
+
+    // Lazy load missing artist images
+    console.log('🖼️ Starting lazy load for artist images on Artists page...');
+    if (typeof lazyLoadArtistImages === 'function') {
+        lazyLoadArtistImages(container);
+    } else if (typeof window.lazyLoadArtistImages === 'function') {
+        window.lazyLoadArtistImages(container);
+    } else {
+        console.error('❌ lazyLoadArtistImages function not found!');
+    }
+
+    // Add mouse wheel horizontal scrolling
+    container.addEventListener('wheel', (event) => {
+        if (event.deltaY !== 0) {
+            event.preventDefault();
+            container.scrollLeft += event.deltaY;
+        }
+    });
+}
+
+/**
+ * Lazy load artist images for cards that don't have images yet.
+ * Fetches images asynchronously so search results appear immediately.
+ */
+async function lazyLoadArtistImages(container) {
+    if (!container) {
+        console.error('❌ lazyLoadArtistImages: container is null');
+        return;
+    }
+
+    // Find all cards that need images
+    const cardsNeedingImages = container.querySelectorAll('[data-needs-image="true"]');
+
+    if (cardsNeedingImages.length === 0) {
+        console.log('✅ All artist cards have images');
+        return;
+    }
+
+    console.log(`🖼️ Lazy loading images for ${cardsNeedingImages.length} artist cards`);
+
+    // Load images in parallel (but with a small batch to avoid overwhelming the server)
+    const batchSize = 5;
+    const cards = Array.from(cardsNeedingImages);
+
+    for (let i = 0; i < cards.length; i += batchSize) {
+        const batch = cards.slice(i, i + batchSize);
+
+        await Promise.all(batch.map(async (card) => {
+            const artistId = card.dataset.artistId;
+            if (!artistId) {
+                console.warn('⚠️ Card missing artistId:', card);
+                return;
+            }
+
+            try {
+                console.log(`🔄 Fetching image for artist ${artistId}...`);
+                const response = await fetch(`/api/artist/${artistId}/image`);
+                const data = await response.json();
+
+                console.log(`📥 Got response for ${artistId}:`, data);
+
+                if (data.success && data.image_url) {
+                    // Update the card's background image
+                    // Handle both card types (suggestion-card and artist-card)
+                    if (card.classList.contains('suggestion-card')) {
+                        card.style.backgroundImage = `url(${data.image_url})`;
+                        card.style.backgroundSize = 'cover';
+                        card.style.backgroundPosition = 'center';
+                    } else if (card.classList.contains('artist-card')) {
+                        const bgElement = card.querySelector('.artist-card-background');
+                        if (bgElement) {
+                            // Clear the gradient first, then set the image
+                            bgElement.style.cssText = `background-image: url('${data.image_url}'); background-size: cover; background-position: center;`;
+                        }
+                    }
+
+                    card.dataset.needsImage = 'false';
+                    console.log(`✅ Loaded image for artist ${artistId}`);
+                }
+            } catch (error) {
+                console.error(`❌ Failed to load image for artist ${artistId}:`, error);
+            }
+        }));
+    }
+
+    console.log('✅ Finished lazy loading artist images');
+}
+
+// Make function globally accessible
+window.lazyLoadArtistImages = lazyLoadArtistImages;
+
+/**
+ * Create HTML for an artist card
+ */
+function createArtistCardHTML(artist) {
+    const imageUrl = artist.image_url || '';
+    const genres = artist.genres && artist.genres.length > 0 ?
+        artist.genres.slice(0, 3).join(', ') : 'Various genres';
+    const popularity = artist.popularity || 0;
+
+    // Use data-bg-src for lazy background loading via IntersectionObserver
+    const backgroundAttr = imageUrl ?
+        `data-bg-src="${imageUrl}"` :
+        `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);"`;
+
+    // Format popularity as a percentage for better UX
+    const popularityText = popularity > 0 ? `${popularity}% Popular` : 'Popularity Unknown';
+
+    // Track if image needs to be lazy loaded
+    const needsImage = imageUrl ? 'false' : 'true';
+
+    // Check for MusicBrainz ID
+    let mbIconHTML = '';
+    if (artist.musicbrainz_id) {
+        mbIconHTML = `
+            <div class="mb-card-icon" title="View on MusicBrainz" onclick="event.stopPropagation(); window.open('https://musicbrainz.org/artist/${artist.musicbrainz_id}', '_blank')">
+                <img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">
+            </div>
+        `;
+    }
+
+    return `
+        <div class="artist-card" data-artist-id="${artist.id}" data-needs-image="${needsImage}">
+            ${mbIconHTML}
+            <div class="artist-card-background" ${backgroundAttr}></div>
+            <div class="artist-card-overlay"></div>
+            <div class="artist-card-content">
+                <div class="artist-card-name">${escapeHtml(artist.name)}</div>
+                <div class="artist-card-genres">${escapeHtml(genres)}</div>
+                <div class="artist-card-popularity">
+                    <span class="popularity-icon">🔥</span>
+                    <span>${popularityText}</span>
+                </div>
+                <div class="artist-card-actions">
+                    <div class="watchlist-btn-group">
+                        <button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
+                            <span class="watchlist-icon">👁️</span>
+                            <span class="watchlist-text">Add to Watchlist</span>
+                        </button>
+                        <button class="watchlist-settings-btn hidden" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="event.stopPropagation(); openWatchlistArtistConfigModal('${artist.id}', '${escapeForInlineJs(artist.name)}')" title="Watchlist Settings">&#9881;</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Select an artist and show their discography
+ */
+async function selectArtistForDetail(artist, options = {}) {
+    console.log(`🎤 Selected artist: ${artist.name}`);
+
+    // Cancel any ongoing completion check from previous artist
+    if (artistCompletionController) {
+        console.log('⏹️ Canceling previous artist completion check');
+        artistCompletionController.abort();
+        artistCompletionController = null;
+    }
+
+    // Cancel any ongoing similar artists stream from previous artist
+    if (similarArtistsController) {
+        console.log('⏹️ Canceling previous similar artists stream');
+        similarArtistsController.abort();
+        similarArtistsController = null;
+    }
+
+    // Update state
+    artistsPageState.selectedArtist = artist;
+    artistsPageState.currentView = 'detail';
+    artistsPageState.sourceOverride = options.source || null;
+    artistsPageState.pluginOverride = options.plugin || null;
+
+    // Show detail state
+    showArtistDetailState();
+
+    // Update artist info in header
+    updateArtistDetailHeader(artist);
+
+    // Load discography (pass artist name for cross-source fallback)
+    await loadArtistDiscography(artist.id, artist.name, options.source, options.plugin);
+}
+
+/**
+ * Load artist's discography from Spotify or iTunes
+ * @param {string} artistId - Artist ID (Spotify or iTunes format)
+ * @param {string} [artistName] - Optional artist name for fallback searches
+ */
+async function loadArtistDiscography(artistId, artistName = null, sourceOverride = null, pluginOverride = null) {
+    console.log(`💿 Loading discography for artist: ${artistId} (name: ${artistName}, source: ${sourceOverride || 'auto'})`);
+
+    // Use source-prefixed cache key to avoid ID collisions between sources
+    const cacheKey = sourceOverride ? `${sourceOverride}:${artistId}` : artistId;
+
+    // Check cache first
+    if (artistsPageState.cache.discography[cacheKey]) {
+        console.log('📦 Using cached discography');
+        const cachedDiscography = artistsPageState.cache.discography[cacheKey];
+        displayArtistDiscography(cachedDiscography);
+
+        // Load similar artists in parallel (don't wait) — always uses primary source
+        loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
+            console.error('❌ Error loading similar artists:', err);
+        });
+
+        // Still check completion status for cached data
+        await checkDiscographyCompletion(artistId, cachedDiscography);
+        return;
+    }
+
+    try {
+        // Show loading states
+        showDiscographyLoading();
+
+        // Build URL with optional artist name and source override for fallback
+        let url = `/api/artist/${artistId}/discography`;
+        const params = new URLSearchParams();
+        if (artistName) params.set('artist_name', artistName);
+        if (sourceOverride) params.set('source', sourceOverride);
+        if (pluginOverride) params.set('plugin', pluginOverride);
+        if (params.toString()) url += `?${params.toString()}`;
+
+        // Call the real API endpoint
+        const response = await fetch(url);
+
+        if (!response.ok) {
+            if (response.status === 401) {
+                throw new Error('Spotify not authenticated. Please check your API settings.');
+            }
+            throw new Error(`Failed to load discography: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (data.error) {
+            throw new Error(data.error);
+        }
+
+        const discography = {
+            albums: data.albums || [],
+            singles: data.singles || [],
+            source: data.source || sourceOverride || null,
+        };
+
+        // Update selected artist with full details from backend (includes MusicBrainz ID)
+        if (data.artist) {
+            console.log('✨ Updating artist details with fresh data from backend');
+            artistsPageState.selectedArtist = {
+                ...artistsPageState.selectedArtist,
+                ...data.artist
+            };
+        }
+
+        // Merge artist_info enrichment from discography response
+        if (data.artist_info) {
+            artistsPageState.selectedArtist = {
+                ...artistsPageState.selectedArtist,
+                artist_info: data.artist_info,
+            };
+        }
+
+        // Refresh header with all available data
+        updateArtistDetailHeader(artistsPageState.selectedArtist);
+
+        console.log(`✅ Loaded ${discography.albums.length} albums and ${discography.singles.length} singles`);
+
+        // Cache the results (use source-prefixed key if source override active)
+        artistsPageState.cache.discography[cacheKey] = discography;
+        artistsPageState.artistDiscography = discography;
+
+        // Display results
+        displayArtistDiscography(discography);
+
+        // Load similar artists and check completion in parallel (don't wait)
+        loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
+            console.error('❌ Error loading similar artists:', err);
+        });
+
+        // Check completion status for all albums and singles
+        await checkDiscographyCompletion(artistId, discography);
+
+    } catch (error) {
+        console.error('❌ Failed to load discography:', error);
+        showDiscographyError(error.message);
+    }
+}
+
+/**
+ * Display artist's discography in tabs
+ */
+function displayArtistDiscography(discography) {
+    console.log(`📀 Displaying discography: ${discography.albums?.length || 0} albums, ${discography.singles?.length || 0} singles`);
+
+    // Show Download Discography button(s) if there are any releases
+    const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
+    const _discogWrap = document.getElementById('discog-download-wrap');
+    if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
+    const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
+    if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
+
+    // Populate albums
+    const albumsContainer = document.getElementById('album-cards-container');
+    if (albumsContainer) {
+        if (discography.albums?.length > 0) {
+            albumsContainer.innerHTML = discography.albums.map(album => createAlbumCardHTML(album)).join('');
+            observeLazyBackgrounds(albumsContainer);
+
+            // Add dynamic glow effects and click handlers to album cards
+            albumsContainer.querySelectorAll('.album-card').forEach((card, index) => {
+                const album = discography.albums[index];
+                if (album.image_url) {
+                    extractImageColors(album.image_url, (colors) => {
+                        applyDynamicGlow(card, colors);
+                    });
+                }
+
+                // Add click handler for download missing tracks modal
+                card.addEventListener('click', () => handleArtistAlbumClick(album, 'albums'));
+                card.style.cursor = 'pointer';
+            });
+        } else {
+            albumsContainer.innerHTML = `
+                <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.6);">
+                    <div style="font-size: 18px; margin-bottom: 8px;">💿</div>
+                    <div style="font-size: 14px;">No albums found</div>
+                </div>
+            `;
+        }
+    }
+
+    // Populate singles
+    const singlesContainer = document.getElementById('singles-cards-container');
+    if (singlesContainer) {
+        if (discography.singles?.length > 0) {
+            singlesContainer.innerHTML = discography.singles.map(single => createAlbumCardHTML(single)).join('');
+            observeLazyBackgrounds(singlesContainer);
+
+            // Add dynamic glow effects and click handlers to singles cards
+            singlesContainer.querySelectorAll('.album-card').forEach((card, index) => {
+                const single = discography.singles[index];
+                if (single.image_url) {
+                    extractImageColors(single.image_url, (colors) => {
+                        applyDynamicGlow(card, colors);
+                    });
+                }
+
+                // Add click handler for download missing tracks modal
+                card.addEventListener('click', () => handleArtistAlbumClick(single, 'singles'));
+                card.style.cursor = 'pointer';
+            });
+        } else {
+            singlesContainer.innerHTML = `
+                <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.6);">
+                    <div style="font-size: 18px; margin-bottom: 8px;">🎵</div>
+                    <div style="font-size: 14px;">No singles or EPs found</div>
+                </div>
+            `;
+        }
+    }
+
+    // Auto-switch to Singles tab if no albums but has singles
+    if ((!discography.albums || discography.albums.length === 0) &&
+        discography.singles && discography.singles.length > 0) {
+        console.log('📀 No albums found, auto-switching to Singles & EPs tab');
+
+        // Switch to singles tab
+        const albumsTab = document.getElementById('albums-tab');
+        const singlesTab = document.getElementById('singles-tab');
+        const albumsContent = document.getElementById('albums-content');
+        const singlesContent = document.getElementById('singles-content');
+
+        if (albumsTab && singlesTab && albumsContent && singlesContent) {
+            // Remove active from albums
+            albumsTab.classList.remove('active');
+            albumsContent.classList.remove('active');
+
+            // Add active to singles
+            singlesTab.classList.add('active');
+            singlesContent.classList.add('active');
+        }
+    }
+}
+
+/**
+ * Load similar artists from MusicMap
+ */
+async function loadSimilarArtists(artistName) {
+    if (!artistName) {
+        console.warn('⚠️ No artist name provided for similar artists');
+        return;
+    }
+
+    console.log(`🔍 Loading similar artists for: ${artistName}`);
+
+    // Get DOM elements
+    const section = document.getElementById('similar-artists-section');
+    const loadingEl = document.getElementById('similar-artists-loading');
+    const errorEl = document.getElementById('similar-artists-error');
+    const container = document.getElementById('similar-artists-bubbles-container');
+
+    if (!section || !loadingEl || !errorEl || !container) {
+        console.warn('⚠️ Similar artists section elements not found');
+        return;
+    }
+
+    // Show loading state
+    loadingEl.classList.remove('hidden');
+    errorEl.classList.add('hidden');
+    container.innerHTML = '';
+    section.style.display = 'block';
+
+    try {
+        // Create new abort controller for this similar artists stream
+        similarArtistsController = new AbortController();
+
+        // Use streaming endpoint for real-time bubble creation
+        const url = `/api/artist/similar/${encodeURIComponent(artistName)}/stream`;
+        console.log(`📡 Streaming from: ${url}`);
+
+        const response = await fetch(url, {
+            signal: similarArtistsController.signal
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to fetch similar artists: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let artistCount = 0;
+
+        // Read the stream
+        while (true) {
+            const { done, value } = await reader.read();
+
+            if (done) {
+                console.log('✅ Stream complete');
+                break;
+            }
+
+            // Decode the chunk and add to buffer
+            buffer += decoder.decode(value, { stream: true });
+
+            // Process complete messages (separated by \n\n)
+            const messages = buffer.split('\n\n');
+            buffer = messages.pop() || ''; // Keep incomplete message in buffer
+
+            for (const message of messages) {
+                if (!message.trim() || !message.startsWith('data: ')) continue;
+
+                try {
+                    const jsonData = JSON.parse(message.substring(6)); // Remove 'data: ' prefix
+
+                    if (jsonData.error) {
+                        throw new Error(jsonData.error);
+                    }
+
+                    if (jsonData.artist) {
+                        // Hide loading on first artist
+                        if (artistCount === 0) {
+                            loadingEl.classList.add('hidden');
+                        }
+
+                        // Create and append bubble immediately
+                        const bubble = createSimilarArtistBubble(jsonData.artist);
+                        container.appendChild(bubble);
+                        artistCount++;
+
+                        console.log(`✅ Added bubble for: ${jsonData.artist.name} (${artistCount})`);
+                    }
+
+                    if (jsonData.complete) {
+                        console.log(`🎉 Streaming complete: ${jsonData.total} artists`);
+
+                        if (artistCount === 0) {
+                            loadingEl.classList.add('hidden');
+                            container.innerHTML = `
+                                <div style="width: 100%; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.5);">
+                                    <div style="font-size: 18px; margin-bottom: 8px;">🎵</div>
+                                    <div style="font-size: 14px;">No similar artists found</div>
+                                </div>
+                            `;
+                        } else {
+                            // Lazy load images for similar artists that don't have them
+                            lazyLoadSimilarArtistImages(container);
+                        }
+                    }
+                } catch (parseError) {
+                    console.error('❌ Error parsing stream message:', parseError);
+                }
+            }
+        }
+
+        // Clear the controller when done
+        similarArtistsController = null;
+
+    } catch (error) {
+        // Don't show error if it was aborted (user navigated away)
+        if (error.name === 'AbortError') {
+            console.log('⏹️ Similar artists stream aborted (user navigated to new artist)');
+            loadingEl.classList.add('hidden');
+            return;
+        }
+
+        console.error('❌ Error loading similar artists:', error);
+
+        // Hide loading, show error
+        loadingEl.classList.add('hidden');
+        errorEl.classList.remove('hidden');
+
+        // Also show error message in container
+        container.innerHTML = `
+            <div style="width: 100%; text-align: center; padding: 40px 20px; color: rgba(239, 68, 68, 0.7);">
+                <div style="font-size: 18px; margin-bottom: 8px;">⚠️</div>
+                <div style="font-size: 14px;">${error.message}</div>
+            </div>
+        `;
+    } finally {
+        // Always clear the controller
+        similarArtistsController = null;
+    }
+}
+
+/**
+ * Lazy load images for similar artist bubbles that don't have images
+ */
+async function lazyLoadSimilarArtistImages(container) {
+    if (!container) return;
+
+    const bubblesNeedingImages = container.querySelectorAll('.similar-artist-bubble[data-needs-image="true"]');
+
+    if (bubblesNeedingImages.length === 0) {
+        console.log('✅ All similar artist bubbles have images');
+        return;
+    }
+
+    console.log(`🖼️ Lazy loading images for ${bubblesNeedingImages.length} similar artists`);
+
+    // Load images in parallel batches
+    const batchSize = 5;
+    const bubbles = Array.from(bubblesNeedingImages);
+
+    for (let i = 0; i < bubbles.length; i += batchSize) {
+        const batch = bubbles.slice(i, i + batchSize);
+
+        await Promise.all(batch.map(async (bubble) => {
+            const artistId = bubble.getAttribute('data-artist-id');
+            const artistSource = bubble.getAttribute('data-artist-source') || '';
+            const artistPlugin = bubble.getAttribute('data-artist-plugin') || '';
+            if (!artistId) return;
+
+            try {
+                const params = new URLSearchParams();
+                if (artistSource) params.set('source', artistSource);
+                if (artistPlugin) params.set('plugin', artistPlugin);
+
+                const imageUrl = params.toString()
+                    ? `/api/artist/${encodeURIComponent(artistId)}/image?${params.toString()}`
+                    : `/api/artist/${encodeURIComponent(artistId)}/image`;
+
+                const response = await fetch(imageUrl);
+                const data = await response.json();
+
+                if (data.success && data.image_url) {
+                    const imageContainer = bubble.querySelector('.similar-artist-bubble-image');
+                    if (imageContainer) {
+                        const artistName = bubble.querySelector('.similar-artist-bubble-name')?.textContent || 'Artist';
+                        imageContainer.innerHTML = `<img src="${data.image_url}" alt="${artistName}">`;
+                        bubble.setAttribute('data-needs-image', 'false');
+                        console.log(`✅ Loaded image for similar artist ${artistId}`);
+                    }
+                }
+            } catch (error) {
+                console.warn(`⚠️ Failed to load image for similar artist ${artistId}:`, error);
+            }
+        }));
+    }
+
+    console.log('✅ Finished lazy loading similar artist images');
+}
+
+/**
+ * Display similar artist bubble cards progressively (one at a time with delay)
+ */
+function displaySimilarArtistsProgressively(artists) {
+    const container = document.getElementById('similar-artists-bubbles-container');
+
+    if (!container) {
+        console.warn('⚠️ Similar artists container not found');
+        return;
+    }
+
+    // Clear container
+    container.innerHTML = '';
+
+    // Add each bubble with a delay to simulate progressive loading
+    artists.forEach((artist, index) => {
+        setTimeout(() => {
+            const bubble = createSimilarArtistBubble(artist);
+            container.appendChild(bubble);
+        }, index * 100); // 100ms delay between each bubble
+    });
+
+    console.log(`✅ Displaying ${artists.length} similar artist bubbles progressively`);
+}
+
+/**
+ * Display similar artist bubble cards (all at once - legacy)
+ */
+function displaySimilarArtists(artists) {
+    const container = document.getElementById('similar-artists-bubbles-container');
+
+    if (!container) {
+        console.warn('⚠️ Similar artists container not found');
+        return;
+    }
+
+    // Clear container
+    container.innerHTML = '';
+
+    // Create bubble cards with staggered animation
+    artists.forEach((artist, index) => {
+        const bubble = createSimilarArtistBubble(artist);
+
+        // Add staggered animation delay (50ms per bubble)
+        bubble.style.animationDelay = `${index * 0.05}s`;
+
+        container.appendChild(bubble);
+    });
+
+    console.log(`✅ Displayed ${artists.length} similar artist bubbles`);
+}
+
+/**
+ * Create a similar artist bubble card element
+ */
+function createSimilarArtistBubble(artist) {
+    // Create bubble container
+    const bubble = document.createElement('div');
+    bubble.className = 'similar-artist-bubble';
+    bubble.setAttribute('data-artist-id', artist.id);
+    bubble.setAttribute('data-artist-source', artist.source || '');
+    if (artist.plugin) {
+        bubble.setAttribute('data-artist-plugin', artist.plugin);
+    }
+
+    // Track if image needs lazy loading
+    const hasImage = artist.image_url && artist.image_url.trim() !== '';
+    bubble.setAttribute('data-needs-image', hasImage ? 'false' : 'true');
+
+    // Create image container
+    const imageContainer = document.createElement('div');
+    imageContainer.className = 'similar-artist-bubble-image';
+
+    if (hasImage) {
+        const img = document.createElement('img');
+        img.src = artist.image_url;
+        img.alt = artist.name;
+
+        // Handle image load error
+        img.onerror = () => {
+            console.log(`Failed to load image for ${artist.name}`);
+            imageContainer.innerHTML = `<div class="similar-artist-bubble-image-fallback">🎵</div>`;
+            bubble.setAttribute('data-needs-image', 'true');
+        };
+
+        imageContainer.appendChild(img);
+    } else {
+        // No image - show fallback (will be lazy loaded)
+        imageContainer.innerHTML = `<div class="similar-artist-bubble-image-fallback">🎵</div>`;
+    }
+
+    // Create name element
+    const name = document.createElement('div');
+    name.className = 'similar-artist-bubble-name';
+    name.textContent = artist.name;
+    name.title = artist.name; // Tooltip for full name
+
+    // Optional: Create genres element (hidden by default in CSS)
+    const genres = document.createElement('div');
+    genres.className = 'similar-artist-bubble-genres';
+    if (artist.genres && artist.genres.length > 0) {
+        genres.textContent = artist.genres.slice(0, 2).join(', ');
+    }
+
+    // Assemble bubble
+    bubble.appendChild(imageContainer);
+    bubble.appendChild(name);
+    if (artist.genres && artist.genres.length > 0) {
+        bubble.appendChild(genres);
+    }
+
+    // Add click handler to navigate to artist detail page
+    bubble.addEventListener('click', () => {
+        console.log(`🎵 Clicked similar artist: ${artist.name} (ID: ${artist.id})`);
+        // Navigate to this artist's detail page (same as clicking from search results)
+        selectArtistForDetail(
+            artist,
+            artist.source ? { source: artist.source, plugin: artist.plugin } : {}
+        );
+    });
+
+    return bubble;
+}
+
+/**
+ * Restore cached completion data without re-scanning the database
+ */
+function restoreCachedCompletionData(artistId) {
+    console.log(`📦 Restoring cached completion data for artist: ${artistId}`);
+
+    const cachedData = artistsPageState.cache.completionData[artistId];
+    if (!cachedData) {
+        console.log('⚠️ No cached completion data found, skipping restoration');
+        return;
+    }
+
+    // Restore album completion overlays
+    if (cachedData.albums) {
+        cachedData.albums.forEach(albumCompletion => {
+            updateAlbumCompletionOverlay(albumCompletion, 'albums');
+        });
+        console.log(`✅ Restored ${cachedData.albums.length} album completion overlays`);
+    }
+
+    // Restore singles completion overlays  
+    if (cachedData.singles) {
+        cachedData.singles.forEach(singleCompletion => {
+            updateAlbumCompletionOverlay(singleCompletion, 'singles');
+        });
+        console.log(`✅ Restored ${cachedData.singles.length} single completion overlays`);
+    }
+}
+
+/**
+ * Check completion status for entire discography with streaming updates
+ */
+async function checkDiscographyCompletion(artistId, discography) {
+    console.log(`🔍 Starting streaming completion check for artist: ${artistId}`);
+
+    try {
+        // Create new abort controller for this completion check
+        artistCompletionController = new AbortController();
+
+        // Use fetch with streaming response
+        const response = await fetch(`/api/artist/${artistId}/completion-stream`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                discography: discography,
+                artist_name: artistsPageState.selectedArtist?.name || 'Unknown Artist',
+                source: discography?.source || artistsPageState.sourceOverride || null,
+            }),
+            signal: artistCompletionController.signal
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to start completion check: ${response.status}`);
+        }
+
+        // Handle streaming response
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value);
+            const lines = chunk.split('\n');
+
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    try {
+                        const data = JSON.parse(line.slice(6));
+                        handleStreamingCompletionUpdate(data);
+                    } catch (e) {
+                        console.warn('Failed to parse streaming data:', line);
+                    }
+                }
+            }
+        }
+
+        // Clear the controller when done
+        artistCompletionController = null;
+
+    } catch (error) {
+        // Don't show error if it was aborted (user navigated away)
+        if (error.name === 'AbortError') {
+            console.log('⏹️ Completion check aborted (user navigated to new artist)');
+            return;
+        }
+
+        console.error('❌ Failed to check completion status:', error);
+        showCompletionError();
+    } finally {
+        // Always clear the controller
+        artistCompletionController = null;
+    }
+}
+
+/**
+ * Handle individual streaming completion updates
+ */
+function handleStreamingCompletionUpdate(data) {
+    console.log('🔄 Streaming update received:', data.type, data.name || data.artist_name);
+
+    switch (data.type) {
+        case 'start':
+            console.log(`🎤 Starting completion check for ${data.artist_name} (${data.total_items} items)`);
+            // Initialize cache for this artist if not exists
+            const artistId = artistsPageState.selectedArtist?.id;
+            if (artistId && !artistsPageState.cache.completionData[artistId]) {
+                artistsPageState.cache.completionData[artistId] = {
+                    albums: [],
+                    singles: []
+                };
+            }
+            break;
+
+        case 'album_completion':
+            updateAlbumCompletionOverlay(data, 'albums');
+            // Cache the completion data
+            cacheCompletionData(data, 'albums');
+            console.log(`📀 Updated album: ${data.name} (${data.status})`);
+            break;
+
+        case 'single_completion':
+            updateAlbumCompletionOverlay(data, 'singles');
+            // Cache the completion data
+            cacheCompletionData(data, 'singles');
+            console.log(`🎵 Updated single: ${data.name} (${data.status})`);
+            break;
+
+        case 'error':
+            console.error('❌ Error processing item:', data.name, data.error);
+            // Could show error for specific item
+            break;
+
+        case 'complete':
+            console.log(`✅ Completion check finished (${data.processed_count} items processed)`);
+            break;
+
+        default:
+            console.log('Unknown streaming update type:', data.type);
+    }
+}
+
+/**
+ * Cache completion data for future restoration
+ */
+function cacheCompletionData(completionData, type) {
+    const artistId = artistsPageState.selectedArtist?.id;
+    if (!artistId) return;
+
+    // Ensure cache structure exists
+    if (!artistsPageState.cache.completionData[artistId]) {
+        artistsPageState.cache.completionData[artistId] = {
+            albums: [],
+            singles: []
+        };
+    }
+
+    // Add to appropriate cache array
+    if (type === 'albums') {
+        artistsPageState.cache.completionData[artistId].albums.push(completionData);
+    } else if (type === 'singles') {
+        artistsPageState.cache.completionData[artistId].singles.push(completionData);
+    }
+}
+
+/**
+ * Update completion overlay for a specific album/single
+ */
+function updateAlbumCompletionOverlay(completionData, containerType) {
+    const containerId = containerType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
+    const container = document.getElementById(containerId);
+
+    if (!container) {
+        console.warn(`Container ${containerId} not found`);
+        return;
+    }
+
+    // Find the album card by data-album-id
+    const albumCard = container.querySelector(`[data-album-id="${completionData.id}"]`);
+
+    if (!albumCard) {
+        console.warn(`Album card not found for ID: ${completionData.id}`);
+        return;
+    }
+
+    // Reclassify and move cards when track count reveals single/EP (Discogs lazy fetch)
+    const currentType = albumCard.dataset.albumType;
+    const expectedTracks = completionData.expected_tracks || 0;
+    if (expectedTracks > 0) {
+        albumCard.dataset.totalTracks = expectedTracks;
+        let newType = currentType;
+        if (currentType === 'album' && expectedTracks <= 3) newType = 'single';
+        else if (currentType === 'album' && expectedTracks <= 6) newType = 'ep';
+
+        if (newType !== currentType) {
+            albumCard.dataset.albumType = newType;
+            const typeEl = albumCard.querySelector('.album-card-type');
+            if (typeEl) typeEl.textContent = newType === 'single' ? 'Single' : 'EP';
+
+            // Move card from albums grid to singles grid
+            const singlesGrid = document.getElementById('singles-grid');
+            const singlesSection = singlesGrid?.closest('.discography-section');
+            if (singlesGrid) {
+                albumCard.remove();
+                singlesGrid.appendChild(albumCard);
+                if (singlesSection) singlesSection.style.display = '';
+            }
+        }
+    }
+
+    const overlay = albumCard.querySelector('.completion-overlay');
+    if (!overlay) {
+        console.warn(`Completion overlay not found for album: ${completionData.name}`);
+        return;
+    }
+
+    // Remove existing status classes
+    overlay.classList.remove('checking', 'completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error');
+
+    // Add new status class
+    overlay.classList.add(completionData.status);
+
+    // Update overlay text and content
+    const statusText = getCompletionStatusText(completionData);
+    const progressText = completionData.expected_tracks > 0
+        ? `${completionData.owned_tracks}/${completionData.expected_tracks}`
+        : '';
+
+    overlay.innerHTML = progressText
+        ? `<span class="completion-status">${statusText}</span><span class="completion-progress">${progressText}</span>`
+        : `<span class="completion-status">${statusText}</span>`;
+
+    // Add tooltip with more details
+    overlay.title = `${completionData.name}\n${statusText} (${completionData.completion_percentage}%)\nTracks: ${completionData.owned_tracks}/${completionData.expected_tracks}\nConfidence: ${completionData.confidence}`;
+
+    // Add brief flash animation to indicate update
+    overlay.style.animation = 'none';
+    overlay.offsetHeight; // Trigger reflow
+    overlay.style.animation = 'completionOverlayFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
+
+    console.log(`📊 Updated overlay for "${completionData.name}": ${statusText} (${completionData.completion_percentage}%)`);
+}
+
+/**
+ * Get human-readable status text for completion overlay
+ */
+function getCompletionStatusText(completionData) {
+    switch (completionData.status) {
+        case 'completed':
+            return 'Complete';
+        case 'nearly_complete':
+            return 'Nearly Complete';
+        case 'partial':
+            return 'Partial';
+        case 'missing':
+            return 'Missing';
+        case 'downloading':
+            return 'Downloading...';
+        case 'downloaded':
+            return 'Downloaded';
+        case 'error':
+            return 'Error';
+        default:
+            return 'Unknown';
+    }
+}
+
+/**
+ * Set album to downloaded status after download finishes
+ */
+function setAlbumDownloadedStatus(albumId) {
+    console.log(`✅ [DOWNLOAD COMPLETE] Setting album ${albumId} to downloaded status`);
+
+    const completionData = {
+        id: albumId,
+        status: 'downloaded',
+        owned_tracks: 0,
+        expected_tracks: 0,
+        name: 'Downloaded',
+        completion_percentage: 100
+    };
+
+    // Find if it's in albums or singles container
+    let containerType = 'albums';
+    let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
+    if (!albumCard) {
+        containerType = 'singles';
+        albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
+    }
+
+    if (albumCard) {
+        updateAlbumCompletionOverlay(completionData, containerType);
+        console.log(`✅ [DOWNLOAD COMPLETE] Album ${albumId} set to Downloaded status`);
+    } else {
+        console.warn(`❌ [DOWNLOAD COMPLETE] Album card not found for ID: "${albumId}"`);
+    }
+}
+
+/**
+ * Set album to downloading status
+ */
+function setAlbumDownloadingStatus(albumId, downloaded = 0, total = 0) {
+    console.log(`🔍 [DOWNLOAD STATUS] Searching for album card with ID: "${albumId}"`);
+
+    const completionData = {
+        id: albumId,
+        status: 'downloading',
+        owned_tracks: downloaded,
+        expected_tracks: total,
+        name: 'Downloading',
+        completion_percentage: Math.round((downloaded / total) * 100) || 0
+    };
+
+    // Find if it's in albums or singles container
+    let containerType = 'albums';
+    let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
+    if (!albumCard) {
+        containerType = 'singles';
+        albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
+    }
+
+    if (albumCard) {
+        console.log(`✅ [DOWNLOAD STATUS] Found album card in ${containerType} container, updating overlay`);
+        updateAlbumCompletionOverlay(completionData, containerType);
+    } else {
+        console.warn(`❌ [DOWNLOAD STATUS] Album card not found for ID: "${albumId}"`);
+        // Debug: List all available album cards
+        const allAlbums = document.querySelectorAll('#album-cards-container [data-album-id], #singles-cards-container [data-album-id]');
+        console.log(`🔍 [DEBUG] Available album IDs:`, Array.from(allAlbums).map(card => card.dataset.albumId));
+    }
+}
+
+/**
+ * Show error state on all completion overlays
+ */
+function showCompletionError() {
+    const allOverlays = document.querySelectorAll('.completion-overlay.checking');
+    allOverlays.forEach(overlay => {
+        overlay.classList.remove('checking');
+        overlay.classList.add('error');
+        overlay.innerHTML = '<span class="completion-status">Error</span>';
+        overlay.title = 'Failed to check completion status';
+    });
+}
+
+/**
+ * Create HTML for an album/single card
+ */
+function createAlbumCardHTML(album) {
+    const imageUrl = album.image_url || '';
+    const year = album.release_date ? new Date(album.release_date).getFullYear() : '';
+    const type = album.album_type === 'album' ? 'Album' :
+        album.album_type === 'single' ? 'Single' : 'EP';
+
+    // Use data-bg-src for lazy background loading via IntersectionObserver
+    const backgroundAttr = imageUrl ?
+        `data-bg-src="${imageUrl}"` :
+        `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(24, 156, 71, 0.1) 100%);"`;
+
+    return `
+        <div class="album-card" data-album-id="${album.id}" data-album-name="${escapeHtml(album.name)}" data-album-type="${album.album_type}" data-total-tracks="${album.total_tracks || 0}">
+            <div class="album-card-image" ${backgroundAttr}></div>
+            <div class="completion-overlay checking">
+                <span class="completion-status">Checking...</span>
+            </div>
+            <div class="album-card-content">
+                <div class="album-card-name" title="${escapeHtml(album.name)}">${escapeHtml(album.name)}</div>
+                <div class="album-card-year">${year || 'Unknown'}</div>
+                <div class="album-card-type">${type}</div>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Initialize artist detail tabs
+ */
+function initializeArtistTabs() {
+    const tabButtons = document.querySelectorAll('.artist-tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabName = button.getAttribute('data-tab');
+
+            // Update button states
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+
+            // Update content states
+            tabContents.forEach(content => {
+                content.classList.remove('active');
+                if (content.id === `${tabName}-content`) {
+                    content.classList.add('active');
+                }
+            });
+
+            console.log(`🔄 Switched to ${tabName} tab`);
+        });
+    });
+}
+
+/**
+ * State management functions
+ */
+function showArtistsSearchState() {
+    console.log('🔄 Showing search state');
+
+    // Cancel any ongoing completion check when navigating back to search
+    if (artistCompletionController) {
+        console.log('⏹️ Canceling completion check (navigating back to search)');
+        artistCompletionController.abort();
+        artistCompletionController = null;
+    }
+
+    // Cancel any ongoing similar artists stream when navigating back to search
+    if (similarArtistsController) {
+        console.log('⏹️ Canceling similar artists stream (navigating back to search)');
+        similarArtistsController.abort();
+        similarArtistsController = null;
+    }
+
+    const searchState = document.getElementById('artists-search-state');
+    const resultsState = document.getElementById('artists-results-state');
+    const detailState = document.getElementById('artist-detail-state');
+
+    if (searchState) {
+        searchState.classList.remove('hidden', 'fade-out');
+    }
+    if (resultsState) {
+        resultsState.classList.add('hidden');
+        resultsState.classList.remove('show');
+    }
+    if (detailState) {
+        detailState.classList.add('hidden');
+        detailState.classList.remove('show');
+    }
+
+    artistsPageState.currentView = 'search';
+    updateArtistsSearchStatus('default');
+
+    // Show artist downloads section if there are active downloads
+    showArtistDownloadsSection();
+}
+
+function showArtistsResultsState() {
+    console.log('🔄 Showing results state');
+
+    // Cancel any ongoing completion check when navigating back
+    if (artistCompletionController) {
+        console.log('⏹️ Canceling completion check (navigating back to results)');
+        artistCompletionController.abort();
+        artistCompletionController = null;
+    }
+
+    // Cancel any ongoing similar artists stream when navigating back
+    if (similarArtistsController) {
+        console.log('⏹️ Canceling similar artists stream (navigating back to results)');
+        similarArtistsController.abort();
+        similarArtistsController = null;
+    }
+
+    // Clear artist-specific data when navigating back to results
+    // This ensures that selecting the same artist again will trigger a fresh scan
+    if (artistsPageState.selectedArtist) {
+        const artistId = artistsPageState.selectedArtist.id;
+        console.log(`🗑️ Clearing cached data for artist: ${artistsPageState.selectedArtist.name}`);
+
+        // Clear artist-specific cache data
+        delete artistsPageState.cache.completionData[artistId];
+        delete artistsPageState.cache.discography[artistId];
+
+        // Clear artist state
+        artistsPageState.selectedArtist = null;
+        artistsPageState.artistDiscography = { albums: [], singles: [] };
+    }
+
+    const searchState = document.getElementById('artists-search-state');
+    const resultsState = document.getElementById('artists-results-state');
+    const detailState = document.getElementById('artist-detail-state');
+
+    if (searchState) {
+        searchState.classList.add('fade-out');
+        setTimeout(() => searchState.classList.add('hidden'), 200);
+    }
+    if (resultsState) {
+        resultsState.classList.remove('hidden');
+        setTimeout(() => resultsState.classList.add('show'), 50);
+    }
+    if (detailState) {
+        detailState.classList.add('hidden');
+        detailState.classList.remove('show');
+    }
+
+    artistsPageState.currentView = 'results';
+}
+
+function showArtistDetailState() {
+    console.log('🔄 Showing detail state');
+
+    const searchState = document.getElementById('artists-search-state');
+    const resultsState = document.getElementById('artists-results-state');
+    const detailState = document.getElementById('artist-detail-state');
+
+    if (searchState) {
+        searchState.classList.add('hidden', 'fade-out');
+    }
+    if (resultsState) {
+        resultsState.classList.add('hidden');
+        resultsState.classList.remove('show');
+    }
+    if (detailState) {
+        detailState.classList.remove('hidden');
+        setTimeout(() => detailState.classList.add('show'), 50);
+    }
+
+    artistsPageState.currentView = 'detail';
+}
+
+/**
+ * Update search status text and styling
+ */
+function updateArtistsSearchStatus(status, message = null) {
+    const statusElement = document.getElementById('artists-search-status');
+    if (!statusElement) return;
+
+    // Clear all status classes
+    statusElement.classList.remove('searching', 'error');
+
+    switch (status) {
+        case 'default':
+            statusElement.textContent = 'Start typing to search for artists';
+            break;
+        case 'searching':
+            statusElement.classList.add('searching');
+            statusElement.textContent = 'Searching for artists...';
+            break;
+        case 'error':
+            statusElement.classList.add('error');
+            statusElement.innerHTML = `
+                <div style="margin-bottom: 8px;">${message || 'Search failed. Please try again.'}</div>
+                <button onclick="retryLastSearch()" style="
+                    background: rgba(29, 185, 84, 0.15);
+                    color: rgba(29, 185, 84, 0.9);
+                    border: 1px solid rgba(29, 185, 84, 0.3);
+                    border-radius: 8px;
+                    padding: 4px 12px;
+                    font-size: 12px;
+                    cursor: pointer;
+                    font-family: inherit;
+                " onmouseover="this.style.background='rgba(29, 185, 84, 0.25)'" 
+                onmouseout="this.style.background='rgba(29, 185, 84, 0.15)'">
+                    🔄 Retry Search
+                </button>
+            `;
+            break;
+    }
+}
+
+/**
+ * Retry the last search query
+ */
+function retryLastSearch() {
+    const searchInput = document.getElementById('artists-search-input');
+    const headerSearchInput = document.getElementById('artists-header-search-input');
+
+    // Get the last search query from either input
+    const query = searchInput?.value?.trim() || headerSearchInput?.value?.trim() || artistsPageState.searchQuery;
+
+    if (query) {
+        console.log(`🔄 Retrying search for: "${query}"`);
+        performArtistsSearch(query);
+    }
+}
+
+/**
+ * Update artist detail header with artist info
+ */
+function updateArtistDetailHeader(artist) {
+    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    const info = artist.artist_info || {};
+    const imageUrl = artist.image_url || info.image_url || '';
+
+    // Background blur
+    const heroBg = document.getElementById('artists-hero-bg');
+    if (heroBg) {
+        heroBg.style.backgroundImage = imageUrl ? `url('${imageUrl}')` : 'none';
+    }
+
+    // Artist image
+    const heroImage = document.getElementById('artists-hero-image');
+    if (heroImage) {
+        if (imageUrl) {
+            heroImage.style.backgroundImage = `url('${imageUrl}')`;
+            heroImage.innerHTML = '';
+        } else {
+            heroImage.style.backgroundImage = 'none';
+            heroImage.innerHTML = '<span class="artists-hero-image-fallback">🎤</span>';
+            // Lazy load
+            fetch(`/api/artist/${artist.id}/image`)
+                .then(r => r.json())
+                .then(d => {
+                    if (d.success && d.image_url) {
+                        heroImage.style.backgroundImage = `url('${d.image_url}')`;
+                        heroImage.innerHTML = '';
+                        if (heroBg) heroBg.style.backgroundImage = `url('${d.image_url}')`;
+                        artist.image_url = d.image_url;
+                    }
+                }).catch(() => { });
+        }
+    }
+
+    // Name
+    const heroName = document.getElementById('artists-hero-name');
+    if (heroName) heroName.textContent = artist.name || 'Unknown Artist';
+
+    // Badges (service links — real logos matching library page)
+    const badgesEl = document.getElementById('artists-hero-badges');
+    if (badgesEl) {
+        const _hb = (logo, fallback, title, url) => {
+            const inner = logo
+                ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
+                : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
+            if (url) return `<a class="artists-hero-badge" title="${title}" href="${_esc(url)}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
+            return `<div class="artists-hero-badge" title="${title}">${inner}</div>`;
+        };
+        const badges = [];
+        if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`));
+        if (info.musicbrainz_id || artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${info.musicbrainz_id || artist.musicbrainz_id}`));
+        if (info.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${info.deezer_id}`));
+        if (info.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${info.itunes_artist_id}`));
+        if (info.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', info.lastfm_url));
+        if (info.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', info.genius_url));
+        if (info.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${info.tidal_id}`));
+        if (info.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${info.qobuz_id}`));
+        if (info.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${info.discogs_id}`));
+        badgesEl.innerHTML = badges.join('');
+    }
+
+    // Genres (pill tags — merge with Last.fm tags, deduplicated)
+    const genresEl = document.getElementById('artists-hero-genres');
+    if (genresEl) {
+        let genres = info.genres || artist.genres || [];
+        // Merge Last.fm tags
+        const lfmTags = info.lastfm_tags || [];
+        if (Array.isArray(lfmTags) && lfmTags.length > 0) {
+            const existing = new Set(genres.map(g => g.toLowerCase()));
+            const newTags = lfmTags.filter(t => !existing.has(t.toLowerCase()));
+            genres = [...genres, ...newTags];
+        }
+        if (genres.length > 0) {
+            genresEl.innerHTML = genres.slice(0, 8).map(g =>
+                `<span class="artists-hero-genre-pill">${_esc(g)}</span>`
+            ).join('');
+        } else {
+            genresEl.innerHTML = '';
+        }
+    }
+
+    // Bio (Last.fm bio or summary fallback — matching library page pattern)
+    const bioEl = document.getElementById('artists-hero-bio');
+    if (bioEl) {
+        const bio = info.lastfm_bio || info.bio || '';
+        if (bio) {
+            // Strip HTML tags and "Read more on Last.fm" links
+            let cleanBio = bio.replace(/<a\b[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
+            if (cleanBio) {
+                bioEl.innerHTML = `<span class="artists-hero-bio-text">${_esc(cleanBio)}</span>
+                    <span class="artists-hero-bio-toggle" onclick="this.parentElement.classList.toggle('expanded');this.textContent=this.parentElement.classList.contains('expanded')?'Show less':'Read more'">Read more</span>`;
+                bioEl.style.display = '';
+            } else {
+                bioEl.style.display = 'none';
+            }
+        } else {
+            bioEl.style.display = 'none';
+        }
+    }
+
+    // Stats (Last.fm listeners + playcount, with followers fallback)
+    const statsEl = document.getElementById('artists-hero-stats');
+    if (statsEl) {
+        const _fmtNum = (n) => {
+            if (!n || n <= 0) return '0';
+            if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+            if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+            return n.toLocaleString();
+        };
+        let stats = '';
+        if (info.lastfm_listeners) {
+            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.lastfm_listeners)}</strong> listeners</span>`;
+        }
+        if (info.lastfm_playcount) {
+            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.lastfm_playcount)}</strong> plays</span>`;
+        }
+        if (!stats && info.followers) {
+            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.followers)}</strong> followers</span>`;
+        }
+        statsEl.innerHTML = stats;
+    }
+
+    // Also update old hidden elements for any JS that references them
+    const oldImage = document.getElementById('search-artist-detail-image');
+    if (oldImage && imageUrl) oldImage.style.backgroundImage = `url('${imageUrl}')`;
+    const oldName = document.getElementById('search-artist-detail-name');
+    if (oldName) oldName.textContent = artist.name;
+
+    // Initialize watchlist button
+    initializeArtistDetailWatchlistButton(artist);
+}
+
+/**
+ * Initialize watchlist button for artist detail page
+ */
+async function initializeArtistDetailWatchlistButton(artist) {
+    const button = document.getElementById('artist-detail-watchlist-btn');
+    if (!button) return;
+
+    console.log(`🔧 Initializing watchlist button for artist: ${artist.name} (${artist.id})`);
+
+    // Store artist info on the button for settings gear access
+    button.dataset.artistId = artist.id;
+    button.dataset.artistName = artist.name;
+
+    // Reset button state completely
+    button.disabled = false;
+    button.classList.remove('watching');
+    button.style.background = '';
+    button.style.cursor = '';
+
+    // Remove any existing click handlers to prevent duplicates
+    button.onclick = null;
+
+    // Set up new click handler
+    button.onclick = (event) => toggleArtistDetailWatchlist(event, artist.id, artist.name);
+
+    // Check and update current status
+    await updateArtistDetailWatchlistButton(artist.id, artist.name);
+}
+
+/**
+ * Toggle watchlist status for artist detail page
+ */
+async function toggleArtistDetailWatchlist(event, artistId, artistName) {
+    event.preventDefault();
+
+    const button = document.getElementById('artist-detail-watchlist-btn');
+    const icon = button.querySelector('.watchlist-icon');
+    const text = button.querySelector('.watchlist-text');
+
+    // Show loading state
+    const originalText = text.textContent;
+    text.textContent = 'Loading...';
+    button.disabled = true;
+
+    try {
+        // Check current status
+        const checkResponse = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const checkData = await checkResponse.json();
+        if (!checkData.success) {
+            throw new Error(checkData.error || 'Failed to check watchlist status');
+        }
+
+        const isWatching = checkData.is_watching;
+
+        // Toggle watchlist status
+        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
+        const payload = isWatching ?
+            { artist_id: artistId } :
+            { artist_id: artistId, artist_name: artistName };
+
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to update watchlist');
+        }
+
+        // Update button appearance
+        if (isWatching) {
+            // Was watching, now removed
+            icon.textContent = '👁️';
+            text.textContent = 'Add to Watchlist';
+            button.classList.remove('watching');
+            console.log(`❌ Removed ${artistName} from watchlist`);
+        } else {
+            // Was not watching, now added
+            icon.textContent = '👁️';
+            text.textContent = 'Remove from Watchlist';
+            button.classList.add('watching');
+            console.log(`✅ Added ${artistName} to watchlist`);
+        }
+
+        // Show/hide watchlist settings gear
+        const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
+        if (settingsBtn) {
+            if (!isWatching) {
+                // Just added to watchlist — show gear
+                settingsBtn.classList.remove('hidden');
+                settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, artistName);
+            } else {
+                // Just removed from watchlist — hide gear
+                settingsBtn.classList.add('hidden');
+                settingsBtn.onclick = null;
+            }
+        }
+
+        // Update dashboard watchlist count
+        updateWatchlistButtonCount();
+
+        // Update any visible artist cards
+        updateArtistCardWatchlistStatus();
+
+    } catch (error) {
+        console.error('Error toggling watchlist:', error);
+        text.textContent = originalText;
+
+        // Show error feedback
+        const originalBackground = button.style.background;
+        button.style.background = 'rgba(255, 59, 48, 0.3)';
+        setTimeout(() => {
+            button.style.background = originalBackground;
+        }, 2000);
+    } finally {
+        button.disabled = false;
+    }
+}
+
+/**
+ * Update artist detail watchlist button status
+ */
+async function updateArtistDetailWatchlistButton(artistId, artistName) {
+    const button = document.getElementById('artist-detail-watchlist-btn');
+    if (!button) {
+        console.warn('⚠️ Artist detail watchlist button not found');
+        return;
+    }
+
+    // Use passed name or fall back to stored data attribute
+    const name = artistName || button.dataset.artistName || '';
+
+    try {
+        console.log(`🔍 Checking watchlist status for artist: ${artistId}`);
+
+        const response = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            const icon = button.querySelector('.watchlist-icon');
+            const text = button.querySelector('.watchlist-text');
+
+            console.log(`📊 Watchlist status for ${artistId}: ${data.is_watching ? 'WATCHING' : 'NOT WATCHING'}`);
+
+            // Ensure button is enabled
+            button.disabled = false;
+
+            // Show/hide watchlist settings gear
+            const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
+            if (settingsBtn) {
+                if (data.is_watching) {
+                    settingsBtn.classList.remove('hidden');
+                    settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, name);
+                } else {
+                    settingsBtn.classList.add('hidden');
+                    settingsBtn.onclick = null;
+                }
+            }
+
+            if (data.is_watching) {
+                icon.textContent = '👁️';
+                text.textContent = 'Remove from Watchlist';
+                button.classList.add('watching');
+            } else {
+                icon.textContent = '👁️';
+                text.textContent = 'Add to Watchlist';
+                button.classList.remove('watching');
+            }
+        } else {
+            console.error('❌ Failed to check watchlist status:', data.error);
+        }
+    } catch (error) {
+        console.error('❌ Error checking watchlist status:', error);
+        // Ensure button doesn't get stuck in bad state
+        button.disabled = false;
+    }
+}
+
+/**
+ * Show loading state for discography
+ */
+function showDiscographyLoading() {
+    const albumsContainer = document.getElementById('album-cards-container');
+    const singlesContainer = document.getElementById('singles-cards-container');
+
+    const loadingHtml = `
+        <div class="album-card loading">
+            <div class="album-card-image"></div>
+            <div class="album-card-content">
+                <div class="album-card-name">Loading...</div>
+                <div class="album-card-year">-</div>
+                <div class="album-card-type">-</div>
+            </div>
+        </div>
+    `.repeat(4);
+
+    if (albumsContainer) albumsContainer.innerHTML = loadingHtml;
+    if (singlesContainer) singlesContainer.innerHTML = loadingHtml;
+}
+
+/**
+ * Show error state for discography
+ */
+function showDiscographyError(message = 'Failed to load discography') {
+    const albumsContainer = document.getElementById('album-cards-container');
+    const singlesContainer = document.getElementById('singles-cards-container');
+
+    const errorHtml = `
+        <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 65, 54, 0.8);">
+            <div style="font-size: 18px; margin-bottom: 8px;">⚠️</div>
+            <div style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Failed to load discography</div>
+            <div style="font-size: 12px; color: rgba(255, 65, 54, 0.6); max-width: 300px; margin: 0 auto;">${escapeHtml(message)}</div>
+        </div>
+    `;
+
+    if (albumsContainer) albumsContainer.innerHTML = errorHtml;
+    if (singlesContainer) singlesContainer.innerHTML = errorHtml;
+}
+
+/**
+ * Show loading cards while searching
+ */
+function showSearchLoadingCards() {
+    const container = document.getElementById('artists-cards-container');
+    if (!container) return;
+
+    const loadingCardHtml = `
+        <div class="artist-card loading">
+            <div class="artist-card-background"></div>
+            <div class="artist-card-overlay"></div>
+            <div class="artist-card-content">
+                <div class="artist-card-name">Loading...</div>
+                <div class="artist-card-genres">Fetching data...</div>
+                <div class="artist-card-popularity">
+                    <span class="popularity-icon">⏳</span>
+                    <span>Loading...</span>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Show 6 loading cards
+    container.innerHTML = loadingCardHtml.repeat(6);
+}
+
+// ===============================
+// ARTIST ALBUM DOWNLOAD MISSING TRACKS INTEGRATION
+// ===============================
+
+/**
+ * Get the completion status of an album from cached data or DOM
+ * @param {string} albumId - The album ID
+ * @param {string} albumType - The album type ('albums' or 'singles')
+ * @returns {Object|null} - Completion status object or null
+ */
+function getAlbumCompletionStatus(albumId, albumType) {
+    try {
+        // First, check cached completion data
+        const artistId = artistsPageState.selectedArtist?.id;
+        if (artistId && artistsPageState.cache.completionData[artistId]) {
+            const cachedData = artistsPageState.cache.completionData[artistId];
+            const dataArray = albumType === 'albums' ? cachedData.albums : cachedData.singles;
+
+            if (dataArray) {
+                const completionData = dataArray.find(item => item.album_id === albumId || item.id === albumId);
+                if (completionData) {
+                    console.log(`📊 Found cached completion data for album ${albumId}:`, completionData);
+                    return completionData;
+                }
+            }
+        }
+
+        // Fallback: Check DOM completion overlay
+        const containerId = albumType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
+        const container = document.getElementById(containerId);
+
+        if (container) {
+            const albumCard = container.querySelector(`[data-album-id="${albumId}"]`);
+            if (albumCard) {
+                const overlay = albumCard.querySelector('.completion-overlay');
+                if (overlay) {
+                    // Extract status from overlay classes
+                    const classList = Array.from(overlay.classList);
+                    const statusClasses = ['completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error'];
+                    const status = statusClasses.find(cls => classList.includes(cls));
+
+                    if (status) {
+                        console.log(`📊 Found DOM completion status for album ${albumId}: ${status}`);
+                        return { status, completion_percentage: status === 'completed' ? 100 : 0 };
+                    }
+                }
+            }
+        }
+
+        console.warn(`⚠️ No completion status found for album ${albumId}`);
+        return null;
+
+    } catch (error) {
+        console.error(`❌ Error getting album completion status for ${albumId}:`, error);
+        return null;
+    }
+}
+
+/**
+ * Handle album/single/EP click to open download missing tracks modal
+ */
+async function handleArtistAlbumClick(album, albumType) {
+    console.log(`🎵 Album clicked: ${album.name} (${album.album_type}) from artist: ${artistsPageState.selectedArtist?.name}`);
+
+    if (!artistsPageState.selectedArtist) {
+        console.error('❌ No selected artist found');
+        showToast('Error: No artist selected', 'error');
+        return;
+    }
+
+    showLoadingOverlay('Loading album...');
+
+    try {
+        // Check completion status of the album
+        const completionStatus = getAlbumCompletionStatus(album.id, albumType);
+        console.log(`📊 Album completion status: ${completionStatus?.status || 'unknown'} (${completionStatus?.completion_percentage || 0}%)`);
+
+        // For Artists page, always use Download Missing Tracks modal to analyze and download
+        console.log(`🔄 Opening download missing tracks modal for album analysis`);
+
+        // Create virtual playlist ID
+        const virtualPlaylistId = `artist_album_${artistsPageState.selectedArtist.id}_${album.id}`;
+
+        // Check if modal already exists and show it
+        if (activeDownloadProcesses[virtualPlaylistId]) {
+            console.log(`📱 Reopening existing modal for ${album.name}`);
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process.modalElement) {
+                if (process.status === 'complete') {
+                    showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+                }
+                process.modalElement.style.display = 'flex';
+                hideLoadingOverlay();
+                return;
+            }
+        }
+
+        // Create virtual playlist and open modal
+        // Note: Don't hide loading overlay here - let the flow continue through to the modal
+        await createArtistAlbumVirtualPlaylist(album, albumType);
+
+    } catch (error) {
+        hideLoadingOverlay();
+        console.error('❌ Error handling album click:', error);
+        showToast(`Error opening download modal: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Create virtual playlist for artist album and open download missing tracks modal
+ */
+async function createArtistAlbumVirtualPlaylist(album, albumType) {
+    const artist = artistsPageState.selectedArtist;
+    const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
+
+    console.log(`🎵 Creating virtual playlist for: ${artist.name} - ${album.name}`);
+
+    try {
+        // Loading overlay already shown by handleArtistAlbumClick
+
+        // Fetch album tracks from backend (pass name/artist for Hydrabase support)
+        const _aat1 = new URLSearchParams({ name: album.name || '', artist: artist.name || '' });
+        if (artistsPageState.sourceOverride) {
+            _aat1.set('source', artistsPageState.sourceOverride);
+        }
+        if (artistsPageState.pluginOverride) {
+            _aat1.set('plugin', artistsPageState.pluginOverride);
+        }
+        const response = await fetch(`/api/album/${album.id}/tracks?${_aat1}`);
+
+        if (!response.ok) {
+            if (response.status === 401) {
+                throw new Error('Spotify not authenticated. Please check your API settings.');
+            }
+            const errData = await response.json().catch(() => ({}));
+            throw new Error(errData.error || `Failed to load album tracks: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error('No tracks found for this album');
+        }
+
+        console.log(`✅ Loaded ${data.tracks.length} tracks for ${data.album.name}`);
+
+        // Use album data from API response (has complete data including images array)
+        const fullAlbumData = data.album;
+
+        // Format playlist name with artist and album info
+        const playlistName = `[${artist.name}] ${fullAlbumData.name}`;
+
+        // Open download missing tracks modal with formatted tracks
+        // Pass false for showLoadingOverlay since we already have one from handleArtistAlbumClick
+        // Use fullAlbumData from API response instead of album parameter
+        await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, data.tracks, fullAlbumData, artist, false);
+
+        // Track this download for artist bubble management
+        registerArtistDownload(artist, album, virtualPlaylistId, albumType);
+
+    } catch (error) {
+        console.error('❌ Error creating virtual playlist:', error);
+        showToast(`Failed to load album: ${error.message}`, 'error');
+        throw error;
+    }
+}
+
+/**
+ * Open download missing tracks modal specifically for artist albums
+ * Similar to openDownloadMissingModalForYouTube but for artist albums
+ */
+async function openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, spotifyTracks, album, artist, showLoadingOverlayParam = true, contextType = 'artist_album') {
+    if (showLoadingOverlayParam) {
+        showLoadingOverlay('Loading album...');
+    }
+    // Check if a process is already active for this virtual playlist
+    if (activeDownloadProcesses[virtualPlaylistId]) {
+        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process.modalElement) {
+            if (process.status === 'complete') {
+                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+            }
+            process.modalElement.style.display = 'flex';
+            if (showLoadingOverlayParam) {
+                hideLoadingOverlay();
+            }
+        }
+        return;
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for artist album: ${virtualPlaylistId}`);
+
+    // Create virtual playlist object for compatibility with existing modal logic
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: playlistName,
+        track_count: spotifyTracks.length
+    };
+
+    // Store the tracks in the cache for the modal to use
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+    currentPlaylistTracks = spotifyTracks;
+    currentModalPlaylistId = virtualPlaylistId;
+
+    let modal = document.createElement('div');
+    modal.id = `download-missing-modal-${virtualPlaylistId}`;
+    modal.className = 'download-missing-modal';
+    modal.style.display = 'none';
+    document.body.appendChild(modal);
+
+    // Register the new process in our global state tracker using the same structure as other modals
+    activeDownloadProcesses[virtualPlaylistId] = {
+        status: 'idle',
+        modalElement: modal,
+        poller: null,
+        batchId: null,
+        playlist: virtualPlaylist,
+        tracks: spotifyTracks,
+        // Additional metadata for artist albums
+        artist: artist,
+        album: album,
+        albumType: album.album_type
+    };
+
+    // Generate hero section — 'artist_album' for releases, 'playlist' for charts/compilations
+    const heroContext = contextType === 'playlist' ? {
+        type: 'playlist',
+        playlist: { name: playlistName, owner: 'Beatport' },
+        trackCount: spotifyTracks.length,
+        playlistId: virtualPlaylistId
+    } : {
+        type: 'artist_album',
+        artist: artist,
+        album: album,
+        trackCount: spotifyTracks.length,
+        playlistId: virtualPlaylistId
+    };
+
+    // Use the exact same modal HTML structure as the existing modals
+    modal.innerHTML = `
+        <div class="download-missing-modal-content" data-context="${contextType}">
+            <div class="download-missing-modal-header">
+                ${generateDownloadModalHeroSection(heroContext)}
+            </div>
+
+            <div class="download-missing-modal-body">
+                <div class="download-progress-section">
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            🔍 Library Analysis
+                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            ⏬ Downloads
+                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="download-tracks-section">
+                    <div class="download-tracks-header">
+                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
+                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
+                    </div>
+                    <div class="download-tracks-table-container">
+                        <table class="download-tracks-table">
+                            <thead>
+                                <tr>
+                                    <th class="track-select-header">
+                                        <input type="checkbox" class="track-select-all"
+                                               id="select-all-${virtualPlaylistId}" checked
+                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
+                                    </th>
+                                    <th>#</th>
+                                    <th>Track Name</th>
+                                    <th>Artist(s)</th>
+                                    <th>Duration</th>
+                                    <th>Library Status</th>
+                                    <th>Download Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
+                                ${spotifyTracks.map((track, index) => `
+                                    <tr data-track-index="${index}">
+                                        <td class="track-select-cell">
+                                            <input type="checkbox" class="track-select-cb"
+                                                   data-track-index="${index}" checked
+                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
+                                        </td>
+                                        <td class="track-number">${index + 1}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
+                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
+                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
+                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
+                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="download-missing-modal-footer">
+                <div class="download-phase-controls">
+                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
+                            <span>Force Download All</span>
+                        </label>
+                        ${contextType === 'playlist' ? `
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
+                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
+                        </label>
+                        ` : ''}
+                    </div>
+                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
+                        Begin Analysis
+                    </button>
+                    ${_isBeatportPlaylistId(virtualPlaylistId) ? `
+                    <button class="download-control-btn sync-to-server-btn" id="sync-server-btn-${virtualPlaylistId}" onclick="syncPlaylistToServer('${virtualPlaylistId}')" ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>
+                        Sync to Server
+                    </button>` : ''}
+                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
+                        Add to Wishlist
+                    </button>
+                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
+                        Cancel All
+                    </button>
+                </div>
+                <div class="modal-close-section">
+                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${virtualPlaylistId}')">
+                        📋 Export as M3U
+                    </button>
+                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
+                </div>
+            </div>
+            <!-- Sync to server live progress (below footer, hidden by default) -->
+            <div class="modal-sync-progress-area" id="modal-sync-progress-${virtualPlaylistId}" style="display:none;">
+                <div class="modal-sync-progress-bar-bg">
+                    <div class="modal-sync-progress-bar-fill" id="modal-sync-bar-${virtualPlaylistId}"></div>
+                </div>
+                <div class="modal-sync-progress-info">
+                    <span class="modal-sync-step" id="modal-sync-step-${virtualPlaylistId}">Starting sync...</span>
+                    <div class="modal-sync-stats">
+                        <span class="matched" id="modal-sync-matched-${virtualPlaylistId}">0 matched</span>
+                        <span class="failed" id="modal-sync-failed-${virtualPlaylistId}">0 failed</span>
+                    </div>
+                    <button class="modal-sync-cancel-btn" id="modal-sync-cancel-${virtualPlaylistId}" onclick="cancelModalSync('${virtualPlaylistId}')">Cancel</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
+    modal.style.display = 'flex';
+    hideLoadingOverlay();
+
+    console.log(`✅ Successfully opened download missing tracks modal for: ${playlistName}`);
+}
+
+// ===============================
+// ARTIST DOWNLOADS MANAGEMENT SYSTEM
+// ===============================
+
+/**
+ * Register a new artist download for bubble management
+ */
+function registerArtistDownload(artist, album, virtualPlaylistId, albumType) {
+    console.log(`📝 Registering artist download: ${artist.name} - ${album.name}`);
+
+    const artistId = artist.id;
+
+    // Initialize artist bubble if it doesn't exist
+    if (!artistDownloadBubbles[artistId]) {
+        artistDownloadBubbles[artistId] = {
+            artist: artist,
+            downloads: [],
+            element: null,
+            hasCompletedDownloads: false
+        };
+    }
+
+    // Add this download to the artist's downloads
+    const downloadInfo = {
+        virtualPlaylistId: virtualPlaylistId,
+        album: album,
+        albumType: albumType,
+        status: 'in_progress', // 'in_progress', 'completed', 'view_results'
+        startTime: new Date()
+    };
+
+    artistDownloadBubbles[artistId].downloads.push(downloadInfo);
+
+    // Show/update the artist downloads section
+    updateArtistDownloadsSection();
+
+    // Save snapshot of current state
+    saveArtistBubbleSnapshot();
+
+    // Monitor this download for completion
+    monitorArtistDownload(artistId, virtualPlaylistId);
+}
+
+/**
+ * Debounced update for artist downloads section to prevent rapid updates
+ */
+function updateArtistDownloadsSection() {
+    if (downloadsUpdateTimeout) {
+        clearTimeout(downloadsUpdateTimeout);
+    }
+    downloadsUpdateTimeout = setTimeout(() => {
+        showArtistDownloadsSection();
+        showLibraryDownloadsSection();
+        showBeatportDownloadsSection();
+        updateDashboardDownloads();
+    }, 300); // 300ms debounce
+}
+
+// --- Artist Bubble Snapshot System ---
+
+let snapshotSaveTimeout = null; // Debounce snapshot saves
+
+async function saveArtistBubbleSnapshot() {
+    /**
+     * Saves current artistDownloadBubbles state to backend for persistence.
+     * Debounced to prevent excessive backend calls.
+     */
+
+    // Clear any existing timeout
+    if (snapshotSaveTimeout) {
+        clearTimeout(snapshotSaveTimeout);
+    }
+
+    // Debounce the actual save
+    snapshotSaveTimeout = setTimeout(async () => {
+        try {
+            const bubbleCount = Object.keys(artistDownloadBubbles).length;
+
+            // Don't save empty state
+            if (bubbleCount === 0) {
+                console.log('📸 Skipping snapshot save - no artist bubbles to save');
+                return;
+            }
+
+            console.log(`📸 Saving artist bubble snapshot: ${bubbleCount} artists`);
+
+            // Prepare snapshot data (clean up DOM references)
+            const cleanBubbles = {};
+            for (const [artistId, bubbleData] of Object.entries(artistDownloadBubbles)) {
+                cleanBubbles[artistId] = {
+                    artist: bubbleData.artist,
+                    downloads: bubbleData.downloads.map(download => ({
+                        virtualPlaylistId: download.virtualPlaylistId,
+                        album: download.album,
+                        albumType: download.albumType,
+                        status: download.status,
+                        startTime: download.startTime instanceof Date ? download.startTime.toISOString() : download.startTime
+                    })),
+                    hasCompletedDownloads: bubbleData.hasCompletedDownloads
+                };
+            }
+
+            const response = await fetch('/api/artist_bubbles/snapshot', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    bubbles: cleanBubbles
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                console.log(`✅ Artist bubble snapshot saved: ${bubbleCount} artists`);
+            } else {
+                console.error('❌ Failed to save artist bubble snapshot:', data.error);
+            }
+
+        } catch (error) {
+            console.error('❌ Error saving artist bubble snapshot:', error);
+        }
+    }, 1000); // 1 second debounce
+}
+
+async function hydrateArtistBubblesFromSnapshot() {
+    /**
+     * Hydrates artist download bubbles from backend snapshot with live status.
+     * Called on page load to restore bubble state.
+     */
+    try {
+        console.log('🔄 Loading artist bubble snapshot from backend...');
+
+        const response = await fetch('/api/artist_bubbles/hydrate');
+        const data = await response.json();
+
+        if (!data.success) {
+            console.error('❌ Failed to load artist bubble snapshot:', data.error);
+            return;
+        }
+
+        const bubbles = data.bubbles || {};
+        const stats = data.stats || {};
+
+        console.log(`🔄 Loaded bubble snapshot: ${stats.total_artists || 0} artists, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
+
+        if (Object.keys(bubbles).length === 0) {
+            console.log('ℹ️ No artist bubbles to hydrate');
+            return;
+        }
+
+        // Clear existing state
+        artistDownloadBubbles = {};
+
+        // Restore artistDownloadBubbles with hydrated data
+        for (const [artistId, bubbleData] of Object.entries(bubbles)) {
+            artistDownloadBubbles[artistId] = {
+                artist: bubbleData.artist,
+                downloads: bubbleData.downloads.map(download => ({
+                    virtualPlaylistId: download.virtualPlaylistId,
+                    album: download.album,
+                    albumType: download.albumType,
+                    status: download.status, // Live status from backend
+                    startTime: new Date(download.startTime)
+                })),
+                element: null, // Will be created when UI updates
+                hasCompletedDownloads: bubbleData.hasCompletedDownloads
+            };
+
+            console.log(`🔄 Hydrated artist: ${bubbleData.artist.name} (${bubbleData.downloads.length} downloads)`);
+
+            // Start monitoring for any in-progress downloads
+            for (const download of bubbleData.downloads) {
+                if (download.status === 'in_progress') {
+                    console.log(`📡 Starting monitoring for: ${download.album.name}`);
+                    monitorArtistDownload(artistId, download.virtualPlaylistId);
+                }
+            }
+        }
+
+        // Update UI to show hydrated bubbles
+        updateArtistDownloadsSection();
+
+        const totalArtists = Object.keys(artistDownloadBubbles).length;
+        console.log(`✅ Successfully hydrated ${totalArtists} artist download bubbles`);
+
+    } catch (error) {
+        console.error('❌ Error hydrating artist bubbles from snapshot:', error);
+    }
+}
+
+// --- Search Bubble Snapshot System ---
+
+async function saveSearchBubbleSnapshot() {
+    /**
+     * Saves current searchDownloadBubbles state to backend for persistence.
+     */
+    try {
+        // Rate limit saves to avoid spamming backend
+        if (saveSearchBubbleSnapshot.lastSaveTime) {
+            const timeSinceLastSave = Date.now() - saveSearchBubbleSnapshot.lastSaveTime;
+            if (timeSinceLastSave < 2000) {
+                console.log('⏱️ Skipping search bubble snapshot save (rate limited)');
+                return;
+            }
+        }
+
+        const bubbleCount = Object.keys(searchDownloadBubbles).length;
+
+        if (bubbleCount === 0) {
+            console.log('📸 Skipping snapshot save - no search bubbles to save');
+            return;
+        }
+
+        console.log(`📸 Saving search bubble snapshot: ${bubbleCount} artists`);
+
+        // Convert search bubbles to plain objects for serialization
+        const bubblesToSave = {};
+        for (const [artistName, bubbleData] of Object.entries(searchDownloadBubbles)) {
+            bubblesToSave[artistName] = {
+                artist: bubbleData.artist,
+                downloads: bubbleData.downloads.map(d => ({
+                    virtualPlaylistId: d.virtualPlaylistId,
+                    item: d.item,
+                    type: d.type,
+                    status: d.status,
+                    startTime: d.startTime
+                }))
+            };
+        }
+
+        const response = await fetch('/api/search_bubbles/snapshot', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ bubbles: bubblesToSave })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`✅ Search bubble snapshot saved: ${bubbleCount} artists`);
+            saveSearchBubbleSnapshot.lastSaveTime = Date.now();
+        } else {
+            console.error('❌ Failed to save search bubble snapshot:', data.error);
+        }
+
+    } catch (error) {
+        console.error('❌ Error saving search bubble snapshot:', error);
+    }
+}
+
+async function hydrateSearchBubblesFromSnapshot() {
+    /**
+     * Hydrates search download bubbles from backend snapshot with live status.
+     */
+    try {
+        console.log('🔄 Loading search bubble snapshot from backend...');
+
+        const response = await fetch('/api/search_bubbles/hydrate');
+        const data = await response.json();
+
+        if (!data.success) {
+            console.error('❌ Failed to load search bubble snapshot:', data.error);
+            return;
+        }
+
+        const bubbles = data.bubbles || {};
+        const stats = data.stats || {};
+
+        if (Object.keys(bubbles).length === 0) {
+            console.log('ℹ️ No search bubbles to hydrate');
+            return;
+        }
+
+        // Clear and restore search bubbles
+        searchDownloadBubbles = {};
+
+        for (const [artistName, bubbleData] of Object.entries(bubbles)) {
+            searchDownloadBubbles[artistName] = {
+                artist: bubbleData.artist,
+                downloads: bubbleData.downloads || []
+            };
+
+            console.log(`🔄 Hydrated artist: ${artistName} (${bubbleData.downloads.length} downloads)`);
+
+            // Setup monitoring for each download
+            for (const download of bubbleData.downloads) {
+                if (download.status === 'in_progress') {
+                    monitorSearchDownload(artistName, download.virtualPlaylistId);
+                }
+            }
+        }
+
+        const totalArtists = Object.keys(searchDownloadBubbles).length;
+        console.log(`✅ Successfully hydrated ${totalArtists} search download bubbles`);
+
+        // Refresh display
+        showSearchDownloadBubbles();
+
+    } catch (error) {
+        console.error('❌ Error hydrating search bubbles from snapshot:', error);
+    }
+}
+
+/**
+ * Register a new search download for bubble management (grouped by artist)
+ */
+function registerSearchDownload(item, type, virtualPlaylistId, artistName) {
+    console.log(`📝 [REGISTER] Registering search download: ${item.name} (${type}) by ${artistName}`);
+
+    // Initialize artist bubble if it doesn't exist
+    if (!searchDownloadBubbles[artistName]) {
+        searchDownloadBubbles[artistName] = {
+            artist: {
+                name: artistName,
+                image_url: item.image_url || (item.images && item.images[0]?.url) || null
+            },
+            downloads: []
+        };
+    }
+
+    // Add this download to the artist's downloads
+    const downloadInfo = {
+        virtualPlaylistId: virtualPlaylistId,
+        item: item,
+        type: type, // 'album' or 'track'
+        status: 'in_progress',
+        startTime: new Date().toISOString()
+    };
+
+    searchDownloadBubbles[artistName].downloads.push(downloadInfo);
+
+    console.log(`✅ [REGISTER] Registered search download for ${artistName} - ${item.name}`);
+
+    // Save snapshot
+    saveSearchBubbleSnapshot();
+
+    // Setup monitoring
+    monitorSearchDownload(artistName, virtualPlaylistId);
+
+    // Refresh display
+    updateSearchDownloadsSection();
+}
+
+/**
+ * Debounced update for search downloads section
+ */
+function updateSearchDownloadsSection() {
+    if (window.searchUpdateTimeout) {
+        clearTimeout(window.searchUpdateTimeout);
+    }
+    window.searchUpdateTimeout = setTimeout(() => {
+        showSearchDownloadBubbles();
+        updateDashboardDownloads();
+    }, 300);
+}
+
+/**
+ * Monitor a search download for completion status changes
+ */
+function monitorSearchDownload(artistName, virtualPlaylistId) {
+    const checkCompletion = setInterval(() => {
+        const process = activeDownloadProcesses[virtualPlaylistId];
+
+        if (!process || !searchDownloadBubbles[artistName]) {
+            clearInterval(checkCompletion);
+            return;
+        }
+
+        // Find the download in the artist's downloads
+        const download = searchDownloadBubbles[artistName].downloads.find(
+            d => d.virtualPlaylistId === virtualPlaylistId
+        );
+
+        if (!download) {
+            clearInterval(checkCompletion);
+            return;
+        }
+
+        // Update status
+        const newStatus = process.status === 'complete' || process.status === 'view_results'
+            ? 'view_results'
+            : 'in_progress';
+
+        if (download.status !== newStatus) {
+            console.log(`🔄 [MONITOR] Status changed for ${download.item.name}: ${download.status} -> ${newStatus}`);
+            download.status = newStatus;
+
+            // Save snapshot and refresh
+            saveSearchBubbleSnapshot();
+            updateSearchDownloadsSection();
+        }
+    }, 2000);
+}
+
+/**
+ * Show or update the search downloads bubble section
+ */
+function showSearchDownloadBubbles() {
+    console.log(`🔄 [SHOW] showSearchDownloadBubbles() called`);
+
+    const resultsArea = document.getElementById('enhanced-main-results-area');
+    if (!resultsArea) {
+        console.log(`⏭️ [SHOW] Skipping - no enhanced-main-results-area found`);
+        return;
+    }
+
+    // Count active artists (those with downloads)
+    const activeArtists = Object.keys(searchDownloadBubbles).filter(artistName =>
+        searchDownloadBubbles[artistName].downloads.length > 0
+    );
+
+    if (activeArtists.length === 0) {
+        // Show placeholder
+        resultsArea.innerHTML = `
+            <div class="search-results-placeholder">
+                <p>Search results will appear here when you select an album or track.</p>
+            </div>
+        `;
+        return;
+    }
+
+    // Create bubbles display
+    const bubblesHTML = activeArtists.map(artistName =>
+        createSearchBubbleCard(searchDownloadBubbles[artistName])
+    ).join('');
+
+    resultsArea.innerHTML = `
+        <div class="search-bubble-section">
+            <div class="search-bubble-header">
+                <h3 class="search-bubble-title">Active Downloads</h3>
+                <span class="search-bubble-count">${activeArtists.length}</span>
+            </div>
+            <div class="search-bubble-container" id="search-bubble-container">
+                ${bubblesHTML}
+            </div>
+        </div>
+    `;
+
+    console.log(`✅ [SHOW] Displayed ${activeArtists.length} search bubbles`);
+}
+
+/**
+ * Create HTML for a search bubble card (grouped by artist)
+ */
+function createSearchBubbleCard(artistBubbleData) {
+    const { artist, downloads } = artistBubbleData;
+    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+    const completedCount = downloads.filter(d => d.status === 'view_results').length;
+    const allCompleted = activeCount === 0 && completedCount > 0;
+
+    console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
+        totalDownloads: downloads.length,
+        activeCount,
+        completedCount,
+        allCompleted
+    });
+
+    const imageUrl = artist.image_url || '';
+    const backgroundStyle = imageUrl ?
+        `background-image: url('${escapeHtml(imageUrl)}');` :
+        `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+    return `
+        <div class="search-bubble-card ${allCompleted ? 'all-completed' : ''}"
+             data-artist-name="${escapeHtml(artist.name)}"
+             onclick="openSearchDownloadModal('${escapeForInlineJs(artist.name)}')"
+             title="Click to manage downloads for ${escapeHtml(artist.name)}">
+            <div class="search-bubble-image" style="${backgroundStyle}"></div>
+            <div class="search-bubble-overlay"></div>
+            <div class="search-bubble-content">
+                <div class="search-bubble-name">${escapeHtml(artist.name)}</div>
+                <div class="search-bubble-status">
+                    ${activeCount > 0 ? `${activeCount} active` : ''}
+                    ${completedCount > 0 ? `${completedCount} completed` : ''}
+                </div>
+            </div>
+            ${allCompleted ? `
+                <div class="bulk-complete-indicator"
+                     onclick="event.stopPropagation(); bulkCompleteSearchDownloads('${escapeForInlineJs(artist.name)}')"
+                     title="Complete all downloads">
+                    <span class="bulk-complete-icon">✅</span>
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+/**
+ * Open modal showing all downloads for an artist
+ */
+async function openSearchDownloadModal(artistName) {
+    const artistBubbleData = searchDownloadBubbles[artistName];
+    if (!artistBubbleData || searchDownloadModalOpen) return;
+
+    console.log(`🎵 [MODAL OPEN] Opening search download modal for: ${artistBubbleData.artist.name}`);
+
+    searchDownloadModalOpen = true;
+
+    const modal = document.createElement('div');
+    modal.id = 'search-download-management-modal';
+    modal.className = 'artist-download-management-modal';
+    modal.innerHTML = `
+        <div class="artist-download-modal-content">
+            <div class="artist-download-modal-hero">
+                <div class="artist-download-modal-hero-bg" ${artistBubbleData.artist.image_url ? `style="background-image: url('${escapeHtml(artistBubbleData.artist.image_url)}')"` : ''}></div>
+                <div class="artist-download-modal-hero-overlay">
+                    <div class="artist-download-modal-hero-content">
+                        <div class="artist-download-modal-hero-avatar">
+                            ${artistBubbleData.artist.image_url
+            ? `<img src="${escapeHtml(artistBubbleData.artist.image_url)}" alt="${escapeHtml(artistBubbleData.artist.name)}" class="artist-download-modal-hero-image" loading="lazy">`
+            : '<div class="artist-download-modal-hero-fallback">🎵</div>'
+        }
+                        </div>
+                        <div class="artist-download-modal-hero-info">
+                            <h2 class="artist-download-modal-hero-title">${escapeHtml(artistBubbleData.artist.name)}</h2>
+                            <p class="artist-download-modal-hero-subtitle">${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}</p>
+                        </div>
+                    </div>
+                    <span class="artist-download-modal-close" onclick="closeSearchDownloadModal()">&times;</span>
+                </div>
+            </div>
+
+            <div class="artist-download-modal-body">
+                <div class="artist-download-items" id="search-download-items">
+                    ${artistBubbleData.downloads.map((download, index) => createSearchDownloadItem(download, index)).join('')}
+                </div>
+            </div>
+        </div>
+        <div class="artist-download-modal-overlay" onclick="closeSearchDownloadModal()"></div>
+    `;
+
+    document.body.appendChild(modal);
+    modal.style.display = 'flex';
+
+    // Start monitoring for status changes
+    // Start monitoring for status changes
+    monitorSearchDownloadModal(artistName);
+
+    // Lazy load artist image if missing (common for iTunes)
+    if (!artistBubbleData.artist.image_url) {
+        console.log(`🖼️ Lazy loading modal image for ${artistBubbleData.artist.name} (${artistBubbleData.artist.id})`);
+        fetch(`/api/artist/${artistBubbleData.artist.id}/image`)
+            .then(response => response.json())
+            .then(data => {
+                if (data.success && data.image_url) {
+                    // Update header background
+                    const headerBg = modal.querySelector('.artist-download-modal-hero-bg');
+                    if (headerBg) {
+                        headerBg.style.backgroundImage = `url('${data.image_url}')`;
+                    }
+
+                    // Update avatar
+                    const avatarContainer = modal.querySelector('.artist-download-modal-hero-avatar');
+                    if (avatarContainer) {
+                        avatarContainer.innerHTML = `<img src="${data.image_url}" alt="${artistBubbleData.artist.name}" class="artist-download-modal-hero-image" loading="lazy">`;
+                    }
+
+                    // Update artist object in memory
+                    artistBubbleData.artist.image_url = data.image_url;
+                }
+            })
+            .catch(err => console.error('❌ Failed to load modal image:', err));
+    }
+}
+
+/**
+ * Create HTML for a download item in the search modal
+ */
+function createSearchDownloadItem(download, index) {
+    const { item, type, status, virtualPlaylistId } = download;
+    const buttonText = status === 'view_results' ? 'View Results' : 'View Progress';
+    const buttonClass = status === 'view_results' ? 'completed' : 'active';
+    const typeLabel = type === 'album' ? 'Album' : type === 'single' ? 'Single' : 'Track';
+
+    return `
+        <div class="artist-download-item" data-playlist-id="${virtualPlaylistId}">
+            <div class="download-item-artwork">
+                ${item.image_url
+            ? `<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="download-item-image" loading="lazy">`
+            : `<div class="download-item-fallback">
+                         ${type === 'album' ? '💿' : '🎵'}
+                       </div>`
+        }
+            </div>
+            <div class="download-item-info">
+                <div class="download-item-name">${escapeHtml(item.name)}</div>
+                <div class="download-item-type">${typeLabel}</div>
+            </div>
+            <div class="download-item-actions">
+                <button class="download-item-btn ${buttonClass}"
+                        onclick="reopenDownloadModal('${virtualPlaylistId}')">
+                    ${buttonText}
+                </button>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Reopen an individual download modal from the artist modal
+ */
+async function reopenDownloadModal(virtualPlaylistId) {
+    const process = activeDownloadProcesses[virtualPlaylistId];
+
+    // If process exists, show the existing modal
+    if (process && process.modalElement) {
+        console.log(`✅ [REOPEN] Showing existing modal for ${virtualPlaylistId}`);
+        closeSearchDownloadModal();
+        setTimeout(() => {
+            process.modalElement.style.display = 'flex';
+        }, 100);
+        return;
+    }
+
+    // Process doesn't exist (after page refresh) - recreate it
+    console.log(`🔄 [REOPEN] Modal not found, recreating for ${virtualPlaylistId}`);
+
+    // Find the download in searchDownloadBubbles
+    let downloadData = null;
+    for (const artistName in searchDownloadBubbles) {
+        const bubble = searchDownloadBubbles[artistName];
+        const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+        if (download) {
+            downloadData = download;
+            break;
+        }
+    }
+
+    if (!downloadData) {
+        console.warn(`⚠️ No download data found for ${virtualPlaylistId}`);
+        return;
+    }
+
+    // Close search modal first
+    closeSearchDownloadModal();
+
+    // Recreate the modal based on type
+    const { item, type } = downloadData;
+
+    if (type === 'album') {
+        // For albums, we need to fetch the tracks
+        console.log(`📥 [REOPEN] Recreating album modal for: ${item.name}`);
+
+        // Fetch album tracks (pass name/artist for Hydrabase support)
+        showLoadingOverlay(`Loading ${item.name}...`);
+
+        try {
+            const _sap2 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
+            const response = await fetch(`/api/spotify/album/${item.id}?${_sap2}`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch album tracks');
+            }
+
+            const albumData = await response.json();
+            if (!albumData.tracks || albumData.tracks.length === 0) {
+                throw new Error('No tracks found in album');
+            }
+
+            const spotifyTracks = albumData.tracks.map(track => ({
+                id: track.id,
+                name: track.name,
+                artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
+                album: {
+                    name: item.name,
+                    images: item.image_url ? [{ url: item.image_url }] : []
+                },
+                duration_ms: track.duration_ms || 0
+            }));
+
+            hideLoadingOverlay();
+
+            // Open the modal
+            await openDownloadMissingModalForArtistAlbum(
+                virtualPlaylistId,
+                item.name,
+                spotifyTracks,
+                item,
+                { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
+                false // Don't show loading overlay again
+            );
+
+            // Sync with backend to check for active batch process
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                try {
+                    const processResponse = await fetch('/api/active-processes');
+                    if (processResponse.ok) {
+                        const processData = await processResponse.json();
+                        const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
+
+                        if (activeProcess) {
+                            console.log(`📡 [REOPEN] Found active batch for album: ${activeProcess.batch_id}`);
+                            process.status = 'running';
+                            process.batchId = activeProcess.batch_id;
+
+                            // Update UI to show running state
+                            const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                            const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                            if (beginBtn) beginBtn.style.display = 'none';
+                            if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                            // Start polling for live updates
+                            startModalDownloadPolling(virtualPlaylistId);
+                        }
+                    }
+                } catch (err) {
+                    console.warn('Could not check for active processes:', err);
+                }
+            }
+
+        } catch (error) {
+            hideLoadingOverlay();
+            showToast(`Failed to load album: ${error.message}`, 'error');
+            console.error('Error loading album:', error);
+        }
+
+    } else {
+        // For tracks, create enriched track and open modal
+        console.log(`🎵 [REOPEN] Recreating track modal for: ${item.name}`);
+
+        const enrichedTrack = {
+            id: item.id,
+            name: item.name,
+            artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
+            album: item.album || {
+                name: item.album?.name || 'Unknown Album',
+                images: item.image_url ? [{ url: item.image_url }] : []
+            },
+            duration_ms: item.duration_ms || 0
+        };
+
+        await openDownloadMissingModalForYouTube(
+            virtualPlaylistId,
+            `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
+            [enrichedTrack]
+        );
+
+        // Sync with backend to check for active batch process
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process) {
+            try {
+                const processResponse = await fetch('/api/active-processes');
+                if (processResponse.ok) {
+                    const processData = await processResponse.json();
+                    const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
+
+                    if (activeProcess) {
+                        console.log(`📡 [REOPEN] Found active batch for track: ${activeProcess.batch_id}`);
+                        process.status = 'running';
+                        process.batchId = activeProcess.batch_id;
+
+                        // Update UI to show running state
+                        const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                        const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                        if (beginBtn) beginBtn.style.display = 'none';
+                        if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                        // Start polling for live updates
+                        startModalDownloadPolling(virtualPlaylistId);
+                    }
+                }
+            } catch (err) {
+                console.warn('Could not check for active processes:', err);
+            }
+        }
+    }
+}
+
+/**
+ * Monitor search download modal for status changes
+ */
+function monitorSearchDownloadModal(artistName) {
+    const updateModal = () => {
+        if (!searchDownloadModalOpen) return;
+
+        const modal = document.getElementById('search-download-management-modal');
+        const itemsContainer = document.getElementById('search-download-items');
+
+        if (!modal || !itemsContainer || !searchDownloadBubbles[artistName]) return;
+
+        const downloads = searchDownloadBubbles[artistName].downloads;
+
+        // If no downloads at all, close modal
+        if (downloads.length === 0) {
+            closeSearchDownloadModal();
+            return;
+        }
+
+        // Update modal content and sync status with active processes
+        let statusChanged = false;
+        itemsContainer.innerHTML = downloads.map((download, index) => {
+            const process = activeDownloadProcesses[download.virtualPlaylistId];
+
+            // Only update status if process exists (otherwise keep current status)
+            if (process) {
+                const newStatus = process.status === 'complete' || process.status === 'view_results'
+                    ? 'view_results'
+                    : 'in_progress';
+
+                if (download.status !== newStatus) {
+                    console.log(`🔄 [MODAL MONITOR] Status changed: ${download.item.name} ${download.status} -> ${newStatus}`);
+                    download.status = newStatus;
+                    statusChanged = true;
+                }
+            }
+
+            return createSearchDownloadItem(download, index);
+        }).join('');
+
+        // If status changed, refresh bubble display and save
+        if (statusChanged) {
+            updateSearchDownloadsSection();
+            saveSearchBubbleSnapshot();
+        }
+
+        // Continue monitoring
+        setTimeout(updateModal, 2000);
+    };
+
+    setTimeout(updateModal, 1000);
+}
+
+/**
+ * Close the search download modal
+ */
+function closeSearchDownloadModal() {
+    const modal = document.getElementById('search-download-management-modal');
+    if (modal) {
+        modal.style.display = 'none';
+        if (modal.parentElement) {
+            modal.parentElement.removeChild(modal);
+        }
+    }
+    searchDownloadModalOpen = false;
+}
+
+/**
+ * Bulk complete all downloads for an artist (called when user clicks green checkmark)
+ */
+function bulkCompleteSearchDownloads(artistName) {
+    console.log(`🎯 Bulk completing downloads for artist: ${artistName}`);
+
+    const artistBubbleData = searchDownloadBubbles[artistName];
+    if (!artistBubbleData) {
+        console.warn(`❌ No artist bubble data found for ${artistName}`);
+        return;
+    }
+
+    // Find all completed downloads
+    const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
+    console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
+        completedDownloads.map(d => d.item.name));
+
+    if (completedDownloads.length === 0) {
+        console.warn(`⚠️ No completed downloads found for bulk close`);
+        showToast('No completed downloads to close', 'info');
+        return;
+    }
+
+    // Close all completed modals
+    completedDownloads.forEach(download => {
+        const process = activeDownloadProcesses[download.virtualPlaylistId];
+        if (process && process.modalElement) {
+            console.log(`🗑️ Closing modal for: ${download.item.name}`);
+            closeDownloadMissingModal(download.virtualPlaylistId);
+        } else {
+            // No modal open — clean up the bubble entry directly
+            console.log(`🧹 Direct cleanup (no modal) for: ${download.item.name}`);
+            cleanupSearchDownload(download.virtualPlaylistId);
+        }
+    });
+
+    showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
+}
+
+/**
+ * Cleanup search download when modal is closed
+ */
+function cleanupSearchDownload(virtualPlaylistId) {
+    console.log(`🔍 [CLEANUP] Looking for search download to cleanup: ${virtualPlaylistId}`);
+
+    // Find which artist this download belongs to
+    for (const artistName in searchDownloadBubbles) {
+        const downloads = searchDownloadBubbles[artistName].downloads;
+        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+        if (downloadIndex !== -1) {
+            console.log(`🧹 [CLEANUP] Found download in artist ${artistName}: ${downloads[downloadIndex].item.name}`);
+
+            // Remove this download
+            downloads.splice(downloadIndex, 1);
+            console.log(`🗑️ [CLEANUP] Removed download from ${artistName}'s bubble`);
+
+            // If no more downloads for this artist, remove the bubble
+            if (downloads.length === 0) {
+                delete searchDownloadBubbles[artistName];
+                console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistName}`);
+            }
+
+            // Save snapshot and refresh
+            saveSearchBubbleSnapshot();
+            updateSearchDownloadsSection();
+
+            return;
+        }
+    }
+
+    console.log(`⚠️ [CLEANUP] No matching search download found for: ${virtualPlaylistId}`);
+}
+
+/**
+ * Show or update the artist downloads section in search state
+ */
+function showArtistDownloadsSection() {
+    console.log(`🔄 [SHOW] showArtistDownloadsSection() called - refreshing artist bubbles`);
+    console.log(`🔄 [SHOW] Current view: ${artistsPageState.currentView}, artistDownloadBubbles count: ${Object.keys(artistDownloadBubbles).length}`);
+
+    // Only show in search state
+    if (artistsPageState.currentView !== 'search') {
+        console.log(`⏭️ [SHOW] Skipping - not in search state (current: ${artistsPageState.currentView})`);
+        return;
+    }
+
+    const artistsSearchState = document.getElementById('artists-search-state');
+    if (!artistsSearchState) {
+        console.log(`⏭️ [SHOW] Skipping - no artists-search-state element found`);
+        return;
+    }
+
+    let downloadsSection = document.getElementById('artist-downloads-section');
+
+    // Create section if it doesn't exist
+    if (!downloadsSection) {
+        downloadsSection = document.createElement('div');
+        downloadsSection.id = 'artist-downloads-section';
+        downloadsSection.className = 'artist-downloads-section';
+
+        // Insert after the search container
+        const searchContainer = artistsSearchState.querySelector('.artists-search-container');
+        if (searchContainer) {
+            searchContainer.insertAdjacentElement('afterend', downloadsSection);
+        }
+    }
+
+    // Count active artists (those with downloads)
+    const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
+        artistDownloadBubbles[artistId].downloads.length > 0
+    );
+
+    if (activeArtists.length === 0) {
+        downloadsSection.style.display = 'none';
+        return;
+    }
+
+    // Show and populate the section
+    downloadsSection.style.display = 'block';
+    downloadsSection.innerHTML = `
+        <div class="artist-downloads-header">
+            <h3 class="artist-downloads-title">Current Downloads</h3>
+            <p class="artist-downloads-subtitle">Active download processes</p>
+        </div>
+        <div class="artist-bubble-container" id="artist-bubble-container">
+            ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
+        </div>
+    `;
+
+    // Add event listeners to bubble cards
+    activeArtists.forEach(artistId => {
+        const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
+        if (bubbleCard) {
+            bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
+
+            // Add dynamic glow effect
+            const artist = artistDownloadBubbles[artistId].artist;
+            if (artist.image_url) {
+                extractImageColors(artist.image_url, (colors) => {
+                    applyDynamicGlow(bubbleCard, colors);
+                });
+            }
+        }
+    });
+}
+
+/**
+ * Show download bubbles on the Library page (mirrors showArtistDownloadsSection)
+ */
+function showLibraryDownloadsSection() {
+    const libraryContent = document.querySelector('.library-content');
+    if (!libraryContent) return;
+
+    let downloadsSection = document.getElementById('library-downloads-section');
+
+    // Create section if it doesn't exist
+    if (!downloadsSection) {
+        downloadsSection = document.createElement('div');
+        downloadsSection.id = 'library-downloads-section';
+        downloadsSection.className = 'artist-downloads-section';
+
+        // Insert before the artist grid
+        const artistGrid = document.getElementById('library-artists-grid');
+        if (artistGrid) {
+            libraryContent.insertBefore(downloadsSection, artistGrid);
+        }
+    }
+
+    // Count active artists (reuses artistDownloadBubbles state)
+    const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
+        artistDownloadBubbles[artistId].downloads.length > 0
+    );
+
+    if (activeArtists.length === 0) {
+        downloadsSection.style.display = 'none';
+        return;
+    }
+
+    downloadsSection.style.display = 'block';
+    downloadsSection.innerHTML = `
+        <div class="artist-downloads-header">
+            <h3 class="artist-downloads-title">Current Downloads</h3>
+            <p class="artist-downloads-subtitle">Active download processes</p>
+        </div>
+        <div class="artist-bubble-container">
+            ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
+        </div>
+    `;
+
+    // Add click handlers + glow effects
+    activeArtists.forEach(artistId => {
+        const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
+        if (bubbleCard) {
+            bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
+            const artist = artistDownloadBubbles[artistId].artist;
+            if (artist.image_url) {
+                extractImageColors(artist.image_url, (colors) => {
+                    applyDynamicGlow(bubbleCard, colors);
+                });
+            }
+        }
+    });
+}
+
+/**
+ * Create HTML for an artist bubble card
+ */
+function createArtistBubbleCard(artistBubbleData) {
+    const { artist, downloads } = artistBubbleData;
+    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+    const completedCount = downloads.filter(d => d.status === 'view_results').length;
+    const allCompleted = activeCount === 0 && completedCount > 0;
+
+    // Enhanced debug logging for bubble card creation and green checkmark detection
+    console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
+        totalDownloads: downloads.length,
+        activeCount,
+        completedCount,
+        allCompleted,
+        downloadStatuses: downloads.map(d => `${d.album.name}: ${d.status}`)
+    });
+
+    // CRITICAL: Green checkmark detection logging
+    if (allCompleted) {
+        console.log(`🟢 [BUBBLE] GREEN CHECKMARK DETECTED for ${artist.name} - all ${downloads.length} downloads completed`);
+        console.log(`✅ [BUBBLE] This bubble will have 'all-completed' class and green checkmark`);
+    } else if (activeCount === 0 && completedCount === 0) {
+        console.log(`⭕ [BUBBLE] No active or completed downloads for ${artist.name} - this shouldn't happen`);
+    } else {
+        console.log(`⏳ [BUBBLE] Still waiting for completion: ${activeCount} active, ${completedCount} completed`);
+    }
+
+    const imageUrl = artist.image_url || '';
+    const backgroundStyle = imageUrl ?
+        `background-image: url('${imageUrl}');` :
+        `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+    return `
+        <div class="artist-bubble-card ${allCompleted ? 'all-completed' : ''}" 
+             data-artist-id="${artist.id}"
+             title="Click to manage downloads for ${escapeHtml(artist.name)}">
+            <div class="artist-bubble-image" style="${backgroundStyle}"></div>
+            <div class="artist-bubble-overlay"></div>
+            <div class="artist-bubble-content">
+                <div class="artist-bubble-name">${escapeHtml(artist.name)}</div>
+                <div class="artist-bubble-status">
+                    ${activeCount > 0 ? `${activeCount} active` : ''}
+                    ${completedCount > 0 ? `${completedCount} completed` : ''}
+                </div>
+            </div>
+            ${allCompleted ? `
+                <div class="bulk-complete-indicator" 
+                     onclick="event.stopPropagation(); bulkCompleteArtistDownloads('${artist.id}')"
+                     title="Complete all downloads">
+                    <span class="bulk-complete-icon">✅</span>
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+/**
+ * Monitor an artist download for completion status changes
+ */
+function monitorArtistDownload(artistId, virtualPlaylistId) {
+    // Check if the download process exists and monitor its status
+    const checkStatus = () => {
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (!process || !artistDownloadBubbles[artistId]) {
+            return; // Process or artist bubble no longer exists
+        }
+
+        // Find this download in the artist's downloads
+        const download = artistDownloadBubbles[artistId].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+        if (!download) return;
+
+        // Update download status based on process status
+        if (process.status === 'complete' && download.status === 'in_progress') {
+            download.status = 'view_results';
+            console.log(`✅ Download completed for ${artistDownloadBubbles[artistId].artist.name} - ${download.album.name}`);
+            console.log(`📊 Artist ${artistId} downloads status:`, artistDownloadBubbles[artistId].downloads.map(d => `${d.album.name}: ${d.status}`));
+
+            // Update the downloads section
+            updateArtistDownloadsSection();
+
+            // Save snapshot of updated state
+            saveArtistBubbleSnapshot();
+
+            // Check if all downloads for this artist are now completed
+            const artistDownloads = artistDownloadBubbles[artistId].downloads;
+            const allCompleted = artistDownloads.every(d => d.status === 'view_results');
+            if (allCompleted) {
+                console.log(`🟢 All downloads completed for ${artistDownloadBubbles[artistId].artist.name} - green checkmark should appear`);
+                console.log(`🎯 [STATUS DEBUG] Green checkmark trigger - forcing bubble refresh`);
+                // Force immediate bubble refresh to show green checkmark
+                setTimeout(updateArtistDownloadsSection, 100);
+            }
+        }
+
+        // Continue monitoring if still active
+        if (process.status !== 'complete') {
+            setTimeout(checkStatus, 2000); // Check every 2 seconds
+        }
+    };
+
+    // Start monitoring after a brief delay
+    setTimeout(checkStatus, 1000);
+}
+
+/**
+ * Open the artist download management modal
+ */
+function openArtistDownloadModal(artistId) {
+    const artistBubbleData = artistDownloadBubbles[artistId];
+    if (!artistBubbleData || artistDownloadModalOpen) return;
+
+    console.log(`🎵 [MODAL OPEN] Opening artist download modal for: ${artistBubbleData.artist.name}`);
+    console.log(`📊 [MODAL OPEN] Current download statuses:`, artistBubbleData.downloads.map(d => `${d.album.name}: ${d.status}`));
+    artistDownloadModalOpen = true;
+
+    const modal = document.createElement('div');
+    modal.id = 'artist-download-management-modal';
+    modal.className = 'artist-download-management-modal';
+    modal.innerHTML = `
+        <div class="artist-download-modal-content">
+            <div class="artist-download-modal-hero">
+                <div class="artist-download-modal-hero-bg" ${artistBubbleData.artist.image_url ? `style="background-image: url('${escapeHtml(artistBubbleData.artist.image_url)}')"` : ''}></div>
+                <div class="artist-download-modal-hero-overlay">
+                    <div class="artist-download-modal-hero-content">
+                        <div class="artist-download-modal-hero-avatar">
+                            ${artistBubbleData.artist.image_url
+            ? `<img src="${escapeHtml(artistBubbleData.artist.image_url)}" alt="${escapeHtml(artistBubbleData.artist.name)}" class="artist-download-modal-hero-image" loading="lazy">`
+            : '<div class="artist-download-modal-hero-fallback"><i class="fas fa-user-music"></i></div>'
+        }
+                        </div>
+                        <div class="artist-download-modal-hero-info">
+                            <h2 class="artist-download-modal-hero-title">${escapeHtml(artistBubbleData.artist.name)}</h2>
+                            <p class="artist-download-modal-hero-subtitle">${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}</p>
+                        </div>
+                    </div>
+                    <span class="artist-download-modal-close" onclick="closeArtistDownloadModal()">&times;</span>
+                </div>
+            </div>
+
+            <div class="artist-download-modal-body">
+                <div class="artist-download-items" id="artist-download-items-${artistId}">
+                    ${artistBubbleData.downloads.map((download, index) => createArtistDownloadItem(download, index)).join('')}
+                </div>
+            </div>
+        </div>
+        <div class="artist-download-modal-overlay" onclick="closeArtistDownloadModal()"></div>
+    `;
+
+    document.body.appendChild(modal);
+    modal.style.display = 'flex';
+
+    // Monitor for real-time updates
+    startArtistDownloadModalMonitoring(artistId);
+}
+
+/**
+ * Create HTML for an individual download item in the artist modal
+ */
+function createArtistDownloadItem(download, index) {
+    const { album, albumType, status, virtualPlaylistId } = download;
+    const buttonText = status === 'view_results' ? 'View Results' : 'View Progress';
+    const buttonClass = status === 'view_results' ? 'completed' : 'active';
+
+    // Enhanced debugging for button text generation
+    console.log(`🎯 [BUTTON] Creating item for ${album.name}: status='${status}' → buttonText='${buttonText}'`);
+
+    return `
+        <div class="artist-download-item" data-playlist-id="${virtualPlaylistId}">
+            <div class="download-item-artwork">
+                ${album.image_url
+            ? `<img src="${escapeHtml(album.image_url)}" alt="${escapeHtml(album.name)}" class="download-item-image" loading="lazy">`
+            : `<div class="download-item-fallback">
+                         <i class="fas fa-${albumType === 'album' ? 'compact-disc' : albumType === 'single' ? 'music' : 'record-vinyl'}"></i>
+                       </div>`
+        }
+            </div>
+            <div class="download-item-info">
+                <div class="download-item-name">${escapeHtml(album.name)}</div>
+                <div class="download-item-type">${albumType === 'album' ? 'Album' : albumType === 'single' ? 'Single' : 'EP'}</div>
+            </div>
+            <div class="download-item-actions">
+                <button class="download-item-btn ${buttonClass}"
+                        onclick="openArtistDownloadProcess('${virtualPlaylistId}')">
+                    ${buttonText}
+                </button>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Monitor artist download modal for real-time updates
+ */
+function startArtistDownloadModalMonitoring(artistId) {
+    if (!artistDownloadModalOpen) return;
+
+    const updateModal = () => {
+        const modal = document.getElementById('artist-download-management-modal');
+        const itemsContainer = document.getElementById(`artist-download-items-${artistId}`);
+
+        if (!modal || !itemsContainer || !artistDownloadBubbles[artistId]) return;
+
+        // Check for completed downloads that need to be removed
+        const activeDownloads = artistDownloadBubbles[artistId].downloads.filter(download => {
+            const process = activeDownloadProcesses[download.virtualPlaylistId];
+            // Keep if process exists or if it's completed but not yet cleaned up
+            return process !== undefined;
+        });
+
+        // Update the downloads array
+        artistDownloadBubbles[artistId].downloads = activeDownloads;
+
+        // If no downloads left, close modal
+        if (activeDownloads.length === 0) {
+            closeArtistDownloadModal();
+            return;
+        }
+
+        // Update modal content and synchronize with bubble state
+        let statusChanged = false;
+        itemsContainer.innerHTML = activeDownloads.map((download, index) => {
+            const process = activeDownloadProcesses[download.virtualPlaylistId];
+            if (process) {
+                const newStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
+                if (download.status !== newStatus) {
+                    console.log(`🔄 [ARTIST MODAL] Updating ${download.album.name} status from ${download.status} to ${newStatus}`);
+                    download.status = newStatus;
+                    statusChanged = true;
+                }
+            }
+            return createArtistDownloadItem(download, index);
+        }).join('');
+
+        // CRITICAL: If any status changed, immediately refresh artist bubble to show green checkmarks
+        if (statusChanged) {
+            console.log(`🎯 [SYNC] Status change detected in artist modal - refreshing bubble display`);
+            updateArtistDownloadsSection();
+
+            // Check if all downloads for this artist are now completed
+            const artistDownloads = artistDownloadBubbles[artistId].downloads;
+            const allCompleted = artistDownloads.every(d => d.status === 'view_results');
+            if (allCompleted) {
+                console.log(`🟢 [ARTIST MODAL] All downloads completed for artist ${artistId} - triggering green checkmark`);
+                // Force additional refresh after a brief delay to ensure UI updates
+                setTimeout(() => {
+                    console.log(`✨ [ARTIST MODAL] Forcing final refresh for green checkmark`);
+                    updateArtistDownloadsSection();
+                }, 200);
+            }
+        }
+
+        // Continue monitoring
+        setTimeout(updateModal, 2000);
+    };
+
+    setTimeout(updateModal, 1000);
+}
+
+/**
+ * Open a specific artist download process modal
+ */
+function openArtistDownloadProcess(virtualPlaylistId) {
+    const process = activeDownloadProcesses[virtualPlaylistId];
+    if (process && process.modalElement) {
+        // Close artist management modal first
+        closeArtistDownloadModal();
+
+        // Show the download process modal
+        process.modalElement.style.display = 'flex';
+
+        if (process.status === 'complete') {
+            showToast('Review download results and click "Close" to finish.', 'info');
+        }
+    }
+}
+
+/**
+ * Close the artist download management modal
+ */
+function closeArtistDownloadModal() {
+    const modal = document.getElementById('artist-download-management-modal');
+    if (modal) {
+        modal.remove();
+    }
+    artistDownloadModalOpen = false;
+}
+
+/**
+ * Bulk complete all downloads for an artist (when all are in 'view_results' state)
+ */
+function bulkCompleteArtistDownloads(artistId) {
+    console.log(`🎯 Bulk completing downloads for artist: ${artistId}`);
+
+    const artistBubbleData = artistDownloadBubbles[artistId];
+    if (!artistBubbleData) {
+        console.warn(`❌ No artist bubble data found for ${artistId}`);
+        return;
+    }
+
+    // Find all downloads in 'view_results' state
+    const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
+    console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
+        completedDownloads.map(d => d.album.name));
+
+    if (completedDownloads.length === 0) {
+        console.warn(`⚠️ No completed downloads found for bulk close`);
+        showToast('No completed downloads to close', 'info');
+        return;
+    }
+
+    // Programmatically close all completed modals
+    completedDownloads.forEach(download => {
+        const process = activeDownloadProcesses[download.virtualPlaylistId];
+        if (process && process.modalElement) {
+            console.log(`🗑️ Closing modal for: ${download.album.name}`);
+            // Trigger the close function which handles cleanup
+            closeDownloadMissingModal(download.virtualPlaylistId);
+        } else {
+            // No modal open — clean up the bubble entry directly
+            console.log(`🧹 Direct cleanup (no modal) for: ${download.album.name}`);
+            cleanupArtistDownload(download.virtualPlaylistId);
+        }
+    });
+
+    showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
+}
+
+// ========================================
+// Beatport Download Bubbles
+// ========================================
+
+/**
+ * Register a new Beatport chart download for bubble management
+ */
+function registerBeatportDownload(chartName, chartImage, virtualPlaylistId) {
+    console.log(`📝 Registering Beatport download: ${chartName}`);
+
+    // Use chart name as key (sanitised)
+    const chartKey = chartName.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
+
+    if (!beatportDownloadBubbles[chartKey]) {
+        beatportDownloadBubbles[chartKey] = {
+            chart: { name: chartName, image: chartImage || '' },
+            downloads: []
+        };
+    }
+
+    beatportDownloadBubbles[chartKey].downloads.push({
+        virtualPlaylistId: virtualPlaylistId,
+        status: 'in_progress',
+        startTime: new Date()
+    });
+
+    updateBeatportDownloadsSection();
+    saveBeatportBubbleSnapshot();
+    monitorBeatportDownload(chartKey, virtualPlaylistId);
+}
+
+/**
+ * Debounced update for Beatport downloads section
+ */
+function updateBeatportDownloadsSection() {
+    if (beatportDownloadsUpdateTimeout) {
+        clearTimeout(beatportDownloadsUpdateTimeout);
+    }
+    beatportDownloadsUpdateTimeout = setTimeout(() => {
+        showBeatportDownloadsSection();
+        updateDashboardDownloads();
+    }, 300);
+}
+
+/**
+ * Render Beatport download bubbles on the Beatport page
+ */
+function showBeatportDownloadsSection() {
+    const downloadsSection = document.getElementById('beatport-downloads-section');
+    if (!downloadsSection) return;
+
+    const activeCharts = Object.keys(beatportDownloadBubbles).filter(key =>
+        beatportDownloadBubbles[key].downloads.length > 0
+    );
+
+    if (activeCharts.length === 0) {
+        downloadsSection.style.display = 'none';
+        return;
+    }
+
+    downloadsSection.style.display = 'block';
+    downloadsSection.innerHTML = `
+        <div class="artist-downloads-header">
+            <h3 class="artist-downloads-title">Beatport Downloads</h3>
+            <p class="artist-downloads-subtitle">Active chart download processes</p>
+        </div>
+        <div class="artist-bubble-container" id="beatport-bubble-container">
+            ${activeCharts.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
+        </div>
+    `;
+
+    // Attach click handlers + glow
+    activeCharts.forEach(chartKey => {
+        const card = downloadsSection.querySelector(`[data-chart-key="${chartKey}"]`);
+        if (card) {
+            card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
+            const chartImage = beatportDownloadBubbles[chartKey].chart.image;
+            if (chartImage) {
+                extractImageColors(chartImage, (colors) => {
+                    applyDynamicGlow(card, colors);
+                });
+            }
+        }
+    });
+}
+
+/**
+ * Create HTML for a Beatport bubble card (reuses artist bubble CSS)
+ */
+function createBeatportBubbleCard(bubbleData) {
+    const { chart, downloads } = bubbleData;
+    const chartKey = chart.name.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
+    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
+    const completedCount = downloads.filter(d => d.status === 'view_results').length;
+    const allCompleted = activeCount === 0 && completedCount > 0;
+
+    const backgroundStyle = chart.image
+        ? `background-image: url('${chart.image}');`
+        : `background: linear-gradient(135deg, rgba(0, 210, 120, 0.3) 0%, rgba(0, 170, 100, 0.2) 100%);`;
+
+    return `
+        <div class="artist-bubble-card ${allCompleted ? 'all-completed' : ''}"
+             data-chart-key="${chartKey}"
+             title="Click to manage downloads for ${escapeHtml(chart.name)}">
+            <div class="artist-bubble-image" style="${backgroundStyle}"></div>
+            <div class="artist-bubble-overlay"></div>
+            <div class="artist-bubble-content">
+                <div class="artist-bubble-name">${escapeHtml(chart.name)}</div>
+                <div class="artist-bubble-status">
+                    ${activeCount > 0 ? `${activeCount} active` : ''}
+                    ${completedCount > 0 ? `${completedCount} completed` : ''}
+                </div>
+            </div>
+            ${allCompleted ? `
+                <div class="bulk-complete-indicator"
+                     onclick="event.stopPropagation(); bulkCompleteBeatportDownloads('${chartKey}')"
+                     title="Complete all downloads">
+                    <span class="bulk-complete-icon">✅</span>
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+/**
+ * Monitor a Beatport download for completion
+ */
+function monitorBeatportDownload(chartKey, virtualPlaylistId) {
+    const checkStatus = () => {
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (!process || !beatportDownloadBubbles[chartKey]) return;
+
+        const download = beatportDownloadBubbles[chartKey].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+        if (!download) return;
+
+        if (process.status === 'complete' && download.status === 'in_progress') {
+            download.status = 'view_results';
+            console.log(`✅ Beatport download completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
+
+            updateBeatportDownloadsSection();
+            saveBeatportBubbleSnapshot();
+
+            const allCompleted = beatportDownloadBubbles[chartKey].downloads.every(d => d.status === 'view_results');
+            if (allCompleted) {
+                console.log(`🟢 All Beatport downloads completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
+                setTimeout(updateBeatportDownloadsSection, 100);
+            }
+        }
+
+        if (process.status !== 'complete') {
+            setTimeout(checkStatus, 2000);
+        }
+    };
+
+    setTimeout(checkStatus, 1000);
+}
+
+/**
+ * Open the download modal for a Beatport chart bubble
+ */
+function openBeatportBubbleModal(chartKey) {
+    const bubbleData = beatportDownloadBubbles[chartKey];
+    if (!bubbleData) return;
+
+    // Find the first download with an active modal
+    for (const download of bubbleData.downloads) {
+        const process = activeDownloadProcesses[download.virtualPlaylistId];
+        if (process && process.modalElement) {
+            process.modalElement.style.display = 'flex';
+            if (process.status === 'complete') {
+                showToast('Review download results and click "Close" to finish.', 'info');
+            }
+            return;
+        }
+    }
+
+    showToast('No active download modal found for this chart', 'info');
+}
+
+/**
+ * Bulk complete all downloads for a Beatport chart
+ */
+function bulkCompleteBeatportDownloads(chartKey) {
+    console.log(`🎯 Bulk completing Beatport downloads for chart: ${chartKey}`);
+
+    const bubbleData = beatportDownloadBubbles[chartKey];
+    if (!bubbleData) return;
+
+    const completedDownloads = bubbleData.downloads.filter(d => d.status === 'view_results');
+    if (completedDownloads.length === 0) {
+        showToast('No completed downloads to close', 'info');
+        return;
+    }
+
+    completedDownloads.forEach(download => {
+        const process = activeDownloadProcesses[download.virtualPlaylistId];
+        if (process && process.modalElement) {
+            closeDownloadMissingModal(download.virtualPlaylistId);
+        } else {
+            cleanupBeatportDownload(download.virtualPlaylistId);
+        }
+    });
+
+    showToast(`Completed ${completedDownloads.length} downloads for ${bubbleData.chart.name}`, 'success');
+}
+
+/**
+ * Clean up a Beatport download when its modal is closed
+ */
+function cleanupBeatportDownload(virtualPlaylistId) {
+    console.log(`🔍 [CLEANUP] Looking for Beatport download to cleanup: ${virtualPlaylistId}`);
+
+    for (const chartKey in beatportDownloadBubbles) {
+        const downloads = beatportDownloadBubbles[chartKey].downloads;
+        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+        if (downloadIndex !== -1) {
+            downloads.splice(downloadIndex, 1);
+            console.log(`🧹 [CLEANUP] Removed Beatport download from ${chartKey}. Remaining: ${downloads.length}`);
+
+            if (downloads.length === 0) {
+                delete beatportDownloadBubbles[chartKey];
+                console.log(`🧹 [CLEANUP] No more downloads - removed Beatport bubble: ${chartKey}`);
+            }
+
+            updateBeatportDownloadsSection();
+            saveBeatportBubbleSnapshot();
+            return;
+        }
+    }
+}
+
+// --- Beatport Bubble Snapshot System ---
+
+let beatportSnapshotSaveTimeout = null;
+
+async function saveBeatportBubbleSnapshot() {
+    if (beatportSnapshotSaveTimeout) {
+        clearTimeout(beatportSnapshotSaveTimeout);
+    }
+
+    beatportSnapshotSaveTimeout = setTimeout(async () => {
+        try {
+            const bubbleCount = Object.keys(beatportDownloadBubbles).length;
+            if (bubbleCount === 0) return;
+
+            const cleanBubbles = {};
+            for (const [chartKey, bubbleData] of Object.entries(beatportDownloadBubbles)) {
+                cleanBubbles[chartKey] = {
+                    chart: bubbleData.chart,
+                    downloads: bubbleData.downloads.map(d => ({
+                        virtualPlaylistId: d.virtualPlaylistId,
+                        status: d.status,
+                        startTime: d.startTime instanceof Date ? d.startTime.toISOString() : d.startTime
+                    }))
+                };
+            }
+
+            const response = await fetch('/api/beatport_bubbles/snapshot', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ bubbles: cleanBubbles })
+            });
+
+            const data = await response.json();
+            if (data.success) {
+                console.log(`✅ Beatport bubble snapshot saved: ${bubbleCount} charts`);
+            }
+        } catch (error) {
+            console.error('❌ Error saving Beatport bubble snapshot:', error);
+        }
+    }, 1000);
+}
+
+async function hydrateBeatportBubblesFromSnapshot() {
+    try {
+        console.log('🔄 Loading Beatport bubble snapshot from backend...');
+
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport_bubbles/hydrate', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (!data.success) {
+            console.error('❌ Failed to load Beatport bubble snapshot:', data.error);
+            return;
+        }
+
+        const bubbles = data.bubbles || {};
+        if (Object.keys(bubbles).length === 0) {
+            console.log('ℹ️ No Beatport bubbles to hydrate');
+            return;
+        }
+
+        beatportDownloadBubbles = {};
+
+        for (const [chartKey, bubbleData] of Object.entries(bubbles)) {
+            beatportDownloadBubbles[chartKey] = {
+                chart: bubbleData.chart,
+                downloads: bubbleData.downloads.map(d => ({
+                    virtualPlaylistId: d.virtualPlaylistId,
+                    status: d.status,
+                    startTime: new Date(d.startTime)
+                }))
+            };
+
+            for (const download of bubbleData.downloads) {
+                if (download.status === 'in_progress') {
+                    monitorBeatportDownload(chartKey, download.virtualPlaylistId);
+                }
+            }
+        }
+
+        updateBeatportDownloadsSection();
+        console.log(`✅ Hydrated ${Object.keys(beatportDownloadBubbles).length} Beatport download bubbles`);
+    } catch (error) {
+        if (error && error.name === 'AbortError') {
+            console.log('⏹ Beatport bubble hydration aborted');
+            return;
+        }
+        console.error('❌ Error hydrating Beatport bubbles:', error);
+    }
+}
+
+/**
+ * Clean up artist download when a modal is closed
+ */
+function cleanupArtistDownload(virtualPlaylistId) {
+    console.log(`🔍 [CLEANUP] Looking for download to cleanup: ${virtualPlaylistId}`);
+    console.log(`🔍 [CLEANUP] Current artist bubbles:`, Object.keys(artistDownloadBubbles));
+
+    // Find which artist this download belongs to
+    for (const artistId in artistDownloadBubbles) {
+        const downloads = artistDownloadBubbles[artistId].downloads;
+        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
+
+        console.log(`🔍 [CLEANUP] Checking artist ${artistId}: ${downloads.length} downloads`);
+        downloads.forEach(d => console.log(`  - ${d.album.name} (${d.virtualPlaylistId}): ${d.status}`));
+
+        if (downloadIndex !== -1) {
+            const downloadToRemove = downloads[downloadIndex];
+            console.log(`🧹 [CLEANUP] Found download to cleanup: ${downloadToRemove.album.name} (status: ${downloadToRemove.status})`);
+
+            // Remove this download from the artist's downloads
+            downloads.splice(downloadIndex, 1);
+            console.log(`✅ [CLEANUP] Removed download from artist ${artistId}. Remaining: ${downloads.length}`);
+
+            // If no more downloads for this artist, remove the bubble
+            if (downloads.length === 0) {
+                delete artistDownloadBubbles[artistId];
+                console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistId}`);
+            } else {
+                console.log(`📊 [CLEANUP] Artist ${artistId} still has ${downloads.length} downloads remaining`);
+            }
+
+            // Update the downloads section
+            console.log(`🔄 [CLEANUP] Updating artist downloads section...`);
+            updateArtistDownloadsSection();
+
+            // Save snapshot of updated state
+            saveArtistBubbleSnapshot();
+            break;
+        }
+    }
+    console.log(`✅ [CLEANUP] Cleanup process completed for ${virtualPlaylistId}`);
+}
+
+/**
+ * Force refresh all artist download statuses (useful for debugging)
+ */
+function refreshAllArtistDownloadStatuses() {
+    console.log('🔄 Force refreshing all artist download statuses...');
+
+    for (const artistId in artistDownloadBubbles) {
+        const artistData = artistDownloadBubbles[artistId];
+        let hasChanges = false;
+
+        artistData.downloads.forEach(download => {
+            const process = activeDownloadProcesses[download.virtualPlaylistId];
+            if (process) {
+                const expectedStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
+                if (download.status !== expectedStatus) {
+                    console.log(`🔧 Fixing status for ${download.album.name}: ${download.status} → ${expectedStatus}`);
+                    download.status = expectedStatus;
+                    hasChanges = true;
+                }
+            }
+        });
+
+        if (hasChanges) {
+            console.log(`✅ Updated statuses for ${artistData.artist.name}`);
+        }
+    }
+
+    // Force update the downloads section
+    showArtistDownloadsSection();
+}
+
+/**
+ * Extract dominant colors from an image for dynamic glow effects
+ */
+async function extractImageColors(imageUrl, callback) {
+    if (!imageUrl) {
+        callback(getAccentFallbackColors()); // Fallback to Spotify green
+        return;
+    }
+
+    // Check cache first for performance
+    if (artistsPageState.cache.colors[imageUrl]) {
+        callback(artistsPageState.cache.colors[imageUrl]);
+        return;
+    }
+
+    try {
+        // Create a canvas to analyze the image
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+
+        img.crossOrigin = 'anonymous';
+
+        img.onload = function () {
+            // Resize to small dimensions for faster processing
+            const size = 50;
+            canvas.width = size;
+            canvas.height = size;
+
+            // Draw image to canvas
+            ctx.drawImage(img, 0, 0, size, size);
+
+            try {
+                // Get image data
+                const imageData = ctx.getImageData(0, 0, size, size);
+                const data = imageData.data;
+
+                // Extract colors (sample every few pixels for performance)
+                const colors = [];
+                for (let i = 0; i < data.length; i += 16) { // Sample every 4th pixel
+                    const r = data[i];
+                    const g = data[i + 1];
+                    const b = data[i + 2];
+                    const alpha = data[i + 3];
+
+                    // Skip transparent or very dark pixels
+                    if (alpha > 128 && (r + g + b) > 150) {
+                        colors.push({ r, g, b });
+                    }
+                }
+
+                if (colors.length === 0) {
+                    callback(getAccentFallbackColors()); // Fallback
+                    return;
+                }
+
+                // Find dominant colors using a simple clustering approach
+                const dominantColors = findDominantColors(colors, 2);
+
+                // Convert to CSS hex colors
+                const hexColors = dominantColors.map(color =>
+                    `#${((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1)}`
+                );
+
+                // Cache the colors for future use
+                artistsPageState.cache.colors[imageUrl] = hexColors;
+
+                callback(hexColors);
+
+            } catch (e) {
+                console.warn('Color extraction failed, using fallback colors:', e);
+                callback(getAccentFallbackColors());
+            }
+        };
+
+        img.onerror = function () {
+            callback(getAccentFallbackColors()); // Fallback on error
+        };
+
+        img.src = imageUrl;
+
+    } catch (error) {
+        console.warn('Image color extraction error:', error);
+        callback(getAccentFallbackColors());
+    }
+}
+
+/**
+ * Simple color clustering to find dominant colors
+ */
+function findDominantColors(colors, numColors = 2) {
+    if (colors.length === 0) return [{ r: 29, g: 185, b: 84 }];
+
+    // Simple k-means clustering
+    let centroids = [];
+
+    // Initialize centroids randomly
+    for (let i = 0; i < numColors; i++) {
+        centroids.push(colors[Math.floor(Math.random() * colors.length)]);
+    }
+
+    // Run a few iterations of k-means
+    for (let iteration = 0; iteration < 5; iteration++) {
+        const clusters = Array(numColors).fill().map(() => []);
+
+        // Assign each color to nearest centroid
+        colors.forEach(color => {
+            let minDistance = Infinity;
+            let nearestCluster = 0;
+
+            centroids.forEach((centroid, i) => {
+                const distance = Math.sqrt(
+                    Math.pow(color.r - centroid.r, 2) +
+                    Math.pow(color.g - centroid.g, 2) +
+                    Math.pow(color.b - centroid.b, 2)
+                );
+
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    nearestCluster = i;
+                }
+            });
+
+            clusters[nearestCluster].push(color);
+        });
+
+        // Update centroids
+        centroids = clusters.map(cluster => {
+            if (cluster.length === 0) return centroids[0]; // Fallback
+
+            const avgR = cluster.reduce((sum, c) => sum + c.r, 0) / cluster.length;
+            const avgG = cluster.reduce((sum, c) => sum + c.g, 0) / cluster.length;
+            const avgB = cluster.reduce((sum, c) => sum + c.b, 0) / cluster.length;
+
+            return { r: Math.round(avgR), g: Math.round(avgG), b: Math.round(avgB) };
+        });
+    }
+
+    // Ensure we have vibrant colors by boosting saturation
+    return centroids.map(color => {
+        const max = Math.max(color.r, color.g, color.b);
+        const min = Math.min(color.r, color.g, color.b);
+        const saturation = max === 0 ? 0 : (max - min) / max;
+
+        // Boost low saturation colors
+        if (saturation < 0.4) {
+            const factor = 1.3;
+            return {
+                r: Math.min(255, Math.round(color.r * factor)),
+                g: Math.min(255, Math.round(color.g * factor)),
+                b: Math.min(255, Math.round(color.b * factor))
+            };
+        }
+
+        return color;
+    });
+}
+
+/**
+ * Apply dynamic glow effect to a card element
+ */
+function applyDynamicGlow(cardElement, colors) {
+    if (!cardElement || colors.length < 2) return;
+
+    const color1 = colors[0];
+    const color2 = colors[1];
+
+    // Add a small delay to make the effect feel more natural
+    setTimeout(() => {
+        // Create CSS custom properties for the dynamic colors
+        cardElement.style.setProperty('--glow-color-1', color1);
+        cardElement.style.setProperty('--glow-color-2', color2);
+        cardElement.classList.add('has-dynamic-glow');
+
+        console.log(`🎨 Applied dynamic glow: ${color1}, ${color2}`);
+    }, Math.random() * 200 + 100); // Random delay between 100-300ms
+}
+
+/**
+ * Utility function to escape HTML
+ */
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// --- Service Status and System Stats Functions ---
+
+async function _forceServiceStatusRefresh() {
+    // Force an immediate status refresh (bypasses WebSocket check) — used after settings save
+    try {
+        const response = await fetch('/status');
+        if (!response.ok) return;
+        const data = await response.json();
+        handleServiceStatusUpdate(data);
+    } catch (error) {
+        console.warn('Could not force service status refresh:', error);
+    }
+}
+
+async function fetchAndUpdateServiceStatus() {
+    if (document.hidden) return; // Skip polling when tab is not visible
+    if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll
+    try {
+        const response = await fetch('/status');
+        if (!response.ok) return;
+
+        const data = await response.json();
+
+        // Cache for library status card
+        _lastServiceStatus = data;
+
+        // Update service status indicators and text (dashboard)
+        updateServiceStatus('spotify', data.spotify);
+        updateServiceStatus('media-server', data.media_server);
+        updateServiceStatus('soulseek', data.soulseek);
+
+        // Update sidebar service status indicators
+        updateSidebarServiceStatus('spotify', data.spotify);
+        updateSidebarServiceStatus('media-server', data.media_server);
+        updateSidebarServiceStatus('soulseek', data.soulseek);
+
+        // Update downloads nav badge
+        if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
+
+        // Hide sync buttons (not the page) for standalone mode
+        const isSoulsyncStandalone2 = data.media_server?.type === 'soulsync';
+        _isSoulsyncStandalone = isSoulsyncStandalone2;
+        document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
+            if (isSoulsyncStandalone2) {
+                btn.dataset.hiddenByStandalone = '1';
+                btn.style.display = 'none';
+            } else if (btn.dataset.hiddenByStandalone) {
+                delete btn.dataset.hiddenByStandalone;
+                btn.style.display = '';
+            }
+        });
+
+        // Update enrichment service cards
+        if (data.enrichment) renderEnrichmentCards(data.enrichment);
+
+        // Check for Spotify rate limit
+        if (data.spotify && data.spotify.rate_limited && data.spotify.rate_limit) {
+            handleSpotifyRateLimit(data.spotify.rate_limit);
+        } else if (_spotifyRateLimitShown) {
+            handleSpotifyRateLimit(null);
+        }
+
+    } catch (error) {
+        console.warn('Could not fetch service status:', error);
+    }
+}
+
+function updateServiceStatus(service, statusData) {
+    const indicator = document.getElementById(`${service}-status-indicator`);
+    const statusText = document.getElementById(`${service}-status-text`);
+
+    if (indicator && statusText) {
+        if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
+            indicator.className = 'service-card-indicator rate-limited';
+            const remaining = statusData.rate_limited
+                ? formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)
+                : formatRateLimitDuration(statusData.post_ban_cooldown);
+            const phase = statusData.rate_limited ? 'paused' : 'recovering';
+            const fallbackLabel = statusData.source === 'deezer' ? 'Deezer' : 'iTunes';
+            statusText.textContent = `${fallbackLabel} (Spotify ${phase} \u2014 ${remaining})`;
+            statusText.className = 'service-card-status-text rate-limited';
+        } else if (statusData.connected) {
+            indicator.className = 'service-card-indicator connected';
+            statusText.textContent = `Connected (${statusData.response_time}ms)`;
+            statusText.className = 'service-card-status-text connected';
+        } else {
+            indicator.className = 'service-card-indicator disconnected';
+            statusText.textContent = 'Disconnected';
+            statusText.className = 'service-card-status-text disconnected';
+        }
+    }
+
+    // Update music source title based on active source
+    if (service === 'spotify' && statusData.source) {
+        const musicSourceTitleElement = document.getElementById('music-source-title');
+        if (musicSourceTitleElement) {
+            const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
+            musicSourceTitleElement.textContent = sourceName;
+            currentMusicSourceName = sourceName;
+        }
+
+        // Show/hide Spotify disconnect button based on connection state
+        const disconnectBtn = document.getElementById('spotify-disconnect-btn');
+        if (disconnectBtn) {
+            disconnectBtn.style.display = statusData.source === 'spotify' ? '' : 'none';
+        }
+    }
+
+    // Update download source title on dashboard card
+    if (service === 'soulseek' && statusData.source) {
+        const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
+        const displayName = sourceNames[statusData.source] || 'Soulseek';
+        const titleEl = document.getElementById('download-source-title');
+        if (titleEl) titleEl.textContent = displayName;
+    }
+}
+
+function updateSidebarServiceStatus(service, statusData) {
+    const indicator = document.getElementById(`${service}-indicator`);
+    if (indicator) {
+        const dot = indicator.querySelector('.status-dot');
+        const nameElement = indicator.querySelector('.status-name');
+
+        if (dot) {
+            if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
+                dot.className = 'status-dot rate-limited';
+                dot.title = statusData.rate_limited
+                    ? `Spotify paused \u2014 ${formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)} remaining`
+                    : `Spotify recovering \u2014 ${formatRateLimitDuration(statusData.post_ban_cooldown)} cooldown`;
+            } else if (statusData.connected) {
+                dot.className = 'status-dot connected';
+                dot.title = '';
+            } else {
+                dot.className = 'status-dot disconnected';
+                dot.title = '';
+            }
+        }
+
+        // Update media server name if it's the media server indicator
+        if (service === 'media-server' && statusData.type) {
+            const mediaServerNameElement = document.getElementById('media-server-name');
+            if (mediaServerNameElement) {
+                const serverName = statusData.type.charAt(0).toUpperCase() + statusData.type.slice(1);
+                mediaServerNameElement.textContent = serverName;
+            }
+        }
+
+        // Update music source name in sidebar based on active source
+        if (service === 'spotify' && statusData.source) {
+            const musicSourceNameElement = document.getElementById('music-source-name');
+            if (musicSourceNameElement) {
+                const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
+                musicSourceNameElement.textContent = sourceName;
+            }
+        }
+
+        // Update download source name based on configured mode
+        if (service === 'soulseek' && statusData.source) {
+            const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
+            const displayName = sourceNames[statusData.source] || 'Soulseek';
+            const sidebarName = document.getElementById('download-source-name');
+            if (sidebarName) sidebarName.textContent = displayName;
+        }
+    }
+}
+
+function renderEnrichmentCards(enrichment) {
+    const grid = document.getElementById('enrichment-status-grid');
+    if (!grid || !enrichment) return;
+
+    // Service display order
+    const serviceOrder = [
+        'musicbrainz', 'spotify_enrichment', 'itunes_enrichment', 'deezer_enrichment',
+        'tidal_enrichment', 'qobuz_enrichment', 'lastfm', 'genius', 'audiodb',
+        'acoustid', 'listenbrainz'
+    ];
+
+    // Map service keys to their settings page selector for click-to-configure
+    const settingsSelectors = {
+        'spotify_enrichment': '.spotify-title',
+        'tidal_enrichment': '.tidal-title',
+        'qobuz_enrichment': '.qobuz-title',
+        'lastfm': '.lastfm-title',
+        'genius': '.genius-title',
+        'acoustid': '.acoustid-title',
+        'listenbrainz': '.listenbrainz-title',
+    };
+
+    const chips = [];
+    for (const key of serviceOrder) {
+        const svc = enrichment[key];
+        if (!svc) continue;
+
+        // Determine status class and text
+        let statusClass, statusLabel;
+        if ('running' in svc) {
+            if (!svc.configured) {
+                statusClass = 'not-configured';
+                statusLabel = 'Set up';
+            } else if (svc.paused) {
+                statusClass = 'paused';
+                statusLabel = svc.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
+            } else if (svc.running) {
+                statusClass = svc.idle ? 'idle' : 'running';
+                statusLabel = svc.idle ? 'Idle' : 'Running';
+            } else {
+                statusClass = 'stopped';
+                statusLabel = 'Stopped';
+            }
+        } else {
+            statusClass = svc.configured ? 'running' : 'not-configured';
+            statusLabel = svc.configured ? 'Ready' : 'Set up';
+        }
+
+        const selector = settingsSelectors[key];
+        const clickAttr = selector
+            ? `onclick="navigateToPage('settings'); setTimeout(() => { switchSettingsTab('connections'); setTimeout(() => { const el = document.querySelector('${selector}'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); }, 50);"`
+            : '';
+
+        // Build activity display — human-readable, not cryptic numbers
+        let activityHtml = '';
+        let metaHtml = '';
+        const isSpotify = key === 'spotify_enrichment';
+
+        if ('running' in svc && svc.configured) {
+            const c1h = svc.calls_1h || 0;
+            const c24h = svc.calls_24h || 0;
+
+            if (isSpotify && svc.daily_budget) {
+                // Spotify: show budget usage prominently
+                const b = svc.daily_budget;
+                const pct = Math.min(100, Math.round((b.used / b.limit) * 100));
+                const barClass = b.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
+                activityHtml = `<span class="enrichment-chip-activity">${b.used.toLocaleString()} / ${b.limit.toLocaleString()}</span>`;
+                metaHtml = `<div class="enrichment-chip-budget">
+                    <div class="enrichment-chip-budget-bar ${barClass}" style="width: ${pct}%"></div>
+                </div>`;
+            } else if (c24h > 0) {
+                // Other services: show 24h count
+                activityHtml = `<span class="enrichment-chip-activity">${c24h.toLocaleString()} / 24h</span>`;
+            }
+        }
+
+        // Tooltip: full details including 1h breakdown
+        let tooltipLines = [svc.name + ' — ' + statusLabel];
+        if ('running' in svc && svc.configured) {
+            const c1h = svc.calls_1h || 0;
+            const c24h = svc.calls_24h || 0;
+            if (c24h > 0 || c1h > 0) tooltipLines.push('Last hour: ' + c1h + ' · Last 24h: ' + c24h);
+        }
+        if (isSpotify && svc.daily_budget) {
+            const b = svc.daily_budget;
+            tooltipLines.push('Daily budget: ' + b.used + ' / ' + b.limit + (b.exhausted ? ' (exhausted)' : ''));
+        }
+        if (selector && statusClass === 'not-configured') {
+            tooltipLines = ['Click to configure in Settings'];
+        }
+
+        const statusDisplay = statusClass === 'not-configured' && selector ? 'Configure →' : statusLabel;
+
+        chips.push(`
+            <div class="enrichment-chip status-${statusClass}" ${clickAttr} title="${tooltipLines.join('\n')}">
+                <span class="enrichment-chip-dot"></span>
+                <span class="enrichment-chip-name">${svc.name}</span>
+                ${activityHtml}
+                <span class="enrichment-chip-status">${statusDisplay}</span>
+                ${metaHtml}
+            </div>
+        `);
+    }
+
+    grid.innerHTML = chips.join('');
+}
+
+// ===============================
+
diff --git a/webui/static/beatport-ui.js b/webui/static/beatport-ui.js
new file mode 100644
index 00000000..e2c5a774
--- /dev/null
+++ b/webui/static/beatport-ui.js
@@ -0,0 +1,3903 @@
+// BEATPORT REBUILD SLIDER FUNCTIONALITY
+// =================================
+
+let beatportRebuildSliderState = {
+    currentSlide: 0,
+    totalSlides: 4,
+    autoPlayInterval: null,
+    autoPlayDelay: 5000
+};
+
+/**
+ * Initialize the beatport rebuild slider functionality
+ */
+function initializeBeatportRebuildSlider() {
+    console.log('🔄 Initializing beatport rebuild slider...');
+
+    const slider = document.getElementById('beatport-rebuild-slider');
+    if (!slider) {
+        console.warn('Beatport rebuild slider not found');
+        return;
+    }
+
+    // Check if already initialized to prevent duplicate event listeners
+    if (slider.dataset.initialized === 'true') {
+        console.log('Beatport rebuild slider already initialized, skipping...');
+        startBeatportRebuildSliderAutoPlay(); // Just restart autoplay
+        return;
+    }
+
+    // Mark as initialized
+    slider.dataset.initialized = 'true';
+
+    // Load real Beatport data first
+    loadBeatportHeroTracks();
+
+    console.log('✅ Beatport rebuild slider initialized successfully');
+}
+
+/**
+ * Load real Beatport hero tracks and populate the slider
+ */
+async function loadBeatportHeroTracks() {
+    console.log('🎯 Loading real Beatport hero tracks...');
+
+    try {
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/hero-tracks', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success && data.tracks && data.tracks.length > 0) {
+            console.log(`✅ Loaded ${data.tracks.length} Beatport tracks`);
+            populateBeatportSlider(data.tracks);
+        } else {
+            console.warn('❌ No tracks received from Beatport API, using placeholder data');
+            setupBeatportSliderWithPlaceholders();
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return;
+        console.error('❌ Error loading Beatport tracks:', error);
+        setupBeatportSliderWithPlaceholders();
+    }
+}
+
+/**
+ * Populate the slider with real Beatport track data
+ */
+function populateBeatportSlider(tracks) {
+    const sliderTrack = document.getElementById('beatport-rebuild-slider-track');
+    const indicatorsContainer = document.querySelector('.beatport-rebuild-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.warn('Slider elements not found');
+        return;
+    }
+
+    // Clear existing content
+    sliderTrack.innerHTML = '';
+    indicatorsContainer.innerHTML = '';
+
+    // Update state
+    beatportRebuildSliderState.totalSlides = tracks.length;
+    beatportRebuildSliderState.currentSlide = 0;
+
+    // Generate slides HTML
+    tracks.forEach((track, index) => {
+        const slideHtml = `
+            <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
+                 data-slide="${index}"
+                 data-url="${track.url}"
+                 data-image="${track.image_url}"
+                 style="--slide-bg-image: url('${track.image_url}')">
+                <div class="beatport-rebuild-slide-background">
+                    <div class="beatport-rebuild-slide-gradient"></div>
+                </div>
+                <div class="beatport-rebuild-slide-content">
+                    <div class="beatport-rebuild-track-info">
+                        <h2 class="beatport-rebuild-track-title">${track.title}</h2>
+                        <p class="beatport-rebuild-artist-name">${track.artist}</p>
+                        <p class="beatport-rebuild-album-name">New on Beatport</p>
+                    </div>
+                </div>
+            </div>
+        `;
+        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
+
+        // Add indicator
+        const indicatorHtml = `<button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>`;
+        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
+    });
+
+    // Now set up all the functionality
+    setupBeatportSliderFunctionality();
+
+    // Add individual click handlers for each slide (like top 10 releases pattern)
+    setupHeroSliderIndividualClickHandlers(tracks);
+
+    console.log(`✅ Populated slider with ${tracks.length} real Beatport tracks`);
+}
+
+/**
+ * Set up individual click handlers for hero slider slides (like top 10 releases)
+ */
+function setupHeroSliderIndividualClickHandlers(tracks) {
+    const slides = document.querySelectorAll('.beatport-rebuild-slide[data-url]');
+
+    slides.forEach((slide, index) => {
+        const releaseUrl = slide.getAttribute('data-url');
+        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+            // Create release data object from the track data (similar to top 10 releases)
+            const track = tracks[index];
+            if (track) {
+                const releaseData = {
+                    url: releaseUrl,
+                    title: track.title || 'Unknown Title',
+                    artist: track.artist || 'Unknown Artist',
+                    label: track.label || 'Unknown Label',
+                    image_url: track.image_url || ''
+                };
+
+                // Add click handler that mimics the top 10 releases behavior
+                slide.addEventListener('click', (event) => {
+                    // Prevent navigation button clicks from triggering this
+                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
+                        event.target.closest('.beatport-rebuild-indicator')) {
+                        return;
+                    }
+
+                    console.log(`🎯 Hero slider slide clicked: ${releaseData.title} by ${releaseData.artist}`);
+                    handleBeatportReleaseCardClick(slide, releaseData);
+                });
+
+                slide.style.cursor = 'pointer';
+            }
+        }
+    });
+
+    console.log(`✅ Set up individual click handlers for ${slides.length} hero slider slides`);
+}
+
+/**
+ * Set up placeholder data if API fails
+ */
+function setupBeatportSliderWithPlaceholders() {
+    console.log('🔄 Setting up slider with placeholder data...');
+
+    // The HTML already has placeholder slides, just set up functionality
+    setupBeatportSliderFunctionality();
+}
+
+/**
+ * Set up all slider functionality after content is loaded
+ */
+function setupBeatportSliderFunctionality() {
+    // Set up navigation buttons
+    setupBeatportRebuildSliderNavigation();
+
+    // Set up indicators
+    setupBeatportRebuildSliderIndicators();
+
+
+    // Start auto-play
+    startBeatportRebuildSliderAutoPlay();
+
+    // Set up pause on hover
+    setupBeatportRebuildSliderHoverPause();
+}
+
+/**
+ * Set up navigation button functionality
+ */
+function setupBeatportRebuildSliderNavigation() {
+    const prevBtn = document.getElementById('beatport-rebuild-prev-btn');
+    const nextBtn = document.getElementById('beatport-rebuild-next-btn');
+
+    if (prevBtn) {
+        prevBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Previous button clicked, current slide:', beatportRebuildSliderState.currentSlide);
+            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide - 1);
+            resetBeatportRebuildSliderAutoPlay();
+        });
+    }
+
+    if (nextBtn) {
+        nextBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Next button clicked, current slide:', beatportRebuildSliderState.currentSlide);
+            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
+            resetBeatportRebuildSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Set up indicator functionality
+ */
+function setupBeatportRebuildSliderIndicators() {
+    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
+
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            goToBeatportRebuildSlide(index);
+            resetBeatportRebuildSliderAutoPlay();
+        });
+    });
+}
+
+/**
+ * Navigate to a specific slide
+ */
+function goToBeatportRebuildSlide(slideIndex) {
+    console.log('goToBeatportRebuildSlide called with:', slideIndex, 'current:', beatportRebuildSliderState.currentSlide);
+
+    // Wrap around if out of bounds
+    if (slideIndex < 0) {
+        slideIndex = beatportRebuildSliderState.totalSlides - 1;
+    } else if (slideIndex >= beatportRebuildSliderState.totalSlides) {
+        slideIndex = 0;
+    }
+
+    console.log('After wrapping, slideIndex:', slideIndex);
+
+    // Update current slide
+    beatportRebuildSliderState.currentSlide = slideIndex;
+
+    // Update slide visibility
+    const slides = document.querySelectorAll('.beatport-rebuild-slide');
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+
+        if (index === slideIndex) {
+            slide.classList.add('active');
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log('Slide updated to:', beatportRebuildSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality
+ */
+function startBeatportRebuildSliderAutoPlay() {
+    if (beatportRebuildSliderState.autoPlayInterval) {
+        clearInterval(beatportRebuildSliderState.autoPlayInterval);
+    }
+
+    beatportRebuildSliderState.autoPlayInterval = setInterval(() => {
+        goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
+    }, beatportRebuildSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer
+ */
+function resetBeatportRebuildSliderAutoPlay() {
+    startBeatportRebuildSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality
+ */
+function setupBeatportRebuildSliderHoverPause() {
+    const sliderContainer = document.querySelector('.beatport-rebuild-slider-container');
+
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (beatportRebuildSliderState.autoPlayInterval) {
+                clearInterval(beatportRebuildSliderState.autoPlayInterval);
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            startBeatportRebuildSliderAutoPlay();
+        });
+    }
+}
+
+
+/**
+ * Clean up beatport rebuild slider when switching away
+ */
+function cleanupBeatportRebuildSlider() {
+    if (beatportRebuildSliderState.autoPlayInterval) {
+        clearInterval(beatportRebuildSliderState.autoPlayInterval);
+        beatportRebuildSliderState.autoPlayInterval = null;
+    }
+}
+
+// ===================================
+// BEATPORT NEW RELEASES SLIDER
+// ===================================
+
+// State management for new releases slider (copied from hero slider)
+let beatportReleasesSliderState = {
+    currentSlide: 0,
+    totalSlides: 0,
+    autoPlayInterval: null,
+    autoPlayDelay: 8000,
+    isInitialized: false
+};
+
+/**
+ * Initialize the beatport new releases slider functionality (based on hero slider)
+ */
+function initializeBeatportReleasesSlider() {
+    console.log('🆕 Initializing beatport new releases slider...');
+
+    const slider = document.getElementById('beatport-releases-slider');
+    if (!slider) {
+        console.warn('Beatport releases slider not found');
+        return;
+    }
+
+    // Prevent double initialization
+    if (slider.dataset.initialized === 'true') {
+        console.log('Releases slider already initialized');
+        return;
+    }
+
+    const sliderTrack = document.getElementById('beatport-releases-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.warn('Releases slider elements not found');
+        return;
+    }
+
+    // Load data and initialize
+    loadBeatportNewReleases().then(success => {
+        if (success) {
+            setupBeatportReleasesSliderNavigation();
+            setupBeatportReleasesSliderIndicators();
+            setupBeatportReleasesSliderHoverPause();
+            startBeatportReleasesSliderAutoPlay();
+            slider.dataset.initialized = 'true';
+            beatportReleasesSliderState.isInitialized = true;
+            console.log('✅ New releases slider initialized successfully');
+        }
+    });
+}
+
+/**
+ * Load new releases data from API
+ */
+async function loadBeatportNewReleases() {
+    try {
+        console.log('📡 Fetching new releases data...');
+
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/new-releases', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success && data.releases && data.releases.length > 0) {
+            console.log(`📀 Loaded ${data.releases.length} releases`);
+            populateBeatportReleasesSlider(data.releases);
+            return true;
+        } else {
+            console.error('Failed to load releases:', data.error || 'No releases found');
+            showBeatportReleasesError(data.error || 'No releases available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('Error loading new releases:', error);
+        showBeatportReleasesError('Failed to load releases');
+        return false;
+    }
+}
+
+/**
+ * Populate the releases slider with data (based on hero slider)
+ */
+function populateBeatportReleasesSlider(releases) {
+    const sliderTrack = document.getElementById('beatport-releases-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) return;
+
+    // Calculate slides needed (10 cards per slide)
+    const cardsPerSlide = 10;
+    const totalSlides = Math.ceil(releases.length / cardsPerSlide);
+
+    // Clear existing content
+    sliderTrack.innerHTML = '';
+    indicatorsContainer.innerHTML = '';
+
+    // Update state
+    beatportReleasesSliderState.totalSlides = totalSlides;
+    beatportReleasesSliderState.currentSlide = 0;
+
+    console.log(`🎯 Creating ${totalSlides} slides with ${cardsPerSlide} cards each`);
+
+    // Generate slides HTML (similar to hero slider)
+    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+        const startIndex = slideIndex * cardsPerSlide;
+        const endIndex = Math.min(startIndex + cardsPerSlide, releases.length);
+        const slideReleases = releases.slice(startIndex, endIndex);
+
+        // Create grid HTML for this slide
+        let gridHtml = '';
+        for (let i = 0; i < cardsPerSlide; i++) {
+            if (i < slideReleases.length) {
+                const release = slideReleases[i];
+                gridHtml += `
+                    <div class="beatport-release-card" data-url="${release.url}" style="--card-bg-image: url('${release.image_url}')">
+                        <div class="beatport-release-card-content">
+                            <div class="beatport-release-artwork">
+                                ${release.image_url ? `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` : ''}
+                            </div>
+                            <div class="beatport-release-info">
+                                <div class="beatport-release-title" title="${release.title}">${release.title}</div>
+                                <div class="beatport-release-artist" title="${release.artist}">${release.artist}</div>
+                                <div class="beatport-release-label" title="${release.label}">${release.label}</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            } else {
+                // Placeholder card
+                gridHtml += `
+                    <div class="beatport-release-card beatport-release-placeholder">
+                        <div class="beatport-release-card-content">
+                            <div class="beatport-release-artwork">
+                                <div class="placeholder-icon">📀</div>
+                            </div>
+                            <div class="beatport-release-info">
+                                <div class="beatport-release-title">More Releases</div>
+                                <div class="beatport-release-artist">Coming Soon</div>
+                                <div class="beatport-release-label">Beatport</div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }
+        }
+
+        const slideHtml = `
+            <div class="beatport-releases-slide ${slideIndex === 0 ? 'active' : ''}"
+                 data-slide="${slideIndex}">
+                <div class="beatport-releases-grid">
+                    ${gridHtml}
+                </div>
+            </div>
+        `;
+
+        sliderTrack.innerHTML += slideHtml;
+
+        // Create indicator
+        const indicatorHtml = `<button class="beatport-releases-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
+        indicatorsContainer.innerHTML += indicatorHtml;
+    }
+
+    console.log(`✅ Created ${totalSlides} slides for releases slider`);
+
+    // Add click handlers for individual release discovery (matching Top 10 Releases pattern)
+    const releaseCards = sliderTrack.querySelectorAll('.beatport-release-card[data-url]:not(.beatport-release-placeholder)');
+    releaseCards.forEach((card) => {
+        const releaseUrl = card.getAttribute('data-url');
+        if (releaseUrl && releaseUrl !== '#') {
+            // Find the corresponding release data
+            const releaseData = releases.find(release => release.url === releaseUrl);
+            if (releaseData) {
+                card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
+                card.style.cursor = 'pointer';
+            }
+        }
+    });
+}
+
+/**
+ * Set up navigation functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderNavigation() {
+    const prevBtn = document.getElementById('beatport-releases-prev-btn');
+    const nextBtn = document.getElementById('beatport-releases-next-btn');
+
+    if (prevBtn) {
+        // Clone button to remove all existing event listeners
+        const newPrevBtn = prevBtn.cloneNode(true);
+        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+        newPrevBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Previous releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
+            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide - 1);
+            resetBeatportReleasesSliderAutoPlay();
+        });
+    }
+
+    if (nextBtn) {
+        // Clone button to remove all existing event listeners
+        const newNextBtn = nextBtn.cloneNode(true);
+        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+        newNextBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Next releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
+            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
+            resetBeatportReleasesSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Set up indicator functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderIndicators() {
+    const indicators = document.querySelectorAll('.beatport-releases-indicator');
+
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            goToBeatportReleasesSlide(index);
+            resetBeatportReleasesSliderAutoPlay();
+        });
+    });
+}
+
+/**
+ * Navigate to a specific slide (copied from hero slider)
+ */
+function goToBeatportReleasesSlide(slideIndex) {
+    console.log('goToBeatportReleasesSlide called with:', slideIndex, 'current:', beatportReleasesSliderState.currentSlide);
+
+    // Wrap around if out of bounds
+    if (slideIndex < 0) {
+        slideIndex = beatportReleasesSliderState.totalSlides - 1;
+    } else if (slideIndex >= beatportReleasesSliderState.totalSlides) {
+        slideIndex = 0;
+    }
+
+    console.log('After wrapping, slideIndex:', slideIndex);
+
+    // Update current slide
+    beatportReleasesSliderState.currentSlide = slideIndex;
+
+    // Update slide visibility
+    const slides = document.querySelectorAll('.beatport-releases-slide');
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+
+        if (index === slideIndex) {
+            slide.classList.add('active');
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('.beatport-releases-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log('Releases slide updated to:', beatportReleasesSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from hero slider)
+ */
+function startBeatportReleasesSliderAutoPlay() {
+    if (beatportReleasesSliderState.autoPlayInterval) {
+        clearInterval(beatportReleasesSliderState.autoPlayInterval);
+    }
+
+    beatportReleasesSliderState.autoPlayInterval = setInterval(() => {
+        goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
+    }, beatportReleasesSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from hero slider)
+ */
+function resetBeatportReleasesSliderAutoPlay() {
+    startBeatportReleasesSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from hero slider)
+ */
+function setupBeatportReleasesSliderHoverPause() {
+    const sliderContainer = document.querySelector('.beatport-releases-slider-container');
+
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (beatportReleasesSliderState.autoPlayInterval) {
+                clearInterval(beatportReleasesSliderState.autoPlayInterval);
+                beatportReleasesSliderState.autoPlayInterval = null;
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            startBeatportReleasesSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Show error state
+ */
+function showBeatportReleasesError(errorMessage) {
+    const sliderTrack = document.getElementById('beatport-releases-slider-track');
+    if (!sliderTrack) return;
+
+    sliderTrack.innerHTML = `
+        <div class="beatport-releases-loading">
+            <div class="beatport-releases-loading-content">
+                <h3>❌ Error Loading Releases</h3>
+                <p>${errorMessage}</p>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Clean up releases slider when switching away (copied from hero slider)
+ */
+function cleanupBeatportReleasesSlider() {
+    if (beatportReleasesSliderState.autoPlayInterval) {
+        clearInterval(beatportReleasesSliderState.autoPlayInterval);
+        beatportReleasesSliderState.autoPlayInterval = null;
+    }
+}
+
+// ===================================
+// BEATPORT HYPE PICKS SLIDER
+// ===================================
+
+// Hype Picks Slider State
+let beatportHypePicksSliderState = {
+    currentSlide: 0,
+    totalSlides: 0,
+    autoPlayInterval: null,
+    autoPlayDelay: 4000,
+    isInitialized: false
+};
+
+/**
+ * Initialize the beatport hype picks slider functionality (based on releases slider)
+ */
+function initializeBeatportHypePicksSlider() {
+    console.log('🔥 Initializing beatport hype picks slider...');
+
+    const slider = document.getElementById('beatport-hype-picks-slider');
+    if (!slider) {
+        console.warn('Beatport hype picks slider not found');
+        return;
+    }
+
+    // Check if already initialized
+    if (beatportHypePicksSliderState.isInitialized) {
+        console.log('Beatport hype picks slider already initialized, skipping...');
+        startBeatportHypePicksSliderAutoPlay(); // Just restart autoplay
+        return;
+    }
+
+    // Mark as initialized
+    beatportHypePicksSliderState.isInitialized = true;
+
+    // Reset state
+    beatportHypePicksSliderState.currentSlide = 0;
+    beatportHypePicksSliderState.totalSlides = 0;
+
+    // Load data and initialize
+    loadBeatportHypePicks().then(success => {
+        if (success) {
+            setupBeatportHypePicksSliderNavigation();
+            setupBeatportHypePicksSliderIndicators();
+            setupBeatportHypePicksSliderHoverPause();
+            startBeatportHypePicksSliderAutoPlay();
+        }
+    });
+
+    console.log('✅ Beatport hype picks slider initialized successfully');
+}
+
+/**
+ * Load hype picks data from API
+ */
+async function loadBeatportHypePicks() {
+    try {
+        console.log('🔥 Fetching hype picks data...');
+
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/hype-picks', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success && data.releases && data.releases.length > 0) {
+            console.log(`🔥 Loaded ${data.releases.length} hype picks releases`);
+            populateBeatportHypePicksSlider(data.releases);
+            return true;
+        } else {
+            console.error('Failed to load hype picks:', data.error || 'No hype picks found');
+            showBeatportHypePicksError(data.error || 'No hype picks available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('Error loading hype picks:', error);
+        showBeatportHypePicksError('Failed to load hype picks');
+        return false;
+    }
+}
+
+/**
+ * Populate the hype picks slider with data (based on releases slider)
+ */
+function populateBeatportHypePicksSlider(releases) {
+    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-hype-picks-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) return;
+
+    // Clear existing content
+    sliderTrack.innerHTML = '';
+    indicatorsContainer.innerHTML = '';
+
+    // Group releases into slides (10 releases per slide in 5x2 grid)
+    const releasesPerSlide = 10;
+    const slides = [];
+    for (let i = 0; i < releases.length; i += releasesPerSlide) {
+        slides.push(releases.slice(i, i + releasesPerSlide));
+    }
+
+    console.log(`🔥 Hype Picks: Got ${releases.length} releases, creating ${slides.length} slides`);
+    beatportHypePicksSliderState.totalSlides = slides.length;
+    beatportHypePicksSliderState.currentSlide = 0;
+
+    // Create slides
+    slides.forEach((slideReleases, slideIndex) => {
+        const slideHtml = `
+            <div class="beatport-hype-picks-slide ${slideIndex === 0 ? 'active' : ''}"
+                 data-slide="${slideIndex}">
+                <div class="beatport-hype-picks-grid">
+                    ${slideReleases.map(release => createBeatportHypePickCard(release)).join('')}
+                    ${slideReleases.length < releasesPerSlide ?
+                Array(releasesPerSlide - slideReleases.length).fill(0).map(() =>
+                    `<div class="beatport-hype-pick-card beatport-hype-pick-placeholder">
+                                <div class="placeholder-icon">🔥</div>
+                            </div>`
+                ).join('') : ''
+            }
+                </div>
+            </div>
+        `;
+        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
+        console.log(`🔥 Created slide ${slideIndex + 1}/${slides.length} with ${slideReleases.length} releases`);
+
+        // Create indicator
+        const indicatorHtml = `<button class="beatport-hype-picks-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
+        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
+    });
+
+    // Add click handlers to track cards
+    setupBeatportHypePickCardHandlers();
+}
+
+/**
+ * Create a hype pick card HTML (for release cards, same as new releases)
+ */
+function createBeatportHypePickCard(release) {
+    const artworkUrl = release.image_url || '';
+    const bgStyle = artworkUrl ? `style="--card-bg-image: url('${artworkUrl}')"` : '';
+
+    return `
+        <div class="beatport-hype-pick-card" data-url="${release.url || ''}" ${bgStyle}>
+            <div class="beatport-hype-pick-card-content">
+                <div class="beatport-hype-pick-artwork">
+                    ${artworkUrl ? `<img src="${artworkUrl}" alt="${release.title || 'Release'}" loading="lazy">` : ''}
+                </div>
+                <div class="beatport-hype-pick-info">
+                    <div class="beatport-hype-pick-title">${release.title || 'Unknown Title'}</div>
+                    <div class="beatport-hype-pick-artist">${release.artist || 'Unknown Artist'}</div>
+                    <div class="beatport-hype-pick-label">${release.label || 'Hype Pick'}</div>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Setup navigation for hype picks slider (same pattern as releases)
+ */
+function setupBeatportHypePicksSliderNavigation() {
+    const prevBtn = document.getElementById('beatport-hype-picks-prev-btn');
+    const nextBtn = document.getElementById('beatport-hype-picks-next-btn');
+
+    if (prevBtn) {
+        // Clone button to remove all existing event listeners
+        const newPrevBtn = prevBtn.cloneNode(true);
+        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+        newPrevBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Previous hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
+            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide - 1);
+            resetBeatportHypePicksSliderAutoPlay();
+        });
+    }
+
+    if (nextBtn) {
+        // Clone button to remove all existing event listeners
+        const newNextBtn = nextBtn.cloneNode(true);
+        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+        newNextBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Next hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
+            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
+            resetBeatportHypePicksSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Setup indicators for hype picks slider
+ */
+function setupBeatportHypePicksSliderIndicators() {
+    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
+
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            goToBeatportHypePicksSlide(index);
+            resetBeatportHypePicksSliderAutoPlay();
+        });
+    });
+}
+
+/**
+ * Navigate to specific slide
+ */
+function goToBeatportHypePicksSlide(slideIndex) {
+    console.log('goToBeatportHypePicksSlide called with:', slideIndex, 'current:', beatportHypePicksSliderState.currentSlide);
+
+    // Handle wrap around
+    if (slideIndex < 0) {
+        slideIndex = beatportHypePicksSliderState.totalSlides - 1;
+    } else if (slideIndex >= beatportHypePicksSliderState.totalSlides) {
+        slideIndex = 0;
+    }
+
+    // Update current slide
+    beatportHypePicksSliderState.currentSlide = slideIndex;
+
+    // Update slides
+    const slides = document.querySelectorAll('.beatport-hype-picks-slide');
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+        if (index === slideIndex) {
+            slide.classList.add('active');
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log('Slide updated to:', beatportHypePicksSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play for hype picks slider
+ */
+function startBeatportHypePicksSliderAutoPlay() {
+    if (beatportHypePicksSliderState.autoPlayInterval) {
+        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+    }
+
+    beatportHypePicksSliderState.autoPlayInterval = setInterval(() => {
+        goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
+    }, beatportHypePicksSliderState.autoPlayDelay);
+
+    console.log('🔥 Hype picks slider autoplay started');
+}
+
+/**
+ * Reset auto-play for hype picks slider
+ */
+function resetBeatportHypePicksSliderAutoPlay() {
+    startBeatportHypePicksSliderAutoPlay();
+}
+
+/**
+ * Setup hover pause for hype picks slider
+ */
+function setupBeatportHypePicksSliderHoverPause() {
+    const sliderContainer = document.querySelector('.beatport-hype-picks-slider-container');
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (beatportHypePicksSliderState.autoPlayInterval) {
+                clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            startBeatportHypePicksSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Setup click handlers for hype pick cards
+ */
+function setupBeatportHypePickCardHandlers() {
+    const cards = document.querySelectorAll('.beatport-hype-pick-card:not(.beatport-hype-pick-placeholder)');
+
+    cards.forEach(card => {
+        const releaseUrl = card.getAttribute('data-url');
+        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+            // Extract release data from the card elements
+            const titleElement = card.querySelector('.beatport-hype-pick-title');
+            const artistElement = card.querySelector('.beatport-hype-pick-artist');
+            const labelElement = card.querySelector('.beatport-hype-pick-label');
+            const imageElement = card.querySelector('.beatport-hype-pick-artwork img');
+
+            const releaseData = {
+                url: releaseUrl,
+                title: titleElement ? titleElement.textContent.trim() : 'Unknown Title',
+                artist: artistElement ? artistElement.textContent.trim() : 'Unknown Artist',
+                label: labelElement ? labelElement.textContent.trim() : 'Unknown Label',
+                image_url: imageElement ? imageElement.src : ''
+            };
+
+            card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
+            card.style.cursor = 'pointer';
+        }
+    });
+}
+
+/**
+ * Show error state for hype picks slider
+ */
+function showBeatportHypePicksError(errorMessage) {
+    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
+    if (sliderTrack) {
+        sliderTrack.innerHTML = `
+        <div class="beatport-hype-picks-loading">
+            <div class="beatport-hype-picks-loading-content">
+                <h3>❌ Error Loading Hype Picks</h3>
+                <p>${errorMessage}</p>
+            </div>
+        </div>
+        `;
+    }
+}
+
+/**
+ * Clean up hype picks slider when switching away
+ */
+function cleanupBeatportHypePicksSlider() {
+    if (beatportHypePicksSliderState.autoPlayInterval) {
+        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
+        beatportHypePicksSliderState.autoPlayInterval = null;
+    }
+}
+
+// ===================================
+// BEATPORT FEATURED CHARTS SLIDER
+// ===================================
+
+// State management for featured charts slider (copied from releases slider)
+let beatportChartsSliderState = {
+    currentSlide: 0,
+    totalSlides: 0,
+    autoPlayInterval: null,
+    autoPlayDelay: 10000,  // Slightly longer auto-play for charts
+    isInitialized: false
+};
+
+/**
+ * Initialize the beatport featured charts slider functionality (based on releases slider)
+ */
+function initializeBeatportChartsSlider() {
+    console.log('🔥 Initializing beatport featured charts slider...');
+
+    const slider = document.getElementById('beatport-charts-slider');
+    if (!slider) {
+        console.warn('Beatport charts slider not found');
+        return;
+    }
+
+    // Prevent double initialization
+    if (slider.dataset.initialized === 'true') {
+        console.log('Charts slider already initialized');
+        return;
+    }
+
+    const sliderTrack = document.getElementById('beatport-charts-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.warn('Charts slider elements not found');
+        return;
+    }
+
+    // Load data and initialize
+    loadBeatportFeaturedCharts().then(success => {
+        if (success) {
+            setupBeatportChartsSliderNavigation();
+            setupBeatportChartsSliderIndicators();
+            setupBeatportChartsSliderHoverPause();
+            startBeatportChartsSliderAutoPlay();
+            slider.dataset.initialized = 'true';
+            beatportChartsSliderState.isInitialized = true;
+            console.log('✅ Featured charts slider initialized successfully');
+        }
+    });
+}
+
+/**
+ * Load featured charts data from API
+ */
+async function loadBeatportFeaturedCharts() {
+    try {
+        console.log('📊 Loading featured charts data...');
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/featured-charts', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success && data.charts && data.charts.length > 0) {
+            console.log(`📈 Loaded ${data.charts.length} featured charts`);
+            createBeatportChartsSlides(data.charts);
+            return true;
+        } else {
+            console.warn('No featured charts data available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('❌ Error loading featured charts:', error);
+        return false;
+    }
+}
+
+/**
+ * Create chart slides with grid layout (copied from releases slider)
+ */
+function createBeatportChartsSlides(charts) {
+    const sliderTrack = document.getElementById('beatport-charts-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.error('Charts slider elements not found');
+        return;
+    }
+
+    const cardsPerSlide = 10; // 5x2 grid
+    const totalSlides = Math.ceil(charts.length / cardsPerSlide);
+
+    // Clear existing content
+    sliderTrack.innerHTML = '';
+    indicatorsContainer.innerHTML = '';
+
+    // Update state
+    beatportChartsSliderState.totalSlides = totalSlides;
+    beatportChartsSliderState.currentSlide = 0;
+
+    console.log(`🎯 Creating ${totalSlides} chart slides with ${cardsPerSlide} cards each`);
+
+    // Generate slides HTML
+    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+        const startIndex = slideIndex * cardsPerSlide;
+        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
+        const slideCharts = charts.slice(startIndex, endIndex);
+
+        // Create grid HTML for this slide
+        const gridHtml = slideCharts.map(chart => {
+            const bgImageStyle = chart.image ? `--chart-bg-image: url('${chart.image}')` : '';
+            return `
+                <div class="beatport-chart-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
+                    <div class="beatport-chart-card-content">
+                        <div class="beatport-chart-name">${chart.name || 'Unknown Chart'}</div>
+                        <div class="beatport-chart-creator">${chart.creator || 'Unknown Creator'}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        // Create slide HTML
+        const slideHtml = `
+            <div class="beatport-charts-slide ${slideIndex === 0 ? 'active' : ''}">
+                <div class="beatport-charts-grid">
+                    ${gridHtml}
+                </div>
+            </div>
+        `;
+
+        sliderTrack.innerHTML += slideHtml;
+
+        // Create indicator
+        const indicatorHtml = `<button class="beatport-charts-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
+        indicatorsContainer.innerHTML += indicatorHtml;
+    }
+
+    console.log(`✅ Created ${totalSlides} chart slides`);
+
+    // Add click handlers for individual chart discovery (matching chart pattern)
+    const chartCards = sliderTrack.querySelectorAll('.beatport-chart-card[data-url]');
+    chartCards.forEach((card) => {
+        const chartUrl = card.getAttribute('data-url');
+        if (chartUrl && chartUrl !== '') {
+            // Find the corresponding chart data
+            const chartData = charts.find(chart => chart.url === chartUrl);
+            if (chartData) {
+                card.addEventListener('click', () => handleBeatportChartCardClick(card, chartData));
+                card.style.cursor = 'pointer';
+            }
+        }
+    });
+}
+
+/**
+ * Set up navigation functionality (copied from releases slider with button cloning)
+ */
+function setupBeatportChartsSliderNavigation() {
+    const prevBtn = document.getElementById('beatport-charts-prev-btn');
+    const nextBtn = document.getElementById('beatport-charts-next-btn');
+
+    if (prevBtn) {
+        // Clone button to remove all existing event listeners
+        const newPrevBtn = prevBtn.cloneNode(true);
+        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+        newPrevBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Previous charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
+            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide - 1);
+            resetBeatportChartsSliderAutoPlay();
+        });
+    }
+
+    if (nextBtn) {
+        // Clone button to remove all existing event listeners
+        const newNextBtn = nextBtn.cloneNode(true);
+        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+        newNextBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Next charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
+            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
+            resetBeatportChartsSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Set up indicator functionality (copied from releases slider)
+ */
+function setupBeatportChartsSliderIndicators() {
+    const indicators = document.querySelectorAll('.beatport-charts-indicator');
+
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            goToBeatportChartsSlide(index);
+            resetBeatportChartsSliderAutoPlay();
+        });
+    });
+}
+
+/**
+ * Navigate to a specific slide (copied from releases slider)
+ */
+function goToBeatportChartsSlide(slideIndex) {
+    console.log('goToBeatportChartsSlide called with:', slideIndex, 'current:', beatportChartsSliderState.currentSlide);
+
+    // Wrap around if out of bounds
+    if (slideIndex < 0) {
+        slideIndex = beatportChartsSliderState.totalSlides - 1;
+    } else if (slideIndex >= beatportChartsSliderState.totalSlides) {
+        slideIndex = 0;
+    }
+
+    console.log('After wrapping, slideIndex:', slideIndex);
+
+    // Update current slide
+    beatportChartsSliderState.currentSlide = slideIndex;
+
+    // Update slide visibility
+    const slides = document.querySelectorAll('.beatport-charts-slide');
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+
+        if (index === slideIndex) {
+            slide.classList.add('active');
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('.beatport-charts-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log('Charts slide updated to:', beatportChartsSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from releases slider)
+ */
+function startBeatportChartsSliderAutoPlay() {
+    if (beatportChartsSliderState.autoPlayInterval) {
+        clearInterval(beatportChartsSliderState.autoPlayInterval);
+    }
+
+    beatportChartsSliderState.autoPlayInterval = setInterval(() => {
+        goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
+    }, beatportChartsSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from releases slider)
+ */
+function resetBeatportChartsSliderAutoPlay() {
+    startBeatportChartsSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from releases slider)
+ */
+function setupBeatportChartsSliderHoverPause() {
+    const sliderContainer = document.querySelector('.beatport-charts-slider-container');
+
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (beatportChartsSliderState.autoPlayInterval) {
+                clearInterval(beatportChartsSliderState.autoPlayInterval);
+                beatportChartsSliderState.autoPlayInterval = null;
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            startBeatportChartsSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Clean up charts slider when switching away (copied from releases slider)
+ */
+function cleanupBeatportChartsSlider() {
+    if (beatportChartsSliderState.autoPlayInterval) {
+        clearInterval(beatportChartsSliderState.autoPlayInterval);
+        beatportChartsSliderState.autoPlayInterval = null;
+    }
+}
+
+// ===================================
+// BEATPORT DJ CHARTS SLIDER
+// ===================================
+
+// State management for DJ charts slider (3 cards per slide)
+let beatportDJSliderState = {
+    currentSlide: 0,
+    totalSlides: 0,
+    autoPlayInterval: null,
+    autoPlayDelay: 12000,  // Longer auto-play for DJ charts
+    isInitialized: false
+};
+
+/**
+ * Initialize the beatport DJ charts slider functionality (based on charts slider)
+ */
+function initializeBeatportDJSlider() {
+    console.log('🎧 Initializing beatport DJ charts slider...');
+
+    const slider = document.getElementById('beatport-dj-slider');
+    if (!slider) {
+        console.warn('Beatport DJ slider not found');
+        return;
+    }
+
+    // Prevent double initialization
+    if (slider.dataset.initialized === 'true') {
+        console.log('DJ slider already initialized');
+        return;
+    }
+
+    const sliderTrack = document.getElementById('beatport-dj-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.warn('DJ slider elements not found');
+        return;
+    }
+
+    // Load data and initialize
+    loadBeatportDJCharts().then(success => {
+        if (success) {
+            setupBeatportDJSliderNavigation();
+            setupBeatportDJSliderIndicators();
+            setupBeatportDJSliderHoverPause();
+            startBeatportDJSliderAutoPlay();
+            slider.dataset.initialized = 'true';
+            beatportDJSliderState.isInitialized = true;
+            console.log('✅ DJ charts slider initialized successfully');
+        }
+    });
+}
+
+/**
+ * Load DJ charts data from API
+ */
+async function loadBeatportDJCharts() {
+    try {
+        console.log('🎧 Loading DJ charts data...');
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/dj-charts', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success && data.charts && data.charts.length > 0) {
+            console.log(`📈 Loaded ${data.charts.length} DJ charts`);
+            createBeatportDJSlides(data.charts);
+            return true;
+        } else {
+            console.warn('No DJ charts data available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('❌ Error loading DJ charts:', error);
+        return false;
+    }
+}
+
+/**
+ * Create DJ chart slides with 3 cards per slide layout
+ */
+function createBeatportDJSlides(charts) {
+    const sliderTrack = document.getElementById('beatport-dj-slider-track');
+    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
+
+    if (!sliderTrack || !indicatorsContainer) {
+        console.error('DJ slider elements not found');
+        return;
+    }
+
+    const cardsPerSlide = 3; // 3 cards per slide for DJ charts
+    const totalSlides = Math.ceil(charts.length / cardsPerSlide);
+
+    // Clear existing content
+    sliderTrack.innerHTML = '';
+    indicatorsContainer.innerHTML = '';
+
+    // Update state
+    beatportDJSliderState.totalSlides = totalSlides;
+    beatportDJSliderState.currentSlide = 0;
+
+    console.log(`🎯 Creating ${totalSlides} DJ chart slides with ${cardsPerSlide} cards each`);
+
+    // Generate slides HTML
+    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
+        const startIndex = slideIndex * cardsPerSlide;
+        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
+        const slideCharts = charts.slice(startIndex, endIndex);
+
+        // Create grid HTML for this slide
+        const gridHtml = slideCharts.map(chart => {
+            const bgImageStyle = chart.image ? `--dj-bg-image: url('${chart.image}')` : '';
+            return `
+                <div class="beatport-dj-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
+                    <div class="beatport-dj-card-content">
+                        <div class="beatport-dj-name">${chart.name || 'Unknown Chart'}</div>
+                        <div class="beatport-dj-creator">${chart.creator || 'Unknown Creator'}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        // Create slide HTML
+        const slideHtml = `
+            <div class="beatport-dj-slide ${slideIndex === 0 ? 'active' : ''}">
+                <div class="beatport-dj-grid">
+                    ${gridHtml}
+                </div>
+            </div>
+        `;
+
+        sliderTrack.innerHTML += slideHtml;
+
+        // Create indicator
+        const indicatorHtml = `<button class="beatport-dj-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
+        indicatorsContainer.innerHTML += indicatorHtml;
+    }
+
+    console.log(`✅ Created ${totalSlides} DJ chart slides`);
+
+    // Add click handlers for individual DJ chart discovery (matching chart pattern)
+    const djChartCards = sliderTrack.querySelectorAll('.beatport-dj-card[data-url]');
+    djChartCards.forEach((card) => {
+        const chartUrl = card.getAttribute('data-url');
+        if (chartUrl && chartUrl !== '') {
+            // Find the corresponding chart data
+            const chartData = charts.find(chart => chart.url === chartUrl);
+            if (chartData) {
+                card.addEventListener('click', () => handleBeatportDJChartCardClick(card, chartData));
+                card.style.cursor = 'pointer';
+            }
+        }
+    });
+}
+
+/**
+ * Set up navigation functionality (copied from charts slider with button cloning)
+ */
+function setupBeatportDJSliderNavigation() {
+    const prevBtn = document.getElementById('beatport-dj-prev-btn');
+    const nextBtn = document.getElementById('beatport-dj-next-btn');
+
+    if (prevBtn) {
+        // Clone button to remove all existing event listeners
+        const newPrevBtn = prevBtn.cloneNode(true);
+        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+
+        newPrevBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Previous DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
+            goToBeatportDJSlide(beatportDJSliderState.currentSlide - 1);
+            resetBeatportDJSliderAutoPlay();
+        });
+    }
+
+    if (nextBtn) {
+        // Clone button to remove all existing event listeners
+        const newNextBtn = nextBtn.cloneNode(true);
+        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+
+        newNextBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            console.log('Next DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
+            goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
+            resetBeatportDJSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Set up indicator functionality (copied from charts slider)
+ */
+function setupBeatportDJSliderIndicators() {
+    const indicators = document.querySelectorAll('.beatport-dj-indicator');
+
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            goToBeatportDJSlide(index);
+            resetBeatportDJSliderAutoPlay();
+        });
+    });
+}
+
+/**
+ * Navigate to a specific slide (copied from charts slider)
+ */
+function goToBeatportDJSlide(slideIndex) {
+    console.log('goToBeatportDJSlide called with:', slideIndex, 'current:', beatportDJSliderState.currentSlide);
+
+    // Wrap around if out of bounds
+    if (slideIndex < 0) {
+        slideIndex = beatportDJSliderState.totalSlides - 1;
+    } else if (slideIndex >= beatportDJSliderState.totalSlides) {
+        slideIndex = 0;
+    }
+
+    console.log('After wrapping, slideIndex:', slideIndex);
+
+    // Update current slide
+    beatportDJSliderState.currentSlide = slideIndex;
+
+    // Update slide visibility
+    const slides = document.querySelectorAll('.beatport-dj-slide');
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+
+        if (index === slideIndex) {
+            slide.classList.add('active');
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('.beatport-dj-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log('DJ slide updated to:', beatportDJSliderState.currentSlide);
+}
+
+/**
+ * Start auto-play functionality (copied from charts slider)
+ */
+function startBeatportDJSliderAutoPlay() {
+    if (beatportDJSliderState.autoPlayInterval) {
+        clearInterval(beatportDJSliderState.autoPlayInterval);
+    }
+
+    beatportDJSliderState.autoPlayInterval = setInterval(() => {
+        goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
+    }, beatportDJSliderState.autoPlayDelay);
+}
+
+/**
+ * Reset auto-play timer (copied from charts slider)
+ */
+function resetBeatportDJSliderAutoPlay() {
+    startBeatportDJSliderAutoPlay();
+}
+
+/**
+ * Set up hover pause functionality (copied from charts slider)
+ */
+function setupBeatportDJSliderHoverPause() {
+    const sliderContainer = document.querySelector('.beatport-dj-slider-container');
+
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (beatportDJSliderState.autoPlayInterval) {
+                clearInterval(beatportDJSliderState.autoPlayInterval);
+                beatportDJSliderState.autoPlayInterval = null;
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            startBeatportDJSliderAutoPlay();
+        });
+    }
+}
+
+/**
+ * Clean up DJ slider when switching away (copied from charts slider)
+ */
+function cleanupBeatportDJSlider() {
+    if (beatportDJSliderState.autoPlayInterval) {
+        clearInterval(beatportDJSliderState.autoPlayInterval);
+        beatportDJSliderState.autoPlayInterval = null;
+    }
+}
+
+/**
+ * Load top 10 lists data from API and populate both lists
+ */
+async function loadBeatportTop10Lists() {
+    try {
+        console.log('🏆 Loading top 10 lists data...');
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/homepage/top-10-lists', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`🎵 Loaded ${data.beatport_count} Beatport Top 10 + ${data.hype_count} Hype Top 10 tracks`);
+
+            // Populate both lists
+            populateBeatportTop10List(data.beatport_top10);
+            populateHypeTop10List(data.hype_top10);
+            return true;
+        } else {
+            console.error('Failed to load top 10 lists:', data.error);
+            showTop10ListsError(data.error || 'No data available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('Error loading top 10 lists:', error);
+        showTop10ListsError('Failed to load top 10 lists');
+        return false;
+    }
+}
+
+/**
+ * Clean track/artist text for proper spacing
+ */
+function cleanTrackText(text) {
+    if (!text) return text;
+
+    // Fix common spacing issues
+    text = text.replace(/([a-z$!@#%&*])([A-Z])/g, '$1 $2');  // Add space between lowercase/symbols and uppercase
+    text = text.replace(/([a-zA-Z]),([a-zA-Z])/g, '$1, $2');  // Add space after comma
+    text = text.replace(/([a-zA-Z])(Mix|Remix|Extended|Version)\b/g, '$1 $2');  // Fix mix types
+    text = text.replace(/\s+/g, ' ');  // Collapse multiple spaces
+    text = text.trim();
+
+    return text;
+}
+
+/**
+ * Populate Beatport Top 10 list with data
+ */
+function populateBeatportTop10List(tracks) {
+    const container = document.getElementById('beatport-top10-list');
+    if (!container || !tracks || tracks.length === 0) return;
+
+    // Generate HTML for the tracks
+    let tracksHtml = `
+        <div class="beatport-top10-list-header">
+            <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
+            <p class="beatport-top10-list-subtitle">Most popular tracks on Beatport</p>
+        </div>
+        <div class="beatport-top10-tracks">
+    `;
+
+    tracks.forEach((track, index) => {
+        // Clean the text data before injection
+        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+        tracksHtml += `
+            <div class="beatport-top10-card" data-url="${track.url || '#'}">
+                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
+                <div class="beatport-top10-card-artwork">
+                    ${track.artwork_url ?
+                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
+                '<div class="beatport-top10-card-placeholder">🎵</div>'
+            }
+                </div>
+                <div class="beatport-top10-card-info">
+                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
+                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
+                    <p class="beatport-top10-card-label">${cleanLabel}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    tracksHtml += '</div>';
+    container.innerHTML = tracksHtml;
+}
+
+/**
+ * Populate Hype Top 10 list with data
+ */
+function populateHypeTop10List(tracks) {
+    const container = document.getElementById('beatport-hype10-list');
+    if (!container || !tracks || tracks.length === 0) return;
+
+    // Generate HTML for the tracks
+    let tracksHtml = `
+        <div class="beatport-hype10-list-header">
+            <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
+            <p class="beatport-hype10-list-subtitle">Editor's trending picks</p>
+        </div>
+        <div class="beatport-hype10-tracks">
+    `;
+
+    tracks.forEach((track, index) => {
+        // Clean the text data before injection
+        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+        tracksHtml += `
+            <div class="beatport-hype10-card" data-url="${track.url || '#'}">
+                <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
+                <div class="beatport-hype10-card-artwork">
+                    ${track.artwork_url ?
+                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
+                '<div class="beatport-hype10-card-placeholder">🔥</div>'
+            }
+                </div>
+                <div class="beatport-hype10-card-info">
+                    <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
+                    <p class="beatport-hype10-card-artist">${cleanArtist}</p>
+                    <p class="beatport-hype10-card-label">${cleanLabel}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    tracksHtml += '</div>';
+    container.innerHTML = tracksHtml;
+}
+
+/**
+ * Show error message for top 10 lists
+ */
+function showTop10ListsError(errorMessage) {
+    const beatportContainer = document.getElementById('beatport-top10-list');
+    const hypeContainer = document.getElementById('beatport-hype10-list');
+
+    const errorHtml = `
+        <div class="beatport-top10-error">
+            <h3>❌ Error Loading Data</h3>
+            <p>${errorMessage}</p>
+        </div>
+    `;
+
+    if (beatportContainer) beatportContainer.innerHTML = errorHtml;
+    if (hypeContainer) hypeContainer.innerHTML = errorHtml;
+}
+
+/**
+ * Load top 10 releases data from API and populate the list
+ */
+async function loadBeatportTop10Releases() {
+    try {
+        console.log('💿 Loading top 10 releases data...');
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/homepage/top-10-releases-cards', signal ? { signal } : undefined);
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`💿 Loaded ${data.releases_count} Top 10 Releases`);
+            populateBeatportTop10Releases(data.releases);
+            return true;
+        } else {
+            console.error('Failed to load top 10 releases:', data.error);
+            showTop10ReleasesError(data.error || 'No data available');
+            return false;
+        }
+    } catch (error) {
+        if (error && error.name === 'AbortError') return false;
+        console.error('Error loading top 10 releases:', error);
+        showTop10ReleasesError('Failed to load top 10 releases');
+        return false;
+    }
+}
+
+/**
+ * Populate Top 10 Releases list with data
+ */
+function populateBeatportTop10Releases(releases) {
+    const container = document.getElementById('beatport-releases-top10-list');
+    if (!container || !releases || releases.length === 0) return;
+
+    // Generate HTML for the releases
+    let releasesHtml = `
+        <div class="beatport-releases-top10-tracks">
+    `;
+
+    releases.forEach((release, index) => {
+        releasesHtml += `
+            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
+                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
+                <div class="beatport-releases-top10-card-artwork">
+                    ${release.image_url ?
+                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
+                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
+            }
+                </div>
+                <div class="beatport-releases-top10-card-info">
+                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
+                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
+                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    releasesHtml += '</div>';
+    container.innerHTML = releasesHtml;
+
+    // Set background images for cards
+    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
+    cards.forEach(card => {
+        const bgImage = card.getAttribute('data-bg-image');
+        if (bgImage) {
+            // Transform image URL from 95x95 to 500x500 for higher quality background
+            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
+            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
+            card.style.backgroundSize = 'cover';
+            card.style.backgroundPosition = 'center';
+        }
+    });
+
+    // Add click handlers for individual release discovery
+    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
+    releaseCards.forEach((card, index) => {
+        card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releases[index]));
+        card.style.cursor = 'pointer';
+    });
+}
+
+/**
+ * Show error message for top 10 releases
+ */
+function showTop10ReleasesError(errorMessage) {
+    const container = document.getElementById('beatport-releases-top10-list');
+
+    const errorHtml = `
+        <div class="beatport-releases-top10-error">
+            <h3>❌ Error Loading Releases</h3>
+            <p>${errorMessage}</p>
+        </div>
+    `;
+
+    if (container) container.innerHTML = errorHtml;
+}
+
+/**
+ * Handle click on individual Top 10 Release card - create discovery process for single release
+ */
+async function handleBeatportReleaseCardClick(cardElement, release) {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+
+    console.log(`💿 Individual release card clicked: ${release.title} by ${release.artist}`);
+
+    if (!release.url || release.url === '#') {
+        _beatportModalOpening = false;
+        showToast('No release URL available', 'error');
+        return;
+    }
+
+    try {
+        showToast(`Loading ${release.title}...`, 'info');
+        showLoadingOverlay(`Getting tracks from ${release.title}...`);
+
+        // Fetch structured release metadata for direct download modal
+        console.log(`🎵 Fetching release metadata: ${release.url}`);
+        const response = await fetch('/api/beatport/release-metadata', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ release_url: release.url })
+        });
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(data.error || 'No tracks found in this release');
+        }
+
+        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
+
+        // Format artists as array of strings for compatibility with download modal
+        const formattedTracks = data.tracks.map(track => ({
+            ...track,
+            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
+        }));
+
+        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const playlistName = data.album.name;
+
+        // Open download modal directly - same as clicking an album on the Artists page
+        await openDownloadMissingModalForArtistAlbum(
+            virtualPlaylistId,
+            playlistName,
+            formattedTracks,
+            data.album,
+            data.artist,
+            false
+        );
+
+        // Register Beatport download bubble for releases (albums, EPs, singles)
+        const releaseImage = (data.album.images && data.album.images.length > 0) ? data.album.images[0].url : (release.image_url || '');
+        registerBeatportDownload(playlistName, releaseImage, virtualPlaylistId);
+
+        hideLoadingOverlay();
+        _beatportModalOpening = false;
+        console.log(`✅ Opened download modal for ${playlistName}`);
+
+    } catch (error) {
+        console.error(`❌ Error handling release click for ${release.title}:`, error);
+        hideLoadingOverlay();
+        _beatportModalOpening = false;
+        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Convert scraped Beatport tracks into download-modal-compatible format and open the modal.
+ * Used by all chart/playlist handlers (Top 100, Hype 100, Featured Charts, DJ Charts, genre charts).
+ * Charts open as compilations — each track is searched independently on Soulseek.
+ */
+// Guard against multiple rapid clicks opening duplicate modals
+let _beatportModalOpening = false;
+
+/**
+ * Enrich tracks via a single batch request to the backend.
+ * Progress is reported via WebSocket (beatport:enrich_progress) and updates the loading overlay.
+ * Returns the enriched tracks array.
+ */
+async function _enrichTracksWithProgress(tracks, chartName) {
+    const enrichmentId = `enrich_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
+
+    try {
+        const resp = await fetch('/api/beatport/enrich-tracks', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tracks, enrichment_id: enrichmentId })
+        });
+        const data = await resp.json();
+
+        // Synchronous path — all tracks were cached, results returned inline
+        if (data.success && data.tracks) {
+            return data.tracks;
+        }
+
+        // Async path — poll for progress until done
+        if (data.success && data.async) {
+            while (true) {
+                await new Promise(r => setTimeout(r, 800));
+                try {
+                    const progressResp = await fetch(`/api/beatport/enrich-progress/${enrichmentId}?_=${Date.now()}`);
+                    const progress = await progressResp.json();
+                    if (!progress.success) break;
+
+                    // Update loading overlay with live progress
+                    const overlayText = document.querySelector('#loading-overlay .loading-message');
+                    if (overlayText) {
+                        overlayText.textContent = `Fetching track metadata... (${progress.completed}/${progress.total}) ${progress.current_track || ''}`;
+                    }
+
+                    if (progress.done) {
+                        if (progress.tracks) {
+                            return progress.tracks;
+                        }
+                        console.warn('⚠️ Async enrichment failed:', progress.error);
+                        return tracks;
+                    }
+                } catch (pollErr) {
+                    console.warn('⚠️ Progress poll error:', pollErr);
+                }
+            }
+        }
+
+        console.warn('⚠️ Enrichment failed, returning original tracks');
+        return tracks;
+    } catch (e) {
+        console.warn('⚠️ Failed to enrich tracks:', e);
+        return tracks;
+    }
+}
+
+function parseBeatportDuration(raw) {
+    if (!raw) return 0;
+    if (typeof raw === 'string' && raw.includes(':')) {
+        const parts = raw.split(':');
+        return (parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10)) * 1000 || 0;
+    }
+    return (parseInt(raw, 10) || 0) * 1000;
+}
+
+function openBeatportChartAsDownloadModal(tracks, chartName, chartImage) {
+    // Note: callers already guard against double-clicks via _beatportModalOpening.
+    // Reset the flag here so the modal can open even after fast (cached) enrichment.
+    _beatportModalOpening = false;
+
+    const albumObj = {
+        id: `beatport_chart_${Date.now()}`,
+        name: chartName,
+        album_type: 'compilation',
+        images: chartImage ? [{ url: chartImage }] : [],
+        total_tracks: tracks.length
+    };
+
+    const formattedTracks = tracks.map((track, index) => {
+        // Use per-track release metadata if available (from JSON extraction)
+        const hasRelease = track.release_name && track.release_name.length > 0;
+        const trackAlbum = hasRelease ? {
+            id: `beatport_release_${track.release_id || index}`,
+            name: cleanTrackText(track.release_name),
+            album_type: 'single',
+            images: track.release_image ? [{ url: track.release_image }] : [],
+            release_date: track.release_date || '',
+            total_tracks: 1
+        } : albumObj;
+
+        // Combine title + mix_name
+        let trackName = cleanTrackText(track.title || 'Unknown Title');
+        if (track.mix_name && track.mix_name.toLowerCase() !== 'original mix') {
+            trackName = `${trackName} (${cleanTrackText(track.mix_name)})`;
+        }
+
+        // Split combined artist string into individual names for proper folder structure
+        const rawArtist = cleanTrackText(track.artist || 'Unknown Artist');
+        const artistList = rawArtist.includes(',')
+            ? rawArtist.split(',').map(a => a.trim()).filter(a => a)
+            : [rawArtist];
+
+        return {
+            id: `beatport_chart_${index}`,
+            name: trackName,
+            artists: artistList,
+            duration_ms: parseBeatportDuration(track.duration),
+            track_number: index + 1,
+            disc_number: 1,
+            album: trackAlbum
+        };
+    });
+
+    const virtualPlaylistId = `beatport_chart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+    // Compilation artist
+    const artistObj = { id: 'beatport_various', name: 'Various Artists' };
+
+    openDownloadMissingModalForArtistAlbum(
+        virtualPlaylistId,
+        chartName,
+        formattedTracks,
+        albumObj,
+        artistObj,
+        false,
+        'playlist'
+    );
+
+    // Register Beatport download bubble
+    registerBeatportDownload(chartName, chartImage, virtualPlaylistId);
+}
+
+/**
+ * Handle click on individual chart card - open download modal directly
+ */
+async function handleBeatportChartCardClick(cardElement, chart) {
+    console.log(`📊 Individual chart card clicked: ${chart.name} by ${chart.creator}`);
+
+    if (!chart.url || chart.url === '') {
+        showToast('No chart URL available', 'error');
+        return;
+    }
+
+    try {
+        const chartName = `${chart.name} - ${chart.creator}`;
+        showToast(`Loading ${chart.name}...`, 'info');
+        showLoadingOverlay(`Scraping ${chart.name}...`);
+
+        const response = await fetch('/api/beatport/chart/extract', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                chart_url: chart.url,
+                chart_name: `Featured Chart: ${chart.name}`,
+                limit: 100,
+                enrich: false
+            })
+        });
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error('No tracks found in this chart');
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
+        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
+
+    } catch (error) {
+        console.error(`❌ Error handling chart click for ${chart.name}:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Handle click on individual DJ chart card - open download modal directly
+ */
+async function handleBeatportDJChartCardClick(cardElement, chart) {
+    console.log(`🎧 Individual DJ chart card clicked: ${chart.name} by ${chart.creator}`);
+
+    if (!chart.url || chart.url === '') {
+        showToast('No DJ chart URL available', 'error');
+        return;
+    }
+
+    try {
+        const chartName = `${chart.name} - ${chart.creator}`;
+        showToast(`Loading ${chart.name}...`, 'info');
+        showLoadingOverlay(`Scraping ${chart.name}...`);
+
+        const response = await fetch('/api/beatport/chart/extract', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                chart_url: chart.url,
+                chart_name: `DJ Chart: ${chart.name}`,
+                limit: 100,
+                enrich: false
+            })
+        });
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error('No tracks found in this DJ chart');
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
+        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
+
+    } catch (error) {
+        console.error(`❌ Error handling DJ chart click for ${chart.name}:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Handle click on Beatport Top 100 button - open download modal directly
+ */
+async function handleBeatportTop100Click() {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+    setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+    console.log('💯 Beatport Top 100 button clicked');
+
+    try {
+        showLoadingOverlay('Scraping Beatport Top 100...');
+
+        // Fetch track list without enrichment (fast)
+        const response = await fetch('/api/beatport/top-100?enrich=false', { method: 'GET' });
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error('No tracks found in Beatport Top 100');
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+        // Enrich one-by-one with live progress
+        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Beatport Top 100');
+
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, 'Beatport Top 100', null);
+
+    } catch (error) {
+        console.error('❌ Error handling Beatport Top 100 click:', error);
+        hideLoadingOverlay();
+        showToast(`Error loading Beatport Top 100: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Handle click on Hype Top 100 button - open download modal directly
+ */
+async function handleHypeTop100Click() {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+    setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+    console.log('🔥 Hype Top 100 button clicked');
+
+    try {
+        showLoadingOverlay('Scraping Hype Top 100...');
+
+        // Fetch track list without enrichment (fast)
+        const response = await fetch('/api/beatport/hype-top-100?enrich=false', { method: 'GET' });
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error('No tracks found in Hype Top 100');
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+        // Enrich one-by-one with live progress
+        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Hype Top 100');
+
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, 'Hype Top 100', null);
+
+    } catch (error) {
+        console.error('❌ Error handling Hype Top 100 click:', error);
+        hideLoadingOverlay();
+        showToast(`Error loading Hype Top 100: ${error.message}`, 'error');
+    }
+}
+
+// ================================= //
+// GENRE BROWSER MODAL FUNCTIONS    //
+// ================================= //
+
+// Cache for genre browser data to avoid re-loading
+let genreBrowserCache = {
+    genres: null,
+    imagesLoaded: false,
+    lastLoaded: null,
+    imageLoadingActive: false,
+    imageWorkers: null
+};
+
+function initializeGenreBrowserModal() {
+    console.log('🎵 Initializing Genre Browser Modal...');
+
+    // Browse by Genre button click handler
+    const browseByGenreBtn = document.getElementById('browse-by-genre-btn');
+    if (browseByGenreBtn) {
+        browseByGenreBtn.addEventListener('click', () => {
+            console.log('🎵 Browse by Genre button clicked');
+            openGenreBrowserModal();
+        });
+    }
+
+    // Modal close button handler
+    const modalCloseBtn = document.getElementById('genre-browser-modal-close');
+    if (modalCloseBtn) {
+        modalCloseBtn.addEventListener('click', closeGenreBrowserModal);
+    }
+
+    // Click outside modal to close
+    const modalOverlay = document.getElementById('genre-browser-modal');
+    if (modalOverlay) {
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) {
+                closeGenreBrowserModal();
+            }
+        });
+    }
+
+    // Search functionality
+    const searchInput = document.getElementById('genre-browser-search');
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            filterGenreBrowserCards(e.target.value);
+        });
+    }
+
+    // ESC key to close modal
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && isGenreBrowserModalOpen()) {
+            closeGenreBrowserModal();
+        }
+    });
+
+    console.log('✅ Genre Browser Modal initialized');
+}
+
+function openGenreBrowserModal() {
+    console.log('🎵 Opening Genre Browser Modal...');
+
+    const modal = document.getElementById('genre-browser-modal');
+    if (modal) {
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden'; // Prevent background scrolling
+
+        // Check cache before loading genres
+        if (genreBrowserCache.genres && genreBrowserCache.genres.length > 0) {
+            console.log('💾 Using cached genres data');
+            displayCachedGenres();
+        } else {
+            console.log('🔄 No cached data, loading genres...');
+            loadGenreBrowserGenres();
+        }
+
+        console.log('✅ Genre Browser Modal opened');
+    }
+}
+
+function closeGenreBrowserModal() {
+    console.log('🎵 Closing Genre Browser Modal...');
+
+    const modal = document.getElementById('genre-browser-modal');
+    if (modal) {
+        modal.classList.remove('active');
+        document.body.style.overflow = ''; // Restore scrolling
+
+        // Clear search input but keep the genre data cached
+        const searchInput = document.getElementById('genre-browser-search');
+        if (searchInput) {
+            searchInput.value = '';
+            // Also reset the display filter to show all genres
+            filterGenreBrowserCards('');
+        }
+
+        // Pause image loading workers if they're running
+        if (genreBrowserCache.imageLoadingActive) {
+            console.log('⏸️ Pausing image loading workers...');
+            genreBrowserCache.imageLoadingActive = false;
+        }
+
+        console.log('✅ Genre Browser Modal closed (data preserved in cache)');
+    }
+}
+
+function isGenreBrowserModalOpen() {
+    const modal = document.getElementById('genre-browser-modal');
+    return modal && modal.classList.contains('active');
+}
+
+async function loadGenreBrowserGenres() {
+    console.log('🔍 Loading genres for Genre Browser Modal...');
+
+    const genresGrid = document.getElementById('genre-browser-genres-grid');
+    if (!genresGrid) {
+        console.error('❌ Genre browser grid not found');
+        return;
+    }
+
+    // Show loading state
+    genresGrid.innerHTML = `
+        <div class="genre-browser-loading-container">
+            <div class="genre-browser-loading-spinner"></div>
+            <p class="genre-browser-loading-text">🔍 Discovering current Beatport genres...</p>
+        </div>
+    `;
+
+    try {
+        // First, fetch genres quickly without images
+        console.log('🚀 Fetching genres without images for fast loading...');
+        const fastResponse = await fetch('/api/beatport/genres');
+        if (!fastResponse.ok) {
+            throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
+        }
+
+        const fastData = await fastResponse.json();
+        const genres = fastData.genres || [];
+
+        if (genres.length === 0) {
+            genresGrid.innerHTML = `
+                <div class="genre-browser-loading-container">
+                    <p style="color: rgba(255, 255, 255, 0.7);">⚠️ No genres available</p>
+                    <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
+                </div>
+            `;
+            return;
+        }
+
+        // Filter out unwanted genres (section titles, etc.)
+        const filteredGenres = genres.filter(genre => {
+            const name = genre.name.toLowerCase().trim();
+            const unwantedGenres = [
+                'open format',
+                'electronic',
+                'genres',
+                'browse',
+                'charts',
+                'new releases',
+                'trending',
+                'featured',
+                'popular'
+            ];
+
+            const isUnwanted = unwantedGenres.includes(name);
+            if (isUnwanted) {
+                console.log(`🚫 Filtered out unwanted genre: "${genre.name}"`);
+            }
+            return !isUnwanted;
+        });
+
+        console.log(`📋 Filtered genres: ${genres.length} → ${filteredGenres.length} (removed ${genres.length - filteredGenres.length} unwanted)`);
+
+        // Generate genre cards dynamically (without images first)
+        const genreCardsHTML = filteredGenres.map(genre => `
+            <div class="genre-browser-card genre-browser-card-fallback"
+                 data-genre-slug="${genre.slug}"
+                 data-genre-id="${genre.id}"
+                 data-genre-name="${genre.name}"
+                 data-url="${genre.url}">
+                <div class="genre-browser-card-image">🎵</div>
+                <div class="genre-browser-card-content">
+                    <h3 class="genre-browser-card-title">${genre.name}</h3>
+                    <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
+                </div>
+            </div>
+        `).join('');
+
+        genresGrid.innerHTML = genreCardsHTML;
+
+        // Add click event listeners to genre cards
+        addGenreBrowserCardClickListeners();
+
+        // Cache the filtered genres data
+        genreBrowserCache.genres = filteredGenres;
+        genreBrowserCache.lastLoaded = new Date();
+        genreBrowserCache.imagesLoaded = false;
+
+        console.log(`✅ Loaded ${filteredGenres.length} Beatport genres for modal (fast mode)`);
+        console.log(`💾 Cached ${filteredGenres.length} genres for future use`);
+        showToast(`Loaded ${filteredGenres.length} genres for browsing`, 'success');
+
+        // Now fetch images progressively in the background
+        if (filteredGenres.length > 5) {
+            console.log('🖼️ Loading genre images progressively for modal...');
+            loadGenreBrowserImagesProgressively(filteredGenres);
+        }
+
+    } catch (error) {
+        console.error('❌ Error loading genres for modal:', error);
+        genresGrid.innerHTML = `
+            <div class="genre-browser-loading-container">
+                <p style="color: rgba(255, 255, 255, 0.7);">❌ Failed to load genres: ${error.message}</p>
+                <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
+            </div>
+        `;
+        showToast(`Error loading genres: ${error.message}`, 'error');
+    }
+}
+
+function displayCachedGenres() {
+    console.log('💾 Displaying cached genres...');
+
+    const genresGrid = document.getElementById('genre-browser-genres-grid');
+    if (!genresGrid) {
+        console.error('❌ Genre browser grid not found');
+        return;
+    }
+
+    const genres = genreBrowserCache.genres;
+    if (!genres || genres.length === 0) {
+        console.error('❌ No cached genres available');
+        return;
+    }
+
+    // Generate genre cards from cached data
+    const genreCardsHTML = genres.map(genre => `
+        <div class="genre-browser-card genre-browser-card-fallback"
+             data-genre-slug="${genre.slug}"
+             data-genre-id="${genre.id}"
+             data-genre-name="${genre.name}"
+             data-url="${genre.url}">
+            <div class="genre-browser-card-image">🎵</div>
+            <div class="genre-browser-card-content">
+                <h3 class="genre-browser-card-title">${genre.name}</h3>
+                <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
+            </div>
+        </div>
+    `).join('');
+
+    genresGrid.innerHTML = genreCardsHTML;
+
+    // Add click event listeners to genre cards
+    addGenreBrowserCardClickListeners();
+
+    console.log(`✅ Displayed ${genres.length} cached genres instantly`);
+
+    // Handle image loading based on current state
+    if (genreBrowserCache.imagesLoaded) {
+        console.log('🖼️ Images already loaded, restoring them...');
+        restoreCachedImages(genres);
+    } else if (!genreBrowserCache.imageLoadingActive && genres.length > 5) {
+        // Resume or start image loading
+        const cachedCount = genres.filter(g => g.imageUrl).length;
+        if (cachedCount > 0) {
+            console.log(`🔄 Resuming image loading (${cachedCount}/${genres.length} already cached)...`);
+            restoreCachedImages(genres); // Show already cached images
+        } else {
+            console.log('🖼️ Starting fresh image loading for cached genres...');
+        }
+        loadGenreBrowserImagesProgressively(genres);
+    } else {
+        console.log('📷 Image loading in progress, showing cached images...');
+        restoreCachedImages(genres);
+    }
+}
+
+function restoreCachedImages(genres) {
+    // Restore images that were already loaded in previous sessions
+    genres.forEach(genre => {
+        if (genre.imageUrl) {
+            const genreCard = document.querySelector(
+                `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
+            );
+
+            if (genreCard) {
+                const imageElement = genreCard.querySelector('.genre-browser-card-image');
+                if (imageElement) {
+                    imageElement.innerHTML = `<img src="${genre.imageUrl}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
+                    genreCard.classList.remove('genre-browser-card-fallback');
+                }
+            }
+        }
+    });
+}
+
+async function loadGenreBrowserImagesProgressively(genres) {
+    // Load genre images with 2 concurrent workers for faster loading
+    // Only process genres that don't already have cached images
+    const imageQueue = genres.filter(genre => !genre.imageUrl);
+    let imagesLoaded = 0;
+    const maxWorkers = 2;
+
+    // Mark loading as active
+    genreBrowserCache.imageLoadingActive = true;
+
+    console.log(`🖼️ Starting progressive image loading for modal with ${maxWorkers} workers for ${imageQueue.length} remaining genres (${genres.length - imageQueue.length} already cached)`);
+
+    // If all images are already cached, mark as complete
+    if (imageQueue.length === 0) {
+        console.log('✅ All images already cached, marking as complete');
+        genreBrowserCache.imagesLoaded = true;
+        genreBrowserCache.imageLoadingActive = false;
+        return;
+    }
+
+    // Function to process a single image
+    async function processImage(genre) {
+        try {
+            // Fetch individual genre image from backend
+            const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);
+
+            if (response.ok) {
+                const data = await response.json();
+
+                if (data.success && data.image_url) {
+                    // Cache the image URL in the genre object
+                    genre.imageUrl = data.image_url;
+
+                    // Find the genre card in the modal
+                    const genreCard = document.querySelector(
+                        `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
+                    );
+
+                    if (genreCard) {
+                        const imageElement = genreCard.querySelector('.genre-browser-card-image');
+                        if (imageElement) {
+                            // Replace the fallback emoji with the actual image
+                            imageElement.innerHTML = `<img src="${data.image_url}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
+                            genreCard.classList.remove('genre-browser-card-fallback');
+
+                            console.log(`✅ Loaded and cached image for ${genre.name} in modal`);
+                        }
+                    }
+                }
+            }
+
+            imagesLoaded++;
+            console.log(`📷 Progress: ${imagesLoaded}/${genres.length} images loaded for modal`);
+
+        } catch (error) {
+            console.log(`⚠️ Could not load image for ${genre.name} in modal: ${error.message}`);
+            imagesLoaded++;
+        }
+    }
+
+    // Worker function to process images from the queue
+    async function worker() {
+        while (imageQueue.length > 0 && genreBrowserCache.imageLoadingActive) {
+            const genre = imageQueue.shift();
+            if (genre) {
+                await processImage(genre);
+                // Small delay to prevent overwhelming the server
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+
+            // Check if we should pause
+            if (!genreBrowserCache.imageLoadingActive) {
+                console.log('⏸️ Worker paused - modal closed');
+                break;
+            }
+        }
+    }
+
+    // Start the workers
+    const workers = [];
+    for (let i = 0; i < maxWorkers; i++) {
+        workers.push(worker());
+    }
+
+    // Wait for all workers to complete
+    await Promise.all(workers);
+
+    // Check if loading was completed or paused
+    if (genreBrowserCache.imageLoadingActive) {
+        // Completed successfully
+        genreBrowserCache.imagesLoaded = true;
+        genreBrowserCache.imageLoadingActive = false;
+        console.log(`🎉 Completed loading all genre images for modal (${imagesLoaded}/${genres.length})`);
+        console.log(`💾 Marked images as loaded in cache`);
+    } else {
+        // Was paused
+        console.log(`⏸️ Image loading paused (${imagesLoaded}/${genres.length} completed)`);
+        console.log(`💾 Partial progress saved in cache`);
+    }
+}
+
+function filterGenreBrowserCards(searchTerm) {
+    const genreCards = document.querySelectorAll('.genre-browser-card');
+    const searchLower = searchTerm.toLowerCase();
+
+    genreCards.forEach(card => {
+        const genreName = card.dataset.genreName?.toLowerCase() || '';
+        const shouldShow = genreName.includes(searchLower);
+
+        card.style.display = shouldShow ? 'block' : 'none';
+    });
+
+    console.log(`🔍 Filtered genre cards with search term: "${searchTerm}"`);
+}
+
+// === GENRE BROWSER CARD CLICK HANDLERS ===
+
+function addGenreBrowserCardClickListeners() {
+    const genreCards = document.querySelectorAll('.genre-browser-card');
+    genreCards.forEach(card => {
+        card.addEventListener('click', () => {
+            const genreSlug = card.dataset.genreSlug;
+            const genreId = card.dataset.genreId;
+            const genreName = card.dataset.genreName;
+
+            console.log(`🎵 Genre card clicked: ${genreName} (${genreSlug})`);
+            handleGenreBrowserCardClick(genreSlug, genreId, genreName);
+        });
+    });
+
+    console.log(`🔗 Added click listeners to ${genreCards.length} genre browser cards`);
+}
+
+async function handleGenreBrowserCardClick(genreSlug, genreId, genreName) {
+    console.log(`🎠 Loading hero slider for ${genreName}...`);
+
+    try {
+        // Show the genre page view
+        showGenrePageView(genreSlug, genreId, genreName);
+
+        // Load the hero slider data
+        // Load hero slider, Top 10 lists, and Top 10 releases in parallel
+        await Promise.all([
+            loadGenreHeroSlider(genreSlug, genreId, genreName),
+            loadGenreTop10Lists(genreSlug, genreId, genreName),
+            loadGenreTop10Releases(genreSlug, genreId, genreName)
+        ]);
+
+    } catch (error) {
+        console.error(`❌ Error loading genre page for ${genreName}:`, error);
+        showToast(`Error loading ${genreName}: ${error.message}`, 'error');
+
+        // Return to genre list on error
+        showGenreListView();
+    }
+}
+
+function showGenrePageView(genreSlug, genreId, genreName) {
+    console.log(`🎯 Showing genre page view for ${genreName}`);
+
+    // CRITICAL: Stop all other slider auto-play to prevent conflicts
+    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
+        clearInterval(beatportRebuildSliderState.autoPlayInterval);
+        console.log('🛑 Stopped main slider auto-play to prevent conflicts');
+    }
+
+    const modal = document.getElementById('genre-browser-modal');
+    if (!modal) return;
+
+    // Hide genre list elements
+    const searchSection = modal.querySelector('.genre-browser-search-section');
+    const genresSection = modal.querySelector('.genre-browser-genres-section');
+
+    if (searchSection) searchSection.style.display = 'none';
+    if (genresSection) genresSection.style.display = 'none';
+
+    // Create or show genre page content
+    let genrePageContent = modal.querySelector('.genre-page-content');
+    if (!genrePageContent) {
+        genrePageContent = document.createElement('div');
+        genrePageContent.className = 'genre-page-content';
+        genrePageContent.innerHTML = `
+            <div class="genre-page-header">
+                <button class="genre-back-button" id="genre-back-button">
+                    <span class="back-icon">←</span> Back to Genres
+                </button>
+                <h2 class="genre-page-title"></h2>
+            </div>
+            <div class="genre-hero-slider-container" id="genre-hero-slider-container">
+                <div class="genre-loading-container">
+                    <div class="genre-loading-spinner"></div>
+                    <p class="genre-loading-text">🎠 Loading hero releases...</p>
+                </div>
+            </div>
+            <div class="genre-nav-buttons-section">
+                <div class="genre-nav-buttons-container">
+                    <button class="beatport-nav-button" id="genre-top100-btn">
+                        <span class="beatport-nav-icon top100-icon"></span>
+                        <span class="beatport-nav-text">Beatport Top 100</span>
+                    </button>
+                </div>
+            </div>
+            <div class="genre-top10-lists-container" id="genre-top10-lists-container">
+                <div class="genre-top10-loading-container">
+                    <div class="genre-loading-spinner"></div>
+                    <p class="genre-loading-text">🎵 Loading Top 10 lists...</p>
+                </div>
+            </div>
+            <div class="genre-top10-releases-container" id="genre-top10-releases-container">
+                <div class="genre-top10-releases-loading-container">
+                    <div class="genre-loading-spinner"></div>
+                    <p class="genre-loading-text">💿 Loading Top 10 releases...</p>
+                </div>
+            </div>
+        `;
+
+        modal.querySelector('.genre-browser-modal-content').appendChild(genrePageContent);
+
+        // Add back button listener
+        const backButton = genrePageContent.querySelector('#genre-back-button');
+        if (backButton) {
+            backButton.addEventListener('click', showGenreListView);
+        }
+
+        // Add genre top 100 button listener
+        const genreTop100Button = genrePageContent.querySelector('#genre-top100-btn');
+        if (genreTop100Button) {
+            genreTop100Button.addEventListener('click', () => {
+                handleGenreTop100Click(genreSlug, genreId, genreName);
+            });
+        }
+    }
+
+    // Update title and show genre page
+    const titleElement = genrePageContent.querySelector('.genre-page-title');
+    if (titleElement) titleElement.textContent = genreName;
+
+    genrePageContent.style.display = 'block';
+
+    // Store current genre info for potential back navigation
+    genrePageContent.dataset.genreSlug = genreSlug;
+    genrePageContent.dataset.genreId = genreId;
+    genrePageContent.dataset.genreName = genreName;
+}
+
+function showGenreListView() {
+    console.log(`🔙 Returning to genre list view`);
+
+    // Clean up genre hero slider
+    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
+        clearInterval(window.genreHeroSliderState.autoPlayInterval);
+        console.log('🧹 Cleaned up genre hero slider auto-play');
+    }
+
+    // CRITICAL: Restart main slider auto-play
+    if (typeof beatportRebuildSliderState !== 'undefined' && !beatportRebuildSliderState.autoPlayInterval) {
+        if (typeof startBeatportRebuildSliderAutoPlay === 'function') {
+            startBeatportRebuildSliderAutoPlay();
+            console.log('🔄 Restarted main slider auto-play');
+        }
+    }
+
+    const modal = document.getElementById('genre-browser-modal');
+    if (!modal) return;
+
+    // Show genre list elements
+    const searchSection = modal.querySelector('.genre-browser-search-section');
+    const genresSection = modal.querySelector('.genre-browser-genres-section');
+    const genrePageContent = modal.querySelector('.genre-page-content');
+
+    if (searchSection) searchSection.style.display = 'block';
+    if (genresSection) genresSection.style.display = 'block';
+    if (genrePageContent) genrePageContent.style.display = 'none';
+}
+
+async function loadGenreHeroSlider(genreSlug, genreId, genreName) {
+    console.log(`🎠 Loading hero slider data for ${genreName}...`);
+
+    const container = document.getElementById('genre-hero-slider-container');
+    if (!container) return;
+
+    try {
+        // Show loading state
+        container.innerHTML = `
+            <div class="genre-loading-container">
+                <div class="genre-loading-spinner"></div>
+                <p class="genre-loading-text">🎠 Loading ${genreName} hero releases...</p>
+            </div>
+        `;
+
+        // Fetch hero slider data from API
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/hero`);
+        if (!response.ok) {
+            throw new Error(`API returned ${response.status}: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success || !data.releases || data.releases.length === 0) {
+            throw new Error(data.message || 'No hero releases found');
+        }
+
+        console.log(`✅ Loaded ${data.count} hero releases for ${genreName} (cached: ${data.cached})`);
+
+        // Create hero slider HTML
+        const heroSliderHTML = createGenreHeroSliderHTML(data.releases, genreName);
+        container.innerHTML = heroSliderHTML;
+
+        // Add click handlers to individual releases (for future download functionality)
+        addGenreHeroReleaseClickHandlers(data.releases);
+
+        showToast(`Loaded ${data.count} ${genreName} releases`, 'success');
+
+    } catch (error) {
+        console.error(`❌ Error loading hero slider for ${genreName}:`, error);
+
+        container.innerHTML = `
+            <div class="genre-error-container">
+                <p class="genre-error-text">❌ Failed to load ${genreName} releases</p>
+                <p class="genre-error-details">${error.message}</p>
+                <button class="genre-retry-button" onclick="loadGenreHeroSlider('${genreSlug}', '${genreId}', '${genreName}')">
+                    🔄 Retry
+                </button>
+            </div>
+        `;
+
+        throw error;
+    }
+}
+
+function createGenreHeroSliderHTML(releases, genreName) {
+    const slidesHTML = releases.map((release, index) => {
+        // Convert relative URL to absolute URL
+        const absoluteUrl = release.url.startsWith('http')
+            ? release.url
+            : `https://www.beatport.com${release.url}`;
+
+        return `
+        <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
+             data-slide="${index}"
+             data-url="${absoluteUrl}"
+             data-image="${release.image_url}"
+             style="--slide-bg-image: url('${release.image_url}')">
+            <div class="beatport-rebuild-slide-background">
+                <div class="beatport-rebuild-slide-gradient"></div>
+            </div>
+            <div class="beatport-rebuild-slide-content">
+                <div class="beatport-rebuild-track-info">
+                    <h2 class="beatport-rebuild-track-title">${release.title}</h2>
+                    <p class="beatport-rebuild-artist-name">${release.artists_string}</p>
+                    <p class="beatport-rebuild-album-name">${release.label || genreName + ' Hero Release'}</p>
+                </div>
+            </div>
+        </div>`;
+    }).join('');
+
+    const indicatorsHTML = releases.map((_, index) => `
+        <button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>
+    `).join('');
+
+    return `
+        <div class="beatport-rebuild-slider-container">
+            <div class="beatport-rebuild-slider" id="genre-hero-slider">
+                <div class="beatport-rebuild-slider-track" id="genre-hero-slider-track">
+                    ${slidesHTML}
+                </div>
+
+                <!-- Slider Navigation -->
+                <div class="beatport-rebuild-slider-nav">
+                    <button class="beatport-rebuild-nav-btn beatport-rebuild-prev-btn" id="genre-hero-prev-btn">‹</button>
+                    <button class="beatport-rebuild-nav-btn beatport-rebuild-next-btn" id="genre-hero-next-btn">›</button>
+                </div>
+
+                <!-- Slider Indicators -->
+                <div class="beatport-rebuild-slider-indicators">
+                    ${indicatorsHTML}
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+function addGenreHeroReleaseClickHandlers(releases) {
+    // Clear any existing intervals first
+    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
+        clearInterval(window.genreHeroSliderState.autoPlayInterval);
+        console.log('🧹 Cleared previous genre hero auto-play interval');
+    }
+
+    // CRITICAL: Clear ALL possible conflicting intervals
+    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
+        clearInterval(beatportRebuildSliderState.autoPlayInterval);
+        console.log('🛑 Cleared main rebuild slider auto-play interval');
+    }
+
+    // Initialize global slider state for genre hero slider
+    window.genreHeroSliderState = {
+        currentSlide: 0,
+        totalSlides: releases.length,
+        autoPlayInterval: null
+    };
+
+    console.log(`🎠 Initializing genre hero slider with ${releases.length} slides`);
+
+    // Set up navigation button handlers
+    const prevBtn = document.getElementById('genre-hero-prev-btn');
+    const nextBtn = document.getElementById('genre-hero-next-btn');
+
+    if (prevBtn) {
+        prevBtn.addEventListener('click', () => {
+            window.genreHeroSliderState.currentSlide = window.genreHeroSliderState.currentSlide > 0
+                ? window.genreHeroSliderState.currentSlide - 1
+                : window.genreHeroSliderState.totalSlides - 1;
+            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
+            console.log(`⬅️ Previous: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
+        });
+    }
+
+    if (nextBtn) {
+        nextBtn.addEventListener('click', () => {
+            window.genreHeroSliderState.currentSlide = (window.genreHeroSliderState.currentSlide + 1) % window.genreHeroSliderState.totalSlides;
+            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
+            console.log(`➡️ Next: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
+        });
+    }
+
+    // Set up indicator handlers
+    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.addEventListener('click', () => {
+            window.genreHeroSliderState.currentSlide = index;
+            updateGenreHeroSlide(index);
+            console.log(`🎯 Indicator: Jumping to slide ${index}`);
+        });
+    });
+
+    // Set up individual slide click handlers (like the main hero slider)
+    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide[data-url]');
+    console.log(`🔗 Found ${slides.length} slides to set up click handlers for`);
+
+    slides.forEach((slide, index) => {
+        const releaseUrl = slide.getAttribute('data-url');
+        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
+            const release = releases[index];
+            if (release) {
+                // Ensure we use the absolute URL and match the expected data structure
+                const releaseData = {
+                    url: releaseUrl, // This is already the absolute URL from data-url
+                    title: release.title || 'Unknown Title',
+                    artist: release.artists_string || 'Unknown Artist', // handleBeatportReleaseCardClick expects 'artist'
+                    label: release.label || 'Unknown Label',
+                    image_url: release.image_url || '',
+                    // Include all original data for completeness
+                    artists_string: release.artists_string,
+                    type: release.type,
+                    source: release.source,
+                    badges: release.badges || []
+                };
+
+                slide.addEventListener('click', async (event) => {
+                    // Prevent navigation button clicks from triggering this
+                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
+                        event.target.closest('.beatport-rebuild-indicator')) {
+                        return;
+                    }
+
+                    console.log(`🎵 Genre hero slide clicked: ${releaseData.title} by ${releaseData.artist}`);
+
+                    // Use the exact same functionality as the main hero slider
+                    await handleBeatportReleaseCardClick(slide, releaseData);
+                });
+
+                slide.style.cursor = 'pointer';
+            }
+        }
+    });
+
+    // Ensure first slide is active BEFORE starting auto-play
+    updateGenreHeroSlide(0);
+
+    // Delay auto-play start to let DOM settle
+    setTimeout(() => {
+        startGenreHeroSliderAutoPlay();
+    }, 100);
+
+    // Pause on hover
+    const sliderContainer = document.querySelector('#genre-hero-slider');
+    if (sliderContainer) {
+        sliderContainer.addEventListener('mouseenter', () => {
+            if (window.genreHeroSliderState.autoPlayInterval) {
+                clearInterval(window.genreHeroSliderState.autoPlayInterval);
+                console.log('⏸️ Paused auto-play on hover');
+            }
+        });
+
+        sliderContainer.addEventListener('mouseleave', () => {
+            // Delay restart to avoid rapid state changes
+            setTimeout(() => {
+                startGenreHeroSliderAutoPlay();
+            }, 100);
+            console.log('▶️ Resumed auto-play after hover');
+        });
+    }
+
+    console.log(`✅ Set up slider functionality for ${releases.length} genre hero releases`);
+}
+
+function updateGenreHeroSlide(slideIndex) {
+    if (!window.genreHeroSliderState) {
+        console.error('❌ Genre hero slider state not initialized');
+        return;
+    }
+
+    // First update the state
+    window.genreHeroSliderState.currentSlide = slideIndex;
+
+    // Update slide visibility - use the exact same logic as main slider
+    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide');
+    console.log(`🔄 Updating slide to index ${slideIndex}, found ${slides.length} slides`);
+
+    if (slideIndex >= slides.length || slideIndex < 0) {
+        console.error(`❌ Invalid slide index ${slideIndex}, max is ${slides.length - 1}`);
+        return;
+    }
+
+    slides.forEach((slide, index) => {
+        slide.classList.remove('active', 'prev', 'next');
+
+        if (index === slideIndex) {
+            slide.classList.add('active');
+            console.log(`✅ Activated slide ${index}: ${slide.getAttribute('data-slide')} - Title: ${slide.querySelector('.beatport-rebuild-track-title')?.textContent}`);
+        } else if (index < slideIndex) {
+            slide.classList.add('prev');
+        } else {
+            slide.classList.add('next');
+        }
+    });
+
+    // Update indicators
+    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
+    indicators.forEach((indicator, index) => {
+        indicator.classList.toggle('active', index === slideIndex);
+    });
+
+    console.log(`Genre slide updated to: ${window.genreHeroSliderState.currentSlide}`);
+}
+
+function startGenreHeroSliderAutoPlay() {
+    if (!window.genreHeroSliderState) {
+        console.error('❌ Cannot start auto-play: Genre hero slider state not initialized');
+        return;
+    }
+
+    // Clear any existing intervals first
+    if (window.genreHeroSliderState.autoPlayInterval) {
+        clearInterval(window.genreHeroSliderState.autoPlayInterval);
+        console.log('🧹 Cleared existing auto-play interval');
+    }
+
+    window.genreHeroSliderState.autoPlayInterval = setInterval(() => {
+        if (!window.genreHeroSliderState) {
+            console.error('❌ Auto-play fired but state is gone, clearing interval');
+            clearInterval(window.genreHeroSliderState.autoPlayInterval);
+            return;
+        }
+
+        const currentSlide = window.genreHeroSliderState.currentSlide;
+        const totalSlides = window.genreHeroSliderState.totalSlides;
+        const nextSlide = (currentSlide + 1) % totalSlides;
+
+        console.log(`⏰ Auto-play: Current=${currentSlide}, Total=${totalSlides}, Next=${nextSlide}`);
+
+        // Validate the next slide index
+        if (nextSlide >= 0 && nextSlide < totalSlides) {
+            updateGenreHeroSlide(nextSlide);
+        } else {
+            console.error(`❌ Invalid nextSlide calculated: ${nextSlide}, resetting to 0`);
+            updateGenreHeroSlide(0);
+        }
+    }, 5000); // 5 second intervals like the main slider
+
+    console.log(`▶️ Started auto-play for genre hero slider (${window.genreHeroSliderState.totalSlides} slides)`);
+}
+
+/**
+ * Load Top 10 lists for a specific genre (Beatport + Hype)
+ */
+async function loadGenreTop10Lists(genreSlug, genreId, genreName) {
+    console.log(`🎵 Loading Top 10 lists for ${genreName}...`);
+
+    const container = document.getElementById('genre-top10-lists-container');
+    if (!container) {
+        console.error('❌ Genre Top 10 lists container not found');
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-lists`);
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to load Top 10 lists');
+        }
+
+        console.log(`✅ Loaded ${data.beatport_count} Beatport + ${data.hype_count} Hype Top 10 tracks for ${genreName}`);
+
+        // Generate HTML using exact same structure as main page (but unique IDs)
+        const top10ListsHTML = createGenreTop10ListsHTML(data, genreName);
+        container.innerHTML = top10ListsHTML;
+
+        // Add container-level click handlers exactly like main page
+        addGenreTop10ClickHandlers();
+
+        console.log(`✅ Successfully populated genre Top 10 lists for ${genreName}`);
+
+    } catch (error) {
+        console.error(`❌ Error loading Top 10 lists for ${genreName}:`, error);
+
+        // Show error state
+        container.innerHTML = `
+            <div class="genre-top10-error">
+                <h3>❌ Error Loading Top 10 Lists</h3>
+                <p>Could not load Top 10 tracks for ${genreName}</p>
+                <p class="error-detail">${error.message}</p>
+            </div>
+        `;
+    }
+}
+
+/**
+ * Create HTML for genre Top 10 lists (exact structure as main page, unique IDs)
+ */
+function createGenreTop10ListsHTML(data, genreName) {
+    const { beatport_top10, hype_top10, has_hype_section } = data;
+
+    // Use exact same structure as main page but with genre-specific IDs
+    let html = `
+        <div class="beatport-top10-section">
+            <div class="beatport-top10-header">
+                <h2 class="beatport-top10-title">🏆 ${genreName} Top 10 Lists</h2>
+                <p class="beatport-top10-subtitle">Current trending ${genreName.toLowerCase()} tracks</p>
+            </div>
+
+            <div class="beatport-top10-container"${!has_hype_section ? ' style="grid-template-columns: 1fr; justify-items: center; max-width: 700px;"' : ''}>
+                <!-- Beatport Top 10 List (same classes, unique ID) -->
+                <div class="beatport-top10-list" id="genre-beatport-top10-list">
+                    <div class="beatport-top10-list-header">
+                        <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
+                        <p class="beatport-top10-list-subtitle">Most popular ${genreName.toLowerCase()} tracks</p>
+                    </div>
+                    <div class="beatport-top10-tracks">
+    `;
+
+    // Add Beatport Top 10 tracks (same classes as main page)
+    beatport_top10.forEach((track, index) => {
+        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+        html += `
+            <div class="beatport-top10-card" data-url="${track.url || '#'}">
+                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
+                <div class="beatport-top10-card-artwork">
+                    ${track.artwork_url ?
+                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
+                '<div class="beatport-top10-card-placeholder">🎵</div>'
+            }
+                </div>
+                <div class="beatport-top10-card-info">
+                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
+                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
+                    <p class="beatport-top10-card-label">${cleanLabel}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    html += `
+                    </div>
+                </div>
+    `;
+
+    // Add Hype Top 10 section (same classes, unique ID)
+    if (has_hype_section && hype_top10.length > 0) {
+        html += `
+                <!-- Hype Top 10 List (same classes, unique ID) -->
+                <div class="beatport-hype10-list" id="genre-beatport-hype10-list">
+                    <div class="beatport-hype10-list-header">
+                        <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
+                        <p class="beatport-hype10-list-subtitle">Editor's trending ${genreName.toLowerCase()} picks</p>
+                    </div>
+                    <div class="beatport-hype10-tracks">
+        `;
+
+        // Add Hype Top 10 tracks (same classes as main page)
+        hype_top10.forEach((track, index) => {
+            const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
+            const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
+            const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
+
+            html += `
+                <div class="beatport-hype10-card" data-url="${track.url || '#'}">
+                    <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
+                    <div class="beatport-hype10-card-artwork">
+                        ${track.artwork_url ?
+                    `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
+                    '<div class="beatport-hype10-card-placeholder">🔥</div>'
+                }
+                    </div>
+                    <div class="beatport-hype10-card-info">
+                        <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
+                        <p class="beatport-hype10-card-artist">${cleanArtist}</p>
+                        <p class="beatport-hype10-card-label">${cleanLabel}</p>
+                    </div>
+                </div>
+            `;
+        });
+
+        html += `
+                    </div>
+                </div>
+        `;
+    }
+    // No else block - completely hide hype section when no hype tracks available
+
+    html += `
+            </div>
+        </div>
+    `;
+
+    return html;
+}
+
+/**
+ * Add container-level click handlers for genre Top 10 lists (exact parity with main page)
+ */
+function addGenreTop10ClickHandlers() {
+    console.log('🔗 Adding container-level click handlers for genre Top 10 lists...');
+
+    // Add container-level click handler for Beatport Top 10 (exact match to main page)
+    const beatportContainer = document.getElementById('genre-beatport-top10-list');
+    if (beatportContainer) {
+        beatportContainer.addEventListener('click', () => {
+            console.log('🎵 Genre Beatport Top 10 container clicked');
+            handleGenreBeatportTop10Click();
+        });
+        console.log('✅ Added Beatport Top 10 container click handler');
+    }
+
+    // Add container-level click handler for Hype Top 10 (exact match to main page)
+    const hypeContainer = document.getElementById('genre-beatport-hype10-list');
+    if (hypeContainer) {
+        hypeContainer.addEventListener('click', () => {
+            console.log('🔥 Genre Hype Top 10 container clicked');
+            handleGenreHypeTop10Click();
+        });
+        console.log('✅ Added Hype Top 10 container click handler');
+    }
+
+    console.log(`✅ Set up container-level click handlers for genre Top 10 lists`);
+}
+
+/**
+ * Handle genre Beatport Top 10 container click (exact parity with main page)
+ */
+async function handleGenreBeatportTop10Click() {
+    console.log('🎵 Handling Genre Beatport Top 10 click');
+
+    // Get the actual genre name from the page title
+    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
+
+    // Use actual genre name in chart title
+    await handleGenreChartClick('genre_beatport_top10', `${genreName} Beatport Top 10`, 'genre_beatport_top10');
+}
+
+/**
+ * Handle genre Hype Top 10 container click (exact parity with main page)
+ */
+async function handleGenreHypeTop10Click() {
+    console.log('🔥 Handling Genre Hype Top 10 click');
+
+    // Get the actual genre name from the page title
+    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
+
+    // Use actual genre name in chart title
+    await handleGenreChartClick('genre_hype_top10', `${genreName} Hype Top 10`, 'genre_hype_top10');
+}
+
+/**
+ * Handle genre chart click (based on main page handleRebuildChartClick)
+ */
+async function handleGenreChartClick(trackDataKey, chartName, chartType) {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+    setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+    try {
+        // Extract track data from DOM cards
+        const trackData = await getGenrePageTrackData(trackDataKey);
+        if (!trackData || trackData.length === 0) {
+            throw new Error(`No track data found for ${chartName}`);
+        }
+
+        console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
+        showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
+
+        const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
+
+        console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+    } catch (error) {
+        hideLoadingOverlay();
+        console.error(`❌ Error handling ${chartName} click:`, error);
+        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Extract track data from genre page DOM (based on main page getRebuildPageTrackData)
+ */
+async function getGenrePageTrackData(trackDataKey) {
+    console.log(`🔍 Extracting ${trackDataKey} data from genre page DOM`);
+
+    let containerSelector, cardSelector;
+    if (trackDataKey === 'genre_beatport_top10') {
+        containerSelector = '#genre-beatport-top10-list';
+        cardSelector = '.beatport-top10-card[data-url]';
+    } else if (trackDataKey === 'genre_hype_top10') {
+        containerSelector = '#genre-beatport-hype10-list';
+        cardSelector = '.beatport-hype10-card[data-url]';
+    } else {
+        throw new Error(`Unknown track data key: ${trackDataKey}`);
+    }
+
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+        throw new Error(`Container ${containerSelector} not found`);
+    }
+
+    const trackCards = container.querySelectorAll(cardSelector);
+    if (trackCards.length === 0) {
+        throw new Error(`No track cards found in ${containerSelector}`);
+    }
+
+    // Extract track data from DOM cards (exact same pattern as main page)
+    const tracks = Array.from(trackCards).map(card => {
+        const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
+        const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
+        const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
+        const url = card.getAttribute('data-url') || '';
+        const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
+
+        return {
+            title: title,
+            artist: artist,
+            label: label,
+            url: url,
+            rank: rank
+        };
+    });
+
+    console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
+    return tracks;
+}
+
+/**
+ * Handle genre-specific Top 100 button click - create discovery process for genre top 100 tracks
+ */
+async function handleGenreTop100Click(genreSlug, genreId, genreName) {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+    setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+    console.log(`💯 Genre Top 100 button clicked for ${genreName}`);
+
+    const chartName = `${genreName} Top 100`;
+
+    try {
+        showLoadingOverlay(`Scraping ${chartName}...`);
+
+        // Use the genre tracks endpoint without enrichment
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/tracks?enrich=false`, { method: 'GET' });
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(`No tracks found in ${chartName}`);
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
+
+        // Enrich one-by-one with live progress
+        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+    } catch (error) {
+        console.error(`❌ Error handling ${chartName} click:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Load Top 10 releases for a specific genre
+ */
+async function loadGenreTop10Releases(genreSlug, genreId, genreName) {
+    console.log(`💿 Loading Top 10 releases for ${genreName}...`);
+
+    const container = document.getElementById('genre-top10-releases-container');
+    if (!container) {
+        console.error('❌ Genre Top 10 releases container not found');
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-releases`);
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to load Top 10 releases');
+        }
+
+        console.log(`💿 Loaded ${data.releases.length} Top 10 releases for ${genreName}`);
+        createGenreTop10ReleasesHTML(data.releases, genreName);
+
+    } catch (error) {
+        console.error(`❌ Error loading Top 10 releases for ${genreName}:`, error);
+        showGenreTop10ReleasesError(error.message || 'Failed to load Top 10 releases');
+    }
+}
+
+/**
+ * Create HTML for genre Top 10 releases section (exact parity with main page)
+ */
+function createGenreTop10ReleasesHTML(releases, genreName) {
+    const container = document.getElementById('genre-top10-releases-container');
+    if (!container || !releases || releases.length === 0) return;
+
+    // Create section with unique ID but exact same structure as main page
+    const sectionHtml = `
+        <div class="beatport-releases-top10-section">
+            <div class="beatport-releases-top10-header">
+                <h2 class="beatport-releases-top10-title">💿 Top 10 ${genreName} Releases</h2>
+                <p class="beatport-releases-top10-subtitle">Most popular albums and EPs for ${genreName}</p>
+            </div>
+            <div class="beatport-releases-top10-container">
+                <div class="beatport-releases-top10-list" id="genre-beatport-releases-top10-list">
+                    ${createGenreTop10ReleasesCardsHTML(releases)}
+                </div>
+            </div>
+        </div>
+    `;
+
+    container.innerHTML = sectionHtml;
+
+    // Add background images and click handlers
+    addGenreTop10ReleasesInteractivity(releases);
+}
+
+/**
+ * Create release cards HTML for genre Top 10 releases
+ */
+function createGenreTop10ReleasesCardsHTML(releases) {
+    let cardsHtml = '<div class="beatport-releases-top10-tracks">';
+
+    releases.forEach((release, index) => {
+        cardsHtml += `
+            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
+                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
+                <div class="beatport-releases-top10-card-artwork">
+                    ${release.image_url ?
+                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
+                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
+            }
+                </div>
+                <div class="beatport-releases-top10-card-info">
+                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
+                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
+                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    cardsHtml += '</div>';
+    return cardsHtml;
+}
+
+/**
+ * Add interactivity to genre Top 10 releases cards
+ */
+function addGenreTop10ReleasesInteractivity(releases) {
+    const container = document.getElementById('genre-beatport-releases-top10-list');
+    if (!container) return;
+
+    // Set background images for cards
+    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
+    cards.forEach(card => {
+        const bgImage = card.getAttribute('data-bg-image');
+        if (bgImage) {
+            // Transform image URL from 95x95 to 500x500 for higher quality background
+            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
+            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
+            card.style.backgroundSize = 'cover';
+            card.style.backgroundPosition = 'center';
+        }
+    });
+
+    // Add click handlers for individual release discovery (exact same pattern as main page)
+    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
+    releaseCards.forEach((card, index) => {
+        card.addEventListener('click', () => handleGenreReleaseCardClick(card, releases[index]));
+        card.style.cursor = 'pointer';
+    });
+}
+
+/**
+ * Handle click on individual genre Top 10 Release card (exact parity with main page)
+ */
+async function handleGenreReleaseCardClick(cardElement, release) {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+
+    console.log(`💿 Individual genre release card clicked: ${release.title} by ${release.artist}`);
+
+    if (!release.url || release.url === '#') {
+        _beatportModalOpening = false;
+        showToast('No release URL available', 'error');
+        return;
+    }
+
+    try {
+        showToast(`Loading ${release.title}...`, 'info');
+        showLoadingOverlay(`Getting tracks from ${release.title}...`);
+
+        // Fetch structured release metadata for direct download modal
+        console.log(`🎵 Fetching release metadata: ${release.url}`);
+        const response = await fetch('/api/beatport/release-metadata', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ release_url: release.url })
+        });
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(data.error || 'No tracks found in this release');
+        }
+
+        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
+
+        const formattedTracks = data.tracks.map(track => ({
+            ...track,
+            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
+        }));
+
+        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+        const playlistName = data.album.name;
+
+        await openDownloadMissingModalForArtistAlbum(
+            virtualPlaylistId,
+            playlistName,
+            formattedTracks,
+            data.album,
+            data.artist,
+            false
+        );
+
+        hideLoadingOverlay();
+        _beatportModalOpening = false;
+        console.log(`✅ Opened download modal for ${playlistName}`);
+
+    } catch (error) {
+        console.error(`❌ Error handling release click for ${release.title}:`, error);
+        hideLoadingOverlay();
+        _beatportModalOpening = false;
+        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Show error message for genre Top 10 releases
+ */
+function showGenreTop10ReleasesError(errorMessage) {
+    const container = document.getElementById('genre-top10-releases-container');
+
+    const errorHtml = `
+        <div class="beatport-releases-top10-section">
+            <div class="beatport-releases-top10-header">
+                <h2 class="beatport-releases-top10-title">💿 Top 10 Releases</h2>
+                <p class="beatport-releases-top10-subtitle">Error loading releases</p>
+            </div>
+            <div class="beatport-releases-top10-container">
+                <div class="beatport-releases-top10-error">
+                    <h3>❌ Error Loading Releases</h3>
+                    <p>${errorMessage}</p>
+                </div>
+            </div>
+        </div>
+    `;
+
+    if (container) container.innerHTML = errorHtml;
+}
+
+// Initialize the Genre Browser Modal when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    initializeGenreBrowserModal();
+});
+
+// ============ Plex Music Library Selection ============
+
+async function loadPlexMusicLibraries() {
+    try {
+        const response = await fetch('/api/plex/music-libraries');
+        const data = await response.json();
+
+        if (data.success && data.libraries && data.libraries.length > 0) {
+            const selector = document.getElementById('plex-music-library');
+            const container = document.getElementById('plex-library-selector-container');
+
+            // Clear existing options
+            selector.innerHTML = '';
+
+            // Add options for each library
+            data.libraries.forEach(library => {
+                const option = document.createElement('option');
+                option.value = library.title;
+                option.textContent = library.title;
+
+                // Mark the currently selected library
+                if (library.title === data.current || library.title === data.selected) {
+                    option.selected = true;
+                }
+
+                selector.appendChild(option);
+            });
+
+            // Show the container
+            container.style.display = 'block';
+        } else {
+            // Hide if no libraries found or not connected
+            document.getElementById('plex-library-selector-container').style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error loading Plex music libraries:', error);
+        document.getElementById('plex-library-selector-container').style.display = 'none';
+    }
+}
+
+async function selectPlexLibrary() {
+    const selector = document.getElementById('plex-music-library');
+    const selectedLibrary = selector.value;
+
+    if (!selectedLibrary) return;
+
+    try {
+        const response = await fetch('/api/plex/select-music-library', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                library_name: selectedLibrary
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`Plex music library switched to: ${selectedLibrary}`);
+        } else {
+            console.error('Failed to switch library:', data.error);
+            alert(`Failed to switch library: ${data.error}`);
+        }
+    } catch (error) {
+        console.error('Error selecting Plex library:', error);
+        alert('Error selecting library. Please try again.');
+    }
+}
+
+// ============ Jellyfin User Selection ============
+
+async function loadJellyfinUsers() {
+    try {
+        const response = await fetch('/api/jellyfin/users');
+        const data = await response.json();
+
+        if (data.success && data.users && data.users.length > 0) {
+            const selector = document.getElementById('jellyfin-user');
+            const container = document.getElementById('jellyfin-user-selector-container');
+
+            // Clear existing options
+            selector.innerHTML = '';
+
+            // Add options for each user
+            data.users.forEach(user => {
+                const option = document.createElement('option');
+                option.value = user.name;
+                option.textContent = user.name;
+
+                // Mark the currently selected user
+                if (user.name === data.current || user.name === data.selected) {
+                    option.selected = true;
+                }
+
+                selector.appendChild(option);
+            });
+
+            // Show the container
+            container.style.display = 'block';
+        } else {
+            // Hide if no users found or not connected
+            document.getElementById('jellyfin-user-selector-container').style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error loading Jellyfin users:', error);
+        document.getElementById('jellyfin-user-selector-container').style.display = 'none';
+    }
+}
+
+async function selectJellyfinUser() {
+    const selector = document.getElementById('jellyfin-user');
+    const selectedUser = selector.value;
+
+    if (!selectedUser) return;
+
+    try {
+        const response = await fetch('/api/jellyfin/select-user', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: selectedUser
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`Jellyfin user switched to: ${selectedUser}`);
+            // Refresh library dropdown for the new user
+            loadJellyfinMusicLibraries();
+        } else {
+            console.error('Failed to switch user:', data.error);
+            alert(`Failed to switch user: ${data.error}`);
+        }
+    } catch (error) {
+        console.error('Error selecting Jellyfin user:', error);
+        alert('Error selecting user. Please try again.');
+    }
+}
+
+// ============ Jellyfin Music Library Selection ============
+
+async function loadJellyfinMusicLibraries() {
+    try {
+        const response = await fetch('/api/jellyfin/music-libraries');
+        const data = await response.json();
+
+        if (data.success && data.libraries && data.libraries.length > 0) {
+            const selector = document.getElementById('jellyfin-music-library');
+            const container = document.getElementById('jellyfin-library-selector-container');
+
+            // Clear existing options
+            selector.innerHTML = '';
+
+            // Add options for each library
+            data.libraries.forEach(library => {
+                const option = document.createElement('option');
+                option.value = library.title;
+                option.textContent = library.title;
+
+                // Mark the currently selected library
+                if (library.title === data.current || library.title === data.selected) {
+                    option.selected = true;
+                }
+
+                selector.appendChild(option);
+            });
+
+            // Show the container
+            container.style.display = 'block';
+        } else {
+            // Hide if no libraries found or not connected
+            document.getElementById('jellyfin-library-selector-container').style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error loading Jellyfin music libraries:', error);
+        document.getElementById('jellyfin-library-selector-container').style.display = 'none';
+    }
+}
+
+async function selectJellyfinLibrary() {
+    const selector = document.getElementById('jellyfin-music-library');
+    const selectedLibrary = selector.value;
+
+    if (!selectedLibrary) return;
+
+    try {
+        const response = await fetch('/api/jellyfin/select-music-library', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                library_name: selectedLibrary
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`Jellyfin music library switched to: ${selectedLibrary}`);
+        } else {
+            console.error('Failed to switch library:', data.error);
+            alert(`Failed to switch library: ${data.error}`);
+        }
+    } catch (error) {
+        console.error('Error selecting Jellyfin library:', error);
+        alert('Error selecting library. Please try again.');
+    }
+}
+
+// ============ Navidrome Music Folder Selection ============
+
+async function loadNavidromeMusicFolders() {
+    try {
+        const response = await fetch('/api/navidrome/music-folders');
+        const data = await response.json();
+
+        if (data.success && data.folders && data.folders.length > 0) {
+            const selector = document.getElementById('navidrome-music-folder');
+            const container = document.getElementById('navidrome-folder-selector-container');
+
+            selector.innerHTML = '<option value="">All Libraries</option>';
+
+            data.folders.forEach(folder => {
+                const option = document.createElement('option');
+                option.value = folder.title;
+                option.textContent = folder.title;
+
+                if (folder.title === data.current || folder.title === data.selected) {
+                    option.selected = true;
+                }
+
+                selector.appendChild(option);
+            });
+
+            container.style.display = 'block';
+        } else {
+            document.getElementById('navidrome-folder-selector-container').style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error loading Navidrome music folders:', error);
+        document.getElementById('navidrome-folder-selector-container').style.display = 'none';
+    }
+}
+
+async function selectNavidromeMusicFolder() {
+    const selector = document.getElementById('navidrome-music-folder');
+    const selectedFolder = selector.value;
+
+    try {
+        const response = await fetch('/api/navidrome/select-music-folder', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ folder_name: selectedFolder })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(data.message, 'success');
+        } else {
+            console.error('Failed to set music folder:', data.error);
+            showToast(`Failed to set music folder: ${data.error}`, 'error', 'set-media');
+        }
+    } catch (error) {
+        console.error('Error selecting Navidrome music folder:', error);
+        showToast('Error selecting music folder. Please try again.', 'error', 'set-media');
+    }
+}
+
+// ============================================
+
diff --git a/webui/static/core.js b/webui/static/core.js
new file mode 100644
index 00000000..62ee0840
--- /dev/null
+++ b/webui/static/core.js
@@ -0,0 +1,875 @@
+// SoulSync WebUI JavaScript - Replicating PyQt6 GUI Functionality
+
+// Global state management
+let currentPage = 'dashboard';
+let currentTrack = null;
+let isPlaying = false;
+let mediaPlayerExpanded = false;
+let searchResults = [];
+let currentStream = {
+    status: 'stopped',
+    progress: 0,
+    track: null
+};
+let currentMusicSourceName = 'Spotify'; // 'Spotify', 'iTunes', or 'Deezer' - updated from status endpoint
+
+// Streaming state management (enhanced functionality)
+let streamStatusPoller = null;
+let audioPlayer = null;
+let streamPollingRetries = 0;
+let streamPollingInterval = 1000; // Start with 1-second polling
+const maxStreamPollingRetries = 10;
+let allSearchResults = [];
+let currentFilterType = 'all';
+let currentFilterFormat = 'all';
+let currentSortBy = 'quality_score';
+let isSortReversed = false;
+let searchAbortController = null;
+let dbStatsInterval = null;
+let dbUpdateStatusInterval = null;
+let qualityScannerStatusInterval = null;
+let duplicateCleanerStatusInterval = null;
+let wishlistCountInterval = null;
+let wishlistCountdownInterval = null;  // Countdown timer for wishlist overview modal
+let watchlistCountdownInterval = null;  // Countdown timer for watchlist overview modal
+
+// Page state for Watchlist & Wishlist sidebar pages
+let watchlistPageState = { isInitialized: false, artists: [] };
+let wishlistPageState = { isInitialized: false };
+
+// --- Add these globals for the Sync Page ---
+let spotifyPlaylists = [];
+let selectedPlaylists = new Set();
+let activeSyncPollers = {}; // Key: playlist_id, Value: intervalId
+// Phase 5: WebSocket sync/discovery/scan state
+let _syncProgressCallbacks = {};
+let _discoveryProgressCallbacks = {};
+let _lastWatchlistScanStatus = null;
+let _lastMediaScanStatus = null;
+let _lastWishlistStats = null;
+let playlistTrackCache = {}; // Key: playlist_id, Value: tracks array
+let spotifyPlaylistsLoaded = false;
+let activeDownloadProcesses = {};
+let sequentialSyncManager = null;
+
+// --- YouTube Playlist State Management ---
+let youtubePlaylistStates = {}; // Key: url_hash, Value: playlist state
+let activeYouTubePollers = {}; // Key: url_hash, Value: intervalId
+
+// --- Tidal Playlist State Management (Similar to YouTube but loads from API like Spotify) ---
+let tidalPlaylists = [];
+let tidalPlaylistStates = {}; // Key: playlist_id, Value: playlist state with phases
+let tidalPlaylistsLoaded = false;
+let deezerPlaylists = [];
+let deezerPlaylistStates = {};
+let deezerArlPlaylists = [];
+let deezerArlPlaylistsLoaded = false;
+
+// --- Beatport Chart State Management (Similar to YouTube/Tidal) ---
+let beatportChartStates = {}; // Key: chart_hash, Value: chart state with phases
+let beatportContentState = {
+    loaded: false,
+    loadingPromise: null,
+    abortController: null
+};
+
+function getBeatportContentSignal() {
+    return beatportContentState.abortController ? beatportContentState.abortController.signal : null;
+}
+
+function throwIfBeatportLoadAborted() {
+    if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
+        throw new DOMException('Beatport load aborted', 'AbortError');
+    }
+}
+
+function stopBeatportDiscoveryAndSyncPolling() {
+    Object.entries(activeYouTubePollers).forEach(([identifier, poller]) => {
+        const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
+            !!beatportChartStates[identifier];
+        if (isBeatportChart) {
+            clearInterval(poller);
+            delete activeYouTubePollers[identifier];
+        }
+    });
+
+    Object.entries(_discoveryProgressCallbacks).forEach(([identifier]) => {
+        const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
+            !!beatportChartStates[identifier];
+        if (isBeatportChart) {
+            if (socketConnected) socket.emit('discovery:unsubscribe', { ids: [identifier] });
+            delete _discoveryProgressCallbacks[identifier];
+        }
+    });
+
+    Object.entries(_syncProgressCallbacks).forEach(([syncPlaylistId]) => {
+        const beatportState = Object.values(youtubePlaylistStates).find(state =>
+            state && state.is_beatport_playlist && state.syncPlaylistId === syncPlaylistId
+        );
+        if (beatportState) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+            delete _syncProgressCallbacks[syncPlaylistId];
+        }
+    });
+}
+
+function resetBeatportSliderInitFlags() {
+    const rebuildSlider = document.getElementById('beatport-rebuild-slider');
+    if (rebuildSlider) rebuildSlider.dataset.initialized = 'false';
+
+    const releasesSlider = document.getElementById('beatport-releases-slider');
+    if (releasesSlider) releasesSlider.dataset.initialized = 'false';
+    beatportReleasesSliderState.isInitialized = false;
+
+    beatportHypePicksSliderState.isInitialized = false;
+
+    const chartsSlider = document.getElementById('beatport-charts-slider');
+    if (chartsSlider) chartsSlider.dataset.initialized = 'false';
+    beatportChartsSliderState.isInitialized = false;
+
+    const djSlider = document.getElementById('beatport-dj-slider');
+    if (djSlider) djSlider.dataset.initialized = 'false';
+    beatportDJSliderState.isInitialized = false;
+}
+
+function cleanupBeatportContent() {
+    const wasLoaded = beatportContentState.loaded || !!beatportContentState.loadingPromise;
+    if (!wasLoaded) return;
+
+    console.log('🧹 Cleaning up Beatport content...');
+
+    if (beatportContentState.abortController) {
+        beatportContentState.abortController.abort();
+        beatportContentState.abortController = null;
+    }
+
+    stopBeatportDiscoveryAndSyncPolling();
+    cleanupBeatportRebuildSlider();
+    cleanupBeatportReleasesSlider();
+    cleanupBeatportHypePicksSlider();
+    cleanupBeatportChartsSlider();
+    cleanupBeatportDJSlider();
+    resetBeatportSliderInitFlags();
+
+    beatportContentState.loadingPromise = null;
+    beatportContentState.loaded = false;
+
+    console.log('✅ Beatport content cleaned up');
+}
+
+// --- ListenBrainz Playlist State Management (Similar to YouTube/Tidal/Beatport) ---
+let listenbrainzPlaylistStates = {}; // Key: playlist_mbid, Value: playlist state with phases
+let listenbrainzPlaylistsLoaded = false;  // Track if playlists have been loaded from backend
+
+// --- Artists Page State Management ---
+let artistsPageState = {
+    currentView: 'search', // 'search', 'results', 'detail'
+    searchQuery: '',
+    searchResults: [],
+    selectedArtist: null,
+    sourceOverride: null, // Set when navigating from an alternate search tab
+    artistDiscography: {
+        albums: [],
+        singles: []
+    },
+    cache: {
+        searches: {}, // Cache search results by query
+        discography: {}, // Cache discography by artist ID
+        colors: {}, // Cache extracted colors by image URL
+        completionData: {} // Cache completion data by artist ID
+    },
+    isInitialized: false // Track if the page has been initialized
+};
+
+// --- Artist Downloads Management State ---
+let artistDownloadBubbles = {}; // Track artist download bubbles: artistId -> { artist, downloads: [], element }
+let artistDownloadModalOpen = false; // Track if artist download modal is open
+let downloadsUpdateTimeout = null; // Debounce downloads section updates
+
+// --- Search Downloads Management State ---
+let searchDownloadBubbles = {}; // Track search download bubbles: artistName -> { artist, downloads: [] }
+let searchDownloadModalOpen = false; // Track if search download modal is open
+
+// --- Beatport Downloads Management State ---
+let beatportDownloadBubbles = {}; // Track Beatport download bubbles: chartKey -> { chart: { name, image }, downloads: [] }
+let beatportDownloadsUpdateTimeout = null; // Debounce Beatport downloads section updates
+
+let artistsSearchTimeout = null;
+let artistsSearchController = null;
+let artistCompletionController = null; // Track ongoing completion check to cancel when navigating away
+let similarArtistsController = null; // Track ongoing similar artists stream to cancel when navigating away
+
+// --- Lazy Background Image Observer ---
+// Watches elements with data-bg-src, applies background-image when visible, unobserves after.
+const lazyBgObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const el = entry.target;
+            const src = el.dataset.bgSrc;
+            if (src) {
+                el.style.backgroundImage = `url('${src}')`;
+                delete el.dataset.bgSrc;
+            }
+            lazyBgObserver.unobserve(el);
+        }
+    });
+}, { rootMargin: '200px' });
+
+/**
+ * Observe all elements with data-bg-src within a container for lazy background loading.
+ */
+function observeLazyBackgrounds(container) {
+    if (!container) return;
+    const elements = container.querySelectorAll('[data-bg-src]');
+    elements.forEach(el => lazyBgObserver.observe(el));
+}
+
+// ===============================
+// CONFIRM DIALOG (themed replacement for native confirm())
+// ===============================
+let _confirmResolver = null;
+
+function showConfirmDialog({ title = 'Confirm', message = '', confirmText = 'Confirm', cancelText = 'Cancel', destructive = false } = {}) {
+    // Resolve any pending dialog as cancelled before opening a new one
+    if (_confirmResolver) {
+        _confirmResolver(false);
+        _confirmResolver = null;
+    }
+
+    const overlay = document.getElementById('confirm-modal-overlay');
+    const titleEl = document.getElementById('confirm-modal-title');
+    const messageEl = document.getElementById('confirm-modal-message');
+    const confirmBtn = document.getElementById('confirm-modal-confirm');
+    const cancelBtn = document.getElementById('confirm-modal-cancel');
+
+    titleEl.textContent = title;
+    messageEl.textContent = message;
+    confirmBtn.textContent = confirmText;
+    cancelBtn.textContent = cancelText;
+
+    // Toggle destructive (red) vs primary (accent) confirm button
+    confirmBtn.className = destructive
+        ? 'modal-button modal-button--cancel'
+        : 'modal-button modal-button--primary';
+
+    overlay.classList.remove('hidden');
+
+    return new Promise(resolve => {
+        _confirmResolver = resolve;
+    });
+}
+
+function resolveConfirmDialog(result) {
+    const overlay = document.getElementById('confirm-modal-overlay');
+    overlay.classList.add('hidden');
+    if (_confirmResolver) {
+        _confirmResolver(result);
+        _confirmResolver = null;
+    }
+}
+
+/**
+ * Nuclear confirmation dialog for mass-destructive operations.
+ * User must type an exact phrase to proceed.
+ */
+function showWitnessMeDialog(orphanCount) {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'confirm-modal-overlay';
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+        overlay.innerHTML = `
+            <div style="background:var(--bg-secondary, #1e1e2e);border:2px solid #e74c3c;border-radius:12px;padding:28px;max-width:480px;width:90%;color:var(--text-primary, #fff);font-family:inherit;">
+                <h3 style="margin:0 0 8px;color:#e74c3c;font-size:1.2em;">Mass Deletion Warning</h3>
+                <p style="margin:0 0 12px;font-size:0.95em;opacity:0.9;">
+                    You are about to <strong>permanently delete ${orphanCount.toLocaleString()} files</strong> from your disk.
+                </p>
+                <p style="margin:0 0 12px;font-size:0.9em;opacity:0.75;">
+                    This many orphans usually means a path mismatch between your database and filesystem
+                    — not actual orphan files. A previous user lost their entire library this way.
+                </p>
+                <p style="margin:0 0 6px;font-size:0.9em;opacity:0.9;">
+                    To confirm you understand the risk, type <strong style="color:#e74c3c;">witness me</strong> below:
+                </p>
+                <input type="text" id="witness-me-input" autocomplete="off" spellcheck="false"
+                       placeholder="Type the phrase here..."
+                       style="width:100%;padding:10px;border:1px solid #555;border-radius:6px;background:var(--bg-primary, #111);color:var(--text-primary, #fff);font-size:1em;margin:8px 0 16px;box-sizing:border-box;">
+                <div style="display:flex;gap:10px;justify-content:flex-end;">
+                    <button id="witness-cancel" style="padding:8px 20px;border:1px solid #555;border-radius:6px;background:transparent;color:var(--text-primary, #fff);cursor:pointer;font-size:0.9em;">
+                        Cancel
+                    </button>
+                    <button id="witness-confirm" disabled
+                            style="padding:8px 20px;border:none;border-radius:6px;background:#555;color:#888;cursor:not-allowed;font-size:0.9em;font-weight:600;transition:all 0.2s;">
+                        Delete Files
+                    </button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        const input = overlay.querySelector('#witness-me-input');
+        const confirmBtn = overlay.querySelector('#witness-confirm');
+        const cancelBtn = overlay.querySelector('#witness-cancel');
+
+        input.addEventListener('input', () => {
+            const match = input.value.trim().toLowerCase() === 'witness me';
+            confirmBtn.disabled = !match;
+            confirmBtn.style.background = match ? '#e74c3c' : '#555';
+            confirmBtn.style.color = match ? '#fff' : '#888';
+            confirmBtn.style.cursor = match ? 'pointer' : 'not-allowed';
+        });
+
+        confirmBtn.addEventListener('click', () => {
+            document.body.removeChild(overlay);
+            resolve(true);
+        });
+
+        cancelBtn.addEventListener('click', () => {
+            document.body.removeChild(overlay);
+            resolve(false);
+        });
+
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                document.body.removeChild(overlay);
+                resolve(false);
+            }
+        });
+
+        setTimeout(() => input.focus(), 100);
+    });
+}
+
+const MASS_ORPHAN_THRESHOLD = 20;
+
+function _isMassOrphanFix(jobId, count) {
+    if (count <= MASS_ORPHAN_THRESHOLD) return false;
+    // Only trigger if mass_orphan flag is actually set on visible findings
+    // (flag is set by backend when >50% of files are orphans — likely path mismatch)
+    if (jobId === 'orphan_file_detector' || !jobId) {
+        const massCards = document.querySelectorAll('.repair-finding-card[data-mass-orphan="true"]');
+        if (massCards.length > 0) return true;
+    }
+    return false;
+}
+
+// ===============================
+// WEBSOCKET CONNECTION MANAGER
+// ===============================
+let socket = null;
+let socketConnected = false;
+
+function initializeWebSocket() {
+    if (typeof io === 'undefined') {
+        console.warn('Socket.IO client not loaded — falling back to HTTP polling');
+        return;
+    }
+
+    socket = io({
+        transports: ['polling', 'websocket'],
+        reconnection: true,
+        reconnectionAttempts: Infinity,
+        reconnectionDelay: 1000,
+        reconnectionDelayMax: 10000,
+        timeout: 20000
+    });
+
+    socket.on('connect', () => {
+        console.log('WebSocket connected');
+        socketConnected = true;
+        resubscribeDownloadBatches();
+        // Re-subscribe to any active sync/discovery rooms after reconnect
+        const activeSyncIds = Object.keys(_syncProgressCallbacks);
+        if (activeSyncIds.length > 0) {
+            socket.emit('sync:subscribe', { playlist_ids: activeSyncIds });
+            console.log('🔄 Re-subscribed to sync rooms:', activeSyncIds);
+        }
+        const activeDiscoveryIds = Object.keys(_discoveryProgressCallbacks);
+        if (activeDiscoveryIds.length > 0) {
+            socket.emit('discovery:subscribe', { ids: activeDiscoveryIds });
+            console.log('🔄 Re-subscribed to discovery rooms:', activeDiscoveryIds);
+        }
+        // Join profile room for scoped watchlist/wishlist count updates
+        if (currentProfile) {
+            socket.emit('profile:join', { profile_id: currentProfile.id });
+        }
+    });
+
+    socket.on('disconnect', (reason) => {
+        console.warn('WebSocket disconnected:', reason);
+        socketConnected = false;
+    });
+
+    socket.on('reconnect', (attemptNumber) => {
+        console.log(`WebSocket reconnected after ${attemptNumber} attempts`);
+        // Rejoin profile room for scoped WebSocket emits
+        if (currentProfile) {
+            socket.emit('profile:join', { profile_id: currentProfile.id });
+        }
+        // Phase 1: Full state refresh on reconnect
+        fetchAndUpdateServiceStatus();
+        updateWatchlistButtonCount();
+        resubscribeDownloadBatches();
+        // Phase 2: Refresh dashboard data if on dashboard page
+        if (currentPage === 'dashboard') {
+            fetchAndUpdateSystemStats();
+            fetchAndUpdateActivityFeed();
+            fetchAndUpdateDbStats();
+            updateWishlistCount();
+        }
+    });
+
+    // Phase 1 event listeners
+    socket.on('status:update', handleServiceStatusUpdate);
+    socket.on('watchlist:count', handleWatchlistCountUpdate);
+    socket.on('downloads:batch_update', handleDownloadBatchUpdate);
+
+    // Phase 2 event listeners (dashboard pollers)
+    socket.on('rate-monitor:update', _handleRateMonitorUpdate);
+    socket.on('dashboard:stats', handleDashboardStats);
+    socket.on('dashboard:activity', handleDashboardActivity);
+    socket.on('dashboard:toast', handleDashboardToast);
+    socket.on('dashboard:db_stats', handleDashboardDbStats);
+    socket.on('dashboard:wishlist_count', handleDashboardWishlistCount);
+
+    // Phase 3 event listeners (enrichment sidebar workers)
+    socket.on('enrichment:musicbrainz', (data) => updateMusicBrainzStatusFromData(data));
+    socket.on('enrichment:audiodb', (data) => updateAudioDBStatusFromData(data));
+    socket.on('enrichment:discogs', (data) => updateDiscogsStatusFromData(data));
+    socket.on('enrichment:deezer', (data) => updateDeezerStatusFromData(data));
+    socket.on('enrichment:spotify-enrichment', (data) => updateSpotifyEnrichmentStatusFromData(data));
+    socket.on('enrichment:itunes-enrichment', (data) => updateiTunesEnrichmentStatusFromData(data));
+    socket.on('enrichment:lastfm-enrichment', (data) => updateLastFMEnrichmentStatusFromData(data));
+    socket.on('enrichment:genius-enrichment', (data) => updateGeniusEnrichmentStatusFromData(data));
+    socket.on('enrichment:tidal-enrichment', (data) => updateTidalEnrichmentStatusFromData(data));
+    socket.on('enrichment:qobuz-enrichment', (data) => updateQobuzEnrichmentStatusFromData(data));
+    socket.on('enrichment:hydrabase', (data) => updateHydrabaseStatusFromData(data));
+    socket.on('enrichment:repair', (data) => updateRepairStatusFromData(data));
+    socket.on('enrichment:soulid', (data) => updateSoulIDStatusFromData(data));
+    socket.on('enrichment:listening-stats', () => { }); // Status only, no UI update needed
+    socket.on('repair:progress', (data) => updateRepairJobProgressFromData(data));
+
+    // Phase 4 event listeners (tool progress)
+    socket.on('tool:stream', (data) => updateStreamStatusFromData(data));
+    socket.on('tool:quality-scanner', (data) => updateQualityScanProgressFromData(data));
+    socket.on('tool:duplicate-cleaner', (data) => updateDuplicateCleanProgressFromData(data));
+    socket.on('tool:retag', (data) => updateRetagStatusFromData(data));
+    socket.on('tool:db-update', (data) => updateDbProgressFromData(data));
+    socket.on('tool:metadata', (data) => updateMetadataStatusFromData(data));
+    socket.on('tool:logs', (data) => updateLogsFromData(data));
+
+    // Phase 5 event listeners (sync/discovery progress + scans)
+    socket.on('sync:progress', (data) => updateSyncProgressFromData(data));
+    socket.on('discovery:progress', (data) => updateDiscoveryProgressFromData(data));
+    socket.on('scan:watchlist', (data) => updateWatchlistScanFromData(data));
+    socket.on('scan:media', (data) => updateMediaScanFromData(data));
+    socket.on('wishlist:stats', (data) => updateWishlistStatsFromData(data));
+    // Phase 6: Automation progress
+    socket.on('automation:progress', (data) => updateAutomationProgressFromData(data));
+}
+
+function handleServiceStatusUpdate(data) {
+    // Cache for library status card
+    _lastServiceStatus = data;
+
+    // Same logic as fetchAndUpdateServiceStatus response handler
+    updateServiceStatus('spotify', data.spotify);
+    updateServiceStatus('media-server', data.media_server);
+    updateServiceStatus('soulseek', data.soulseek);
+
+    updateSidebarServiceStatus('spotify', data.spotify);
+    updateSidebarServiceStatus('media-server', data.media_server);
+    updateSidebarServiceStatus('soulseek', data.soulseek);
+
+    // Update downloads nav badge from status push
+    if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
+
+    // Hide sync buttons (not the page) for standalone mode — playlists still browsable/downloadable
+    const isSoulsyncStandalone = data.media_server?.type === 'soulsync';
+    _isSoulsyncStandalone = isSoulsyncStandalone;
+    document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
+        if (isSoulsyncStandalone) {
+            btn.dataset.hiddenByStandalone = '1';
+            btn.style.display = 'none';
+        } else if (btn.dataset.hiddenByStandalone) {
+            delete btn.dataset.hiddenByStandalone;
+            btn.style.display = '';
+        }
+        // If not standalone and not previously hidden by standalone, leave display untouched
+        // (preserves display:none on undiscovered LB/Last.fm playlist sync buttons)
+    });
+
+    // Update enrichment service cards
+    if (data.enrichment) renderEnrichmentCards(data.enrichment);
+
+    // Spotify rate limit / cooldown / recovery
+    if (data.spotify?.rate_limited && data.spotify.rate_limit) {
+        handleSpotifyRateLimit(data.spotify.rate_limit);
+        _spotifyInCooldown = false;
+    } else if (data.spotify?.post_ban_cooldown > 0) {
+        if (_spotifyRateLimitShown && !_spotifyInCooldown) {
+            _spotifyRateLimitShown = false;
+            _spotifyInCooldown = true;
+            closeRateLimitModal();
+            showToast('Spotify ban expired \u2014 recovering shortly', 'info');
+        }
+    } else {
+        if (_spotifyInCooldown) {
+            _spotifyInCooldown = false;
+            showToast('Spotify access restored', 'success');
+            if (currentPage === 'discover') {
+                loadDiscoverPage();
+            }
+        } else if (_spotifyRateLimitShown) {
+            handleSpotifyRateLimit(null);
+        }
+    }
+}
+
+function _updateHeroBtnCount(buttonId, badgeId, count) {
+    const badge = document.getElementById(badgeId);
+    if (badge) {
+        badge.textContent = count;
+        badge.classList.toggle('has-items', count > 0);
+    }
+}
+
+function handleWatchlistCountUpdate(data) {
+    if (data.success) {
+        _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
+        // Update sidebar nav badge
+        const wlNavBadge = document.getElementById('watchlist-nav-badge');
+        if (wlNavBadge) {
+            wlNavBadge.textContent = data.count;
+            wlNavBadge.classList.toggle('hidden', data.count === 0);
+        }
+        const watchlistButton = document.getElementById('watchlist-button');
+        if (watchlistButton) {
+            const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
+            if (countdownText) {
+                watchlistButton.title = `Next auto-scan in ${countdownText}`;
+            }
+        }
+    }
+}
+
+function handleDownloadBatchUpdate(payload) {
+    const { batch_id, data } = payload;
+    // Find which playlistId maps to this batch_id
+    for (const [playlistId, process] of Object.entries(activeDownloadProcesses)) {
+        if (process.batchId === batch_id) {
+            processModalStatusUpdate(playlistId, data);
+            break;
+        }
+    }
+}
+
+function resubscribeDownloadBatches() {
+    if (!socket || !socketConnected) return;
+    const activeBatchIds = [];
+    Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+        if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+            activeBatchIds.push(process.batchId);
+        }
+    });
+    if (activeBatchIds.length > 0) {
+        socket.emit('downloads:subscribe', { batch_ids: activeBatchIds });
+        console.log(`WebSocket subscribed to ${activeBatchIds.length} download batches`);
+    }
+}
+
+function subscribeToDownloadBatch(batchId) {
+    if (socket && socketConnected && batchId) {
+        socket.emit('downloads:subscribe', { batch_ids: [batchId] });
+    }
+}
+
+function unsubscribeFromDownloadBatch(batchId) {
+    if (socket && socketConnected && batchId) {
+        socket.emit('downloads:unsubscribe', { batch_ids: [batchId] });
+    }
+}
+
+// --- Phase 2: Dashboard event handlers ---
+
+function handleDashboardStats(data) {
+    // Same logic as fetchAndUpdateSystemStats response handler
+    updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
+    updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
+    updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
+    updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
+    updateStatCard('uptime-card', data.uptime, 'Application runtime');
+    updateStatCard('memory-card', data.memory_usage, 'Current usage');
+}
+
+function handleDashboardActivity(data) {
+    // Same logic as fetchAndUpdateActivityFeed response handler
+    updateActivityFeed(data.activities || []);
+}
+
+function handleDashboardToast(activity) {
+    // Same logic as checkForActivityToasts response handler
+    let toastType = 'info';
+    if (activity.icon === '\u2705' || activity.title.includes('Complete')) {
+        toastType = 'success';
+    } else if (activity.icon === '\u274C' || activity.title.includes('Failed') || activity.title.includes('Error')) {
+        toastType = 'error';
+    } else if (activity.icon === '\uD83D\uDEAB' || activity.title.includes('Cancelled')) {
+        toastType = 'warning';
+    }
+    showToast(`${activity.title}: ${activity.subtitle}`, toastType);
+}
+
+function handleDashboardDbStats(stats) {
+    // Same logic as fetchAndUpdateDbStats response handler
+    updateDashboardStatCards(stats);
+    updateDbUpdaterCardInfo(stats);
+}
+
+function handleDashboardWishlistCount(data) {
+    const count = data.count || 0;
+    _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
+    // Update sidebar nav badge
+    const wlNavBadge = document.getElementById('wishlist-nav-badge');
+    if (wlNavBadge) {
+        wlNavBadge.textContent = count;
+        wlNavBadge.classList.toggle('hidden', count === 0);
+    }
+    const wishlistButton = document.getElementById('wishlist-button');
+    if (wishlistButton) {
+        if (count === 0) {
+            wishlistButton.classList.remove('wishlist-active');
+            wishlistButton.classList.add('wishlist-inactive');
+        } else {
+            wishlistButton.classList.remove('wishlist-inactive');
+            wishlistButton.classList.add('wishlist-active');
+        }
+    }
+    checkForAutoInitiatedWishlistProcess();
+}
+
+// ===============================
+// END WEBSOCKET CONNECTION MANAGER
+// ===============================
+
+// --- Service Integration Logo Constants ---
+const MUSICBRAINZ_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
+const DEEZER_LOGO_URL = 'https://cdn.brandfetch.io/idEUKgCNtu/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1758260798610';
+const SPOTIFY_LOGO_URL = 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png';
+const ITUNES_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/ITunes_logo.svg/960px-ITunes_logo.svg.png';
+const LASTFM_LOGO_URL = 'https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png';
+const GENIUS_LOGO_URL = 'https://images.genius.com/8ed669cadd956443e29c70361ec4f372.1000x1000x1.png';
+const TIDAL_LOGO_URL = 'https://www.svgrepo.com/show/519734/tidal.svg';
+const QOBUZ_LOGO_URL = 'https://www.svgrepo.com/show/504778/qobuz.svg';
+const DISCOGS_LOGO_URL = 'https://www.svgrepo.com/show/305957/discogs.svg';
+function getAudioDBLogoURL() { const el = document.querySelector('img.audiodb-logo'); return el ? el.src : null; }
+
+// --- Wishlist Modal Persistence State Management ---
+const WishlistModalState = {
+    // Track if wishlist modal was visible before page refresh
+    setVisible: function () {
+        localStorage.setItem('wishlist_modal_visible', 'true');
+        console.log('📱 [Modal State] Wishlist modal marked as visible in localStorage');
+    },
+
+    setHidden: function () {
+        localStorage.setItem('wishlist_modal_visible', 'false');
+        console.log('📱 [Modal State] Wishlist modal marked as hidden in localStorage');
+    },
+
+    wasVisible: function () {
+        const visible = localStorage.getItem('wishlist_modal_visible') === 'true';
+        console.log(`📱 [Modal State] Checking if wishlist modal was visible: ${visible}`);
+        return visible;
+    },
+
+    clear: function () {
+        localStorage.removeItem('wishlist_modal_visible');
+        console.log('📱 [Modal State] Cleared wishlist modal visibility state');
+    },
+
+    // Track if user manually closed the modal during auto-processing
+    setUserClosed: function () {
+        localStorage.setItem('wishlist_modal_user_closed', 'true');
+        console.log('📱 [Modal State] User manually closed wishlist modal during auto-processing');
+    },
+
+    clearUserClosed: function () {
+        localStorage.removeItem('wishlist_modal_user_closed');
+        console.log('📱 [Modal State] Cleared user closed state');
+    },
+
+    wasUserClosed: function () {
+        const closed = localStorage.getItem('wishlist_modal_user_closed') === 'true';
+        console.log(`📱 [Modal State] Checking if user closed modal: ${closed}`);
+        return closed;
+    }
+};
+
+// Sequential Sync Manager Class
+class SequentialSyncManager {
+    constructor() {
+        this.queue = [];
+        this.currentIndex = 0;
+        this.isRunning = false;
+        this.startTime = null;
+    }
+
+    start(playlistIds) {
+        if (this.isRunning) {
+            console.warn('Sequential sync already running');
+            return;
+        }
+
+        // Convert playlist IDs to ordered array (maintain display order)
+        this.queue = Array.from(playlistIds);
+        this.currentIndex = 0;
+        this.isRunning = true;
+        this.startTime = Date.now();
+
+        console.log(`🚀 Starting sequential sync for ${this.queue.length} playlists:`, this.queue);
+        this.updateUI();
+        this.syncNext();
+    }
+
+    async syncNext() {
+        if (this.currentIndex >= this.queue.length) {
+            this.complete();
+            return;
+        }
+
+        const playlistId = this.queue[this.currentIndex];
+        const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+        console.log(`🔄 Sequential sync: Processing playlist ${this.currentIndex + 1}/${this.queue.length}: ${playlist?.name || playlistId}`);
+
+        this.updateUI();
+
+        try {
+            // Use existing single sync function
+            await startPlaylistSync(playlistId);
+
+            // Wait for sync to complete by monitoring the poller
+            await this.waitForSyncCompletion(playlistId);
+
+        } catch (error) {
+            console.error(`❌ Sequential sync: Failed to sync playlist ${playlistId}:`, error);
+            showToast(`Failed to sync "${playlist?.name || playlistId}": ${error.message}`, 'error');
+        }
+
+        // Move to next playlist
+        this.currentIndex++;
+        setTimeout(() => this.syncNext(), 1000); // Small delay between syncs
+    }
+
+    async waitForSyncCompletion(playlistId) {
+        return new Promise((resolve) => {
+            // Monitor the existing sync poller for completion
+            const checkCompletion = () => {
+                if (!activeSyncPollers[playlistId]) {
+                    // Poller stopped = sync completed
+                    resolve();
+                    return;
+                }
+                // Check again in 1 second
+                setTimeout(checkCompletion, 1000);
+            };
+            checkCompletion();
+        });
+    }
+
+    complete() {
+        const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
+        const completedCount = this.queue.length;
+        console.log(`🏁 Sequential sync completed in ${duration}s`);
+
+        this.isRunning = false;
+        this.queue = [];
+        this.currentIndex = 0;
+        this.startTime = null;
+
+        // Re-enable playlist selection
+        disablePlaylistSelection(false);
+
+        this.updateUI();
+        updateRefreshButtonState(); // Refresh button state after completion
+        showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
+
+        // Hide sidebar after completion
+        hideSyncSidebar();
+    }
+
+    cancel() {
+        if (!this.isRunning) return;
+
+        console.log('🛑 Cancelling sequential sync');
+        this.isRunning = false;
+        this.queue = [];
+        this.currentIndex = 0;
+        this.startTime = null;
+
+        // Re-enable playlist selection
+        disablePlaylistSelection(false);
+
+        this.updateUI();
+        updateRefreshButtonState(); // Refresh button state after cancellation
+        showToast('Sequential sync cancelled', 'info');
+
+        // Hide sidebar after cancellation
+        hideSyncSidebar();
+    }
+
+    updateUI() {
+        const startSyncBtn = document.getElementById('start-sync-btn');
+        const selectionInfo = document.getElementById('selection-info');
+
+        if (!this.isRunning) {
+            // Reset to normal state
+            if (startSyncBtn) {
+                startSyncBtn.textContent = 'Start Sync';
+                startSyncBtn.disabled = selectedPlaylists.size === 0;
+            }
+            if (selectionInfo) {
+                const count = selectedPlaylists.size;
+                selectionInfo.textContent = count === 0
+                    ? 'Select playlists to sync'
+                    : `${count} playlist${count > 1 ? 's' : ''} selected`;
+            }
+        } else {
+            // Show sequential sync status
+            if (startSyncBtn) {
+                startSyncBtn.textContent = 'Cancel Sequential Sync';
+                startSyncBtn.disabled = false;
+            }
+            if (selectionInfo) {
+                const current = this.currentIndex + 1;
+                const total = this.queue.length;
+                const currentPlaylist = spotifyPlaylists.find(p => p.id === this.queue[this.currentIndex]);
+                selectionInfo.textContent = `Syncing ${current}/${total}: ${currentPlaylist?.name || 'Unknown'}`;
+            }
+        }
+    }
+}
+
+// API endpoints
+const API = {
+    status: '/status',
+    config: '/config',
+    settings: '/api/settings',
+    testConnection: '/api/test-connection',
+    testDashboardConnection: '/api/test-dashboard-connection',
+    playlists: '/api/playlists',
+    sync: '/api/sync',
+    search: '/api/search',
+    artists: '/api/artists',
+    activity: '/api/activity',
+    stream: {
+        start: '/api/stream/start',
+        status: '/api/stream/status',
+        toggle: '/api/stream/toggle',
+        stop: '/api/stream/stop'
+    }
+};
+
+// ===============================
+
diff --git a/webui/static/discover.js b/webui/static/discover.js
new file mode 100644
index 00000000..6763054f
--- /dev/null
+++ b/webui/static/discover.js
@@ -0,0 +1,8921 @@
+// == DISCOVER PAGE                          ==
+// ============================================
+
+let discoverHeroIndex = 0;
+let discoverHeroArtists = [];
+let discoverHeroInterval = null;
+let discoverPageInitialized = false;
+
+// Store discover playlist tracks for download/sync functionality
+let discoverReleaseRadarTracks = [];
+let discoverWeeklyTracks = [];
+let discoverRecentAlbums = [];
+let discoverSeasonalAlbums = [];
+let discoverSeasonalTracks = [];
+let currentSeasonKey = null;
+
+// Personalized playlists storage
+let personalizedRecentlyAdded = [];
+let personalizedTopTracks = [];
+let personalizedForgottenFavorites = [];
+let personalizedPopularPicks = [];
+let personalizedHiddenGems = [];
+let personalizedDailyMixes = [];
+let personalizedDiscoveryShuffle = [];
+let personalizedFamiliarFavorites = [];
+let buildPlaylistSelectedArtists = [];
+
+async function loadDiscoverPage() {
+    console.log('Loading discover page...');
+
+    // Load all sections
+    await Promise.all([
+        loadDiscoverHero(),
+        loadYourArtists(),
+        loadYourAlbums(),
+        loadSpotifyLibrarySection(),
+        loadDiscoverRecentReleases(),
+        loadSeasonalContent(),  // Seasonal discovery
+        loadPersonalizedRecentlyAdded(),  // NEW: Recently added from library
+        // loadPersonalizedDailyMixes(),  // NEW: Daily Mix playlists (HIDDEN)
+        loadDiscoverReleaseRadar(),
+        loadDiscoverWeekly(),
+        loadPersonalizedPopularPicks(),  // NEW: Popular picks from discovery pool
+        loadPersonalizedHiddenGems(),  // NEW: Hidden gems from discovery pool
+        loadPersonalizedTopTracks(),  // NEW: Your top tracks
+        loadPersonalizedForgottenFavorites(),  // NEW: Forgotten favorites
+        loadDiscoveryShuffle(),  // NEW: Discovery Shuffle
+        loadFamiliarFavorites(),  // NEW: Familiar Favorites
+        loadBecauseYouListenTo(),  // Personalized by listening stats
+        loadCacheUndiscoveredAlbums(),  // From metadata cache
+        loadCacheGenreNewReleases(),    // From metadata cache
+        loadCacheLabelExplorer(),       // From metadata cache
+        loadCacheDeepCuts(),            // From metadata cache
+        loadCacheGenreExplorer(),       // From metadata cache
+        initializeLastfmRadioSection(),  // Last.fm Radio section (gated on API key)
+        initializeListenBrainzTabs(),  // ListenBrainz playlists (tabbed)
+        loadDecadeBrowserTabs(),  // Time Machine (tabbed by decade)
+        loadGenreBrowserTabs(),  // Browse by Genre (tabbed by genre)
+        loadListenBrainzPlaylistsFromBackend(),  // Load ListenBrainz playlist states for persistence
+        loadDiscoveryBlacklist()  // Blocked artists list
+    ]);
+
+    // Check for active syncs after page load
+    checkForActiveDiscoverSyncs();
+}
+
+async function checkForActiveDiscoverSyncs() {
+    // Check if Fresh Tape sync is active
+    try {
+        const releaseRadarResponse = await fetch('/api/sync/status/discover_release_radar');
+        if (releaseRadarResponse.ok) {
+            const data = await releaseRadarResponse.json();
+            if (data.status === 'syncing' || data.status === 'starting') {
+                console.log('🔄 Resuming Fresh Tape sync polling after page refresh');
+
+                // Show status display
+                const statusDisplay = document.getElementById('release-radar-sync-status');
+                if (statusDisplay) {
+                    statusDisplay.style.display = 'block';
+                }
+
+                // Disable button
+                const syncButton = document.getElementById('release-radar-sync-btn');
+                if (syncButton) {
+                    syncButton.disabled = true;
+                    syncButton.style.opacity = '0.5';
+                    syncButton.style.cursor = 'not-allowed';
+                }
+
+                // Resume polling
+                startDiscoverSyncPolling('release_radar', 'discover_release_radar');
+            }
+        }
+    } catch (error) {
+        // Sync not active, ignore
+    }
+
+    // Check if The Archives sync is active
+    try {
+        const discoveryWeeklyResponse = await fetch('/api/sync/status/discover_discovery_weekly');
+        if (discoveryWeeklyResponse.ok) {
+            const data = await discoveryWeeklyResponse.json();
+            if (data.status === 'syncing' || data.status === 'starting') {
+                console.log('🔄 Resuming The Archives sync polling after page refresh');
+
+                // Show status display
+                const statusDisplay = document.getElementById('discovery-weekly-sync-status');
+                if (statusDisplay) {
+                    statusDisplay.style.display = 'block';
+                }
+
+                // Disable button
+                const syncButton = document.getElementById('discovery-weekly-sync-btn');
+                if (syncButton) {
+                    syncButton.disabled = true;
+                    syncButton.style.opacity = '0.5';
+                    syncButton.style.cursor = 'not-allowed';
+                }
+
+                // Resume polling
+                startDiscoverSyncPolling('discovery_weekly', 'discover_discovery_weekly');
+            }
+        }
+    } catch (error) {
+        // Sync not active, ignore
+    }
+
+    // Check if Seasonal Playlist sync is active
+    try {
+        const seasonalResponse = await fetch('/api/sync/status/discover_seasonal_playlist');
+        if (seasonalResponse.ok) {
+            const data = await seasonalResponse.json();
+            if (data.status === 'syncing' || data.status === 'starting') {
+                console.log('🔄 Resuming Seasonal Playlist sync polling after page refresh');
+
+                const statusDisplay = document.getElementById('seasonal-playlist-sync-status');
+                if (statusDisplay) {
+                    statusDisplay.style.display = 'block';
+                }
+
+                const syncButton = document.getElementById('seasonal-playlist-sync-btn');
+                if (syncButton) {
+                    syncButton.disabled = true;
+                    syncButton.style.opacity = '0.5';
+                    syncButton.style.cursor = 'not-allowed';
+                }
+
+                startDiscoverSyncPolling('seasonal_playlist', 'discover_seasonal_playlist');
+            }
+        }
+    } catch (error) {
+        // Sync not active, ignore
+    }
+}
+
+async function loadDiscoverHero() {
+    try {
+        const response = await fetch('/api/discover/hero');
+        if (!response.ok) {
+            console.error('Failed to fetch discover hero');
+            return;
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.artists || data.artists.length === 0) {
+            console.log('No hero artists available');
+            showDiscoverHeroEmpty();
+            return;
+        }
+
+        discoverHeroArtists = data.artists;
+        discoverHeroIndex = 0;
+
+        // Display first artist
+        displayDiscoverHeroArtist(discoverHeroArtists[0]);
+
+        // Start slideshow (change every 8 seconds)
+        if (discoverHeroInterval) {
+            clearInterval(discoverHeroInterval);
+        }
+        if (discoverHeroArtists.length > 1) {
+            discoverHeroInterval = setInterval(() => {
+                discoverHeroIndex = (discoverHeroIndex + 1) % discoverHeroArtists.length;
+                displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+            }, 8000);
+        }
+
+        // Check if all hero artists are already watched
+        checkAllHeroWatchlistStatus();
+
+    } catch (error) {
+        console.error('Error loading discover hero:', error);
+        showDiscoverHeroEmpty();
+    }
+}
+
+function displayDiscoverHeroArtist(artist) {
+    const titleEl = document.getElementById('discover-hero-title');
+    const subtitleEl = document.getElementById('discover-hero-subtitle');
+    const metaEl = document.getElementById('discover-hero-meta');
+    const imageEl = document.getElementById('discover-hero-image');
+    const bgEl = document.getElementById('discover-hero-bg');
+
+    if (titleEl) {
+        titleEl.textContent = artist.artist_name;
+    }
+
+    if (subtitleEl) {
+        // Show recommendation context based on occurrence count
+        let subtitle = '';
+        if (artist.occurrence_count > 1) {
+            subtitle = `Similar to ${artist.occurrence_count} artists in your watchlist`;
+        } else {
+            subtitle = 'Similar to an artist in your watchlist';
+        }
+        subtitleEl.textContent = subtitle;
+    }
+
+    // Build metadata section with popularity and genres
+    if (metaEl) {
+        let metaHTML = '<div class="discover-hero-meta-content">';
+
+        // Add popularity indicator
+        if (artist.popularity !== undefined && artist.popularity > 0) {
+            const popularityClass = artist.popularity >= 80 ? 'high' :
+                artist.popularity >= 50 ? 'medium' : 'low';
+            metaHTML += `
+                <div class="hero-meta-item hero-popularity ${popularityClass}">
+                    <span class="meta-icon">⭐</span>
+                    <span class="meta-value">${artist.popularity}/100</span>
+                    <span class="meta-label">Popularity</span>
+                </div>
+            `;
+        }
+
+        // Add genre tags
+        if (artist.genres && artist.genres.length > 0) {
+            metaHTML += '<div class="hero-meta-item hero-genres">';
+            artist.genres.slice(0, 3).forEach(genre => {
+                metaHTML += `<span class="genre-tag">${genre}</span>`;
+            });
+            metaHTML += '</div>';
+        }
+
+        metaHTML += '</div>';
+        metaEl.innerHTML = metaHTML;
+    }
+
+    if (imageEl && artist.image_url) {
+        imageEl.innerHTML = `<img src="${artist.image_url}" alt="${artist.artist_name}">`;
+    } else if (imageEl) {
+        imageEl.innerHTML = '<div class="hero-image-placeholder">🎧</div>';
+    }
+
+    if (bgEl && artist.image_url) {
+        bgEl.style.backgroundImage = `url('${artist.image_url}')`;
+        bgEl.style.backgroundSize = 'cover';
+        bgEl.style.backgroundPosition = 'center';
+    }
+
+    // Store artist ID for both buttons and update watchlist state
+    // Use artist_id which is set by the backend to the appropriate ID for the active source
+    const addBtn = document.getElementById('discover-hero-add');
+    const discographyBtn = document.getElementById('discover-hero-discography');
+    const artistId = artist.artist_id || artist.spotify_artist_id || artist.itunes_artist_id;
+
+    if (addBtn && artistId) {
+        addBtn.setAttribute('data-artist-id', artistId);
+        addBtn.setAttribute('data-artist-name', artist.artist_name);
+        // Also store both IDs for cross-source operations
+        if (artist.spotify_artist_id) addBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
+        if (artist.itunes_artist_id) addBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
+
+        // Check if this artist is already in watchlist and update button appearance
+        checkAndUpdateDiscoverHeroWatchlistButton(artistId);
+    }
+
+    if (discographyBtn && artistId) {
+        discographyBtn.setAttribute('data-artist-id', artistId);
+        discographyBtn.setAttribute('data-artist-name', artist.artist_name);
+        // Also store both IDs for cross-source operations
+        if (artist.spotify_artist_id) discographyBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
+        if (artist.itunes_artist_id) discographyBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
+    }
+
+    // Update slideshow indicators
+    updateDiscoverHeroIndicators();
+}
+
+async function checkAndUpdateDiscoverHeroWatchlistButton(artistId) {
+    try {
+        const response = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const data = await response.json();
+        if (!data.success) return;
+
+        const addBtn = document.getElementById('discover-hero-add');
+        if (!addBtn) return;
+
+        const icon = addBtn.querySelector('.watchlist-icon');
+        const text = addBtn.querySelector('.watchlist-text');
+
+        if (data.is_watching) {
+            // Artist is in watchlist
+            if (icon) icon.textContent = '👁️';
+            if (text) text.textContent = 'Watching...';
+            addBtn.classList.add('watching');
+        } else {
+            // Artist not in watchlist
+            if (icon) icon.textContent = '👁️';
+            if (text) text.textContent = 'Add to Watchlist';
+            addBtn.classList.remove('watching');
+        }
+    } catch (error) {
+        console.error('Error checking watchlist status for hero:', error);
+    }
+}
+
+function toggleDiscoverHeroWatchlist(event) {
+    event.stopPropagation();
+
+    const button = document.getElementById('discover-hero-add');
+    if (!button) return;
+
+    const artistId = button.getAttribute('data-artist-id');
+    const artistName = button.getAttribute('data-artist-name');
+
+    if (!artistId || !artistName) {
+        console.error('No artist data found on discover hero button');
+        return;
+    }
+
+    // Call the existing toggleWatchlist function
+    toggleWatchlist(event, artistId, artistName);
+}
+
+async function watchAllHeroArtists(btn) {
+    if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
+    if (btn.classList.contains('all-watched')) return;
+
+    const textEl = btn.querySelector('.watch-all-text');
+    const originalText = textEl ? textEl.textContent : '';
+
+    // Loading state
+    btn.disabled = true;
+    if (textEl) textEl.textContent = 'Adding...';
+
+    try {
+        const artists = discoverHeroArtists.map(a => ({
+            artist_id: a.artist_id,
+            artist_name: a.artist_name
+        }));
+
+        const response = await fetch('/api/watchlist/add-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artists })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            if (textEl) textEl.textContent = 'All Watched';
+            btn.classList.add('all-watched');
+            btn.disabled = true;
+
+            // Sync the per-slide watchlist button for current artist
+            const currentArtist = discoverHeroArtists[discoverHeroIndex];
+            if (currentArtist) {
+                checkAndUpdateDiscoverHeroWatchlistButton(currentArtist.artist_id);
+            }
+
+            // Update watchlist count badge
+            if (typeof updateWatchlistButtonCount === 'function') {
+                updateWatchlistButtonCount();
+            }
+        } else {
+            if (textEl) textEl.textContent = originalText;
+            btn.disabled = false;
+        }
+    } catch (error) {
+        console.error('Error watching all hero artists:', error);
+        if (textEl) textEl.textContent = originalText;
+        btn.disabled = false;
+    }
+}
+
+// Cache for recommended artists data so reopening is instant
+let _recommendedArtistsCache = null;
+
+async function openRecommendedArtistsModal() {
+    let modal = document.getElementById('recommended-artists-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'recommended-artists-modal';
+        modal.className = 'modal-overlay';
+        document.body.appendChild(modal);
+
+        modal.addEventListener('click', function (e) {
+            if (e.target === modal) closeRecommendedArtistsModal();
+        });
+    }
+
+    // If cached, render instantly and refresh watchlist statuses
+    if (_recommendedArtistsCache) {
+        modal.style.display = 'flex';
+        renderRecommendedArtistsModal(modal, _recommendedArtistsCache);
+        checkRecommendedWatchlistStatuses(_recommendedArtistsCache);
+        return;
+    }
+
+    // Show loading
+    modal.innerHTML = `
+        <div class="modal-container playlist-modal recommended-modal">
+            <div class="playlist-modal-header">
+                <div class="playlist-header-content" style="width: 100%;">
+                    <h2>Recommended Artists</h2>
+                    <div class="playlist-quick-info">
+                        <span class="playlist-track-count">Loading...</span>
+                    </div>
+                </div>
+                <span class="playlist-modal-close" onclick="closeRecommendedArtistsModal()">&times;</span>
+            </div>
+            <div class="playlist-modal-body">
+                <div class="recommended-loading">Loading recommended artists...</div>
+            </div>
+        </div>
+    `;
+    modal.style.display = 'flex';
+
+    try {
+        // Phase 1: Fetch basic data (instant — no API enrichment)
+        const response = await fetch('/api/discover/similar-artists');
+        const data = await response.json();
+
+        if (!data.success || !data.artists || data.artists.length === 0) {
+            modal.querySelector('.playlist-modal-body').innerHTML = `
+                <div class="recommended-empty-state">
+                    No recommended artists yet.<br>
+                    Run a watchlist scan to generate recommendations.
+                </div>
+            `;
+            modal.querySelector('.playlist-track-count').textContent = '0 artists';
+            return;
+        }
+
+        // Render cards immediately with fallback images
+        _recommendedArtistsCache = data.artists;
+        renderRecommendedArtistsModal(modal, data.artists);
+
+        // Phase 2: Enrich with images/genres progressively in batches of 50
+        // Skip artists that already have cached metadata from the initial response
+        const source = data.source || 'spotify';
+        const idKey = source === 'spotify' ? 'spotify_artist_id' : source === 'deezer' ? 'deezer_artist_id' : 'itunes_artist_id';
+        const allIds = data.artists
+            .filter(a => !a.image_url)  // Only enrich artists without cached images
+            .map(a => a[idKey]).filter(Boolean);
+
+        for (let i = 0; i < allIds.length; i += 50) {
+            const batchIds = allIds.slice(i, i + 50);
+            try {
+                const enrichResp = await fetch('/api/discover/similar-artists/enrich', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ artist_ids: batchIds, source })
+                });
+                const enrichData = await enrichResp.json();
+                if (enrichData.success && enrichData.artists) {
+                    // Update cards and cache as each batch arrives
+                    for (const [aid, info] of Object.entries(enrichData.artists)) {
+                        // Update the card in DOM
+                        const card = modal.querySelector(`.recommended-artist-card[data-artist-id="${aid}"]`);
+                        if (card && info.image_url) {
+                            const imgContainer = card.querySelector('.recommended-card-image');
+                            if (imgContainer) {
+                                imgContainer.innerHTML = `<img src="${info.image_url}" alt="" loading="lazy"
+                                    onerror="this.parentElement.innerHTML='<div class=\\'recommended-card-image-fallback\\'>🎤</div>';">`;
+                            }
+                        }
+                        if (card && info.genres && info.genres.length > 0) {
+                            const genresContainer = card.querySelector('.recommended-card-genres');
+                            if (genresContainer) {
+                                genresContainer.innerHTML = info.genres.map(g =>
+                                    `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
+                                ).join('');
+                            } else {
+                                const infoDiv = card.querySelector('.recommended-card-info');
+                                if (infoDiv) {
+                                    const genreDiv = document.createElement('div');
+                                    genreDiv.className = 'recommended-card-genres';
+                                    genreDiv.innerHTML = info.genres.map(g =>
+                                        `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
+                                    ).join('');
+                                    infoDiv.appendChild(genreDiv);
+                                }
+                            }
+                        }
+
+                        // Update cache
+                        const cached = _recommendedArtistsCache.find(a => a.artist_id === aid || a.spotify_artist_id === aid || a.itunes_artist_id === aid);
+                        if (cached) {
+                            if (info.image_url) cached.image_url = info.image_url;
+                            if (info.genres) cached.genres = info.genres;
+                            if (info.artist_name) cached.artist_name = info.artist_name;
+                        }
+                    }
+                }
+            } catch (enrichErr) {
+                console.error('Error enriching batch:', enrichErr);
+            }
+        }
+
+        // Phase 3: Check watchlist statuses
+        checkRecommendedWatchlistStatuses(data.artists);
+
+    } catch (error) {
+        console.error('Error loading recommended artists:', error);
+        modal.querySelector('.playlist-modal-body').innerHTML = `
+            <div class="recommended-empty-state">Error loading recommended artists.</div>
+        `;
+    }
+}
+
+function renderRecommendedArtistsModal(modal, artists) {
+    modal.innerHTML = `
+        <div class="modal-container playlist-modal recommended-modal">
+            <div class="playlist-modal-header">
+                <div class="playlist-header-content" style="width: 100%;">
+                    <h2>Recommended Artists</h2>
+                    <div class="playlist-quick-info">
+                        <span class="playlist-track-count">${artists.length} artist${artists.length !== 1 ? 's' : ''}</span>
+                    </div>
+                </div>
+                <span class="playlist-modal-close" onclick="closeRecommendedArtistsModal()">&times;</span>
+            </div>
+            <div class="playlist-modal-body">
+                <div class="recommended-actions-bar">
+                    <div class="recommended-search-container">
+                        <input type="text"
+                               class="recommended-search-input"
+                               id="recommended-search-input"
+                               placeholder="Search recommended artists..."
+                               oninput="filterRecommendedArtists()">
+                    </div>
+                    <button class="recommended-add-all-btn" id="recommended-add-all-btn"
+                            onclick="addAllRecommendedToWatchlist(this)">
+                        Add All to Watchlist
+                    </button>
+                </div>
+                <div class="recommended-artists-grid" id="recommended-artists-grid">
+                    ${artists.map(artist => {
+        const genreTags = (artist.genres || []).slice(0, 3).map(g =>
+            `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
+        ).join('');
+        const similarText = artist.occurrence_count > 1
+            ? `Similar to ${artist.occurrence_count} in your watchlist`
+            : 'Similar to an artist in your watchlist';
+        return `
+                            <div class="recommended-artist-card"
+                                 data-artist-name="${escapeHtml(artist.artist_name).toLowerCase()}"
+                                 data-artist-id="${artist.artist_id}">
+                                <button class="recommended-card-watchlist-btn"
+                                        data-artist-id="${artist.artist_id}"
+                                        data-artist-name="${escapeHtml(artist.artist_name)}">
+                                    Add to Watchlist
+                                </button>
+                                <div class="recommended-card-image">
+                                    ${artist.image_url ? `
+                                        <img src="${artist.image_url}"
+                                             alt="${escapeHtml(artist.artist_name)}"
+                                             loading="lazy"
+                                             onerror="this.parentElement.innerHTML='<div class=\\'recommended-card-image-fallback\\'>🎤</div>';">
+                                    ` : `
+                                        <div class="recommended-card-image-fallback">🎤</div>
+                                    `}
+                                </div>
+                                <div class="recommended-card-info">
+                                    <span class="recommended-card-name">${escapeHtml(artist.artist_name)}</span>
+                                    <span class="recommended-card-similarity">${similarText}</span>
+                                    <div class="recommended-card-genres">${genreTags}</div>
+                                </div>
+                            </div>
+                        `;
+    }).join('')}
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Event delegation for card clicks and watchlist buttons
+    const grid = modal.querySelector('#recommended-artists-grid');
+    if (grid) {
+        grid.addEventListener('click', function (e) {
+            const watchlistBtn = e.target.closest('.recommended-card-watchlist-btn');
+            if (watchlistBtn) {
+                e.stopPropagation();
+                toggleRecommendedWatchlist(watchlistBtn);
+                return;
+            }
+
+            const card = e.target.closest('.recommended-artist-card');
+            if (card) {
+                const artistId = card.getAttribute('data-artist-id');
+                const nameEl = card.querySelector('.recommended-card-name');
+                const artistName = nameEl ? nameEl.textContent : '';
+                viewRecommendedArtistDiscography(artistId, artistName);
+            }
+        });
+    }
+}
+
+async function addAllRecommendedToWatchlist(btn) {
+    if (!_recommendedArtistsCache || _recommendedArtistsCache.length === 0) return;
+    if (btn.classList.contains('all-added')) return;
+
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = 'Adding...';
+
+    try {
+        const artists = _recommendedArtistsCache.map(a => ({
+            artist_id: a.artist_id,
+            artist_name: a.artist_name
+        }));
+
+        const resp = await fetch('/api/watchlist/add-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artists })
+        });
+        const data = await resp.json();
+
+        if (data.success) {
+            btn.textContent = `All Added (${data.added} new)`;
+            btn.classList.add('all-added');
+            btn.disabled = true;
+
+            // Update all watchlist buttons in the modal to "Watching"
+            document.querySelectorAll('.recommended-card-watchlist-btn').forEach(wBtn => {
+                wBtn.classList.add('watching');
+                wBtn.textContent = 'Watching';
+            });
+
+            if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
+        } else {
+            btn.textContent = originalText;
+            btn.disabled = false;
+        }
+    } catch (error) {
+        console.error('Error adding all recommended to watchlist:', error);
+        btn.textContent = originalText;
+        btn.disabled = false;
+    }
+}
+
+function closeRecommendedArtistsModal() {
+    const modal = document.getElementById('recommended-artists-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+function filterRecommendedArtists() {
+    const query = (document.getElementById('recommended-search-input')?.value || '').toLowerCase();
+    const cards = document.querySelectorAll('.recommended-artist-card');
+    cards.forEach(card => {
+        const name = card.getAttribute('data-artist-name') || '';
+        card.style.display = name.includes(query) ? '' : 'none';
+    });
+}
+
+async function toggleRecommendedWatchlist(btn) {
+    const artistId = btn.getAttribute('data-artist-id');
+    const artistName = btn.getAttribute('data-artist-name');
+    if (!artistId || !artistName) return;
+
+    btn.disabled = true;
+    const wasWatching = btn.classList.contains('watching');
+
+    try {
+        if (wasWatching) {
+            const resp = await fetch('/api/watchlist/remove', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: artistId })
+            });
+            const data = await resp.json();
+            if (data.success) {
+                btn.classList.remove('watching');
+                btn.textContent = 'Add to Watchlist';
+            }
+        } else {
+            const resp = await fetch('/api/watchlist/add', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: artistId, artist_name: artistName })
+            });
+            const data = await resp.json();
+            if (data.success) {
+                btn.classList.add('watching');
+                btn.textContent = 'Watching';
+            }
+        }
+        if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
+    } catch (error) {
+        console.error('Error toggling recommended watchlist:', error);
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+async function checkRecommendedWatchlistStatuses(artists) {
+    try {
+        const artistIds = artists.map(a => a.artist_id).filter(Boolean);
+        if (!artistIds.length) return;
+
+        const resp = await fetch('/api/watchlist/check-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_ids: artistIds })
+        });
+        const data = await resp.json();
+        if (data.success && data.results) {
+            for (const [aid, isWatching] of Object.entries(data.results)) {
+                if (isWatching) {
+                    const btn = document.querySelector(`.recommended-card-watchlist-btn[data-artist-id="${aid}"]`);
+                    if (btn) {
+                        btn.classList.add('watching');
+                        btn.textContent = 'Watching';
+                    }
+                }
+            }
+        }
+    } catch (e) {
+        // Non-critical
+    }
+}
+
+async function viewRecommendedArtistDiscography(artistId, artistName) {
+    closeRecommendedArtistsModal();
+
+    const artist = {
+        id: artistId,
+        name: artistName
+    };
+
+    // Use same navigation pattern as hero slider
+    navigateToPage('artists');
+    await new Promise(resolve => setTimeout(resolve, 100));
+    await selectArtistForDetail(artist);
+}
+
+async function checkAllHeroWatchlistStatus() {
+    const btn = document.getElementById('discover-hero-watch-all');
+    if (!btn || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+    try {
+        let allWatched = true;
+        for (const artist of discoverHeroArtists) {
+            const response = await fetch('/api/watchlist/check', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: artist.artist_id })
+            });
+            const data = await response.json();
+            if (!data.success || !data.is_watching) {
+                allWatched = false;
+                break;
+            }
+        }
+
+        const textEl = btn.querySelector('.watch-all-text');
+        if (allWatched) {
+            if (textEl) textEl.textContent = 'All Watched';
+            btn.classList.add('all-watched');
+            btn.disabled = true;
+        } else {
+            if (textEl) textEl.textContent = 'Watch All';
+            btn.classList.remove('all-watched');
+            btn.disabled = false;
+        }
+    } catch (error) {
+        console.error('Error checking hero watchlist status:', error);
+    }
+}
+
+function navigateDiscoverHero(direction) {
+    if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+    // Update index with wrapping
+    discoverHeroIndex = (discoverHeroIndex + direction + discoverHeroArtists.length) % discoverHeroArtists.length;
+
+    // Display the artist
+    displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+
+    // Update indicators
+    updateDiscoverHeroIndicators();
+}
+
+function updateDiscoverHeroIndicators() {
+    const indicatorsContainer = document.getElementById('discover-hero-indicators');
+    if (!indicatorsContainer || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
+
+    // Create indicator dots
+    indicatorsContainer.innerHTML = discoverHeroArtists.map((_, index) => `
+        <button class="hero-indicator ${index === discoverHeroIndex ? 'active' : ''}"
+                onclick="jumpToDiscoverHeroSlide(${index})"
+                aria-label="Go to slide ${index + 1}"></button>
+    `).join('');
+}
+
+function jumpToDiscoverHeroSlide(index) {
+    if (!discoverHeroArtists || index < 0 || index >= discoverHeroArtists.length) return;
+
+    discoverHeroIndex = index;
+    displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
+    updateDiscoverHeroIndicators();
+}
+
+async function viewDiscoverHeroDiscography() {
+    const button = document.getElementById('discover-hero-discography');
+    if (!button) return;
+
+    const artistId = button.getAttribute('data-artist-id');
+    const artistName = button.getAttribute('data-artist-name');
+
+    if (!artistId || !artistName) {
+        console.error('No artist data found for discography view');
+        return;
+    }
+
+    // Create artist object matching the expected format
+    const artist = {
+        id: artistId,
+        name: artistName,
+        image_url: discoverHeroArtists[discoverHeroIndex]?.image_url || '',
+        genres: discoverHeroArtists[discoverHeroIndex]?.genres || [],
+        popularity: discoverHeroArtists[discoverHeroIndex]?.popularity || 0
+    };
+
+    console.log(`🎵 Navigating to artist detail for: ${artistName}`);
+
+    // Navigate to Artists page
+    navigateToPage('artists');
+
+    // Small delay to let the page load
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Load the artist details
+    await selectArtistForDetail(artist);
+}
+
+function showDiscoverHeroEmpty() {
+    const titleEl = document.getElementById('discover-hero-title');
+    const subtitleEl = document.getElementById('discover-hero-subtitle');
+
+    if (titleEl) titleEl.textContent = 'No Recommendations Yet';
+    if (subtitleEl) subtitleEl.textContent = 'Run a watchlist scan to generate personalized recommendations';
+}
+
+async function loadDiscoverRecentReleases() {
+    try {
+        const carousel = document.getElementById('recent-releases-carousel');
+        if (!carousel) return;
+
+        carousel.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading recent releases...</p></div>';
+
+        const response = await fetch('/api/discover/recent-releases');
+        if (!response.ok) {
+            throw new Error('Failed to fetch recent releases');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.albums || data.albums.length === 0) {
+            carousel.innerHTML = '<div class="discover-empty"><p>No recent releases found</p></div>';
+            return;
+        }
+
+        // Store albums for download functionality
+        discoverRecentAlbums = data.albums;
+
+        // Build carousel HTML
+        let html = '';
+        data.albums.forEach((album, index) => {
+            const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
+            html += `
+                <div class="discover-card" onclick="openDownloadModalForRecentAlbum(${index})" style="cursor: pointer;">
+                    <div class="discover-card-image">
+                        <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
+                    </div>
+                    <div class="discover-card-info">
+                        <h4 class="discover-card-title">${album.album_name}</h4>
+                        <p class="discover-card-subtitle">${album.artist_name}</p>
+                        <p class="discover-card-meta">${album.release_date}</p>
+                    </div>
+                </div>
+            `;
+        });
+
+        carousel.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading recent releases:', error);
+        const carousel = document.getElementById('recent-releases-carousel');
+        if (carousel) {
+            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load recent releases</p></div>';
+        }
+    }
+}
+
+// ===============================
+// ===============================
+// YOUR ALBUMS SECTION
+// ===============================
+
+let yourAlbums = [];
+let yourAlbumsPage = 1;
+let yourAlbumsTotal = 0;
+const YOUR_ALBUMS_PAGE_SIZE = 48;
+let _yourAlbumsSearchTimeout = null;
+
+function debouncedYourAlbumsSearch() {
+    clearTimeout(_yourAlbumsSearchTimeout);
+    _yourAlbumsSearchTimeout = setTimeout(() => {
+        yourAlbumsPage = 1;
+        loadYourAlbumsGrid();
+    }, 400);
+}
+
+async function loadYourAlbums() {
+    const section = document.getElementById('your-albums-section');
+    if (!section) return;
+    try {
+        const resp = await fetch('/api/discover/your-albums?page=1&per_page=48&status=all');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success) return;
+
+        const totalCount = (data.stats && data.stats.total) || 0;
+        if (totalCount === 0 && !data.stale) return; // Nothing to show yet
+
+        section.style.display = '';
+        yourAlbums = data.albums || [];
+        yourAlbumsTotal = data.total || 0;
+        yourAlbumsPage = 1;
+
+        const subtitle = document.getElementById('your-albums-subtitle');
+        if (subtitle && data.stats) {
+            const s = data.stats;
+            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
+        }
+
+        const filters = document.getElementById('your-albums-filters');
+        if (filters && totalCount > 0) filters.style.display = '';
+
+        const downloadBtn = document.getElementById('your-albums-download-btn');
+        if (downloadBtn && data.stats && data.stats.missing > 0) downloadBtn.style.display = '';
+
+        _renderYourAlbumsGrid(yourAlbums);
+        _renderYourAlbumsPagination(yourAlbumsTotal, yourAlbumsPage);
+
+        if (data.stale && totalCount === 0) {
+            const grid = document.getElementById('your-albums-grid');
+            if (grid) grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Fetching your albums from connected services...</p></div>';
+            _pollYourAlbums();
+        }
+    } catch (e) {
+        console.error('Error loading your albums:', e);
+    }
+}
+
+function _pollYourAlbums() {
+    let attempts = 0;
+    const poll = setInterval(async () => {
+        attempts++;
+        if (attempts > 12) { clearInterval(poll); return; }
+        try {
+            const resp = await fetch('/api/discover/your-albums?page=1&per_page=48&status=all');
+            if (!resp.ok) return;
+            const data = await resp.json();
+            if (!data.success) return;
+            const total = (data.stats && data.stats.total) || 0;
+            if (total > 0) {
+                clearInterval(poll);
+                loadYourAlbums();
+            }
+        } catch (e) { }
+    }, 5000);
+}
+
+async function loadYourAlbumsGrid() {
+    const grid = document.getElementById('your-albums-grid');
+    if (!grid) return;
+    grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading...</p></div>';
+    try {
+        const search = (document.getElementById('your-albums-search')?.value || '').trim();
+        const status = document.getElementById('your-albums-status-filter')?.value || 'all';
+        const sort = document.getElementById('your-albums-sort')?.value || 'artist_name';
+        const params = new URLSearchParams({ page: yourAlbumsPage, per_page: YOUR_ALBUMS_PAGE_SIZE, sort, status });
+        if (search) params.set('search', search);
+        const resp = await fetch(`/api/discover/your-albums?${params}`);
+        const data = await resp.json();
+        if (!data.success) throw new Error(data.error);
+        yourAlbums = data.albums || [];
+        yourAlbumsTotal = data.total || 0;
+        const subtitle = document.getElementById('your-albums-subtitle');
+        if (subtitle && data.stats) {
+            const s = data.stats;
+            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
+        }
+        _renderYourAlbumsGrid(yourAlbums);
+        _renderYourAlbumsPagination(yourAlbumsTotal, yourAlbumsPage);
+    } catch (e) {
+        console.error('Error loading your albums grid:', e);
+        grid.innerHTML = '<div class="spotify-library-empty"><p>Failed to load albums</p></div>';
+    }
+}
+
+function _renderYourAlbumsGrid(albums) {
+    const grid = document.getElementById('your-albums-grid');
+    if (!grid) return;
+    if (!albums || albums.length === 0) {
+        grid.innerHTML = '<div class="spotify-library-empty"><p>No albums found</p></div>';
+        return;
+    }
+    let html = '';
+    albums.forEach((album, index) => {
+        const coverUrl = album.image_url || '/static/placeholder-album.png';
+        const year = album.release_date ? album.release_date.substring(0, 4) : '';
+        const badgeClass = album.in_library ? 'owned' : 'missing';
+        const badgeIcon = album.in_library ? '\u2713' : '\u2193';
+        const trackInfo = album.total_tracks ? `${album.total_tracks} tracks` : '';
+        const meta = [year, trackInfo].filter(Boolean).join(' \u00B7 ');
+        const sources = (album.source_services || []).join(', ');
+        html += `
+            <div class="spotify-library-card" onclick="openYourAlbumDownload(${index})" title="${escapeHtml(album.album_name)} \u2014 ${escapeHtml(album.artist_name)}">
+                <div class="spotify-library-card-img">
+                    <img src="${coverUrl}" alt="${escapeHtml(album.album_name)}" loading="lazy">
+                    <div class="spotify-library-card-badge ${badgeClass}">${badgeIcon}</div>
+                </div>
+                <div class="spotify-library-card-info">
+                    <p class="spotify-library-card-title">${escapeHtml(album.album_name)}</p>
+                    <p class="spotify-library-card-artist">${escapeHtml(album.artist_name)}</p>
+                    <p class="spotify-library-card-meta">${escapeHtml(meta)}</p>
+                </div>
+            </div>`;
+    });
+    grid.innerHTML = html;
+}
+
+function _renderYourAlbumsPagination(total, page) {
+    const container = document.getElementById('your-albums-pagination');
+    if (!container) return;
+    if (total <= YOUR_ALBUMS_PAGE_SIZE) { container.style.display = 'none'; return; }
+    container.style.display = '';
+    const totalPages = Math.ceil(total / YOUR_ALBUMS_PAGE_SIZE);
+    const start = (page - 1) * YOUR_ALBUMS_PAGE_SIZE + 1;
+    const end = Math.min(page * YOUR_ALBUMS_PAGE_SIZE, total);
+    container.innerHTML = `
+        <button class="spotify-library-page-btn" onclick="_yourAlbumsPrevPage()" ${page <= 1 ? 'disabled' : ''}>&larr; Previous</button>
+        <span class="spotify-library-page-info">${start}\u2013${end} of ${total}</span>
+        <button class="spotify-library-page-btn" onclick="_yourAlbumsNextPage()" ${page >= totalPages ? 'disabled' : ''}>Next &rarr;</button>
+    `;
+}
+
+function _yourAlbumsPrevPage() {
+    if (yourAlbumsPage > 1) { yourAlbumsPage--; loadYourAlbumsGrid(); }
+}
+function _yourAlbumsNextPage() {
+    const totalPages = Math.ceil(yourAlbumsTotal / YOUR_ALBUMS_PAGE_SIZE);
+    if (yourAlbumsPage < totalPages) { yourAlbumsPage++; loadYourAlbumsGrid(); }
+}
+
+async function openYourAlbumDownload(index) {
+    const album = yourAlbums[index];
+    if (!album) { showToast('Album data not found', 'error'); return; }
+    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+    try {
+        // Prefer Spotify ID, fall back to Deezer, then search by name
+        let albumData = null;
+        const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+        if (album.spotify_album_id) {
+            const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
+            if (r.ok) albumData = await r.json();
+        }
+        if (!albumData && album.deezer_album_id) {
+            const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
+            if (r.ok) albumData = await r.json();
+        }
+        if (!albumData) {
+            // Last resort — search by name
+            const r = await fetch(`/api/discover/album/spotify/search?${nameParams}`);
+            if (r.ok) albumData = await r.json();
+        }
+        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+            throw new Error('No tracks found for this album');
+        }
+        const tracks = albumData.tracks.map(track => {
+            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+            if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+            return {
+                id: track.id, name: track.name, artists,
+                album: {
+                    id: albumData.id, name: albumData.name,
+                    album_type: albumData.album_type || 'album',
+                    total_tracks: albumData.total_tracks || 0,
+                    release_date: albumData.release_date || '',
+                    images: albumData.images || []
+                },
+                duration_ms: track.duration_ms || 0,
+                track_number: track.track_number || 0
+            };
+        });
+        const virtualId = `discover_album_${album.spotify_album_id || album.deezer_album_id || album.tidal_album_id || index}`;
+        const albumObj = {
+            id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+            total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+            images: albumData.images || [], artists: [{ name: album.artist_name }]
+        };
+        const artistObj = { id: null, name: album.artist_name };
+        await openDownloadMissingModalForArtistAlbum(virtualId, albumData.name, tracks, albumObj, artistObj, false);
+        hideLoadingOverlay();
+    } catch (e) {
+        console.error('Error opening your album download:', e);
+        showToast(`Failed to load album: ${e.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+async function refreshYourAlbums() {
+    const btn = document.getElementById('your-albums-refresh-btn');
+    if (btn) btn.disabled = true;
+    const subtitle = document.getElementById('your-albums-subtitle');
+    if (subtitle) subtitle.textContent = 'Refreshing from connected services...';
+    try {
+        await fetch('/api/discover/your-albums/refresh?clear=true', { method: 'POST' });
+        showToast('Refresh started — checking for new albums...', 'info');
+        const poll = setInterval(async () => {
+            try {
+                const resp = await fetch('/api/discover/your-albums?page=1&per_page=48');
+                const data = await resp.json();
+                if (data.success && data.stats && data.stats.total > 0) {
+                    clearInterval(poll);
+                    loadYourAlbums();
+                    if (btn) btn.disabled = false;
+                }
+            } catch (e) { }
+        }, 4000);
+        setTimeout(() => { clearInterval(poll); if (btn) btn.disabled = false; }, 60000);
+    } catch (e) {
+        showToast('Failed to start refresh', 'error');
+        if (btn) btn.disabled = false;
+    }
+}
+
+async function openYourAlbumsSourcesModal() {
+    const existing = document.getElementById('ya-albums-sources-modal-overlay');
+    if (existing) existing.remove();
+
+    let enabled = ['spotify', 'tidal', 'deezer'];
+    let connected = [];
+    try {
+        const resp = await fetch('/api/discover/your-albums/sources');
+        if (resp.ok) {
+            const data = await resp.json();
+            if (data.enabled) enabled = data.enabled;
+            if (data.connected) connected = data.connected;
+        }
+    } catch (e) { }
+
+    const sourceInfo = [
+        { id: 'spotify', label: 'Spotify', icon: '\uD83C\uDFB5' },
+        { id: 'tidal', label: 'Tidal', icon: '\uD83C\uDF0A' },
+        { id: 'deezer', label: 'Deezer', icon: '\uD83C\uDFB6' },
+    ];
+    const state = {};
+    sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
+
+    const overlay = document.createElement('div');
+    overlay.id = 'ya-albums-sources-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    const rows = sourceInfo.map(s => {
+        const isConnected = connected.includes(s.id);
+        const isOn = state[s.id];
+        return `
+            <div class="ya-source-row${isConnected ? '' : ' disconnected'}" data-yaa-source="${s.id}" onclick="_yaaSourceRowClick('${s.id}')">
+                <div class="ya-source-row-left">
+                    <span style="font-size:18px">${s.icon}</span>
+                    <div>
+                        <div class="ya-source-name">${s.label}</div>
+                        <div class="ya-source-status">${isConnected ? 'Connected' : 'Not connected'}</div>
+                    </div>
+                </div>
+                <button class="ya-source-toggle${isOn ? ' on' : ''}" id="yaa-toggle-${s.id}" onclick="event.stopPropagation();_yaaSourceToggle('${s.id}')"></button>
+            </div>`;
+    }).join('');
+
+    overlay.innerHTML = `
+        <div class="ya-sources-modal">
+            <h2>Your Albums Sources</h2>
+            <p class="ya-sources-desc">Choose which connected services contribute albums to this section.</p>
+            <div class="ya-sources-list">${rows}</div>
+            <div class="ya-sources-footer">
+                <button class="ya-sources-cancel-btn" onclick="document.getElementById('ya-albums-sources-modal-overlay').remove()">Cancel</button>
+                <button class="ya-sources-save-btn" onclick="_yaaSourcesSave()">Save</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+    window._yaaSourcesState = state;
+}
+
+function _yaaSourceRowClick(id) {
+    const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
+    if (row && row.classList.contains('disconnected')) return;
+    _yaaSourceToggle(id);
+}
+function _yaaSourceToggle(id) {
+    const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
+    if (row && row.classList.contains('disconnected')) return;
+    window._yaaSourcesState[id] = !window._yaaSourcesState[id];
+    const btn = document.getElementById(`yaa-toggle-${id}`);
+    if (btn) btn.classList.toggle('on', window._yaaSourcesState[id]);
+}
+async function _yaaSourcesSave() {
+    const enabledArr = Object.entries(window._yaaSourcesState).filter(([, v]) => v).map(([k]) => k);
+    if (enabledArr.length === 0) { showToast('Select at least one source', 'error'); return; }
+    try {
+        const resp = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ discover: { your_albums_sources: enabledArr.join(',') } })
+        });
+        if (resp.ok) {
+            document.getElementById('ya-albums-sources-modal-overlay')?.remove();
+            showToast('Sources saved — refresh to apply', 'success');
+            const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer' };
+            const subtitle = document.getElementById('your-albums-subtitle');
+            if (subtitle) {
+                const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
+                subtitle.textContent = `Albums you\u2019ve saved on ${names}`;
+            }
+        } else {
+            showToast('Failed to save sources', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to save sources', 'error');
+    }
+}
+
+async function downloadMissingYourAlbums() {
+    try {
+        const resp = await fetch('/api/discover/your-albums?page=1&per_page=1000&status=missing');
+        const data = await resp.json();
+        if (!data.success || !data.albums || data.albums.length === 0) {
+            showToast('No missing albums to download', 'info');
+            return;
+        }
+        const missing = data.albums.filter(a => !a.in_library);
+        if (missing.length === 0) { showToast('All albums are already in your library!', 'success'); return; }
+        if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your saved albums?`)) return;
+        showToast(`Starting download for ${missing.length} albums...`, 'info');
+        for (let i = 0; i < missing.length; i++) {
+            const album = missing[i];
+            try {
+                showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
+                const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+                let albumData = null;
+                if (album.spotify_album_id) {
+                    const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
+                    if (r.ok) albumData = await r.json();
+                }
+                if (!albumData && album.deezer_album_id) {
+                    const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
+                    if (r.ok) albumData = await r.json();
+                }
+                if (!albumData || !albumData.tracks || albumData.tracks.length === 0) continue;
+                const tracks = albumData.tracks.map(track => {
+                    let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+                    if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+                    return {
+                        id: track.id, name: track.name, artists,
+                        album: {
+                            id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+                            total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+                            images: albumData.images || []
+                        },
+                        duration_ms: track.duration_ms || 0, track_number: track.track_number || 0
+                    };
+                });
+                const virtualId = `your_albums_${album.spotify_album_id || album.deezer_album_id || i}`;
+                await openDownloadMissingModalForYouTube(virtualId, albumData.name, tracks,
+                    { name: album.artist_name, source: albumData.source || 'spotify' },
+                    {
+                        id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+                        total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+                        images: albumData.images || []
+                    }
+                );
+            } catch (err) { console.error(`Error queuing ${album.album_name}:`, err); }
+        }
+    } catch (e) {
+        console.error('Error downloading missing your albums:', e);
+        showToast(`Error: ${e.message}`, 'error');
+    }
+}
+
+// ===============================
+// SPOTIFY LIBRARY SECTION
+// ===============================
+
+let spotifyLibraryAlbums = [];
+let spotifyLibraryPage = 0;
+let spotifyLibraryTotal = 0;
+const SPOTIFY_LIBRARY_PAGE_SIZE = 48;
+let _spotifyLibrarySearchTimeout = null;
+
+function debouncedSpotifyLibrarySearch() {
+    clearTimeout(_spotifyLibrarySearchTimeout);
+    _spotifyLibrarySearchTimeout = setTimeout(() => {
+        spotifyLibraryPage = 0;
+        loadSpotifyLibraryAlbums();
+    }, 400);
+}
+
+async function loadSpotifyLibrarySection() {
+    try {
+        const section = document.getElementById('spotify-library-section');
+        if (!section) return;
+
+        const response = await fetch(`/api/discover/spotify-library?offset=0&limit=${SPOTIFY_LIBRARY_PAGE_SIZE}`);
+        if (!response.ok) throw new Error('Failed to fetch');
+
+        const data = await response.json();
+        if (!data.success || !data.albums || data.albums.length === 0) {
+            section.style.display = 'none';
+            return;
+        }
+
+        section.style.display = '';
+        spotifyLibraryAlbums = data.albums;
+        spotifyLibraryTotal = data.total;
+        spotifyLibraryPage = 0;
+
+        // Update subtitle with stats
+        const subtitle = document.getElementById('spotify-library-subtitle');
+        if (subtitle && data.stats) {
+            const s = data.stats;
+            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
+        }
+
+        // Show download missing button if there are missing albums
+        const dlBtn = document.getElementById('spotify-library-download-missing-btn');
+        if (dlBtn && data.stats && data.stats.missing > 0) {
+            dlBtn.style.display = '';
+        }
+
+        // Show filters
+        const filters = document.getElementById('spotify-library-filters');
+        if (filters) filters.style.display = '';
+
+        renderSpotifyLibraryGrid(data.albums);
+        renderSpotifyLibraryPagination(data.total, 0);
+
+    } catch (error) {
+        console.error('Error loading Spotify library section:', error);
+        const section = document.getElementById('spotify-library-section');
+        if (section) section.style.display = 'none';
+    }
+}
+
+async function loadSpotifyLibraryAlbums() {
+    const grid = document.getElementById('spotify-library-grid');
+    if (!grid) return;
+
+    grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading...</p></div>';
+
+    try {
+        const search = (document.getElementById('spotify-library-search')?.value || '').trim();
+        const status = document.getElementById('spotify-library-status-filter')?.value || 'all';
+        const sort = document.getElementById('spotify-library-sort')?.value || 'date_saved';
+        const offset = spotifyLibraryPage * SPOTIFY_LIBRARY_PAGE_SIZE;
+
+        const params = new URLSearchParams({
+            offset, limit: SPOTIFY_LIBRARY_PAGE_SIZE, sort, sort_dir: 'desc', status
+        });
+        if (search) params.set('search', search);
+
+        const response = await fetch(`/api/discover/spotify-library?${params}`);
+        const data = await response.json();
+
+        if (!data.success) throw new Error(data.error);
+
+        spotifyLibraryAlbums = data.albums;
+        spotifyLibraryTotal = data.total;
+
+        // Update subtitle
+        const subtitle = document.getElementById('spotify-library-subtitle');
+        if (subtitle && data.stats) {
+            const s = data.stats;
+            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
+        }
+
+        renderSpotifyLibraryGrid(data.albums);
+        renderSpotifyLibraryPagination(data.total, offset);
+
+    } catch (error) {
+        console.error('Error loading Spotify library albums:', error);
+        grid.innerHTML = '<div class="spotify-library-empty"><p>Failed to load albums</p></div>';
+    }
+}
+
+function renderSpotifyLibraryGrid(albums) {
+    const grid = document.getElementById('spotify-library-grid');
+    if (!grid) return;
+
+    if (!albums || albums.length === 0) {
+        grid.innerHTML = '<div class="spotify-library-empty"><p>No albums found</p></div>';
+        return;
+    }
+
+    let html = '';
+    albums.forEach((album, index) => {
+        const coverUrl = album.image_url || '/static/placeholder-album.png';
+        const year = album.release_date ? album.release_date.substring(0, 4) : '';
+        const badgeClass = album.in_library ? 'owned' : 'missing';
+        const badgeIcon = album.in_library ? '\u2713' : '\u2193';
+        const trackInfo = album.total_tracks ? `${album.total_tracks} tracks` : '';
+        const meta = [year, trackInfo].filter(Boolean).join(' \u00B7 ');
+
+        html += `
+            <div class="spotify-library-card" onclick="openSpotifyLibraryAlbumDownload(${index})" title="${album.album_name} — ${album.artist_name}">
+                <div class="spotify-library-card-img">
+                    <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
+                    <div class="spotify-library-card-badge ${badgeClass}">${badgeIcon}</div>
+                </div>
+                <div class="spotify-library-card-info">
+                    <p class="spotify-library-card-title">${album.album_name}</p>
+                    <p class="spotify-library-card-artist">${album.artist_name}</p>
+                    <p class="spotify-library-card-meta">${meta}</p>
+                </div>
+            </div>
+        `;
+    });
+
+    grid.innerHTML = html;
+}
+
+function renderSpotifyLibraryPagination(total, offset) {
+    const container = document.getElementById('spotify-library-pagination');
+    if (!container) return;
+
+    if (total <= SPOTIFY_LIBRARY_PAGE_SIZE) {
+        container.style.display = 'none';
+        return;
+    }
+
+    container.style.display = '';
+    const totalPages = Math.ceil(total / SPOTIFY_LIBRARY_PAGE_SIZE);
+    const currentPage = Math.floor(offset / SPOTIFY_LIBRARY_PAGE_SIZE) + 1;
+    const showEnd = Math.min(offset + SPOTIFY_LIBRARY_PAGE_SIZE, total);
+
+    container.innerHTML = `
+        <button class="spotify-library-page-btn" onclick="spotifyLibraryPrevPage()" ${currentPage <= 1 ? 'disabled' : ''}>&larr; Previous</button>
+        <span class="spotify-library-page-info">${offset + 1}\u2013${showEnd} of ${total}</span>
+        <button class="spotify-library-page-btn" onclick="spotifyLibraryNextPage()" ${currentPage >= totalPages ? 'disabled' : ''}>Next &rarr;</button>
+    `;
+}
+
+function spotifyLibraryPrevPage() {
+    if (spotifyLibraryPage > 0) {
+        spotifyLibraryPage--;
+        loadSpotifyLibraryAlbums();
+    }
+}
+
+function spotifyLibraryNextPage() {
+    const totalPages = Math.ceil(spotifyLibraryTotal / SPOTIFY_LIBRARY_PAGE_SIZE);
+    if (spotifyLibraryPage < totalPages - 1) {
+        spotifyLibraryPage++;
+        loadSpotifyLibraryAlbums();
+    }
+}
+
+async function openSpotifyLibraryAlbumDownload(index) {
+    const album = spotifyLibraryAlbums[index];
+    if (!album) {
+        showToast('Album data not found', 'error');
+        return;
+    }
+
+    console.log(`\u{1F4E5} Opening download modal for Spotify library album: ${album.album_name}`);
+    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+
+    try {
+        const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+        const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
+        if (!response.ok) throw new Error('Failed to fetch album tracks');
+
+        const albumData = await response.json();
+        if (!albumData.tracks || albumData.tracks.length === 0) {
+            throw new Error('No tracks found in album');
+        }
+
+        const spotifyTracks = albumData.tracks.map(track => {
+            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+            if (Array.isArray(artists)) {
+                artists = artists.map(a => a.name || a);
+            }
+            return {
+                id: track.id,
+                name: track.name,
+                artists: artists,
+                album: {
+                    id: albumData.id,
+                    name: albumData.name,
+                    album_type: albumData.album_type || 'album',
+                    total_tracks: albumData.total_tracks || 0,
+                    release_date: albumData.release_date || '',
+                    images: albumData.images || []
+                },
+                duration_ms: track.duration_ms || 0,
+                track_number: track.track_number || 0
+            };
+        });
+
+        const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
+        const artistContext = {
+            id: album.artist_id,
+            name: album.artist_name,
+            source: 'spotify'
+        };
+        const albumContext = {
+            id: albumData.id,
+            name: albumData.name,
+            album_type: albumData.album_type || 'album',
+            total_tracks: albumData.total_tracks || 0,
+            release_date: albumData.release_date || '',
+            images: albumData.images || []
+        };
+
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error('Error opening Spotify library album download:', error);
+        showToast(`Failed to load album: ${error.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+async function refreshSpotifyLibraryCache() {
+    try {
+        showToast('Refreshing Spotify library...', 'info');
+        const response = await fetch('/api/discover/spotify-library/refresh', { method: 'POST' });
+        const data = await response.json();
+        if (data.success) {
+            showToast('Spotify library refresh started — will update shortly', 'success');
+            // Reload after a delay to let the sync run
+            setTimeout(() => loadSpotifyLibrarySection(), 10000);
+        } else {
+            showToast(`Error: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+async function downloadMissingSpotifyLibraryAlbums() {
+    // Fetch all missing albums (no pagination limit)
+    try {
+        const response = await fetch('/api/discover/spotify-library?status=missing&limit=500&offset=0');
+        const data = await response.json();
+        if (!data.success || !data.albums || data.albums.length === 0) {
+            showToast('No missing albums to download', 'info');
+            return;
+        }
+
+        const missing = data.albums.filter(a => !a.in_library);
+        if (missing.length === 0) {
+            showToast('All albums are already in your library!', 'success');
+            return;
+        }
+
+        if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your Spotify library?`)) {
+            return;
+        }
+
+        showToast(`Starting download for ${missing.length} albums...`, 'info');
+
+        // Download one at a time to avoid overwhelming the system
+        for (let i = 0; i < missing.length; i++) {
+            const album = missing[i];
+            try {
+                showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
+
+                const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+                const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
+                if (!response.ok) continue;
+
+                const albumData = await response.json();
+                if (!albumData.tracks || albumData.tracks.length === 0) continue;
+
+                const spotifyTracks = albumData.tracks.map(track => {
+                    let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+                    if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+                    return {
+                        id: track.id,
+                        name: track.name,
+                        artists: artists,
+                        album: {
+                            id: albumData.id,
+                            name: albumData.name,
+                            album_type: albumData.album_type || 'album',
+                            total_tracks: albumData.total_tracks || 0,
+                            release_date: albumData.release_date || '',
+                            images: albumData.images || []
+                        },
+                        duration_ms: track.duration_ms || 0,
+                        track_number: track.track_number || 0
+                    };
+                });
+
+                const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
+                await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, {
+                    id: album.artist_id, name: album.artist_name, source: 'spotify'
+                }, {
+                    id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
+                    total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
+                    images: albumData.images || []
+                });
+
+            } catch (err) {
+                console.error(`Error downloading album ${album.album_name}:`, err);
+            }
+        }
+
+    } catch (error) {
+        console.error('Error downloading missing Spotify library albums:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+async function loadDiscoverReleaseRadar() {
+    try {
+        const playlistContainer = document.getElementById('release-radar-playlist');
+        if (!playlistContainer) return;
+
+        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading release radar...</p></div>';
+
+        const response = await fetch('/api/discover/release-radar');
+        if (!response.ok) {
+            throw new Error('Failed to fetch release radar');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>No new releases available</p></div>';
+            return;
+        }
+
+        // Store tracks for download/sync functionality
+        discoverReleaseRadarTracks = data.tracks;
+
+        // Build compact playlist HTML
+        let html = '<div class="discover-playlist-tracks-compact">';
+        data.tracks.forEach((track, index) => {
+            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+            const durationMin = Math.floor(track.duration_ms / 60000);
+            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+            html += `
+                <div class="discover-playlist-track-compact" data-track-index="${index}">
+                    <div class="track-compact-number">${index + 1}</div>
+                    <div class="track-compact-image">
+                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
+                    </div>
+                    <div class="track-compact-info">
+                        <div class="track-compact-name">${track.track_name}</div>
+                        <div class="track-compact-artist">${track.artist_name}</div>
+                    </div>
+                    <div class="track-compact-album">${track.album_name}</div>
+                    <div class="track-compact-duration">${duration}</div>
+                </div>
+            `;
+        });
+        html += '</div>';
+
+        playlistContainer.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading release radar:', error);
+        const playlistContainer = document.getElementById('release-radar-playlist');
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load release radar</p></div>';
+        }
+    }
+}
+
+async function loadDiscoverWeekly() {
+    try {
+        const playlistContainer = document.getElementById('discovery-weekly-playlist');
+        if (!playlistContainer) return;
+
+        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Curating your discovery playlist...</p></div>';
+
+        const response = await fetch('/api/discover/weekly');
+        if (!response.ok) {
+            throw new Error('Failed to fetch discovery weekly');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available yet</p></div>';
+            return;
+        }
+
+        // Store tracks for download/sync functionality
+        discoverWeeklyTracks = data.tracks;
+
+        // Build compact playlist HTML
+        let html = '<div class="discover-playlist-tracks-compact">';
+        data.tracks.forEach((track, index) => {
+            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+            const durationMin = Math.floor(track.duration_ms / 60000);
+            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+            html += `
+                <div class="discover-playlist-track-compact" data-track-index="${index}">
+                    <div class="track-compact-number">${index + 1}</div>
+                    <div class="track-compact-image">
+                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
+                    </div>
+                    <div class="track-compact-info">
+                        <div class="track-compact-name">${track.track_name}</div>
+                        <div class="track-compact-artist">${track.artist_name}</div>
+                    </div>
+                    <div class="track-compact-album">${track.album_name}</div>
+                    <div class="track-compact-duration">${duration}</div>
+                </div>
+            `;
+        });
+        html += '</div>';
+
+        playlistContainer.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading discovery weekly:', error);
+        const playlistContainer = document.getElementById('discovery-weekly-playlist');
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load discovery weekly</p></div>';
+        }
+    }
+}
+
+// ===============================
+// DECADE BROWSER
+// ===============================
+
+let selectedDecade = null;
+let decadeTracks = [];
+
+async function loadDecadeBrowser() {
+    try {
+        const carousel = document.getElementById('decade-browser-carousel');
+        if (!carousel) return;
+
+        // Fetch available decades from backend
+        const response = await fetch('/api/discover/decades/available');
+        if (!response.ok) {
+            throw new Error('Failed to fetch available decades');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.decades || data.decades.length === 0) {
+            carousel.innerHTML = '<div class="discover-empty"><p>No decade content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
+            return;
+        }
+
+        // Build decade cards matching Recent Releases style
+        let html = '';
+        data.decades.forEach(decade => {
+            const icon = getDecadeIcon(decade.year);
+            const label = `${decade.year}s`;
+            html += `
+                <div class="discover-card decade-card-modern" onclick="openDecadePlaylist(${decade.year})">
+                    <div class="discover-card-image decade-card-image">
+                        <div class="decade-icon-large">${icon}</div>
+                    </div>
+                    <div class="discover-card-info">
+                        <h4 class="discover-card-title">${label}</h4>
+                        <p class="discover-card-subtitle">${decade.track_count} tracks</p>
+                        <p class="discover-card-meta">Classics</p>
+                    </div>
+                </div>
+            `;
+        });
+
+        carousel.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading decade browser:', error);
+        const carousel = document.getElementById('decade-browser-carousel');
+        if (carousel) {
+            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load decades</p></div>';
+        }
+    }
+}
+
+function getDecadeIcon(year) {
+    const icons = {
+        1950: '🎺',
+        1960: '🎸',
+        1970: '🕺',
+        1980: '📻',
+        1990: '💿',
+        2000: '📱',
+        2010: '🎧',
+        2020: '🌐'
+    };
+    return icons[year] || '🎵';
+}
+
+async function openDecadePlaylist(decade) {
+    try {
+        showLoadingOverlay(`Loading ${decade}s playlist...`);
+
+        const response = await fetch(`/api/discover/decade/${decade}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch decade playlist');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            const message = data.message || `No tracks found for the ${decade}s`;
+            showToast(message, 'info');
+            hideLoadingOverlay();
+            return;
+        }
+
+        selectedDecade = decade;
+        decadeTracks = data.tracks;
+
+        // Open download modal
+        const playlistName = `${decade}s Classics`;
+        const virtualPlaylistId = `decade_${decade}`;
+
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, data.tracks);
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error(`Error opening ${decade}s playlist:`, error);
+        showToast(`Failed to load ${decade}s playlist`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+// ===============================
+// GENRE BROWSER
+// ===============================
+
+let selectedGenre = null;
+let genreTracks = [];
+
+async function loadGenreBrowser() {
+    try {
+        const carousel = document.getElementById('genre-browser-carousel');
+        if (!carousel) return;
+
+        // Fetch available genres from backend
+        const response = await fetch('/api/discover/genres/available');
+        if (!response.ok) {
+            throw new Error('Failed to fetch available genres');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.genres || data.genres.length === 0) {
+            carousel.innerHTML = '<div class="discover-empty"><p>No genre content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
+            return;
+        }
+
+        // Build genre cards matching Recent Releases style
+        let html = '';
+        data.genres.forEach(genre => {
+            const icon = getGenreIcon(genre.name);
+            const displayName = capitalizeGenre(genre.name);
+            html += `
+                <div class="discover-card genre-card-modern" onclick="openGenrePlaylist('${escapeForInlineJs(genre.name)}')">
+                    <div class="discover-card-image genre-card-image">
+                        <div class="genre-icon-large">${icon}</div>
+                    </div>
+                    <div class="discover-card-info">
+                        <h4 class="discover-card-title">${displayName}</h4>
+                        <p class="discover-card-subtitle">${genre.track_count} tracks</p>
+                        <p class="discover-card-meta">Curated</p>
+                    </div>
+                </div>
+            `;
+        });
+
+        carousel.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading genre browser:', error);
+        const carousel = document.getElementById('genre-browser-carousel');
+        if (carousel) {
+            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load genres</p></div>';
+        }
+    }
+}
+
+function getGenreIcon(genreName) {
+    const genre = genreName.toLowerCase();
+
+    // Parent genre exact matches (consolidated categories)
+    if (genre === 'electronic/dance') return '🎹';
+    if (genre === 'hip hop/rap') return '🎤';
+    if (genre === 'rock') return '🎸';
+    if (genre === 'pop') return '🎵';
+    if (genre === 'r&b/soul') return '🎙️';
+    if (genre === 'jazz') return '🎺';
+    if (genre === 'classical') return '🎻';
+    if (genre === 'metal') return '🤘';
+    if (genre === 'country') return '🪕';
+    if (genre === 'folk/indie') return '🎧';
+    if (genre === 'latin') return '💃';
+    if (genre === 'reggae/dancehall') return '🌴';
+    if (genre === 'world') return '🌍';
+    if (genre === 'alternative') return '🎭';
+    if (genre === 'blues') return '🎸';
+    if (genre === 'funk/disco') return '🕺';
+
+    // Fallback: partial matching for specific genres
+    if (genre.includes('house') || genre.includes('techno') || genre.includes('edm') ||
+        genre.includes('electro') || genre.includes('trance') || genre.includes('electronic')) {
+        return '🎹';
+    }
+    if (genre.includes('hip hop') || genre.includes('rap') || genre.includes('trap')) {
+        return '🎤';
+    }
+    if (genre.includes('rock') || genre.includes('punk')) {
+        return '🎸';
+    }
+    if (genre.includes('metal')) {
+        return '🤘';
+    }
+    if (genre.includes('jazz') || genre.includes('blues')) {
+        return '🎺';
+    }
+    if (genre.includes('pop')) {
+        return '🎵';
+    }
+    if (genre.includes('r&b') || genre.includes('soul')) {
+        return '🎙️';
+    }
+    if (genre.includes('country') || genre.includes('folk')) {
+        return '🪕';
+    }
+    if (genre.includes('classical') || genre.includes('orchestra')) {
+        return '🎻';
+    }
+    if (genre.includes('indie') || genre.includes('alternative')) {
+        return '🎧';
+    }
+    if (genre.includes('latin') || genre.includes('reggaeton') || genre.includes('salsa')) {
+        return '💃';
+    }
+    if (genre.includes('reggae') || genre.includes('dancehall')) {
+        return '🌴';
+    }
+    if (genre.includes('funk') || genre.includes('disco')) {
+        return '🕺';
+    }
+
+    // Default
+    return '🎶';
+}
+
+function capitalizeGenre(genre) {
+    // Capitalize each word in genre, handling both spaces and slashes
+    return genre.split(/(\s|\/)/g)
+        .map(part => {
+            if (part === ' ' || part === '/') return part;
+            return part.charAt(0).toUpperCase() + part.slice(1);
+        })
+        .join('');
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+async function openGenrePlaylist(genre) {
+    try {
+        showLoadingOverlay(`Loading ${capitalizeGenre(genre)} playlist...`);
+
+        const response = await fetch(`/api/discover/genre/${encodeURIComponent(genre)}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch genre playlist');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            const message = data.message || `No tracks found for ${genre}`;
+            showToast(message, 'info');
+            hideLoadingOverlay();
+            return;
+        }
+
+        selectedGenre = genre;
+        genreTracks = data.tracks;
+
+        // Open download modal
+        const playlistName = `${capitalizeGenre(genre)} Mix`;
+        const virtualPlaylistId = `genre_${genre.replace(/\s+/g, '_')}`;
+
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, data.tracks);
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error(`Error opening ${genre} playlist:`, error);
+        showToast(`Failed to load ${genre} playlist`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+// ===============================
+// TIME MACHINE (TABBED BY DECADE)
+// ===============================
+
+let decadeTracksCache = {}; // Store tracks for each decade
+let activeDecade = null;
+
+async function loadDecadeBrowserTabs() {
+    try {
+        const tabsContainer = document.getElementById('decade-tabs');
+        const contentsContainer = document.getElementById('decade-tab-contents');
+
+        if (!tabsContainer || !contentsContainer) return;
+
+        // Fetch available decades from backend
+        const response = await fetch('/api/discover/decades/available');
+        if (!response.ok) {
+            throw new Error('Failed to fetch available decades');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.decades || data.decades.length === 0) {
+            tabsContainer.innerHTML = '<div class="discover-empty"><p>No decade content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
+            return;
+        }
+
+        // Build decade tabs
+        let tabsHTML = '';
+        let contentsHTML = '';
+
+        data.decades.forEach((decade, index) => {
+            const isActive = index === 0;
+            const icon = getDecadeIcon(decade.year);
+            const tabId = `decade-${decade.year}`;
+
+            // Tab button
+            tabsHTML += `
+                <button class="decade-tab ${isActive ? 'active' : ''}"
+                        data-decade="${decade.year}"
+                        onclick="switchDecadeTab(${decade.year})">
+                    ${icon} ${decade.year}s
+                </button>
+            `;
+
+            // Tab content
+            contentsHTML += `
+                <div class="decade-tab-content ${isActive ? 'active' : ''}" id="${tabId}-content">
+                    <!-- Action Buttons -->
+                    <div class="decade-actions">
+                        <div class="discover-section-header">
+                            <div>
+                                <h3 style="margin: 0; color: #fff; font-size: 18px;">${decade.year}s Classics</h3>
+                                <p id="${tabId}-subtitle" style="margin: 4px 0 0 0; color: #999; font-size: 13px;">${decade.track_count} tracks</p>
+                            </div>
+                            <div class="discover-section-actions">
+                                <button class="action-button secondary" onclick="openDownloadModalForDecade(${decade.year})" title="Download missing tracks">
+                                    <span class="button-icon">↓</span>
+                                    <span class="button-text">Download</span>
+                                </button>
+                                <button class="action-button primary" id="${tabId}-sync-btn" onclick="startDecadeSync(${decade.year})" title="Sync to media server">
+                                    <span class="button-icon">⟳</span>
+                                    <span class="button-text">Sync</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Sync Status Display -->
+                        <div class="discover-sync-status" id="${tabId}-sync-status" style="display: none;">
+                            <div class="sync-status-content">
+                                <div class="sync-status-label">
+                                    <span class="sync-icon">⟳</span>
+                                    <span>Syncing to media server...</span>
+                                </div>
+                                <div class="sync-status-stats">
+                                    <span class="sync-stat">✓ <span id="${tabId}-sync-completed">0</span></span>
+                                    <span class="sync-stat">⏳ <span id="${tabId}-sync-pending">0</span></span>
+                                    <span class="sync-stat">✗ <span id="${tabId}-sync-failed">0</span></span>
+                                    <span class="sync-stat">(<span id="${tabId}-sync-percentage">0</span>%)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Track List -->
+                    <div class="discover-playlist-container compact" id="${tabId}-playlist">
+                        <div class="discover-loading"><div class="loading-spinner"></div><p>Loading ${decade.year}s tracks...</p></div>
+                    </div>
+                </div>
+            `;
+        });
+
+        tabsContainer.innerHTML = tabsHTML;
+        contentsContainer.innerHTML = contentsHTML;
+
+        // Load first decade's tracks
+        if (data.decades.length > 0) {
+            await loadDecadeTracks(data.decades[0].year);
+        }
+
+    } catch (error) {
+        console.error('Error loading decade browser tabs:', error);
+        const tabsContainer = document.getElementById('decade-tabs');
+        if (tabsContainer) {
+            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load decades</p></div>';
+        }
+    }
+}
+
+function switchDecadeTab(decade) {
+    // Update tab buttons
+    const tabs = document.querySelectorAll('.decade-tab');
+    tabs.forEach(tab => {
+        if (parseInt(tab.getAttribute('data-decade')) === decade) {
+            tab.classList.add('active');
+        } else {
+            tab.classList.remove('active');
+        }
+    });
+
+    // Update tab content
+    const tabContents = document.querySelectorAll('.decade-tab-content');
+    tabContents.forEach(content => {
+        if (content.id === `decade-${decade}-content`) {
+            content.classList.add('active');
+        } else {
+            content.classList.remove('active');
+        }
+    });
+
+    // Load tracks if not already loaded
+    if (!decadeTracksCache[decade]) {
+        loadDecadeTracks(decade);
+    }
+}
+
+async function loadDecadeTracks(decade) {
+    try {
+        const playlistContainer = document.getElementById(`decade-${decade}-playlist`);
+        if (!playlistContainer) return;
+
+        const response = await fetch(`/api/discover/decade/${decade}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch decade playlist');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks found for the ' + decade + 's</p></div>';
+            return;
+        }
+
+        // Store tracks in cache
+        decadeTracksCache[decade] = data.tracks;
+        activeDecade = decade;
+
+        // Build compact playlist HTML
+        let html = '<div class="discover-playlist-tracks-compact">';
+        data.tracks.forEach((track, index) => {
+            // Extract track data from track_data_json if available
+            let trackData = track;
+            if (track.track_data_json) {
+                trackData = track.track_data_json;
+            }
+
+            // Get track properties with fallbacks
+            const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
+            const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
+            const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
+            const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
+            const durationMs = trackData.duration_ms || track.duration_ms || 0;
+
+            const durationMin = Math.floor(durationMs / 60000);
+            const durationSec = Math.floor((durationMs % 60000) / 1000);
+            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+            html += `
+                <div class="discover-playlist-track-compact" data-track-index="${index}">
+                    <div class="track-compact-number">${index + 1}</div>
+                    <div class="track-compact-image">
+                        <img src="${coverUrl}" alt="${albumName}" loading="lazy">
+                    </div>
+                    <div class="track-compact-info">
+                        <div class="track-compact-name">${trackName}</div>
+                        <div class="track-compact-artist">${artistName}</div>
+                    </div>
+                    <div class="track-compact-album">${albumName}</div>
+                    <div class="track-compact-duration">${duration}</div>
+                </div>
+            `;
+        });
+        html += '</div>';
+
+        playlistContainer.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading decade tracks:', error);
+        const playlistContainer = document.getElementById(`decade-${decade}-playlist`);
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load decade tracks</p></div>';
+        }
+    }
+}
+
+async function startDecadeSync(decade) {
+    const tracks = decadeTracksCache[decade];
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks available for this decade', 'warning');
+        return;
+    }
+
+    // Convert to format expected by sync API
+    const spotifyTracks = tracks.map(track => {
+        // Extract track data from track_data_json if available
+        let trackData = track;
+        if (track.track_data_json) {
+            trackData = track.track_data_json;
+        }
+
+        // Build properly formatted Spotify track object
+        let spotifyTrack = {
+            id: trackData.id || track.spotify_track_id,
+            name: trackData.name || trackData.track_name || track.track_name,
+            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
+            album: trackData.album || {
+                name: trackData.album_name || track.album_name,
+                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
+            },
+            duration_ms: trackData.duration_ms || track.duration_ms || 0
+        };
+
+        // Normalize artists to array of strings for sync compatibility
+        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+        }
+
+        return spotifyTrack;
+    });
+
+    const virtualPlaylistId = `discover_decade_${decade}`;
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: `${decade}s Classics`,
+        track_count: spotifyTracks.length
+    };
+
+    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
+        spotifyPlaylists.push(virtualPlaylist);
+    }
+
+    // Show sync status display
+    const statusDisplay = document.getElementById(`decade-${decade}-sync-status`);
+    if (statusDisplay) statusDisplay.style.display = 'block';
+
+    // Disable sync button
+    const syncButton = document.getElementById(`decade-${decade}-sync-btn`);
+    if (syncButton) {
+        syncButton.disabled = true;
+        syncButton.style.opacity = '0.5';
+        syncButton.style.cursor = 'not-allowed';
+    }
+
+    // Start sync
+    await startPlaylistSync(virtualPlaylistId);
+
+    // Start polling
+    startDecadeSyncPolling(decade, virtualPlaylistId);
+}
+
+function startDecadeSyncPolling(decade, virtualPlaylistId) {
+    const pollerId = `decade_${decade}`;
+
+    if (discoverSyncPollers[pollerId]) {
+        clearInterval(discoverSyncPollers[pollerId]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
+        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
+            const el = (id) => document.getElementById(id);
+            if (el(`decade-${decade}-sync-completed`)) el(`decade-${decade}-sync-completed`).textContent = matched;
+            if (el(`decade-${decade}-sync-pending`)) el(`decade-${decade}-sync-pending`).textContent = pending;
+            if (el(`decade-${decade}-sync-failed`)) el(`decade-${decade}-sync-failed`).textContent = failed;
+            if (el(`decade-${decade}-sync-percentage`)) el(`decade-${decade}-sync-percentage`).textContent = pct;
+            if (data.status === 'finished') {
+                if (discoverSyncPollers[pollerId]) { clearInterval(discoverSyncPollers[pollerId]); delete discoverSyncPollers[pollerId]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
+                delete _syncProgressCallbacks[virtualPlaylistId];
+                const syncButton = el(`decade-${decade}-sync-btn`);
+                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
+                showToast(`${decade}s Classics sync complete!`, 'success');
+                setTimeout(() => { const sd = el(`decade-${decade}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
+            }
+        };
+    }
+
+    discoverSyncPollers[pollerId] = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
+            if (!response.ok) return;
+
+            const data = await response.json();
+            const progress = data.progress || {};
+
+            const completedEl = document.getElementById(`decade-${decade}-sync-completed`);
+            const pendingEl = document.getElementById(`decade-${decade}-sync-pending`);
+            const failedEl = document.getElementById(`decade-${decade}-sync-failed`);
+            const percentageEl = document.getElementById(`decade-${decade}-sync-percentage`);
+
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+            if (completedEl) completedEl.textContent = matched;
+            if (pendingEl) pendingEl.textContent = pending;
+            if (failedEl) failedEl.textContent = failed;
+            if (percentageEl) percentageEl.textContent = completionPercentage;
+
+            if (data.status === 'finished') {
+                clearInterval(discoverSyncPollers[pollerId]);
+                delete discoverSyncPollers[pollerId];
+
+                const syncButton = document.getElementById(`decade-${decade}-sync-btn`);
+                if (syncButton) {
+                    syncButton.disabled = false;
+                    syncButton.style.opacity = '1';
+                    syncButton.style.cursor = 'pointer';
+                }
+
+                showToast(`${decade}s Classics sync complete!`, 'success');
+
+                setTimeout(() => {
+                    const statusDisplay = document.getElementById(`decade-${decade}-sync-status`);
+                    if (statusDisplay) statusDisplay.style.display = 'none';
+                }, 3000);
+            }
+        } catch (error) {
+            console.error(`Error polling sync status for decade ${decade}:`, error);
+        }
+    }, 500);
+}
+
+async function openDownloadModalForDecade(decade) {
+    const tracks = decadeTracksCache[decade];
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks available for this decade', 'warning');
+        return;
+    }
+
+    // Convert to format expected by download modal
+    const spotifyTracks = tracks.map(track => {
+        // Extract track data from track_data_json if available
+        let trackData = track;
+        if (track.track_data_json) {
+            trackData = track.track_data_json;
+        }
+
+        // Build properly formatted Spotify track object
+        let spotifyTrack = {
+            id: trackData.id || track.spotify_track_id,
+            name: trackData.name || trackData.track_name || track.track_name,
+            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
+            album: trackData.album || {
+                name: trackData.album_name || track.album_name,
+                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
+            },
+            duration_ms: trackData.duration_ms || track.duration_ms || 0
+        };
+
+        return spotifyTrack;
+    });
+
+    const playlistName = `${decade}s Classics`;
+    const virtualPlaylistId = `decade_${decade}`;
+
+    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+}
+
+// ===============================
+// BROWSE BY GENRE (TABBED BY GENRE)
+// ===============================
+
+let genreTracksCache = {}; // Store tracks for each genre
+let activeGenre = null;
+let availableGenres = [];
+
+async function loadGenreBrowserTabs() {
+    try {
+        const tabsContainer = document.getElementById('genre-tabs');
+        const contentsContainer = document.getElementById('genre-tab-contents');
+
+        if (!tabsContainer || !contentsContainer) return;
+
+        // Fetch available genres from backend
+        const response = await fetch('/api/discover/genres/available');
+        if (!response.ok) {
+            throw new Error('Failed to fetch available genres');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.genres || data.genres.length === 0) {
+            tabsContainer.innerHTML = '<div class="discover-empty"><p>No genre content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
+            return;
+        }
+
+        availableGenres = data.genres;
+
+        // Build genre tabs (limit to first 8-10 to avoid overcrowding)
+        const displayGenres = data.genres.slice(0, 10);
+        let tabsHTML = '';
+        let contentsHTML = '';
+
+        displayGenres.forEach((genre, index) => {
+            const isActive = index === 0;
+            const icon = getGenreIcon(genre.name);
+            const genreName = genre.name;
+            const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
+            const tabId = `genre-${genreId}`;
+
+            // Tab button
+            tabsHTML += `
+                <button class="genre-tab ${isActive ? 'active' : ''}"
+                        data-genre="${escapeHtml(genreName)}"
+                        onclick="switchGenreTab('${escapeForInlineJs(genreName)}')">
+                    ${icon} ${capitalizeGenre(genreName)}
+                </button>
+            `;
+
+            // Tab content
+            contentsHTML += `
+                <div class="genre-tab-content ${isActive ? 'active' : ''}" id="${tabId}-content" data-genre="${escapeHtml(genreName)}">
+                    <!-- Action Buttons -->
+                    <div class="genre-actions">
+                        <div class="discover-section-header">
+                            <div>
+                                <h3 style="margin: 0; color: #fff; font-size: 18px;">${capitalizeGenre(genreName)} Mix</h3>
+                                <p id="${tabId}-subtitle" style="margin: 4px 0 0 0; color: #999; font-size: 13px;">${genre.track_count} tracks</p>
+                            </div>
+                            <div class="discover-section-actions">
+                                <button class="action-button secondary" onclick="openDownloadModalForGenre('${escapeForInlineJs(genreName)}')" title="Download missing tracks">
+                                    <span class="button-icon">↓</span>
+                                    <span class="button-text">Download</span>
+                                </button>
+                                <button class="action-button primary" id="${tabId}-sync-btn" onclick="startGenreSync('${escapeForInlineJs(genreName)}')" title="Sync to media server">
+                                    <span class="button-icon">⟳</span>
+                                    <span class="button-text">Sync</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Sync Status Display -->
+                        <div class="discover-sync-status" id="${tabId}-sync-status" style="display: none;">
+                            <div class="sync-status-content">
+                                <div class="sync-status-label">
+                                    <span class="sync-icon">⟳</span>
+                                    <span>Syncing to media server...</span>
+                                </div>
+                                <div class="sync-status-stats">
+                                    <span class="sync-stat">✓ <span id="${tabId}-sync-completed">0</span></span>
+                                    <span class="sync-stat">⏳ <span id="${tabId}-sync-pending">0</span></span>
+                                    <span class="sync-stat">✗ <span id="${tabId}-sync-failed">0</span></span>
+                                    <span class="sync-stat">(<span id="${tabId}-sync-percentage">0</span>%)</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Track List -->
+                    <div class="discover-playlist-container compact" id="${tabId}-playlist">
+                        <div class="discover-loading"><div class="loading-spinner"></div><p>Loading ${capitalizeGenre(genreName)} tracks...</p></div>
+                    </div>
+                </div>
+            `;
+        });
+
+        tabsContainer.innerHTML = tabsHTML;
+        contentsContainer.innerHTML = contentsHTML;
+
+        // Load first genre's tracks
+        if (displayGenres.length > 0) {
+            await loadGenreTracks(displayGenres[0].name);
+        }
+
+    } catch (error) {
+        console.error('Error loading genre browser tabs:', error);
+        const tabsContainer = document.getElementById('genre-tabs');
+        if (tabsContainer) {
+            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load genres</p></div>';
+        }
+    }
+}
+
+function switchGenreTab(genreName) {
+    // Update tab buttons
+    const tabs = document.querySelectorAll('.genre-tab');
+    tabs.forEach(tab => {
+        if (tab.getAttribute('data-genre') === genreName) {
+            tab.classList.add('active');
+        } else {
+            tab.classList.remove('active');
+        }
+    });
+
+    // Update tab content
+    const tabContents = document.querySelectorAll('.genre-tab-content');
+    tabContents.forEach(content => {
+        if (content.getAttribute('data-genre') === genreName) {
+            content.classList.add('active');
+        } else {
+            content.classList.remove('active');
+        }
+    });
+
+    // Load tracks if not already loaded
+    if (!genreTracksCache[genreName]) {
+        loadGenreTracks(genreName);
+    }
+}
+
+async function loadGenreTracks(genreName) {
+    try {
+        const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
+        const playlistContainer = document.getElementById(`genre-${genreId}-playlist`);
+        if (!playlistContainer) return;
+
+        const response = await fetch(`/api/discover/genre/${encodeURIComponent(genreName)}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch genre playlist');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = `<div class="discover-empty"><p>No tracks found for ${capitalizeGenre(genreName)}</p></div>`;
+            return;
+        }
+
+        // Store tracks in cache
+        genreTracksCache[genreName] = data.tracks;
+        activeGenre = genreName;
+
+        // Build compact playlist HTML
+        let html = '<div class="discover-playlist-tracks-compact">';
+        data.tracks.forEach((track, index) => {
+            // Extract track data from track_data_json if available
+            let trackData = track;
+            if (track.track_data_json) {
+                trackData = track.track_data_json;
+            }
+
+            // Get track properties with fallbacks
+            const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
+            const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
+            const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
+            const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
+            const durationMs = trackData.duration_ms || track.duration_ms || 0;
+
+            const durationMin = Math.floor(durationMs / 60000);
+            const durationSec = Math.floor((durationMs % 60000) / 1000);
+            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+            html += `
+                <div class="discover-playlist-track-compact" data-track-index="${index}">
+                    <div class="track-compact-number">${index + 1}</div>
+                    <div class="track-compact-image">
+                        <img src="${coverUrl}" alt="${albumName}" loading="lazy">
+                    </div>
+                    <div class="track-compact-info">
+                        <div class="track-compact-name">${trackName}</div>
+                        <div class="track-compact-artist">${artistName}</div>
+                    </div>
+                    <div class="track-compact-album">${albumName}</div>
+                    <div class="track-compact-duration">${duration}</div>
+                </div>
+            `;
+        });
+        html += '</div>';
+
+        playlistContainer.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading genre tracks:', error);
+        const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
+        const playlistContainer = document.getElementById(`genre-${genreId}-playlist`);
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load genre tracks</p></div>';
+        }
+    }
+}
+
+async function startGenreSync(genreName) {
+    const tracks = genreTracksCache[genreName];
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks available for this genre', 'warning');
+        return;
+    }
+
+    const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
+
+    // Convert to format expected by sync API
+    const spotifyTracks = tracks.map(track => {
+        // Extract track data from track_data_json if available
+        let trackData = track;
+        if (track.track_data_json) {
+            trackData = track.track_data_json;
+        }
+
+        // Build properly formatted Spotify track object
+        let spotifyTrack = {
+            id: trackData.id || track.spotify_track_id,
+            name: trackData.name || trackData.track_name || track.track_name,
+            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
+            album: trackData.album || {
+                name: trackData.album_name || track.album_name,
+                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
+            },
+            duration_ms: trackData.duration_ms || track.duration_ms || 0
+        };
+
+        // Normalize artists to array of strings for sync compatibility
+        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+        }
+
+        return spotifyTrack;
+    });
+
+    const virtualPlaylistId = `discover_genre_${genreName.replace(/\s+/g, '_')}`;
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: `${capitalizeGenre(genreName)} Mix`,
+        track_count: spotifyTracks.length
+    };
+
+    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
+        spotifyPlaylists.push(virtualPlaylist);
+    }
+
+    // Show sync status display
+    const statusDisplay = document.getElementById(`genre-${genreId}-sync-status`);
+    if (statusDisplay) statusDisplay.style.display = 'block';
+
+    // Disable sync button
+    const syncButton = document.getElementById(`genre-${genreId}-sync-btn`);
+    if (syncButton) {
+        syncButton.disabled = true;
+        syncButton.style.opacity = '0.5';
+        syncButton.style.cursor = 'not-allowed';
+    }
+
+    // Start sync
+    await startPlaylistSync(virtualPlaylistId);
+
+    // Start polling
+    startGenreSyncPolling(genreName, genreId, virtualPlaylistId);
+}
+
+function startGenreSyncPolling(genreName, genreId, virtualPlaylistId) {
+    const pollerId = `genre_${genreId}`;
+
+    if (discoverSyncPollers[pollerId]) {
+        clearInterval(discoverSyncPollers[pollerId]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
+        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
+            const el = (id) => document.getElementById(id);
+            if (el(`genre-${genreId}-sync-completed`)) el(`genre-${genreId}-sync-completed`).textContent = matched;
+            if (el(`genre-${genreId}-sync-pending`)) el(`genre-${genreId}-sync-pending`).textContent = pending;
+            if (el(`genre-${genreId}-sync-failed`)) el(`genre-${genreId}-sync-failed`).textContent = failed;
+            if (el(`genre-${genreId}-sync-percentage`)) el(`genre-${genreId}-sync-percentage`).textContent = pct;
+            if (data.status === 'finished') {
+                if (discoverSyncPollers[pollerId]) { clearInterval(discoverSyncPollers[pollerId]); delete discoverSyncPollers[pollerId]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
+                delete _syncProgressCallbacks[virtualPlaylistId];
+                const syncButton = el(`genre-${genreId}-sync-btn`);
+                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
+                showToast(`${capitalizeGenre(genreName)} Mix sync complete!`, 'success');
+                setTimeout(() => { const sd = el(`genre-${genreId}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
+            }
+        };
+    }
+
+    discoverSyncPollers[pollerId] = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
+            if (!response.ok) return;
+
+            const data = await response.json();
+            const progress = data.progress || {};
+
+            const completedEl = document.getElementById(`genre-${genreId}-sync-completed`);
+            const pendingEl = document.getElementById(`genre-${genreId}-sync-pending`);
+            const failedEl = document.getElementById(`genre-${genreId}-sync-failed`);
+            const percentageEl = document.getElementById(`genre-${genreId}-sync-percentage`);
+
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+            if (completedEl) completedEl.textContent = matched;
+            if (pendingEl) pendingEl.textContent = pending;
+            if (failedEl) failedEl.textContent = failed;
+            if (percentageEl) percentageEl.textContent = completionPercentage;
+
+            if (data.status === 'finished') {
+                clearInterval(discoverSyncPollers[pollerId]);
+                delete discoverSyncPollers[pollerId];
+
+                const syncButton = document.getElementById(`genre-${genreId}-sync-btn`);
+                if (syncButton) {
+                    syncButton.disabled = false;
+                    syncButton.style.opacity = '1';
+                    syncButton.style.cursor = 'pointer';
+                }
+
+                showToast(`${capitalizeGenre(genreName)} Mix sync complete!`, 'success');
+
+                setTimeout(() => {
+                    const statusDisplay = document.getElementById(`genre-${genreId}-sync-status`);
+                    if (statusDisplay) statusDisplay.style.display = 'none';
+                }, 3000);
+            }
+        } catch (error) {
+            console.error(`Error polling sync status for genre ${genreName}:`, error);
+        }
+    }, 500);
+}
+
+async function openDownloadModalForGenre(genreName) {
+    const tracks = genreTracksCache[genreName];
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks available for this genre', 'warning');
+        return;
+    }
+
+    // Convert to format expected by download modal
+    const spotifyTracks = tracks.map(track => {
+        // Extract track data from track_data_json if available
+        let trackData = track;
+        if (track.track_data_json) {
+            trackData = track.track_data_json;
+        }
+
+        // Build properly formatted Spotify track object
+        let spotifyTrack = {
+            id: trackData.id || track.spotify_track_id,
+            name: trackData.name || trackData.track_name || track.track_name,
+            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
+            album: trackData.album || {
+                name: trackData.album_name || track.album_name,
+                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
+            },
+            duration_ms: trackData.duration_ms || track.duration_ms || 0
+        };
+
+        return spotifyTrack;
+    });
+
+    const playlistName = `${capitalizeGenre(genreName)} Mix`;
+    const virtualPlaylistId = `genre_${genreName.replace(/\s+/g, '_')}`;
+
+    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+}
+
+// ===============================
+// LISTENBRAINZ PLAYLISTS
+// ===============================
+
+let listenbrainzPlaylistsCache = {}; // Store playlists by type
+let listenbrainzTracksCache = {}; // Store tracks for each playlist
+let activeListenBrainzTab = 'recommendations'; // Track active tab
+let activeListenBrainzSubTab = null; // Track active sub-tab within recommendations
+
+// ── Last.fm Track Radio ──────────────────────────────────────────────────────
+
+let _lastfmRadioDebounceTimer = null;
+let _lastfmRadioSelected = null; // {name, artist}
+
+function debouncedLastfmTrackSearch(query) {
+    clearTimeout(_lastfmRadioDebounceTimer);
+    const q = (query || '').trim();
+    if (!q) {
+        document.getElementById('lastfm-radio-dropdown').style.display = 'none';
+        return;
+    }
+    _lastfmRadioDebounceTimer = setTimeout(() => _runLastfmTrackSearch(q), 400);
+}
+
+async function _runLastfmTrackSearch(q) {
+    if (q.length < 2) return;
+    const dropdown = document.getElementById('lastfm-radio-dropdown');
+    // Show a mini spinner while fetching
+    dropdown.innerHTML = '<div class="lastfm-radio-searching"><div class="server-search-spinner" style="width:14px;height:14px;margin:0 auto;"></div></div>';
+    dropdown.style.display = 'block';
+    try {
+        const res = await fetch(`/api/lastfm/search/tracks?q=${encodeURIComponent(q)}`);
+        if (!res.ok) { dropdown.style.display = 'none'; return; }
+        const data = await res.json();
+        if (!data.results || data.results.length === 0) {
+            dropdown.style.display = 'none';
+            return;
+        }
+        dropdown.innerHTML = data.results.map(t => {
+            const imgHtml = t.image_url
+                ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.parentElement.innerHTML='<div class=\\'lastfm-radio-art-empty\\'></div>'">`
+                : '<div class="lastfm-radio-art-empty"></div>';
+            const listeners = t.listeners > 0
+                ? `<span class="lastfm-radio-result-listeners">${(t.listeners / 1000).toFixed(0)}k listeners</span>`
+                : '';
+            return `
+                <div class="lastfm-radio-result" onclick="selectLastfmRadioTrack(decodeURIComponent('${encodeURIComponent(t.name)}'), decodeURIComponent('${encodeURIComponent(t.artist)}'))">
+                    <div class="lastfm-radio-result-art">${imgHtml}</div>
+                    <div class="lastfm-radio-result-meta">
+                        <span class="lastfm-radio-result-track">${t.name}</span>
+                        <span class="lastfm-radio-result-artist">${t.artist}${listeners ? ' · ' + t.listeners.toLocaleString() + ' listeners' : ''}</span>
+                    </div>
+                </div>`;
+        }).join('');
+        dropdown.style.display = 'block';
+    } catch (e) {
+        console.error('Last.fm search error:', e);
+        dropdown.style.display = 'none';
+    }
+}
+
+function selectLastfmRadioTrack(name, artist) {
+    // Close dropdown and update input to show selection
+    document.getElementById('lastfm-radio-dropdown').style.display = 'none';
+    document.getElementById('lastfm-radio-input').value = `${name} — ${artist}`;
+    document.getElementById('lastfm-radio-input').blur();
+    // Immediately kick off generation
+    _generateLastfmRadioFor(name, artist);
+}
+
+function clearLastfmRadioSelection() {
+    document.getElementById('lastfm-radio-input').value = '';
+    document.getElementById('lastfm-radio-dropdown').style.display = 'none';
+}
+
+// Keep generateLastfmRadio as public alias (called by nothing now but harmless)
+async function generateLastfmRadio() {
+    const input = (document.getElementById('lastfm-radio-input').value || '').trim();
+    if (!input) return;
+    // Parse "Track — Artist" format if present
+    const parts = input.split(' — ');
+    if (parts.length >= 2) {
+        await _generateLastfmRadioFor(parts[0].trim(), parts[1].trim());
+    }
+}
+
+async function _generateLastfmRadioFor(name, artist) {
+    const container = document.getElementById('lastfm-radio-playlists');
+    const input = document.getElementById('lastfm-radio-input');
+
+    // Show loading state in the playlists area
+    if (container) {
+        container.innerHTML = `
+            <div class="lastfm-radio-generating">
+                <div class="server-search-spinner"></div>
+                <p>Building radio for <strong>${name}</strong> by <strong>${artist}</strong>…</p>
+            </div>`;
+    }
+    if (input) input.disabled = true;
+
+    try {
+        const res = await fetch('/api/lastfm/radio/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_name: name, artist_name: artist }),
+        });
+        const data = await res.json();
+        if (!data.success) {
+            if (container) container.innerHTML = '';
+            showToast(data.error || 'Failed to generate radio', 'error');
+            return;
+        }
+        // Reload all radio playlist cards
+        await _loadLastfmRadioPlaylists();
+    } catch (e) {
+        if (container) container.innerHTML = '';
+        showToast('Error generating Last.fm radio', 'error');
+        console.error(e);
+    } finally {
+        if (input) input.disabled = false;
+    }
+}
+
+async function initializeLastfmRadioSection() {
+    try {
+        const cfgRes = await fetch('/api/lastfm/configured');
+        if (!cfgRes.ok) return;
+        const { configured } = await cfgRes.json();
+        const section = document.getElementById('lastfm-radio-section');
+        if (!section) return;
+        if (!configured) {
+            section.style.display = 'none';
+            return;
+        }
+        section.style.display = '';
+        await _loadLastfmRadioPlaylists();
+    } catch (e) {
+        console.error('Error initializing Last.fm Radio section:', e);
+    }
+}
+
+async function _loadLastfmRadioPlaylists() {
+    const container = document.getElementById('lastfm-radio-playlists');
+    if (!container) return;
+    try {
+        const res = await fetch('/api/discover/listenbrainz/lastfm-radio');
+        if (!res.ok) return;
+        const data = await res.json();
+        if (!data.success || !data.playlists || data.playlists.length === 0) {
+            container.innerHTML = '';
+            return;
+        }
+        // Reuse the same LB playlist card builder — cards are identical
+        container.innerHTML = buildListenBrainzPlaylistsHtml(data.playlists, 'lastfm_radio');
+        loadTracksForPlaylists(data.playlists);
+    } catch (e) {
+        console.error('Error loading Last.fm radio playlists:', e);
+    }
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+    const section = document.getElementById('lastfm-radio-search-section');
+    if (section && !section.contains(e.target)) {
+        const dd = document.getElementById('lastfm-radio-dropdown');
+        if (dd) dd.style.display = 'none';
+    }
+});
+
+// ────────────────────────────────────────────────────────────────────────────
+
+async function initializeListenBrainzTabs() {
+    try {
+        console.log('🧠 Initializing ListenBrainz tabs...');
+
+        // Fetch all playlist types
+        const [createdForRes, userPlaylistsRes, collaborativeRes] = await Promise.all([
+            fetch('/api/discover/listenbrainz/created-for'),
+            fetch('/api/discover/listenbrainz/user-playlists'),
+            fetch('/api/discover/listenbrainz/collaborative'),
+        ]);
+
+        console.log('📡 API Responses:', {
+            createdFor: createdForRes.status,
+            userPlaylists: userPlaylistsRes.status,
+            collaborative: collaborativeRes.status,
+        });
+
+        const tabs = [
+            { id: 'recommendations', label: '🎁 Recommendations', hasData: false },
+            { id: 'user', label: '📚 Your Playlists', hasData: false },
+            { id: 'collaborative', label: '🤝 Collaborative', hasData: false },
+        ];
+
+        // Track LB username for header display
+        let lbUsername = null;
+
+        // Check which tabs have data
+        if (createdForRes.ok) {
+            const data = await createdForRes.json();
+            console.log('📋 Created For data:', data);
+            if (data.username) lbUsername = data.username;
+            if (data.success && data.playlists && data.playlists.length > 0) {
+                listenbrainzPlaylistsCache['recommendations'] = data.playlists;
+                tabs[0].hasData = true;
+                console.log(`✅ Found ${data.playlists.length} recommendation playlists`);
+            }
+        }
+
+        if (userPlaylistsRes.ok) {
+            const data = await userPlaylistsRes.json();
+            console.log('📚 User Playlists data:', data);
+            if (data.username && !lbUsername) lbUsername = data.username;
+            if (data.success && data.playlists && data.playlists.length > 0) {
+                listenbrainzPlaylistsCache['user'] = data.playlists;
+                tabs[1].hasData = true;
+                console.log(`✅ Found ${data.playlists.length} user playlists`);
+            }
+        }
+
+        if (collaborativeRes.ok) {
+            const data = await collaborativeRes.json();
+            console.log('🤝 Collaborative data:', data);
+            if (data.username && !lbUsername) lbUsername = data.username;
+            if (data.success && data.playlists && data.playlists.length > 0) {
+                listenbrainzPlaylistsCache['collaborative'] = data.playlists;
+                tabs[2].hasData = true;
+                console.log(`✅ Found ${data.playlists.length} collaborative playlists`);
+            }
+        }
+
+        // Build tabs HTML
+        const tabsContainer = document.getElementById('listenbrainz-tabs');
+        console.log('🔧 Building tabs. Available tabs:', tabs.filter(t => t.hasData).map(t => t.label));
+
+        let tabsHtml = '<div class="decade-tabs-inner">'; // Reuse decade tabs styling
+
+        tabs.forEach(tab => {
+            if (tab.hasData) {
+                const isActive = tab.id === activeListenBrainzTab;
+                tabsHtml += `
+                    <button class="decade-tab${isActive ? ' active' : ''}"
+                            onclick="switchListenBrainzTab('${tab.id}')"
+                            data-tab="${tab.id}">
+                        ${tab.label}
+                    </button>
+                `;
+            }
+        });
+        tabsHtml += '</div>';
+
+        if (tabs.every(t => !t.hasData)) {
+            console.log('⚠️ No tabs have data');
+            tabsContainer.innerHTML = `
+                <div class="lb-empty-state">
+                    <div class="lb-empty-icon">&#129504;</div>
+                    <h3>Connect ListenBrainz</h3>
+                    <p>Link your ListenBrainz account to see personalized playlists, recommendations, and collaborative playlists.</p>
+                    <button class="action-button primary lb-connect-btn" onclick="openPersonalSettings()">
+                        Connect ListenBrainz
+                    </button>
+                    <p class="lb-empty-help">Get your token from <a href="https://listenbrainz.org/profile/" target="_blank">listenbrainz.org/profile</a></p>
+                </div>`;
+            return;
+        }
+
+        tabsContainer.innerHTML = tabsHtml;
+
+        // Update section subtitle with username
+        const lbSubtitle = document.getElementById('listenbrainz-section-subtitle');
+        if (lbSubtitle) {
+            lbSubtitle.textContent = lbUsername ? `Playlists for ${lbUsername}` : 'Playlists from ListenBrainz';
+        }
+
+        // Load first available tab
+        const firstTab = tabs.find(t => t.hasData);
+        if (firstTab) {
+            console.log(`🎯 Loading first tab: ${firstTab.label} (${firstTab.id})`);
+            activeListenBrainzTab = firstTab.id;
+            loadListenBrainzTabContent(firstTab.id);
+        } else {
+            console.log('❌ No first tab found');
+        }
+
+    } catch (error) {
+        console.error('Error initializing ListenBrainz tabs:', error);
+        const tabsContainer = document.getElementById('listenbrainz-tabs');
+        if (tabsContainer) {
+            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load playlists</p></div>';
+        }
+    }
+}
+
+function switchListenBrainzTab(tabId) {
+    // Update active tab
+    activeListenBrainzTab = tabId;
+
+    // Update tab buttons
+    const tabs = document.querySelectorAll('#listenbrainz-tabs .decade-tab');
+    tabs.forEach(tab => {
+        if (tab.dataset.tab === tabId) {
+            tab.classList.add('active');
+        } else {
+            tab.classList.remove('active');
+        }
+    });
+
+    // Load content
+    loadListenBrainzTabContent(tabId);
+}
+
+function groupListenBrainzPlaylists(playlists) {
+    const groups = {};
+    const groupOrder = [];
+
+    playlists.forEach(playlist => {
+        const playlistData = playlist.playlist || playlist;
+        const title = (playlistData.title || '').toLowerCase();
+
+        let groupName;
+        if (title.includes('weekly jams')) {
+            groupName = 'Weekly Jams';
+        } else if (title.includes('weekly exploration')) {
+            groupName = 'Weekly Exploration';
+        } else if (title.includes('top discoveries')) {
+            groupName = 'Top Discoveries';
+        } else if (title.includes('top missed recordings')) {
+            groupName = 'Top Missed Recordings';
+        } else if (title.includes('daily jams')) {
+            groupName = 'Daily Jams';
+        } else {
+            groupName = 'Other';
+        }
+
+        if (!groups[groupName]) {
+            groups[groupName] = [];
+            groupOrder.push(groupName);
+        }
+        groups[groupName].push(playlist);
+    });
+
+    // Move "Other" to the end if it exists
+    const otherIdx = groupOrder.indexOf('Other');
+    if (otherIdx !== -1 && otherIdx !== groupOrder.length - 1) {
+        groupOrder.splice(otherIdx, 1);
+        groupOrder.push('Other');
+    }
+
+    return { groups, groupOrder };
+}
+
+function buildListenBrainzPlaylistsHtml(playlists, tabId) {
+    let html = '';
+    playlists.forEach((playlist, index) => {
+        const playlistData = playlist.playlist || playlist;
+        const identifier = playlistData.identifier?.split('/').pop() || '';
+        console.log(`📋 Playlist ${index}:`, {
+            title: playlistData.title,
+            fullIdentifier: playlistData.identifier,
+            extractedIdentifier: identifier
+        });
+        const title = playlistData.title || 'Untitled Playlist';
+        const creator = playlistData.creator || 'ListenBrainz';
+
+        let trackCount = 50;
+        if (playlistData.annotation?.track_count && playlistData.annotation.track_count > 0) {
+            trackCount = playlistData.annotation.track_count;
+        } else if (playlistData.track && Array.isArray(playlistData.track) && playlistData.track.length > 0) {
+            trackCount = playlistData.track.length;
+        }
+
+        const playlistId = `discover-lb-playlist-${identifier}`;  // Use consistent MBID-based ID
+        const virtualPlaylistId = `discover_lb_${tabId}_${identifier}`;
+
+        html += `
+            <div class="discover-section-subsection">
+                <div class="discover-section-header">
+                    <div>
+                        <h3 class="discover-section-subtitle-large">${title}</h3>
+                        <p class="discover-section-meta" id="${playlistId}-meta">by ${creator} • Loading tracks...</p>
+                    </div>
+                    <div class="discover-section-actions">
+                        <button class="action-button secondary"
+                                onclick="openDownloadModalForListenBrainzPlaylist('${identifier}', '${escapeForInlineJs(title)}')"
+                                title="Download missing tracks">
+                            <span class="button-icon">↓</span>
+                            <span class="button-text">Download</span>
+                        </button>
+                        <span class="wing-it-wrap">
+                        <button class="action-button wing-it-btn-sm"
+                                onclick="_toggleWingItDropdownLB(this, '${identifier}', '${escapeForInlineJs(title)}')"
+                                title="Download or sync using raw track names — no metadata discovery">
+                            <span class="button-icon">⚡</span>
+                            <span class="button-text">Wing It</span>
+                        </button>
+                        </span>
+                        <button class="action-button primary"
+                                id="${playlistId}-sync-btn"
+                                onclick="startListenBrainzPlaylistSync('${identifier}')"
+                                title="Sync to media server"
+                                style="display: none;">
+                            <span class="button-icon">⟳</span>
+                            <span class="button-text">Sync</span>
+                        </button>
+                    </div>
+                </div>
+                <!-- Sync Status Display -->
+                <div class="discover-sync-status" id="${playlistId}-sync-status" style="display: none;">
+                    <div class="sync-status-content">
+                        <div class="sync-status-label">
+                            <span class="sync-icon">⟳</span>
+                            <span>Syncing to media server...</span>
+                        </div>
+                        <div class="sync-status-stats">
+                            <span class="sync-stat">♪ <span id="${playlistId}-sync-total">0</span></span>
+                            <span class="sync-separator">/</span>
+                            <span class="sync-stat">✓ <span id="${playlistId}-sync-matched">0</span></span>
+                            <span class="sync-separator">/</span>
+                            <span class="sync-stat">✗ <span id="${playlistId}-sync-failed">0</span></span>
+                            <span class="sync-stat">(<span id="${playlistId}-sync-percentage">0</span>%)</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="discover-playlist-container compact" id="${playlistId}-playlist">
+                    <div class="discover-loading"><div class="loading-spinner"></div><p>Loading tracks...</p></div>
+                </div>
+            </div>
+        `;
+    });
+    return html;
+}
+
+function loadTracksForPlaylists(playlists) {
+    playlists.forEach((playlist) => {
+        const playlistData = playlist.playlist || playlist;
+        const identifier = playlistData.identifier?.split('/').pop() || '';
+        const playlistId = `discover-lb-playlist-${identifier}`;
+        loadListenBrainzPlaylistTracks(identifier, playlistId);
+    });
+}
+
+function switchListenBrainzSubTab(groupId) {
+    activeListenBrainzSubTab = groupId;
+
+    // Update sub-tab buttons
+    const subTabs = document.querySelectorAll('#lb-subtabs-bar .lb-subtab');
+    subTabs.forEach(tab => {
+        if (tab.dataset.group === groupId) {
+            tab.classList.add('active');
+        } else {
+            tab.classList.remove('active');
+        }
+    });
+
+    // Show/hide sub-tab content panels
+    const panels = document.querySelectorAll('.lb-subtab-panel');
+    panels.forEach(panel => {
+        if (panel.dataset.group === groupId) {
+            panel.style.display = 'block';
+            // Load tracks for playlists in this panel if not already loaded
+            const unloaded = panel.querySelectorAll('.discover-loading');
+            if (unloaded.length > 0) {
+                const groupPlaylists = panel._playlists;
+                if (groupPlaylists) {
+                    loadTracksForPlaylists(groupPlaylists);
+                }
+            }
+        } else {
+            panel.style.display = 'none';
+        }
+    });
+}
+
+async function loadListenBrainzTabContent(tabId) {
+    const container = document.getElementById('listenbrainz-tab-content');
+    if (!container) return;
+
+    const playlists = listenbrainzPlaylistsCache[tabId] || [];
+    if (playlists.length === 0) {
+        container.innerHTML = '<div class="discover-empty"><p>No playlists in this category</p></div>';
+        return;
+    }
+
+    // For recommendations tab with multiple playlists, group into sub-tabs
+    if (tabId === 'recommendations' && playlists.length > 1) {
+        const { groups, groupOrder } = groupListenBrainzPlaylists(playlists);
+
+        // If only one group, no need for sub-tabs
+        if (groupOrder.length <= 1) {
+            const html = buildListenBrainzPlaylistsHtml(playlists, tabId);
+            container.innerHTML = html;
+            loadTracksForPlaylists(playlists);
+            return;
+        }
+
+        // Build sub-tabs bar
+        const firstGroup = activeListenBrainzSubTab && groupOrder.includes(activeListenBrainzSubTab)
+            ? activeListenBrainzSubTab
+            : groupOrder[0];
+        activeListenBrainzSubTab = firstGroup;
+
+        let subTabsHtml = '<div class="decade-tabs-inner" id="lb-subtabs-bar" style="margin-bottom: 16px;">';
+        groupOrder.forEach(groupName => {
+            const isActive = groupName === firstGroup;
+            const count = groups[groupName].length;
+            subTabsHtml += `
+                <button class="decade-tab lb-subtab${isActive ? ' active' : ''}"
+                        onclick="switchListenBrainzSubTab('${groupName}')"
+                        data-group="${groupName}"
+                        style="font-size: 13px; padding: 8px 16px;">
+                    ${groupName} (${count})
+                </button>
+            `;
+        });
+        subTabsHtml += '</div>';
+
+        // Build content panels for each group
+        let panelsHtml = '';
+        groupOrder.forEach(groupName => {
+            const isActive = groupName === firstGroup;
+            panelsHtml += `<div class="lb-subtab-panel" data-group="${groupName}" style="display: ${isActive ? 'block' : 'none'};">`;
+            panelsHtml += buildListenBrainzPlaylistsHtml(groups[groupName], tabId);
+            panelsHtml += '</div>';
+        });
+
+        container.innerHTML = subTabsHtml + panelsHtml;
+
+        // Store playlist references on panels for lazy loading
+        groupOrder.forEach(groupName => {
+            const panel = container.querySelector(`.lb-subtab-panel[data-group="${groupName}"]`);
+            if (panel) {
+                panel._playlists = groups[groupName];
+            }
+        });
+
+        // Load tracks only for the active sub-tab
+        loadTracksForPlaylists(groups[firstGroup]);
+        return;
+    }
+
+    // Default: flat list for user/collaborative tabs (or single-group recommendations)
+    const html = buildListenBrainzPlaylistsHtml(playlists, tabId);
+    container.innerHTML = html;
+    loadTracksForPlaylists(playlists);
+}
+
+async function loadListenBrainzPlaylistTracks(identifier, playlistId) {
+    try {
+        const playlistContainer = document.getElementById(`${playlistId}-playlist`);
+        if (!playlistContainer) return;
+
+        // Check cache first
+        if (listenbrainzTracksCache[identifier]) {
+            displayListenBrainzTracks(listenbrainzTracksCache[identifier], playlistId);
+            return;
+        }
+
+        console.log(`🔄 Fetching tracks for playlist: ${identifier}`);
+        const response = await fetch(`/api/discover/listenbrainz/playlist/${identifier}`);
+        console.log(`📡 Response status: ${response.status}`);
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            console.error(`❌ Failed to fetch playlist: ${response.status} - ${errorText}`);
+            throw new Error('Failed to fetch playlist tracks');
+        }
+
+        const data = await response.json();
+        console.log(`📋 Received data:`, data);
+        console.log(`📊 Tracks count: ${data.tracks?.length || 0}`);
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available</p></div>';
+            return;
+        }
+
+        // Cache the tracks
+        listenbrainzTracksCache[identifier] = data.tracks;
+
+        // Display tracks
+        displayListenBrainzTracks(data.tracks, playlistId);
+
+    } catch (error) {
+        console.error('Error loading ListenBrainz playlist tracks:', error);
+        const playlistContainer = document.getElementById(`${playlistId}-playlist`);
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load tracks</p></div>';
+        }
+    }
+}
+
+/**
+ * Clean artist name by removing featured artists
+ * e.g., "Blackstreet feat. Dr. Dre & Queen Pen" -> "Blackstreet"
+ */
+function cleanArtistName(artistName) {
+    if (!artistName) return artistName;
+
+    // Remove everything after common featuring patterns (case insensitive)
+    const patterns = [
+        /\s+feat\.?\s+.*/i,      // "feat." or "feat"
+        /\s+featuring\s+.*/i,    // "featuring"
+        /\s+ft\.?\s+.*/i,        // "ft." or "ft"
+        /\s+with\s+.*/i,         // "with"
+        /\s+x\s+.*/i             // " x " (common in collaborations)
+    ];
+
+    let cleaned = artistName;
+    for (const pattern of patterns) {
+        cleaned = cleaned.replace(pattern, '');
+    }
+
+    return cleaned.trim();
+}
+
+function displayListenBrainzTracks(tracks, playlistId) {
+    const playlistContainer = document.getElementById(`${playlistId}-playlist`);
+    if (!playlistContainer) return;
+
+    console.log(`🎨 Displaying ${tracks.length} tracks for ${playlistId}`);
+    if (tracks.length > 0) {
+        console.log('Sample track data:', tracks[0]);
+    }
+
+    // Update track count in the metadata section
+    const metaElement = document.getElementById(`${playlistId}-meta`);
+    if (metaElement) {
+        // Extract creator from existing text (before the bullet)
+        const currentText = metaElement.textContent;
+        const creatorMatch = currentText.match(/by (.+?) •/);
+        const creator = creatorMatch ? creatorMatch[1] : 'ListenBrainz';
+        metaElement.textContent = `by ${creator} • ${tracks.length} track${tracks.length !== 1 ? 's' : ''}`;
+    }
+
+    // Simple SVG placeholder for missing album art (music note icon)
+    const placeholderImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiMyYTJhMmEiLz48cGF0aCBkPSJNMjQgMTJ2MTIuNUEzLjUgMy41IDAgMSAxIDIwLjUgMjFWMTZsLTUgMXY5YTMuNSAzLjUgMCAxIDEtMy41LTMuNVYxM2wxMi0zeiIgZmlsbD0iIzU1NSIvPjwvc3ZnPg==';
+
+    let html = '<div class="discover-playlist-tracks-compact">';
+    tracks.forEach((track, index) => {
+        const coverUrl = track.album_cover_url || placeholderImage;
+        const durationMin = Math.floor(track.duration_ms / 60000);
+        const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+        const duration = track.duration_ms > 0 ? `${durationMin}:${durationSec.toString().padStart(2, '0')}` : '';
+
+        const albumName = track.album_name ? escapeHtml(track.album_name) : '';
+
+        html += `
+            <div class="discover-playlist-track-compact" data-track-index="${index}">
+                <div class="track-compact-number">${index + 1}</div>
+                <div class="track-compact-image">
+                    <img src="${coverUrl}" alt="${albumName}" loading="lazy" onerror="this.src='${placeholderImage}'">
+                </div>
+                <div class="track-compact-info">
+                    <div class="track-compact-name">${escapeHtml(track.track_name || 'Unknown Track')}</div>
+                    <div class="track-compact-artist">${escapeHtml(cleanArtistName(track.artist_name) || 'Unknown Artist')}</div>
+                </div>
+                <div class="track-compact-album">${albumName}</div>
+                <div class="track-compact-duration">${duration}</div>
+            </div>
+        `;
+    });
+    html += '</div>';
+
+    playlistContainer.innerHTML = html;
+}
+
+function _toggleWingItDropdownLB(btn, identifier, title) {
+    const existing = document.querySelector('.wing-it-dropdown.visible');
+    if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
+
+    const wrap = btn.closest('.wing-it-wrap');
+    if (!wrap) return;
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'wing-it-dropdown';
+    dropdown.innerHTML = `
+        <button class="wing-it-dropdown-item" data-action="download">
+            <span class="wing-it-dropdown-icon">⬇️</span>
+            <span class="wing-it-dropdown-label">Download</span>
+            <span class="wing-it-dropdown-hint">Raw names</span>
+        </button>
+        <button class="wing-it-dropdown-item" data-action="sync">
+            <span class="wing-it-dropdown-icon">🔄</span>
+            <span class="wing-it-dropdown-label">Sync to Server</span>
+            <span class="wing-it-dropdown-hint">Best-effort</span>
+        </button>
+    `;
+
+    dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
+        item.addEventListener('click', () => {
+            dropdown.classList.remove('visible');
+            setTimeout(() => dropdown.remove(), 150);
+            const tracks = listenbrainzTracksCache[identifier];
+            if (!tracks || tracks.length === 0) {
+                showToast('No tracks cached. Try opening the playlist first.', 'error');
+                return;
+            }
+            if (item.dataset.action === 'download') {
+                wingItDownload(tracks, title, 'ListenBrainz', identifier, true);
+            } else {
+                _wingItSync(tracks, title, 'ListenBrainz', identifier);
+            }
+        });
+    });
+
+    const btnRect2 = btn.getBoundingClientRect();
+    if (btnRect2.top < 200) dropdown.classList.add('flip-down');
+
+    wrap.appendChild(dropdown);
+    requestAnimationFrame(() => dropdown.classList.add('visible'));
+
+    setTimeout(() => {
+        const closeHandler = e => {
+            if (!dropdown.contains(e.target) && e.target !== btn) {
+                dropdown.classList.remove('visible');
+                setTimeout(() => dropdown.remove(), 150);
+                document.removeEventListener('click', closeHandler);
+            }
+        };
+        document.addEventListener('click', closeHandler);
+    }, 50);
+}
+
+async function _wingItFromLBCard(identifier, title) {
+    // Legacy — kept for backward compat
+    const tracks = listenbrainzTracksCache[identifier];
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks cached for this playlist. Try opening the discovery modal first.', 'error');
+        return;
+    }
+    wingItDownload(tracks, title, 'ListenBrainz', identifier);
+}
+
+async function openDownloadModalForListenBrainzPlaylist(identifier, title) {
+    try {
+        const tracks = listenbrainzTracksCache[identifier];
+        if (!tracks || tracks.length === 0) {
+            showToast('No tracks to download', 'error');
+            return;
+        }
+
+        console.log(`🎵 Opening ListenBrainz discovery modal: ${title}`);
+        console.log(`🔍 Looking for existing state with identifier: ${identifier}`);
+        console.log(`📋 All ListenBrainz states:`, Object.keys(listenbrainzPlaylistStates));
+
+        // Check if state already exists from backend hydration (like Beatport does)
+        const existingState = listenbrainzPlaylistStates[identifier];
+        console.log(`🔍 Existing state found:`, existingState ? `Phase: ${existingState.phase}` : 'None');
+
+        if (existingState && existingState.phase !== 'fresh') {
+            // State exists - rehydrate the modal with existing data
+            console.log(`🔄 Rehydrating existing ListenBrainz state (Phase: ${existingState.phase})`);
+
+            // If downloading/download_complete, rehydrate download modal instead
+            if ((existingState.phase === 'downloading' || existingState.phase === 'download_complete') &&
+                existingState.convertedSpotifyPlaylistId && existingState.download_process_id) {
+
+                console.log(`📥 Rehydrating download modal for ListenBrainz playlist: ${title}`);
+
+                // Implement download modal rehydration (like Beatport does)
+                const convertedPlaylistId = existingState.convertedSpotifyPlaylistId;
+
+                try {
+                    // Check if modal already exists (user just closed it)
+                    if (activeDownloadProcesses[convertedPlaylistId]) {
+                        console.log(`✅ Download modal already exists, just showing it`);
+                        const process = activeDownloadProcesses[convertedPlaylistId];
+                        if (process.modalElement) {
+                            process.modalElement.style.display = 'flex';
+                        }
+                        return;
+                    }
+
+                    // Create the download modal using the ListenBrainz state
+                    console.log(`🆕 Creating new download modal for rehydration`);
+                    // Get tracks from the existing state
+                    let spotifyTracks = [];
+
+                    if (existingState && existingState.discovery_results) {
+                        spotifyTracks = existingState.discovery_results
+                            .filter(result => result.spotify_data)
+                            .map(result => {
+                                const track = result.spotify_data;
+                                // Ensure artists is an array of strings
+                                if (track.artists && Array.isArray(track.artists)) {
+                                    track.artists = track.artists.map(artist =>
+                                        typeof artist === 'string' ? artist : (artist.name || artist)
+                                    );
+                                } else if (track.artists && typeof track.artists === 'string') {
+                                    track.artists = [track.artists];
+                                } else {
+                                    track.artists = ['Unknown Artist'];
+                                }
+                                return {
+                                    id: track.id,
+                                    name: track.name,
+                                    artists: track.artists,
+                                    album: track.album || 'Unknown Album',
+                                    duration_ms: track.duration_ms || 0,
+                                    external_urls: track.external_urls || {}
+                                };
+                            });
+                    }
+
+                    if (spotifyTracks.length > 0) {
+                        await openDownloadMissingModalForYouTube(
+                            convertedPlaylistId,
+                            title,
+                            spotifyTracks
+                        );
+
+                        // Set the modal to running state with the correct batch ID
+                        const process = activeDownloadProcesses[convertedPlaylistId];
+                        if (process) {
+                            process.status = existingState.phase === 'download_complete' ? 'complete' : 'running';
+                            process.batchId = existingState.download_process_id;
+
+                            // Update UI to running state
+                            const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                            const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                            if (beginBtn) beginBtn.style.display = 'none';
+                            if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                            // Start polling for this process
+                            startModalDownloadPolling(convertedPlaylistId);
+
+                            // Add to discover download sidebar if this has discoverMetadata
+                            if (process.discoverMetadata) {
+                                const playlistName = title;
+                                const imageUrl = process.discoverMetadata.imageUrl;
+                                const type = process.discoverMetadata.type || 'album';
+                                addDiscoverDownload(convertedPlaylistId, playlistName, type, imageUrl);
+                                console.log(`📥 [REHYDRATION] Added ListenBrainz download to sidebar: ${playlistName}`);
+                            }
+
+                            // Show modal since user clicked the download button (different from background rehydration)
+                            if (process.modalElement) {
+                                process.modalElement.style.display = 'flex';
+                            }
+                            console.log(`✅ Rehydrated download modal for ListenBrainz playlist: ${title}`);
+                        }
+                    } else {
+                        console.warn(`⚠️ No Spotify tracks found for ListenBrainz download modal: ${title}`);
+                    }
+                } catch (error) {
+                    console.warn(`⚠️ Error setting up download process for ListenBrainz playlist "${title}":`, error.message);
+                }
+
+                return;
+            }
+
+            // Open discovery modal with existing state
+            openYouTubeDiscoveryModal(identifier);
+
+            // If still discovering, resume polling
+            if (existingState.phase === 'discovering') {
+                console.log(`🔄 Resuming discovery polling for: ${title}`);
+                startListenBrainzDiscoveryPolling(identifier);
+            }
+
+            return;
+        }
+
+        // No existing state - create fresh state and start discovery
+        console.log(`🆕 Creating fresh ListenBrainz state for: ${title}`);
+
+        // Create YouTube-style state entry for this ListenBrainz playlist (like Beatport does)
+        const listenbrainzState = {
+            phase: 'fresh',
+            playlist: {
+                name: title,
+                tracks: tracks.map(track => ({
+                    track_name: track.track_name,
+                    artist_name: track.artist_name,
+                    album_name: track.album_name,
+                    duration_ms: track.duration_ms || 0,
+                    mbid: track.mbid,
+                    release_mbid: track.release_mbid,
+                    album_cover_url: track.album_cover_url
+                })),
+                description: `${tracks.length} tracks from ${title}`,
+                source: 'listenbrainz'
+            },
+            is_listenbrainz_playlist: true,
+            playlist_mbid: identifier,  // Link to ListenBrainz playlist
+            // Initialize discovery state properties (both naming conventions for modal compatibility)
+            discovery_results: [],
+            discoveryResults: [],
+            discovery_progress: 0,
+            discoveryProgress: 0,
+            spotify_matches: 0,
+            spotifyMatches: 0,
+            spotify_total: tracks.length,
+            spotifyTotal: tracks.length
+        };
+
+        // Store in ListenBrainz playlist states
+        listenbrainzPlaylistStates[identifier] = listenbrainzState;
+
+        // Start discovery automatically (like Beatport and Tidal do)
+        try {
+            console.log(`🔍 Starting ListenBrainz discovery for: ${title}`);
+
+            // Call the discovery start endpoint with playlist data
+            const response = await fetch(`/api/listenbrainz/discovery/start/${identifier}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    playlist: listenbrainzState.playlist
+                })
+            });
+
+            const result = await response.json();
+            if (result.success) {
+                // Update state to discovering
+                listenbrainzPlaylistStates[identifier].phase = 'discovering';
+
+                // Start polling for progress
+                startListenBrainzDiscoveryPolling(identifier);
+
+                console.log(`✅ Started ListenBrainz discovery for: ${title}`);
+            } else {
+                console.error('❌ Error starting ListenBrainz discovery:', result.error);
+                showToast(`Error starting discovery: ${result.error}`, 'error');
+            }
+        } catch (error) {
+            console.error('❌ Error starting ListenBrainz discovery:', error);
+            showToast(`Error starting discovery: ${error.message}`, 'error');
+        }
+
+        // Open the existing YouTube discovery modal infrastructure
+        openYouTubeDiscoveryModal(identifier);
+
+        console.log(`✅ ListenBrainz discovery modal opened for ${title} with ${tracks.length} tracks`);
+
+    } catch (error) {
+        console.error('Error opening discovery modal for ListenBrainz playlist:', error);
+        showToast('Failed to open discovery modal', 'error');
+    }
+}
+
+async function openListenBrainzPlaylist(playlistMbid, playlistName) {
+    try {
+        showLoadingOverlay(`Loading ${playlistName}...`);
+
+        const response = await fetch(`/api/discover/listenbrainz/playlist/${playlistMbid}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch playlist');
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.playlist) {
+            showToast('Failed to load playlist', 'error');
+            hideLoadingOverlay();
+            return;
+        }
+
+        const playlist = data.playlist;
+        const tracks = playlist.tracks || [];
+
+        if (tracks.length === 0) {
+            showToast('This playlist is empty', 'info');
+            hideLoadingOverlay();
+            return;
+        }
+
+        // Convert to Spotify-like format for compatibility with download modal
+        const spotifyTracks = tracks.map(track => ({
+            id: track.recording_mbid || `listenbrainz_${track.title}_${track.creator}`.replace(/[^a-z0-9]/gi, '_'),  // Generate ID if missing
+            name: track.title || 'Unknown',
+            artists: [{ name: cleanArtistName(track.creator || 'Unknown') }], // Proper Spotify format
+            album: {
+                name: track.album || 'Unknown Album',
+                images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+            },
+            duration_ms: track.duration_ms || 0,
+            listenbrainz_metadata: track.additional_metadata
+        }));
+
+        const virtualPlaylistId = `listenbrainz_${playlistMbid}`;
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error(`Error opening ListenBrainz playlist:`, error);
+        showToast(`Failed to load playlist`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+async function refreshListenBrainzPlaylists() {
+    const button = document.getElementById('listenbrainz-refresh-btn');
+    if (!button) return;
+
+    try {
+        // Show loading state on button
+        const originalContent = button.innerHTML;
+        button.disabled = true;
+        button.innerHTML = '<span class="button-icon">⏳</span><span class="button-text">Refreshing...</span>';
+
+        console.log('🔄 Refreshing ListenBrainz playlists...');
+        showToast('Refreshing ListenBrainz playlists...', 'info');
+
+        const response = await fetch('/api/discover/listenbrainz/refresh', {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            throw new Error(`Failed to refresh: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (data.success) {
+            const summary = data.summary || {};
+            let message = 'ListenBrainz playlists refreshed!';
+
+            // Build summary message
+            const updates = [];
+            for (const [type, stats] of Object.entries(summary)) {
+                const total = (stats.new || 0) + (stats.updated || 0);
+                if (total > 0) {
+                    updates.push(`${total} ${type}`);
+                }
+            }
+
+            if (updates.length > 0) {
+                message += ` Updated: ${updates.join(', ')}`;
+            } else {
+                message = 'All playlists are up to date';
+            }
+
+            console.log('✅ Refresh complete:', data.summary);
+            showToast(message, 'success');
+
+            // Reload the tabs to show updated data
+            await initializeListenBrainzTabs();
+
+        } else {
+            throw new Error(data.error || 'Unknown error');
+        }
+
+        // Restore button
+        button.disabled = false;
+        button.innerHTML = originalContent;
+
+    } catch (error) {
+        console.error('Error refreshing ListenBrainz playlists:', error);
+        showToast(`Failed to refresh: ${error.message}`, 'error');
+
+        // Restore button
+        button.disabled = false;
+        button.innerHTML = '<span class="button-icon">🔄</span><span class="button-text">Refresh</span>';
+    }
+}
+
+// ===============================
+// SEASONAL DISCOVERY
+// ===============================
+
+async function loadSeasonalContent() {
+    try {
+        const response = await fetch('/api/discover/seasonal/current');
+        if (!response.ok) {
+            console.error('Failed to fetch seasonal content');
+            return;
+        }
+
+        const data = await response.json();
+
+        // If no active season, hide seasonal sections
+        if (!data.success || !data.season) {
+            hideSeasonalSections();
+            return;
+        }
+
+        currentSeasonKey = data.season;
+
+        // Load seasonal albums
+        await loadSeasonalAlbums(data);
+
+        // Load seasonal playlist if available
+        if (data.playlist_available) {
+            await loadSeasonalPlaylist(data);
+        }
+
+    } catch (error) {
+        console.error('Error loading seasonal content:', error);
+        hideSeasonalSections();
+    }
+}
+
+async function loadSeasonalAlbums(seasonData) {
+    try {
+        const carousel = document.getElementById('seasonal-albums-carousel');
+        if (!carousel) return;
+
+        // Show seasonal section
+        const seasonalSection = document.getElementById('seasonal-albums-section');
+        if (seasonalSection) {
+            seasonalSection.style.display = 'block';
+        }
+
+        // Update header
+        const seasonalTitle = document.getElementById('seasonal-albums-title');
+        const seasonalSubtitle = document.getElementById('seasonal-albums-subtitle');
+
+        if (seasonalTitle) {
+            seasonalTitle.textContent = `${seasonData.icon} ${seasonData.name}`;
+        }
+        if (seasonalSubtitle) {
+            seasonalSubtitle.textContent = seasonData.description;
+        }
+
+        // Store albums for download functionality
+        discoverSeasonalAlbums = seasonData.albums || [];
+
+        if (discoverSeasonalAlbums.length === 0) {
+            carousel.innerHTML = '<div class="discover-empty"><p>No seasonal albums found</p></div>';
+            return;
+        }
+
+        // Build carousel HTML
+        let html = '';
+        discoverSeasonalAlbums.forEach((album, index) => {
+            const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
+            html += `
+                <div class="discover-card" onclick="openDownloadModalForSeasonalAlbum(${index})" style="cursor: pointer;">
+                    <div class="discover-card-image">
+                        <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
+                    </div>
+                    <div class="discover-card-info">
+                        <h4 class="discover-card-title">${album.album_name}</h4>
+                        <p class="discover-card-subtitle">${album.artist_name}</p>
+                        ${album.release_date ? `<p class="discover-card-meta">${album.release_date}</p>` : ''}
+                    </div>
+                </div>
+            `;
+        });
+
+        carousel.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading seasonal albums:', error);
+    }
+}
+
+async function loadSeasonalPlaylist(seasonData) {
+    try {
+        const playlistContainer = document.getElementById('seasonal-playlist');
+        if (!playlistContainer) return;
+
+        // Show seasonal playlist section
+        const seasonalPlaylistSection = document.getElementById('seasonal-playlist-section');
+        if (seasonalPlaylistSection) {
+            seasonalPlaylistSection.style.display = 'block';
+        }
+
+        // Update header
+        const playlistTitle = document.getElementById('seasonal-playlist-title');
+        const playlistSubtitle = document.getElementById('seasonal-playlist-subtitle');
+
+        if (playlistTitle) {
+            playlistTitle.textContent = `${seasonData.icon} ${seasonData.name} Mix`;
+        }
+        if (playlistSubtitle) {
+            playlistSubtitle.textContent = `Curated playlist for ${seasonData.name.toLowerCase()}`;
+        }
+
+        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading playlist...</p></div>';
+
+        // Fetch playlist tracks
+        const response = await fetch(`/api/discover/seasonal/${currentSeasonKey}/playlist`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch seasonal playlist');
+        }
+
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available yet</p></div>';
+            return;
+        }
+
+        // Store tracks for download/sync functionality
+        discoverSeasonalTracks = data.tracks;
+
+        // Build compact playlist HTML
+        let html = '<div class="discover-playlist-tracks-compact">';
+        data.tracks.forEach((track, index) => {
+            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+            const durationMin = Math.floor(track.duration_ms / 60000);
+            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+
+            html += `
+                <div class="discover-playlist-track-compact" data-track-index="${index}">
+                    <div class="track-compact-number">${index + 1}</div>
+                    <div class="track-compact-image">
+                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
+                    </div>
+                    <div class="track-compact-info">
+                        <div class="track-compact-name">${track.track_name}</div>
+                        <div class="track-compact-artist">${track.artist_name}</div>
+                    </div>
+                    <div class="track-compact-album">${track.album_name}</div>
+                    <div class="track-compact-duration">${duration}</div>
+                </div>
+            `;
+        });
+        html += '</div>';
+
+        playlistContainer.innerHTML = html;
+
+    } catch (error) {
+        console.error('Error loading seasonal playlist:', error);
+        const playlistContainer = document.getElementById('seasonal-playlist');
+        if (playlistContainer) {
+            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load playlist</p></div>';
+        }
+    }
+}
+
+function hideSeasonalSections() {
+    const seasonalAlbumsSection = document.getElementById('seasonal-albums-section');
+    const seasonalPlaylistSection = document.getElementById('seasonal-playlist-section');
+
+    if (seasonalAlbumsSection) {
+        seasonalAlbumsSection.style.display = 'none';
+    }
+    if (seasonalPlaylistSection) {
+        seasonalPlaylistSection.style.display = 'none';
+    }
+}
+
+async function openDownloadModalForSeasonalAlbum(albumIndex) {
+    const album = discoverSeasonalAlbums[albumIndex];
+    if (!album) {
+        showToast('Album data not found', 'error');
+        return;
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for seasonal album: ${album.album_name}`);
+    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+
+    try {
+        // Determine source and album ID - use source-agnostic endpoint (matches Recent Releases)
+        const source = album.source || (album.spotify_album_id && !album.spotify_album_id.match(/^\d+$/) ? 'spotify' : 'itunes');
+        const albumId = album.spotify_album_id;
+
+        if (!albumId) {
+            throw new Error('No album ID available');
+        }
+
+        // Fetch album tracks from appropriate source (pass name/artist for Hydrabase support)
+        const _dap1 = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+        const response = await fetch(`/api/discover/album/${source}/${albumId}?${_dap1}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch album tracks');
+        }
+
+        const albumData = await response.json();
+        if (!albumData.tracks || albumData.tracks.length === 0) {
+            throw new Error('No tracks found in album');
+        }
+
+        // Convert to expected format with full album context (matches Recent Releases)
+        const spotifyTracks = albumData.tracks.map(track => {
+            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+            if (Array.isArray(artists)) {
+                artists = artists.map(a => a.name || a);
+            }
+
+            return {
+                id: track.id,
+                name: track.name,
+                artists: artists,
+                album: {
+                    id: albumData.id,
+                    name: albumData.name,
+                    album_type: albumData.album_type || 'album',
+                    total_tracks: albumData.total_tracks || 0,
+                    release_date: albumData.release_date || '',
+                    images: albumData.images || []
+                },
+                duration_ms: track.duration_ms || 0,
+                track_number: track.track_number || 0
+            };
+        });
+
+        // Create virtual playlist ID
+        const virtualPlaylistId = `seasonal_album_${albumId}`;
+
+        // Pass proper artist/album context for album download (1 worker + source reuse)
+        const artistContext = {
+            name: album.artist_name,
+            source: source
+        };
+
+        const albumContext = {
+            id: albumData.id,
+            name: albumData.name,
+            album_type: albumData.album_type || 'album',
+            total_tracks: albumData.total_tracks || 0,
+            release_date: albumData.release_date || '',
+            images: albumData.images || []
+        };
+
+        // Open download modal with album context (same as Recent Releases)
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
+
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error(`Error loading seasonal album: ${error.message}`);
+        hideLoadingOverlay();
+        showToast(`Failed to load album tracks: ${error.message}`, 'error');
+    }
+}
+
+async function openDownloadModalForSeasonalPlaylist() {
+    if (!discoverSeasonalTracks || discoverSeasonalTracks.length === 0) {
+        alert('No seasonal tracks available');
+        return;
+    }
+
+    // Convert to track format expected by modal
+    const tracks = discoverSeasonalTracks.map(track => ({
+        id: track.spotify_track_id,
+        name: track.track_name,
+        artists: [{ name: track.artist_name }],
+        album: { name: track.album_name }
+    }));
+
+    openDownloadMissingModal(tracks, `${currentSeasonKey} Seasonal Mix`);
+}
+
+async function syncSeasonalPlaylist() {
+    if (!currentSeasonKey) {
+        alert('No active season');
+        return;
+    }
+
+    // Use the same sync logic as other discover playlists
+    // Create a virtual playlist ID for tracking
+    const virtualPlaylistId = `discover_seasonal_${currentSeasonKey}`;
+
+    // Build playlist data from seasonal tracks
+    const playlistData = {
+        id: virtualPlaylistId,
+        name: `${currentSeasonKey.charAt(0).toUpperCase() + currentSeasonKey.slice(1)} Mix`,
+        tracks: discoverSeasonalTracks.map(track => ({
+            id: track.spotify_track_id,
+            name: track.track_name,
+            artists: [{ name: track.artist_name }],
+            album: { name: track.album_name },
+            duration_ms: track.duration_ms
+        }))
+    };
+
+    // Trigger sync (reuse existing sync infrastructure)
+    await syncPlaylistToLibrary(playlistData);
+}
+
+// ===============================
+// PERSONALIZED PLAYLISTS
+// ===============================
+
+async function loadPersonalizedRecentlyAdded() {
+    try {
+        const container = document.getElementById('personalized-recently-added');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/recently-added');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedRecentlyAdded = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading recently added:', error);
+    }
+}
+
+async function loadPersonalizedTopTracks() {
+    try {
+        const container = document.getElementById('personalized-top-tracks');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/top-tracks');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedTopTracks = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading top tracks:', error);
+    }
+}
+
+async function loadPersonalizedForgottenFavorites() {
+    try {
+        const container = document.getElementById('personalized-forgotten-favorites');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/forgotten-favorites');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedForgottenFavorites = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading forgotten favorites:', error);
+    }
+}
+
+async function loadPersonalizedPopularPicks() {
+    try {
+        const container = document.getElementById('personalized-popular-picks');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/popular-picks');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedPopularPicks = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading popular picks:', error);
+    }
+}
+
+async function loadPersonalizedHiddenGems() {
+    try {
+        const container = document.getElementById('personalized-hidden-gems');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/hidden-gems');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedHiddenGems = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading hidden gems:', error);
+    }
+}
+
+async function loadPersonalizedDailyMixes() {
+    try {
+        const container = document.getElementById('daily-mixes-grid');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/daily-mixes');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.mixes || data.mixes.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedDailyMixes = data.mixes;
+
+        // Render Daily Mix cards
+        let html = '';
+        data.mixes.forEach((mix, index) => {
+            const coverUrl = mix.tracks && mix.tracks.length > 0 ?
+                (mix.tracks[0].album_cover_url || '/static/placeholder-album.png') :
+                '/static/placeholder-album.png';
+
+            html += `
+                <div class="discover-playlist-card" onclick="openDailyMix(${index})">
+                    <div class="discover-playlist-cover">
+                        <img src="${coverUrl}" alt="${mix.name}" loading="lazy">
+                        <div class="playlist-play-overlay">▶</div>
+                    </div>
+                    <div class="discover-playlist-info">
+                        <h4 class="discover-playlist-name">${mix.name}</h4>
+                        <p class="discover-playlist-description">${mix.description}</p>
+                        <p class="discover-playlist-count">${mix.track_count} tracks</p>
+                    </div>
+                </div>
+            `;
+        });
+
+        container.innerHTML = html;
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading daily mixes:', error);
+    }
+}
+
+function renderCompactPlaylist(container, tracks) {
+    let html = '<div class="discover-playlist-tracks-compact">';
+
+    tracks.forEach((track, index) => {
+        const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
+        const durationMin = Math.floor(track.duration_ms / 60000);
+        const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
+        const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
+        const artistEsc = (track.artist_name || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
+
+        html += `
+            <div class="discover-playlist-track-compact" data-track-index="${index}">
+                <div class="track-compact-number">${index + 1}</div>
+                <div class="track-compact-image">
+                    <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
+                </div>
+                <div class="track-compact-info">
+                    <div class="track-compact-name">${track.track_name}</div>
+                    <div class="track-compact-artist">${track.artist_name}</div>
+                </div>
+                <div class="track-compact-album">${track.album_name}</div>
+                <div class="track-compact-duration">${duration}</div>
+                <button class="track-compact-block" onclick="event.stopPropagation(); blockDiscoveryArtist('${artistEsc}')" title="Block ${artistEsc} from discovery">✕</button>
+            </div>
+        `;
+    });
+
+    html += '</div>';
+    container.innerHTML = html;
+}
+
+async function blockDiscoveryArtist(artistName) {
+    if (!confirm(`Block "${artistName}" from all discovery playlists?`)) return;
+    try {
+        const res = await fetch('/api/discover/artist-blacklist', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_name: artistName })
+        });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Blocked ${artistName} from discovery`, 'success');
+            // Refresh all discovery sections to remove the artist
+            loadPersonalizedHiddenGems();
+            loadDiscoveryShuffle();
+            loadPersonalizedDailyMixes();
+        } else {
+            showToast(data.error || 'Failed to block artist', 'error');
+        }
+    } catch (e) {
+        showToast('Error blocking artist', 'error');
+    }
+}
+
+async function openDiscoveryBlacklistModal() {
+    if (document.getElementById('discovery-blacklist-modal-overlay')) return;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'discovery-blacklist-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="discover-blacklist-modal">
+            <div class="discover-blacklist-modal-header">
+                <h2>Blocked Artists</h2>
+                <p>These artists won't appear in any discovery playlist across all sources</p>
+                <button class="watch-all-close" onclick="document.getElementById('discovery-blacklist-modal-overlay').remove()">&times;</button>
+            </div>
+            <div class="discover-blacklist-modal-search">
+                <input type="text" id="dbl-search-input" placeholder="Search for an artist to block..." autocomplete="off">
+                <div id="dbl-search-results" class="dbl-search-results" style="display:none"></div>
+            </div>
+            <div class="discover-blacklist-modal-list" id="dbl-list">
+                <div class="discover-blacklist-empty">Loading...</div>
+            </div>
+            <div class="discover-blacklist-modal-footer">
+                <button class="watch-all-btn watch-all-btn-cancel" onclick="document.getElementById('discovery-blacklist-modal-overlay').remove()">Close</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Wire up search
+    let searchTimer = null;
+    const input = document.getElementById('dbl-search-input');
+    input.addEventListener('input', () => {
+        clearTimeout(searchTimer);
+        const q = input.value.trim();
+        if (q.length < 2) { document.getElementById('dbl-search-results').style.display = 'none'; return; }
+        searchTimer = setTimeout(() => _dblSearch(q), 300);
+    });
+
+    _dblLoadList();
+}
+
+async function _dblSearch(query) {
+    const resultsEl = document.getElementById('dbl-search-results');
+    if (!resultsEl) return;
+    try {
+        // Use existing enhanced search to find artists
+        const res = await fetch('/api/enhanced-search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query, limit: 8 })
+        });
+        const data = await res.json();
+        const artists = data.spotify_artists || data.artists || [];
+        if (artists.length === 0) {
+            resultsEl.innerHTML = '<div class="dbl-search-empty">No artists found</div>';
+            resultsEl.style.display = 'block';
+            return;
+        }
+        resultsEl.innerHTML = artists.map(a => {
+            const name = _escToast(a.name || '');
+            const img = a.image_url ? `<img src="${a.image_url}" class="dbl-search-img">` : '<div class="dbl-search-img-placeholder">🎤</div>';
+            return `<div class="dbl-search-item" onclick="_dblBlockFromSearch('${name.replace(/'/g, "\\'")}')">
+                ${img}
+                <span class="dbl-search-name">${name}</span>
+                <span class="dbl-search-action">Block</span>
+            </div>`;
+        }).join('');
+        resultsEl.style.display = 'block';
+    } catch (e) {
+        resultsEl.style.display = 'none';
+    }
+}
+
+async function _dblBlockFromSearch(artistName) {
+    try {
+        const res = await fetch('/api/discover/artist-blacklist', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_name: artistName })
+        });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Blocked ${artistName} from discovery`, 'success');
+            document.getElementById('dbl-search-results').style.display = 'none';
+            const input = document.getElementById('dbl-search-input');
+            if (input) input.value = '';
+            _dblLoadList();
+        }
+    } catch (e) {
+        showToast('Error blocking artist', 'error');
+    }
+}
+
+async function _dblLoadList() {
+    const container = document.getElementById('dbl-list');
+    if (!container) return;
+    try {
+        const res = await fetch('/api/discover/artist-blacklist');
+        const data = await res.json();
+        if (!data.success || !data.entries || data.entries.length === 0) {
+            container.innerHTML = '<div class="discover-blacklist-empty">No blocked artists yet — search above to block one</div>';
+            return;
+        }
+        container.innerHTML = data.entries.map(e => `
+            <div class="discover-blacklist-item">
+                <span class="discover-blacklist-name">${_escToast(e.artist_name)}</span>
+                <span class="discover-blacklist-date">${e.created_at ? new Date(e.created_at).toLocaleDateString() : ''}</span>
+                <button class="discover-blacklist-remove" onclick="unblockDiscoveryArtist(${e.id}, '${_escAttr(e.artist_name)}')" title="Unblock">✕</button>
+            </div>
+        `).join('');
+    } catch (e) {
+        container.innerHTML = '<div class="discover-blacklist-empty">Failed to load</div>';
+    }
+}
+
+async function unblockDiscoveryArtist(id, name) {
+    try {
+        const res = await fetch(`/api/discover/artist-blacklist/${id}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Unblocked ${name}`, 'success');
+            _dblLoadList();
+        }
+    } catch (e) {
+        showToast('Error unblocking artist', 'error');
+    }
+}
+
+// Backwards compat — called during page init but now a no-op (modal handles it)
+// ── Your Artists (Liked Artists Pool) ──
+
+async function loadYourArtists() {
+    const section = document.getElementById('your-artists-section');
+    const carousel = document.getElementById('your-artists-carousel');
+    const subtitle = document.getElementById('your-artists-subtitle');
+    if (!section || !carousel) return;
+
+    try {
+        const resp = await fetch('/api/discover/your-artists');
+        if (!resp.ok) return;
+        const data = await resp.json();
+
+        if (!data.artists || data.artists.length === 0) {
+            if (data.stale) {
+                // First load — show section with loading state, poll until ready
+                section.style.display = '';
+                if (subtitle) subtitle.textContent = 'Discovering your artists across connected services...';
+                carousel.innerHTML = `
+                    <div class="ya-loading">
+                        <div class="watch-all-loading-spinner"></div>
+                        <span>Fetching and matching artists from your services...</span>
+                    </div>
+                `;
+                _pollYourArtists();
+            } else {
+                section.style.display = 'none';
+            }
+            return;
+        }
+
+        // Show section
+        section.style.display = '';
+
+        // Update subtitle with source info
+        const sources = new Set();
+        data.artists.forEach(a => (a.source_services || []).forEach(s => sources.add(s)));
+        const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
+        const sourceList = [...sources].map(s => sourceNames[s] || s).join(' and ');
+        if (subtitle) subtitle.textContent = `Artists you follow on ${sourceList || 'your music services'}`;
+
+        if (data.stale) {
+            if (subtitle) subtitle.textContent += ' (updating...)';
+            _pollYourArtists();
+        }
+
+        // Store for modal access and render carousel cards
+        window._yaArtists = {};
+        window._yaActiveSource = data.active_source || 'spotify';
+        data.artists.forEach(a => { window._yaArtists[a.id] = a; });
+        carousel.innerHTML = data.artists.map(a => _renderYourArtistCard(a)).join('');
+
+    } catch (err) {
+        console.error('Error loading Your Artists:', err);
+    }
+}
+
+function _pollYourArtists() {
+    // Poll every 5s until artists appear, then stop
+    if (window._yaPoller) clearInterval(window._yaPoller);
+    let attempts = 0;
+    window._yaPoller = setInterval(async () => {
+        attempts++;
+        if (attempts > 60) { clearInterval(window._yaPoller); window._yaPoller = null; return; }
+        try {
+            const resp = await fetch('/api/discover/your-artists');
+            if (!resp.ok) return;
+            const data = await resp.json();
+            if (data.artists && data.artists.length > 0) {
+                clearInterval(window._yaPoller);
+                window._yaPoller = null;
+                loadYourArtists(); // Re-render with real data
+            }
+        } catch (e) { }
+    }, 5000);
+}
+
+function _renderYourArtistCard(artist) {
+    const _esc = (s) => escapeHtml(s || '');
+    const img = artist.image_url || '';
+
+    // Build metadata source badges (same pattern as library page)
+    const badges = [];
+    if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify' });
+    if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music' });
+    if (artist.deezer_artist_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer' });
+    if (artist.discogs_artist_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs' });
+    const badgeHTML = badges.map(b =>
+        `<div class="ya-badge" title="${b.title}">${b.logo ? `<img src="${b.logo}" onerror="this.parentNode.textContent='${b.fb}'">` : `<span>${b.fb}</span>`}</div>`
+    ).join('');
+
+    // Origin dots (which services the artist came from)
+    const sources = artist.source_services || [];
+    const sourceColors = { spotify: '#1DB954', lastfm: '#D51007', tidal: '#00FFFF', deezer: '#A238FF' };
+    const originDots = sources.map(s =>
+        `<span class="ya-origin-dot" style="background:${sourceColors[s] || '#666'}" title="From ${s}"></span>`
+    ).join('');
+
+    const watchlistClass = artist.on_watchlist ? 'active' : '';
+    const hasId = artist.active_source_id && artist.active_source_id !== '';
+
+    // Navigate to artist page (name click)
+    const navAction = hasId
+        ? `event.stopPropagation(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(artist.active_source_id)}', name:'${escapeForInlineJs(artist.artist_name)}', image_url:'${escapeForInlineJs(img)}'}), 200)`
+        : '';
+
+    // Open info modal (card body click) — pass pool ID so we can look up all data
+    const infoAction = hasId
+        ? `openYourArtistInfoModal(${artist.id})`
+        : '';
+
+    // Deezer fallback for images
+    const deezerFb = artist.deezer_artist_id ? `onerror="if(!this.dataset.tried){this.dataset.tried='1';this.src='https://api.deezer.com/artist/${artist.deezer_artist_id}/image?size=big'}else{this.style.display='none';this.nextElementSibling.style.display='flex'}"` : `onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"`;
+
+    return `
+        <div class="ya-card" ${infoAction ? `onclick="${infoAction}"` : ''}>
+            <div class="ya-card-img">
+                ${img ? `<img src="${img}" alt="" loading="lazy" ${deezerFb}>` : ''}
+                <div class="ya-card-placeholder" ${img ? 'style="display:none"' : ''}>&#9835;</div>
+            </div>
+            <div class="ya-card-gradient"></div>
+            <div class="ya-card-badges">${badgeHTML}</div>
+            <button class="ya-watchlist-btn ${watchlistClass}" title="${artist.on_watchlist ? 'On watchlist' : 'Add to watchlist'}"
+                    onclick="event.stopPropagation(); toggleYourArtistWatchlist(${artist.id}, '${escapeForInlineJs(artist.artist_name)}', '${escapeForInlineJs(artist.active_source_id || '')}', '${escapeForInlineJs(artist.active_source || '')}', this)">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="${artist.on_watchlist ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+                </svg>
+            </button>
+            <div class="ya-card-info">
+                <div class="ya-card-info-row">
+                    <div class="ya-origin-dots">${originDots}</div>
+                </div>
+                <div class="ya-card-name" ${navAction ? `onclick="${navAction}"` : ''}>${_esc(artist.artist_name)}</div>
+            </div>
+        </div>
+    `;
+}
+
+async function openYourArtistInfoModal(poolId) {
+    const pool = (window._yaArtists || {})[poolId];
+    if (!pool) return;
+
+    const artistId = pool.active_source_id;
+    const artistName = pool.artist_name;
+    const imageUrl = pool.image_url || '';
+
+    const existing = document.getElementById('ya-info-modal-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'ya-info-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.style.zIndex = '10001';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    // Build matched source badges from pool data
+    const _mb = (logo, fb, title) => `<div class="ya-info-badge" title="${title}">${logo ? `<img src="${logo}" onerror="this.parentNode.textContent='${fb}'">` : `<span>${fb}</span>`}</div>`;
+    const matchBadges = [];
+    if (pool.spotify_artist_id) matchBadges.push(_mb(SPOTIFY_LOGO_URL, 'SP', 'Matched on Spotify'));
+    if (pool.itunes_artist_id) matchBadges.push(_mb(ITUNES_LOGO_URL, 'IT', 'Matched on Apple Music'));
+    if (pool.deezer_artist_id) matchBadges.push(_mb(DEEZER_LOGO_URL, 'Dz', 'Matched on Deezer'));
+    if (pool.discogs_artist_id) matchBadges.push(_mb(DISCOGS_LOGO_URL, 'DC', 'Matched on Discogs'));
+
+    // Origin info
+    const sources = pool.source_services || [];
+    const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
+    const originText = sources.map(s => sourceNames[s] || s).join(', ');
+
+    overlay.innerHTML = `
+        <div class="ya-info-modal">
+            <button class="watch-all-close" onclick="document.getElementById('ya-info-modal-overlay').remove()">&times;</button>
+            <div class="ya-info-hero">
+                <div class="ya-info-hero-bg" ${imageUrl ? `style="background-image:url('${escapeHtml(imageUrl)}')"` : ''}></div>
+                <div class="ya-info-hero-content">
+                    <div class="ya-info-hero-img">
+                        ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="">` : '<div class="ya-info-img-fallback">&#9835;</div>'}
+                    </div>
+                    <div class="ya-info-hero-text">
+                        <h2 class="ya-info-name">${escapeHtml(artistName)}</h2>
+                        <div class="ya-info-badges">${matchBadges.join('')}</div>
+                        ${originText ? `<div class="ya-info-origin">Followed on ${escapeHtml(originText)}</div>` : ''}
+                    </div>
+                </div>
+            </div>
+            <div class="ya-info-body" id="ya-info-body">
+                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading artist info...</div></div>
+            </div>
+            <div class="ya-info-footer" id="ya-info-footer"></div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Fetch enrichment data (with timeout)
+    try {
+        const controller = new AbortController();
+        const timeout = setTimeout(() => controller.abort(), 8000);
+        const lookupId = artistId || encodeURIComponent(artistName);
+        const resp = await fetch(`/api/discover/your-artists/info/${lookupId}?name=${encodeURIComponent(artistName)}`, { signal: controller.signal });
+        clearTimeout(timeout);
+        const artist = resp.ok ? await resp.json() : {};
+        const bodyEl = document.getElementById('ya-info-body');
+        const footerEl = document.getElementById('ya-info-footer');
+
+        const genres = artist.genres || [];
+        const bio = artist.summary || '';
+        const listeners = artist.lastfm_listeners || artist.followers || 0;
+        const playcount = artist.lastfm_playcount || 0;
+        const popularity = artist.popularity || 0;
+
+        let bodyHTML = '';
+
+        // Stats
+        if (listeners || playcount || popularity) {
+            bodyHTML += `<div class="ya-info-stats">
+                ${listeners ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${Number(listeners).toLocaleString()}</span><span class="ya-info-stat-label">listeners</span></div>` : ''}
+                ${playcount ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${Number(playcount).toLocaleString()}</span><span class="ya-info-stat-label">plays</span></div>` : ''}
+                ${popularity ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${popularity}</span><span class="ya-info-stat-label">popularity</span></div>` : ''}
+            </div>`;
+        }
+
+        // Genres
+        if (genres.length > 0) {
+            bodyHTML += `<div class="ya-info-section">
+                <div class="ya-info-genres">${genres.map(g => `<span class="ya-info-genre">${escapeHtml(g)}</span>`).join('')}</div>
+            </div>`;
+        }
+
+        // Bio
+        if (bio) {
+            const cleanBio = bio.replace(/<a[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
+            if (cleanBio) {
+                bodyHTML += `<div class="ya-info-section">
+                    <div class="ya-info-section-title">About</div>
+                    <div class="ya-info-bio">${escapeHtml(cleanBio.length > 600 ? cleanBio.substring(0, 600) + '...' : cleanBio)}</div>
+                </div>`;
+            }
+        }
+
+        // Related artists from map connections
+        const related = pool._related || [];
+        if (related.length > 0) {
+            const relLabel = pool.on_watchlist ? 'Similar Artists' : 'Connected To';
+            bodyHTML += `<div class="ya-info-section">
+                <div class="ya-info-section-title">${relLabel}</div>
+                <div class="ya-info-related">
+                    ${related.slice(0, 12).map(r => {
+                const rImg = r.image_url || '';
+                const rType = r.type === 'watchlist';
+                return `<div class="ya-info-related-item" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); setTimeout(() => openYourArtistInfoModal_direct(${JSON.stringify({
+                    id: r.id, name: r.name, image_url: rImg,
+                    spotify_id: r.spotify_id || '', itunes_id: r.itunes_id || '',
+                    deezer_id: r.deezer_id || '', discogs_id: r.discogs_id || '',
+                    type: r.type
+                }).replace(/"/g, '&quot;')}), 100)">
+                            <div class="ya-info-related-img">
+                                ${rImg ? `<img src="${escapeHtml(rImg)}" alt="">` : '<span>&#9835;</span>'}
+                            </div>
+                            <div class="ya-info-related-text">
+                                <div class="ya-info-related-name">${escapeHtml(r.name)}</div>
+                                ${rType ? '<div class="ya-info-related-badge">★ Watchlist</div>' : ''}
+                            </div>
+                        </div>`;
+            }).join('')}
+                    ${related.length > 12 ? `<div class="ya-info-related-more">+${related.length - 12} more</div>` : ''}
+                </div>
+            </div>`;
+        }
+
+        if (!bodyHTML) bodyHTML = '<div class="ya-info-empty">No additional info available</div>';
+        if (bodyEl) bodyEl.innerHTML = bodyHTML;
+
+        // Footer
+        if (footerEl) {
+            const watchBtn = pool.on_watchlist
+                ? `<button class="ya-header-btn" onclick="toggleYourArtistWatchlist(${pool.id}, '${escapeForInlineJs(artistName)}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(pool.active_source || '')}', this); this.textContent='Done'; this.disabled=true">Remove from Watchlist</button>`
+                : `<button class="ya-header-btn" onclick="toggleYourArtistWatchlist(${pool.id}, '${escapeForInlineJs(artistName)}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(pool.active_source || '')}', this); this.textContent='Added!'; this.disabled=true">Add to Watchlist</button>`;
+            footerEl.innerHTML = `
+                ${watchBtn}
+                <button class="ya-header-btn" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); document.getElementById('your-artists-modal-overlay')?.remove(); openArtistMapExplorerDirect('${escapeForInlineJs(artistName)}')">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+                    <span>Explore</span>
+                </button>
+                <button class="ya-header-btn ya-viewall-btn" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); document.getElementById('your-artists-modal-overlay')?.remove(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(artistId)}', name:'${escapeForInlineJs(artistName)}', image_url:'${escapeForInlineJs(imageUrl)}'}, {source:'${escapeForInlineJs(pool.active_source || '')}'}), 200)">
+                    <span>View Discography</span>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+                </button>
+            `;
+        }
+    } catch (err) {
+        console.error('[Artist Info] Error loading artist info:', err);
+        const bodyEl = document.getElementById('ya-info-body');
+        if (bodyEl) bodyEl.innerHTML = `<div class="ya-info-empty">Could not load artist info</div>`;
+    }
+}
+
+async function toggleYourArtistWatchlist(poolId, artistName, sourceId, source, btnEl) {
+    const isWatched = btnEl && btnEl.classList.contains('active');
+    try {
+        if (isWatched) {
+            const resp = await fetch('/api/watchlist/remove', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: sourceId })
+            });
+            if (resp.ok) {
+                if (btnEl) {
+                    btnEl.classList.remove('active');
+                    const svg = btnEl.querySelector('svg');
+                    if (svg) svg.setAttribute('fill', 'none');
+                }
+                showToast(`Removed ${artistName} from watchlist`, 'info');
+                // Sync card eye icon
+                _syncYaCardWatchlist(poolId, false);
+            }
+        } else {
+            const resp = await fetch('/api/watchlist/add', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: sourceId, artist_name: artistName, source: source })
+            });
+            if (resp.ok) {
+                if (btnEl) {
+                    btnEl.classList.add('active');
+                    const svg = btnEl.querySelector('svg');
+                    if (svg) svg.setAttribute('fill', 'currentColor');
+                }
+                showToast(`Added ${artistName} to watchlist`, 'success');
+                _syncYaCardWatchlist(poolId, true);
+            }
+        }
+    } catch (err) {
+        showToast('Failed to update watchlist', 'error');
+    }
+}
+
+function _syncYaCardWatchlist(poolId, watched) {
+    // Sync the card's eye icon with watchlist state (covers modal → card sync)
+    document.querySelectorAll('.ya-card .ya-watchlist-btn').forEach(btn => {
+        const card = btn.closest('.ya-card');
+        if (!card) return;
+        // Match by onclick containing the poolId
+        const onclick = btn.getAttribute('onclick') || '';
+        if (onclick.includes(`(${poolId},`)) {
+            if (watched) {
+                btn.classList.add('active');
+                const svg = btn.querySelector('svg');
+                if (svg) svg.setAttribute('fill', 'currentColor');
+            } else {
+                btn.classList.remove('active');
+                const svg = btn.querySelector('svg');
+                if (svg) svg.setAttribute('fill', 'none');
+            }
+        }
+    });
+    // Update pool data
+    if (window._yaArtists && window._yaArtists[poolId]) {
+        window._yaArtists[poolId].on_watchlist = watched ? 1 : 0;
+    }
+}
+
+async function refreshYourArtists() {
+    const btn = document.getElementById('your-artists-refresh-btn');
+    if (btn) { btn.disabled = true; btn.style.opacity = '0.5'; }
+    const subtitle = document.getElementById('your-artists-subtitle');
+    if (subtitle) subtitle.textContent = 'Refreshing from your services...';
+
+    try {
+        await fetch('/api/discover/your-artists/refresh?clear=true', { method: 'POST' });
+        // Poll until done
+        let attempts = 0;
+        const poll = setInterval(async () => {
+            attempts++;
+            if (attempts > 60) { clearInterval(poll); return; } // 5 min max
+            try {
+                const resp = await fetch('/api/discover/your-artists');
+                const data = await resp.json();
+                if (!data.stale && data.artists && data.artists.length > 0) {
+                    clearInterval(poll);
+                    loadYourArtists();
+                    if (btn) { btn.disabled = false; btn.style.opacity = ''; }
+                    showToast(`Found ${data.total} artists from your services`, 'success');
+                }
+            } catch (e) { }
+        }, 5000);
+    } catch (err) {
+        showToast('Failed to start refresh', 'error');
+        if (btn) { btn.disabled = false; btn.style.opacity = ''; }
+    }
+}
+
+async function openYourArtistsSourcesModal() {
+    const existing = document.getElementById('ya-sources-modal-overlay');
+    if (existing) existing.remove();
+
+    // Fetch current config + connected services
+    let enabled = ['spotify', 'tidal', 'lastfm', 'deezer'];
+    let connected = [];
+    try {
+        const resp = await fetch('/api/discover/your-artists/sources');
+        if (resp.ok) {
+            const data = await resp.json();
+            if (data.enabled) enabled = data.enabled;
+            if (data.connected) connected = data.connected;
+        }
+    } catch (e) { }
+
+    const sourceInfo = [
+        { id: 'spotify', label: 'Spotify', icon: '🎵' },
+        { id: 'tidal', label: 'Tidal', icon: '🌊' },
+        { id: 'lastfm', label: 'Last.fm', icon: '📻' },
+        { id: 'deezer', label: 'Deezer', icon: '🎶' },
+    ];
+
+    const state = {};
+    sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
+
+    const overlay = document.createElement('div');
+    overlay.id = 'ya-sources-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    const rows = sourceInfo.map(s => {
+        const isConnected = connected.includes(s.id);
+        const isOn = state[s.id];
+        return `
+            <div class="ya-source-row${isConnected ? '' : ' disconnected'}" data-source="${s.id}" onclick="_yaSourceRowClick('${s.id}')">
+                <div class="ya-source-row-left">
+                    <span style="font-size:18px">${s.icon}</span>
+                    <div>
+                        <div class="ya-source-name">${s.label}</div>
+                        <div class="ya-source-status">${isConnected ? 'Connected' : 'Not connected'}</div>
+                    </div>
+                </div>
+                <button class="ya-source-toggle${isOn ? ' on' : ''}" id="ya-toggle-${s.id}" onclick="event.stopPropagation();_yaSourceToggle('${s.id}')"></button>
+            </div>`;
+    }).join('');
+
+    overlay.innerHTML = `
+        <div class="ya-sources-modal">
+            <h2>Your Artists Sources</h2>
+            <p class="ya-sources-desc">Choose which connected services contribute artists to this section.</p>
+            <div class="ya-sources-list">${rows}</div>
+            <div class="ya-sources-footer">
+                <button class="ya-sources-cancel-btn" onclick="document.getElementById('ya-sources-modal-overlay').remove()">Cancel</button>
+                <button class="ya-sources-save-btn" onclick="_yaSourcesSave()">Save</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+    window._yaSourcesState = state;
+}
+
+function _yaSourceRowClick(id) {
+    // Don't allow toggling disconnected services
+    const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
+    if (row && row.classList.contains('disconnected')) return;
+    _yaSourceToggle(id);
+}
+
+function _yaSourceToggle(id) {
+    // Don't allow toggling disconnected services
+    const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
+    if (row && row.classList.contains('disconnected')) return;
+    window._yaSourcesState[id] = !window._yaSourcesState[id];
+    const btn = document.getElementById(`ya-toggle-${id}`);
+    if (btn) btn.classList.toggle('on', window._yaSourcesState[id]);
+}
+
+async function _yaSourcesSave() {
+    const enabledArr = Object.entries(window._yaSourcesState)
+        .filter(([, v]) => v).map(([k]) => k);
+    if (enabledArr.length === 0) {
+        showToast('Select at least one source', 'error');
+        return;
+    }
+    const enabled = enabledArr.join(',');
+    try {
+        const resp = await fetch('/api/settings', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ discover: { your_artists_sources: enabled } })
+        });
+        if (resp.ok) {
+            document.getElementById('ya-sources-modal-overlay')?.remove();
+            showToast('Sources saved — refresh to apply', 'success');
+            // Update subtitle immediately
+            const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', lastfm: 'Last.fm', deezer: 'Deezer' };
+            const subtitle = document.getElementById('your-artists-subtitle');
+            if (subtitle) {
+                const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
+                subtitle.textContent = `Artists you follow on ${names}`;
+            }
+        } else {
+            showToast('Failed to save sources', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to save sources', 'error');
+    }
+}
+
+async function openYourArtistsModal() {
+    const existing = document.getElementById('your-artists-modal-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'your-artists-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="ya-modal">
+            <div class="ya-modal-header">
+                <div>
+                    <h2 class="ya-modal-title">Your Artists</h2>
+                    <p class="ya-modal-subtitle" id="ya-modal-subtitle">Loading...</p>
+                </div>
+                <button class="watch-all-close" onclick="document.getElementById('your-artists-modal-overlay').remove()">&times;</button>
+            </div>
+            <div class="ya-modal-toolbar">
+                <input type="text" id="ya-modal-search" class="ya-modal-search" placeholder="Search artists...">
+                <div class="ya-modal-filters">
+                    <button class="ya-filter-btn active" data-source="" onclick="_yaFilterSource('')">All</button>
+                    <button class="ya-filter-btn" data-source="spotify" onclick="_yaFilterSource('spotify')">Spotify</button>
+                    <button class="ya-filter-btn" data-source="tidal" onclick="_yaFilterSource('tidal')">Tidal</button>
+                    <button class="ya-filter-btn" data-source="lastfm" onclick="_yaFilterSource('lastfm')">Last.fm</button>
+                    <button class="ya-filter-btn" data-source="deezer" onclick="_yaFilterSource('deezer')">Deezer</button>
+                </div>
+                <select class="ya-modal-sort" id="ya-modal-sort" onchange="_yaLoadModal()">
+                    <option value="name">A-Z</option>
+                    <option value="recent">Recently Added</option>
+                    <option value="source">By Source</option>
+                </select>
+            </div>
+            <div class="ya-modal-body" id="ya-modal-body">
+                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading...</div></div>
+            </div>
+            <div class="ya-modal-footer" id="ya-modal-footer"></div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Search debounce
+    let searchTimer = null;
+    overlay.querySelector('#ya-modal-search').addEventListener('input', () => {
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => _yaLoadModal(), 300);
+    });
+
+    window._yaModalState = { page: 1, source: '', sort: 'name' };
+    _yaLoadModal();
+}
+
+function _yaFilterSource(source) {
+    window._yaModalState.source = source;
+    window._yaModalState.page = 1;
+    document.querySelectorAll('.ya-filter-btn').forEach(b => b.classList.toggle('active', b.dataset.source === source));
+    _yaLoadModal();
+}
+
+async function _yaLoadModal() {
+    const body = document.getElementById('ya-modal-body');
+    const footer = document.getElementById('ya-modal-footer');
+    const subtitle = document.getElementById('ya-modal-subtitle');
+    if (!body) return;
+
+    const state = window._yaModalState || { page: 1, source: '', sort: 'name' };
+    const search = document.getElementById('ya-modal-search')?.value || '';
+    const sort = document.getElementById('ya-modal-sort')?.value || 'name';
+    state.sort = sort;
+
+    const params = new URLSearchParams({ page: state.page, per_page: 60, sort: state.sort });
+    if (state.source) params.set('source', state.source);
+    if (search) params.set('search', search);
+
+    try {
+        const resp = await fetch(`/api/discover/your-artists/all?${params}`);
+        const data = await resp.json();
+
+        if (subtitle) subtitle.textContent = `${data.total} artists matched`;
+
+        if (!data.artists || data.artists.length === 0) {
+            body.innerHTML = '<div class="failed-mb-empty">No artists found</div>';
+            if (footer) footer.innerHTML = '';
+            return;
+        }
+
+        // Store for info modal access
+        if (!window._yaArtists) window._yaArtists = {};
+        data.artists.forEach(a => { window._yaArtists[a.id] = a; });
+        body.innerHTML = `<div class="ya-modal-grid">${data.artists.map(a => _renderYourArtistCard(a)).join('')}</div>`;
+
+        // Pagination
+        const totalPages = Math.ceil(data.total / 60);
+        if (footer && totalPages > 1) {
+            footer.innerHTML = `
+                <div class="failed-mb-pagination">
+                    <button class="failed-mb-btn-sm" ${state.page <= 1 ? 'disabled' : ''} onclick="window._yaModalState.page--; _yaLoadModal()">Prev</button>
+                    <span>Page ${state.page} of ${totalPages}</span>
+                    <button class="failed-mb-btn-sm" ${state.page >= totalPages ? 'disabled' : ''} onclick="window._yaModalState.page++; _yaLoadModal()">Next</button>
+                </div>
+            `;
+        } else if (footer) {
+            footer.innerHTML = '';
+        }
+    } catch (err) {
+        body.innerHTML = '<div class="failed-mb-empty">Failed to load</div>';
+    }
+}
+
+function loadDiscoveryBlacklist() { }
+
+// ── Artist Map — Circle-packed staged canvas visualization ──
+const _artMap = {
+    placed: [],
+    edges: [],
+    images: {},
+    canvas: null, ctx: null,
+    offscreen: null, offCtx: null, // offscreen buffer for fast pan/zoom
+    width: 0, height: 0,
+    offsetX: 0, offsetY: 0, zoom: 0.15,
+    hoveredNode: null, animFrame: null,
+    dirty: true, // true = need to rebuild offscreen buffer
+    WATCHLIST_R: 320,
+    BUFFER: 8,
+};
+
+async function openArtistMap() {
+    const container = document.getElementById('artist-map-container');
+    if (!container) return;
+
+    // Hide discover sections, show map
+    document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+        el._prevDisplay = el.style.display;
+        el.style.display = 'none';
+    });
+    container.style.display = 'flex';
+
+    const canvas = document.getElementById('artist-map-canvas');
+    _artMap.canvas = canvas;
+    _artMap.ctx = canvas.getContext('2d');
+    _artMap.width = container.clientWidth;
+    _artMap.height = container.clientHeight - 50;
+    canvas.width = _artMap.width * window.devicePixelRatio;
+    canvas.height = _artMap.height * window.devicePixelRatio;
+    canvas.style.width = _artMap.width + 'px';
+    canvas.style.height = _artMap.height + 'px';
+    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    _artMap.offsetX = _artMap.width / 2;
+    _artMap.offsetY = _artMap.height / 2;
+    _artMap.placed = [];
+    _artMap.images = {};
+    _artMap._nodeById = null;
+
+    // Loading screen
+    _artMap.ctx.fillStyle = '#0a0a14';
+    _artMap.ctx.fillRect(0, 0, _artMap.width, _artMap.height);
+    _artMap.ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    _artMap.ctx.font = '14px system-ui';
+    _artMap.ctx.textAlign = 'center';
+    _artMap.ctx.fillText('Building artist map...', _artMap.width / 2, _artMap.height / 2);
+
+    try {
+        const resp = await fetch('/api/discover/artist-map');
+        const data = await resp.json();
+        if (!data.success || !data.nodes.length) {
+            _artMap.ctx.fillText('No watchlist artists. Add artists to your watchlist first.', _artMap.width / 2, _artMap.height / 2 + 30);
+            return;
+        }
+
+        document.getElementById('artist-map-stats').textContent =
+            `${data.watchlist_count} watchlist · ${data.similar_count} similar`;
+
+        _artMap.edges = data.edges;
+        const WR = _artMap.WATCHLIST_R;
+        const BUF = _artMap.BUFFER;
+
+        // ── PHASE 1: Place watchlist artists with guaranteed no-overlap ──
+        const wNodes = data.nodes.filter(n => n.type === 'watchlist');
+        // Minimum center-to-center distance between watchlist nodes
+        const minCenterDist = WR * 3.5; // WR*2 for radii + WR*1.5 gap — similar artists fill the gaps via spiral packing
+
+        // Place watchlist nodes in a spiral — deterministic, guaranteed spacing
+        wNodes.forEach((n, i) => {
+            n.radius = WR;
+            n.opacity = 0;
+            if (i === 0) {
+                n.x = 0; n.y = 0;
+            } else {
+                // Golden angle spiral for even distribution
+                const angle = i * 2.399963; // golden angle in radians
+                const r = minCenterDist * Math.sqrt(i) * 0.7;
+                n.x = Math.cos(angle) * r;
+                n.y = Math.sin(angle) * r;
+            }
+        });
+
+        // Post-process: push apart any watchlist nodes that ended up too close
+        for (let pass = 0; pass < 50; pass++) {
+            let moved = false;
+            for (let i = 0; i < wNodes.length; i++) {
+                for (let j = i + 1; j < wNodes.length; j++) {
+                    const dx = wNodes[j].x - wNodes[i].x;
+                    const dy = wNodes[j].y - wNodes[i].y;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    if (dist < minCenterDist) {
+                        const push = (minCenterDist - dist) / 2 + 1;
+                        const nx = (dx / dist) * push;
+                        const ny = (dy / dist) * push;
+                        wNodes[i].x -= nx; wNodes[i].y -= ny;
+                        wNodes[j].x += nx; wNodes[j].y += ny;
+                        moved = true;
+                    }
+                }
+            }
+            if (!moved) break;
+        }
+
+        wNodes.forEach(n => { _artMap.placed.push(n); });
+
+        // ── PHASE 2: Place similar artists around their source watchlist nodes ──
+        const sNodes = data.nodes.filter(n => n.type === 'similar');
+        sNodes.forEach(n => {
+            const occ = n.occurrence || 1;
+            const rank = n.rank || 5;
+            // Bigger overall: min 25% of WR, max 55%, scaled by relevance
+            n.radius = Math.min(WR * 0.55, Math.max(WR * 0.25, WR * 0.2 + occ * WR * 0.06 + (10 - rank) * WR * 0.025));
+        });
+        sNodes.sort((a, b) => b.radius - a.radius);
+
+        // Build edge lookup: target_id → source node (O(1) instead of .find())
+        const edgeMap = {};
+        _artMap.edges.forEach(e => { edgeMap[e.target] = e.source; });
+        const nodeById = {};
+        _artMap.placed.forEach(n => { nodeById[n.id] = n; });
+
+        // Spatial grid for fast collision detection
+        // Cell size must cover the largest possible bubble diameter + buffer
+        const CELL = WR * 2 + BUF * 2;
+        const grid = {};
+        function _gridKey(x, y) { return `${Math.floor(x / CELL)},${Math.floor(y / CELL)}`; }
+        function _gridAdd(n) {
+            const k = _gridKey(n.x, n.y);
+            if (!grid[k]) grid[k] = [];
+            grid[k].push(n);
+        }
+        function _gridCheck(x, y, r) {
+            const cx = Math.floor(x / CELL);
+            const cy = Math.floor(y / CELL);
+            // Search wider radius to catch large watchlist bubbles
+            for (let dx = -3; dx <= 3; dx++) {
+                for (let dy = -3; dy <= 3; dy++) {
+                    const cell = grid[`${cx + dx},${cy + dy}`];
+                    if (!cell) continue;
+                    for (const p of cell) {
+                        const ddx = x - p.x, ddy = y - p.y;
+                        const minD = r + p.radius + BUF;
+                        if (ddx * ddx + ddy * ddy < minD * minD) return true;
+                    }
+                }
+            }
+            return false;
+        }
+        // Add watchlist nodes to grid
+        _artMap.placed.forEach(n => _gridAdd(n));
+
+        // Place similar nodes with spatial grid collision
+        for (const sn of sNodes) {
+            const srcId = edgeMap[sn.id];
+            const src = srcId != null ? nodeById[srcId] : null;
+            const cx = src ? src.x : 0;
+            const cy = src ? src.y : 0;
+            const startDist = (src ? src.radius : WR) + sn.radius + BUF;
+
+            let placed = false;
+            for (let dist = startDist; dist < startDist + WR * 3; dist += sn.radius * 0.5) {
+                const steps = Math.max(8, Math.floor(dist * 0.1));
+                const off = Math.random() * Math.PI * 2;
+                for (let a = 0; a < steps; a++) {
+                    const angle = off + (a / steps) * Math.PI * 2;
+                    const tx = cx + Math.cos(angle) * dist;
+                    const ty = cy + Math.sin(angle) * dist;
+                    if (!_gridCheck(tx, ty, sn.radius)) {
+                        sn.x = tx; sn.y = ty; sn.opacity = 0;
+                        _artMap.placed.push(sn);
+                        nodeById[sn.id] = sn;
+                        _gridAdd(sn);
+                        placed = true;
+                        break;
+                    }
+                }
+                if (placed) break;
+            }
+        }
+
+        // Auto-zoom to fit all nodes
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        _artMap.placed.forEach(n => {
+            minX = Math.min(minX, n.x - n.radius);
+            maxX = Math.max(maxX, n.x + n.radius);
+            minY = Math.min(minY, n.y - n.radius);
+            maxY = Math.max(maxY, n.y + n.radius);
+        });
+        const mapW = maxX - minX + 200;
+        const mapH = maxY - minY + 200;
+        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
+        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
+
+        // Setup interaction
+        _artMapSetupInteraction(canvas);
+
+        // ── PHASE 3: Set all visible, build buffer, render ──
+        // Show loading overlay while buffer builds
+        const loadingEl = document.createElement('div');
+        loadingEl.id = 'artist-map-loading';
+        loadingEl.innerHTML = `
+            <div class="artist-map-loading-content">
+                <div class="watch-all-loading-spinner"></div>
+                <div class="artist-map-loading-text" id="artmap-loading-text">Placing ${_artMap.placed.length} artists on the map...</div>
+            </div>
+        `;
+        container.appendChild(loadingEl);
+
+        // Defer heavy work so loading overlay renders first
+        setTimeout(async () => {
+            _artMap.placed.forEach(n => { n.opacity = 1; });
+
+            // Load images in parallel using createImageBitmap (non-blocking)
+            const loadingText = container.querySelector('.artist-map-loading-text');
+            const imgNodes = _artMap.placed.filter(n => n.image_url);
+            let loaded = 0;
+
+            if (loadingText) loadingText.textContent = `Loading ${imgNodes.length} artist images...`;
+
+            // Batch image loading — 20 concurrent fetches
+            const CONCURRENT = 20;
+            let idx = 0;
+
+            async function loadNextBatch() {
+                const batch = [];
+                while (idx < imgNodes.length && batch.length < CONCURRENT) {
+                    const n = imgNodes[idx++];
+                    if (_artMap.images[n.id]) { loaded++; continue; }
+                    batch.push(
+                        _artMapLoadImage(n.image_url)
+                            .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
+                            .finally(() => {
+                                loaded++;
+                                if (loadingText && loaded % 50 === 0) {
+                                    loadingText.textContent = `Loading images... ${loaded}/${imgNodes.length}`;
+                                }
+                            })
+                    );
+                }
+                if (batch.length) await Promise.all(batch);
+                if (idx < imgNodes.length) return loadNextBatch();
+            }
+
+            await loadNextBatch();
+
+            // Build buffer and render
+            if (loadingText) loadingText.textContent = 'Rendering map...';
+            await new Promise(r => setTimeout(r, 20)); // let text update render
+
+            _artMap.dirty = true;
+            _artMapRender();
+
+            const le = document.getElementById('artist-map-loading');
+            if (le) le.remove();
+        }, 50);
+
+    } catch (err) {
+        console.error('Artist map error:', err);
+    }
+}
+
+function artMapZoom(factor) {
+    const cx = _artMap.width / 2;
+    const cy = _artMap.height / 2;
+    const targetZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
+    const targetOX = cx - (cx - _artMap.offsetX) * (targetZoom / _artMap.zoom);
+    const targetOY = cy - (cy - _artMap.offsetY) * (targetZoom / _artMap.zoom);
+    _artMapAnimateTo(targetZoom, targetOX, targetOY);
+}
+
+function artMapFitToView() {
+    if (!_artMap.placed.length) return;
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    _artMap.placed.forEach(n => {
+        if ((n.opacity || 0) < 0.01) return;
+        minX = Math.min(minX, n.x - n.radius);
+        maxX = Math.max(maxX, n.x + n.radius);
+        minY = Math.min(minY, n.y - n.radius);
+        maxY = Math.max(maxY, n.y + n.radius);
+    });
+    const mapW = maxX - minX + 100;
+    const mapH = maxY - minY + 100;
+    const targetZoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+    const targetOX = _artMap.width / 2 - ((minX + maxX) / 2) * targetZoom;
+    const targetOY = _artMap.height / 2 - ((minY + maxY) / 2) * targetZoom;
+    _artMapAnimateTo(targetZoom, targetOX, targetOY);
+}
+
+function _artMapAnimateTo(targetZoom, targetOX, targetOY) {
+    if (_artMap._animating) cancelAnimationFrame(_artMap._animating);
+    const startZoom = _artMap.zoom;
+    const startOX = _artMap.offsetX;
+    const startOY = _artMap.offsetY;
+    const duration = 250;
+    const start = performance.now();
+
+    function step(now) {
+        const t = Math.min(1, (now - start) / duration);
+        // Ease out cubic
+        const e = 1 - Math.pow(1 - t, 3);
+        _artMap.zoom = startZoom + (targetZoom - startZoom) * e;
+        _artMap.offsetX = startOX + (targetOX - startOX) * e;
+        _artMap.offsetY = startOY + (targetOY - startOY) * e;
+        _artMapRender(); // blit only, no rebuild
+        if (t < 1) {
+            _artMap._animating = requestAnimationFrame(step);
+        } else {
+            _artMap._animating = null;
+            _artMap.dirty = true;
+            _artMapRender(); // rebuild at final zoom level
+        }
+    }
+    _artMap._animating = requestAnimationFrame(step);
+}
+
+function closeArtistMap() {
+    const container = document.getElementById('artist-map-container');
+    if (container) container.style.display = 'none';
+    const sidebar = document.getElementById('artmap-genre-sidebar');
+    if (sidebar) sidebar.style.display = 'none';
+    if (_artMap.animFrame) cancelAnimationFrame(_artMap.animFrame);
+    if (_artMap._keyHandler) window.removeEventListener('keydown', _artMap._keyHandler);
+    _artMapHideContextMenu();
+
+    // Restore discover sections
+    document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+        el.style.display = el._prevDisplay !== undefined ? el._prevDisplay : '';
+    });
+}
+
+// No force simulation — layout is pre-computed via circle packing
+
+function _artMapRebuildBuffer() {
+    /**Render ALL nodes once to offscreen canvas. Only called on data changes, not pan/zoom.**/
+    const placed = _artMap.placed;
+    if (!placed.length) return;
+
+    const visible = placed.filter(n => (n.opacity || 0) > 0.01);
+    if (!visible.length) return;
+
+    // World bounds
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    visible.forEach(n => {
+        minX = Math.min(minX, n.x - n.radius - 10);
+        maxX = Math.max(maxX, n.x + n.radius + 10);
+        minY = Math.min(minY, n.y - n.radius - 10);
+        maxY = Math.max(maxY, n.y + n.radius + 10);
+    });
+
+    const bw = maxX - minX;
+    const bh = maxY - minY;
+    // Scale based on zoom — higher zoom = higher res buffer, capped for memory
+    const z = _artMap.zoom || 0.1;
+    const scale = Math.min(z * 2, 1.0, 10240 / Math.max(bw, bh));
+
+    if (!_artMap.offscreen) _artMap.offscreen = document.createElement('canvas');
+    const oc = _artMap.offscreen;
+    oc.width = Math.ceil(bw * scale);
+    oc.height = Math.ceil(bh * scale);
+    const octx = oc.getContext('2d');
+    _artMap._bufferScale = scale;
+    _artMap._bufferMinX = minX;
+    _artMap._bufferMinY = minY;
+
+    octx.scale(scale, scale);
+    octx.translate(-minX, -minY);
+
+    // Build node lookup
+    if (!_artMap._nodeById) {
+        _artMap._nodeById = {};
+        placed.forEach(n => { _artMap._nodeById[n.id] = n; });
+    }
+
+    // Draw edges (connection lines between related nodes)
+    if (_artMap.edges && _artMap.edges.length > 0) {
+        octx.lineWidth = 1;
+        octx.strokeStyle = 'rgba(138,43,226,0.08)';
+        octx.beginPath();
+        for (const edge of _artMap.edges) {
+            const s = _artMap._nodeById[edge.source];
+            const t = _artMap._nodeById[edge.target];
+            if (!s || !t || (s.opacity || 0) < 0.05 || (t.opacity || 0) < 0.05) continue;
+            octx.moveTo(s.x, s.y);
+            octx.lineTo(t.x, t.y);
+        }
+        octx.stroke();
+    }
+
+    // Draw ALL nodes — genre labels first, similar next, watchlist on top
+    const hideSimilar = _artMap._hideSimilar || false;
+    // Pass 0: genre labels, Pass 1: similar/ring2, Pass 2: watchlist/center/ring1
+    for (let pass = 0; pass < 3; pass++) {
+        for (const n of visible) {
+            if (pass === 0 && n._isLabel) { /* draw */ }
+            else if (pass === 1 && !n._isLabel && n.type !== 'watchlist' && n.type !== 'center' && n.ring !== 1) { /* draw */ }
+            else if (pass === 2 && !n._isLabel && (n.type === 'watchlist' || n.type === 'center' || n.ring === 1)) { /* draw */ }
+            else continue;
+            if (hideSimilar && n.type !== 'watchlist' && n.type !== 'center' && !n._isLabel) continue;
+            const op = n.opacity || 0;
+            if (op < 0.01) continue;
+            const r = n.radius;
+            const isW = n.type === 'watchlist' || n.type === 'center';
+            octx.globalAlpha = op;
+
+            // Genre label node — transparent circle with large text
+            if (n._isLabel) {
+                octx.globalAlpha = 0.6;
+                octx.beginPath();
+                octx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
+                octx.fillStyle = 'rgba(138,43,226,0.04)';
+                octx.fill();
+                octx.strokeStyle = 'rgba(138,43,226,0.08)';
+                octx.lineWidth = 1;
+                octx.stroke();
+                const labelSize = Math.max(12, n.radius * 0.25);
+                octx.font = `800 ${labelSize}px system-ui`;
+                octx.textAlign = 'center';
+                octx.textBaseline = 'middle';
+                octx.fillStyle = 'rgba(138,43,226,0.35)';
+                octx.fillText(n.name, n.x, n.y - labelSize * 0.3);
+                octx.font = `500 ${labelSize * 0.5}px system-ui`;
+                octx.fillStyle = 'rgba(255,255,255,0.15)';
+                octx.fillText(`${n._count || 0} artists`, n.x, n.y + labelSize * 0.5);
+                octx.globalAlpha = 1;
+                continue;
+            }
+
+            // Render quality based on node size in buffer pixels
+            const rScaled = r * scale;
+            const isSmall = rScaled < 8;
+            const isTiny = rScaled < 3;
+
+            // Tiny nodes: just a colored dot (no clip, no image, no text)
+            if (isTiny) {
+                octx.beginPath();
+                octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+                octx.fillStyle = isW ? '#6b21a8' : '#2a2a40';
+                octx.fill();
+                continue;
+            }
+
+            // Small nodes: filled circle + border, no image clip
+            if (isSmall) {
+                octx.beginPath();
+                octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+                const img = _artMap.images[n.id];
+                if (img) {
+                    octx.save(); octx.clip();
+                    octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
+                    octx.restore();
+                } else {
+                    octx.fillStyle = isW ? '#1a0a30' : '#141420';
+                    octx.fill();
+                }
+                octx.strokeStyle = isW ? 'rgba(138,43,226,0.3)' : 'rgba(255,255,255,0.06)';
+                octx.lineWidth = isW ? 1.5 : 0.5;
+                octx.stroke();
+                continue;
+            }
+
+            // Full quality: glow + clip + image + text
+            if (isW) {
+                octx.beginPath();
+                octx.arc(n.x, n.y, r + 4, 0, Math.PI * 2);
+                octx.strokeStyle = 'rgba(138,43,226,0.25)';
+                octx.lineWidth = 5;
+                octx.stroke();
+            }
+
+            octx.save();
+            octx.beginPath();
+            octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+            octx.closePath();
+            octx.clip();
+
+            const img = _artMap.images[n.id];
+            if (img) {
+                octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
+                octx.fillStyle = 'rgba(0,0,0,0.45)';
+                octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
+            } else {
+                octx.fillStyle = isW ? '#1a0a30' : '#141420';
+                octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
+            }
+            octx.restore();
+
+            octx.beginPath();
+            octx.arc(n.x, n.y, r, 0, Math.PI * 2);
+            octx.strokeStyle = isW ? 'rgba(138,43,226,0.4)' : 'rgba(255,255,255,0.08)';
+            octx.lineWidth = isW ? 2 : 0.5;
+            octx.stroke();
+
+            const fontSize = isW ? Math.max(16, r * 0.14) : Math.max(8, r * 0.3);
+            octx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
+            octx.textAlign = 'center';
+            octx.textBaseline = 'middle';
+            octx.fillStyle = '#fff';
+            const maxC = isW ? 20 : 12;
+            const label = n.name.length > maxC ? n.name.substring(0, maxC - 1) + '…' : n.name;
+            octx.fillText(label, n.x, n.y);
+        }
+    }
+
+    octx.globalAlpha = 1;
+
+    _artMap.dirty = false;
+}
+
+function _artMapRender() {
+    /**Blit offscreen buffer to screen canvas with pan/zoom. Near-zero cost.**/
+    const ctx = _artMap.ctx;
+    const w = _artMap.width;
+    const h = _artMap.height;
+
+    ctx.fillStyle = '#0a0a14';
+    ctx.fillRect(0, 0, w, h);
+
+    if (_artMap.dirty || !_artMap.offscreen) _artMapRebuildBuffer();
+    if (!_artMap.offscreen) return;
+
+    const oc = _artMap.offscreen;
+    const s = _artMap._bufferScale;
+    const mx = _artMap._bufferMinX;
+    const my = _artMap._bufferMinY;
+    const z = _artMap.zoom;
+
+    // Blit offscreen buffer: the buffer was drawn with scale(s) + translate(-minX,-minY)
+    // So buffer pixel (bx,by) corresponds to world (bx/s + minX, by/s + minY)
+    // Screen position of world (wx,wy) = offsetX + wx*zoom, offsetY + wy*zoom
+    // Therefore buffer origin on screen = offsetX + minX*zoom, offsetY + minY*zoom
+    // And buffer is drawn at size (bufferWidth * zoom/s, bufferHeight * zoom/s)
+    ctx.drawImage(oc,
+        _artMap.offsetX + mx * z,
+        _artMap.offsetY + my * z,
+        oc.width * z / s,
+        oc.height * z / s
+    );
+
+    // ── Interactive overlay (drawn on main canvas, not buffer) ──
+    const cFade = _artMap._constellationFade || 0;
+    if (cFade > 0 && (_artMap.hoveredNode || _artMap._constellationCache)) {
+        const n = _artMap.hoveredNode || (_artMap._constellationCache ? (_artMap._nodeById || {})[_artMap._constellationCache.nodeId] : null);
+        if (!n) { _artMap._constellationFade = 0; _artMap._constellationCache = null; }
+        if (n) {
+            ctx.save();
+            ctx.translate(_artMap.offsetX, _artMap.offsetY);
+            ctx.scale(z, z);
+
+            // Cache connected node lookup (don't recompute every frame)
+            if (!_artMap._constellationCache || _artMap._constellationCache.nodeId !== n.id) {
+                const connectedIds = new Set();
+                if (n.type === 'watchlist') {
+                    for (const e of _artMap.edges) {
+                        if (e.source === n.id) connectedIds.add(e.target);
+                    }
+                } else {
+                    const sourceIds = new Set();
+                    for (const e of _artMap.edges) {
+                        if (e.target === n.id) sourceIds.add(e.source);
+                    }
+                    for (const sid of sourceIds) {
+                        connectedIds.add(sid);
+                        for (const e of _artMap.edges) {
+                            if (e.source === sid) connectedIds.add(e.target);
+                        }
+                    }
+                }
+                const nById = _artMap._nodeById || {};
+                _artMap._constellationCache = {
+                    nodeId: n.id,
+                    nodes: [n, ...[...connectedIds].map(id => nById[id]).filter(Boolean)],
+                };
+            }
+
+            const highlightNodes = _artMap._constellationCache.nodes;
+
+            if (highlightNodes.length > 1) {
+                // Semi-transparent dark overlay on entire visible area
+                ctx.save();
+                ctx.resetTransform();
+                ctx.globalAlpha = 0.6 * cFade;
+                ctx.fillStyle = '#0a0a14';
+                ctx.fillRect(0, 0, _artMap.canvas.width, _artMap.canvas.height);
+                ctx.globalAlpha = 1;
+                ctx.restore();
+
+                // Draw glowing connection lines
+                for (const cn of highlightNodes) {
+                    if (cn === n) continue;
+                    ctx.beginPath();
+                    ctx.moveTo(n.x, n.y);
+                    ctx.lineTo(cn.x, cn.y);
+                    // Gradient line
+                    const lineGrad = ctx.createLinearGradient(n.x, n.y, cn.x, cn.y);
+                    lineGrad.addColorStop(0, `rgba(138,43,226,${0.5 * cFade})`);
+                    lineGrad.addColorStop(1, `rgba(138,43,226,${0.15 * cFade})`);
+                    ctx.strokeStyle = lineGrad;
+                    ctx.lineWidth = 2;
+                    ctx.stroke();
+                }
+
+                // Redraw highlighted nodes on top
+                ctx.globalAlpha = cFade;
+                for (const hn of highlightNodes) {
+                    const r = hn.radius;
+                    const isW = hn.type === 'watchlist';
+                    const isHov = hn === n;
+
+                    // Glow
+                    if (isHov) {
+                        ctx.beginPath();
+                        ctx.arc(hn.x, hn.y, r + 8, 0, Math.PI * 2);
+                        ctx.strokeStyle = 'rgba(138,43,226,0.4)';
+                        ctx.lineWidth = 6;
+                        ctx.stroke();
+                    }
+
+                    // Circle + image
+                    ctx.save();
+                    ctx.beginPath();
+                    ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
+                    ctx.closePath();
+                    ctx.clip();
+
+                    const img = _artMap.images[hn.id];
+                    if (img) {
+                        ctx.drawImage(img, hn.x - r, hn.y - r, r * 2, r * 2);
+                        ctx.fillStyle = 'rgba(0,0,0,0.35)';
+                        ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
+                    } else {
+                        ctx.fillStyle = isW ? '#1a0a30' : '#141420';
+                        ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
+                    }
+                    ctx.restore();
+
+                    // Border
+                    ctx.beginPath();
+                    ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
+                    ctx.strokeStyle = isHov ? 'rgba(255,255,255,0.7)' : isW ? 'rgba(138,43,226,0.5)' : 'rgba(255,255,255,0.3)';
+                    ctx.lineWidth = isHov ? 3 : 1.5;
+                    ctx.stroke();
+
+                    // Name
+                    const fontSize = isW ? Math.max(14, r * 0.14) : Math.max(8, r * 0.3);
+                    ctx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.fillStyle = '#fff';
+                    const maxC = isW ? 20 : 12;
+                    const label = hn.name.length > maxC ? hn.name.substring(0, maxC - 1) + '…' : hn.name;
+                    ctx.fillText(label, hn.x, hn.y);
+                }
+                ctx.globalAlpha = 1;
+            } else {
+                // Single node, no connections
+                ctx.beginPath();
+                ctx.arc(n.x, n.y, n.radius + 4, 0, Math.PI * 2);
+                ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+                ctx.lineWidth = 3;
+                ctx.stroke();
+            }
+
+            ctx.restore();
+        } // end if(n)
+    } else if (_artMap.hoveredNode && !_artMap._constellationActive) {
+        // Pre-constellation: just show a simple highlight ring (instant, no delay)
+        const n = _artMap.hoveredNode;
+        ctx.save();
+        ctx.translate(_artMap.offsetX, _artMap.offsetY);
+        ctx.scale(z, z);
+        ctx.beginPath();
+        ctx.arc(n.x, n.y, n.radius + 3, 0, Math.PI * 2);
+        ctx.strokeStyle = 'rgba(255,255,255,0.35)';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.restore();
+    }
+
+    // Click ripple animation
+    if (_artMap._ripple) {
+        const rip = _artMap._ripple;
+        const elapsed = performance.now() - rip.start;
+        const progress = elapsed / 400; // 400ms duration
+        if (progress < 1) {
+            ctx.save();
+            ctx.translate(_artMap.offsetX, _artMap.offsetY);
+            ctx.scale(z, z);
+            const ripR = rip.radius + rip.radius * progress * 0.5;
+            ctx.beginPath();
+            ctx.arc(rip.x, rip.y, ripR, 0, Math.PI * 2);
+            ctx.strokeStyle = `rgba(138,43,226,${0.5 * (1 - progress)})`;
+            ctx.lineWidth = 3 * (1 - progress);
+            ctx.stroke();
+            ctx.restore();
+            requestAnimationFrame(() => _artMapRender());
+        } else {
+            _artMap._ripple = null;
+        }
+    }
+}
+
+function artMapSearch(query) {
+    const results = document.getElementById('artist-map-search-results');
+    if (!results) return;
+    if (!query || query.length < 2) { results.style.display = 'none'; return; }
+
+    const q = query.toLowerCase();
+    const matches = _artMap.placed.filter(n => (n.opacity || 0) > 0.5 && n.name.toLowerCase().includes(q)).slice(0, 8);
+
+    if (!matches.length) { results.style.display = 'none'; return; }
+
+    results.style.display = 'block';
+    results.innerHTML = matches.map(n =>
+        `<div class="artist-map-search-item" onclick="artMapZoomToNode(${n.id})">
+            <span class="artist-map-search-type ${n.type}">${n.type === 'watchlist' ? '★' : '○'}</span>
+            ${escapeHtml(n.name)}
+        </div>`
+    ).join('');
+}
+
+function artMapZoomToNode(nodeId) {
+    const n = _artMap.placed.find(p => p.id === nodeId);
+    if (!n) return;
+    // Zoom to show this node centered, at a comfortable zoom level
+    const targetZoom = Math.max(0.3, Math.min(1, 200 / n.radius));
+    const targetOX = _artMap.width / 2 - n.x * targetZoom;
+    const targetOY = _artMap.height / 2 - n.y * targetZoom;
+    _artMapAnimateTo(targetZoom, targetOX, targetOY);
+    // Highlight briefly after animation
+    setTimeout(() => { _artMap.hoveredNode = n; _artMapRender(); }, 300);
+    setTimeout(() => { _artMap.hoveredNode = null; _artMapRender(); }, 2500);
+    // Close search
+    const results = document.getElementById('artist-map-search-results');
+    if (results) results.style.display = 'none';
+    const input = document.getElementById('artist-map-search');
+    if (input) input.value = '';
+}
+
+function _artMapShowTooltip(e, node) {
+    const tip = document.getElementById('artist-map-tooltip');
+    if (!tip) return;
+    if (!node) { tip.style.display = 'none'; return; }
+
+    const img = node.image_url ? `<img class="artmap-tip-img" src="${escapeHtml(node.image_url)}" alt="">` : '<div class="artmap-tip-img artmap-tip-img-fallback">&#9835;</div>';
+    const genres = (node.genres || []).slice(0, 3);
+    const genreHTML = genres.length ? `<div class="artmap-tip-genres">${genres.map(g => `<span>${escapeHtml(g)}</span>`).join('')}</div>` : '';
+    const typeLabel = node.type === 'watchlist' ? '<span class="artmap-tip-badge">★ Watchlist</span>' : '';
+
+    tip.innerHTML = `
+        <div class="artmap-tip-row">
+            ${img}
+            <div class="artmap-tip-info">
+                <div class="artmap-tip-name">${escapeHtml(node.name)}</div>
+                ${typeLabel}
+                ${genreHTML}
+            </div>
+        </div>
+    `;
+    tip.style.display = 'block';
+
+    // Position — keep on screen
+    const x = Math.min(e.clientX + 16, window.innerWidth - tip.offsetWidth - 10);
+    const y = Math.min(e.clientY - 10, window.innerHeight - tip.offsetHeight - 10);
+    tip.style.left = x + 'px';
+    tip.style.top = y + 'px';
+}
+
+function _artMapAnimateConstellation() {
+    if (_artMap._constellationActive && _artMap._constellationFade < 1) {
+        _artMap._constellationFade = Math.min(1, (_artMap._constellationFade || 0) + 0.08);
+        _artMapRender();
+        requestAnimationFrame(_artMapAnimateConstellation);
+    } else if (!_artMap._constellationActive && _artMap._constellationFade > 0) {
+        _artMap._constellationFade = Math.max(0, _artMap._constellationFade - 0.1);
+        _artMapRender();
+        if (_artMap._constellationFade > 0) {
+            requestAnimationFrame(_artMapAnimateConstellation);
+        } else {
+            _artMap._constellationCache = null;
+        }
+    }
+}
+
+function artMapShowShortcuts() {
+    const existing = document.getElementById('artmap-shortcuts-overlay');
+    if (existing) { existing.remove(); return; }
+
+    const overlay = document.createElement('div');
+    overlay.id = 'artmap-shortcuts-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.style.zIndex = '10002';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="artmap-shortcuts-modal">
+            <div class="artmap-shortcuts-header">
+                <h3>Keyboard Shortcuts</h3>
+                <button class="watch-all-close" onclick="document.getElementById('artmap-shortcuts-overlay').remove()">&times;</button>
+            </div>
+            <div class="artmap-shortcuts-grid">
+                <div class="artmap-shortcut"><kbd>Esc</kbd><span>Close map</span></div>
+                <div class="artmap-shortcut"><kbd>+</kbd> / <kbd>-</kbd><span>Zoom in / out</span></div>
+                <div class="artmap-shortcut"><kbd>F</kbd><span>Fit to view</span></div>
+                <div class="artmap-shortcut"><kbd>S</kbd><span>Focus search</span></div>
+                <div class="artmap-shortcut"><kbd>H</kbd><span>Toggle similar artists</span></div>
+                <div class="artmap-shortcut"><kbd>Scroll</kbd><span>Zoom at cursor</span></div>
+                <div class="artmap-shortcut"><kbd>Click</kbd><span>Artist info</span></div>
+                <div class="artmap-shortcut"><kbd>Right-click</kbd><span>Context menu</span></div>
+                <div class="artmap-shortcut"><kbd>Drag</kbd><span>Pan around</span></div>
+                <div class="artmap-shortcut"><kbd>Hover 1s</kbd><span>Show connections</span></div>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+}
+
+async function openArtistMapGenre() {
+    // Show picker immediately — uses lightweight genre list endpoint
+    const genre = await _showGenrePickerModal();
+    if (!genre) return;
+    _openGenreMapWithSelection(genre);
+}
+
+async function _showGenrePickerModal() {
+    return new Promise(resolve => {
+        const existing = document.getElementById('artmap-genre-picker');
+        if (existing) existing.remove();
+
+        const overlay = document.createElement('div');
+        overlay.id = 'artmap-genre-picker';
+        overlay.className = 'modal-overlay';
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+        overlay.innerHTML = `
+            <div class="artmap-genre-picker-modal">
+                <div class="artmap-genre-picker-header">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/>
+                    </svg>
+                    <div>
+                        <h3>Select a Genre</h3>
+                        <p>Choose a genre to explore its artists</p>
+                    </div>
+                </div>
+                <input type="text" class="artmap-genre-picker-search" placeholder="Filter genres..." oninput="_filterGenrePicker(this.value)">
+                <div class="artmap-genre-picker-list" id="artmap-genre-picker-list">
+                    <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading genres...</div></div>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        // Use cached data or fetch
+        const renderGenreList = (data) => {
+            if (!data?.success || !data?.genres?.length) {
+                document.getElementById('artmap-genre-picker-list').innerHTML = '<div class="ya-info-empty">No genres found</div>';
+                return;
+            }
+            const list = document.getElementById('artmap-genre-picker-list');
+            list.innerHTML = data.genres.map(g => `
+                <div class="artmap-genre-picker-item" data-genre="${escapeHtml(g.name)}" onclick="document.getElementById('artmap-genre-picker')._resolve('${escapeForInlineJs(g.name)}')">
+                    <div class="artmap-genre-picker-name">${escapeHtml(g.name)}</div>
+                    <div class="artmap-genre-picker-count">${g.count} artists</div>
+                </div>
+            `).join('');
+        };
+
+        if (window._artMapGenreList) {
+            renderGenreList(window._artMapGenreList);
+        } else {
+            fetch('/api/discover/artist-map/genre-list')
+                .then(r => r.json())
+                .then(data => { window._artMapGenreList = data; renderGenreList(data); })
+                .catch(() => { document.getElementById('artmap-genre-picker-list').innerHTML = '<div class="ya-info-empty">Error loading genres</div>'; });
+        }
+
+        overlay._resolve = (genre) => { overlay.remove(); resolve(genre); };
+    });
+}
+
+function _switchGenre(genre) {
+    _artMap._skipSectionToggle = true;
+    _openGenreMapWithSelection(genre);
+}
+
+function _filterGenreSidebar(query) {
+    const q = query.toLowerCase();
+    document.querySelectorAll('.artmap-genre-sidebar-item').forEach(el => {
+        el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
+    });
+}
+
+async function _changeGenre() {
+    const genre = await _showGenrePickerModal();
+    if (!genre) return;
+    _artMap._skipSectionToggle = true;
+    _openGenreMapWithSelection(genre);
+}
+
+function _filterGenrePicker(query) {
+    const q = query.toLowerCase();
+    document.querySelectorAll('.artmap-genre-picker-item').forEach(el => {
+        el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
+    });
+}
+
+async function _openGenreMapWithSelection(selectedGenre) {
+    const container = document.getElementById('artist-map-container');
+    if (!container) return;
+
+    const skipToggle = _artMap._skipSectionToggle;
+    _artMap._skipSectionToggle = false;
+
+    if (!skipToggle) {
+        document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+            el._prevDisplay = el.style.display;
+            el.style.display = 'none';
+        });
+    }
+    container.style.display = 'flex';
+
+    // Show + populate genre sidebar
+    const sidebar = document.getElementById('artmap-genre-sidebar');
+    const genreListData = window._artMapGenreList || window._artMapGenreData;
+    if (sidebar && genreListData?.genres) {
+        sidebar.style.display = 'flex';
+        const list = document.getElementById('artmap-genre-sidebar-list');
+        if (list) {
+            list.innerHTML = genreListData.genres.map(g => `
+                <div class="artmap-genre-sidebar-item ${g.name === selectedGenre ? 'active' : ''}"
+                     data-genre="${escapeHtml(g.name)}"
+                     onclick="_switchGenre('${escapeForInlineJs(g.name)}')">
+                    <span class="artmap-genre-sidebar-name">${escapeHtml(g.name)}</span>
+                    <span class="artmap-genre-sidebar-count">${g.count}</span>
+                </div>
+            `).join('');
+        }
+    }
+
+    const canvas = document.getElementById('artist-map-canvas');
+    const contentRow = canvas.parentElement;
+    _artMap.canvas = canvas;
+    _artMap.ctx = canvas.getContext('2d');
+    _artMap.width = canvas.clientWidth || (container.clientWidth - (sidebar?.offsetWidth || 0));
+    _artMap.height = contentRow?.clientHeight || (container.clientHeight - 50);
+    canvas.width = _artMap.width * window.devicePixelRatio;
+    canvas.height = _artMap.height * window.devicePixelRatio;
+    canvas.style.width = _artMap.width + 'px';
+    canvas.style.height = _artMap.height + 'px';
+    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    _artMap.offsetX = _artMap.width / 2;
+    _artMap.offsetY = _artMap.height / 2;
+    _artMap.placed = [];
+    _artMap.edges = [];
+    _artMap.images = {};
+    _artMap._nodeById = null;
+    _artMap.dirty = true;
+
+    // Show loading
+    const loadingEl = document.createElement('div');
+    loadingEl.id = 'artist-map-loading';
+    loadingEl.innerHTML = `<div class="artist-map-loading-content"><div class="watch-all-loading-spinner"></div><div class="artist-map-loading-text" id="artmap-genre-loading-text">Loading genre map...</div></div>`;
+    container.appendChild(loadingEl);
+
+    // Update toolbar
+    document.querySelector('.artmap-brand-text').textContent = 'Genre Map';
+    document.getElementById('artist-map-stats').textContent = 'Loading...';
+
+    try {
+        // Use cached data from picker or fetch fresh
+        const data = window._artMapGenreData || await fetch('/api/discover/artist-map/genres').then(r => r.json());
+        const loadingText = document.getElementById('artmap-genre-loading-text');
+        if (!data.success || !data.nodes.length) {
+            if (loadingText) loadingText.textContent = 'No artists with genre data found.';
+            return;
+        }
+
+        // Find the selected genre + closely related genres (high artist overlap)
+        const allGenres = data.genres;
+        const primary = allGenres.find(g => g.name === selectedGenre);
+        if (!primary) {
+            if (loadingText) loadingText.textContent = `Genre "${selectedGenre}" not found.`;
+            return;
+        }
+        const primarySet = new Set(primary.artist_ids);
+
+        // Find up to 4 related genres by artist overlap
+        const related = allGenres
+            .filter(g => g.name !== selectedGenre)
+            .map(g => {
+                const overlap = g.artist_ids.filter(id => primarySet.has(id)).length;
+                return { ...g, overlap };
+            })
+            .filter(g => g.overlap > primarySet.size * 0.1) // At least 10% overlap
+            .sort((a, b) => b.overlap - a.overlap)
+            .slice(0, 4);
+
+        const genres = [primary, ...related];
+        const totalArtists = genres.reduce((sum, g) => sum + g.artist_ids.length, 0);
+
+        document.getElementById('artist-map-stats').innerHTML =
+            `<span class="artmap-genre-change" onclick="event.stopPropagation(); _changeGenre()" title="Change genre">${escapeHtml(selectedGenre)} ▾</span> · ${genres.length} genre${genres.length > 1 ? 's' : ''} · ${totalArtists} artists`;
+
+        const WR = _artMap.WATCHLIST_R;
+        const BUF = _artMap.BUFFER;
+
+        const maxPerGenre = 500;
+        const nodeR = WR * 0.2;
+
+        // Calculate actual cluster radius for each genre based on ring count
+        function getClusterRadius(artistCount) {
+            const count = Math.min(artistCount, maxPerGenre);
+            let ringDist = WR + nodeR * 2 + BUF;
+            let placed = 0;
+            while (placed < count) {
+                const circ = 2 * Math.PI * ringDist;
+                const inRing = Math.max(1, Math.floor(circ / (nodeR * 2 + BUF)));
+                placed += Math.min(inRing, count - placed);
+                ringDist += nodeR * 2 + BUF;
+            }
+            return ringDist;
+        }
+
+        // Pre-compute cluster radii
+        genres.forEach(g => { g._clusterR = getClusterRadius(g.artist_ids.length); });
+
+        // Golden spiral placement
+        genres.forEach((g, i) => {
+            if (i === 0) { g._cx = 0; g._cy = 0; }
+            else {
+                const angle = i * 2.399963;
+                const r = g._clusterR * Math.sqrt(i) * 0.9;
+                g._cx = Math.cos(angle) * r;
+                g._cy = Math.sin(angle) * r;
+            }
+        });
+
+        // Push apart using actual cluster radii — no overlap possible
+        for (let pass = 0; pass < 80; pass++) {
+            let moved = false;
+            for (let i = 0; i < genres.length; i++) {
+                for (let j = i + 1; j < genres.length; j++) {
+                    const dx = genres[j]._cx - genres[i]._cx;
+                    const dy = genres[j]._cy - genres[i]._cy;
+                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+                    const minDist = genres[i]._clusterR + genres[j]._clusterR + BUF * 4;
+                    if (dist < minDist) {
+                        const push = (minDist - dist) / 2 + 1;
+                        genres[i]._cx -= (dx / dist) * push; genres[i]._cy -= (dy / dist) * push;
+                        genres[j]._cx += (dx / dist) * push; genres[j]._cy += (dy / dist) * push;
+                        moved = true;
+                    }
+                }
+            }
+            if (!moved) break;
+        }
+
+        let placedCount = 0;
+
+        // Place genre labels as big watchlist-style bubbles
+        for (const g of genres) {
+            _artMap.placed.push({
+                id: `genre_${g.name}`, name: g.name.toUpperCase(),
+                x: g._cx, y: g._cy, radius: WR, opacity: 1,
+                type: 'genre_label', image_url: '', genres: [g.name],
+                _isLabel: true, _count: g.count
+            });
+        }
+
+        // Place artists in concentric rings — deterministic O(1) per node, handles 10K+ instantly
+        let genreIdx = 0;
+
+        async function placeGenreArtists() {
+            for (; genreIdx < genres.length; genreIdx++) {
+                const genre = genres[genreIdx];
+                const artists = genre.artist_ids.slice(0, maxPerGenre);
+                const sorted = artists.map(nid => data.nodes[nid]).filter(Boolean).sort((a, b) => (b.popularity || 0) - (a.popularity || 0));
+
+                let ringDist = WR + nodeR * 2 + BUF;
+                let ringNum = 0;
+                let placed = 0;
+
+                while (placed < sorted.length) {
+                    const circumference = 2 * Math.PI * ringDist;
+                    const nodesInRing = Math.max(1, Math.floor(circumference / (nodeR * 2 + BUF)));
+                    const count = Math.min(nodesInRing, sorted.length - placed);
+                    const angleStep = (2 * Math.PI) / nodesInRing;
+                    const angleOffset = ringNum * 0.618;
+
+                    for (let i = 0; i < count; i++) {
+                        const n = sorted[placed + i];
+                        if (!n) continue;
+                        const isW = n.type === 'watchlist' || n.type === 'center';
+                        const r = isW ? nodeR * 1.5 : nodeR;
+                        const angle = angleOffset + i * angleStep;
+
+                        _artMap.placed.push({
+                            id: placedCount + 1000, _origId: n.id, name: n.name,
+                            x: genre._cx + Math.cos(angle) * ringDist,
+                            y: genre._cy + Math.sin(angle) * ringDist,
+                            radius: r, opacity: 1,
+                            type: isW ? 'watchlist' : 'similar',
+                            image_url: n.image_url || '', genres: n.genres || [],
+                            spotify_id: n.spotify_id || '', itunes_id: n.itunes_id || '',
+                            deezer_id: n.deezer_id || '', discogs_id: n.discogs_id || '',
+                        });
+                        placedCount++;
+                    }
+                    placed += count;
+                    ringDist += nodeR * 2 + BUF;
+                    ringNum++;
+                }
+
+                if (loadingText) loadingText.textContent = `Placing artists... ${genreIdx + 1}/${genres.length} genres (${placedCount} placed)`;
+                if (genreIdx % 5 === 0) await new Promise(r => setTimeout(r, 0));
+            }
+        }
+        await placeGenreArtists();
+
+        // Build edges: connect artists that appear in multiple genre clusters
+        _artMap.edges = [];
+        const artistNodes = {};
+        _artMap.placed.forEach(n => {
+            if (n._origId != null) {
+                if (!artistNodes[n._origId]) artistNodes[n._origId] = [];
+                artistNodes[n._origId].push(n.id);
+            }
+        });
+        Object.values(artistNodes).forEach(ids => {
+            if (ids.length > 1) {
+                for (let i = 0; i < ids.length - 1; i++) {
+                    _artMap.edges.push({ source: ids[i], target: ids[i + 1], weight: 5 });
+                }
+            }
+        });
+
+        _artMap._nodeById = {};
+        _artMap.placed.forEach(n => { _artMap._nodeById[n.id] = n; });
+
+        // Auto-zoom
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        _artMap.placed.forEach(n => {
+            minX = Math.min(minX, n.x - n.radius);
+            maxX = Math.max(maxX, n.x + n.radius);
+            minY = Math.min(minY, n.y - n.radius);
+            maxY = Math.max(maxY, n.y + n.radius);
+        });
+        const mapW = maxX - minX + 200, mapH = maxY - minY + 200;
+        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
+        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
+
+        _artMapSetupInteraction(canvas);
+
+        // Load images + render
+        if (loadingText) loadingText.textContent = `Rendering ${placedCount} artists...`;
+
+        setTimeout(async () => {
+            const imgNodes = _artMap.placed.filter(n => n.image_url && !n._isLabel);
+            let loaded = 0;
+            const CONCURRENT = 20;
+            let idx = 0;
+            async function loadBatch() {
+                const batch = [];
+                while (idx < imgNodes.length && batch.length < CONCURRENT) {
+                    const n = imgNodes[idx++];
+                    batch.push(_artMapLoadImage(n.image_url)
+                        .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
+                        .finally(() => { loaded++; }));
+                }
+                if (batch.length) await Promise.all(batch);
+                if (idx < imgNodes.length) return loadBatch();
+            }
+            await loadBatch();
+            _artMap.dirty = true;
+            _artMapRender();
+            const le = document.getElementById('artist-map-loading');
+            if (le) le.remove();
+        }, 50);
+
+        _artMap.dirty = true;
+        _artMapRender();
+
+    } catch (err) {
+        console.error('Genre map error:', err);
+        const lt = container.querySelector('.artist-map-loading-text');
+        if (lt) lt.textContent = 'Error loading genre map';
+    }
+}
+
+function openArtistMapExplorerDirect(name) {
+    if (!name) return;
+    // Already in map — just reload with new data, don't re-hide sections
+    _artMap._skipSectionToggle = true;
+    _openArtistMapExplorerWithName(name);
+}
+
+async function openArtistMapExplorer() {
+    const name = await _showArtistMapSearchPrompt();
+    if (!name) return;
+    _openArtistMapExplorerWithName(name);
+}
+
+async function _openArtistMapExplorerWithName(name) {
+
+    const container = document.getElementById('artist-map-container');
+    if (!container) return;
+
+    const skipToggle = _artMap._skipSectionToggle;
+    _artMap._skipSectionToggle = false;
+
+    if (!skipToggle) {
+        document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
+            el._prevDisplay = el.style.display;
+            el.style.display = 'none';
+        });
+    }
+    container.style.display = 'flex';
+
+    const canvas = document.getElementById('artist-map-canvas');
+    _artMap.canvas = canvas;
+    _artMap.ctx = canvas.getContext('2d');
+    _artMap.width = container.clientWidth;
+    _artMap.height = container.clientHeight - 50;
+    canvas.width = _artMap.width * window.devicePixelRatio;
+    canvas.height = _artMap.height * window.devicePixelRatio;
+    canvas.style.width = _artMap.width + 'px';
+    canvas.style.height = _artMap.height + 'px';
+    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    _artMap.offsetX = _artMap.width / 2;
+    _artMap.offsetY = _artMap.height / 2;
+    _artMap.placed = [];
+    _artMap.edges = [];
+    _artMap.images = {};
+    _artMap._nodeById = null;
+    _artMap.dirty = true;
+
+    const loadingEl = document.createElement('div');
+    loadingEl.id = 'artist-map-loading';
+    loadingEl.innerHTML = `<div class="artist-map-loading-content"><div class="watch-all-loading-spinner"></div><div class="artist-map-loading-text">Exploring ${escapeHtml(name)}...</div></div>`;
+    container.appendChild(loadingEl);
+
+    document.querySelector('.artmap-brand-text').textContent = 'Artist Explorer';
+
+    try {
+        const resp = await fetch(`/api/discover/artist-map/explore?name=${encodeURIComponent(name.trim())}`);
+        const data = await resp.json();
+        if (!data.success || !data.nodes.length) {
+            const lt = document.querySelector('.artist-map-loading-text');
+            if (lt) {
+                lt.textContent = resp.status === 404
+                    ? `"${name}" doesn't appear to be a real artist. Try a different name.`
+                    : `No data found for "${name}". Try a different artist.`;
+            }
+            setTimeout(() => {
+                const le = document.getElementById('artist-map-loading');
+                if (le) le.remove();
+                closeArtistMap();
+            }, 2500);
+            return;
+        }
+
+        const ring1Count = data.nodes.filter(n => n.ring === 1).length;
+        const ring2Count = data.nodes.filter(n => n.ring === 2).length;
+        document.getElementById('artist-map-stats').textContent =
+            `${data.center} · ${ring1Count} similar · ${ring2Count} extended`;
+
+        _artMap.edges = data.edges;
+        const WR = _artMap.WATCHLIST_R;
+        const BUF = _artMap.BUFFER;
+
+        // Layout: center node at origin, ring 1 in circle around it, ring 2 around ring 1
+        const centerNode = data.nodes[0];
+        centerNode.x = 0; centerNode.y = 0;
+        centerNode.radius = WR * 1.2; // Extra large center
+        centerNode.opacity = 1;
+        centerNode.type = 'center';
+        _artMap.placed.push(centerNode);
+
+        const CELL = WR * 2 + BUF * 2;
+        const grid = {};
+        function _gk(x, y) { return `${Math.floor(x / CELL)},${Math.floor(y / CELL)}`; }
+        function _ga(n) { const k = _gk(n.x, n.y); if (!grid[k]) grid[k] = []; grid[k].push(n); }
+        function _gc(x, y, r) {
+            const cx = Math.floor(x / CELL), cy = Math.floor(y / CELL);
+            for (let dx = -3; dx <= 3; dx++) for (let dy = -3; dy <= 3; dy++) {
+                const cell = grid[`${cx + dx},${cy + dy}`];
+                if (!cell) continue;
+                for (const p of cell) {
+                    const ddx = x - p.x, ddy = y - p.y;
+                    if (ddx * ddx + ddy * ddy < (r + p.radius + BUF) * (r + p.radius + BUF)) return true;
+                }
+            }
+            return false;
+        }
+        _ga(centerNode);
+
+        // Place ring 1 in a circle
+        const ring1 = data.nodes.filter(n => n.ring === 1);
+        const ring1Dist = WR * 2.5;
+        ring1.forEach((n, i) => {
+            const angle = (i / ring1.length) * Math.PI * 2;
+            const rank = n.rank || 5;
+            n.radius = WR * 0.4 + (10 - rank) * WR * 0.03;
+            n.opacity = 1;
+
+            // Find non-colliding position near ideal
+            let placed = false;
+            for (let dist = ring1Dist; dist < ring1Dist + WR * 3; dist += n.radius * 0.5) {
+                for (let ao = 0; ao < 6; ao++) {
+                    const a = angle + (ao * 0.1 * (ao % 2 ? 1 : -1));
+                    const tx = Math.cos(a) * dist;
+                    const ty = Math.sin(a) * dist;
+                    if (!_gc(tx, ty, n.radius)) {
+                        n.x = tx; n.y = ty;
+                        _artMap.placed.push(n);
+                        _ga(n);
+                        placed = true;
+                        break;
+                    }
+                }
+                if (placed) break;
+            }
+        });
+
+        // Place ring 2 around their ring 1 sources
+        const ring2 = data.nodes.filter(n => n.ring === 2);
+        const nodeById = {};
+        _artMap.placed.forEach(n => { nodeById[n.id] = n; });
+
+        ring2.forEach(n => {
+            // Find the ring 1 node that connects to this
+            const edge = data.edges.find(e => e.target === n.id);
+            const src = edge ? nodeById[edge.source] : null;
+            const cx = src ? src.x : 0;
+            const cy = src ? src.y : 0;
+
+            n.radius = WR * 0.2 + (n.popularity || 0) / 100 * WR * 0.1;
+            n.opacity = 1;
+
+            const startDist = (src ? src.radius : WR) + n.radius + BUF;
+            let placed = false;
+            for (let dist = startDist; dist < startDist + WR * 2; dist += n.radius * 0.5) {
+                const steps = Math.max(8, Math.floor(dist * 0.08));
+                const off = Math.random() * Math.PI * 2;
+                for (let a = 0; a < steps; a++) {
+                    const angle = off + (a / steps) * Math.PI * 2;
+                    const tx = cx + Math.cos(angle) * dist;
+                    const ty = cy + Math.sin(angle) * dist;
+                    if (!_gc(tx, ty, n.radius)) {
+                        n.x = tx; n.y = ty;
+                        _artMap.placed.push(n);
+                        _ga(n);
+                        placed = true;
+                        break;
+                    }
+                }
+                if (placed) break;
+            }
+        });
+
+        // Build node lookup for edges
+        _artMap._nodeById = {};
+        _artMap.placed.forEach(n => { _artMap._nodeById[n.id] = n; });
+
+        // Auto-zoom
+        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+        _artMap.placed.forEach(n => {
+            minX = Math.min(minX, n.x - n.radius);
+            maxX = Math.max(maxX, n.x + n.radius);
+            minY = Math.min(minY, n.y - n.radius);
+            maxY = Math.max(maxY, n.y + n.radius);
+        });
+        const mapW = maxX - minX + 200, mapH = maxY - minY + 200;
+        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
+        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
+        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
+
+        _artMapSetupInteraction(canvas);
+
+        // Load images
+        const loadingText = container.querySelector('.artist-map-loading-text');
+        if (loadingText) loadingText.textContent = `Loading ${_artMap.placed.length} artists...`;
+
+        setTimeout(async () => {
+            const imgNodes = _artMap.placed.filter(n => n.image_url);
+            let loaded = 0;
+            const CONCURRENT = 20;
+            let idx = 0;
+            async function loadBatch() {
+                const batch = [];
+                while (idx < imgNodes.length && batch.length < CONCURRENT) {
+                    const n = imgNodes[idx++];
+                    batch.push(_artMapLoadImage(n.image_url)
+                        .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
+                        .finally(() => { loaded++; }));
+                }
+                if (batch.length) await Promise.all(batch);
+                if (idx < imgNodes.length) return loadBatch();
+            }
+            await loadBatch();
+            _artMap.dirty = true;
+            _artMapRender();
+            const le = document.getElementById('artist-map-loading');
+            if (le) le.remove();
+        }, 50);
+
+        _artMap.dirty = true;
+        _artMapRender();
+
+    } catch (err) {
+        console.error('Artist explorer error:', err);
+        const lt = container.querySelector('.artist-map-loading-text');
+        if (lt) lt.textContent = 'Error loading explorer';
+    }
+}
+
+function _showArtistMapSearchPrompt() {
+    return new Promise(resolve => {
+        const existing = document.getElementById('artmap-search-prompt');
+        if (existing) existing.remove();
+
+        const overlay = document.createElement('div');
+        overlay.id = 'artmap-search-prompt';
+        overlay.className = 'modal-overlay';
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+        overlay.innerHTML = `
+            <div class="artmap-search-prompt-modal">
+                <div class="artmap-search-prompt-header">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                        <line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
+                    </svg>
+                    <div>
+                        <h3>Artist Explorer</h3>
+                        <p>Enter an artist to explore their connections</p>
+                    </div>
+                </div>
+                <input type="text" id="artmap-explore-input" class="artmap-explore-input" placeholder="Artist name..." autofocus>
+                <div class="artmap-search-prompt-actions">
+                    <button class="ya-header-btn" onclick="document.getElementById('artmap-search-prompt').remove()">Cancel</button>
+                    <button class="ya-header-btn ya-viewall-btn" id="artmap-explore-go">
+                        <span>Explore</span>
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        const input = overlay.querySelector('#artmap-explore-input');
+        const goBtn = overlay.querySelector('#artmap-explore-go');
+
+        const submit = () => {
+            const val = input.value.trim();
+            overlay.remove();
+            resolve(val || null);
+        };
+
+        goBtn.onclick = submit;
+        input.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit(); });
+        setTimeout(() => input.focus(), 50);
+    });
+}
+
+function artMapToggleSimilar() {
+    _artMap._hideSimilar = !_artMap._hideSimilar;
+    _artMap.dirty = true;
+    _artMapRender();
+    const btn = document.getElementById('artmap-toggle-similar');
+    if (btn) btn.style.opacity = _artMap._hideSimilar ? '0.4' : '1';
+    showToast(_artMap._hideSimilar ? 'Showing watchlist only' : 'Showing all artists', 'info', 1500);
+}
+
+function _artMapLoadImage(url) {
+    // Try direct CORS fetch first (zero server load, works for Spotify/iTunes/Discogs)
+    return fetch(url, { mode: 'cors' })
+        .then(r => r.ok ? r.blob() : Promise.reject('not ok'))
+        .then(b => createImageBitmap(b))
+        .catch(() => {
+            // Fallback: server proxy for CDNs without CORS headers
+            return fetch('/api/image-proxy?url=' + encodeURIComponent(url))
+                .then(r => r.ok ? r.blob() : null)
+                .then(b => b ? createImageBitmap(b) : null)
+                .catch(() => null);
+        });
+}
+
+function _artMapHideContextMenu() {
+    const m = document.getElementById('artist-map-context');
+    if (m) m.style.display = 'none';
+}
+
+function _artMapSetupInteraction(canvas) {
+    // Prevent stacking listeners on repeated opens
+    if (canvas._artMapListenersAttached) return;
+    canvas._artMapListenersAttached = true;
+
+    let isPanning = false, panStartX = 0, panStartY = 0;
+
+    canvas.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newZoom = Math.max(0.02, Math.min(5, _artMap.zoom * delta));
+        // Zoom toward mouse
+        const rect = canvas.getBoundingClientRect();
+        const mx = e.clientX - rect.left;
+        const my = e.clientY - rect.top;
+        _artMap.offsetX = mx - (mx - _artMap.offsetX) * (newZoom / _artMap.zoom);
+        _artMap.offsetY = my - (my - _artMap.offsetY) * (newZoom / _artMap.zoom);
+        _artMap.zoom = newZoom;
+        _artMapRender(); // fast blit
+        // Debounce hi-res rebuild after zoom settles
+        clearTimeout(_artMap._zoomRebuild);
+        _artMap._zoomRebuild = setTimeout(() => { _artMap.dirty = true; _artMapRender(); }, 300);
+    }, { passive: false });
+
+    let clickStart = null;
+
+    // Keyboard shortcuts
+    function _artMapKeyHandler(e) {
+        if (!document.getElementById('artist-map-container') || document.getElementById('artist-map-container').style.display === 'none') return;
+        if (e.target.tagName === 'INPUT') return; // don't intercept search typing
+        if (e.key === 'Escape') { closeArtistMap(); e.preventDefault(); }
+        else if (e.key === '=' || e.key === '+') { artMapZoom(1.3); e.preventDefault(); }
+        else if (e.key === '-') { artMapZoom(0.7); e.preventDefault(); }
+        else if (e.key === '0') { artMapFitToView(); e.preventDefault(); }
+        else if (e.key === 'f' || e.key === 'F') { artMapFitToView(); e.preventDefault(); }
+        else if (e.key === 's' || e.key === 'S') {
+            const input = document.getElementById('artist-map-search');
+            if (input) { input.focus(); e.preventDefault(); }
+        }
+        else if (e.key === 'h' || e.key === 'H') {
+            // Toggle similar artists visibility
+            _artMap._hideSimilar = !_artMap._hideSimilar;
+            _artMap.dirty = true;
+            _artMapRender();
+        }
+    }
+    window.addEventListener('keydown', _artMapKeyHandler);
+    _artMap._keyHandler = _artMapKeyHandler;
+
+    // Right-click context menu
+    canvas.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        const { nx, ny } = _artMapScreenToWorld(e, canvas);
+        const node = _artMapHitTest(nx, ny);
+        if (!node || node._isLabel) { _artMapHideContextMenu(); return; }
+
+        const menu = document.getElementById('artist-map-context') || (() => {
+            const m = document.createElement('div');
+            m.id = 'artist-map-context';
+            m.className = 'artmap-context-menu';
+            document.getElementById('artist-map-container').appendChild(m);
+            return m;
+        })();
+
+        const hasId = node.spotify_id || node.itunes_id || node.deezer_id;
+        const activeSource = window._yaActiveSource || 'spotify';
+        const bestId = node[activeSource + '_id'] || node.spotify_id || node.itunes_id || node.deezer_id || '';
+        const bestSource = node[activeSource + '_id'] ? activeSource : node.spotify_id ? 'spotify' : node.itunes_id ? 'itunes' : 'deezer';
+
+        menu.innerHTML = `
+            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); ${hasId ? `openYourArtistInfoModal_direct(${JSON.stringify(node).replace(/"/g, '&quot;')})` : ''}">
+                <span>&#9432;</span> Artist Info
+            </div>
+            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(bestId)}',name:'${escapeForInlineJs(node.name)}',image_url:'${escapeForInlineJs(node.image_url || '')}'},{source:'${bestSource}'}), 200)">
+                <span>&#128191;</span> View Discography
+            </div>
+            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); toggleYourArtistWatchlist(0,'${escapeForInlineJs(node.name)}','${escapeForInlineJs(bestId)}','${bestSource}',null)">
+                <span>&#128065;</span> ${node.type === 'watchlist' ? 'On Watchlist' : 'Add to Watchlist'}
+            </div>
+        `;
+        menu.style.display = 'block';
+        menu.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
+        menu.style.top = Math.min(e.clientY, window.innerHeight - 200) + 'px';
+
+        // Close on next click anywhere
+        setTimeout(() => {
+            window.addEventListener('click', _artMapHideContextMenu, { once: true });
+        }, 10);
+    });
+
+    canvas.addEventListener('mousedown', (e) => {
+        if (e.button !== 0) return; // left button only
+        clickStart = { x: e.clientX, y: e.clientY, time: Date.now() };
+        isPanning = true;
+        panStartX = e.clientX;
+        panStartY = e.clientY;
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+        if (isPanning) {
+            _artMap.offsetX += e.clientX - panStartX;
+            _artMap.offsetY += e.clientY - panStartY;
+            panStartX = e.clientX;
+            panStartY = e.clientY;
+            _artMapRender();
+        } else {
+            const { nx, ny } = _artMapScreenToWorld(e, canvas);
+            const prev = _artMap.hoveredNode;
+            _artMap.hoveredNode = _artMapHitTest(nx, ny);
+            canvas.style.cursor = _artMap.hoveredNode ? 'pointer' : 'grab';
+            _artMapShowTooltip(e, _artMap.hoveredNode);
+            if (prev !== _artMap.hoveredNode) {
+                // Reset constellation highlight timer
+                clearTimeout(_artMap._constellationTimer);
+                if (_artMap._constellationActive) {
+                    _artMap._constellationActive = false;
+                    _artMapAnimateConstellation(); // fade out
+                }
+                if (_artMap.hoveredNode) {
+                    // Delay constellation effect by 800ms of sustained hover
+                    _artMap._constellationTimer = setTimeout(() => {
+                        if (_artMap.hoveredNode) {
+                            _artMap._constellationActive = true;
+                            _artMap._constellationFade = 0;
+                            _artMap._constellationCache = null;
+                            _artMapAnimateConstellation();
+                        }
+                    }, 800);
+                }
+                _artMapRender();
+            }
+        }
+    });
+
+    canvas.addEventListener('mouseup', (e) => {
+        if (e.button !== 0) return; // left button only
+        const wasDrag = clickStart && (Math.abs(e.clientX - clickStart.x) > 5 || Math.abs(e.clientY - clickStart.y) > 5);
+        isPanning = false;
+
+        if (!wasDrag && clickStart) {
+            // It was a click — find the node under cursor
+            const { nx, ny } = _artMapScreenToWorld(e, canvas);
+            const node = _artMapHitTest(nx, ny);
+            if (node) {
+                _artMap._ripple = { x: node.x, y: node.y, radius: node.radius, start: performance.now() };
+                _artMapRender();
+                if (node.spotify_id || node.itunes_id || node.deezer_id) {
+                    setTimeout(() => openYourArtistInfoModal_direct(node), 200);
+                }
+            }
+        }
+
+        clickStart = null;
+        _artMapShowTooltip(e, null);
+    });
+
+    canvas.addEventListener('mouseleave', () => {
+        _artMapShowTooltip(null, null);
+        clearTimeout(_artMap._constellationTimer);
+        if (_artMap._constellationActive) {
+            _artMap._constellationActive = false;
+            _artMapAnimateConstellation();
+        }
+        _artMap.hoveredNode = null;
+        _artMapRender();
+    });
+
+    // Touch support — single finger pan, pinch to zoom
+    let lastTouches = null;
+    canvas.addEventListener('touchstart', (e) => {
+        e.preventDefault();
+        lastTouches = [...e.touches];
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        if (!lastTouches) return;
+        const touches = [...e.touches];
+
+        if (touches.length === 1 && lastTouches.length === 1) {
+            // Pan
+            _artMap.offsetX += touches[0].clientX - lastTouches[0].clientX;
+            _artMap.offsetY += touches[0].clientY - lastTouches[0].clientY;
+            _artMapRender();
+        } else if (touches.length === 2 && lastTouches.length === 2) {
+            // Pinch zoom
+            const prevDist = Math.hypot(lastTouches[1].clientX - lastTouches[0].clientX, lastTouches[1].clientY - lastTouches[0].clientY);
+            const curDist = Math.hypot(touches[1].clientX - touches[0].clientX, touches[1].clientY - touches[0].clientY);
+            const factor = curDist / prevDist;
+            const cx = (touches[0].clientX + touches[1].clientX) / 2;
+            const cy = (touches[0].clientY + touches[1].clientY) / 2;
+            const newZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
+            _artMap.offsetX = cx - (cx - _artMap.offsetX) * (newZoom / _artMap.zoom);
+            _artMap.offsetY = cy - (cy - _artMap.offsetY) * (newZoom / _artMap.zoom);
+            _artMap.zoom = newZoom;
+            _artMap.dirty = true;
+            _artMapRender();
+        }
+        lastTouches = touches;
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', (e) => {
+        e.preventDefault();
+        // Tap to click
+        if (lastTouches && lastTouches.length === 1 && e.changedTouches.length === 1) {
+            const t = e.changedTouches[0];
+            const rect = canvas.getBoundingClientRect();
+            const wx = (t.clientX - rect.left - _artMap.offsetX) / _artMap.zoom;
+            const wy = (t.clientY - rect.top - _artMap.offsetY) / _artMap.zoom;
+            const node = _artMapHitTest(wx, wy);
+            if (node && (node.spotify_id || node.itunes_id || node.deezer_id)) {
+                openYourArtistInfoModal_direct(node);
+            }
+        }
+        lastTouches = null;
+    }, { passive: false });
+
+    // Handle resize
+    window.addEventListener('resize', () => {
+        const container = document.getElementById('artist-map-container');
+        if (!container || container.style.display === 'none') return;
+        _artMap.width = container.clientWidth;
+        _artMap.height = container.clientHeight - 50;
+        canvas.width = _artMap.width * window.devicePixelRatio;
+        canvas.height = _artMap.height * window.devicePixelRatio;
+        canvas.style.width = _artMap.width + 'px';
+        canvas.style.height = _artMap.height + 'px';
+        _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    });
+}
+
+function _artMapScreenToWorld(e, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    const sx = e.clientX - rect.left;
+    const sy = e.clientY - rect.top;
+    // Inverse of: translate(offsetX, offsetY) → scale(zoom)
+    return {
+        nx: (sx - _artMap.offsetX) / _artMap.zoom,
+        ny: (sy - _artMap.offsetY) / _artMap.zoom,
+    };
+}
+
+function _artMapHitTest(wx, wy) {
+    // Check watchlist first (drawn on top), then similar
+    const sorted = [..._artMap.placed].sort((a, b) =>
+        (b.type === 'watchlist' ? 1 : 0) - (a.type === 'watchlist' ? 1 : 0));
+    for (const n of sorted) {
+        if ((n.opacity || 0) < 0.3) continue;
+        const dx = wx - n.x;
+        const dy = wy - n.y;
+        if (dx * dx + dy * dy <= n.radius * n.radius) return n;
+    }
+    return null;
+}
+
+async function openYourArtistInfoModal_direct(node) {
+    // Determine best source ID — prefer active metadata source
+    let bestId = '', bestSource = '';
+    // Check what the active source is
+    const activeSource = window._yaActiveSource || 'spotify';
+    const sourceOrder = activeSource === 'spotify' ? ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id']
+        : activeSource === 'itunes' ? ['itunes_id', 'spotify_id', 'deezer_id', 'discogs_id']
+            : activeSource === 'deezer' ? ['deezer_id', 'spotify_id', 'itunes_id', 'discogs_id']
+                : ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id'];
+    const sourceMap = { spotify_id: 'spotify', itunes_id: 'itunes', deezer_id: 'deezer', discogs_id: 'discogs' };
+    for (const key of sourceOrder) {
+        if (node[key]) { bestId = node[key]; bestSource = sourceMap[key]; break; }
+    }
+
+    // Gather ALL connected artists from map edges (both directions)
+    const related = [];
+    const relatedIds = new Set();
+    const nById = _artMap._nodeById || {};
+    _artMap.edges.forEach(e => {
+        if (e.source === node.id && nById[e.target] && !relatedIds.has(e.target)) {
+            related.push(nById[e.target]);
+            relatedIds.add(e.target);
+        }
+        if (e.target === node.id && nById[e.source] && !relatedIds.has(e.source)) {
+            related.push(nById[e.source]);
+            relatedIds.add(e.source);
+        }
+    });
+
+    const poolEntry = {
+        id: node.id,
+        artist_name: node.name,
+        active_source_id: bestId,
+        active_source: bestSource,
+        image_url: node.image_url || '',
+        spotify_artist_id: node.spotify_id || '',
+        itunes_artist_id: node.itunes_id || '',
+        deezer_artist_id: node.deezer_id || '',
+        discogs_artist_id: node.discogs_id || '',
+        source_services: [],
+        on_watchlist: node.type === 'watchlist' ? 1 : 0,
+        _related: related,
+    };
+    if (!window._yaArtists) window._yaArtists = {};
+    window._yaArtists[node.id] = poolEntry;
+    openYourArtistInfoModal(node.id);
+}
+
+async function loadDiscoveryShuffle() {
+    try {
+        const container = document.getElementById('personalized-discovery-shuffle');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/discovery-shuffle?limit=50');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedDiscoveryShuffle = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading discovery shuffle:', error);
+    }
+}
+
+async function loadFamiliarFavorites() {
+    try {
+        const container = document.getElementById('personalized-familiar-favorites');
+        if (!container) return;
+
+        const response = await fetch('/api/discover/personalized/familiar-favorites?limit=50');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            container.closest('.discover-section').style.display = 'none';
+            return;
+        }
+
+        personalizedFamiliarFavorites = data.tracks;
+        renderCompactPlaylist(container, data.tracks);
+        container.closest('.discover-section').style.display = 'block';
+
+    } catch (error) {
+        console.error('Error loading familiar favorites:', error);
+    }
+}
+
+// ===============================
+// BECAUSE YOU LISTEN TO
+// ===============================
+
+async function loadBecauseYouListenTo() {
+    try {
+        const resp = await fetch('/api/discover/because-you-listen-to');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.sections || data.sections.length === 0) return;
+
+        // Find or create the BYLT container
+        let byltContainer = document.getElementById('discover-bylt-sections');
+        if (!byltContainer) {
+            // Insert after the release radar section
+            const releaseRadar = document.getElementById('discover-release-radar');
+            if (!releaseRadar) return;
+            const parent = releaseRadar.closest('.discover-section');
+            if (!parent) return;
+
+            byltContainer = document.createElement('div');
+            byltContainer.id = 'discover-bylt-sections';
+            parent.parentNode.insertBefore(byltContainer, parent.nextSibling);
+        }
+
+        byltContainer.innerHTML = data.sections.map((section, idx) => `
+            <div class="discover-section bylt-section">
+                <div class="discover-section-header">
+                    <div class="bylt-header">
+                        ${section.artist_image ? `<img class="bylt-artist-img" src="${section.artist_image}" alt="" onerror="this.style.display='none'">` : ''}
+                        <div>
+                            <div class="discover-section-subtitle">Because you listen to</div>
+                            <h3 class="discover-section-title">${_esc(section.artist_name)}</h3>
+                        </div>
+                    </div>
+                </div>
+                <div class="discover-carousel" id="bylt-carousel-${idx}"></div>
+            </div>
+        `).join('');
+
+        // Render track cards in each carousel
+        data.sections.forEach((section, idx) => {
+            const carousel = document.getElementById(`bylt-carousel-${idx}`);
+            if (!carousel) return;
+            carousel.innerHTML = section.tracks.map(t => `
+                <div class="discover-card">
+                    <div class="discover-card-image">
+                        ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.src='/static/placeholder.png'">` : '<div class="discover-card-placeholder">🎵</div>'}
+                    </div>
+                    <div class="discover-card-title">${_esc(t.name)}</div>
+                    <div class="discover-card-artist">${_esc(t.artist)}</div>
+                </div>
+            `).join('');
+        });
+
+    } catch (error) {
+        console.debug('Error loading Because You Listen To:', error);
+    }
+}
+
+// ===============================
+// CACHE DISCOVERY SECTIONS
+// ===============================
+
+// Global arrays for cache discovery click handlers
+let _cacheDiscoverData = {};
+
+function _cacheDiscoverCard(item, type, sectionKey, index) {
+    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    const coverUrl = item.image_url || '/static/placeholder-album.png';
+    const title = item.name || '';
+    const subtitle = item.artist_name || '';
+    const meta = item.release_date ? item.release_date.substring(0, 10) : (item.label || '');
+    const onclick = `openCacheDiscoverAlbum('${sectionKey}',${index})`;
+    const libBadge = item.in_library ? '<div class="discover-card-lib-badge">In Library</div>' : '';
+    return `<div class="discover-card" onclick="${onclick}" style="cursor:pointer">
+        <div class="discover-card-image">
+            <img src="${_esc(coverUrl)}" alt="${_esc(title)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
+            ${libBadge}
+        </div>
+        <div class="discover-card-info">
+            <h4 class="discover-card-title">${_esc(title)}</h4>
+            <p class="discover-card-subtitle">${_esc(subtitle)}</p>
+            ${meta ? `<p class="discover-card-meta">${_esc(meta)}</p>` : ''}
+        </div>
+    </div>`;
+}
+
+async function openCacheDiscoverAlbum(sectionKey, index) {
+    const items = _cacheDiscoverData[sectionKey];
+    if (!items || !items[index]) return;
+    const item = items[index];
+    const source = item.source || 'spotify';
+    const albumId = item.entity_id;
+
+    // Deep cuts / genre dive tracks — find the real album by searching the cache
+    if (sectionKey === 'deep_cuts' || sectionKey === 'genre_dive_tracks') {
+        document.getElementById('genre-deep-dive-modal')?.remove();
+        const albumName = item.album_name || item.name || '';
+        const artistName = item.artist_name || '';
+        const trackAlbumId = item.album_id || '';
+        const trackSource = item.source || source;
+
+        if (!artistName) {
+            showToast('No artist data available for this track', 'error');
+            return;
+        }
+
+        showLoadingOverlay(`Loading ${albumName}...`);
+        try {
+            let resolvedSource = trackSource;
+            let resolvedId = trackAlbumId;
+            let response;
+
+            // If we have an album_id, use it directly
+            if (trackAlbumId) {
+                const _params = new URLSearchParams({ name: albumName, artist: artistName });
+                response = await fetch(`/api/discover/album/${trackSource}/${trackAlbumId}?${_params}`);
+            }
+
+            // Fallback: resolve by name+artist if no album_id or direct fetch failed
+            if (!trackAlbumId || (response && !response.ok)) {
+                const searchResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(albumName)}&artist=${encodeURIComponent(artistName)}`);
+                if (searchResp.ok) {
+                    const searchData = await searchResp.json();
+                    if (searchData.success && searchData.entity_id) {
+                        resolvedSource = searchData.source || trackSource;
+                        resolvedId = searchData.entity_id;
+                        const _params = new URLSearchParams({ name: albumName, artist: artistName });
+                        response = await fetch(`/api/discover/album/${resolvedSource}/${resolvedId}?${_params}`);
+                    }
+                }
+            }
+
+            if (!response || !response.ok) throw new Error('Failed to fetch album tracks');
+            const albumData = await response.json();
+            if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
+
+            const spotifyTracks = albumData.tracks.map(track => {
+                let artists = track.artists || albumData.artists || [{ name: artistName }];
+                if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+                return {
+                    id: track.id, name: track.name, artists,
+                    album: { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] },
+                    duration_ms: track.duration_ms || 0, track_number: track.track_number || 0,
+                };
+            });
+            const artistContext = { id: albumData.artists?.[0]?.id || '', name: artistName, source: resolvedSource };
+            const albumContext = { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] };
+            await openDownloadMissingModalForYouTube(`discover_cache_${resolvedId}`, albumData.name, spotifyTracks, artistContext, albumContext);
+            hideLoadingOverlay();
+        } catch (error) {
+            console.error('Error opening deep cut album:', error);
+            showToast(`Failed to load album: ${error.message}`, 'error');
+            hideLoadingOverlay();
+        }
+        return;
+    }
+
+    if (!albumId) {
+        showToast('No album ID available', 'error');
+        return;
+    }
+
+    // Close genre deep dive modal if open
+    document.getElementById('genre-deep-dive-modal')?.remove();
+
+    showLoadingOverlay(`Loading ${item.name || 'album'}...`);
+    try {
+        const _params = new URLSearchParams({ name: item.name || '', artist: item.artist_name || '' });
+        let response = await fetch(`/api/discover/album/${source}/${albumId}?${_params}`);
+
+        // If 404 (stale cache entry), try resolving via name+artist
+        if (response.status === 404) {
+            const resolveResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(item.name || '')}&artist=${encodeURIComponent(item.artist_name || '')}`);
+            if (resolveResp.ok) {
+                const resolved = await resolveResp.json();
+                if (resolved.success && resolved.entity_id && resolved.entity_id !== albumId) {
+                    response = await fetch(`/api/discover/album/${resolved.source || source}/${resolved.entity_id}?${_params}`);
+                }
+            }
+        }
+
+        if (!response.ok) throw new Error('Album not available — it may have been removed from the source');
+        const albumData = await response.json();
+        if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
+
+        const spotifyTracks = albumData.tracks.map(track => {
+            let artists = track.artists || albumData.artists || [{ name: item.artist_name }];
+            if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
+            return {
+                id: track.id,
+                name: track.name,
+                artists: artists,
+                album: {
+                    id: albumData.id,
+                    name: albumData.name,
+                    album_type: albumData.album_type || 'album',
+                    total_tracks: albumData.total_tracks || 0,
+                    release_date: albumData.release_date || '',
+                    images: albumData.images || [],
+                },
+                duration_ms: track.duration_ms || 0,
+                track_number: track.track_number || 0,
+            };
+        });
+
+        const artistContext = {
+            id: albumData.artists?.[0]?.id || '',
+            name: item.artist_name || albumData.artists?.[0]?.name || '',
+            source: source,
+        };
+        const albumContext = {
+            id: albumData.id,
+            name: albumData.name,
+            album_type: albumData.album_type || 'album',
+            total_tracks: albumData.total_tracks || 0,
+            release_date: albumData.release_date || '',
+            images: albumData.images || [],
+        };
+
+        await openDownloadMissingModalForYouTube(
+            `discover_cache_${albumId}`, albumData.name, spotifyTracks, artistContext, albumContext
+        );
+        hideLoadingOverlay();
+    } catch (error) {
+        console.error('Error opening cache discover album:', error);
+        showToast(`Failed to load album: ${error.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+function _insertCacheSection(id, title, subtitle, html, position) {
+    const container = document.getElementById('discover-bylt-sections') || document.querySelector('.discover-container');
+    if (!container) return;
+    let section = document.getElementById(id);
+    if (!section) {
+        section = document.createElement('div');
+        section.id = id;
+        section.className = 'discover-section';
+        if (position === 'top') {
+            // Insert after the hero section (first child), not before it
+            const hero = container.querySelector('.discover-hero');
+            if (hero && hero.nextSibling) {
+                container.insertBefore(section, hero.nextSibling);
+            } else {
+                container.prepend(section);
+            }
+        } else {
+            container.appendChild(section);
+        }
+    }
+    section.innerHTML = `
+        <div class="discover-section-header">
+            <div>
+                <div class="discover-section-subtitle">${subtitle}</div>
+                <h3 class="discover-section-title">${title}</h3>
+            </div>
+        </div>
+        <div class="discover-carousel">${html}</div>
+    `;
+}
+
+async function loadCacheUndiscoveredAlbums() {
+    try {
+        const resp = await fetch('/api/discover/undiscovered-albums');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.albums || !data.albums.length) return;
+        _cacheDiscoverData['undiscovered'] = data.albums;
+        _insertCacheSection('cache-undiscovered',
+            'Undiscovered Albums', 'From artists you love',
+            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'undiscovered', i)).join(''));
+    } catch (e) { console.debug('Cache undiscovered albums:', e); }
+}
+
+async function loadCacheGenreNewReleases() {
+    try {
+        const resp = await fetch('/api/discover/genre-new-releases');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.albums || !data.albums.length) return;
+        _cacheDiscoverData['genre_releases'] = data.albums;
+        _insertCacheSection('cache-genre-releases',
+            'New In Your Genres', 'Released in the last 90 days',
+            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_releases', i)).join(''));
+    } catch (e) { console.debug('Cache genre new releases:', e); }
+}
+
+async function loadCacheLabelExplorer() {
+    try {
+        const resp = await fetch('/api/discover/label-explorer');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.albums || !data.albums.length) return;
+        _cacheDiscoverData['label_explorer'] = data.albums;
+        _insertCacheSection('cache-label-explorer',
+            'From Your Labels', 'Popular on labels in your library',
+            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'label_explorer', i)).join(''));
+    } catch (e) { console.debug('Cache label explorer:', e); }
+}
+
+async function loadCacheDeepCuts() {
+    try {
+        const resp = await fetch('/api/discover/deep-cuts');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.tracks || !data.tracks.length) return;
+        _cacheDiscoverData['deep_cuts'] = data.tracks;
+        _insertCacheSection('cache-deep-cuts',
+            'Deep Cuts', 'Hidden tracks from artists you know',
+            data.tracks.map((t, i) => _cacheDiscoverCard(t, 'track', 'deep_cuts', i)).join(''));
+    } catch (e) { console.debug('Cache deep cuts:', e); }
+}
+
+async function loadCacheGenreExplorer() {
+    try {
+        const resp = await fetch('/api/discover/genre-explorer');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.genres || !data.genres.length) return;
+        const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
+        const html = `<div class="genre-explorer-grid">${data.genres.map(g => `
+            <div class="genre-explorer-pill ${g.explored ? 'explored' : 'unexplored'}" onclick="openGenreDeepDive('${_esc(g.genre)}')" style="cursor:pointer">
+                <span class="genre-pill-name">${_esc(g.genre)}</span>
+                <span class="genre-pill-count">${g.artist_count} artist${g.artist_count !== 1 ? 's' : ''}</span>
+                ${!g.explored ? '<span class="genre-pill-badge">New</span>' : ''}
+            </div>
+        `).join('')}</div>`;
+        _insertCacheSection('cache-genre-explorer',
+            'Genre Explorer', 'Tap a genre to explore', html, 'top');
+    } catch (e) { console.debug('Cache genre explorer:', e); }
+}
+
+async function openGenreDeepDive(genre) {
+    document.getElementById('genre-deep-dive-modal')?.remove();
+
+    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    const _fmtNum = (n) => {
+        if (!n) return '';
+        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
+        return n.toString();
+    };
+    const _fmtDur = (ms) => {
+        if (!ms) return '';
+        const m = Math.floor(ms / 60000);
+        const s = Math.floor((ms % 60000) / 1000);
+        return `${m}:${s.toString().padStart(2, '0')}`;
+    };
+
+    const overlay = document.createElement('div');
+    overlay.id = 'genre-deep-dive-modal';
+    overlay.className = 'genre-dive-overlay';
+    overlay.innerHTML = `
+        <div class="genre-dive-modal">
+            <div class="genre-dive-header">
+                <div>
+                    <div class="genre-dive-subtitle">Genre Deep Dive</div>
+                    <h2 class="genre-dive-title">${_esc(genre)}</h2>
+                </div>
+                <button class="genre-dive-close" onclick="document.getElementById('genre-deep-dive-modal').remove()">&times;</button>
+            </div>
+            <div class="genre-dive-body" id="genre-dive-body">
+                <div class="genre-dive-loading"><div class="genre-dive-spinner"></div>Exploring ${_esc(genre)}...</div>
+            </div>
+        </div>
+    `;
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+    document.body.appendChild(overlay);
+
+    try {
+        const resp = await fetch(`/api/discover/genre-deep-dive?genre=${encodeURIComponent(genre)}`);
+        if (!resp.ok) throw new Error('Failed to load');
+        const data = await resp.json();
+        if (!data.success) throw new Error('Failed');
+
+        const body = document.getElementById('genre-dive-body');
+        if (!body) return;
+
+        // Update header with counts
+        const subtitle = document.querySelector('.genre-dive-subtitle');
+        if (subtitle) {
+            const parts = [];
+            if (data.artists?.length) parts.push(`${data.artists.length} artist${data.artists.length !== 1 ? 's' : ''}`);
+            if (data.tracks?.length) parts.push(`${data.tracks.length} track${data.tracks.length !== 1 ? 's' : ''}`);
+            if (data.albums?.length) parts.push(`${data.albums.length} album${data.albums.length !== 1 ? 's' : ''}`);
+            subtitle.textContent = parts.length ? parts.join(' · ') : 'Genre Deep Dive';
+        }
+
+        let html = '';
+
+        // Related genres — clickable pills that reload the modal
+        if (data.related_genres && data.related_genres.length) {
+            html += `<div class="genre-dive-related">
+                <div class="genre-dive-related-label">Related Genres</div>
+                ${data.related_genres.map(rg => `
+                    <button class="genre-dive-related-pill" onclick="document.getElementById('genre-deep-dive-modal').remove();openGenreDeepDive('${_esc(rg.genre)}')">${_esc(rg.genre)}</button>
+                `).join('')}
+            </div>`;
+        }
+
+        // Artists section — clickable, navigates to artist page
+        // Uses library_id for in-library artists (source-agnostic), falls back to search by name
+        if (data.artists && data.artists.length) {
+            html += `<div class="genre-dive-section">
+                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">🎤</span> Artists in ${_esc(genre)}</h3>
+                <div class="genre-dive-artists">
+                    ${data.artists.map(a => {
+                // Always open on Artists page with discography — pass source for correct routing
+                const imgUrl = _esc(a.image_url || '');
+                const artSource = _esc(a.source || '');
+                const clickAction = `onclick="document.getElementById('genre-deep-dive-modal').remove();navigateToPage('artists');setTimeout(()=>selectArtistForDetail({id:'${_esc(a.entity_id)}',name:'${_esc(a.name)}',image_url:'${imgUrl}'},{source:'${artSource}'}),300)"`;
+                const srcClass = (a.source || '').toLowerCase();
+                return `<div class="genre-dive-artist" ${clickAction}>
+                            <div class="genre-dive-artist-img" style="${a.image_url ? `background-image:url('${_esc(a.image_url)}')` : ''}">
+                                ${!a.image_url ? '<span>🎤</span>' : ''}
+                            </div>
+                            <span class="genre-dive-src-dot genre-dive-src-${srcClass}"></span>
+                            <div class="genre-dive-artist-name">${_esc(a.name)}</div>
+                            ${a.followers ? `<div class="genre-dive-artist-meta">${_fmtNum(a.followers)} followers</div>` : ''}
+                            ${a.library_id ? '<div class="genre-dive-artist-badge">In Library</div>' : ''}
+                        </div>`;
+            }).join('')}
+                </div>
+            </div>`;
+        }
+
+        // Tracks section — clickable, opens album download
+        if (data.tracks && data.tracks.length) {
+            _cacheDiscoverData['genre_dive_tracks'] = data.tracks;
+            html += `<div class="genre-dive-section">
+                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">🎵</span> Popular Tracks</h3>
+                <div class="genre-dive-tracks">
+                    ${data.tracks.map((t, i) => {
+                const tSrcClass = (t.source || '').toLowerCase();
+                return `
+                        <div class="genre-dive-track" onclick="document.getElementById('genre-deep-dive-modal').remove();openCacheDiscoverAlbum('genre_dive_tracks',${i})">
+                            <div class="genre-dive-track-num">${i + 1}</div>
+                            <div class="genre-dive-track-img" style="${t.image_url ? `background-image:url('${_esc(t.image_url)}')` : ''}">
+                                ${!t.image_url ? '🎵' : ''}
+                            </div>
+                            <div class="genre-dive-track-info">
+                                <div class="genre-dive-track-name">${_esc(t.name)}</div>
+                                <div class="genre-dive-track-artist">${_esc(t.artist_name)}${t.album_name ? ' · ' + _esc(t.album_name) : ''}</div>
+                            </div>
+                            <span class="genre-dive-src-dot genre-dive-src-${tSrcClass}" style="flex-shrink:0"></span>
+                            <div class="genre-dive-track-duration">${_fmtDur(t.duration_ms)}</div>
+                        </div>
+                    `}).join('')}
+                </div>
+            </div>`;
+        }
+
+        // Albums section
+        if (data.albums && data.albums.length) {
+            _cacheDiscoverData['genre_dive_albums'] = data.albums;
+            html += `<div class="genre-dive-section">
+                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">💿</span> Albums</h3>
+                <div class="discover-carousel">${data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_dive_albums', i)).join('')}</div>
+            </div>`;
+        }
+
+        if (!html) {
+            html = '<div class="genre-dive-empty"><div class="genre-dive-empty-icon">🔍</div><p>No cached data found for this genre yet</p><p class="genre-dive-empty-hint">Search for artists in this genre to build up the cache</p></div>';
+        }
+
+        body.innerHTML = html;
+    } catch (e) {
+        const body = document.getElementById('genre-dive-body');
+        if (body) body.innerHTML = '<div style="color:rgba(255,100,100,0.6);text-align:center;padding:40px;">Failed to load genre data</div>';
+    }
+}
+
+// ===============================
+// BUILD A PLAYLIST FEATURE
+// ===============================
+
+let buildPlaylistSearchTimeout = null;
+
+async function searchBuildPlaylistArtists() {
+    const searchInput = document.getElementById('build-playlist-search');
+    const resultsContainer = document.getElementById('build-playlist-search-results');
+    const spinner = document.getElementById('bp-search-spinner');
+    const query = searchInput.value.trim();
+
+    if (!query) {
+        resultsContainer.innerHTML = '';
+        resultsContainer.style.display = 'none';
+        if (spinner) spinner.style.display = 'none';
+        return;
+    }
+
+    // Debounce search
+    clearTimeout(buildPlaylistSearchTimeout);
+    buildPlaylistSearchTimeout = setTimeout(async () => {
+        if (spinner) spinner.style.display = 'flex';
+        try {
+            const response = await fetch(`/api/discover/build-playlist/search-artists?query=${encodeURIComponent(query)}`);
+            const data = await response.json();
+            if (!response.ok) {
+                showToast(data.error || 'Search failed', 'error');
+                return;
+            }
+            if (!data.success || !data.artists || data.artists.length === 0) {
+                resultsContainer.innerHTML = '<div class="build-playlist-no-results">No artists found for "' + query.replace(/</g, '&lt;') + '"</div>';
+                resultsContainer.style.display = 'block';
+                return;
+            }
+
+            // Filter out already-selected artists
+            const selectedIds = new Set(buildPlaylistSelectedArtists.map(a => a.id));
+            const filtered = data.artists.filter(a => !selectedIds.has(a.id));
+
+            if (filtered.length === 0) {
+                resultsContainer.innerHTML = '<div class="build-playlist-no-results">All results already selected</div>';
+                resultsContainer.style.display = 'block';
+                return;
+            }
+
+            // Render search results
+            let html = '';
+            filtered.forEach(artist => {
+                const imageUrl = artist.image_url || '/static/placeholder-album.png';
+                const escapedName = artist.name.replace(/'/g, "\\'").replace(/"/g, '&quot;');
+                html += `
+                    <div class="build-playlist-search-result" onclick="addBuildPlaylistArtist('${artist.id}', '${escapedName}', '${imageUrl}')">
+                        <img src="${imageUrl}" alt="${artist.name}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
+                        <span class="bp-result-name">${artist.name}</span>
+                        <span class="bp-result-add">+ Add</span>
+                    </div>
+                `;
+            });
+
+            resultsContainer.innerHTML = html;
+            resultsContainer.style.display = 'block';
+
+        } catch (error) {
+            console.error('Error searching artists:', error);
+        } finally {
+            if (spinner) spinner.style.display = 'none';
+        }
+    }, 400);
+}
+
+function addBuildPlaylistArtist(artistId, artistName, imageUrl) {
+    if (buildPlaylistSelectedArtists.some(a => a.id === artistId)) {
+        showToast('Artist already selected', 'warning');
+        return;
+    }
+    if (buildPlaylistSelectedArtists.length >= 5) {
+        showToast('Maximum 5 seed artists', 'warning');
+        return;
+    }
+
+    buildPlaylistSelectedArtists.push({
+        id: artistId,
+        name: artistName,
+        image_url: imageUrl
+    });
+
+    renderBuildPlaylistSelectedArtists();
+
+    // Clear search
+    document.getElementById('build-playlist-search').value = '';
+    document.getElementById('build-playlist-search-results').innerHTML = '';
+    document.getElementById('build-playlist-search-results').style.display = 'none';
+}
+
+function removeBuildPlaylistArtist(artistId) {
+    buildPlaylistSelectedArtists = buildPlaylistSelectedArtists.filter(a => a.id !== artistId);
+    renderBuildPlaylistSelectedArtists();
+}
+
+function renderBuildPlaylistSelectedArtists() {
+    const container = document.getElementById('build-playlist-selected-artists');
+    const generateBtn = document.getElementById('build-playlist-generate-btn');
+    const counter = document.getElementById('bp-selected-counter');
+    const count = buildPlaylistSelectedArtists.length;
+
+    if (counter) counter.textContent = `${count} / 5`;
+
+    if (count === 0) {
+        container.innerHTML = `
+            <div class="build-playlist-no-selection">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width: 32px; height: 32px; opacity: 0.4; margin-bottom: 8px;"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
+                <span>Search above to add seed artists</span>
+            </div>`;
+        generateBtn.disabled = true;
+        return;
+    }
+
+    let html = '';
+    buildPlaylistSelectedArtists.forEach(artist => {
+        const escapedId = artist.id.replace(/'/g, "\\'");
+        html += `
+            <div class="build-playlist-selected-artist">
+                <img src="${artist.image_url || '/static/placeholder-album.png'}" alt="${artist.name}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
+                <span>${artist.name}</span>
+                <button onclick="removeBuildPlaylistArtist('${escapedId}')" class="build-playlist-remove-artist" title="Remove">×</button>
+            </div>
+        `;
+    });
+
+    container.innerHTML = html;
+    generateBtn.disabled = false;
+}
+
+let buildPlaylistTracks = [];
+
+async function generateBuildPlaylist() {
+    if (buildPlaylistSelectedArtists.length === 0) {
+        showToast('Please select at least 1 artist', 'warning');
+        return;
+    }
+
+    const generateBtn = document.getElementById('build-playlist-generate-btn');
+    const resultsContainer = document.getElementById('build-playlist-results');
+    const resultsWrapper = document.getElementById('build-playlist-results-wrapper');
+    const loadingIndicator = document.getElementById('build-playlist-loading');
+    const metadataDisplay = document.getElementById('build-playlist-metadata-display');
+    const titleEl = document.getElementById('build-playlist-results-title');
+    const subtitleEl = document.getElementById('build-playlist-results-subtitle');
+
+    // Show loading, hide search area
+    generateBtn.disabled = true;
+    loadingIndicator.style.display = 'flex';
+    resultsWrapper.style.display = 'none';
+    resultsContainer.innerHTML = '';
+
+    try {
+        const seedIds = buildPlaylistSelectedArtists.map(a => a.id);
+        const response = await fetch('/api/discover/build-playlist/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                seed_artist_ids: seedIds,
+                playlist_size: 50
+            })
+        });
+
+        const data = await response.json();
+        if (!response.ok || !data.success) {
+            throw new Error(data.error || 'Failed to generate playlist');
+        }
+        if (!data.playlist || !data.playlist.tracks || data.playlist.tracks.length === 0) {
+            throw new Error(data.playlist?.error || 'No tracks found. Try different seed artists.');
+        }
+
+        // Store tracks globally
+        buildPlaylistTracks = data.playlist.tracks;
+
+        // Update title and subtitle
+        const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
+        titleEl.textContent = 'Custom Playlist';
+        subtitleEl.textContent = `Based on: ${artistNames}`;
+
+        // Render metadata
+        const metadata = data.playlist.metadata;
+        metadataDisplay.innerHTML = `
+            <div class="build-playlist-metadata">
+                <div class="bp-meta-stat">
+                    <span class="bp-meta-value">${metadata.total_tracks}</span>
+                    <span class="bp-meta-label">Tracks</span>
+                </div>
+                <div class="bp-meta-stat">
+                    <span class="bp-meta-value">${metadata.similar_artists_count}</span>
+                    <span class="bp-meta-label">Similar Artists</span>
+                </div>
+                <div class="bp-meta-stat">
+                    <span class="bp-meta-value">${metadata.albums_count}</span>
+                    <span class="bp-meta-label">Albums Sampled</span>
+                </div>
+            </div>
+        `;
+
+        // Render playlist
+        renderCompactPlaylist(resultsContainer, data.playlist.tracks);
+
+        // Show results wrapper
+        resultsWrapper.style.display = 'block';
+
+    } catch (error) {
+        console.error('Error generating playlist:', error);
+        resultsWrapper.style.display = 'none';
+        showToast(error.message || 'Failed to generate playlist', 'error');
+    } finally {
+        loadingIndicator.style.display = 'none';
+        generateBtn.disabled = false;
+    }
+}
+
+async function openDownloadModalForBuildPlaylist() {
+    if (!buildPlaylistTracks || buildPlaylistTracks.length === 0) {
+        showToast('No playlist tracks available', 'warning');
+        return;
+    }
+
+    const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
+    const playlistName = `Custom Playlist - ${artistNames}`;
+    const virtualPlaylistId = 'build_playlist_custom';
+
+    // Open download modal
+    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, buildPlaylistTracks);
+}
+
+function openDailyMix(mixIndex) {
+    const mix = personalizedDailyMixes[mixIndex];
+    if (!mix || !mix.tracks) return;
+
+    // TODO: Open modal or dedicated view for Daily Mix
+    console.log('Opening Daily Mix:', mix.name);
+}
+
+// ===============================
+// DISCOVER PLAYLIST ACTIONS
+// ===============================
+
+async function openDownloadModalForDiscoverPlaylist(playlistType, playlistName) {
+    console.log(`📥 Opening Download Missing Tracks modal for ${playlistName}`);
+
+    try {
+        // Get tracks based on playlist type
+        let tracks = [];
+        if (playlistType === 'release_radar') {
+            tracks = discoverReleaseRadarTracks;
+        } else if (playlistType === 'discovery_weekly') {
+            tracks = discoverWeeklyTracks;
+        } else if (playlistType === 'seasonal_playlist') {
+            tracks = discoverSeasonalTracks;
+        } else if (playlistType === 'popular_picks') {
+            tracks = personalizedPopularPicks;
+        } else if (playlistType === 'hidden_gems') {
+            tracks = personalizedHiddenGems;
+        } else if (playlistType === 'discovery_shuffle') {
+            tracks = personalizedDiscoveryShuffle;
+        } else if (playlistType === 'familiar_favorites') {
+            tracks = personalizedFamiliarFavorites;
+        } else if (playlistType === 'recently_added') {
+            tracks = personalizedRecentlyAdded;
+        } else if (playlistType === 'top_tracks') {
+            tracks = personalizedTopTracks;
+        } else if (playlistType === 'forgotten_favorites') {
+            tracks = personalizedForgottenFavorites;
+        } else if (playlistType === 'build_playlist') {
+            tracks = buildPlaylistTracks;
+        }
+
+        if (!tracks || tracks.length === 0) {
+            showToast(`No tracks available for ${playlistName}`, 'warning');
+            return;
+        }
+
+        // Convert discover tracks to format expected by download modal
+        const spotifyTracks = tracks.map(track => {
+            let spotifyTrack;
+
+            // Use track_data_json if available, otherwise construct from track data
+            if (track.track_data_json) {
+                spotifyTrack = track.track_data_json;
+            } else {
+                // Fallback: construct track object from available data
+                spotifyTrack = {
+                    id: track.spotify_track_id,
+                    name: track.track_name,
+                    artists: [{ name: track.artist_name }],
+                    album: {
+                        name: track.album_name,
+                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+                    },
+                    duration_ms: track.duration_ms || 0
+                };
+            }
+
+            // Normalize artists to array of strings for modal compatibility
+            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+            }
+
+            return spotifyTrack;
+        });
+
+        // Create virtual playlist ID
+        const virtualPlaylistId = `discover_${playlistType}`;
+
+        // Use existing modal system (same as YouTube/Tidal playlists)
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+    } catch (error) {
+        console.error('Error opening download modal for discover playlist:', error);
+        showToast(`Failed to open download modal: ${error.message}`, 'error');
+        hideLoadingOverlay();  // Ensure overlay is hidden on error
+    }
+}
+
+function updateDiscoverDownloadButton(playlistType, state) {
+    /**
+     * Update the download button appearance based on download state
+     * @param {string} playlistType - 'release_radar' or 'discovery_weekly'
+     * @param {string} state - 'idle', 'downloading', or 'complete'
+     */
+    const buttonId = `${playlistType}-download-btn`;
+    const button = document.getElementById(buttonId);
+
+    if (!button) return;
+
+    const icon = button.querySelector('.button-icon');
+    const text = button.querySelector('.button-text');
+
+    if (state === 'downloading') {
+        if (icon) icon.textContent = '⏳';
+        if (text) text.textContent = 'View Progress';
+        button.title = 'View download progress';
+    } else {
+        if (icon) icon.textContent = '↓';
+        if (text) text.textContent = 'Download';
+        button.title = 'Download missing tracks';
+    }
+}
+
+function checkForActiveDiscoverDownloads() {
+    /**
+     * Check for active download processes and update button states
+     * Only runs if discover page is actually loaded in the DOM
+     */
+    // Check if discover page is loaded by looking for a discover-specific element
+    const discoverPage = document.getElementById('release-radar-download-btn') ||
+        document.getElementById('discovery-weekly-download-btn');
+
+    if (!discoverPage) return;
+
+    const discoverPlaylists = [
+        { id: 'discover_release_radar', type: 'release_radar' },
+        { id: 'discover_discovery_weekly', type: 'discovery_weekly' }
+    ];
+
+    discoverPlaylists.forEach(({ id, type }) => {
+        if (activeDownloadProcesses[id]) {
+            const process = activeDownloadProcesses[id];
+            if (process.status === 'running' || process.status === 'idle') {
+                updateDiscoverDownloadButton(type, 'downloading');
+            }
+        }
+    });
+}
+
+async function startDiscoverPlaylistSync(playlistType, playlistName) {
+    console.log(`🔄 Starting sync for ${playlistName}`);
+
+    // Get tracks based on playlist type
+    let tracks = [];
+    if (playlistType === 'release_radar') {
+        tracks = discoverReleaseRadarTracks;
+    } else if (playlistType === 'discovery_weekly') {
+        tracks = discoverWeeklyTracks;
+    } else if (playlistType === 'seasonal_playlist') {
+        tracks = discoverSeasonalTracks;
+    } else if (playlistType === 'popular_picks') {
+        tracks = personalizedPopularPicks;
+    } else if (playlistType === 'hidden_gems') {
+        tracks = personalizedHiddenGems;
+    } else if (playlistType === 'discovery_shuffle') {
+        tracks = personalizedDiscoveryShuffle;
+    } else if (playlistType === 'familiar_favorites') {
+        tracks = personalizedFamiliarFavorites;
+    } else if (playlistType === 'build_playlist') {
+        tracks = buildPlaylistTracks;
+    }
+
+    if (!tracks || tracks.length === 0) {
+        showToast(`No tracks available for ${playlistName}`, 'warning');
+        return;
+    }
+
+    // Convert to format expected by sync API
+    const spotifyTracks = tracks.map(track => {
+        let spotifyTrack;
+
+        // Use track_data_json if available
+        if (track.track_data_json) {
+            spotifyTrack = track.track_data_json;
+        } else {
+            // Fallback: construct track object
+            spotifyTrack = {
+                id: track.spotify_track_id,
+                name: track.track_name,
+                artists: [{ name: track.artist_name }],
+                album: {
+                    name: track.album_name,
+                    images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+                },
+                duration_ms: track.duration_ms || 0
+            };
+        }
+
+        // Normalize artists to array of strings for sync compatibility
+        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+        }
+
+        return spotifyTrack;
+    });
+
+    // Create virtual playlist ID
+    const virtualPlaylistId = `discover_${playlistType}`;
+
+    // Store in cache for sync function
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+
+    // Create virtual playlist object
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: playlistName,
+        track_count: spotifyTracks.length
+    };
+
+    // Add to spotify playlists array if not already there
+    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
+        spotifyPlaylists.push(virtualPlaylist);
+    }
+
+    // Show sync status display (convert underscores to hyphens for ID)
+    const statusId = playlistType.replace(/_/g, '-') + '-sync-status';
+    const statusDisplay = document.getElementById(statusId);
+    if (statusDisplay) {
+        statusDisplay.style.display = 'block';
+    }
+
+    // Disable sync button to prevent duplicate syncs (convert underscores to hyphens for ID)
+    const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+    const syncButton = document.getElementById(buttonId);
+    if (syncButton) {
+        syncButton.disabled = true;
+        syncButton.style.opacity = '0.5';
+        syncButton.style.cursor = 'not-allowed';
+    }
+
+    // Start sync using existing function
+    await startPlaylistSync(virtualPlaylistId);
+
+    // Extract image URL from first track for download bar bubble
+    let imageUrl = null;
+    if (spotifyTracks && spotifyTracks.length > 0) {
+        const firstTrack = spotifyTracks[0];
+        if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
+            imageUrl = firstTrack.album.images[0].url;
+        }
+    }
+
+    // Add to discover download bar
+    addDiscoverDownload(virtualPlaylistId, playlistName, playlistType, imageUrl);
+
+    // Start polling for progress updates
+    startDiscoverSyncPolling(playlistType, virtualPlaylistId);
+}
+
+// Track active discover sync pollers
+const discoverSyncPollers = {};
+
+function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
+    // Stop any existing poller for this playlist type
+    if (discoverSyncPollers[playlistType]) {
+        clearInterval(discoverSyncPollers[playlistType]);
+    }
+
+    console.log(`🔄 Starting sync polling for ${playlistType} (${virtualPlaylistId})`);
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
+        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
+            const prefix = playlistType.replace(/_/g, '-');
+            const progress = data.progress || {};
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
+            const el = (id) => document.getElementById(id);
+            if (el(`${prefix}-sync-completed`)) el(`${prefix}-sync-completed`).textContent = matched;
+            if (el(`${prefix}-sync-pending`)) el(`${prefix}-sync-pending`).textContent = pending;
+            if (el(`${prefix}-sync-failed`)) el(`${prefix}-sync-failed`).textContent = failed;
+            if (el(`${prefix}-sync-percentage`)) el(`${prefix}-sync-percentage`).textContent = pct;
+            if (data.status === 'finished') {
+                if (discoverSyncPollers[playlistType]) { clearInterval(discoverSyncPollers[playlistType]); delete discoverSyncPollers[playlistType]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
+                delete _syncProgressCallbacks[virtualPlaylistId];
+                const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+                const syncButton = el(buttonId);
+                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
+                const playlistNames = {
+                    'release_radar': 'Fresh Tape', 'discovery_weekly': 'The Archives',
+                    'seasonal_playlist': 'Seasonal Mix', 'popular_picks': 'Popular Picks',
+                    'hidden_gems': 'Hidden Gems', 'discovery_shuffle': 'Discovery Shuffle',
+                    'familiar_favorites': 'Familiar Favorites', 'build_playlist': 'Custom Playlist'
+                };
+                showToast(`${playlistNames[playlistType] || playlistType} sync complete!`, 'success');
+                setTimeout(() => { const sd = el(`${prefix}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
+            }
+        };
+    }
+
+    // Poll every 500ms for progress updates
+    discoverSyncPollers[playlistType] = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
+            if (!response.ok) {
+                console.log(`⚠️ Sync status response not OK: ${response.status}`);
+                return;
+            }
+
+            const data = await response.json();
+            console.log(`📊 Sync status for ${playlistType}:`, data);
+
+            // Update UI with progress (data structure: {status: ..., progress: {...}})
+            // Convert underscores to hyphens for HTML IDs
+            const prefix = playlistType.replace(/_/g, '-');
+            const progress = data.progress || {};
+
+            const completedEl = document.getElementById(`${prefix}-sync-completed`);
+            const pendingEl = document.getElementById(`${prefix}-sync-pending`);
+            const failedEl = document.getElementById(`${prefix}-sync-failed`);
+            const percentageEl = document.getElementById(`${prefix}-sync-percentage`);
+
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const processed = matched + failed;
+            const pending = total - processed;
+            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+            if (completedEl) completedEl.textContent = matched;
+            if (pendingEl) pendingEl.textContent = pending;
+            if (failedEl) failedEl.textContent = failed;
+            if (percentageEl) percentageEl.textContent = completionPercentage;
+
+            // If complete, stop polling and hide status after delay
+            if (data.status === 'finished') {
+                console.log(`✅ Sync complete for ${playlistType}`);
+                clearInterval(discoverSyncPollers[playlistType]);
+                delete discoverSyncPollers[playlistType];
+
+                // Re-enable sync button
+                const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
+                const syncButton = document.getElementById(buttonId);
+                if (syncButton) {
+                    syncButton.disabled = false;
+                    syncButton.style.opacity = '1';
+                    syncButton.style.cursor = 'pointer';
+                }
+
+                // Show completion toast with playlist name
+                const playlistNames = {
+                    'release_radar': 'Fresh Tape',
+                    'discovery_weekly': 'The Archives',
+                    'seasonal_playlist': 'Seasonal Mix',
+                    'popular_picks': 'Popular Picks',
+                    'hidden_gems': 'Hidden Gems',
+                    'discovery_shuffle': 'Discovery Shuffle',
+                    'familiar_favorites': 'Familiar Favorites',
+                    'build_playlist': 'Custom Playlist'
+                };
+                const displayName = playlistNames[playlistType] || playlistType;
+                showToast(`${displayName} sync complete!`, 'success');
+
+                // Hide status display after 3 seconds
+                setTimeout(() => {
+                    const statusDisplay = document.getElementById(`${prefix}-sync-status`);
+                    if (statusDisplay) {
+                        statusDisplay.style.display = 'none';
+                    }
+                }, 3000);
+            }
+
+        } catch (error) {
+            console.error(`❌ Error polling sync status for ${playlistType}:`, error);
+        }
+    }, 500);
+}
+
+async function openDownloadModalForRecentAlbum(albumIndex) {
+    const album = discoverRecentAlbums[albumIndex];
+    if (!album) {
+        showToast('Album data not found', 'error');
+        return;
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for album: ${album.album_name}`);
+    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
+
+    try {
+        // Determine source and album ID - use source-agnostic endpoint
+        const source = album.source || (album.album_spotify_id ? 'spotify' : album.album_deezer_id ? 'deezer' : 'itunes');
+        const albumId = source === 'spotify' ? album.album_spotify_id : source === 'deezer' ? album.album_deezer_id : album.album_itunes_id;
+
+        if (!albumId) {
+            throw new Error(`No ${source} album ID available`);
+        }
+
+        // Fetch album tracks from appropriate source (pass name/artist for Hydrabase support)
+        const _dap2 = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
+        const response = await fetch(`/api/discover/album/${source}/${albumId}?${_dap2}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch album tracks');
+        }
+
+        const albumData = await response.json();
+        if (!albumData.tracks || albumData.tracks.length === 0) {
+            throw new Error('No tracks found in album');
+        }
+
+        // Convert to expected format - CRITICAL FIX: Use fresh albumData from Spotify, not cached album
+        const spotifyTracks = albumData.tracks.map(track => {
+            // Normalize artists to array of strings
+            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
+            if (Array.isArray(artists)) {
+                artists = artists.map(a => a.name || a);
+            }
+
+            return {
+                id: track.id,
+                name: track.name,
+                artists: artists,
+                album: {
+                    id: albumData.id,                              // ✅ Album ID for proper tracking
+                    name: albumData.name,                          // ✅ Use fresh data, not cached
+                    album_type: albumData.album_type || 'album',   // ✅ Critical: Album type for classification
+                    total_tracks: albumData.total_tracks || 0,     // ✅ Total tracks for context
+                    release_date: albumData.release_date || '',    // ✅ Release date
+                    images: albumData.images || []                 // ✅ Use Spotify images
+                },
+                duration_ms: track.duration_ms || 0,
+                track_number: track.track_number || 0
+            };
+        });
+
+        // Create virtual playlist ID using the appropriate album ID
+        const virtualPlaylistId = `discover_album_${albumId}`;
+
+        // CRITICAL FIX: Pass proper artist/album context for modal display
+        const artistContext = {
+            id: source === 'spotify' ? album.artist_spotify_id : source === 'deezer' ? album.artist_deezer_id : album.artist_itunes_id,
+            name: album.artist_name,
+            source: source
+        };
+
+        const albumContext = {
+            id: albumData.id,
+            name: albumData.name,
+            album_type: albumData.album_type || 'album',
+            total_tracks: albumData.total_tracks || 0,
+            release_date: albumData.release_date || '',
+            images: albumData.images || []
+        };
+
+        // Open download modal with artist/album context
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
+
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error('Error opening album download modal:', error);
+        showToast(`Failed to load album: ${error.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+// ===============================
+// DISCOVER DOWNLOAD BAR
+// ===============================
+
+// Track discover page downloads
+let discoverDownloads = {}; // playlistId -> { name, type, status, virtualPlaylistId, startTime }
+
+/**
+ * Add a download to the discover download bar
+ */
+function addDiscoverDownload(playlistId, playlistName, playlistType, imageUrl = null) {
+    console.log(`📥 [DOWNLOAD SIDEBAR] Adding discover download: ${playlistName} (${playlistId}) type: ${playlistType}, image: ${imageUrl}`);
+
+    // Always register the download in state (needed for dashboard even when not on discover page)
+    discoverDownloads[playlistId] = {
+        name: playlistName,
+        type: playlistType,
+        status: 'in_progress',
+        virtualPlaylistId: playlistId,
+        imageUrl: imageUrl,
+        startTime: new Date()
+    };
+
+    console.log(`📊 [DOWNLOAD SIDEBAR] Active downloads:`, Object.keys(discoverDownloads));
+
+    // Update discover page sidebar if it exists (user is on discover page)
+    const downloadSidebar = document.getElementById('discover-download-sidebar');
+    if (downloadSidebar) {
+        updateDiscoverDownloadBar(); // Also saves snapshot internally
+    } else {
+        console.log('ℹ️ [DOWNLOAD SIDEBAR] Sidebar not present - skipping sidebar UI update');
+        saveDiscoverDownloadSnapshot(); // Persist state even when sidebar is absent
+    }
+
+    updateDashboardDownloads();
+    monitorDiscoverDownload(playlistId);
+}
+
+/**
+ * Monitor a discover download for completion
+ */
+function monitorDiscoverDownload(playlistId) {
+    let notFoundCount = 0;
+    const maxNotFoundAttempts = 5; // Give sync 10 seconds to start (5 checks * 2 seconds)
+
+    // Phase 5: Subscribe via WebSocket for sync status updates
+    if (socketConnected) {
+        socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
+        _syncProgressCallbacks[playlistId] = (data) => {
+            if (!discoverDownloads[playlistId]) return;
+            if (data.status === 'complete' || data.status === 'finished') {
+                discoverDownloads[playlistId].status = 'completed';
+                updateDiscoverDownloadBar();
+                updateDashboardDownloads();
+                socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+                delete _syncProgressCallbacks[playlistId];
+                setTimeout(() => {
+                    if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+                        removeDiscoverDownload(playlistId);
+                    }
+                }, 30000);
+            }
+        };
+    }
+
+    const checkInterval = setInterval(async () => {
+        try {
+            // Check if download still exists
+            if (!discoverDownloads[playlistId]) {
+                clearInterval(checkInterval);
+                if (_syncProgressCallbacks[playlistId]) {
+                    if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+                    delete _syncProgressCallbacks[playlistId];
+                }
+                return;
+            }
+
+            // First check if there's an active download process (modal-based downloads)
+            const activeProcess = activeDownloadProcesses[playlistId];
+            if (activeProcess) {
+                console.log(`📂 [DOWNLOAD BAR] Found active process for ${playlistId}, status: ${activeProcess.status}`);
+
+                if (activeProcess.status === 'complete') {
+                    console.log(`✅ [DOWNLOAD BAR] Process completed: ${discoverDownloads[playlistId].name}`);
+                    discoverDownloads[playlistId].status = 'completed';
+                    updateDiscoverDownloadBar();
+                    updateDashboardDownloads();
+                    clearInterval(checkInterval);
+
+                    // Auto-remove completed downloads after 30 seconds
+                    setTimeout(() => {
+                        if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+                            removeDiscoverDownload(playlistId);
+                        }
+                    }, 30000);
+                }
+                return; // Continue monitoring
+            }
+
+            // Check sync status API (for sync-based downloads)
+            if (socketConnected) return; // Phase 5: WS handles sync status
+            const response = await fetch(`/api/sync/status/${playlistId}`);
+            if (response.ok) {
+                const data = await response.json();
+                notFoundCount = 0; // Reset counter if found
+
+                console.log(`🔄 [DOWNLOAD BAR] Sync status for ${playlistId}: ${data.status}`);
+
+                if (data.status === 'complete') {
+                    console.log(`✅ [DOWNLOAD BAR] Sync completed: ${discoverDownloads[playlistId].name}`);
+                    discoverDownloads[playlistId].status = 'completed';
+                    updateDiscoverDownloadBar();
+                    updateDashboardDownloads();
+                    clearInterval(checkInterval);
+
+                    // Auto-remove completed downloads after 30 seconds
+                    setTimeout(() => {
+                        if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
+                            removeDiscoverDownload(playlistId);
+                        }
+                    }, 30000);
+                }
+            } else if (response.status === 404) {
+                notFoundCount++;
+                console.log(`🔍 [DOWNLOAD BAR] Sync not found for ${playlistId} (attempt ${notFoundCount}/${maxNotFoundAttempts})`);
+
+                // Only remove after multiple attempts (give it time to start)
+                if (notFoundCount >= maxNotFoundAttempts) {
+                    console.log(`⏹️ [DOWNLOAD BAR] Sync not found after ${maxNotFoundAttempts} attempts, removing`);
+                    clearInterval(checkInterval);
+                    removeDiscoverDownload(playlistId);
+                }
+            }
+        } catch (error) {
+            console.error(`❌ [DOWNLOAD BAR] Error monitoring ${playlistId}:`, error);
+        }
+    }, 2000); // Check every 2 seconds
+}
+
+/**
+ * Remove a download from the bar
+ */
+function removeDiscoverDownload(playlistId) {
+    console.log(`🗑️ Removing discover download: ${playlistId}`);
+    delete discoverDownloads[playlistId];
+    updateDiscoverDownloadBar();
+    updateDashboardDownloads();
+    saveDiscoverDownloadSnapshot(); // Save state after removal
+}
+
+/**
+ * Update the discover download sidebar UI
+ */
+function updateDiscoverDownloadBar() {
+    const downloadSidebar = document.getElementById('discover-download-sidebar');
+    const bubblesContainer = document.getElementById('discover-download-bubbles');
+    const countElement = document.getElementById('discover-download-count');
+
+    console.log(`🔄 [DOWNLOAD SIDEBAR] Updating sidebar - found elements:`, {
+        downloadSidebar: !!downloadSidebar,
+        bubblesContainer: !!bubblesContainer,
+        countElement: !!countElement
+    });
+
+    if (!downloadSidebar || !bubblesContainer || !countElement) {
+        console.warn('⚠️ [DOWNLOAD SIDEBAR] Missing elements, cannot update');
+        return;
+    }
+
+    const activeDownloads = Object.keys(discoverDownloads);
+    const count = activeDownloads.length;
+
+    console.log(`📊 [DOWNLOAD SIDEBAR] Updating with ${count} active downloads`);
+
+    // Update count
+    countElement.textContent = count;
+
+    // Show/hide sidebar
+    if (count === 0) {
+        console.log(`👁️ [DOWNLOAD SIDEBAR] No downloads, hiding sidebar`);
+        downloadSidebar.classList.add('hidden');
+        return;
+    } else {
+        console.log(`👁️ [DOWNLOAD SIDEBAR] ${count} downloads, showing sidebar`);
+        downloadSidebar.classList.remove('hidden');
+    }
+
+    // Update bubbles
+    bubblesContainer.innerHTML = activeDownloads.map(playlistId => {
+        const download = discoverDownloads[playlistId];
+        const isCompleted = download.status === 'completed';
+        const icon = isCompleted ? '✅' : '⏳';
+
+        // Use image if available, otherwise gradient background
+        const imageUrl = download.imageUrl || '';
+        const backgroundStyle = imageUrl ?
+            `background-image: url('${imageUrl}');` :
+            `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+        return `
+            <div class="discover-download-bubble">
+                <div class="discover-download-bubble-card ${isCompleted ? 'completed' : ''}"
+                     onclick="openDiscoverDownloadModal('${playlistId}')"
+                     title="${escapeHtml(download.name)} - Click to view">
+                    <div class="discover-download-bubble-image" style="${backgroundStyle}"></div>
+                    <div class="discover-download-bubble-overlay"></div>
+                    <div class="discover-download-bubble-content">
+                        <span class="discover-download-bubble-icon">${icon}</span>
+                    </div>
+                </div>
+                <div class="discover-download-bubble-name">${escapeHtml(download.name)}</div>
+            </div>
+        `;
+    }).join('');
+
+    console.log(`📊 Updated discover download sidebar: ${count} active downloads`);
+
+    // Save snapshot after UI update
+    saveDiscoverDownloadSnapshot();
+}
+
+/**
+ * Open download modal for a discover playlist
+ */
+async function openDiscoverDownloadModal(playlistId) {
+    console.log(`📂 [DOWNLOAD BAR] Opening download modal for: ${playlistId}`);
+
+    // Check if there's an active download process with modal
+    let process = activeDownloadProcesses[playlistId];
+
+    console.log(`📋 [DOWNLOAD BAR] Process found:`, {
+        exists: !!process,
+        hasModalElement: !!(process && process.modalElement),
+        hasModalId: !!(process && process.modalId)
+    });
+
+    if (process) {
+        // Try modalElement first (album downloads)
+        if (process.modalElement) {
+            console.log(`✅ [DOWNLOAD BAR] Opening modal via modalElement`);
+            process.modalElement.style.display = 'flex';
+            return;
+        }
+
+        // Try modalId (sync downloads)
+        if (process.modalId) {
+            const modal = document.getElementById(process.modalId);
+            if (modal) {
+                console.log(`✅ [DOWNLOAD BAR] Opening modal via modalId: ${process.modalId}`);
+                modal.style.display = 'flex';
+                return;
+            }
+        }
+    }
+
+    // If no process found, try to rehydrate from backend
+    console.log(`💧 [DOWNLOAD BAR] No modal found, attempting to rehydrate from backend...`);
+    const rehydrated = await rehydrateDiscoverDownloadModal(playlistId);
+
+    if (rehydrated) {
+        console.log(`✅ [DOWNLOAD BAR] Successfully rehydrated modal, opening it...`);
+        // Try again after rehydration
+        process = activeDownloadProcesses[playlistId];
+        if (process && process.modalElement) {
+            process.modalElement.style.display = 'flex';
+            return;
+        }
+    }
+
+    // Fallback: show toast
+    const download = discoverDownloads[playlistId];
+    if (download) {
+        console.log(`ℹ️ [DOWNLOAD BAR] No modal found after rehydration attempt, showing toast`);
+        showToast(`Download: ${download.name} - ${download.status}`, 'info');
+    } else {
+        console.warn(`⚠️ [DOWNLOAD BAR] No download or process found for: ${playlistId}`);
+    }
+}
+
+/**
+ * Initialize discover download sidebar on page load
+ */
+function initializeDiscoverDownloadBar() {
+    console.log('🎵 Initializing discover download sidebar...');
+
+    // Start with sidebar hidden (will be shown if downloads exist after hydration)
+    const downloadSidebar = document.getElementById('discover-download-sidebar');
+    if (downloadSidebar) {
+        downloadSidebar.classList.add('hidden');
+    }
+}
+
+// --- Discover Download Modal Rehydration ---
+
+async function rehydrateDiscoverDownloadModal(playlistId) {
+    /**
+     * Rehydrates a discover download modal from backend process data.
+     * Fetches tracks from backend API and recreates the modal (user-requested).
+     */
+    try {
+        console.log(`💧 [REHYDRATE] Attempting to rehydrate modal for: ${playlistId}`);
+
+        // Check if there's an active backend process for this playlist
+        const batchResponse = await fetch(`/api/download_status/batch`);
+        if (!batchResponse.ok) {
+            console.log(`⚠️ [REHYDRATE] Failed to fetch batch info`);
+            return false;
+        }
+
+        const batchData = await batchResponse.json();
+        const batches = batchData.batches || {};
+
+        // Find the batch for this playlist (batches is an object with batch_id keys)
+        let batchId = null;
+        let batch = null;
+        for (const [id, batchStatus] of Object.entries(batches)) {
+            if (batchStatus.playlist_id === playlistId) {
+                batchId = id;
+                batch = batchStatus;
+                break;
+            }
+        }
+
+        if (!batch || !batchId) {
+            console.log(`⚠️ [REHYDRATE] No active batch found for ${playlistId}`);
+            return false;
+        }
+
+        console.log(`✅ [REHYDRATE] Found active batch for ${playlistId}: ${batchId}`, batch);
+
+        // Get the download metadata from discoverDownloads
+        const downloadData = discoverDownloads[playlistId];
+        if (!downloadData) {
+            console.log(`⚠️ [REHYDRATE] No download metadata found for ${playlistId}`);
+            return false;
+        }
+
+        // Handle album downloads from Recent Releases
+        if (playlistId.startsWith('discover_album_')) {
+            const albumId = playlistId.replace('discover_album_', '');
+            console.log(`💧 [REHYDRATE] Album download - fetching album ${albumId}...`);
+
+            try {
+                const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
+                if (!albumResponse.ok) {
+                    console.error(`❌ [REHYDRATE] Failed to fetch album: ${albumResponse.status}`);
+                    return false;
+                }
+
+                const albumData = await albumResponse.json();
+                if (!albumData.tracks || albumData.tracks.length === 0) {
+                    console.error(`❌ [REHYDRATE] No tracks in album`);
+                    return false;
+                }
+
+                // Convert tracks to expected format
+                const spotifyTracks = albumData.tracks.map(track => {
+                    let artists = track.artists || [];
+                    if (Array.isArray(artists)) {
+                        artists = artists.map(a => a.name || a);
+                    }
+
+                    return {
+                        id: track.id,
+                        name: track.name,
+                        artists: artists,
+                        album: {
+                            name: albumData.name || downloadData.name.split(' - ')[0],
+                            images: downloadData.imageUrl ? [{ url: downloadData.imageUrl }] : []
+                        },
+                        duration_ms: track.duration_ms || 0
+                    };
+                });
+
+                console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks for album`);
+
+                // Create modal
+                await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+
+                // Update process
+                const process = activeDownloadProcesses[playlistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = batchId;
+                    subscribeToDownloadBatch(batchId);
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Start polling for status updates
+                    startModalDownloadPolling(playlistId);
+                    console.log(`✅ [REHYDRATE] Successfully rehydrated album modal with polling`);
+                    return true;
+                }
+                return false;
+
+            } catch (error) {
+                console.error(`❌ [REHYDRATE] Error fetching album:`, error);
+                return false;
+            }
+        }
+
+        // Determine API endpoint based on playlist ID
+        let apiEndpoint;
+        if (playlistId === 'discover_release_radar') {
+            apiEndpoint = '/api/discover/release-radar';
+        } else if (playlistId === 'discover_discovery_weekly') {
+            apiEndpoint = '/api/discover/discovery-weekly';
+        } else if (playlistId === 'discover_seasonal_playlist') {
+            apiEndpoint = '/api/discover/seasonal-playlist';
+        } else if (playlistId === 'discover_popular_picks') {
+            apiEndpoint = '/api/discover/popular-picks';
+        } else if (playlistId === 'discover_hidden_gems') {
+            apiEndpoint = '/api/discover/hidden-gems';
+        } else if (playlistId === 'discover_discovery_shuffle') {
+            apiEndpoint = '/api/discover/discovery-shuffle';
+        } else if (playlistId === 'discover_familiar_favorites') {
+            apiEndpoint = '/api/discover/familiar-favorites';
+        } else if (playlistId === 'build_playlist_custom') {
+            apiEndpoint = '/api/discover/build-playlist';
+        } else if (playlistId.startsWith('discover_lb_')) {
+            // ListenBrainz playlist - fetch from cache
+            const identifier = playlistId.replace('discover_lb_', '');
+            const tracks = listenbrainzTracksCache[identifier];
+            if (!tracks || tracks.length === 0) {
+                console.log(`⚠️ [REHYDRATE] No ListenBrainz tracks in cache for ${identifier}`);
+                return false;
+            }
+
+            // Convert to Spotify format
+            const spotifyTracks = tracks.map(track => ({
+                id: track.mbid || `listenbrainz_${track.track_name}_${track.artist_name}`.replace(/[^a-z0-9]/gi, '_'),  // Generate ID if missing
+                name: track.track_name,
+                artists: [{ name: cleanArtistName(track.artist_name) }], // Proper Spotify format
+                album: {
+                    name: track.album_name,
+                    images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+                },
+                duration_ms: track.duration_ms || 0,
+                mbid: track.mbid
+            }));
+
+            // Create modal and update process
+            await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+            const process = activeDownloadProcesses[playlistId];
+            if (process) {
+                process.status = 'running';
+                process.batchId = batchId;
+                subscribeToDownloadBatch(batchId);
+                const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+                if (beginBtn) beginBtn.style.display = 'none';
+                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                // Start polling for status updates
+                startModalDownloadPolling(playlistId);
+                console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz modal with polling`);
+                return true;
+            }
+            return false;
+        } else if (playlistId.startsWith('listenbrainz_')) {
+            // ListenBrainz download from discovery modal - get from backend state
+            const mbid = playlistId.replace('listenbrainz_', '');
+            console.log(`💧 [REHYDRATE] ListenBrainz download - fetching state for MBID: ${mbid}`);
+
+            try {
+                // Fetch ListenBrainz state from backend
+                const stateResponse = await fetch(`/api/listenbrainz/state/${mbid}`);
+                if (!stateResponse.ok) {
+                    console.log(`⚠️ [REHYDRATE] Failed to fetch ListenBrainz state`);
+                    return false;
+                }
+
+                const stateData = await stateResponse.json();
+                if (!stateData || !stateData.discovery_results) {
+                    console.log(`⚠️ [REHYDRATE] No discovery results in ListenBrainz state`);
+                    return false;
+                }
+
+                // Convert discovery results to Spotify tracks
+                const spotifyTracks = stateData.discovery_results
+                    .filter(result => result.spotify_data)
+                    .map(result => {
+                        const track = result.spotify_data;
+                        // Ensure artists is in proper Spotify format: [{name: ...}]
+                        let artistsArray = [];
+                        if (track.artists && Array.isArray(track.artists)) {
+                            artistsArray = track.artists.map(artist => {
+                                if (typeof artist === 'string') {
+                                    return { name: artist };
+                                } else if (artist && artist.name) {
+                                    return { name: artist.name };
+                                } else {
+                                    return { name: String(artist || 'Unknown Artist') };
+                                }
+                            });
+                        } else if (track.artists && typeof track.artists === 'string') {
+                            artistsArray = [{ name: track.artists }];
+                        } else {
+                            artistsArray = [{ name: 'Unknown Artist' }];
+                        }
+                        return {
+                            id: track.id,
+                            name: track.name,
+                            artists: artistsArray,
+                            album: track.album || { name: 'Unknown Album', images: [] },
+                            duration_ms: track.duration_ms || 0,
+                            external_urls: track.external_urls || {}
+                        };
+                    });
+
+                if (spotifyTracks.length === 0) {
+                    console.log(`⚠️ [REHYDRATE] No Spotify tracks in ListenBrainz discovery results`);
+                    return false;
+                }
+
+                console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks from ListenBrainz state`);
+
+                // Create modal and update process
+                await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+                const process = activeDownloadProcesses[playlistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = batchId;
+                    subscribeToDownloadBatch(batchId);
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Start polling for status updates
+                    startModalDownloadPolling(playlistId);
+                    console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz download modal with polling`);
+                    return true;
+                }
+                return false;
+
+            } catch (error) {
+                console.error(`❌ [REHYDRATE] Error fetching ListenBrainz state:`, error);
+                return false;
+            }
+        } else {
+            console.error(`❌ [REHYDRATE] Unknown discover playlist type: ${playlistId}`);
+            return false;
+        }
+
+        // Fetch tracks from API
+        console.log(`📡 [REHYDRATE] Fetching tracks from ${apiEndpoint}...`);
+        const response = await fetch(apiEndpoint);
+        if (!response.ok) {
+            console.error(`❌ [REHYDRATE] Failed to fetch tracks: ${response.status}`);
+            return false;
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks) {
+            console.error(`❌ [REHYDRATE] Invalid track data:`, data);
+            return false;
+        }
+
+        const tracks = data.tracks;
+        console.log(`✅ [REHYDRATE] Retrieved ${tracks.length} tracks`);
+
+        // Transform tracks to Spotify format
+        const spotifyTracks = tracks.map(track => {
+            let spotifyTrack;
+            if (track.track_data_json) {
+                spotifyTrack = track.track_data_json;
+            } else {
+                spotifyTrack = {
+                    id: track.spotify_track_id,
+                    name: track.track_name,
+                    artists: [{ name: track.artist_name }],
+                    album: {
+                        name: track.album_name,
+                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+                    },
+                    duration_ms: track.duration_ms || 0
+                };
+            }
+            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+            }
+            return spotifyTrack;
+        });
+
+        // Create the modal
+        await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
+
+        // Update process with batch info
+        const process = activeDownloadProcesses[playlistId];
+        if (process) {
+            process.status = 'running';
+            process.batchId = batchId;
+            subscribeToDownloadBatch(batchId);
+
+            // Update button states
+            const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+            const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+            if (beginBtn) beginBtn.style.display = 'none';
+            if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+            // Start polling for status updates
+            startModalDownloadPolling(playlistId);
+
+            // Don't hide the modal - user clicked to open it
+            console.log(`✅ [REHYDRATE] Successfully rehydrated modal for ${downloadData.name} with polling`);
+            return true;
+        } else {
+            console.error(`❌ [REHYDRATE] Failed to find rehydrated process for ${playlistId}`);
+            return false;
+        }
+
+    } catch (error) {
+        console.error(`❌ [REHYDRATE] Error rehydrating discover download modal:`, error);
+        return false;
+    }
+}
+
+// --- Discover Download Snapshot System ---
+
+let discoverSnapshotSaveTimeout = null; // Debounce snapshot saves
+
+async function saveDiscoverDownloadSnapshot() {
+    /**
+     * Saves current discoverDownloads state to backend for persistence.
+     * Debounced to prevent excessive backend calls.
+     */
+
+    // Clear any existing timeout
+    if (discoverSnapshotSaveTimeout) {
+        clearTimeout(discoverSnapshotSaveTimeout);
+    }
+
+    // Debounce the actual save
+    discoverSnapshotSaveTimeout = setTimeout(async () => {
+        try {
+            const downloadCount = Object.keys(discoverDownloads).length;
+
+            // Don't save empty state
+            if (downloadCount === 0) {
+                console.log('📸 Skipping discover snapshot save - no downloads to save');
+                return;
+            }
+
+            console.log(`📸 Saving discover download snapshot: ${downloadCount} downloads`);
+
+            // Prepare snapshot data (clean format)
+            const cleanDownloads = {};
+            for (const [playlistId, downloadData] of Object.entries(discoverDownloads)) {
+                cleanDownloads[playlistId] = {
+                    name: downloadData.name,
+                    type: downloadData.type,
+                    status: downloadData.status,
+                    virtualPlaylistId: downloadData.virtualPlaylistId,
+                    imageUrl: downloadData.imageUrl,
+                    startTime: downloadData.startTime instanceof Date ? downloadData.startTime.toISOString() : downloadData.startTime
+                };
+            }
+
+            const response = await fetch('/api/discover_downloads/snapshot', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    downloads: cleanDownloads
+                })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                console.log(`✅ Discover download snapshot saved: ${downloadCount} downloads`);
+            } else {
+                console.error('❌ Failed to save discover download snapshot:', data.error);
+            }
+
+        } catch (error) {
+            console.error('❌ Error saving discover download snapshot:', error);
+        }
+    }, 1000); // 1 second debounce
+}
+
+async function hydrateDiscoverDownloadsFromSnapshot() {
+    /**
+     * Hydrates discover downloads from backend snapshot with live status.
+     * Called on page load to restore download state.
+     */
+    try {
+        console.log('🔄 Loading discover download snapshot from backend...');
+
+        const response = await fetch('/api/discover_downloads/hydrate');
+        const data = await response.json();
+
+        if (!data.success) {
+            console.error('❌ Failed to load discover download snapshot:', data.error);
+            return;
+        }
+
+        const downloads = data.downloads || {};
+        const stats = data.stats || {};
+
+        console.log(`🔄 Loaded discover snapshot: ${stats.total_downloads || 0} downloads, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
+
+        if (Object.keys(downloads).length === 0) {
+            console.log('ℹ️ No discover downloads to hydrate');
+            return;
+        }
+
+        // Clear existing state
+        discoverDownloads = {};
+
+        // Restore discoverDownloads with hydrated data
+        for (const [playlistId, downloadData] of Object.entries(downloads)) {
+            discoverDownloads[playlistId] = {
+                name: downloadData.name,
+                type: downloadData.type,
+                status: downloadData.status, // Live status from backend
+                virtualPlaylistId: downloadData.virtualPlaylistId,
+                imageUrl: downloadData.imageUrl,
+                startTime: new Date(downloadData.startTime)
+            };
+
+            console.log(`🔄 Hydrated download: ${downloadData.name} (${downloadData.status})`);
+
+            // Start monitoring for any in-progress downloads
+            if (downloadData.status === 'in_progress') {
+                console.log(`📡 Starting monitoring for: ${downloadData.name}`);
+                monitorDiscoverDownload(playlistId);
+            }
+        }
+
+        // Don't update UI here - it will be updated when user navigates to discover page
+        // This allows hydration to work even if page loads on a different tab
+
+        const totalDownloads = Object.keys(discoverDownloads).length;
+        console.log(`✅ Successfully hydrated ${totalDownloads} discover downloads (UI will update on discover page navigation)`);
+
+    } catch (error) {
+        console.error('❌ Error hydrating discover downloads from snapshot:', error);
+    }
+}
+
+// Initialize on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeDiscoverDownloadBar);
+} else {
+    initializeDiscoverDownloadBar();
+}
+
+// ============================================================================
+
diff --git a/webui/static/downloads.js b/webui/static/downloads.js
new file mode 100644
index 00000000..3b18282f
--- /dev/null
+++ b/webui/static/downloads.js
@@ -0,0 +1,6399 @@
+// WING IT — Download without metadata discovery
+// ==================================================================================
+
+function _toggleWingItDropdown(btn, urlHash) {
+    // Remove any existing dropdown
+    const existing = document.querySelector('.wing-it-dropdown.visible');
+    if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
+
+    const wrap = btn.closest('.wing-it-wrap');
+    if (!wrap) return;
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'wing-it-dropdown';
+    dropdown.innerHTML = `
+        <button class="wing-it-dropdown-item" data-action="download">
+            <span class="wing-it-dropdown-icon">⬇️</span>
+            <span class="wing-it-dropdown-label">Download</span>
+            <span class="wing-it-dropdown-hint">Raw names</span>
+        </button>
+        <button class="wing-it-dropdown-item" data-action="sync">
+            <span class="wing-it-dropdown-icon">🔄</span>
+            <span class="wing-it-dropdown-label">Sync to Server</span>
+            <span class="wing-it-dropdown-hint">Best-effort</span>
+        </button>
+    `;
+
+    dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
+        item.addEventListener('click', () => {
+            dropdown.classList.remove('visible');
+            setTimeout(() => dropdown.remove(), 150);
+            const action = item.dataset.action;
+            if (action === 'download') {
+                _wingItAction(urlHash, 'download');
+            } else {
+                _wingItAction(urlHash, 'sync');
+            }
+        });
+    });
+
+    // Flip dropdown direction if button is in the top portion of viewport
+    const btnRect = btn.getBoundingClientRect();
+    if (btnRect.top < 200) dropdown.classList.add('flip-down');
+
+    wrap.appendChild(dropdown);
+    requestAnimationFrame(() => dropdown.classList.add('visible'));
+
+    // Close on outside click
+    setTimeout(() => {
+        const closeHandler = e => {
+            if (!dropdown.contains(e.target) && e.target !== btn) {
+                dropdown.classList.remove('visible');
+                setTimeout(() => dropdown.remove(), 150);
+                document.removeEventListener('click', closeHandler);
+            }
+        };
+        document.addEventListener('click', closeHandler);
+    }, 50);
+}
+
+function _wingItAction(urlHash, action) {
+    if (urlHash) {
+        // Called from a modal — use _wingItFromModal logic
+        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
+        const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
+        const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
+        const isTidal = state.is_tidal_playlist;
+        const isLB = state.is_listenbrainz_playlist;
+        const isBeatport = state.is_beatport_playlist;
+        const isDeezer = state.is_deezer_playlist;
+        const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
+
+        if (!tracks.length) {
+            showToast('No tracks available for Wing It', 'error');
+            return;
+        }
+
+        if (action === 'sync') {
+            // Sync inline — keep modal open
+            _wingItSyncFromModal(urlHash, tracks, name, isLB);
+        } else {
+            // Download — close modal, open download modal
+            const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+            if (modal) modal.remove();
+            const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
+            if (overlay) overlay.remove();
+            wingItDownload(tracks, name, source, null, true);
+        }
+    }
+}
+
+async function _wingItSyncFromModal(urlHash, tracks, name, isLB) {
+    showToast('Starting Wing It sync...', 'info');
+    updateYouTubeModalButtons(urlHash, 'syncing');
+
+    try {
+        const syncTracks = tracks.map((t, i) => {
+            let artists = t.artists || [];
+            if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+            return {
+                id: t.id || t.source_track_id || `wing_it_${i}`,
+                name: t.name || t.track_name || 'Unknown',
+                artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+                album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+                duration_ms: t.duration_ms || 0,
+            };
+        });
+
+        const res = await fetch('/api/wing-it/sync', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
+        });
+        const data = await res.json();
+
+        if (data.error) {
+            showToast(`Sync failed: ${data.error}`, 'error');
+            updateYouTubeModalButtons(urlHash, 'discovered');
+            return;
+        }
+
+        if (isLB) {
+            const state = listenbrainzPlaylistStates[urlHash];
+            if (state) state.syncPlaylistId = data.sync_playlist_id;
+            startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
+        } else {
+            startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
+        }
+    } catch (e) {
+        showToast('Sync failed: ' + e.message, 'error');
+        updateYouTubeModalButtons(urlHash, 'discovered');
+    }
+}
+
+async function wingItDownload(tracks, playlistName, source = 'playlist', cardIdentifier = null, skipConfirm = false) {
+    if (!tracks || tracks.length === 0) {
+        showToast('No tracks to download', 'error');
+        return;
+    }
+
+    if (!skipConfirm) {
+        // Show choice: Download or Sync (for LB card button which doesn't have dropdown)
+        const choice = await _showWingItChoiceDialog(tracks.length, source);
+        if (!choice) return;
+
+        if (choice === 'sync') {
+            await _wingItSync(tracks, playlistName, source, cardIdentifier);
+            return;
+        }
+    }
+
+    // Normalize tracks to Spotify-compatible format
+    const formattedTracks = tracks.map(t => {
+        // Handle various artist formats
+        let artists = [];
+        if (t.artists) {
+            if (Array.isArray(t.artists)) {
+                artists = t.artists.map(a => typeof a === 'string' ? { name: a } : a);
+            } else if (typeof t.artists === 'string') {
+                artists = [{ name: t.artists }];
+            }
+        } else if (t.artist_name) {
+            artists = [{ name: t.artist_name }];
+        } else if (t.artist) {
+            artists = [{ name: t.artist }];
+        }
+        if (artists.length === 0) artists = [{ name: 'Unknown' }];
+
+        // Handle album
+        let album = { name: '' };
+        if (t.album) {
+            album = typeof t.album === 'string' ? { name: t.album } : t.album;
+        } else if (t.album_name) {
+            album = { name: t.album_name };
+        }
+
+        return {
+            id: t.id || t.source_track_id || `wing_it_${Date.now()}_${Math.random()}`,
+            name: t.name || t.track_name || 'Unknown Track',
+            artists: artists,
+            duration_ms: t.duration_ms || 0,
+            album: album,
+        };
+    });
+
+    const virtualPlaylistId = `wing_it_${Date.now()}`;
+
+    // Store wing_it flag BEFORE opening the modal
+    youtubePlaylistStates[virtualPlaylistId] = {
+        wing_it: true,
+        tracks: formattedTracks,
+    };
+
+    await openDownloadMissingModalForYouTube(virtualPlaylistId, `⚡ ${playlistName}`, formattedTracks);
+
+    // Pre-check the Force Download toggle
+    setTimeout(() => {
+        const forceToggle = document.getElementById(`force-download-all-${virtualPlaylistId}`);
+        if (forceToggle && !forceToggle.checked) forceToggle.checked = true;
+    }, 800);
+}
+
+function _showWingItChoiceDialog(trackCount, source) {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+        const close = val => { overlay.remove(); resolve(val); };
+        overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+        overlay.innerHTML = `
+            <div class="smart-delete-modal">
+                <div class="smart-delete-header">
+                    <h3>⚡ Wing It</h3>
+                    <button class="smart-delete-close">&times;</button>
+                </div>
+                <p class="smart-delete-desc">${trackCount} track${trackCount !== 1 ? 's' : ''} from ${source}. No metadata discovery — uses raw names. Failed tracks won't be added to wishlist.</p>
+                <div class="smart-delete-options">
+                    <button class="smart-delete-option" data-choice="download">
+                        <div class="smart-delete-option-icon">⬇️</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title" style="color:#4caf50">Download</div>
+                            <div class="smart-delete-option-desc">Search and download each track using raw names.</div>
+                        </div>
+                    </button>
+                    <button class="smart-delete-option" data-choice="sync">
+                        <div class="smart-delete-option-icon">🔄</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title" style="color:#64b5f6">Sync to Server</div>
+                            <div class="smart-delete-option-desc">Mirror playlist and sync to your media server. Best-effort matching.</div>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        `;
+
+        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+            btn.addEventListener('click', () => close(btn.dataset.choice));
+        });
+        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+        const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); close(null); } };
+        document.addEventListener('keydown', escH);
+        document.body.appendChild(overlay);
+    });
+}
+
+async function _wingItSync(tracks, playlistName, source, cardIdentifier = null) {
+    try {
+        showToast('Syncing playlist to server...', 'info');
+
+        // Format tracks for the sync endpoint
+        const syncTracks = tracks.map((t, i) => {
+            let artists = t.artists || [];
+            if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+            return {
+                id: t.id || t.source_track_id || `wing_it_${i}`,
+                name: t.name || t.track_name || 'Unknown',
+                artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+                album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+                duration_ms: t.duration_ms || 0,
+                artist_name: t.artist_name,
+            };
+        });
+
+        const res = await fetch('/api/wing-it/sync', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tracks: syncTracks, playlist_name: playlistName })
+        });
+        const data = await res.json();
+
+        if (data.error) {
+            showToast(`Sync failed: ${data.error}`, 'error');
+            return;
+        }
+
+        // Show inline sync status on the card (same display as normal sync)
+        const playlistId = cardIdentifier ? `discover-lb-playlist-${cardIdentifier}` : null;
+        if (playlistId) {
+            const statusDisplay = document.getElementById(`${playlistId}-sync-status`);
+            if (statusDisplay) statusDisplay.style.display = 'block';
+            // Disable sync/wing-it buttons during sync
+            const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
+            if (syncBtn) { syncBtn.disabled = true; syncBtn.style.opacity = '0.5'; }
+        }
+
+        // Poll for sync progress — update inline display
+        if (data.sync_playlist_id) {
+            _pollWingItSyncProgress(data.sync_playlist_id, playlistName, playlistId);
+        }
+
+    } catch (e) {
+        showToast('Sync failed: ' + e.message, 'error');
+    }
+}
+
+function _pollWingItSyncProgress(syncPlaylistId, playlistName, cardPlaylistId) {
+    const poll = setInterval(async () => {
+        try {
+            const res = await fetch(`/api/sync/status/${syncPlaylistId}`);
+            const data = await res.json();
+
+            // Update inline status display if we have a card
+            if (cardPlaylistId && data.progress) {
+                const p = data.progress;
+                const total = p.total_tracks || p.total || 0;
+                const matched = p.matched_tracks || p.matched || 0;
+                const failed = p.failed_tracks || p.failed || 0;
+                const totalEl = document.getElementById(`${cardPlaylistId}-sync-total`);
+                const matchedEl = document.getElementById(`${cardPlaylistId}-sync-matched`);
+                const failedEl = document.getElementById(`${cardPlaylistId}-sync-failed`);
+                const pctEl = document.getElementById(`${cardPlaylistId}-sync-percentage`);
+                if (totalEl) totalEl.textContent = total;
+                if (matchedEl) matchedEl.textContent = matched;
+                if (failedEl) failedEl.textContent = failed;
+                if (pctEl) pctEl.textContent = total > 0 ? Math.round((matched / total) * 100) : 0;
+            }
+
+            if (data.status === 'finished' || data.status === 'complete' || data.status === 'error') {
+                clearInterval(poll);
+                const matched = data.progress?.matched_tracks || data.progress?.matched || 0;
+                const total = data.progress?.total_tracks || data.progress?.total || 0;
+
+                if (data.status === 'error') {
+                    showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+                } else {
+                    showToast(`⚡ Wing It sync complete — "${playlistName}" created on server (${matched}/${total} tracks matched)`, 'success');
+                }
+
+                // Update card status display to show completion
+                if (cardPlaylistId) {
+                    const statusLabel = document.querySelector(`#${cardPlaylistId}-sync-status .sync-status-label span:last-child`);
+                    if (statusLabel) statusLabel.textContent = `Sync complete — ${matched}/${total} matched`;
+                    const syncIcon = document.querySelector(`#${cardPlaylistId}-sync-status .sync-icon`);
+                    if (syncIcon) syncIcon.textContent = '✓';
+                }
+            }
+        } catch (e) { /* ignore poll errors */ }
+    }, 2000);
+
+    // Safety timeout
+    setTimeout(() => clearInterval(poll), 180000);
+}
+
+async function _wingItFromModal(urlHash) {
+    // Extract tracks from the discovery modal state — tracks can be in various locations
+    const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
+    const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
+    const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
+    const isTidal = state.is_tidal_playlist;
+    const isLB = state.is_listenbrainz_playlist;
+    const isBeatport = state.is_beatport_playlist;
+    const isDeezer = state.is_deezer_playlist;
+    const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
+
+    if (!tracks.length) {
+        showToast('No tracks available for Wing It', 'error');
+        return;
+    }
+
+    const choice = await _showWingItChoiceDialog(tracks.length, source);
+    if (!choice) return;
+
+    if (choice === 'sync') {
+        // Sync inline — keep modal open, show progress in modal
+        showToast('Starting Wing It sync...', 'info');
+        updateYouTubeModalButtons(urlHash, 'syncing');
+
+        try {
+            // Format and send sync request
+            const syncTracks = tracks.map((t, i) => {
+                let artists = t.artists || [];
+                if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
+                return {
+                    id: t.id || t.source_track_id || `wing_it_${i}`,
+                    name: t.name || t.track_name || 'Unknown',
+                    artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
+                    album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
+                    duration_ms: t.duration_ms || 0,
+                };
+            });
+
+            const res = await fetch('/api/wing-it/sync', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
+            });
+            const data = await res.json();
+
+            if (data.error) {
+                showToast(`Sync failed: ${data.error}`, 'error');
+                updateYouTubeModalButtons(urlHash, 'discovered');
+                return;
+            }
+
+            // Use the same sync polling as normal sync — works for any source
+            if (isLB) {
+                if (state) state.syncPlaylistId = data.sync_playlist_id;
+                startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
+            } else {
+                startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
+            }
+        } catch (e) {
+            showToast('Sync failed: ' + e.message, 'error');
+            updateYouTubeModalButtons(urlHash, 'discovered');
+        }
+        return;
+    }
+
+    // choice === 'download' — close modal and open download modal
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (modal) modal.remove();
+    const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
+    if (overlay) overlay.remove();
+
+    wingItDownload(tracks, name, source);
+}
+
+async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks, artist = null, album = null) {
+    showLoadingOverlay('Loading YouTube playlist...');
+    // Check if a process is already active for this virtual playlist
+    if (activeDownloadProcesses[virtualPlaylistId]) {
+        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process.modalElement) {
+            if (process.status === 'complete') {
+                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+            }
+            process.modalElement.style.display = 'flex';
+        }
+        hideLoadingOverlay(); // Hide overlay when reopening existing modal
+        return;
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for YouTube playlist: ${virtualPlaylistId}`);
+
+    // Create virtual playlist object for compatibility with existing modal logic
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: playlistName,
+        track_count: spotifyTracks.length
+    };
+
+    // Store the tracks in the cache for the modal to use
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+    currentPlaylistTracks = spotifyTracks;
+    currentModalPlaylistId = virtualPlaylistId;
+
+    let modal = document.createElement('div');
+    modal.id = `download-missing-modal-${virtualPlaylistId}`;
+    modal.className = 'download-missing-modal';
+    modal.style.display = 'none';
+    document.body.appendChild(modal);
+
+    // Register the new process in our global state tracker using the same structure as Spotify
+    activeDownloadProcesses[virtualPlaylistId] = {
+        status: 'idle',
+        modalElement: modal,
+        poller: null,
+        batchId: null,
+        playlist: virtualPlaylist,
+        tracks: spotifyTracks,
+        artist: artist,  // ✅ Store artist context
+        album: album     // ✅ Store album context
+    };
+
+    // Generate hero section with dynamic source detection
+    const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
+        virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
+            virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
+                virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
+                    virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
+                        virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
+                            virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
+                                virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
+                                    virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
+                                        virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
+                                            virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
+                                                'YouTube';
+
+    // Store metadata for discover download sidebar (will be added when Begin Analysis is clicked)
+    if (source === 'SoulSync' || virtualPlaylistId.startsWith('discover_lb_') || virtualPlaylistId.startsWith('listenbrainz_') || virtualPlaylistId.startsWith('wing_it_')) {
+        // Extract image URL from album context or first track's album cover
+        let imageUrl = null;
+        if (album && album.images && album.images.length > 0) {
+            imageUrl = album.images[0].url;
+        } else if (spotifyTracks && spotifyTracks.length > 0) {
+            const firstTrack = spotifyTracks[0];
+            if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
+                imageUrl = firstTrack.album.images[0].url;
+            }
+        }
+        // Store in process for later use when Begin Analysis is clicked
+        activeDownloadProcesses[virtualPlaylistId].discoverMetadata = {
+            imageUrl: imageUrl,
+            type: album ? 'album' : 'playlist'  // ✅ Use 'album' if album context provided
+        };
+    }
+
+    // CRITICAL FIX: Use album context for discover_album playlists
+    const isDiscoverAlbum = virtualPlaylistId.startsWith('discover_album_') || virtualPlaylistId.startsWith('discover_cache_') || virtualPlaylistId.startsWith('seasonal_album_') || virtualPlaylistId.startsWith('spotify_library_');
+    const heroContext = isDiscoverAlbum && album && artist ? {
+        type: 'album',
+        artist: {
+            name: artist.name,
+            image_url: artist.image_url || null
+        },
+        album: {
+            name: album.name,
+            album_type: album.album_type || 'album',
+            images: album.images || []
+        },
+        trackCount: spotifyTracks.length,
+        playlistId: virtualPlaylistId
+    } : {
+        type: 'playlist',
+        playlist: { name: playlistName, owner: source },
+        trackCount: spotifyTracks.length,
+        playlistId: virtualPlaylistId
+    };
+
+    // Use the exact same modal HTML structure as the existing Spotify modal
+    modal.innerHTML = `
+        <div class="download-missing-modal-content" data-context="playlist">
+            <div class="download-missing-modal-header">
+                ${generateDownloadModalHeroSection(heroContext)}
+            </div>
+
+            <div class="download-missing-modal-body">
+                <div class="download-progress-section">
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            🔍 Library Analysis
+                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            ⏬ Downloads
+                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="download-tracks-section">
+                    <div class="download-tracks-header">
+                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
+                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
+                    </div>
+                    <div class="download-tracks-table-container">
+                        <table class="download-tracks-table">
+                            <thead>
+                                <tr>
+                                    <th class="track-select-header">
+                                        <input type="checkbox" class="track-select-all"
+                                               id="select-all-${virtualPlaylistId}" checked
+                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
+                                    </th>
+                                    <th>#</th>
+                                    <th>Track</th>
+                                    <th>Artist</th>
+                                    <th>Duration</th>
+                                    <th>Library Match</th>
+                                    <th>Download Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
+                                ${spotifyTracks.map((track, index) => `
+                                    <tr data-track-index="${index}">
+                                        <td class="track-select-cell">
+                                            <input type="checkbox" class="track-select-cb"
+                                                   data-track-index="${index}" checked
+                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
+                                        </td>
+                                        <td class="track-number">${index + 1}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
+                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
+                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
+                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
+                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="download-missing-modal-footer">
+                <div class="download-phase-controls">
+                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
+                            <span>Force Download All</span>
+                        </label>
+                        ${isDiscoverAlbum ? '' : `<label class="force-download-toggle">
+                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
+                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
+                        </label>`}
+                    </div>
+                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
+                        Begin Analysis
+                    </button>
+                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
+                        Add to Wishlist
+                    </button>
+                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
+                        Cancel All
+                    </button>
+                </div>
+                <div class="modal-close-section">
+                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${virtualPlaylistId}')">
+                        📋 Export as M3U
+                    </button>
+                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
+    modal.style.display = 'flex';
+    hideLoadingOverlay();
+}
+
+function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
+    if (!artistName) return;
+    // Close the download modal
+    if (playlistId) closeDownloadMissingModal(playlistId);
+    // Navigate to Artists page and load discography
+    navigateToPage('artists');
+    setTimeout(() => {
+        // If we have an artist ID, use it directly
+        // If not, search by name — selectArtistForDetail handles both
+        selectArtistForDetail(
+            { id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
+            source ? { source: source } : undefined
+        );
+    }, 200);
+}
+
+async function closeDownloadMissingModal(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) {
+        // If somehow called without a process, try to find and remove the element
+        const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+        if (modal && modal.parentElement) {
+            modal.parentElement.removeChild(modal);
+        }
+        return;
+    }
+
+    // If the process is running, just hide the modal.
+    // If it's idle, complete, or cancelled, perform a full cleanup.
+    if (process.status === 'running') {
+        console.log(`Hiding active download modal for playlist ${playlistId}.`);
+        process.modalElement.style.display = 'none';
+
+        // Track wishlist modal state changes
+        if (playlistId === 'wishlist') {
+            WishlistModalState.setUserClosed(); // User manually closed during processing
+            console.log('📱 [Modal State] User manually closed wishlist modal during processing');
+        }
+    } else {
+        console.log(`Closing and cleaning up download modal for playlist ${playlistId}.`);
+
+        // Reset YouTube playlist phase to 'discovered' when modal is closed after completion
+        if (playlistId.startsWith('youtube_')) {
+            const urlHash = playlistId.replace('youtube_', '');
+            updateYouTubeCardPhase(urlHash, 'discovered');
+            // Also update mirrored playlist card if applicable
+            if (urlHash.startsWith('mirrored_')) {
+                updateMirroredCardPhase(urlHash, 'discovered');
+            }
+
+            // Update backend state to prevent rehydration issues on page refresh (similar to Tidal fix)
+            try {
+                const response = await fetch(`/api/youtube/update_phase/${urlHash}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        phase: 'discovered'
+                    })
+                });
+
+                if (response.ok) {
+                    console.log(`✅ [Modal Close] Updated backend phase for YouTube playlist ${urlHash} to 'discovered'`);
+                } else {
+                    console.warn(`⚠️ [Modal Close] Failed to update backend phase for YouTube playlist ${urlHash}`);
+                }
+            } catch (error) {
+                console.error(`❌ [Modal Close] Error updating backend phase for YouTube playlist ${urlHash}:`, error);
+            }
+        }
+
+        // Reset Beatport chart phase to 'discovered' when modal is closed
+        if (playlistId.startsWith('beatport_')) {
+            const urlHash = playlistId.replace('beatport_', '');
+            const state = youtubePlaylistStates[urlHash];
+
+            if (state && state.is_beatport_playlist) {
+                console.log(`🧹 [Modal Close] Processing Beatport chart close: playlistId="${playlistId}", urlHash="${urlHash}"`);
+
+                const chartHash = state.beatport_chart_hash || urlHash;
+
+                // Reset to discovered phase (unless download actually started and completed)
+                if (state.phase !== 'download_complete') {
+                    updateBeatportCardPhase(chartHash, 'discovered');
+                    state.phase = 'discovered';
+
+                    // Update Beatport chart state
+                    if (beatportChartStates[chartHash]) {
+                        beatportChartStates[chartHash].phase = 'discovered';
+                    }
+
+                    // Update backend state
+                    try {
+                        await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                        console.log(`✅ [Modal Close] Updated backend phase for Beatport chart ${chartHash} to 'discovered'`);
+                    } catch (error) {
+                        console.error(`❌ [Modal Close] Error updating backend phase for Beatport chart ${chartHash}:`, error);
+                    }
+                }
+            }
+        }
+
+        // Enhanced Tidal playlist state management (based on GUI sync.py patterns)
+        if (playlistId.startsWith('tidal_')) {
+            const tidalPlaylistId = playlistId.replace('tidal_', '');
+
+            console.log(`🧹 [Modal Close] Processing Tidal playlist close: playlistId="${playlistId}", tidalPlaylistId="${tidalPlaylistId}"`);
+            console.log(`🧹 [Modal Close] Current Tidal state:`, tidalPlaylistStates[tidalPlaylistId]);
+
+            // Clear download-specific state but preserve discovery results (like GUI closeEvent)
+            if (tidalPlaylistStates[tidalPlaylistId]) {
+                const currentPhase = tidalPlaylistStates[tidalPlaylistId].phase;
+                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+                // Preserve discovery data for future use (like GUI modal behavior)
+                const preservedData = {
+                    playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
+                    discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
+                    spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
+                    discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
+                    convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
+                };
+
+                // Clear download-specific state 
+                delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
+                delete tidalPlaylistStates[tidalPlaylistId].phase;
+
+                // Restore preserved data and set to discovered phase
+                Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
+                tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
+
+                console.log(`🧹 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} - cleared download state, preserved discovery data`);
+                console.log(`🧹 [Modal Close] New phase after reset: ${tidalPlaylistStates[tidalPlaylistId].phase}`);
+            } else {
+                console.error(`❌ [Modal Close] No Tidal state found for playlistId: ${tidalPlaylistId}`);
+            }
+
+            updateTidalCardPhase(tidalPlaylistId, 'discovered');
+            console.log(`🔄 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} to discovered phase`);
+            console.log(`📝 [Modal Close] Expected button text for discovered phase: "${getActionButtonText('discovered')}"`);
+
+            // Update backend state to prevent rehydration issues on page refresh
+            try {
+                const response = await fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        phase: 'discovered'
+                    })
+                });
+
+                if (response.ok) {
+                    console.log(`✅ [Modal Close] Updated backend phase for Tidal playlist ${tidalPlaylistId} to 'discovered'`);
+                } else {
+                    console.warn(`⚠️ [Modal Close] Failed to update backend phase for Tidal playlist ${tidalPlaylistId}`);
+                }
+            } catch (error) {
+                console.error(`❌ [Modal Close] Error updating backend phase for Tidal playlist ${tidalPlaylistId}:`, error);
+            }
+        }
+
+        // Reset ListenBrainz playlist phase to 'discovered' when modal is closed
+        if (playlistId.startsWith('listenbrainz_')) {
+            const playlistMbid = playlistId.replace('listenbrainz_', '');
+
+            console.log(`🧹 [Modal Close] Processing ListenBrainz playlist close: playlistId="${playlistId}", mbid="${playlistMbid}"`);
+
+            // Clear download-specific state but preserve discovery results
+            if (listenbrainzPlaylistStates[playlistMbid]) {
+                const currentPhase = listenbrainzPlaylistStates[playlistMbid].phase;
+                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+                // Reset to discovered phase (unless download actually completed successfully)
+                if (currentPhase !== 'download_complete') {
+                    // Clear download-specific fields
+                    delete listenbrainzPlaylistStates[playlistMbid].download_process_id;
+                    delete listenbrainzPlaylistStates[playlistMbid].convertedSpotifyPlaylistId;
+
+                    // Set back to discovered
+                    listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
+
+                    // Update backend state
+                    try {
+                        await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                        console.log(`✅ [Modal Close] Updated backend phase for ListenBrainz playlist ${playlistMbid} to 'discovered'`);
+                    } catch (error) {
+                        console.error(`❌ [Modal Close] Error updating backend phase for ListenBrainz playlist ${playlistMbid}:`, error);
+                    }
+
+                    console.log(`🔄 [Modal Close] Reset ListenBrainz playlist ${playlistMbid} to discovered phase`);
+                }
+            } else {
+                console.error(`❌ [Modal Close] No ListenBrainz state found for mbid: ${playlistMbid}`);
+            }
+        }
+
+        // Reset Spotify Public playlist phase to 'discovered' when modal is closed
+        if (playlistId.startsWith('spotify_public_')) {
+            const spUrlHash = playlistId.replace('spotify_public_', '');
+
+            console.log(`🧹 [Modal Close] Processing Spotify Public playlist close: playlistId="${playlistId}", urlHash="${spUrlHash}"`);
+
+            if (spotifyPublicPlaylistStates[spUrlHash]) {
+                const currentPhase = spotifyPublicPlaylistStates[spUrlHash].phase;
+                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+                const preservedData = {
+                    playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
+                    discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
+                    spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
+                    discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
+                    convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
+                };
+
+                delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
+                delete spotifyPublicPlaylistStates[spUrlHash].phase;
+
+                Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
+                spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
+
+                console.log(`🧹 [Modal Close] Reset Spotify Public playlist ${spUrlHash} - cleared download state, preserved discovery data`);
+            }
+
+            updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
+
+            try {
+                await fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ phase: 'discovered' })
+                });
+                console.log(`✅ [Modal Close] Updated backend phase for Spotify Public playlist ${spUrlHash} to 'discovered'`);
+            } catch (error) {
+                console.error(`❌ [Modal Close] Error updating backend phase for Spotify Public playlist ${spUrlHash}:`, error);
+            }
+        }
+
+        // Reset Deezer playlist phase to 'discovered' when modal is closed
+        if (playlistId.startsWith('deezer_')) {
+            const deezerPlaylistId = playlistId.replace('deezer_', '');
+
+            console.log(`🧹 [Modal Close] Processing Deezer playlist close: playlistId="${playlistId}", deezerPlaylistId="${deezerPlaylistId}"`);
+
+            if (deezerPlaylistStates[deezerPlaylistId]) {
+                const currentPhase = deezerPlaylistStates[deezerPlaylistId].phase;
+                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
+
+                const preservedData = {
+                    playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
+                    discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
+                    spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
+                    discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
+                    convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
+                };
+
+                delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
+                delete deezerPlaylistStates[deezerPlaylistId].phase;
+
+                Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
+                deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
+
+                console.log(`🧹 [Modal Close] Reset Deezer playlist ${deezerPlaylistId} - cleared download state, preserved discovery data`);
+            }
+
+            updateDeezerCardPhase(deezerPlaylistId, 'discovered');
+
+            try {
+                await fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ phase: 'discovered' })
+                });
+                console.log(`✅ [Modal Close] Updated backend phase for Deezer playlist ${deezerPlaylistId} to 'discovered'`);
+            } catch (error) {
+                console.error(`❌ [Modal Close] Error updating backend phase for Deezer playlist ${deezerPlaylistId}:`, error);
+            }
+        }
+
+        // Clear wishlist modal state when modal is fully closed
+        if (playlistId === 'wishlist') {
+            WishlistModalState.clear(); // Clear all tracking since modal is fully closed
+            console.log('📱 [Modal State] Cleared wishlist modal state on full close');
+        }
+
+        // Clean up artist download if this is an artist album playlist
+        if (playlistId.startsWith('artist_album_')) {
+            console.log(`🧹 [MODAL CLOSE] Cleaning up artist download for completed modal: ${playlistId}`);
+            cleanupArtistDownload(playlistId);
+            console.log(`✅ [MODAL CLOSE] Artist download cleanup completed for: ${playlistId}`);
+        }
+
+        // Clean up search download if this is an enhanced search playlist
+        if (playlistId.startsWith('enhanced_search_')) {
+            console.log(`🧹 [MODAL CLOSE] Cleaning up search download for completed modal: ${playlistId}`);
+            cleanupSearchDownload(playlistId);
+            console.log(`✅ [MODAL CLOSE] Search download cleanup completed for: ${playlistId}`);
+        }
+
+        // Clean up Beatport download if this is a beatport chart or release playlist
+        if (playlistId.startsWith('beatport_chart_') || playlistId.startsWith('beatport_release_')) {
+            console.log(`🧹 [MODAL CLOSE] Cleaning up Beatport download for completed modal: ${playlistId}`);
+            cleanupBeatportDownload(playlistId);
+            console.log(`✅ [MODAL CLOSE] Beatport download cleanup completed for: ${playlistId}`);
+        }
+
+        // Remove from discover download sidebar if this is a discover page download
+        if (discoverDownloads && discoverDownloads[playlistId]) {
+            console.log(`🧹 [MODAL CLOSE] Removing discover download bubble: ${playlistId}`);
+            removeDiscoverDownload(playlistId);
+            console.log(`✅ [MODAL CLOSE] Discover download bubble removed for: ${playlistId}`);
+        }
+
+        // Automatic cleanup and server operations after successful downloads
+        await handlePostDownloadAutomation(playlistId, process);
+
+        cleanupDownloadProcess(playlistId);
+    }
+}
+
+/**
+ * Extract unique album cover images from tracks
+ */
+function extractUniqueCoverImages(tracks, maxCovers = 20) {
+    const uniqueCovers = new Set();
+    const covers = [];
+
+    for (const track of tracks) {
+        if (covers.length >= maxCovers) break;
+
+        let coverUrl = null;
+        let spotifyData = track.spotify_data;
+
+        // Parse spotify_data if it's a string
+        if (typeof spotifyData === 'string') {
+            try {
+                spotifyData = JSON.parse(spotifyData);
+            } catch (e) {
+                continue;
+            }
+        }
+
+        // Extract cover URL
+        coverUrl = spotifyData?.album?.images?.[0]?.url;
+
+        // Add to list if unique and valid
+        if (coverUrl && !uniqueCovers.has(coverUrl)) {
+            uniqueCovers.add(coverUrl);
+            covers.push(coverUrl);
+        }
+    }
+
+    return covers;
+}
+
+/**
+ * Shuffle array using Fisher-Yates algorithm
+ */
+function shuffleArray(array) {
+    const shuffled = [...array];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+}
+
+/**
+ * Generate mosaic grid background HTML with continuous scrolling rows
+ */
+function generateMosaicBackground(coverUrls) {
+    // If less than 3 covers, use gradient fallback
+    if (!coverUrls || coverUrls.length < 3) {
+        return `
+            <div class="wishlist-mosaic-fallback"></div>
+            <div class="wishlist-mosaic-overlay"></div>
+        `;
+    }
+
+    // Cap covers per row to 15 for GPU performance (avoids hundreds of tiles)
+    if (coverUrls.length > 15) {
+        coverUrls = coverUrls.slice(0, 15);
+    }
+
+    const rows = 4;
+    let mosaicHTML = '<div class="wishlist-mosaic-background">';
+
+    // Calculate scroll speed based on number of images
+    // More images = longer duration to maintain consistent visual speed
+    // Minimum 40s to prevent scrolling too fast
+    const scrollSpeed = Math.max(40, coverUrls.length * 2);
+
+    for (let row = 0; row < rows; row++) {
+        const isEvenRow = row % 2 === 0;
+        const direction = isEvenRow ? 'left' : 'right';
+
+        // Randomize order for each row
+        const shuffledCovers = shuffleArray(coverUrls);
+
+        // Create row wrapper
+        mosaicHTML += `<div class="wishlist-mosaic-row-wrapper">`;
+        mosaicHTML += `<div class="wishlist-mosaic-row scroll-${direction}" style="--speed: ${scrollSpeed}s;">`;
+
+        // Generate tiles - duplicate 2 times for smooth infinite scroll
+        for (let duplicate = 0; duplicate < 2; duplicate++) {
+            for (let i = 0; i < shuffledCovers.length; i++) {
+                const coverUrl = shuffledCovers[i];
+                mosaicHTML += `
+                    <div class="wishlist-mosaic-tile">
+                        <div class="wishlist-mosaic-image" style="background-image: url('${coverUrl}');"></div>
+                    </div>
+                `;
+            }
+        }
+
+        mosaicHTML += '</div>'; // Close row
+        mosaicHTML += '</div>'; // Close wrapper
+    }
+
+    mosaicHTML += '</div>';
+    mosaicHTML += '<div class="wishlist-mosaic-overlay"></div>'; // Dark overlay for readability
+
+    return mosaicHTML;
+}
+
+/**
+ * Open wishlist overview modal showing category breakdown
+ * This is the NEW entry point for wishlist from dashboard
+ */
+async function openWishlistOverviewModal() {
+    try {
+        showLoadingOverlay('Loading wishlist...');
+
+        // Fetch wishlist stats
+        const statsResponse = await fetch('/api/wishlist/stats');
+        const statsData = await statsResponse.json();
+
+        if (!statsResponse.ok) {
+            throw new Error(statsData.error || 'Failed to fetch wishlist stats');
+        }
+
+        const { singles, albums, total } = statsData;
+
+        if (total === 0) {
+            hideLoadingOverlay();
+            showToast('Wishlist is empty. No tracks to process.', 'info');
+            return;
+        }
+
+        // Fetch album covers for mosaic backgrounds
+        // Limit to 50 tracks per category (enough to get 20 unique covers while being efficient)
+        const albumCoversPromise = fetch('/api/wishlist/tracks?category=albums&limit=50').then(r => r.json());
+        const singleCoversPromise = fetch('/api/wishlist/tracks?category=singles&limit=50').then(r => r.json());
+
+        const [albumTracksData, singleTracksData] = await Promise.all([albumCoversPromise, singleCoversPromise]);
+
+        // Extract unique album covers (max 20 per category)
+        const albumCovers = extractUniqueCoverImages(albumTracksData.tracks || [], 20);
+        const singleCovers = extractUniqueCoverImages(singleTracksData.tracks || [], 20);
+
+        // Create modal if it doesn't exist
+        let modal = document.getElementById('wishlist-overview-modal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'wishlist-overview-modal';
+            modal.className = 'modal-overlay';
+            document.body.appendChild(modal);
+        }
+
+        // Fetch current cycle
+        const cycleResponse = await fetch('/api/wishlist/cycle');
+        const cycleData = await cycleResponse.json();
+        const currentCycle = cycleData.cycle || 'albums';
+
+        // Format countdown timer
+        const nextRunSeconds = statsData.next_run_in_seconds || 0;
+        const countdownText = formatCountdownTime(nextRunSeconds);
+        const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+        modal.innerHTML = `
+            <div class="modal-container playlist-modal">
+                <div class="playlist-modal-header">
+                    <div class="playlist-header-content">
+                        <h2>🎵 Wishlist Overview</h2>
+                        <div class="playlist-quick-info">
+                            <span class="playlist-track-count">${total} Total Tracks</span>
+                            <span class="playlist-owner" id="wishlist-next-auto-timer">Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}</span>
+                        </div>
+                    </div>
+                    <span class="playlist-modal-close" onclick="closeWishlistOverviewModal()">×</span>
+                </div>
+
+                <div class="playlist-modal-body">
+                    <div class="wishlist-category-grid">
+                        <!-- Albums/EPs Category -->
+                        <div class="wishlist-category-card ${currentCycle === 'albums' ? 'next-in-queue' : ''}" data-category="albums" onclick="selectWishlistCategory('albums')">
+                            ${generateMosaicBackground(albumCovers)}
+                            <div class="wishlist-category-content">
+                                <div class="wishlist-category-icon">💿</div>
+                                <div class="wishlist-category-title">Albums / EPs</div>
+                                <div class="wishlist-category-count">${albums} tracks</div>
+                                ${currentCycle === 'albums' ? '<div class="wishlist-category-badge">Next in Queue</div>' : ''}
+                            </div>
+                        </div>
+
+                        <!-- Singles Category -->
+                        <div class="wishlist-category-card ${currentCycle === 'singles' ? 'next-in-queue' : ''}" data-category="singles" onclick="selectWishlistCategory('singles')">
+                            ${generateMosaicBackground(singleCovers)}
+                            <div class="wishlist-category-content">
+                                <div class="wishlist-category-icon">🎵</div>
+                                <div class="wishlist-category-title">Singles</div>
+                                <div class="wishlist-category-count">${singles} tracks</div>
+                                ${currentCycle === 'singles' ? '<div class="wishlist-category-badge">Next in Queue</div>' : ''}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Selected Category Track List (initially hidden) -->
+                    <div id="wishlist-category-tracks" class="wishlist-category-tracks" style="display: none;">
+                        <div class="wishlist-category-header">
+                            <button class="wishlist-back-btn" onclick="backToCategories()">← Back</button>
+                            <span id="wishlist-category-name" class="wishlist-category-name"></span>
+                            <button class="wishlist-select-all-btn" id="wishlist-select-all-btn" onclick="toggleWishlistSelectAll()">Select All</button>
+                        </div>
+                        <div class="wishlist-batch-bar" id="wishlist-batch-bar" style="display: none;">
+                            <span class="wishlist-batch-count" id="wishlist-batch-count">0 selected</span>
+                            <button class="playlist-modal-btn playlist-modal-btn-secondary wishlist-batch-remove-btn"
+                                    onclick="batchRemoveFromWishlist()">
+                                Remove Selected
+                            </button>
+                        </div>
+                        <div id="wishlist-tracks-list" class="playlist-tracks-scroll">
+                            <div class="loading-indicator">Loading tracks...</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="playlist-modal-footer">
+                    <div class="playlist-modal-footer-left">
+                        <button class="playlist-modal-btn playlist-modal-btn-danger" onclick="clearEntireWishlist()">
+                            🗑️ Clear Wishlist
+                        </button>
+                        <button class="playlist-modal-btn playlist-modal-btn-warning" onclick="cleanupWishlistOverview()">
+                            🧹 Cleanup Wishlist
+                        </button>
+                    </div>
+                    <div class="playlist-modal-footer-right">
+                        <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeWishlistOverviewModal()">Close</button>
+                        <button id="wishlist-download-btn" class="playlist-modal-btn playlist-modal-btn-primary" style="display: none;" onclick="downloadSelectedCategory()">
+                            Download Selection
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        modal.style.display = 'flex';
+        hideLoadingOverlay();
+
+        // Start countdown timer update interval
+        startWishlistCountdownTimer(currentCycle, nextRunSeconds);
+
+    } catch (error) {
+        console.error('Error opening wishlist overview:', error);
+        showToast(`Failed to load wishlist: ${error.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+function startWishlistCountdownTimer(currentCycle, initialSeconds) {
+    // Clear any existing interval
+    if (wishlistCountdownInterval) {
+        clearInterval(wishlistCountdownInterval);
+    }
+
+    let remainingSeconds = initialSeconds;
+    const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+    wishlistCountdownInterval = setInterval(async () => {
+        remainingSeconds--;
+
+        // Check if auto-processing has started (every 2 seconds to avoid overwhelming backend)
+        if (remainingSeconds % 2 === 0 || remainingSeconds <= 0) {
+            // Use WebSocket data if available, otherwise fall back to HTTP
+            if (socketConnected && _lastWishlistStats) {
+                const data = _lastWishlistStats;
+                if (data.is_auto_processing) {
+                    if (!_wishlistAutoProcessingNotified) {
+                        navigateToPage('active-downloads');
+                        showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+                        _wishlistAutoProcessingNotified = true;
+                    }
+                    return;
+                }
+                if (remainingSeconds <= 0) {
+                    remainingSeconds = data.next_run_in_seconds || 0;
+                    const timerElement = document.getElementById('wishlist-next-auto-timer');
+                    if (timerElement) {
+                        const countdownText = formatCountdownTime(remainingSeconds);
+                        timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+                    }
+                }
+            } else {
+                try {
+                    const response = await fetch('/api/wishlist/stats');
+                    const data = await response.json();
+
+                    // AUTO-CLOSE DETECTION: If auto-processing started, close modal and notify user (once)
+                    if (data.is_auto_processing) {
+                        if (!_wishlistAutoProcessingNotified) {
+                            console.log('🤖 [Wishlist] Auto-processing detected, closing overview modal');
+                            closeWishlistOverviewModal();
+                            showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+                            _wishlistAutoProcessingNotified = true;
+                        }
+                        return; // Exit interval
+                    }
+
+                    // Update remaining seconds if timer expired
+                    if (remainingSeconds <= 0) {
+                        remainingSeconds = data.next_run_in_seconds || 0;
+
+                        // Also update cycle in case it changed
+                        const newCycle = data.current_cycle || 'albums';
+                        const newCycleText = newCycle === 'albums' ? 'Albums/EPs' : 'Singles';
+
+                        const timerElement = document.getElementById('wishlist-next-auto-timer');
+                        if (timerElement) {
+                            const countdownText = formatCountdownTime(remainingSeconds);
+                            timerElement.textContent = `Next Auto: ${newCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+                        }
+                    }
+                } catch (error) {
+                    console.debug('Error updating wishlist countdown:', error);
+                }
+            } // end else (HTTP fallback)
+        }
+
+        // Always update the display countdown
+        const timerElement = document.getElementById('wishlist-next-auto-timer');
+        if (timerElement) {
+            const countdownText = formatCountdownTime(remainingSeconds);
+            timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
+        }
+    }, 1000); // Update every second
+}
+
+function closeWishlistOverviewModal() {
+    console.log('🚪 closeWishlistOverviewModal() called');
+
+    // Stop countdown timer
+    if (wishlistCountdownInterval) {
+        clearInterval(wishlistCountdownInterval);
+        wishlistCountdownInterval = null;
+    }
+
+    const modal = document.getElementById('wishlist-overview-modal');
+    console.log('Modal element:', modal);
+    if (modal) {
+        modal.style.display = 'none';
+        console.log('Modal display set to none');
+        // Also remove from DOM to ensure clean state
+        modal.remove();
+        console.log('Modal removed from DOM');
+    } else {
+        console.warn('Modal element not found');
+    }
+    window.selectedWishlistCategory = null;
+    console.log('✅ Modal closed');
+}
+
+async function cleanupWishlistOverview() {
+    console.log('🧹 cleanupWishlistOverview() called');
+
+    if (!await showConfirmDialog({ title: 'Cleanup Wishlist', message: 'This will remove all tracks from the wishlist that already exist in your library. Continue?' })) {
+        return;
+    }
+
+    try {
+        showLoadingOverlay('Cleaning up wishlist...');
+
+        const response = await fetch('/api/wishlist/cleanup', {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            const removedCount = result.removed_count || 0;
+
+            if (removedCount > 0) {
+                showToast(`Cleanup complete! Removed ${removedCount} tracks that already exist in your library`, 'success');
+            } else {
+                showToast('No tracks needed to be removed', 'info');
+            }
+
+            // Check if wishlist is now empty
+            const statsResponse = await fetch('/api/wishlist/stats');
+            const statsData = await statsResponse.json();
+
+            if (statsData.total === 0) {
+                // Wishlist is empty, refresh the page to show empty state
+                wishlistPageState.isInitialized = false;
+                await initializeWishlistPage();
+                await updateWishlistCount();
+            } else {
+                // Wishlist still has items, refresh the page to show updated counts
+                wishlistPageState.isInitialized = false;
+                await initializeWishlistPage();
+            }
+        } else {
+            showToast(`Failed to cleanup wishlist: ${result.error || 'Unknown error'}`, 'error');
+        }
+
+        hideLoadingOverlay();
+
+    } catch (error) {
+        console.error('Error cleaning up wishlist:', error);
+        showToast(`Failed to cleanup wishlist: ${error.message}`, 'error');
+        hideLoadingOverlay();
+    }
+}
+
+async function clearEntireWishlist() {
+    console.log('🗑️ clearEntireWishlist() called');
+
+    if (!await showConfirmDialog({ title: 'Clear Wishlist', message: 'WARNING: This will permanently delete ALL tracks from your wishlist.\n\nThis action cannot be undone.\n\nAre you sure you want to continue?', confirmText: 'Clear All', destructive: true })) {
+        console.log('User cancelled confirmation');
+        return;
+    }
+
+    console.log('User confirmed, proceeding with clear...');
+
+    try {
+        showLoadingOverlay('Clearing wishlist...');
+        console.log('Loading overlay shown');
+
+        const response = await fetch('/api/wishlist/clear', {
+            method: 'POST'
+        });
+        console.log('API response received:', response.status);
+
+        const result = await response.json();
+        console.log('Clear wishlist response:', result);
+
+        hideLoadingOverlay();
+        console.log('Loading overlay hidden');
+
+        if (result.success) {
+            console.log('Clear was successful, showing toast...');
+            showToast('Wishlist cleared successfully', 'success');
+
+            console.log('Updating wishlist button count...');
+            await updateWishlistCount();
+
+            console.log('Refreshing wishlist page...');
+            wishlistPageState.isInitialized = false;
+            await initializeWishlistPage();
+        } else {
+            console.error('Clear failed:', result.error);
+            showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error clearing wishlist:', error);
+        hideLoadingOverlay();
+        showToast(`Failed to clear wishlist: ${error.message}`, 'error');
+    }
+}
+
+async function selectWishlistCategory(category) {
+    try {
+        window.selectedWishlistCategory = category;
+
+        const tracksList = document.getElementById('wishlist-tracks-list');
+        const categoryTracksSection = document.getElementById('wishlist-category-tracks');
+        const nebulaEl = document.getElementById('wishlist-nebula');
+        const downloadBtn = document.getElementById('wishlist-download-btn');
+        const categoryName = document.getElementById('wishlist-category-name');
+
+        if (nebulaEl) nebulaEl.style.display = 'none';
+        categoryTracksSection.style.display = 'block';
+        downloadBtn.style.display = 'inline-block';
+        categoryName.textContent = category === 'albums' ? 'Albums / EPs' : 'Singles';
+
+        tracksList.innerHTML = '<div class="loading-indicator">Loading tracks...</div>';
+
+        const _wlPageSize = window._wlNextLimit || 200;
+        window._wlNextLimit = null;
+        const response = await fetch(`/api/wishlist/tracks?category=${category}&limit=${_wlPageSize}`);
+        const data = await response.json();
+
+        if (!response.ok) throw new Error(data.error || 'Failed to fetch tracks');
+
+        const tracks = data.tracks || [];
+        const totalAvailable = data.total || tracks.length;
+        window._wlCategory = category;
+        window._wlOffset = tracks.length;
+        window._wlTotal = totalAvailable;
+
+        if (tracks.length === 0) {
+            tracksList.innerHTML = '<div class="empty-state">No tracks in this category</div>';
+            return;
+        }
+
+        // For Albums/EPs, group by album
+        if (category === 'albums') {
+            const albumGroups = {};
+
+            tracks.forEach(track => {
+                let spotifyData = track.spotify_data;
+                if (typeof spotifyData === 'string') {
+                    try {
+                        spotifyData = JSON.parse(spotifyData);
+                    } catch (e) {
+                        spotifyData = null;
+                    }
+                }
+
+                const rawAlbum = spotifyData?.album;
+                const albumName = (typeof rawAlbum === 'string' ? rawAlbum : rawAlbum?.name) || 'Unknown Album';
+
+                // Handle both object format {name: '...'} and sanitized string format
+                let artistName = 'Unknown Artist';
+                let artistId = null;
+                if (spotifyData?.artists?.[0]?.name) {
+                    // Object format from Spotify API
+                    artistName = spotifyData.artists[0].name;
+                    artistId = spotifyData.artists[0].id;
+                } else if (spotifyData?.artists?.[0] && typeof spotifyData.artists[0] === 'string') {
+                    // Sanitized string format
+                    artistName = spotifyData.artists[0];
+                } else if (Array.isArray(track.artists) && track.artists.length > 0) {
+                    // Fallback to track.artists
+                    if (typeof track.artists[0] === 'string') {
+                        artistName = track.artists[0];
+                    } else if (track.artists[0]?.name) {
+                        artistName = track.artists[0].name;
+                        artistId = track.artists[0].id;
+                    }
+                }
+
+                const albumImage = spotifyData?.album?.images?.[0]?.url || '';
+
+                // Use album ID if available, otherwise create unique key from album + artist
+                // Sanitize the ID to remove all special characters that could break DOM IDs or CSS selectors
+                const albumId = spotifyData?.album?.id || `${albumName}_${artistName}`
+                    .replace(/[^a-zA-Z0-9\s_-]/g, '')  // Remove all special chars except spaces, underscores, hyphens
+                    .replace(/\s+/g, '_')               // Replace spaces with underscores
+                    .toLowerCase();
+
+                if (!albumGroups[albumId]) {
+                    albumGroups[albumId] = {
+                        albumName,
+                        artistName,
+                        artistId,
+                        albumImage,
+                        tracks: []
+                    };
+                }
+
+                const spotifyTrackId = track.spotify_track_id || track.id || '';
+
+                albumGroups[albumId].tracks.push({
+                    name: track.name || 'Unknown Track',
+                    artistName,
+                    trackNumber: spotifyData?.track_number || 0,
+                    spotifyTrackId
+                });
+            });
+
+            // Render album cards
+            let albumsHTML = '<div class="wishlist-album-grid">';
+            Object.entries(albumGroups).forEach(([albumId, albumData]) => {
+                // Sort tracks by track number
+                albumData.tracks.sort((a, b) => a.trackNumber - b.trackNumber);
+
+                const tracksListHTML = albumData.tracks.map(track => `
+                    <div class="wishlist-album-track wishlist-track-item">
+                        <label class="wishlist-checkbox-wrapper">
+                            <input type="checkbox" class="wishlist-select-cb"
+                                   data-track-id="${track.spotifyTrackId}">
+                            <span class="wishlist-checkbox-custom"></span>
+                        </label>
+                        <span class="wishlist-album-track-name">${track.name}</span>
+                        <button class="wishlist-delete-btn wishlist-delete-btn-small" data-track-id="${track.spotifyTrackId}" title="Remove from wishlist">
+                            🗑️
+                        </button>
+                    </div>
+                `).join('');
+
+                // Handle missing album images with a placeholder
+                const albumImageStyle = albumData.albumImage
+                    ? `background-image: url('${albumData.albumImage}')`
+                    : `background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%); display: flex; align-items: center; justify-content: center; font-size: 40px;`;
+                const albumImageContent = albumData.albumImage ? '' : '<span style="opacity: 0.3;">💿</span>';
+
+                albumsHTML += `
+                    <div class="wishlist-album-card">
+                        <div class="wishlist-album-header" data-album-id="${albumId}">
+                            <label class="wishlist-checkbox-wrapper">
+                                <input type="checkbox" class="wishlist-album-select-all-cb"
+                                       data-album-id="${albumId}">
+                                <span class="wishlist-checkbox-custom"></span>
+                            </label>
+                            <div class="wishlist-album-image" style="${albumImageStyle}">${albumImageContent}</div>
+                            <div class="wishlist-album-info">
+                                <div class="wishlist-album-name">${albumData.albumName}</div>
+                                <div class="wishlist-album-artist">${albumData.artistName}</div>
+                                <div class="wishlist-album-track-count">${albumData.tracks.length} track${albumData.tracks.length !== 1 ? 's' : ''}</div>
+                            </div>
+                            <button class="wishlist-delete-btn wishlist-delete-album-btn" data-album-id="${albumId}" title="Remove all tracks from album">
+                                🗑️
+                            </button>
+                            <div class="wishlist-album-expand-icon" id="expand-icon-${albumId}">▼</div>
+                        </div>
+                        <div class="wishlist-album-tracks" id="tracks-${albumId}" style="display: none;">
+                            ${tracksListHTML}
+                        </div>
+                    </div>
+                `;
+            });
+            albumsHTML += '</div>';
+
+            tracksList.innerHTML = albumsHTML;
+            if (totalAvailable > tracks.length) {
+                tracksList.insertAdjacentHTML('beforeend',
+                    `<button class="wishlist-load-more-btn" onclick="loadMoreWishlistTracks()">Load More (${tracks.length} of ${totalAvailable})</button>`);
+            }
+            _attachWishlistDelegation(tracksList);
+
+        } else {
+            // For Singles, show list with album images
+            let tracksHTML = '';
+            tracks.forEach((track, index) => {
+                const trackName = track.name || 'Unknown Track';
+
+                let spotifyData = track.spotify_data;
+                if (typeof spotifyData === 'string') {
+                    try {
+                        spotifyData = JSON.parse(spotifyData);
+                    } catch (e) {
+                        spotifyData = null;
+                    }
+                }
+
+                let artistName = 'Unknown Artist';
+                if (spotifyData?.artists?.[0]?.name) {
+                    artistName = spotifyData.artists[0].name;
+                } else if (Array.isArray(track.artists) && track.artists.length > 0) {
+                    if (typeof track.artists[0] === 'string') {
+                        artistName = track.artists[0];
+                    } else if (track.artists[0]?.name) {
+                        artistName = track.artists[0].name;
+                    }
+                }
+
+                let albumName = 'Unknown Album';
+                if (spotifyData?.album?.name) {
+                    albumName = spotifyData.album.name;
+                } else if (typeof track.album === 'string') {
+                    albumName = track.album;
+                } else if (track.album?.name) {
+                    albumName = track.album.name;
+                }
+
+                const albumImage = spotifyData?.album?.images?.[0]?.url || '';
+                const spotifyTrackId = track.spotify_track_id || track.id || '';
+
+                tracksHTML += `
+                    <div class="playlist-track-item-with-image wishlist-track-item">
+                        <label class="wishlist-checkbox-wrapper">
+                            <input type="checkbox" class="wishlist-select-cb"
+                                   data-track-id="${spotifyTrackId}">
+                            <span class="wishlist-checkbox-custom"></span>
+                        </label>
+                        <div class="playlist-track-image" style="background-image: url('${albumImage}')"></div>
+                        <div class="playlist-track-info">
+                            <div class="playlist-track-name">${trackName}</div>
+                            <div class="playlist-track-artist">${artistName} • ${albumName}</div>
+                        </div>
+                        <button class="wishlist-delete-btn" data-track-id="${spotifyTrackId}" title="Remove from wishlist">
+                            🗑️
+                        </button>
+                    </div>
+                `;
+            });
+
+            tracksList.innerHTML = tracksHTML;
+            if (totalAvailable > tracks.length) {
+                tracksList.insertAdjacentHTML('beforeend',
+                    `<button class="wishlist-load-more-btn" onclick="loadMoreWishlistTracks()">Load More (${tracks.length} of ${totalAvailable})</button>`);
+            }
+            _attachWishlistDelegation(tracksList);
+        }
+
+    } catch (error) {
+        console.error('Error loading category tracks:', error);
+        showToast(`Failed to load tracks: ${error.message}`, 'error');
+    }
+}
+
+async function loadMoreWishlistTracks() {
+    const btn = document.querySelector('.wishlist-load-more-btn');
+    if (btn) { btn.textContent = 'Loading...'; btn.disabled = true; }
+    // Increase page size and reload
+    window._wlOffset = (window._wlOffset || 200) + 200;
+    // Override the page size for this reload
+    window._wlNextLimit = window._wlOffset;
+    selectWishlistCategory(window._wlCategory);
+}
+
+function _attachWishlistDelegation(container) {
+    // Single click handler for all wishlist album/track interactions
+    container.addEventListener('click', (e) => {
+        const target = e.target;
+
+        // Skip checkbox wrapper clicks — handled by change listener
+        if (target.closest('.wishlist-checkbox-wrapper')) return;
+
+        // Album header click (expand/collapse)
+        const header = target.closest('.wishlist-album-header');
+        if (header && !target.closest('.wishlist-delete-album-btn')) {
+            toggleAlbumTracks(header.dataset.albumId);
+            return;
+        }
+
+        // Album delete button
+        const albumDelBtn = target.closest('.wishlist-delete-album-btn');
+        if (albumDelBtn) {
+            e.stopPropagation();
+            removeAlbumFromWishlist(albumDelBtn.dataset.albumId, e);
+            return;
+        }
+
+        // Track delete button
+        const trackDelBtn = target.closest('.wishlist-delete-btn');
+        if (trackDelBtn && trackDelBtn.dataset.trackId) {
+            e.stopPropagation();
+            removeTrackFromWishlist(trackDelBtn.dataset.trackId, e);
+            return;
+        }
+    });
+
+    // Separate change handler for checkboxes (more reliable than click for inputs)
+    container.addEventListener('change', (e) => {
+        const target = e.target;
+        if (target.classList.contains('wishlist-album-select-all-cb')) {
+            toggleWishlistAlbumSelection(target.dataset.albumId, target.checked);
+        } else if (target.classList.contains('wishlist-select-cb')) {
+            updateWishlistBatchBar();
+        }
+    });
+}
+
+function backToCategories() {
+    _nebulaBack();
+}
+
+function toggleAlbumTracks(albumId) {
+    const tracksElement = document.getElementById(`tracks-${albumId}`);
+    const expandIcon = document.getElementById(`expand-icon-${albumId}`);
+
+    if (tracksElement.style.display === 'none') {
+        tracksElement.style.display = 'block';
+        expandIcon.textContent = '▲';
+    } else {
+        tracksElement.style.display = 'none';
+        expandIcon.textContent = '▼';
+    }
+}
+
+/**
+ * Get all checked wishlist track checkboxes
+ */
+function getCheckedWishlistTracks() {
+    return Array.from(document.querySelectorAll('.wishlist-select-cb:checked'));
+}
+
+/**
+ * Toggle select all / deselect all tracks in the current wishlist category
+ */
+function toggleWishlistSelectAll() {
+    const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
+    const albumCheckboxes = document.querySelectorAll('.wishlist-album-select-all-cb');
+    const btn = document.getElementById('wishlist-select-all-btn');
+    const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
+
+    const newState = !allChecked;
+
+    allCheckboxes.forEach(cb => { cb.checked = newState; });
+    albumCheckboxes.forEach(cb => { cb.checked = newState; });
+
+    // Expand all albums when selecting all
+    if (newState) {
+        document.querySelectorAll('.wishlist-album-tracks').forEach(el => {
+            el.style.display = 'block';
+        });
+        document.querySelectorAll('[id^="expand-icon-"]').forEach(icon => {
+            icon.textContent = '▲';
+        });
+    }
+
+    if (btn) btn.textContent = newState ? 'Deselect All' : 'Select All';
+    updateWishlistBatchBar();
+}
+
+/**
+ * Update the wishlist batch action bar based on checkbox selection
+ */
+function updateWishlistBatchBar() {
+    const checked = getCheckedWishlistTracks();
+    const bar = document.getElementById('wishlist-batch-bar');
+    const countEl = document.getElementById('wishlist-batch-count');
+
+    if (!bar || !countEl) return;
+
+    if (checked.length > 0) {
+        bar.style.display = 'flex';
+        countEl.textContent = `${checked.length} selected`;
+    } else {
+        bar.style.display = 'none';
+    }
+
+    // Sync the Select All button text
+    const btn = document.getElementById('wishlist-select-all-btn');
+    if (btn) {
+        const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
+        const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
+        btn.textContent = allChecked ? 'Deselect All' : 'Select All';
+    }
+}
+
+/**
+ * Toggle all track checkboxes within an album when album header checkbox is clicked
+ */
+function toggleWishlistAlbumSelection(albumId, checked) {
+    const tracksContainer = document.getElementById(`tracks-${albumId}`);
+    if (tracksContainer) {
+        // Expand the album tracks if selecting
+        if (checked) {
+            tracksContainer.style.display = 'block';
+            const expandIcon = document.getElementById(`expand-icon-${albumId}`);
+            if (expandIcon) expandIcon.textContent = '▲';
+        }
+        tracksContainer.querySelectorAll('.wishlist-select-cb').forEach(cb => {
+            cb.checked = checked;
+        });
+    }
+    updateWishlistBatchBar();
+}
+
+/**
+ * Batch remove selected tracks from wishlist
+ */
+async function batchRemoveFromWishlist() {
+    const checked = getCheckedWishlistTracks();
+    if (checked.length === 0) return;
+
+    const count = checked.length;
+    const confirmed = await showConfirmationModal(
+        'Remove Tracks',
+        `Remove ${count} track${count !== 1 ? 's' : ''} from your wishlist?`,
+        '🗑️'
+    );
+
+    if (!confirmed) return;
+
+    const trackIds = checked.map(cb => cb.getAttribute('data-track-id'));
+
+    try {
+        const response = await fetch('/api/wishlist/remove-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ spotify_track_ids: trackIds })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(`Removed ${data.removed} track(s) from wishlist`, 'success');
+
+            // Reload the current category to refresh the list
+            if (window.selectedWishlistCategory) {
+                await selectWishlistCategory(window.selectedWishlistCategory);
+            }
+
+            // Update wishlist count in sidebar
+            await updateWishlistCount();
+        } else {
+            showToast(`Failed to remove tracks: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error batch removing from wishlist:', error);
+        showToast('Failed to remove tracks from wishlist', 'error');
+    }
+}
+
+function showConfirmationModal(title, message, icon = '⚠️') {
+    return new Promise((resolve) => {
+        // Create modal if it doesn't exist
+        let modal = document.getElementById('confirmation-modal-overlay');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'confirmation-modal-overlay';
+            modal.className = 'confirmation-modal-overlay';
+            document.body.appendChild(modal);
+        }
+
+        // Set modal content
+        modal.innerHTML = `
+            <div class="confirmation-modal">
+                <div class="confirmation-modal-icon">${icon}</div>
+                <div class="confirmation-modal-title">${title}</div>
+                <div class="confirmation-modal-message">${message}</div>
+                <div class="confirmation-modal-buttons">
+                    <button class="confirmation-modal-btn confirmation-modal-btn-cancel" id="confirm-cancel">Cancel</button>
+                    <button class="confirmation-modal-btn confirmation-modal-btn-confirm" id="confirm-yes">Yes, Remove</button>
+                </div>
+            </div>
+        `;
+
+        // Show modal with animation
+        setTimeout(() => {
+            modal.classList.add('show');
+        }, 10);
+
+        // Escape key handler - defined outside so we can remove it
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                handleCancel();
+            }
+        };
+
+        // Handle button clicks
+        const handleCancel = () => {
+            document.removeEventListener('keydown', handleEscape);
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.remove();
+            }, 200);
+            resolve(false);
+        };
+
+        const handleConfirm = () => {
+            document.removeEventListener('keydown', handleEscape);
+            modal.classList.remove('show');
+            setTimeout(() => {
+                modal.remove();
+            }, 200);
+            resolve(true);
+        };
+
+        document.getElementById('confirm-cancel').addEventListener('click', handleCancel);
+        document.getElementById('confirm-yes').addEventListener('click', handleConfirm);
+
+        // Close on overlay click
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                handleCancel();
+            }
+        });
+
+        // Add Escape key listener
+        document.addEventListener('keydown', handleEscape);
+    });
+}
+
+async function removeTrackFromWishlist(spotifyTrackId, event) {
+    // Stop event propagation to prevent triggering parent click handlers
+    if (event) {
+        event.stopPropagation();
+    }
+
+    const confirmed = await showConfirmationModal(
+        'Remove Track',
+        'Are you sure you want to remove this track from your wishlist?',
+        '🗑️'
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/wishlist/remove-track', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ spotify_track_id: spotifyTrackId })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast('Track removed from wishlist', 'success');
+
+            // Reload the current category to refresh the list
+            if (window.selectedWishlistCategory) {
+                await selectWishlistCategory(window.selectedWishlistCategory);
+            }
+
+            // Update wishlist count in sidebar
+            await updateWishlistCount();
+        } else {
+            showToast(`Failed to remove track: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error removing track from wishlist:', error);
+        showToast('Failed to remove track from wishlist', 'error');
+    }
+}
+
+async function removeAlbumFromWishlist(albumId, event) {
+    // Stop event propagation to prevent triggering parent click handlers
+    if (event) {
+        event.stopPropagation();
+    }
+
+    const confirmed = await showConfirmationModal(
+        'Remove Album',
+        'Are you sure you want to remove all tracks from this album from your wishlist?',
+        '💿'
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/wishlist/remove-album', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ album_id: albumId })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(`Removed ${data.removed_count} track(s) from wishlist`, 'success');
+
+            // Reload the current category to refresh the list
+            if (window.selectedWishlistCategory) {
+                await selectWishlistCategory(window.selectedWishlistCategory);
+            }
+
+            // Update wishlist count in sidebar
+            await updateWishlistCount();
+        } else {
+            showToast(`Failed to remove album: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error removing album from wishlist:', error);
+        showToast('Failed to remove album from wishlist', 'error');
+    }
+}
+
+async function downloadSelectedCategory() {
+    const category = window.selectedWishlistCategory;
+    if (!category) {
+        showToast('No category selected', 'error');
+        return;
+    }
+
+    // Collect checked track IDs
+    const checkedBoxes = document.querySelectorAll('.wishlist-select-cb:checked');
+    const selectedTrackIds = new Set(Array.from(checkedBoxes).map(cb => cb.dataset.trackId).filter(Boolean));
+
+    await openDownloadMissingWishlistModal(category, selectedTrackIds.size > 0 ? selectedTrackIds : null);
+}
+
+async function openDownloadMissingWishlistModal(category = null, selectedTrackIds = null) {
+    showLoadingOverlay('Loading wishlist...');
+    const playlistId = "wishlist"; // Use a consistent ID for wishlist
+
+    // Check if a process is already active for the wishlist
+    if (activeDownloadProcesses[playlistId]) {
+        console.log(`Modal for wishlist already exists. Showing it.`);
+        const process = activeDownloadProcesses[playlistId];
+        if (process.modalElement) {
+            // Show helpful message if it's a completed process
+            if (process.status === 'complete') {
+                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+            }
+            process.modalElement.style.display = 'flex';
+            WishlistModalState.setVisible(); // Track that modal is now visible
+        }
+        hideLoadingOverlay(); // Always hide overlay before returning
+        return; // Don't create a new one
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for wishlist${category ? ' (' + category + ')' : ''}`);
+
+    // Store category in global state for when process starts
+    window.currentWishlistCategory = category;
+
+    // Fetch actual wishlist tracks from the server
+    let tracks;
+    try {
+        // Build API URL with optional category filter
+        const apiUrl = category ? `/api/wishlist/tracks?category=${category}` : '/api/wishlist/tracks';
+
+        const response = await fetch('/api/wishlist/count');
+        const countData = await response.json();
+        if (countData.count === 0) {
+            showToast('Wishlist is empty. No tracks to download.', 'info');
+            hideLoadingOverlay();
+            return;
+        }
+
+        // Fetch the actual wishlist tracks for display (filtered by category if specified)
+        const tracksResponse = await fetch(apiUrl);
+        if (!tracksResponse.ok) {
+            throw new Error('Failed to fetch wishlist tracks');
+        }
+        const tracksData = await tracksResponse.json();
+        tracks = tracksData.tracks || [];
+
+        // Filter to only selected tracks if user made a selection
+        if (selectedTrackIds && selectedTrackIds.size > 0) {
+            tracks = tracks.filter(t => selectedTrackIds.has(t.id) || selectedTrackIds.has(t.spotify_track_id));
+            console.log(`📥 Filtered to ${tracks.length} selected tracks (from ${tracksData.tracks?.length || 0} total)`);
+        }
+
+    } catch (error) {
+        showToast(`Failed to fetch wishlist data: ${error.message}`, 'error');
+        hideLoadingOverlay();
+        return;
+    }
+
+    currentPlaylistTracks = tracks;
+    currentModalPlaylistId = playlistId;
+
+    let modal = document.createElement('div');
+    modal.id = `download-missing-modal-${playlistId}`; // Unique ID
+    modal.className = 'download-missing-modal'; // Use class for styling
+    modal.style.display = 'none'; // Start hidden
+    document.body.appendChild(modal);
+
+    // Register the new process in our global state tracker
+    activeDownloadProcesses[playlistId] = {
+        status: 'idle', // idle, running, complete, cancelled
+        modalElement: modal,
+        poller: null,
+        batchId: null,
+        playlist: { id: playlistId, name: "Wishlist" }, // Create a pseudo-playlist object
+        tracks: tracks
+    };
+
+    // Generate hero section for wishlist context
+    const heroContext = {
+        type: 'wishlist',
+        trackCount: tracks.length,
+        playlistId: playlistId
+    };
+
+    modal.innerHTML = `
+        <div class="download-missing-modal-content" data-context="wishlist">
+            <div class="download-missing-modal-header">
+                ${generateDownloadModalHeroSection(heroContext)}
+            </div>
+
+            <div class="download-missing-modal-body">
+                <div class="download-progress-section">
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            🔍 Library Analysis
+                            <span id="analysis-progress-text-${playlistId}">Ready to start</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill analysis" id="analysis-progress-fill-${playlistId}"></div>
+                        </div>
+                    </div>
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            ⏬ Downloads
+                            <span id="download-progress-text-${playlistId}">Waiting for analysis</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill download" id="download-progress-fill-${playlistId}"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="download-tracks-section">
+                    <div class="download-tracks-header">
+                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
+                    </div>
+                    <div class="download-tracks-table-container">
+                        <table class="download-tracks-table">
+                            <thead>
+                                <tr>
+                                    <th>#</th>
+                                    <th>Track</th>
+                                    <th>Artist</th>
+                                    <th>Library Match</th>
+                                    <th>Download Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="download-tracks-tbody-${playlistId}">
+                                ${tracks.map((track, index) => `
+                                    <tr data-track-index="${index}">
+                                        <td class="track-number">${index + 1}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
+                                        <td class="track-match-status match-checking" id="match-${playlistId}-${index}">🔍 Pending</td>
+                                        <td class="track-download-status" id="download-${playlistId}-${index}">-</td>
+                                        <td class="track-actions" id="actions-${playlistId}-${index}">-</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="download-missing-modal-footer">
+                <div class="download-phase-controls">
+                    <div class="force-download-toggle-container" style="margin-bottom: 0px;">
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="force-download-all-${playlistId}">
+                            <span>Force Download All</span>
+                        </label>
+                    </div>
+                    <button class="download-control-btn primary" id="begin-analysis-btn-${playlistId}" onclick="startWishlistMissingTracksProcess('${playlistId}')">
+                        Begin Analysis
+                    </button>
+                    <button class="download-control-btn danger" id="cancel-all-btn-${playlistId}" onclick="cancelAllOperations('${playlistId}')" style="display: none;">
+                        Cancel All
+                    </button>
+                    <button class="download-control-btn secondary" id="cleanup-wishlist-btn-${playlistId}" onclick="cleanupWishlist('${playlistId}')" style="margin-left: 10px;">
+                        🧹 Cleanup Wishlist
+                    </button>
+                    <button class="download-control-btn danger" id="clear-wishlist-btn-${playlistId}" onclick="clearWishlist('${playlistId}')" style="margin-left: 10px;">
+                        🗑️ Clear Wishlist
+                    </button>
+                </div>
+                <div class="modal-close-section">
+                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${playlistId}')">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    applyProgressiveTrackRendering(playlistId, tracks.length);
+    modal.style.display = 'flex';
+    hideLoadingOverlay();
+    WishlistModalState.setVisible(); // Track that new wishlist modal is now visible
+}
+
+async function startWishlistMissingTracksProcess(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    console.log(`🚀 Kicking off wishlist missing tracks process`);
+    try {
+        process.status = 'running';
+        // Note: Wishlist processes don't affect sync page refresh button state
+        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
+        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
+
+        // Check if force download toggle is enabled
+        const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
+        const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
+
+        // Hide the force download toggle during processing
+        const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
+        if (forceToggleContainer) {
+            forceToggleContainer.style.display = 'none';
+        }
+
+        // Extract track IDs from what the user is currently seeing in the modal
+        // This prevents race conditions where wishlist changes between modal open and analysis start
+        const trackIds = process.tracks ? process.tracks.map(t => t.spotify_track_id || t.id).filter(id => id) : null;
+        console.log(`🎯 [Wishlist] Sending ${trackIds ? trackIds.length : 'all'} specific track IDs to prevent race condition`);
+
+        const response = await fetch('/api/wishlist/download_missing', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                force_download_all: forceDownloadAll,
+                category: window.currentWishlistCategory,  // Keep for backward compat
+                track_ids: trackIds  // NEW: Send exact tracks to process
+            })
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            // Special handling for auto-processing conflict
+            if (response.status === 409) {
+                console.log('🤖 [Wishlist] Auto-processing is running, redirecting to download manager');
+                showToast('Wishlist auto-processing is already running. Opening Download Manager...', 'info');
+
+                // Close wishlist modal and show download manager
+                const wishlistModal = document.getElementById('download-modal-wishlist');
+                if (wishlistModal) {
+                    wishlistModal.remove();
+                }
+                delete activeDownloadProcesses[playlistId];
+
+                // Open download manager to show active batch
+                setTimeout(() => {
+                    const downloadManager = document.getElementById('download-manager-modal');
+                    if (downloadManager) {
+                        downloadManager.style.display = 'flex';
+                    } else {
+                        openDownloadManagerModal();
+                    }
+                }, 300);
+                return;
+            }
+            // Special handling for rate limit
+            if (response.status === 429) {
+                throw new Error(`${data.error} Try closing some other download processes first.`);
+            }
+            throw new Error(data.error);
+        }
+
+        process.batchId = data.batch_id;
+        console.log(`✅ Wishlist process started successfully. Batch ID: ${data.batch_id}`);
+
+        // Start polling for updates
+        startModalDownloadPolling(playlistId);
+
+    } catch (error) {
+        console.error('Error starting wishlist missing tracks process:', error);
+        showToast(`Error: ${error.message}`, 'error');
+
+        // Reset UI state on error
+        process.status = 'idle';
+        // Note: Wishlist processes don't affect sync page refresh button state
+        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'inline-block';
+        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+
+        // Show the force download toggle again
+        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+        if (forceToggleContainer) {
+            forceToggleContainer.style.display = 'flex';
+        }
+    }
+}
+
+async function startMissingTracksProcess(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    console.log(`🚀 Kicking off unified missing tracks process for playlist: ${playlistId}`);
+    try {
+        process.status = 'running';
+        updatePlaylistCardUI(playlistId);
+        updateRefreshButtonState();
+
+        // Set album to downloading status if this is an artist album
+        if (playlistId.startsWith('artist_album_')) {
+            // Format: artist_album_{artist.id}_{album.id}
+            const parts = playlistId.split('_');
+            if (parts.length >= 4) {
+                const albumId = parts.slice(3).join('_'); // In case album ID has underscores
+                const totalTracks = process.tracks ? process.tracks.length : 0;
+                setAlbumDownloadingStatus(albumId, 0, totalTracks);
+                console.log(`🔄 Set album ${albumId} to downloading status (0/${totalTracks} tracks)`);
+                console.log(`🔍 Virtual playlist ID: ${playlistId} → Album ID: ${albumId}`);
+            }
+        }
+
+        // Update YouTube playlist phase to 'downloading' if this is a YouTube playlist
+        if (playlistId.startsWith('youtube_')) {
+            const urlHash = playlistId.replace('youtube_', '');
+            updateYouTubeCardPhase(urlHash, 'downloading');
+            // Also update mirrored playlist card if applicable
+            if (urlHash.startsWith('mirrored_')) {
+                updateMirroredCardPhase(urlHash, 'downloading');
+            }
+        }
+
+        // Update Tidal playlist phase to 'downloading' if this is a Tidal playlist
+        if (playlistId.startsWith('tidal_')) {
+            const tidalPlaylistId = playlistId.replace('tidal_', '');
+            if (tidalPlaylistStates[tidalPlaylistId]) {
+                tidalPlaylistStates[tidalPlaylistId].phase = 'downloading';
+                updateTidalCardPhase(tidalPlaylistId, 'downloading');
+                console.log(`🔄 Updated Tidal playlist ${tidalPlaylistId} to downloading phase`);
+            }
+        }
+
+        // Update Beatport chart phase to 'downloading' if this is a Beatport chart
+        if (playlistId.startsWith('beatport_')) {
+            const urlHash = playlistId.replace('beatport_', '');
+            const state = youtubePlaylistStates[urlHash];
+
+            if (state && state.is_beatport_playlist) {
+                const chartHash = state.beatport_chart_hash || urlHash;
+
+                // Update frontend states
+                state.phase = 'downloading';
+                if (beatportChartStates[chartHash]) {
+                    beatportChartStates[chartHash].phase = 'downloading';
+                }
+
+                // Update card UI
+                updateBeatportCardPhase(chartHash, 'downloading');
+
+                // Update backend state
+                try {
+                    fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'downloading' })
+                    });
+                } catch (error) {
+                    console.warn('⚠️ Error updating backend Beatport phase to downloading:', error);
+                }
+
+                console.log(`🔄 Updated Beatport chart ${chartHash} to downloading phase`);
+            }
+        }
+
+        // Update Spotify Public playlist phase to 'downloading' if this is a Spotify Public playlist
+        if (playlistId.startsWith('spotify_public_')) {
+            const urlHash = playlistId.replace('spotify_public_', '');
+            if (spotifyPublicPlaylistStates[urlHash]) {
+                spotifyPublicPlaylistStates[urlHash].phase = 'downloading';
+                spotifyPublicPlaylistStates[urlHash].convertedSpotifyPlaylistId = playlistId;
+                updateSpotifyPublicCardPhase(urlHash, 'downloading');
+
+                try {
+                    fetch(`/api/spotify-public/update_phase/${urlHash}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
+                    });
+                } catch (error) {
+                    console.warn('Error updating backend Spotify Public phase to downloading:', error);
+                }
+
+                console.log(`🔄 Updated Spotify Public playlist ${urlHash} to downloading phase`);
+            }
+        }
+
+        // Update Deezer playlist phase to 'downloading' if this is a Deezer playlist
+        if (playlistId.startsWith('deezer_')) {
+            const deezerPlaylistId = playlistId.replace('deezer_', '');
+            if (deezerPlaylistStates[deezerPlaylistId]) {
+                deezerPlaylistStates[deezerPlaylistId].phase = 'downloading';
+                deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId = playlistId;
+                updateDeezerCardPhase(deezerPlaylistId, 'downloading');
+
+                try {
+                    fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
+                    });
+                } catch (error) {
+                    console.warn('Error updating backend Deezer phase to downloading:', error);
+                }
+
+                console.log(`🔄 Updated Deezer playlist ${deezerPlaylistId} to downloading phase`);
+            }
+        }
+
+        // Update ListenBrainz playlist phase to 'downloading' if this is a ListenBrainz playlist
+        if (playlistId.startsWith('listenbrainz_')) {
+            const playlistMbid = playlistId.replace('listenbrainz_', '');
+            const state = listenbrainzPlaylistStates[playlistMbid];
+
+            if (state) {
+                // Update frontend state
+                state.phase = 'downloading';
+
+                // Update backend state
+                try {
+                    fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'downloading' })
+                    });
+                } catch (error) {
+                    console.warn('⚠️ Error updating backend ListenBrainz phase to downloading:', error);
+                }
+
+                console.log(`🔄 Updated ListenBrainz playlist ${playlistMbid} to downloading phase`);
+            }
+        }
+        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
+        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
+
+        // Hide wishlist button if it exists (only for non-wishlist modals)
+        const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+        if (wishlistBtn) {
+            wishlistBtn.style.display = 'none';
+        }
+
+        // Add to discover download sidebar if this is a discover page download
+        if (process.discoverMetadata) {
+            const playlistName = process.playlist.name;
+            const imageUrl = process.discoverMetadata.imageUrl;
+            const type = process.discoverMetadata.type;
+            addDiscoverDownload(playlistId, playlistName, type, imageUrl);
+            console.log(`📥 [BEGIN ANALYSIS] Added discover download: ${playlistName}`);
+        }
+
+        // Check if force download toggle is enabled
+        const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
+        const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
+
+        // Check if playlist folder mode toggle is enabled (only for sync page playlists)
+        const playlistFolderModeCheckbox = document.getElementById(`playlist-folder-mode-${playlistId}`);
+        const playlistFolderMode = playlistFolderModeCheckbox ? playlistFolderModeCheckbox.checked : false;
+
+        // Hide the force download toggle during processing
+        const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
+        if (forceToggleContainer) {
+            forceToggleContainer.style.display = 'none';
+        }
+
+        // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
+        const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+        let selectedTracks = process.tracks;
+        if (tbody) {
+            const allCbs = tbody.querySelectorAll('.track-select-cb');
+            if (allCbs.length > 0) {
+                // Checkboxes exist — filter to only checked tracks
+                const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
+                const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
+                console.log(`🔲 [Track Selection] Total checkboxes: ${allCbs.length}, Checked: ${checkedCbs.length}`);
+                console.log(`🔲 [Track Selection] Checked indices:`, [...selectedIndices]);
+                console.log(`🔲 [Track Selection] process.tracks has ${process.tracks.length} items, first: "${process.tracks[0]?.name}", last: "${process.tracks[process.tracks.length - 1]?.name}"`);
+                // Stamp each selected track with its original table index so the backend
+                // maps status updates back to the correct modal row
+                selectedTracks = process.tracks
+                    .map((track, i) => ({ ...track, _original_index: i }))
+                    .filter(track => selectedIndices.has(track._original_index));
+                console.log(`🔲 [Track Selection] Filtered to ${selectedTracks.length} tracks:`, selectedTracks.map(t => `[${t._original_index}] ${t.name}`));
+                // Disable checkboxes once analysis starts
+                allCbs.forEach(cb => { cb.disabled = true; });
+            }
+        }
+        const selectAllCb = document.getElementById(`select-all-${playlistId}`);
+        if (selectAllCb) selectAllCb.disabled = true;
+
+        // Prepare request body - add album/artist context for artist album downloads
+        const wingItState = youtubePlaylistStates[playlistId] || {};
+        const isWingIt = wingItState.wing_it || false;
+        const requestBody = {
+            tracks: selectedTracks,
+            force_download_all: forceDownloadAll || isWingIt,
+            wing_it: isWingIt,
+        };
+
+        // If this is an artist album download, use album name and include full context
+        // Match 'artist_album_', 'enhanced_search_album_', 'discover_album_', and 'seasonal_album_' prefixes
+        // Note: 'enhanced_search_track_' is excluded — single track search results use singles context
+        const _isAlbumContext = playlistId.startsWith('artist_album_') || playlistId.startsWith('enhanced_search_album_') || playlistId.startsWith('discover_album_') || playlistId.startsWith('seasonal_album_') || playlistId.startsWith('spotify_library_') || playlistId.startsWith('issue_download_') || playlistId.startsWith('library_redownload_') || playlistId.startsWith('beatport_release_');
+        const _isSearchTrack = playlistId.startsWith('enhanced_search_track_') || playlistId.startsWith('gsearch_track_');
+        if (_isAlbumContext || _isSearchTrack) {
+            requestBody.playlist_name = process.album?.name || process.playlist.name;
+            requestBody.is_album_download = _isAlbumContext; // false for single track search results
+            requestBody.album_context = process.album;   // Full Spotify album object
+            requestBody.artist_context = process.artist; // Full Spotify artist object
+            console.log(`🎵 [${_isAlbumContext ? 'Album' : 'Single Track'}] Sending context: ${process.album?.name} by ${process.artist?.name}`);
+        } else {
+            // For playlists/wishlists, use the virtual playlist name
+            requestBody.playlist_name = process.playlist.name;
+            // Add playlist folder mode flag for sync page playlists
+            requestBody.playlist_folder_mode = playlistFolderMode;
+            if (playlistFolderMode) {
+                console.log(`📁 [Playlist Folder] Enabled for playlist: ${process.playlist.name}`);
+            }
+        }
+
+        const response = await fetch(`/api/playlists/${playlistId}/start-missing-process`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestBody)
+        });
+
+        const data = await response.json();
+        if (!data.success) {
+            // Special handling for rate limit
+            if (response.status === 429) {
+                throw new Error(`${data.error} Try closing some other download processes first.`);
+            }
+            throw new Error(data.error);
+        }
+
+        process.batchId = data.batch_id;
+
+        // Update Beatport backend state with download_process_id now that we have the batchId
+        if (playlistId.startsWith('beatport_')) {
+            const urlHash = playlistId.replace('beatport_', '');
+            const state = youtubePlaylistStates[urlHash];
+            if (state && state.is_beatport_playlist) {
+                const chartHash = state.beatport_chart_hash || urlHash;
+                try {
+                    fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            phase: 'downloading',
+                            download_process_id: data.batch_id
+                        })
+                    });
+                    console.log(`🔄 Updated Beatport backend with download_process_id: ${data.batch_id}`);
+                } catch (error) {
+                    console.warn('⚠️ Error updating Beatport backend with download_process_id:', error);
+                }
+            }
+        }
+
+        // Update ListenBrainz backend state with download_process_id and convertedSpotifyPlaylistId
+        if (playlistId.startsWith('listenbrainz_')) {
+            const playlistMbid = playlistId.replace('listenbrainz_', '');
+            const state = listenbrainzPlaylistStates[playlistMbid];
+            if (state) {
+                // Store in frontend state
+                state.download_process_id = data.batch_id;
+                state.convertedSpotifyPlaylistId = playlistId;
+
+                // Update backend state
+                try {
+                    fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            phase: 'downloading',
+                            download_process_id: data.batch_id,
+                            converted_spotify_playlist_id: playlistId
+                        })
+                    });
+                    console.log(`🔄 Updated ListenBrainz backend with download_process_id: ${data.batch_id}`);
+                } catch (error) {
+                    console.warn('⚠️ Error updating ListenBrainz backend with download_process_id:', error);
+                }
+            }
+        }
+
+        startModalDownloadPolling(playlistId);
+    } catch (error) {
+        showToast(`Failed to start process: ${error.message}`, 'error');
+        process.status = 'cancelled';
+
+        // Reset button states on error
+        const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+        const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+        const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+        if (beginBtn) beginBtn.style.display = 'inline-block';
+        if (cancelBtn) cancelBtn.style.display = 'none';
+        if (wishlistBtn) wishlistBtn.style.display = 'inline-block';
+
+        // Show the force download toggle again
+        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+        if (forceToggleContainer) {
+            forceToggleContainer.style.display = 'flex';
+        }
+
+        cleanupDownloadProcess(playlistId);
+    }
+}
+
+
+function updateTrackAnalysisResults(playlistId, results) {
+    // Update match results for all rows (tracks are now pre-populated)
+    for (const result of results) {
+        const matchElement = document.getElementById(`match-${playlistId}-${result.track_index}`);
+        if (matchElement) {
+            matchElement.textContent = result.found ? '✅ Found' : '❌ Missing';
+            matchElement.className = `track-match-status ${result.found ? 'match-found' : 'match-missing'}`;
+        }
+    }
+}
+
+
+
+// ============================================================================
+// GLOBAL BATCHED POLLING SYSTEM - Optimized for multiple concurrent modals
+// ============================================================================
+
+let globalDownloadStatusPoller = null;
+let globalPollingFailureCount = 0; // Track consecutive failures for exponential backoff
+let globalPollingBaseInterval = 2000; // Base polling interval in ms - MATCHES sync.py exactly
+
+function startGlobalDownloadPolling() {
+    // Always run HTTP polling as a fallback — WebSocket connections can silently
+    // stop delivering messages (room subscription lost, server emit error, proxy
+    // timeout) without triggering a disconnect event. The 2-second poll is cheap
+    // (single batched request) and ensures modals never go stale.
+    if (globalDownloadStatusPoller) {
+        console.debug('🔄 [Global Polling] Already running, skipping start');
+        return; // Prevent duplicate pollers
+    }
+
+    console.log('🔄 [Global Polling] Starting batched download status polling');
+
+    globalDownloadStatusPoller = setInterval(async () => {
+        if (document.hidden) return; // Skip polling when tab is not visible
+        // Get all active processes that need polling
+        const activeBatchIds = [];
+        const batchToPlaylistMap = {};
+        let hasOpenWishlistModal = false;
+
+        Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+            // Include running AND recently-completed batches — ensures late task
+            // status updates still reach the modal so rows don't freeze mid-download
+            if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+                activeBatchIds.push(process.batchId);
+                batchToPlaylistMap[process.batchId] = playlistId;
+            }
+
+            // Check if there's an open wishlist modal (visible and idle/waiting)
+            if (playlistId === 'wishlist' && process.modalElement &&
+                process.modalElement.style.display === 'flex' &&
+                (!process.batchId || process.status !== 'running')) {
+                hasOpenWishlistModal = true;
+            }
+        });
+
+        // Special handling for open wishlist modal - check for new auto-processing
+        if (hasOpenWishlistModal) {
+            try {
+                const response = await fetch('/api/active-processes');
+                if (response.ok) {
+                    const data = await response.json();
+                    const processes = data.active_processes || [];
+                    const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
+
+                    if (serverWishlistProcess) {
+                        console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
+                        await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
+                    }
+                }
+            } catch (error) {
+                console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
+            }
+        }
+
+        if (activeBatchIds.length === 0) {
+            console.debug('📊 [Global Polling] No active processes, continuing polling');
+            return;
+        }
+
+        try {
+            // Single batched API call for all active processes
+            const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
+            const response = await fetch(`/api/download_status/batch?${queryParams}`);
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
+
+            // Process each batch's status data using existing logic
+            Object.entries(data.batches).forEach(([batchId, statusData]) => {
+                const playlistId = batchToPlaylistMap[batchId];
+                if (!playlistId || statusData.error) {
+                    if (statusData.error) {
+                        console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
+                    }
+                    return;
+                }
+
+                // Use existing modal update logic - zero changes needed!
+                processModalStatusUpdate(playlistId, statusData);
+            });
+
+            // ENHANCED: Reset failure count on successful polling
+            globalPollingFailureCount = 0;
+
+        } catch (error) {
+            console.error('❌ [Global Polling] Batched request failed:', error);
+
+            // ENHANCED: Implement exponential backoff on failure
+            globalPollingFailureCount++;
+
+            if (globalPollingFailureCount >= 5) {
+                console.error(`🚨 [Global Polling] ${globalPollingFailureCount} consecutive failures, continuing with backoff`);
+                // Don't stop polling - just continue with exponential backoff
+            }
+
+            // Exponential backoff: increase interval temporarily
+            const backoffInterval = Math.min(globalPollingBaseInterval * Math.pow(2, globalPollingFailureCount - 1), 8000);
+            console.warn(`⚠️ [Global Polling] Failure ${globalPollingFailureCount}/5, backing off to ${backoffInterval}ms`);
+
+            // Temporarily adjust the polling interval
+            if (globalDownloadStatusPoller) {
+                clearInterval(globalDownloadStatusPoller);
+                globalDownloadStatusPoller = null;
+
+                // Restart with backoff interval
+                setTimeout(() => {
+                    if (Object.keys(activeDownloadProcesses).length > 0) {
+                        startGlobalDownloadPollingWithInterval(backoffInterval);
+                    }
+                }, backoffInterval);
+            }
+        }
+    }, globalPollingBaseInterval); // Use base interval initially
+}
+
+function startGlobalDownloadPollingWithInterval(interval) {
+    if (globalDownloadStatusPoller) {
+        console.debug('🔄 [Global Polling] Already running, skipping start with interval');
+        return;
+    }
+
+    console.log(`🔄 [Global Polling] Starting with interval ${interval}ms`);
+
+    // Use the exact same logic as startGlobalDownloadPolling but with custom interval
+    globalDownloadStatusPoller = setInterval(async () => {
+        const activeBatchIds = [];
+        const batchToPlaylistMap = {};
+        let hasOpenWishlistModal = false;
+
+        Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
+            if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
+                activeBatchIds.push(process.batchId);
+                batchToPlaylistMap[process.batchId] = playlistId;
+            }
+
+            // Check if there's an open wishlist modal (visible and idle/waiting)
+            if (playlistId === 'wishlist' && process.modalElement &&
+                process.modalElement.style.display === 'flex' &&
+                (!process.batchId || process.status !== 'running')) {
+                hasOpenWishlistModal = true;
+            }
+        });
+
+        // Special handling for open wishlist modal - check for new auto-processing
+        if (hasOpenWishlistModal) {
+            try {
+                const response = await fetch('/api/active-processes');
+                if (response.ok) {
+                    const data = await response.json();
+                    const processes = data.active_processes || [];
+                    const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
+
+                    if (serverWishlistProcess) {
+                        console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
+                        await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
+                    }
+                }
+            } catch (error) {
+                console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
+            }
+        }
+
+        if (activeBatchIds.length === 0) {
+            console.debug('📊 [Global Polling] No active processes, continuing polling');
+            return;
+        }
+
+        try {
+            const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
+            const response = await fetch(`/api/download_status/batch?${queryParams}`);
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
+
+            Object.entries(data.batches).forEach(([batchId, statusData]) => {
+                const playlistId = batchToPlaylistMap[batchId];
+                if (!playlistId || statusData.error) {
+                    if (statusData.error) {
+                        console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
+                    }
+                    return;
+                }
+                processModalStatusUpdate(playlistId, statusData);
+            });
+
+            // Success - reset to normal interval if we were backing off
+            globalPollingFailureCount = 0;
+            if (interval !== globalPollingBaseInterval) {
+                console.log('✅ [Global Polling] Recovered from backoff, returning to normal interval');
+                clearInterval(globalDownloadStatusPoller);
+                globalDownloadStatusPoller = null;
+                startGlobalDownloadPolling(); // Restart with normal interval
+            }
+
+        } catch (error) {
+            console.error('❌ [Global Polling] Request failed:', error);
+            globalPollingFailureCount++;
+
+            if (globalPollingFailureCount >= 5) {
+                console.error(`🚨 [Global Polling] Too many failures, continuing with backoff`);
+                // Don't stop polling - just continue with exponential backoff
+            }
+        }
+    }, interval);
+}
+
+function stopGlobalDownloadPolling() {
+    if (globalDownloadStatusPoller) {
+        console.log('🛑 [Global Polling] Stopping batched download status polling');
+        clearInterval(globalDownloadStatusPoller);
+        globalDownloadStatusPoller = null;
+    }
+}
+
+// --- Error tooltip for failed/cancelled downloads (fixed-position, escapes overflow) ---
+function _getErrorTooltipPopup() {
+    let el = document.getElementById('error-tooltip-popup');
+    if (!el) {
+        el = document.createElement('div');
+        el.id = 'error-tooltip-popup';
+        document.body.appendChild(el);
+    }
+    return el;
+}
+
+function _hideErrorTooltip() {
+    const popup = document.getElementById('error-tooltip-popup');
+    if (popup) popup.classList.remove('visible');
+}
+
+function _ensureErrorTooltipListeners(statusEl) {
+    if (statusEl._errorTooltipBound) return;
+    statusEl._errorTooltipBound = true;
+    statusEl.addEventListener('mouseenter', function () {
+        const msg = this.dataset.errorMsg;
+        if (!msg || !this.offsetParent) return; // skip if element is hidden
+        const popup = _getErrorTooltipPopup();
+        popup.textContent = msg;
+        popup.classList.add('visible');
+        const rect = this.getBoundingClientRect();
+        const popupRect = popup.getBoundingClientRect();
+        let left = rect.left + rect.width / 2 - popupRect.width / 2;
+        let top = rect.top - popupRect.height - 10;
+        // Keep within viewport
+        if (left < 8) left = 8;
+        if (left + popupRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - popupRect.width;
+        if (top < 8) { top = rect.bottom + 10; } // flip below if no room above
+        popup.style.left = left + 'px';
+        popup.style.top = top + 'px';
+    });
+    statusEl.addEventListener('mouseleave', _hideErrorTooltip);
+
+    // Dismiss tooltip when the scrollable modal body scrolls
+    const scrollParent = statusEl.closest('.download-missing-modal-body');
+    if (scrollParent && !scrollParent._errorTooltipScrollBound) {
+        scrollParent._errorTooltipScrollBound = true;
+        scrollParent.addEventListener('scroll', _hideErrorTooltip, { passive: true });
+    }
+}
+
+function _ensureCandidatesClickListener(statusEl) {
+    if (statusEl._candidatesClickBound) return;
+    statusEl._candidatesClickBound = true;
+    statusEl.addEventListener('click', function (e) {
+        e.stopPropagation();
+        _hideErrorTooltip();
+        const taskId = this.dataset.taskId;
+        if (taskId) showCandidatesModal(taskId);
+    });
+}
+
+async function showCandidatesModal(taskId) {
+    try {
+        const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/candidates`);
+        if (!resp.ok) { console.error('Failed to fetch candidates:', resp.status); return; }
+        const data = await resp.json();
+        _renderCandidatesModal(data);
+    } catch (err) {
+        console.error('Error fetching candidates:', err);
+    }
+}
+
+function _renderCandidatesModal(data) {
+    let overlay = document.getElementById('candidates-modal-overlay');
+    if (overlay) overlay.remove();
+
+    const trackName = data.track_info?.name || 'Unknown Track';
+    const trackArtist = data.track_info?.artist || 'Unknown Artist';
+    const candidates = data.candidates || [];
+    const errorMsg = data.error_message || '';
+
+    const fmtSize = (bytes) => {
+        if (!bytes) return '-';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let s = bytes, u = 0;
+        while (s >= 1024 && u < units.length - 1) { s /= 1024; u++; }
+        return `${s.toFixed(1)} ${units[u]}`;
+    };
+    const fmtDur = (ms) => {
+        if (!ms) return '-';
+        const sec = Math.floor(ms / 1000);
+        return `${Math.floor(sec / 60)}:${(sec % 60).toString().padStart(2, '0')}`;
+    };
+
+    let tableRows = '';
+    if (candidates.length === 0) {
+        tableRows = `<tr><td colspan="7" style="text-align:center; color: rgba(255,255,255,0.5); padding: 30px;">
+            No candidates were found during search.</td></tr>`;
+    } else {
+        candidates.forEach((c, i) => {
+            const shortFile = c.filename ? c.filename.split(/[/\\]/).pop() : '-';
+            const qBadge = c.quality
+                ? `<span class="candidates-quality-badge candidates-quality-${c.quality.toLowerCase()}">${c.quality.toUpperCase()}</span>`
+                : '';
+            tableRows += `<tr>
+                <td class="candidates-col-index">${i + 1}</td>
+                <td class="candidates-col-file" title="${escapeHtml(c.filename || '')}">${escapeHtml(shortFile)}</td>
+                <td class="candidates-col-quality">${qBadge}${c.bitrate ? ` ${c.bitrate}kbps` : ''}</td>
+                <td class="candidates-col-size">${fmtSize(c.size)}</td>
+                <td class="candidates-col-duration">${fmtDur(c.duration)}</td>
+                <td class="candidates-col-user" title="Queue: ${c.queue_length || 0} | Slots: ${c.free_upload_slots || 0}">${escapeHtml(c.username || '-')}</td>
+                <td class="candidates-col-action"><button class="candidates-download-btn" data-index="${i}" title="Download this file">⬇</button></td>
+            </tr>`;
+        });
+    }
+
+    overlay = document.createElement('div');
+    overlay.id = 'candidates-modal-overlay';
+    overlay.className = 'candidates-modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) closeCandidatesModal(); };
+    overlay.innerHTML = `
+        <div class="candidates-modal">
+            <div class="candidates-modal-header">
+                <div>
+                    <h2 class="candidates-modal-title">Search Results</h2>
+                    <div class="candidates-modal-subtitle">${escapeHtml(trackName)} — ${escapeHtml(trackArtist)}</div>
+                </div>
+                <button class="candidates-modal-close" onclick="closeCandidatesModal()">&#x2715;</button>
+            </div>
+            <div class="candidates-modal-body">
+                ${errorMsg ? `<div class="candidates-error-summary">${escapeHtml(errorMsg)}</div>` : ''}
+                <div class="candidates-count">${candidates.length} candidate${candidates.length !== 1 ? 's' : ''} found${candidates.length > 0 ? ' but none passed filters' : ''}</div>
+                <div class="candidates-table-wrapper">
+                    <table class="candidates-table">
+                        <thead><tr>
+                            <th>#</th><th>File</th><th>Quality</th><th>Size</th><th>Duration</th><th>User</th><th></th>
+                        </tr></thead>
+                        <tbody>${tableRows}</tbody>
+                    </table>
+                </div>
+            </div>
+        </div>`;
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+
+    // Bind download buttons
+    overlay.querySelectorAll('.candidates-download-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const idx = parseInt(btn.dataset.index);
+            const c = candidates[idx];
+            if (c) downloadCandidate(data.task_id, c, trackName);
+        });
+    });
+}
+
+async function downloadCandidate(taskId, candidate, trackName) {
+    if (!await showConfirmDialog({ title: 'Download File', message: `Download this file as "${trackName}"?\n\n${candidate.filename?.split(/[/\\]/).pop() || 'Unknown file'}\nfrom ${candidate.username || 'Unknown user'}`, confirmText: 'Download' })) return;
+    try {
+        const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/download-candidate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(candidate)
+        });
+        const result = await resp.json();
+        if (result.success) {
+            closeCandidatesModal();
+            showToast(result.message || 'Download initiated', 'success');
+        } else {
+            showToast(`Failed: ${result.error}`, 'error');
+        }
+    } catch (err) {
+        console.error('Error initiating manual download:', err);
+        showToast('Failed to initiate download', 'error');
+    }
+}
+
+function closeCandidatesModal() {
+    const overlay = document.getElementById('candidates-modal-overlay');
+    if (overlay) {
+        overlay.classList.remove('visible');
+        setTimeout(() => overlay.remove(), 300);
+    }
+}
+
+function processModalStatusUpdate(playlistId, data) {
+    // This function contains ALL the existing polling logic from startModalDownloadPolling
+    // Extracted so it can be called from both individual and batched polling
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) {
+        console.debug(`⚠️ [Status Update] No process found for ${playlistId}, skipping update`);
+        return;
+    }
+
+    if (data.error) {
+        console.error(`❌ [Status Update] Error for ${playlistId}: ${data.error}`);
+        return;
+    }
+
+    // ENHANCED: Validate response data to prevent UI corruption
+    if (!data || typeof data !== 'object') {
+        console.error(`❌ [Status Update] Invalid data for ${playlistId}:`, data);
+        return;
+    }
+
+    // ENHANCED: Validate task data structure
+    if (data.tasks && !Array.isArray(data.tasks)) {
+        console.error(`❌ [Status Update] Invalid tasks data for ${playlistId} - not an array:`, data.tasks);
+        return;
+    }
+
+    console.debug(`📊 [Status Update] Processing update for ${playlistId}: phase=${data.phase}, tasks=${(data.tasks || []).length}`);
+
+    // Note: Wishlist modal visibility is now managed by handleWishlistButtonClick() only
+    // Auto-show logic has been simplified to prevent conflicts
+
+    if (data.phase === 'analysis') {
+        const progress = data.analysis_progress;
+        const percent = progress.total > 0 ? (progress.processed / progress.total) * 100 : 0;
+        document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = `${percent}%`;
+        document.getElementById(`analysis-progress-text-${playlistId}`).textContent =
+            `${progress.processed}/${progress.total} tracks analyzed`;
+        if (data.analysis_results) {
+            updateTrackAnalysisResults(playlistId, data.analysis_results);
+            // Update stats when we first get analysis results
+            const foundCount = data.analysis_results.filter(r => r.found).length;
+            const missingCount = data.analysis_results.filter(r => !r.found).length;
+            document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
+            document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
+
+            // Auto-save M3U file for playlists after analysis
+            autoSavePlaylistM3U(playlistId);
+        }
+    } else if (data.phase === 'downloading' || data.phase === 'complete' || data.phase === 'error') {
+        console.debug(`📊 [Status Update] Processing ${data.phase} phase for playlistId: ${playlistId}, tasks: ${(data.tasks || []).length}`);
+
+        if (document.getElementById(`analysis-progress-fill-${playlistId}`).style.width !== '100%') {
+            document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = '100%';
+            document.getElementById(`analysis-progress-text-${playlistId}`).textContent = 'Analysis complete!';
+            if (data.analysis_results) {
+                updateTrackAnalysisResults(playlistId, data.analysis_results);
+                const foundCount = data.analysis_results.filter(r => r.found).length;
+                const missingCount = data.analysis_results.filter(r => !r.found).length;
+                document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
+                document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
+            }
+        }
+        const missingTracks = (data.analysis_results || []).filter(r => !r.found);
+        const missingCount = missingTracks.length;
+        let completedCount = 0;
+        let failedOrCancelledCount = 0;
+        let notFoundCount = 0;
+
+        // Verify modal exists before processing tasks
+        const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+        if (!modal) {
+            console.error(`❌ [Status Update] Modal not found: download-missing-modal-${playlistId}`);
+            return;
+        }
+
+        // Update download progress text immediately when entering downloading phase
+        // This handles the case where tasks array is empty or still being populated
+        const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
+        if (data.phase === 'downloading' && missingCount > 0 && (!data.tasks || data.tasks.length === 0)) {
+            // No tasks yet, but we're in downloading phase with missing tracks
+            if (downloadProgressText) {
+                downloadProgressText.textContent = 'Preparing downloads...';
+                console.log(`📥 [Download Phase] Preparing ${missingCount} downloads...`);
+            }
+        }
+
+        (data.tasks || []).forEach(task => {
+            const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
+            if (!row) {
+                console.debug(`❌ [Status Update] Row not found for playlistId: ${playlistId}, track_index: ${task.track_index}`);
+                return;
+            }
+
+            // V2 SYSTEM: Check for persistent cancel state from backend
+            const isV2Task = task.playlist_id !== undefined; // V2 tasks have playlist_id
+            const cancelRequested = task.cancel_requested || false;
+            const uiState = task.ui_state || 'normal';
+
+            // Legacy protection for old system compatibility
+            if (row.dataset.locallyCancelled === 'true' && !isV2Task) {
+                failedOrCancelledCount++;
+                return; // Only skip for legacy system tasks
+            }
+
+            // Mark row with V2 system info
+            if (isV2Task) {
+                row.dataset.useV2System = 'true';
+                row.dataset.cancelRequested = cancelRequested.toString();
+                row.dataset.uiState = uiState;
+            }
+
+            row.dataset.taskId = task.task_id;
+            const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
+            const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
+
+            let statusText = '';
+            // V2 SYSTEM: Handle UI state override for cancelling tasks
+            if (isV2Task && uiState === 'cancelling' && task.status !== 'cancelled') {
+                statusText = '🔄 Cancelling...';
+            } else {
+                switch (task.status) {
+                    case 'pending': statusText = '⏸️ Pending'; break;
+                    case 'searching': statusText = '🔍 Searching...'; break;
+                    case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
+                    case 'post_processing': statusText = '⌛ Processing...'; break;
+                    case 'completed': statusText = '✅ Completed'; completedCount++; break;
+                    case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
+                    case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
+                    case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
+                    default: statusText = `⚪ ${task.status}`; break;
+                }
+            }
+
+            if (statusEl) {
+                statusEl.classList.remove('has-error-tooltip');
+                statusEl.removeAttribute('title');
+                statusEl.removeAttribute('data-error-msg');
+                statusEl.textContent = statusText;
+
+                if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
+                    statusEl.classList.add('has-error-tooltip');
+                    statusEl.dataset.errorMsg = task.error_message;
+                    _ensureErrorTooltipListeners(statusEl);
+                }
+                // Make not_found and failed cells clickable to review search candidates
+                if ((task.status === 'not_found' || task.status === 'failed') && task.has_candidates) {
+                    statusEl.classList.add('has-candidates');
+                    statusEl.dataset.taskId = task.task_id;
+                    _ensureCandidatesClickListener(statusEl);
+                }
+                console.debug(`✅ [Status Update] Updated track ${task.track_index} to: ${statusText}${isV2Task ? ' (V2)' : ''}`);
+            } else {
+                console.warn(`❌ [Status Update] Status element not found: download-${playlistId}-${task.track_index}`);
+            }
+
+            // V2 SYSTEM: Smart button management with persistent state awareness
+            if (actionsEl && !['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
+                // Check if we're in a cancelling state
+                if (isV2Task && uiState === 'cancelling') {
+                    actionsEl.innerHTML = '<span style="color: #666;">Cancelling...</span>';
+                } else {
+                    // Create V2 cancel button for all active tasks
+                    const onclickHandler = isV2Task ? 'cancelTrackDownloadV2' : 'cancelTrackDownload';
+                    actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="${onclickHandler}('${playlistId}', ${task.track_index})">×</button>`;
+                }
+            } else if (actionsEl && ['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
+                actionsEl.innerHTML = '-'; // No actions available for terminal or processing states
+            }
+        });
+
+        // ENHANCED: Validate worker counts from server data
+        const serverActiveWorkers = data.active_count || 0;
+        const maxWorkers = data.max_concurrent || 3;
+
+        // V2 SYSTEM: Simplified worker counting - backend is authoritative
+        // Count active tasks, excluding locally cancelled legacy tasks only
+        const clientActiveWorkers = (data.tasks || []).filter(task => {
+            const row = document.querySelector(`tr[data-track-index="${task.track_index}"]`);
+            const isLegacyCancelled = row && row.dataset.locallyCancelled === 'true' && !row.dataset.useV2System;
+            return ['searching', 'downloading', 'queued'].includes(task.status) && !isLegacyCancelled;
+        }).length;
+
+        // Log discrepancies for debugging
+        if (serverActiveWorkers !== clientActiveWorkers) {
+            console.warn(`🔍 [Worker Validation] ${playlistId}: server reports ${serverActiveWorkers} active, client sees ${clientActiveWorkers} active tasks`);
+
+            // If server reports 0 but client sees active tasks, this might indicate ghost workers were fixed
+            if (serverActiveWorkers === 0 && clientActiveWorkers > 0) {
+                console.warn(`🚨 [Worker Validation] Server reports 0 workers but client sees ${clientActiveWorkers} active tasks - potential UI desync`);
+            }
+        }
+
+        console.debug(`📊 [Worker Status] ${playlistId}: ${serverActiveWorkers}/${maxWorkers} active workers, ${clientActiveWorkers} client-side active tasks`);
+
+        const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
+        const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 0;
+        document.getElementById(`download-progress-fill-${playlistId}`).style.width = `${progressPercent}%`;
+        document.getElementById(`download-progress-text-${playlistId}`).textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
+        document.getElementById(`stat-downloaded-${playlistId}`).textContent = completedCount;
+
+        // Auto-save M3U file once when all downloads finish (not on every poll cycle).
+        // Previously this fired on EVERY 2-second poll when completedCount > 0, flooding
+        // the server with heavyweight M3U generation requests that exhausted Flask threads
+        // and caused the batch status endpoint to hang — killing the poller.
+
+        // CLIENT-SIDE COMPLETION: Only complete when ALL task rows in the UI reflect a terminal state.
+        // Using totalFinished (derived from DOM updates in THIS render pass) prevents premature
+        // completion when the server sends phase='complete' before all rows have been updated.
+        const allTracksFinished = totalFinished >= missingCount && missingCount > 0 && totalFinished > 0;
+        // Extra guard: require the server to also report no active tasks
+        const serverHasActiveWork = (data.tasks || []).some(t =>
+            ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(t.status));
+        if (allTracksFinished && !serverHasActiveWork && process.status !== 'complete') {
+            console.log(`🎯 [Client Completion] All ${totalFinished}/${missingCount} tracks finished - completing modal locally`);
+
+            // Hide cancel button and mark as complete
+            document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+            process.status = 'complete';
+            updatePlaylistCardUI(playlistId);
+
+            // Save M3U once on completion (not during progress polling)
+            if (completedCount > 0) {
+                autoSavePlaylistM3U(playlistId);
+            }
+
+            // Show the force download toggle again
+            const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+            if (forceToggleContainer) {
+                forceToggleContainer.style.display = 'flex';
+            }
+
+            // Set album to downloaded status if this is an artist album
+            if (playlistId.startsWith('artist_album_')) {
+                const parts = playlistId.split('_');
+                if (parts.length >= 4) {
+                    const albumId = parts.slice(3).join('_');
+                    setTimeout(() => setAlbumDownloadedStatus(albumId), 500); // Small delay to ensure UI updates
+                }
+            }
+
+            // Update mirrored playlist card phase on client-side completion
+            if (playlistId.startsWith('youtube_')) {
+                const urlHash = playlistId.replace('youtube_', '');
+                if (urlHash.startsWith('mirrored_')) {
+                    updateMirroredCardPhase(urlHash, 'download_complete');
+                }
+            }
+
+            // Auto-save final M3U file for playlists
+            autoSavePlaylistM3U(playlistId);
+
+            // Show completion message
+            let completionParts = [`${completedCount} downloaded`];
+            if (notFoundCount > 0) completionParts.push(`${notFoundCount} not found`);
+            if (failedOrCancelledCount > 0) completionParts.push(`${failedOrCancelledCount} failed`);
+            const completionMessage = `Download complete! ${completionParts.join(', ')}.`;
+            showToast(completionMessage, 'success');
+
+            // Refresh server playlists tab so it reflects newly synced tracks
+            if (typeof loadServerPlaylists === 'function') {
+                setTimeout(() => loadServerPlaylists(), 2000);
+            }
+
+            // Auto-close wishlist modal when completed (for auto-processing)
+            if (playlistId === 'wishlist') {
+                console.log('🔄 [Auto-Wishlist] Auto-closing completed wishlist modal to enable next cycle');
+                setTimeout(() => {
+                    closeDownloadMissingModal(playlistId);
+                }, 3000); // 3-second delay to show completion message
+            }
+
+            // Check if any other processes still need polling
+            checkAndCleanupGlobalPolling();
+
+            return; // Skip waiting for backend signal
+        }
+
+        // FIXED: Only trigger completion logic when backend actually reports batch as complete
+        // Don't assume completion based on task counts - let backend determine when truly complete
+        if (data.phase === 'complete' || data.phase === 'error') {
+            // Enhanced check for background auto-processing for wishlist
+            const isWishlist = (playlistId === 'wishlist');
+            const isModalHidden = (process.modalElement && process.modalElement.style.display === 'none');
+            const isAutoInitiated = data.auto_initiated || false; // Server indicates if batch was auto-started
+            const isBackgroundWishlist = isWishlist && (isModalHidden || isAutoInitiated);
+
+            // Note: Auto-show logic removed - wishlist modal visibility managed by user interaction only
+
+            if (data.phase === 'cancelled') {
+                process.status = 'cancelled';
+
+                // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on cancel
+                if (playlistId.startsWith('youtube_')) {
+                    const urlHash = playlistId.replace('youtube_', '');
+                    updateYouTubeCardPhase(urlHash, 'discovered');
+                    if (urlHash.startsWith('mirrored_')) {
+                        updateMirroredCardPhase(urlHash, 'discovered');
+                    }
+                }
+
+                showToast(`Process cancelled for ${process.playlist.name}.`, 'info');
+            } else if (data.phase === 'error') {
+                process.status = 'complete'; // Treat as complete to allow cleanup
+                updatePlaylistCardUI(playlistId); // Update card to show ready for review
+
+                // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on error
+                if (playlistId.startsWith('youtube_')) {
+                    const urlHash = playlistId.replace('youtube_', '');
+                    updateYouTubeCardPhase(urlHash, 'discovered');
+                    if (urlHash.startsWith('mirrored_')) {
+                        updateMirroredCardPhase(urlHash, 'discovered');
+                    }
+                }
+
+                showToast(`Process for ${process.playlist.name} failed!`, 'error');
+            } else {
+                process.status = 'complete';
+                updatePlaylistCardUI(playlistId); // Update card to show ready for review
+
+                // Update YouTube playlist phase to 'download_complete' if this is a YouTube playlist
+                if (playlistId.startsWith('youtube_')) {
+                    const urlHash = playlistId.replace('youtube_', '');
+                    updateYouTubeCardPhase(urlHash, 'download_complete');
+                    if (urlHash.startsWith('mirrored_')) {
+                        updateMirroredCardPhase(urlHash, 'download_complete');
+                    }
+                }
+
+                // Update Tidal playlist phase to 'download_complete' if this is a Tidal playlist
+                if (playlistId.startsWith('tidal_')) {
+                    const tidalPlaylistId = playlistId.replace('tidal_', '');
+                    if (tidalPlaylistStates[tidalPlaylistId]) {
+                        tidalPlaylistStates[tidalPlaylistId].phase = 'download_complete';
+                        // Store the download process ID for potential modal rehydration
+                        tidalPlaylistStates[tidalPlaylistId].download_process_id = process.batchId;
+                        updateTidalCardPhase(tidalPlaylistId, 'download_complete');
+                        console.log(`✅ [Status Complete] Updated Tidal playlist ${tidalPlaylistId} to download_complete phase`);
+                    }
+                }
+
+                // Update Beatport chart phase to 'download_complete' if this is a Beatport chart
+                if (playlistId.startsWith('beatport_')) {
+                    const urlHash = playlistId.replace('beatport_', '');
+                    const state = youtubePlaylistStates[urlHash];
+
+                    if (state && state.is_beatport_playlist) {
+                        const chartHash = state.beatport_chart_hash || urlHash;
+
+                        // Update frontend states
+                        state.phase = 'download_complete';
+                        state.download_process_id = process.batchId;
+                        if (beatportChartStates[chartHash]) {
+                            beatportChartStates[chartHash].phase = 'download_complete';
+                        }
+
+                        // Update card UI
+                        updateBeatportCardPhase(chartHash, 'download_complete');
+
+                        // Update backend state
+                        try {
+                            fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({
+                                    phase: 'download_complete',
+                                    download_process_id: process.batchId
+                                })
+                            });
+                        } catch (error) {
+                            console.warn('⚠️ Error updating backend Beatport phase to download_complete:', error);
+                        }
+
+                        console.log(`✅ [Status Complete] Updated Beatport chart ${chartHash} to download_complete phase`);
+                    }
+                }
+
+                // Handle background wishlist processing completion specially
+                if (isBackgroundWishlist) {
+                    console.log(`🎉 Background wishlist processing complete: ${completedCount} downloaded, ${notFoundCount} not found, ${failedOrCancelledCount} failed`);
+
+                    // Reset modal to idle state to prevent "complete" phase disruption
+                    setTimeout(() => {
+                        resetWishlistModalToIdleState();
+                        // Server-side auto-processing will handle next cycle automatically
+                    }, 500);
+
+                    return; // Skip normal completion handling
+                }
+
+                // Show completion summary with wishlist stats (matching sync.py behavior)
+                let completionMessage = `Process complete for ${process.playlist.name}!`;
+                let messageType = 'success';
+
+                // Check for wishlist summary from backend (added when failed/cancelled tracks are processed)
+                if (data.wishlist_summary) {
+                    const summary = data.wishlist_summary;
+                    let summaryParts = [`Downloaded: ${completedCount}`];
+                    if (notFoundCount > 0) summaryParts.push(`Not Found: ${notFoundCount}`);
+                    if (failedOrCancelledCount > 0) summaryParts.push(`Failed: ${failedOrCancelledCount}`);
+                    completionMessage = `Download process complete! ${summaryParts.join(', ')}.`;
+
+                    if (summary.tracks_added > 0) {
+                        completionMessage += ` Added ${summary.tracks_added} failed track${summary.tracks_added !== 1 ? 's' : ''} to wishlist for automatic retry.`;
+                    } else if (summary.total_failed > 0) {
+                        completionMessage += ` ${summary.total_failed} track${summary.total_failed !== 1 ? 's' : ''} could not be added to wishlist.`;
+                        messageType = 'warning';
+                    }
+                }
+
+                showToast(completionMessage, messageType);
+            }
+
+            document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
+
+            // Mark process as complete and trigger cleanup check
+            process.status = 'complete';
+            updatePlaylistCardUI(playlistId);
+
+            // Check if any other processes still need polling
+            checkAndCleanupGlobalPolling();
+        }
+    }
+}
+
+function checkAndCleanupGlobalPolling() {
+    // Check if any processes still need polling
+    const hasActivePolling = Object.values(activeDownloadProcesses)
+        .some(p => p.batchId && p.status === 'running');
+
+    if (!hasActivePolling) {
+        console.debug('🧹 [Cleanup] No more active processes, continuing polling');
+        // Keep polling active - no need to stop
+    }
+}
+
+// LEGACY FUNCTION: Keep for backward compatibility, but now uses global polling
+function startModalDownloadPolling(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process || !process.batchId) return;
+
+    console.log(`🔄 [Legacy Polling] Starting polling for ${playlistId}, delegating to global poller`);
+
+    // Clear any existing individual poller (cleanup)
+    if (process.poller) {
+        clearInterval(process.poller);
+        process.poller = null;
+    }
+
+    // Mark process as running to be picked up by global poller
+    process.status = 'running';
+
+    // Start global polling if not already running
+    startGlobalDownloadPolling();
+
+    // Create dummy poller for backward compatibility with cleanup functions
+    ensureLegacyCompatibility(playlistId);
+}
+
+// For backward compatibility with cleanup functions that expect process.poller
+// Creates a dummy poller that will be cleaned up by the existing cleanup logic
+function createLegacyPoller(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    // Create a dummy interval that just checks if the process is still active
+    // This ensures existing cleanup logic that calls clearInterval(process.poller) works
+    process.poller = setInterval(() => {
+        // This dummy poller doesn't do anything - global poller handles updates
+        if (!activeDownloadProcesses[playlistId] || process.status === 'complete') {
+            clearInterval(process.poller);
+            process.poller = null;
+            return;
+        }
+    }, 5000); // Very infrequent check, just for cleanup compatibility
+}
+
+// Call this to create the legacy poller after starting global polling
+function ensureLegacyCompatibility(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (process && !process.poller) {
+        createLegacyPoller(playlistId);
+    }
+}
+async function updateModalWithLiveDownloadProgress() {
+    try {
+        if (!currentDownloadBatchId) return;
+
+        // Fetch live download data from the downloads API
+        const response = await fetch('/api/downloads/status');
+        const downloadData = await response.json();
+
+        if (downloadData.error) return;
+
+        // Get all active and finished downloads
+        const allDownloads = { ...(downloadData.active || {}), ...(downloadData.finished || {}) };
+
+        // Update modal tracks that have active downloads
+        const modalRows = document.querySelectorAll('.download-missing-modal tr[data-track-index]');
+
+        for (const row of modalRows) {
+            const taskId = row.dataset.taskId;
+            if (!taskId) continue;
+
+            // Find corresponding download by checking if filename/title matches
+            const trackName = row.querySelector('.track-name')?.textContent?.trim();
+            if (!trackName) continue;
+
+            // Search for matching download
+            for (const [downloadId, downloadInfo] of Object.entries(allDownloads)) {
+                // Extract display title from filename (handle YouTube encoding)
+                let downloadTitle = '';
+                if (downloadInfo.filename) {
+                    if ((downloadInfo.username === 'youtube' || downloadInfo.username === 'tidal' || downloadInfo.username === 'qobuz' || downloadInfo.username === 'hifi') && downloadInfo.filename.includes('||')) {
+                        const parts = downloadInfo.filename.split('||');
+                        downloadTitle = parts[1] || parts[0];
+                    } else {
+                        downloadTitle = downloadInfo.filename.split(/[\\/]/).pop();
+                    }
+                }
+
+                // Simple matching - could be improved with better logic
+                if (downloadTitle && trackName && (
+                    downloadTitle.toLowerCase().includes(trackName.toLowerCase()) ||
+                    trackName.toLowerCase().includes(downloadTitle.toLowerCase())
+                )) {
+                    // Update the track with live download progress
+                    const statusElement = row.querySelector('.track-download-status');
+                    const progress = downloadInfo.percentComplete || 0;
+                    const state = downloadInfo.state || '';
+
+                    if (statusElement && state.includes('InProgress') && progress > 0) {
+                        statusElement.textContent = `⏬ Downloading... ${Math.round(progress)}%`;
+                        statusElement.className = 'track-download-status download-downloading';
+                    } else if (statusElement && (state.includes('Completed') || state.includes('Succeeded'))) {
+                        statusElement.textContent = '✅ Completed';
+                        statusElement.className = 'track-download-status download-complete';
+                    }
+
+                    break; // Found a match, stop searching
+                }
+            }
+        }
+
+    } catch (error) {
+        // Silent fail - don't spam console during normal operation
+    }
+}
+
+function toggleAllTrackSelections(playlistId, checked) {
+    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+    if (!tbody) return;
+    const checkboxes = tbody.querySelectorAll('.track-select-cb');
+    checkboxes.forEach(cb => { cb.checked = checked; });
+    updateTrackSelectionCount(playlistId);
+}
+
+function updateTrackSelectionCount(playlistId) {
+    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+    if (!tbody) return;
+    const allCbs = tbody.querySelectorAll('.track-select-cb');
+    const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
+    const total = allCbs.length;
+    const selected = checkedCbs.length;
+
+    // Update selection count label
+    const countLabel = document.getElementById(`track-selection-count-${playlistId}`);
+    if (countLabel) {
+        countLabel.textContent = `${selected} / ${total} tracks selected`;
+    }
+
+    // Update select-all checkbox state
+    const selectAll = document.getElementById(`select-all-${playlistId}`);
+    if (selectAll) {
+        selectAll.checked = selected === total;
+        selectAll.indeterminate = selected > 0 && selected < total;
+    }
+
+    // Update row dimming
+    allCbs.forEach(cb => {
+        const row = cb.closest('tr');
+        if (row) row.classList.toggle('track-deselected', !cb.checked);
+    });
+
+    // Disable Begin Analysis and Add to Wishlist buttons when 0 selected
+    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+    if (beginBtn) {
+        beginBtn.disabled = selected === 0;
+    }
+    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+    if (wishlistBtn) {
+        wishlistBtn.disabled = selected === 0;
+    }
+}
+
+async function cancelAllOperations(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    // Prevent multiple cancel all operations
+    if (process.cancellingAll) {
+        console.log(`⚠️ Cancel All already in progress for ${playlistId}`);
+        return;
+    }
+    process.cancellingAll = true;
+
+    console.log(`🚫 Cancel All clicked for playlist ${playlistId} - closing modal and cleaning up server`);
+
+    showToast('Cancelling all operations and closing modal...', 'info');
+
+    // Mark process as complete immediately so polling stops
+    process.status = 'complete';
+
+    // Stop any active polling
+    if (process.poller) {
+        clearInterval(process.poller);
+        process.poller = null;
+    }
+
+    // Tell server to stop starting new downloads and clean up the batch
+    if (process.batchId) {
+        try {
+            // Cancel the batch (stops new downloads from starting)
+            const cancelResponse = await fetch(`/api/playlists/${process.batchId}/cancel_batch`, {
+                method: 'POST'
+            });
+            if (cancelResponse.ok) {
+                const cancelData = await cancelResponse.json();
+                console.log(`✅ Server stopped new downloads for batch ${process.batchId}`);
+            }
+        } catch (error) {
+            console.warn('Error during server batch cancel:', error);
+        }
+    }
+
+    // Close the modal immediately - this will handle cleanup
+    closeDownloadMissingModal(playlistId);
+
+    showToast('Modal closed. Active downloads will finish in background.', 'success');
+}
+
+function resetToInitialState() {
+    // Reset UI
+    document.getElementById('begin-analysis-btn').style.display = 'inline-block';
+    document.getElementById('start-downloads-btn').style.display = 'none';
+    document.getElementById('cancel-all-btn').style.display = 'none';
+
+    // Reset progress bars
+    document.getElementById('analysis-progress-fill').style.width = '0%';
+    document.getElementById('download-progress-fill').style.width = '0%';
+    document.getElementById('analysis-progress-text').textContent = 'Ready to start';
+    document.getElementById('download-progress-text').textContent = 'Waiting for analysis';
+
+    // Reset stats
+    document.getElementById('stat-found').textContent = '-';
+    document.getElementById('stat-missing').textContent = '-';
+    document.getElementById('stat-downloaded').textContent = '0';
+
+    // Reset track table
+    const tbody = document.getElementById('download-tracks-tbody');
+    if (tbody) {
+        const rows = tbody.querySelectorAll('tr');
+        rows.forEach((row, index) => {
+            const matchElement = row.querySelector('.track-match-status');
+            const downloadElement = row.querySelector('.track-download-status');
+            const actionsElement = row.querySelector('.track-actions');
+
+            if (matchElement) {
+                matchElement.textContent = '🔍 Pending';
+                matchElement.className = 'track-match-status match-checking';
+            }
+            if (downloadElement) {
+                downloadElement.textContent = '-';
+                downloadElement.className = 'track-download-status';
+            }
+            if (actionsElement) {
+                actionsElement.textContent = '-';
+            }
+        });
+    }
+
+    // Reset state
+    activeAnalysisTaskId = null;
+    analysisResults = [];
+    missingTracks = [];
+}
+
+// ===============================
+// NEW ATOMIC CANCEL SYSTEM V2
+// ===============================
+
+async function cancelTrackDownloadV2(playlistId, trackIndex) {
+    /**
+     * NEW ATOMIC CANCEL SYSTEM V2
+     * 
+     * - No optimistic UI updates
+     * - Single API call handles everything atomically
+     * - Backend is single source of truth for all state
+     * - No race conditions or dual state management
+     */
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) {
+        console.warn(`❌ [Cancel V2] No process found for playlist: ${playlistId}`);
+        return;
+    }
+
+    const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
+    if (!row) {
+        console.warn(`❌ [Cancel V2] No row found for track index: ${trackIndex}`);
+        return;
+    }
+
+    // Check if already in cancelling state
+    const statusEl = document.getElementById(`download-${playlistId}-${trackIndex}`);
+    const currentStatus = statusEl ? statusEl.textContent : '';
+
+    if (currentStatus.includes('Cancelling') || currentStatus.includes('Cancelled')) {
+        console.log(`⚠️ [Cancel V2] Task already being cancelled or cancelled: ${currentStatus}`);
+        return;
+    }
+
+    console.log(`🎯 [Cancel V2] Starting atomic cancel: playlist=${playlistId}, track=${trackIndex}`);
+
+    // V2 SYSTEM: Set temporary UI state - will be confirmed by server
+    row.dataset.uiState = 'cancelling';
+
+    // Show loading state only - no optimistic "cancelled" state
+    if (statusEl) {
+        statusEl.textContent = '🔄 Cancelling...';
+    }
+
+    // Disable the cancel button to prevent double-clicks
+    const actionsEl = document.getElementById(`actions-${playlistId}-${trackIndex}`);
+    if (actionsEl) {
+        actionsEl.innerHTML = '<span style="color: #666;">Cancelling...</span>';
+    }
+
+    try {
+        const response = await fetch('/api/downloads/cancel_task_v2', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_id: playlistId,
+                track_index: trackIndex
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            console.log(`✅ [Cancel V2] Successfully cancelled: ${data.task_info.track_name}`);
+            showToast(`Cancelled "${data.task_info.track_name}" and added to wishlist.`, 'success');
+
+            // Let the status polling system update the UI with server truth
+            // No manual UI updates - backend is authoritative
+
+        } else {
+            console.error(`❌ [Cancel V2] Cancel failed: ${data.error}`);
+            showToast(`Cancel failed: ${data.error}`, 'error');
+
+            // Reset UI to previous state on failure
+            row.dataset.uiState = 'normal'; // Reset UI state
+            if (statusEl) {
+                statusEl.textContent = '❌ Cancel Failed';
+            }
+            if (actionsEl) {
+                actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="cancelTrackDownloadV2('${playlistId}', ${trackIndex})">×</button>`;
+            }
+        }
+
+    } catch (error) {
+        console.error(`❌ [Cancel V2] Network/API error:`, error);
+        showToast(`Cancel request failed: ${error.message}`, 'error');
+
+        // Reset UI on network error
+        row.dataset.uiState = 'normal'; // Reset UI state
+        if (statusEl) {
+            statusEl.textContent = '❌ Cancel Failed';
+        }
+        if (actionsEl) {
+            actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="cancelTrackDownloadV2('${playlistId}', ${trackIndex})">×</button>`;
+        }
+    }
+}
+
+// ===============================
+// LEGACY CANCEL SYSTEM (OLD)
+// ===============================
+
+async function cancelTrackDownload(playlistId, trackIndex) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
+    if (!row) return;
+
+    // Prevent double cancellation
+    if (row.dataset.locallyCancelled === 'true') {
+        return; // Already cancelled locally
+    }
+
+    const taskId = row.dataset.taskId;
+    if (!taskId) {
+        showToast('Task not started yet, cannot cancel.', 'warning');
+        return;
+    }
+
+    // UI update for immediate feedback - mark as cancelled FIRST to prevent race conditions
+    row.dataset.locallyCancelled = 'true';
+    document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelling...';
+    document.getElementById(`actions-${playlistId}-${trackIndex}`).innerHTML = '-';
+
+    try {
+        const response = await fetch('/api/downloads/cancel_task', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ task_id: taskId })
+        });
+        const data = await response.json();
+        if (data.success) {
+            // Update final UI state after successful cancellation
+            document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelled';
+            showToast('Download cancelled and added to wishlist.', 'info');
+        } else {
+            throw new Error(data.error);
+        }
+    } catch (error) {
+        // Reset UI state if cancellation failed
+        row.dataset.locallyCancelled = 'false';
+        document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '❌ Cancel Failed';
+        showToast(`Could not cancel task: ${error.message}`, 'error');
+    }
+}
+
+// Find and REPLACE the old startPlaylistSyncFromModal function
+async function startPlaylistSync(playlistId) {
+    const startTime = Date.now();
+    console.log(`🚀 [${new Date().toTimeString().split(' ')[0]}] Starting sync for playlist: ${playlistId}`);
+    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+    if (!playlist) {
+        console.error(`❌ Could not find playlist data for ID: ${playlistId}`);
+        showToast('Could not find playlist data.', 'error');
+        return;
+    }
+    console.log(`✅ Found playlist: ${playlist.name} with ${playlist.track_count || 'unknown'} tracks`);
+
+    // Check if already syncing to prevent duplicate syncs
+    if (activeSyncPollers[playlistId]) {
+        showToast('Sync already in progress for this playlist', 'warning');
+        return;
+    }
+
+    // Update button state immediately for user feedback
+    const syncBtn = document.getElementById(`sync-btn-${playlistId}`);
+    if (syncBtn) {
+        syncBtn.disabled = true;
+        syncBtn.textContent = '⏳ Syncing...';
+    }
+
+    // Ensure we have the full track list before starting
+    let tracks = playlistTrackCache[playlistId];
+    if (!tracks) {
+        const trackFetchStart = Date.now();
+        console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Cache miss - fetching tracks for playlist ${playlistId}`);
+        try {
+            // Use the right endpoint based on playlist source
+            const fetchUrl = playlistId.startsWith('deezer_arl_')
+                ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
+                : `/api/spotify/playlist/${playlistId}`;
+            const response = await fetch(fetchUrl);
+            const fullPlaylist = await response.json();
+            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
+            tracks = fullPlaylist.tracks;
+            playlistTrackCache[playlistId] = tracks; // Cache it
+            const trackFetchTime = Date.now() - trackFetchStart;
+            console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Fetched and cached ${tracks.length} tracks (took ${trackFetchTime}ms)`);
+        } catch (error) {
+            console.error(`❌ Failed to fetch tracks:`, error);
+            showToast(`Failed to fetch tracks for sync: ${error.message}`, 'error');
+            return;
+        }
+    } else {
+        console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Using cached tracks: ${tracks.length} tracks`);
+    }
+
+    // DON'T close the modal - let it show live progress like the GUI
+
+    try {
+        const syncStartTime = Date.now();
+        console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Making API call to /api/sync/start with ${tracks.length} tracks`);
+        const response = await fetch('/api/sync/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_id: playlist.id,
+                playlist_name: playlist.name,
+                tracks: tracks, // Send the full track list
+                image_url: playlist.image_url || ''
+            })
+        });
+
+        const syncRequestTime = Date.now() - syncStartTime;
+        console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response status: ${response.status} (took ${syncRequestTime}ms)`);
+        const data = await response.json();
+        console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response data:`, data);
+
+        if (!data.success) throw new Error(data.error);
+
+        const totalTime = Date.now() - startTime;
+        console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Sync started successfully for "${playlist.name}" (total time: ${totalTime}ms)`);
+        showToast(`Sync started for "${playlist.name}"`, 'success');
+
+        // Show initial sync state in modal if open
+        const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
+        if (modal && modal.style.display !== 'none') {
+            const statusDisplay = document.getElementById(`modal-sync-status-${playlist.id}`);
+            if (statusDisplay) {
+                statusDisplay.style.display = 'flex';
+                console.log(`📊 [${new Date().toTimeString().split(' ')[0]}] Showing modal sync status for ${playlist.id}`);
+            }
+        }
+
+        updateCardToSyncing(playlist.id, 0); // Initial state
+        startSyncPolling(playlist.id);
+
+    } catch (error) {
+        console.error(`❌ Failed to start sync:`, error);
+        showToast(`Failed to start sync: ${error.message}`, 'error');
+        updateCardToDefault(playlist.id);
+    }
+}
+
+// Add these new helper functions to script.js
+
+function startSyncPolling(playlistId) {
+    // Clear any existing poller for this playlist
+    if (activeSyncPollers[playlistId]) {
+        clearInterval(activeSyncPollers[playlistId]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
+        _syncProgressCallbacks[playlistId] = (data) => {
+            if (data.status === 'syncing') {
+                const progress = data.progress;
+                updateCardToSyncing(playlistId, progress.progress, progress);
+                updateModalSyncProgress(playlistId, progress);
+            } else if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
+                stopSyncPolling(playlistId);
+                updateCardToDefault(playlistId, data);
+                closePlaylistDetailsModal();
+            }
+        };
+    }
+
+    // Start a new poller that checks every 2 seconds
+    console.log(`🔄 Starting sync polling for playlist: ${playlistId}`);
+    activeSyncPollers[playlistId] = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            console.log(`📊 Polling sync status for: ${playlistId}`);
+            const response = await fetch(`/api/sync/status/${playlistId}`);
+            const state = await response.json();
+            console.log(`📊 Poll response:`, state);
+
+            if (state.status === 'syncing') {
+                const progress = state.progress;
+                console.log(`📊 Sync progress:`, progress);
+                console.log(`   📊 Progress values: ${progress.progress}% | Total: ${progress.total_tracks} | Matched: ${progress.matched_tracks} | Failed: ${progress.failed_tracks}`);
+                console.log(`   📊 Current step: "${progress.current_step}" | Current track: "${progress.current_track}"`);
+
+                // Use the actual progress percentage from the sync service
+                updateCardToSyncing(playlistId, progress.progress, progress);
+                // Also update the modal if it's open
+                updateModalSyncProgress(playlistId, progress);
+            } else if (state.status === 'finished' || state.status === 'error' || state.status === 'cancelled') {
+                console.log(`🏁 Sync completed with status: ${state.status}`);
+                stopSyncPolling(playlistId);
+                updateCardToDefault(playlistId, state);
+                // Also update the modal if it's open
+                closePlaylistDetailsModal(); closeDeezerArlPlaylistDetailsModal(); // Close modal on completion/error
+            }
+        } catch (error) {
+            console.error(`❌ Error polling sync status for ${playlistId}:`, error);
+            stopSyncPolling(playlistId);
+            updateCardToDefault(playlistId, { status: 'error', error: 'Polling failed' });
+        }
+    }, 2000); // Poll every 2 seconds
+    updateRefreshButtonState();
+}
+
+function stopSyncPolling(playlistId) {
+    if (activeSyncPollers[playlistId]) {
+        clearInterval(activeSyncPollers[playlistId]);
+        delete activeSyncPollers[playlistId];
+    }
+    // Phase 5: Unsubscribe and clean up callback
+    if (_syncProgressCallbacks[playlistId]) {
+        if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
+        delete _syncProgressCallbacks[playlistId];
+    }
+    updateRefreshButtonState();
+}
+
+// Sync sidebar visibility helpers
+function showSyncSidebar() {
+    const sidebar = document.querySelector('.sync-sidebar');
+    const contentArea = document.querySelector('.sync-content-area');
+    if (sidebar && contentArea && window.innerWidth > 1300) {
+        sidebar.style.display = '';
+        contentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
+    }
+}
+
+function hideSyncSidebar() {
+    const sidebar = document.querySelector('.sync-sidebar');
+    const contentArea = document.querySelector('.sync-content-area');
+    if (sidebar && contentArea) {
+        sidebar.style.display = 'none';
+        contentArea.style.gridTemplateColumns = '1fr';
+    }
+}
+
+// Sequential Sync Functions
+function startSequentialSync() {
+    // Initialize manager if needed
+    if (!sequentialSyncManager) {
+        sequentialSyncManager = new SequentialSyncManager();
+    }
+
+    // Check if already running - if so, cancel
+    if (sequentialSyncManager.isRunning) {
+        sequentialSyncManager.cancel();
+        return;
+    }
+
+    // Validate selection
+    if (selectedPlaylists.size === 0) {
+        showToast('No playlists selected for sync', 'error');
+        return;
+    }
+
+    // Get playlist order from DOM to maintain display order
+    const playlistCards = document.querySelectorAll('.playlist-card');
+    const orderedPlaylistIds = [];
+
+    playlistCards.forEach(card => {
+        const playlistId = card.dataset.playlistId;
+        if (selectedPlaylists.has(playlistId)) {
+            orderedPlaylistIds.push(playlistId);
+        }
+    });
+
+    console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
+
+    // Show sidebar for sync progress
+    showSyncSidebar();
+
+    // Start sequential sync
+    sequentialSyncManager.start(orderedPlaylistIds);
+
+    // Disable playlist selection during sync
+    disablePlaylistSelection(true);
+}
+
+function disablePlaylistSelection(disabled) {
+    const checkboxes = document.querySelectorAll('.playlist-checkbox');
+    checkboxes.forEach(checkbox => {
+        checkbox.disabled = disabled;
+    });
+}
+
+function hasActiveOperations() {
+    const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
+    // Only check non-wishlist download processes for sync page refresh button
+    const hasActiveDownloads = Object.entries(activeDownloadProcesses)
+        .filter(([playlistId, process]) => playlistId !== 'wishlist') // Exclude wishlist
+        .some(([_, process]) => process.status === 'running');
+    const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
+    return hasActiveSyncs || hasActiveDownloads || hasSequentialSync;
+}
+
+
+function updateRefreshButtonState() {
+    const refreshBtn = document.getElementById('spotify-refresh-btn');
+    if (!refreshBtn) return;
+
+    if (hasActiveOperations()) {
+        refreshBtn.disabled = true;
+        // Provide context-specific text
+        const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
+        const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
+        if (hasActiveSyncs || hasSequentialSync) {
+            refreshBtn.textContent = '🔄 Syncing...';
+        } else {
+            refreshBtn.textContent = '📥 Downloading...';
+        }
+    } else {
+        refreshBtn.disabled = false;
+        refreshBtn.textContent = '🔄 Refresh';
+    }
+}
+
+function updateCardToSyncing(playlistId, percent, progress = null) {
+    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
+    if (!card) return;
+
+    const progressBar = card.querySelector('.sync-progress-indicator');
+    progressBar.style.display = 'block';
+
+    let progressText = 'Starting...';
+    let actualPercent = percent || 0;
+
+    if (progress) {
+        // Create detailed progress text like the GUI
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const currentStep = progress.current_step || 'Processing';
+
+        // Calculate actual progress as processed/total, not just successful/total
+        if (total > 0) {
+            const processed = matched + failed;
+            actualPercent = Math.round((processed / total) * 100);
+            progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
+        } else {
+            progressText = currentStep;
+        }
+
+        // If there's a current track being processed, show it
+        if (progress.current_track) {
+            progressText += ` - ${progress.current_track}`;
+        }
+    }
+
+    // Build live status counter HTML (same as modal)
+    let statusCounterHTML = '';
+    if (progress && progress.total_tracks > 0) {
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const processed = matched + failed;
+        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+        statusCounterHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat matched-tracks">✓ ${matched}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat failed-tracks">✗ ${failed}</span>
+                <span class="sync-stat percentage">(${percentage}%)</span>
+            </div>
+        `;
+    }
+
+    progressBar.innerHTML = `
+        ${statusCounterHTML}
+        <div class="progress-bar-sync">
+            <div class="progress-fill-sync" style="width: ${actualPercent}%;"></div>
+        </div>
+        <div class="progress-text-sync">${progressText}</div>
+    `;
+}
+
+function updateCardToDefault(playlistId, finalState = null) {
+    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
+    if (!card) return;
+
+    const progressBar = card.querySelector('.sync-progress-indicator');
+    progressBar.style.display = 'none';
+    progressBar.innerHTML = '';
+
+    const statusEl = card.querySelector('.playlist-card-status');
+    if (finalState) {
+        if (finalState.status === 'finished') {
+            statusEl.textContent = `Synced: Just now`;
+            statusEl.className = 'playlist-card-status status-synced';
+
+            // Check if any tracks were added to wishlist
+            const wishlistCount = finalState.progress?.wishlist_added_count || finalState.result?.wishlist_added_count || 0;
+            const unmatchedTracks = finalState.progress?.unmatched_tracks || finalState.result?.unmatched_tracks || [];
+            const playlistName = card.querySelector('.playlist-card-name').textContent;
+
+            if (wishlistCount > 0 && unmatchedTracks.length > 0) {
+                const trackList = unmatchedTracks.map(t => `${t.artist} - ${t.name}`).join(', ');
+                showToast(`Sync complete for "${playlistName}". ${wishlistCount} not found in library: ${trackList}`, 'warning');
+            } else if (wishlistCount > 0) {
+                showToast(`Sync complete for "${playlistName}". Added ${wishlistCount} missing track${wishlistCount > 1 ? 's' : ''} to wishlist.`, 'success');
+            } else {
+                showToast(`Sync complete for "${playlistName}"`, 'success');
+            }
+        } else {
+            statusEl.textContent = `Sync Failed`;
+            statusEl.className = 'playlist-card-status status-needs-sync'; // Or a new error class
+            showToast(`Sync failed: ${finalState.error || 'Unknown error'}`, 'error');
+        }
+    }
+}
+
+// Update the modal's sync progress display (matches GUI functionality)
+function updateModalSyncProgress(playlistId, progress) {
+    const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
+    if (modal && modal.style.display !== 'none') {
+        console.log(`📊 Updating modal sync progress for ${playlistId}:`, progress);
+
+        // Show sync status display
+        const statusDisplay = document.getElementById(`modal-sync-status-${playlistId}`);
+        if (statusDisplay) {
+            statusDisplay.style.display = 'flex';
+
+            // Update counters (matching GUI exactly)
+            const totalEl = document.getElementById(`modal-total-${playlistId}`);
+            const matchedEl = document.getElementById(`modal-matched-${playlistId}`);
+            const failedEl = document.getElementById(`modal-failed-${playlistId}`);
+            const percentageEl = document.getElementById(`modal-percentage-${playlistId}`);
+
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+
+            if (totalEl) totalEl.textContent = total;
+            if (matchedEl) matchedEl.textContent = matched;
+            if (failedEl) failedEl.textContent = failed;
+
+            // Calculate percentage like GUI
+            if (total > 0) {
+                const processed = matched + failed;
+                const percentage = Math.round((processed / total) * 100);
+                if (percentageEl) percentageEl.textContent = percentage;
+            }
+
+            console.log(`📊 Modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
+        } else {
+            console.warn(`❌ Modal sync status display not found for ${playlistId}`);
+        }
+    } else {
+        console.log(`📊 Modal not open for ${playlistId}, skipping update`);
+    }
+}
+
+
+// Download tracking state management - matching GUI functionality
+let activeDownloads = {};
+let finishedDownloads = {};
+let downloadStatusInterval = null;
+let isDownloadPollingActive = false;
+
+async function loadDownloadsData() {
+    // Downloads page loads search results dynamically
+    console.log('Downloads page loaded');
+
+    // Event listeners are already set up in initializeSearch() - don't duplicate them
+    const clearButton = document.querySelector('.controls-panel__clear-btn');
+    const cancelAllButton = document.querySelector('.controls-panel__cancel-all-btn');
+
+    if (clearButton) {
+        clearButton.addEventListener('click', clearFinishedDownloads);
+    }
+    if (cancelAllButton) {
+        cancelAllButton.addEventListener('click', cancelAllDownloads);
+    }
+
+    // Start sophisticated polling system (1-second interval like GUI)
+    startDownloadPolling();
+
+    // Initialize tab management
+    initializeDownloadTabs();
+}
+
+function startDownloadPolling() {
+    if (isDownloadPollingActive) return;
+
+    console.log('Starting download status polling (1-second interval)');
+    isDownloadPollingActive = true;
+
+    // Initial call
+    updateDownloadQueues();
+
+    // Start 1-second polling (matching GUI's 1000ms timer)
+    downloadStatusInterval = setInterval(updateDownloadQueues, 1000);
+}
+
+function stopDownloadPolling() {
+    if (downloadStatusInterval) {
+        clearInterval(downloadStatusInterval);
+        downloadStatusInterval = null;
+    }
+    isDownloadPollingActive = false;
+    console.log('Stopped download status polling');
+}
+
+async function updateDownloadQueues() {
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/downloads/status');
+        const data = await response.json();
+
+        if (data.error) {
+            console.error("Error fetching download status:", data.error);
+            return;
+        }
+
+        const newActive = {};
+        const newFinished = {};
+
+        // Terminal states matching GUI logic
+        const terminalStates = ['Completed', 'Succeeded', 'Cancelled', 'Canceled', 'Failed', 'Errored'];
+
+        // Process transfers exactly like GUI
+        data.transfers.forEach(item => {
+            const isTerminal = terminalStates.some(state =>
+                item.state && item.state.includes(state)
+            );
+
+            if (isTerminal) {
+                newFinished[item.id] = item;
+            } else {
+                newActive[item.id] = item;
+            }
+        });
+
+        // Update global state
+        activeDownloads = newActive;
+        finishedDownloads = newFinished;
+
+        // Render both queues
+        renderQueue('active-queue', activeDownloads, true);
+        renderQueue('finished-queue', finishedDownloads, false);
+
+        // Update tab counts
+        updateTabCounts();
+
+        // Update stats in the side panel
+        updateDownloadStats();
+
+    } catch (error) {
+        // Only log errors occasionally to avoid console spam
+        if (Math.random() < 0.1) {
+            console.error("Failed to update download queues:", error);
+        }
+    }
+}
+
+function renderQueue(containerId, downloads, isActiveQueue) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    const downloadIds = Object.keys(downloads);
+
+    if (downloadIds.length === 0) {
+        container.innerHTML = `<div class="download-queue__empty-message">${isActiveQueue ? 'No active downloads.' : 'No finished downloads.'}</div>`;
+        return;
+    }
+
+    let html = '';
+    for (const id of downloadIds) {
+        const item = downloads[id];
+
+        // Extract display title from filename
+        let title = 'Unknown File';
+        if (item.filename) {
+            // YouTube/Tidal filenames are encoded as "id||title"
+            if ((item.username === 'youtube' || item.username === 'tidal' || item.username === 'qobuz' || item.username === 'hifi') && item.filename.includes('||')) {
+                const parts = item.filename.split('||');
+                title = parts[1] || parts[0];  // Use title part, fallback to id
+            } else {
+                // Regular Soulseek filename - extract last part of path
+                title = item.filename.split(/[\\/]/).pop();
+            }
+        }
+
+        const progress = item.percentComplete || 0;
+        const bytesTransferred = item.bytesTransferred || 0;
+        const totalBytes = item.size || 0;
+        const speed = item.averageSpeed || 0;
+
+        // Format file size
+        const formatSize = (bytes) => {
+            if (!bytes) return 'Unknown size';
+            const units = ['B', 'KB', 'MB', 'GB'];
+            let size = bytes;
+            let unitIndex = 0;
+            while (size >= 1024 && unitIndex < units.length - 1) {
+                size /= 1024;
+                unitIndex++;
+            }
+            return `${size.toFixed(1)} ${units[unitIndex]}`;
+        };
+
+        // Format speed
+        const formatSpeed = (bytesPerSecond) => {
+            if (!bytesPerSecond || bytesPerSecond <= 0) return '';
+            return `${formatSize(bytesPerSecond)}/s`;
+        };
+
+        let actionButtonHTML = '';
+        if (isActiveQueue) {
+            // Active items get progress bar and cancel button
+            actionButtonHTML = `
+                <div class="download-item__progress-container">
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: ${progress}%;"></div>
+                    </div>
+                    <div class="progress-text">
+                        ${item.state} - ${progress.toFixed(1)}%
+                        ${speed > 0 ? `• ${formatSpeed(speed)}` : ''}
+                        ${totalBytes > 0 ? `• ${formatSize(bytesTransferred)} / ${formatSize(totalBytes)}` : ''}
+                    </div>
+                </div>
+                <button class="download-item__cancel-btn" onclick="cancelDownloadItem('${item.id}', '${item.username}')">✕ Cancel</button>
+            `;
+        } else {
+            // Finished items get status and open button
+            let statusClass = '';
+            if (item.state.includes('Cancelled')) statusClass = 'status--cancelled';
+            else if (item.state.includes('Failed') || item.state.includes('Errored')) statusClass = 'status--failed';
+            else if (item.state.includes('Completed') || item.state.includes('Succeeded')) statusClass = 'status--completed';
+
+            actionButtonHTML = `
+                <div class="download-item__status-container">
+                    <span class="download-item__status-text ${statusClass}">${item.state}</span>
+                </div>
+                <button class="download-item__open-btn" title="Cannot open folder from web browser" disabled>📁 Open</button>
+            `;
+        }
+
+        // Enrich with metadata from backend context (artist, album, artwork)
+        const meta = item._meta || {};
+        const sourceLabels = { youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', lidarr: 'Lidarr' };
+        const sourceBadge = sourceLabels[item.username] || item.username;
+
+        html += `
+            <div class="download-item" data-id="${item.id}">
+                <div class="download-item__art">
+                    ${meta.artwork_url
+                        ? `<img src="${meta.artwork_url}" alt="" loading="lazy" onerror="this.parentElement.innerHTML='<div class=\\'download-item__art-placeholder\\'>&#9835;</div>'">`
+                        : '<div class="download-item__art-placeholder">&#9835;</div>'}
+                </div>
+                <div class="download-item__info">
+                    <div class="download-item__title" title="${title}">${title}</div>
+                    ${meta.artist || meta.album ? `
+                        <div class="download-item__meta">
+                            ${meta.artist ? `<span>${escapeHtml(meta.artist)}</span>` : ''}
+                            ${meta.artist && meta.album ? '<span class="download-item__sep">&middot;</span>' : ''}
+                            ${meta.album ? `<span class="download-item__album">${escapeHtml(meta.album)}</span>` : ''}
+                        </div>
+                    ` : ''}
+                    <div class="download-item__badges">
+                        <span class="download-item__source">${sourceBadge}</span>
+                        ${meta.quality ? `<span class="download-item__quality">${escapeHtml(meta.quality)}</span>` : ''}
+                    </div>
+                </div>
+                <div class="download-item__content">
+                    ${actionButtonHTML}
+                </div>
+            </div>
+        `;
+    }
+    container.innerHTML = html;
+}
+
+function updateTabCounts() {
+    const activeCount = Object.keys(activeDownloads).length;
+    const finishedCount = Object.keys(finishedDownloads).length;
+
+    const activeTabBtn = document.querySelector('.tab-btn[data-tab="active-queue"]');
+    const finishedTabBtn = document.querySelector('.tab-btn[data-tab="finished-queue"]');
+
+    if (activeTabBtn) activeTabBtn.textContent = `Download Queue (${activeCount})`;
+    if (finishedTabBtn) finishedTabBtn.textContent = `Finished (${finishedCount})`;
+}
+
+function updateDownloadStats() {
+    const activeCount = Object.keys(activeDownloads).length;
+    const finishedCount = Object.keys(finishedDownloads).length;
+
+    const activeLabel = document.getElementById('active-downloads-label');
+    const finishedLabel = document.getElementById('finished-downloads-label');
+
+    if (activeLabel) activeLabel.textContent = `• Active Downloads: ${activeCount}`;
+    if (finishedLabel) finishedLabel.textContent = `• Finished Downloads: ${finishedCount}`;
+}
+
+function initializeDownloadTabs() {
+    const tabButtons = document.querySelectorAll('.tab-btn');
+    tabButtons.forEach(btn => {
+        btn.addEventListener('click', () => switchDownloadTab(btn));
+    });
+}
+
+function switchDownloadTab(button) {
+    const targetTabId = button.getAttribute('data-tab');
+
+    // Update buttons
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+    button.classList.add('active');
+
+    // Update content panes
+    document.querySelectorAll('.download-queue').forEach(queue => queue.classList.remove('active'));
+    const targetQueue = document.getElementById(targetTabId);
+    if (targetQueue) targetQueue.classList.add('active');
+}
+
+async function cancelDownloadItem(downloadId, username) {
+    try {
+        const response = await fetch('/api/downloads/cancel', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ download_id: downloadId, username: username })
+        });
+        const result = await response.json();
+
+        if (result.success) {
+            showToast('Download cancelled', 'success');
+        } else {
+            showToast(`Failed to cancel: ${result.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error cancelling download:', error);
+        showToast('Error sending cancel request', 'error');
+    }
+}
+
+async function clearFinishedDownloads() {
+    const finishedCount = Object.keys(finishedDownloads).length;
+    if (finishedCount === 0) {
+        showToast('No finished downloads to clear', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/downloads/clear-finished', {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (result.success) {
+            showToast('Finished downloads cleared', 'success');
+        } else {
+            showToast(`Failed to clear: ${result.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error clearing finished downloads:', error);
+        showToast('Error sending clear request', 'error');
+    }
+}
+
+async function cancelAllDownloads() {
+    if (!await showConfirmDialog({ title: 'Cancel All Downloads', message: 'Cancel ALL active downloads and clear the transfer list? This cannot be undone.', confirmText: 'Cancel All', destructive: true })) {
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/downloads/cancel-all', {
+            method: 'POST'
+        });
+        const result = await response.json();
+
+        if (result.success) {
+            showToast('All downloads cancelled and cleared', 'success');
+        } else {
+            showToast(`Failed to cancel: ${result.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error cancelling all downloads:', error);
+        showToast('Error cancelling downloads', 'error');
+    }
+}
+
+// REPLACE the old performDownloadsSearch function with this new one.
+async function performDownloadsSearch() {
+    const query = document.getElementById('downloads-search-input').value.trim();
+    if (!query) {
+        showToast('Please enter a search term', 'error');
+        return;
+    }
+
+    // --- UI Element References ---
+    const searchInput = document.getElementById('downloads-search-input');
+    const searchButton = document.getElementById('downloads-search-btn');
+    const cancelButton = document.getElementById('downloads-cancel-btn');
+    const statusText = document.getElementById('search-status-text');
+    const spinner = document.querySelector('.spinner-animation');
+    const dots = document.querySelector('.dots-animation');
+
+    // --- Start a new AbortController for this search ---
+    searchAbortController = new AbortController();
+
+    try {
+        // --- 1. Update UI to "Searching" State ---
+        searchInput.disabled = true;
+        searchButton.disabled = true;
+        cancelButton.classList.remove('hidden');
+        spinner.classList.remove('hidden');
+        dots.classList.remove('hidden');
+        statusText.textContent = `Searching for '${query}'...`;
+        displayDownloadsResults([]); // Clear previous results
+
+        // --- 2. Perform the Fetch Request ---
+        const response = await fetch('/api/search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query }),
+            signal: searchAbortController.signal // Link fetch to the AbortController
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            throw new Error(data.error);
+        }
+
+        const results = data.results || [];
+        allSearchResults = results;
+        resetFilters();
+        applyFiltersAndSort();
+
+        // --- 3. Update UI with Success State ---
+        if (results.length === 0) {
+            statusText.textContent = `No results found for '${query}'`;
+            showToast('No results found', 'error');
+        } else {
+            document.getElementById('filters-container').classList.remove('hidden');
+
+            // Count albums and singles like the GUI app
+            let totalAlbums = 0;
+            let totalTracks = 0;
+
+            results.forEach(result => {
+                if (result.result_type === 'album') {
+                    totalAlbums++;
+                } else {
+                    totalTracks++;
+                }
+            });
+
+            statusText.textContent = `✨ Found ${results.length} results • ${totalAlbums} albums, ${totalTracks} singles`;
+            showToast(`Found ${results.length} results`, 'success');
+        }
+
+    } catch (error) {
+        // --- 4. Handle Errors, Including Cancellation ---
+        if (error.name === 'AbortError') {
+            // This specific error is thrown when the user clicks "Cancel"
+            statusText.textContent = 'Search was cancelled.';
+            showToast('Search cancelled', 'info');
+            displayDownloadsResults([]); // Clear any partial results
+        } else {
+            console.error('Search failed:', error);
+            statusText.textContent = `Search failed: ${error.message}`;
+            showToast('Search failed', 'error');
+        }
+    } finally {
+        // --- 5. Clean Up UI Regardless of Outcome ---
+        searchInput.disabled = false;
+        searchButton.disabled = false;
+        cancelButton.classList.add('hidden');
+        spinner.classList.add('hidden');
+        dots.classList.add('hidden');
+        searchAbortController = null; // Clear the controller
+    }
+}
+
+function displayDownloadsResults(results) {
+    const resultsArea = document.getElementById('search-results-area');
+    if (!resultsArea) return;
+
+    if (!results.length) {
+        resultsArea.innerHTML = '<div class="search-results-placeholder"><p>No search results found.</p></div>';
+        return;
+    }
+
+    let html = '';
+    results.forEach((result, index) => {
+        const isAlbum = result.result_type === 'album';
+
+        if (isAlbum) {
+            const trackCount = result.tracks ? result.tracks.length : 0;
+            const totalSize = result.total_size ? `${(result.total_size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+
+            // Generate individual track items
+            let trackListHtml = '';
+            if (result.tracks && result.tracks.length > 0) {
+                // Detect disc boundaries from track number resets for multi-disc albums
+                let currentDisc = 1;
+                let lastTrackNum = 0;
+                let discBreaks = new Set();
+                result.tracks.forEach((track, trackIndex) => {
+                    const tn = track.track_number || 0;
+                    if (trackIndex > 0 && tn > 0 && tn <= lastTrackNum) {
+                        currentDisc++;
+                        discBreaks.add(trackIndex);
+                    }
+                    if (tn > 0) lastTrackNum = tn;
+                });
+                const isMultiDisc = discBreaks.size > 0;
+                if (isMultiDisc) {
+                    trackListHtml += `<div class="disc-separator" style="padding: 6px 12px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #aaa); border-bottom: 1px solid var(--border-color, #333); margin-bottom: 4px;">Disc 1</div>`;
+                }
+                let discNum = 1;
+                result.tracks.forEach((track, trackIndex) => {
+                    if (discBreaks.has(trackIndex)) {
+                        discNum++;
+                        trackListHtml += `<div class="disc-separator" style="padding: 6px 12px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #aaa); border-bottom: 1px solid var(--border-color, #333); margin: 8px 0 4px 0;">Disc ${discNum}</div>`;
+                    }
+                    const trackSize = track.size ? `${(track.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+                    const trackBitrate = track.bitrate ? `${track.bitrate}kbps` : '';
+                    trackListHtml += `
+                        <div class="track-item">
+                            <div class="track-item-info">
+                                <div class="track-item-title">${escapeHtml(track.title || `Track ${trackIndex + 1}`)}</div>
+                                <div class="track-item-details">
+                                    ${track.track_number ? `${track.track_number}. ` : ''}${escapeHtml(track.artist || result.artist || 'Unknown Artist')} • ${trackSize} • ${escapeHtml(track.quality || 'Unknown')} ${trackBitrate}
+                                </div>
+                            </div>
+                            <div class="track-item-actions">
+                                <button onclick="streamAlbumTrack(${index}, ${trackIndex})" class="track-stream-btn">Stream ▶</button>
+                                <button onclick="downloadAlbumTrack(${index}, ${trackIndex})" class="track-download-btn">Download ⬇</button>
+                                <button onclick="matchedDownloadAlbumTrack(${index}, ${trackIndex})" class="track-matched-btn" title="Matched Download">Matched Download 🎯</button>
+                            </div>
+                        </div>
+                    `;
+                });
+            }
+
+            html += `
+                <div class="album-result-card" data-album-index="${index}">
+                    <div class="album-card-header" onclick="toggleAlbumExpansion(${index})">
+                        <div class="album-expand-indicator">▶</div>
+                        <div class="album-icon">💿</div>
+                        <div class="album-info">
+                            <div class="album-title">${escapeHtml(result.album_title || result.title || 'Unknown Album')}</div>
+                            <div class="album-artist">by ${escapeHtml(result.artist || 'Unknown Artist')}</div>
+                            <div class="album-details">
+                                ${trackCount} tracks • ${totalSize} • ${escapeHtml(result.quality || 'Mixed')}
+                            </div>
+                            <div class="album-uploader">Shared by ${escapeHtml(result.username || 'Unknown')}</div>
+                        </div>
+                        <div class="album-actions" onclick="event.stopPropagation()">
+                            <button onclick="downloadAlbum(${index})" class="album-download-btn">⬇ Download Album</button>
+                            <button onclick="matchedDownloadAlbum(${index})" class="album-matched-btn" title="Matched Album Download">Matched Album🎯</button>
+                        </div>
+                    </div>
+                    <div class="album-track-list" style="display: none;">
+                        ${trackListHtml}
+                    </div>
+                </div>
+            `;
+        } else {
+            const sizeText = result.size ? `${(result.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
+            const bitrateText = result.bitrate ? `${result.bitrate}kbps` : '';
+            html += `
+                <div class="track-result-card">
+                    <div class="track-icon">🎵</div>
+                    <div class="track-info">
+                        <div class="track-title">${escapeHtml(result.title || 'Unknown Title')}</div>
+                        <div class="track-artist">by ${escapeHtml(result.artist || 'Unknown Artist')}</div>
+                        <div class="track-details">
+                            ${sizeText} • ${escapeHtml(result.quality || 'Unknown')} ${bitrateText}
+                        </div>
+                        <div class="track-uploader">Shared by ${escapeHtml(result.username || 'Unknown')}</div>
+                    </div>
+                    <div class="track-actions">
+                        <button onclick="streamTrack(${index})" class="track-stream-btn" title="Stream Track">Stream ▶</button>
+                        <button onclick="downloadTrack(${index})" class="track-download-btn" title="Download">Download ⬇</button>
+                        <button onclick="matchedDownloadTrack(${index})" class="track-matched-btn" title="Matched Download">Matched Download🎯</button>
+                    </div>
+                </div>
+            `;
+        }
+    });
+
+    resultsArea.innerHTML = html;
+    // Store results globally for download functions
+    window.currentSearchResults = results;
+}
+
+async function downloadTrack(index) {
+    const results = window.currentSearchResults;
+    if (!results || !results[index]) return;
+
+    const track = results[index];
+
+    try {
+        const response = await fetch('/api/download', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(track)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(`Download started: ${track.title}`, 'success');
+        } else {
+            showToast(`Download failed: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Download error:', error);
+        showToast('Failed to start download', 'error');
+    }
+}
+
+async function downloadAlbum(index) {
+    const results = window.currentSearchResults;
+    if (!results || !results[index]) return;
+
+    const album = results[index];
+
+    try {
+        const response = await fetch('/api/download', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(album)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(data.message, 'success');
+        } else {
+            showToast(`Album download failed: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Album download error:', error);
+        showToast('Failed to start album download', 'error');
+    }
+}
+
+// Matched download functions
+function matchedDownloadTrack(index) {
+    const results = window.currentSearchResults;
+    if (!results || !results[index]) return;
+
+    const track = results[index];
+    console.log('🎯 Starting matched download for single track:', track);
+
+    // Open matching modal for single track
+    openMatchingModal(track, false, null);
+}
+
+function matchedDownloadAlbum(index) {
+    const results = window.currentSearchResults;
+    if (!results || !results[index]) return;
+
+    const album = results[index];
+    console.log('🎯 Starting matched download for album:', album);
+
+    // Open matching modal for album download
+    openMatchingModal(album, true, album);
+}
+
+function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
+    const results = window.currentSearchResults;
+    if (!results || !results[albumIndex]) return;
+
+    const album = results[albumIndex];
+    if (!album.tracks || !album.tracks[trackIndex]) return;
+
+    const track = album.tracks[trackIndex];
+
+    // Ensure track has necessary properties from parent album
+    track.username = album.username;
+    track.artist = track.artist || album.artist;
+    track.album = album.album_title || album.title;
+
+    console.log('🎯 Starting matched download for album track:', track);
+
+    // Open matching modal for single track (from album context)
+    openMatchingModal(track, false, null);
+}
+
+function toggleAlbumExpansion(albumIndex) {
+    const albumCard = document.querySelector(`[data-album-index="${albumIndex}"]`);
+    if (!albumCard) return;
+
+    const trackList = albumCard.querySelector('.album-track-list');
+    const indicator = albumCard.querySelector('.album-expand-indicator');
+
+    if (trackList.style.display === 'none' || !trackList.style.display) {
+        // Expand
+        trackList.style.display = 'block';
+        indicator.textContent = '▼';
+        albumCard.classList.add('expanded');
+    } else {
+        // Collapse
+        trackList.style.display = 'none';
+        indicator.textContent = '▶';
+        albumCard.classList.remove('expanded');
+    }
+}
+
+async function downloadAlbumTrack(albumIndex, trackIndex) {
+    const results = window.currentSearchResults;
+    if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) return;
+
+    const track = results[albumIndex].tracks[trackIndex];
+
+    try {
+        const response = await fetch('/api/download', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                ...track,
+                result_type: 'track'
+            })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(`Download started: ${track.title}`, 'success');
+        } else {
+            showToast(`Track download failed: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Track download error:', error);
+        showToast('Failed to start track download', 'error');
+    }
+}
+
+// ===============================
+// STREAMING WRAPPER FUNCTIONS
+// ===============================
+
+async function streamTrack(index) {
+    // Stream a single track from search results
+    try {
+        console.log(`🎵 streamTrack called with index: ${index}`);
+        console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
+
+        if (!window.currentSearchResults || !window.currentSearchResults[index]) {
+            console.error(`❌ No search results or invalid index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
+            showToast('Track not found', 'error');
+            return;
+        }
+
+        const result = window.currentSearchResults[index];
+        console.log(`🎵 Streaming track:`, result);
+
+        // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
+        const isStreamingSource = result.username === 'youtube' || result.username === 'tidal' || result.username === 'qobuz' || result.username === 'hifi';
+        if (!isStreamingSource && result.filename) {
+            const format = getFileExtension(result.filename);
+            console.log(`🎵 [STREAM CHECK] File: ${result.filename}, Extension: ${format}`);
+
+            const isSupported = isAudioFormatSupported(result.filename);
+            console.log(`🎵 [STREAM CHECK] Format ${format} supported: ${isSupported}`);
+
+            if (!isSupported) {
+                showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
+                return;
+            }
+        }
+
+        await startStream(result);
+
+    } catch (error) {
+        console.error('Track streaming error:', error);
+        showToast('Failed to start track stream', 'error');
+    }
+}
+
+
+async function streamAlbumTrack(albumIndex, trackIndex) {
+    // Stream a specific track from an album
+    try {
+        console.log(`🎵 streamAlbumTrack called with albumIndex: ${albumIndex}, trackIndex: ${trackIndex}`);
+        console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
+
+        if (!window.currentSearchResults || !window.currentSearchResults[albumIndex]) {
+            console.error(`❌ No search results or invalid album index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
+            showToast('Album not found', 'error');
+            return;
+        }
+
+        const album = window.currentSearchResults[albumIndex];
+        console.log(`🎵 Album data:`, album);
+
+        // Surgical Fix: Handle YouTube/Tidal results which are "flat" (no tracks array)
+        if (album.username === 'youtube' || album.username === 'tidal' || album.username === 'qobuz' || album.username === 'hifi') {
+            // For YouTube/Tidal results, the "album" is actually the track itself
+            const track = album;
+            const trackData = {
+                ...track,
+                username: track.username,
+                filename: track.filename,
+                artist: track.artist,
+                album: track.title, // Use title as album name for player
+                title: track.title
+            };
+            console.log(`🎵 Streaming YouTube track directly:`, trackData);
+            await startStream(trackData);
+            return;
+        }
+
+        if (!album.tracks || !album.tracks[trackIndex]) {
+            console.error(`❌ No tracks in album or invalid track index. Tracks length: ${album.tracks ? album.tracks.length : 'undefined'}`);
+            showToast('Track not found in album', 'error');
+            return;
+        }
+
+        const track = album.tracks[trackIndex];
+        console.log(`🎵 Streaming album track:`, track);
+
+        // Ensure album tracks have required fields
+        const trackData = {
+            ...track,
+            username: track.username || album.username,
+            filename: track.filename || track.path,
+            artist: track.artist || album.artist,
+            album: track.album || album.title || album.album
+        };
+
+        console.log(`🎵 Enhanced track data:`, trackData);
+
+        // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
+        const isStreamingSource2 = trackData.username === 'youtube' || trackData.username === 'tidal' || trackData.username === 'qobuz' || trackData.username === 'hifi';
+        if (!isStreamingSource2 && trackData.filename && !isAudioFormatSupported(trackData.filename)) {
+            const format = getFileExtension(trackData.filename);
+            showToast(`Sorry, ${format.toUpperCase()} format is not supported in web browsers. Try downloading instead.`, 'error');
+            return;
+        }
+
+        await startStream(trackData);
+
+    } catch (error) {
+        console.error('Album track streaming error:', error);
+        showToast('Failed to start track stream', 'error');
+    }
+}
+
+async function loadArtistsData() {
+    try {
+        const response = await fetch(API.artists);
+        const data = await response.json();
+
+        const artistsGrid = document.getElementById('artists-grid');
+        if (data.artists && data.artists.length) {
+            artistsGrid.innerHTML = data.artists.map(artist => `
+                <div class="artist-card">
+                    <div class="artist-image">
+                        ${artist.image ?
+                    `<img src="${artist.image}" alt="${escapeHtml(artist.name)}" />` :
+                    '<div class="artist-placeholder">🎵</div>'
+                }
+                    </div>
+                    <div class="artist-info">
+                        <div class="artist-name">${escapeHtml(artist.name)}</div>
+                        <div class="artist-albums">${artist.album_count || 0} albums</div>
+                    </div>
+                </div>
+            `).join('');
+        } else {
+            artistsGrid.innerHTML = '<div class="no-artists">No artists found</div>';
+        }
+    } catch (error) {
+        console.error('Error loading artists data:', error);
+        document.getElementById('artists-grid').innerHTML = '<div class="error">Error loading artists</div>';
+    }
+}
+
+// ===============================
+// UTILITY FUNCTIONS
+// ===============================
+
+function showLoadingOverlay(message = 'Loading...') {
+    const overlay = document.getElementById('loading-overlay');
+    const messageElement = overlay.querySelector('.loading-message');
+    messageElement.textContent = message;
+    overlay.classList.remove('hidden');
+}
+
+function hideLoadingOverlay() {
+    document.getElementById('loading-overlay').classList.add('hidden');
+}
+
+// ==================================================================================
+// NOTIFICATION SYSTEM — Compact toasts + bell button + notification history panel
+// ==================================================================================
+
+const _notifState = {
+    history: [],
+    unreadCount: 0,
+    panelOpen: false,
+    currentToast: null,
+    toastTimer: null,
+    maxHistory: 50,
+};
+const _recentToastKeys = new Map();
+
+const _notifIcons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
+
+function showToast(message, type = 'success', helpSection = null) {
+    const toastKey = `${type}:${message}`;
+    const now = Date.now();
+
+    // Deduplication — suppress identical toasts within 5 seconds
+    if (_recentToastKeys.has(toastKey) && now - _recentToastKeys.get(toastKey) < 5000) return;
+    _recentToastKeys.set(toastKey, now);
+    for (const [k, t] of _recentToastKeys) { if (now - t > 10000) _recentToastKeys.delete(k); }
+
+    // Add to notification history
+    const entry = { id: now + Math.random(), message, type, helpSection, timestamp: now, read: false };
+    _notifState.history.unshift(entry);
+    if (_notifState.history.length > _notifState.maxHistory) _notifState.history.pop();
+    _notifState.unreadCount++;
+    _updateNotifBadge();
+
+    // Show compact toast — dismiss current if showing
+    const container = document.getElementById('toast-container');
+    if (!container) return;
+
+    if (_notifState.currentToast && container.contains(_notifState.currentToast)) {
+        _notifState.currentToast.classList.add('toast-exit');
+        const old = _notifState.currentToast;
+        setTimeout(() => { if (container.contains(old)) container.removeChild(old); }, 200);
+    }
+    if (_notifState.toastTimer) clearTimeout(_notifState.toastTimer);
+
+    const icon = _notifIcons[type] || 'ℹ';
+    const toast = document.createElement('div');
+    toast.className = `toast-compact toast-${type}`;
+    toast.innerHTML = `<span class="toast-compact-icon">${icon}</span><span class="toast-compact-msg">${_escToast(message)}</span>`;
+    if (helpSection) {
+        const link = document.createElement('span');
+        link.className = 'toast-compact-link';
+        link.textContent = 'Learn more →';
+        link.onclick = e => { e.stopPropagation(); if (typeof navigateToDocsSection === 'function') navigateToDocsSection(helpSection); };
+        toast.appendChild(link);
+    }
+    toast.onclick = () => { toast.classList.add('toast-exit'); setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 200); };
+
+    container.appendChild(toast);
+    requestAnimationFrame(() => toast.classList.add('toast-enter'));
+    _notifState.currentToast = toast;
+
+    _notifState.toastTimer = setTimeout(() => {
+        if (container.contains(toast)) {
+            toast.classList.add('toast-exit');
+            setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 300);
+        }
+        _notifState.currentToast = null;
+    }, helpSection ? 5000 : 3500);
+}
+
+function _escToast(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+function _escAttr(s) { return _escToast(s).replace(/'/g, "\\'").replace(/\n/g, ' ').replace(/\r/g, ''); }
+
+function _updateNotifBadge() {
+    const badge = document.getElementById('notif-bell-badge');
+    if (badge) {
+        badge.textContent = _notifState.unreadCount > 99 ? '99+' : _notifState.unreadCount;
+        badge.style.display = _notifState.unreadCount > 0 ? '' : 'none';
+    }
+}
+
+function toggleNotifPanel() {
+    if (_notifState.panelOpen) {
+        _closeNotifPanel();
+    } else {
+        _openNotifPanel();
+    }
+}
+
+function _openNotifPanel() {
+    _closeNotifPanel(); // Remove existing
+
+    _notifState.panelOpen = true;
+    _notifState.unreadCount = 0;
+    _notifState.history.forEach(e => e.read = true);
+    _updateNotifBadge();
+
+    const btn = document.getElementById('notif-bell-btn');
+    const panel = document.createElement('div');
+    panel.id = 'notif-panel';
+    panel.className = 'notif-panel';
+
+    const entries = _notifState.history;
+
+    panel.innerHTML = `
+        <div class="notif-panel-header">
+            <span class="notif-panel-title">Notifications</span>
+            ${entries.length > 0 ? '<button class="notif-panel-clear" onclick="_clearNotifHistory()">Clear All</button>' : ''}
+        </div>
+        <div class="notif-panel-body">
+            ${entries.length === 0 ? '<div class="notif-panel-empty">No notifications yet</div>' :
+            entries.map(e => {
+                const icon = _notifIcons[e.type] || 'ℹ';
+                const ago = _notifTimeAgo(e.timestamp);
+                const unreadDot = e.read ? '' : '<span class="notif-entry-unread"></span>';
+                const learnMore = e.helpSection ? `<span class="notif-entry-link" onclick="event.stopPropagation(); _closeNotifPanel(); navigateToDocsSection('${e.helpSection}')">Learn more →</span>` : '';
+                return `
+                    <div class="notif-entry notif-entry-${e.type}">
+                        ${unreadDot}
+                        <span class="notif-entry-icon notif-icon-${e.type}">${icon}</span>
+                        <div class="notif-entry-body">
+                            <div class="notif-entry-msg">${_escToast(e.message)}</div>
+                            <div class="notif-entry-meta">${ago}${learnMore}</div>
+                        </div>
+                    </div>`;
+            }).join('')}
+        </div>
+    `;
+
+    document.body.appendChild(panel);
+
+    // Position above the bell button
+    if (btn) {
+        const rect = btn.getBoundingClientRect();
+        panel.style.right = (window.innerWidth - rect.right) + 'px';
+        panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
+    }
+
+    requestAnimationFrame(() => panel.classList.add('visible'));
+
+    // Close on outside click
+    setTimeout(() => {
+        const closeHandler = e => {
+            if (!panel.contains(e.target) && e.target.id !== 'notif-bell-btn') {
+                _closeNotifPanel();
+                document.removeEventListener('click', closeHandler);
+            }
+        };
+        document.addEventListener('click', closeHandler);
+    }, 100);
+}
+
+function _closeNotifPanel() {
+    _notifState.panelOpen = false;
+    const panel = document.getElementById('notif-panel');
+    if (panel) {
+        panel.classList.remove('visible');
+        setTimeout(() => panel.remove(), 200);
+    }
+}
+
+function _clearNotifHistory() {
+    _notifState.history = [];
+    _notifState.unreadCount = 0;
+    _updateNotifBadge();
+    _closeNotifPanel();
+}
+
+function _notifTimeAgo(ts) {
+    const s = Math.floor((Date.now() - ts) / 1000);
+    if (s < 5) return 'just now';
+    if (s < 60) return `${s}s ago`;
+    const m = Math.floor(s / 60);
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    return `${Math.floor(h / 24)}d ago`;
+}
+
+// ==================================================================================
+// Music video download handler — defined at top level so both enhanced and global search can use it
+function _downloadMusicVideo(cardEl, video) {
+    if (cardEl.classList.contains('downloading') || cardEl.classList.contains('completed')) return;
+    cardEl.classList.add('downloading');
+    cardEl.onclick = null;
+
+    const playBtn = cardEl.querySelector('.enh-video-play');
+    const progressRing = cardEl.querySelector('.enh-video-progress-ring');
+    const progressBar = cardEl.querySelector('.enh-video-progress-bar');
+    const doneIcon = cardEl.querySelector('.enh-video-done');
+    const errorIcon = cardEl.querySelector('.enh-video-error');
+
+    if (playBtn) playBtn.classList.add('hidden');
+    if (progressRing) progressRing.classList.remove('hidden');
+
+    fetch('/api/music-video/download', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ video_id: video.video_id, url: video.url, title: video.title, channel: video.channel }),
+    }).then(res => {
+        if (!res.ok) throw new Error('Download request failed');
+        const circumference = 97.4;
+        const pollInterval = setInterval(async () => {
+            try {
+                const statusRes = await fetch(`/api/music-video/status/${video.video_id}`);
+                const status = await statusRes.json();
+                if (progressBar && status.progress > 0) {
+                    progressBar.style.strokeDashoffset = circumference - (status.progress / 100) * circumference;
+                }
+                if (status.status === 'completed') {
+                    clearInterval(pollInterval);
+                    cardEl.classList.remove('downloading');
+                    cardEl.classList.add('completed');
+                    if (progressRing) progressRing.classList.add('hidden');
+                    if (doneIcon) doneIcon.classList.remove('hidden');
+                } else if (status.status === 'error') {
+                    clearInterval(pollInterval);
+                    cardEl.classList.remove('downloading');
+                    cardEl.classList.add('errored');
+                    if (progressRing) progressRing.classList.add('hidden');
+                    if (errorIcon) errorIcon.classList.remove('hidden');
+                    cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
+                }
+            } catch (e) { }
+        }, 500);
+    }).catch(e => {
+        cardEl.classList.remove('downloading');
+        if (progressRing) progressRing.classList.add('hidden');
+        if (playBtn) playBtn.classList.remove('hidden');
+        if (errorIcon) errorIcon.classList.remove('hidden');
+        cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
+    });
+}
+
+// Global search video click — decodes base64 video data and delegates to _downloadMusicVideo
+function _gsClickVideo(cardEl) {
+    try {
+        const encoded = cardEl.dataset.video;
+        const video = JSON.parse(decodeURIComponent(escape(atob(encoded))));
+        _downloadMusicVideo(cardEl, video);
+    } catch (e) {
+        console.error('Failed to parse video data:', e);
+    }
+}
+
+// GLOBAL SEARCH BAR — Spotlight-style search from anywhere
+// ==================================================================================
+
+const _gsState = {
+    active: false,
+    query: '',
+    data: null,
+    sources: {},
+    activeSource: null,
+    abortCtrl: null,
+    altAbortCtrl: null,
+    debounceTimer: null,
+};
+
+(function initGlobalSearch() {
+    // Defer init until DOM is ready
+    const _doInit = () => {
+        const bar = document.getElementById('gsearch-bar');
+        const input = document.getElementById('gsearch-input');
+        const results = document.getElementById('gsearch-results');
+        if (!input || !bar) return;
+
+        bar.addEventListener('click', () => input.focus());
+
+        input.addEventListener('focus', () => {
+            bar.classList.add('active');
+            _gsState.active = true;
+            const shortcut = document.getElementById('gsearch-shortcut');
+            if (shortcut) shortcut.style.display = 'none';
+            if (_gsState.data && _gsState.query) _gsShowResults();
+        });
+
+        // No blur handler — closing is handled by click-outside and Escape only
+        // This prevents tab switching and result clicks from closing the panel
+
+        const clearBtn = document.getElementById('gsearch-clear');
+
+        input.addEventListener('input', () => {
+            const q = input.value.trim();
+            _gsState.query = q;
+            if (clearBtn) clearBtn.style.display = q.length > 0 ? '' : 'none';
+            if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
+            if (q.length < 2) { _gsHideResults(); return; }
+            _gsState.debounceTimer = setTimeout(() => _gsPerformSearch(q), 300);
+        });
+
+        if (clearBtn) {
+            clearBtn.addEventListener('click', e => {
+                e.stopPropagation();
+                input.value = '';
+                _gsState.query = '';
+                _gsState.data = null;
+                clearBtn.style.display = 'none';
+                _gsHideResults();
+                input.focus();
+            });
+        }
+
+        input.addEventListener('keydown', e => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
+                const q = input.value.trim();
+                if (q.length >= 2) _gsPerformSearch(q);
+            } else if (e.key === 'Escape') {
+                _gsDeactivate();
+                input.blur();
+            }
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', e => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); input.focus(); return; }
+            if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) { e.preventDefault(); input.focus(); }
+        });
+
+        // Click outside to close — uses delayed check because tab clicks replace DOM
+        document.addEventListener('click', e => {
+            if (!_gsState.active) return;
+            // Skip if click was recent interaction with search system (within 100ms of a switch)
+            if (_gsState._lastInteraction && Date.now() - _gsState._lastInteraction < 200) return;
+            setTimeout(() => {
+                if (!_gsState.active) return;
+                const freshBar = document.getElementById('gsearch-bar');
+                const freshResults = document.getElementById('gsearch-results');
+                const target = e.target;
+                if (freshBar?.contains(target) || freshResults?.contains(target)) return;
+                _gsDeactivate();
+            }, 100);
+        });
+
+        // Collapse on sidebar navigation + hide on downloads page
+        document.addEventListener('click', e => {
+            if (e.target.closest('.sidebar-link, .nav-item, .back-btn')) {
+                if (_gsState.active) _gsDeactivate();
+                // Check after navigation which page we're on
+                setTimeout(_gsUpdateVisibility, 200);
+            }
+        });
+    };
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => { _doInit(); _gsUpdateVisibility(); });
+    else { _doInit(); setTimeout(_gsUpdateVisibility, 500); }
+})();
+
+function _gsUpdateVisibility() {
+    const bar = document.getElementById('gsearch-bar');
+    if (!bar) return;
+    // Hide on downloads page where enhanced search already exists
+    const onDownloads = typeof currentPage !== 'undefined' && currentPage === 'downloads';
+    bar.style.display = onDownloads ? 'none' : '';
+    if (onDownloads && _gsState.active) _gsDeactivate();
+}
+
+function _gsDeactivate() {
+    const bar = document.getElementById('gsearch-bar');
+    const shortcut = document.getElementById('gsearch-shortcut');
+    if (bar) bar.classList.remove('active');
+    if (shortcut) shortcut.style.display = '';
+    _gsState.active = false;
+    _gsHideResults();
+}
+
+function _gsHideResults() {
+    const r = document.getElementById('gsearch-results');
+    if (r) r.classList.remove('visible');
+}
+
+function _gsShowResults() {
+    const r = document.getElementById('gsearch-results');
+    if (r && r.innerHTML.trim()) r.classList.add('visible');
+}
+
+async function _gsPerformSearch(query) {
+    if (_gsState.abortCtrl) _gsState.abortCtrl.abort();
+    if (_gsState.altAbortCtrl) _gsState.altAbortCtrl.abort();
+    _gsState.abortCtrl = new AbortController();
+    _gsState.altAbortCtrl = new AbortController();
+
+    const results = document.getElementById('gsearch-results');
+    if (!results) return;
+
+    results.innerHTML = '<div class="gsearch-loading"><div class="server-search-spinner"></div>Searching...</div>';
+    results.classList.add('visible');
+
+    try {
+        const res = await fetch('/api/enhanced-search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query }),
+            signal: _gsState.abortCtrl.signal,
+        });
+        const data = await res.json();
+        _gsState.data = data;
+        _gsState.activeSource = data.primary_source || 'spotify';
+        _gsState.sources = {};
+        _gsState.sources[_gsState.activeSource] = {
+            artists: data.spotify_artists || [],
+            albums: data.spotify_albums || [],
+            tracks: data.spotify_tracks || [],
+        };
+
+        _gsRender(data);
+
+        // Async library ownership check — adds badges + swaps play buttons for library tracks
+        setTimeout(() => _gsLibraryCheck(), 200);
+
+        // Fetch alternate sources — stream NDJSON so slow sources render incrementally
+        const alts = data.alternate_sources || [];
+        for (const src of alts) {
+            if (src === _gsState.activeSource) continue;
+            _gsFetchSourceStream(src, query);
+        }
+    } catch (e) {
+        if (e.name !== 'AbortError') results.innerHTML = '<div class="gsearch-empty">Search failed</div>';
+    }
+}
+
+async function _gsFetchSourceStream(src, query) {
+    try {
+        const res = await fetch(`/api/enhanced-search/source/${src}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query }),
+            signal: _gsState.altAbortCtrl.signal,
+        });
+        if (!res.ok) return;
+
+        if (!_gsState.sources[src]) {
+            const loadingSet = src === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
+            _gsState.sources[src] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
+        }
+        const sourceData = _gsState.sources[src];
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+
+            let idx;
+            while ((idx = buffer.indexOf('\n')) !== -1) {
+                const line = buffer.slice(0, idx).trim();
+                buffer = buffer.slice(idx + 1);
+                if (!line) continue;
+                try {
+                    const chunk = JSON.parse(line);
+                    if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
+                    else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
+                    else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
+                    else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
+                    if (chunk.type === 'done') delete sourceData._loading;
+                    _gsRenderTabs();
+                    // Re-render content if this is the active source tab
+                    if (_gsState.activeSource === src && _gsState.data) {
+                        _gsRender(_gsState.data);
+                    }
+                } catch (e) { }
+            }
+        }
+        _gsRenderTabs();
+    } catch (e) {
+        if (e.name !== 'AbortError') console.debug(`GS alt source ${src} failed:`, e);
+    }
+}
+
+function _gsRender(data) {
+    const results = document.getElementById('gsearch-results');
+    if (!results) return;
+
+    // Music Videos tab — render video grid instead of regular results
+    if (_gsState.activeSource === 'youtube_videos') {
+        const src = _gsState.sources['youtube_videos'] || {};
+        const videos = src.videos || [];
+        const isLoading = src._loading && src._loading.size > 0;
+        let h = '';
+        h += `<div class="gsearch-results-header"><span class="gsearch-results-title">Results</span><span class="gsearch-results-count">${videos.length} videos</span></div>`;
+        h += '<div class="gsearch-tabs" id="gsearch-tabs"></div>';
+        h += '<div class="gsearch-results-body">';
+        if (isLoading) {
+            h += '<div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Searching YouTube...</div>';
+        } else if (videos.length === 0) {
+            h += `<div class="gsearch-empty">No music videos found for "${_escToast(_gsState.query)}"</div>`;
+        } else {
+            h += '<div class="gsearch-section-header">🎬 Music Videos</div>';
+            h += '<div class="enh-video-grid">';
+            h += videos.map(v => {
+                const dur = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
+                const views = v.view_count >= 1000000 ? `${(v.view_count / 1000000).toFixed(1)}M` : v.view_count >= 1000 ? `${(v.view_count / 1000).toFixed(1)}K` : (v.view_count || '');
+                const vJson = btoa(unescape(encodeURIComponent(JSON.stringify(v))));
+                return `<div class="enh-video-card" data-video-id="${v.video_id}" data-video="${vJson}" onclick="_gsClickVideo(this)">
+                    <div class="enh-video-thumb"><img src="${v.thumbnail}" alt="" loading="lazy" onerror="this.style.display='none'"><div class="enh-video-play">▶</div>
+                    <div class="enh-video-progress-ring hidden"><svg viewBox="0 0 36 36"><circle class="enh-video-progress-bg" cx="18" cy="18" r="15.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3"/><circle class="enh-video-progress-bar" cx="18" cy="18" r="15.5" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="3" stroke-dasharray="97.4" stroke-dashoffset="97.4" stroke-linecap="round" transform="rotate(-90 18 18)"/></svg></div>
+                    <div class="enh-video-done hidden">✓</div><div class="enh-video-error hidden">✗</div>
+                    ${dur ? `<span class="enh-video-duration">${dur}</span>` : ''}</div>
+                    <div class="enh-video-info"><div class="enh-video-title">${_escToast(v.title)}</div><div class="enh-video-channel">${_escToast(v.channel)}${views ? ` · ${views} views` : ''}</div></div>
+                </div>`;
+            }).join('');
+            h += '</div>';
+        }
+        h += '</div>';
+        results.innerHTML = h;
+        results.classList.add('visible');
+        _gsRenderTabs();
+        return;
+    }
+
+    const src = _gsState.sources[_gsState.activeSource] || {};
+    const loading = src._loading || new Set();
+    const dbArtists = data?.db_artists || [];
+    const artists = src.artists || [];
+    const allAlbums = src.albums || [];
+    const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
+    const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+    const tracks = src.tracks || [];
+    const total = dbArtists.length + artists.length + albums.length + singles.length + tracks.length;
+    const isLoading = loading.size > 0;
+
+    if (total === 0 && !isLoading) {
+        results.innerHTML = `<div class="gsearch-empty">No results for "${_escToast(_gsState.query)}"<br><span style="font-size:10px;opacity:0.5">Try different keywords or check spelling</span></div>`;
+        results.classList.add('visible');
+        return;
+    }
+
+    const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase', youtube_videos: 'Music Videos', musicbrainz: 'MusicBrainz' };
+    const srcLabel = sourceLabels[_gsState.activeSource] || _gsState.activeSource || '';
+
+    let h = '';
+    h += `<div class="gsearch-results-header"><span class="gsearch-results-title">Results</span><span class="gsearch-results-count">${total} items</span></div>`;
+    h += '<div class="gsearch-tabs" id="gsearch-tabs"></div>';
+    h += '<div class="gsearch-results-body">';
+
+    if (dbArtists.length) {
+        h += '<div class="gsearch-section-header">📚 In Your Library</div><div class="gsearch-grid">';
+        h += dbArtists.map(a => `<div class="gsearch-item" onclick="_gsClickArtist('${a.id}', '${_escAttr(a.name)}', true)"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎤'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">Library</div></div></div>`).join('');
+        h += '</div>';
+    }
+
+    if (artists.length) {
+        h += `<div class="gsearch-section-header">🎤 Artists <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid" id="gsearch-artists-grid">`;
+        h += artists.map(a => `<div class="gsearch-item" onclick="_gsClickArtist('${a.id}', '${_escAttr(a.name)}', false)" ${!a.image_url ? `data-artist-id="${a.id}" data-needs-image="true"` : ''}><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎤'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div></div></div>`).join('');
+        h += '</div>';
+    } else if (loading.has('artists')) {
+        h += `<div class="gsearch-section-header">🎤 Artists <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading artists...</div>`;
+    }
+
+    const activeSrc = _gsState.activeSource || 'spotify';
+
+    if (albums.length) {
+        h += `<div class="gsearch-section-header">💿 Albums <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid">`;
+        h += albums.map(a => {
+            const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
+            const yr = a.release_date ? a.release_date.substring(0, 4) : '';
+            const img = (a.image_url || '').replace(/'/g, "\\'");
+            return `<div class="gsearch-item" onclick="_gsClickAlbum('${a.id}', '${_escAttr(a.name)}', '${_escAttr(ar)}', '${img}', '${activeSrc}')"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '💿'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}${yr ? ` · ${yr}` : ''}</div></div></div>`;
+        }).join('');
+        h += '</div>';
+    }
+
+    if (!albums.length && !singles.length && loading.has('albums')) {
+        h += `<div class="gsearch-section-header">💿 Albums <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading albums...</div>`;
+    }
+
+    if (singles.length) {
+        h += `<div class="gsearch-section-header">🎶 Singles & EPs <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid">`;
+        h += singles.map(a => {
+            const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
+            const img = (a.image_url || '').replace(/'/g, "\\'");
+            return `<div class="gsearch-item" onclick="_gsClickAlbum('${a.id}', '${_escAttr(a.name)}', '${_escAttr(ar)}', '${img}', '${activeSrc}')"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎶'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}</div></div></div>`;
+        }).join('');
+        h += '</div>';
+    }
+
+    if (tracks.length) {
+        h += `<div class="gsearch-section-header">🎵 Tracks <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-track-list">`;
+        h += tracks.map(t => {
+            const ar = t.artist || (t.artists ? t.artists.join(', ') : '');
+            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+            return `<div class="gsearch-track" onclick="_gsClickTrack('${_escAttr(ar)}', '${_escAttr(t.name)}', '${_escAttr(t.album || '')}', '${_escAttr(t.id || '')}', '${_escAttr(t.image_url || '')}', ${t.duration_ms || 0})"><div class="gsearch-item-art" style="width:32px;height:32px;border-radius:6px">${t.image_url ? `<img src="${t.image_url}" loading="lazy">` : '🎵'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(t.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}${t.album ? ` · ${_escToast(t.album)}` : ''}</div></div><div class="gsearch-track-dur">${dur}</div><button class="gsearch-play-btn" onclick="event.stopPropagation(); _gsPlayTrack('${_escAttr(t.name)}', '${_escAttr(ar)}', '${_escAttr(t.album || '')}')" title="Stream">▶</button></div>`;
+        }).join('');
+        h += '</div>';
+    } else if (loading.has('tracks')) {
+        h += `<div class="gsearch-section-header">🎵 Tracks <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading tracks...</div>`;
+    }
+
+    h += '</div>';
+    results.innerHTML = h;
+    results.classList.add('visible');
+    _gsRenderTabs();
+
+    // Lazy load artist images for sources that don't provide them (iTunes/Deezer)
+    _gsLazyLoadArtistImages();
+}
+
+async function _gsLazyLoadArtistImages() {
+    const grid = document.getElementById('gsearch-artists-grid');
+    if (!grid) return;
+    const cards = grid.querySelectorAll('[data-needs-image="true"]');
+    if (cards.length === 0) return;
+    const activeSrc = _gsState.activeSource || 'spotify';
+
+    for (const card of cards) {
+        const artistId = card.dataset.artistId;
+        if (!artistId) continue;
+        try {
+            const res = await fetch(`/api/artist/${artistId}/image?source=${activeSrc}`);
+            const data = await res.json();
+            if (data.success && data.image_url) {
+                const artDiv = card.querySelector('.gsearch-item-art');
+                if (artDiv) artDiv.innerHTML = `<img src="${data.image_url}" loading="lazy">`;
+                card.removeAttribute('data-needs-image');
+            }
+        } catch (e) { /* ignore */ }
+    }
+}
+
+function _gsRenderTabs() {
+    const el = document.getElementById('gsearch-tabs');
+    if (!el) return;
+    const sources = Object.keys(_gsState.sources);
+    const labels = {
+        spotify: 'Spotify',
+        itunes: 'Apple Music',
+        deezer: 'Deezer',
+        discogs: 'Discogs',
+        hydrabase: 'Hydrabase',
+        youtube_videos: 'Music Videos',
+        musicbrainz: 'MusicBrainz',
+    };
+    const visibleSources = sources.filter(s => {
+        const d = _gsState.sources[s] || {};
+        const count = s === 'youtube_videos'
+            ? (d.videos?.length || 0)
+            : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
+        const isLoading = !!(d._loading && d._loading.size > 0);
+        return isLoading || count > 0 || s === _gsState.activeSource;
+    });
+    if (visibleSources.length < 2) { el.style.display = 'none'; return; }
+    el.style.display = 'flex';
+    el.innerHTML = visibleSources.map(s => {
+        const d = _gsState.sources[s];
+        const c = s === 'youtube_videos'
+            ? (d.videos?.length || 0)
+            : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
+        return `<button class="gsearch-tab${s === _gsState.activeSource ? ' active' : ''}" onclick="_gsSwitchSource('${s}')">${labels[s] || s} (${c})</button>`;
+    }).join('');
+}
+
+function _gsSwitchSource(src) {
+    _gsState._lastInteraction = Date.now();
+    _gsState.activeSource = src;
+    _gsRender(_gsState.data);
+    const input = document.getElementById('gsearch-input');
+    if (input) input.focus();
+}
+
+function _gsClickArtist(id, name, isLibrary) {
+    _gsDeactivate();
+    if (isLibrary) {
+        // Same as enhanced search: navigateToArtistDetail
+        navigateToArtistDetail(id, name);
+    } else {
+        // Same as enhanced search: navigate to Artists page + selectArtistForDetail
+        navigateToPage('artists');
+        setTimeout(() => {
+            selectArtistForDetail({ id, name, image_url: '' }, {
+                source: _gsState.activeSource || '',
+            });
+        }, 150);
+    }
+}
+
+async function _gsClickAlbum(albumId, albumName, artistName, imageUrl, source) {
+    _gsDeactivate();
+    // Same flow as handleEnhancedSearchAlbumClick — fetch album, open download modal
+    showLoadingOverlay('Loading album...');
+    try {
+        const params = new URLSearchParams({ name: albumName, artist: artistName });
+        if (source && source !== 'spotify') params.set('source', source);
+        const response = await fetch(`/api/spotify/album/${albumId}?${params}`);
+        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
+        const albumData = await response.json();
+
+        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+            hideLoadingOverlay();
+            showToast(`No tracks available for "${albumName}"`, 'warning');
+            return;
+        }
+
+        const enrichedTracks = albumData.tracks.map(t => ({
+            ...t,
+            album: { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks }
+        }));
+
+        const virtualPlaylistId = `enhanced_search_album_${albumId}`;
+        const firstArtist = (albumData.artists || [])[0] || {};
+        const artistObj = { id: firstArtist.id || '', name: firstArtist.name || artistName, source: source || '' };
+        const albumObj = { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks, artists: albumData.artists || [{ name: artistName }] };
+
+        await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, `[${artistName}] ${albumData.name}`, enrichedTracks, albumObj, artistObj, false);
+
+        // Register download bubble (same pattern as enhanced search)
+        registerSearchDownload(
+            {
+                id: albumData.id,
+                name: albumData.name,
+                artist: artistName,
+                image_url: albumData.images?.[0]?.url || imageUrl || null,
+                images: albumData.images || []
+            },
+            'album',
+            virtualPlaylistId,
+            artistName
+        );
+
+    } catch (e) {
+        hideLoadingOverlay();
+        showToast('Failed to load album: ' + e.message, 'error');
+    }
+}
+
+async function _gsClickTrack(artistName, trackName, albumName, trackId, imageUrl, durationMs) {
+    _gsDeactivate();
+
+    // Build enriched track + open download modal directly (same as enhanced search)
+    const virtualPlaylistId = `gsearch_track_${trackId || (artistName + '_' + trackName).replace(/\s/g, '_')}`;
+    const enrichedTrack = {
+        id: trackId || '',
+        name: trackName,
+        artists: [artistName],
+        album: { name: albumName || '', id: null, album_type: 'single', images: imageUrl ? [{ url: imageUrl }] : [], total_tracks: 1 },
+        duration_ms: durationMs || 0,
+        image_url: imageUrl || '',
+    };
+    const albumObject = {
+        name: albumName || '', id: null, album_type: 'single',
+        images: imageUrl ? [{ url: imageUrl }] : [],
+        artists: [{ name: artistName }], total_tracks: 1,
+    };
+    const artistObject = { id: null, name: artistName };
+    const playlistName = `${artistName} - ${trackName}`;
+
+    try {
+        showLoadingOverlay('Loading track...');
+        await openDownloadMissingModalForArtistAlbum(
+            virtualPlaylistId, playlistName, [enrichedTrack], albumObject, artistObject, false
+        );
+
+        // Register download bubble (same pattern as enhanced search)
+        registerSearchDownload(
+            {
+                id: trackId || '',
+                name: trackName,
+                artist: artistName,
+                image_url: imageUrl || null,
+                images: imageUrl ? [{ url: imageUrl }] : []
+            },
+            'track',
+            virtualPlaylistId,
+            artistName
+        );
+    } catch (e) {
+        console.error('Error opening track download:', e);
+        // Fallback: navigate to enhanced search
+        navigateToPage('downloads');
+        setTimeout(() => {
+            const input = document.getElementById('enhanced-search-input');
+            if (input) { input.value = `${artistName} ${trackName}`.trim(); input.dispatchEvent(new Event('input')); }
+        }, 300);
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function _gsPlayTrack(trackName, artistName, albumName) {
+    try {
+        showToast('Searching for stream...', 'info');
+        const res = await fetch('/api/enhanced-search/stream-track', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_name: trackName, artist_name: artistName, album_name: albumName })
+        });
+        const data = await res.json();
+        if (data.success && data.result) {
+            if (typeof startStream === 'function') {
+                startStream(data.result);
+            } else {
+                showToast('Streaming not available', 'error');
+            }
+        } else {
+            showToast(data.error || 'No stream found', 'error');
+        }
+    } catch (e) {
+        showToast('Stream failed: ' + e.message, 'error');
+    }
+}
+
+// Async library check for global search results — adds badges + swaps play buttons
+async function _gsLibraryCheck() {
+    try {
+        const src = _gsState.sources[_gsState.activeSource] || {};
+        const allAlbums = src.albums || [];
+        const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
+        const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+        const tracks = src.tracks || [];
+        if (!allAlbums.length && !tracks.length) return;
+
+        const res = await fetch('/api/enhanced-search/library-check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                albums: allAlbums.map(a => ({ name: a.name, artist: a.artist || (a.artists ? a.artists.join(', ') : '') })),
+                tracks: tracks.map(t => ({ name: t.name, artist: t.artist || (t.artists ? t.artists.join(', ') : '') })),
+            })
+        });
+        const checkData = await res.json();
+
+        // Add "In Library" badges to albums — match by index against allAlbums order
+        const albumResults = checkData.albums || [];
+        let albumIdx = 0;
+        // Albums section
+        document.querySelectorAll('#gsearch-results .gsearch-results-body').forEach(body => {
+            // Find all gsearch-item elements and tag ones that are albums
+            const sections = body.querySelectorAll('.gsearch-section-header');
+            sections.forEach(header => {
+                const text = header.textContent;
+                const isAlbumSection = text.includes('Albums') || text.includes('Singles');
+                if (!isAlbumSection) return;
+                const grid = header.nextElementSibling;
+                if (!grid) return;
+                const items = grid.querySelectorAll('.gsearch-item');
+                items.forEach(item => {
+                    if (albumIdx < albumResults.length && albumResults[albumIdx]) {
+                        if (!item.querySelector('.gsearch-item-badge')) {
+                            const badge = document.createElement('span');
+                            badge.className = 'gsearch-item-badge';
+                            badge.textContent = 'In Library';
+                            item.appendChild(badge);
+                        }
+                    }
+                    albumIdx++;
+                });
+            });
+        });
+
+        // Tag tracks + swap play buttons for library playback
+        const trackResults = checkData.tracks || [];
+        const trackEls = document.querySelectorAll('#gsearch-results .gsearch-track');
+        trackEls.forEach((el, i) => {
+            const tr = trackResults[i];
+            if (tr && tr.in_library) {
+                // Add badge
+                if (!el.querySelector('.gsearch-item-badge')) {
+                    const badge = document.createElement('span');
+                    badge.className = 'gsearch-item-badge';
+                    badge.textContent = 'In Library';
+                    badge.style.marginRight = '4px';
+                    el.querySelector('.gsearch-track-dur')?.before(badge);
+                }
+
+                // Swap play button to library playback
+                if (tr.file_path) {
+                    const playBtn = el.querySelector('.gsearch-play-btn');
+                    if (playBtn) {
+                        const newBtn = playBtn.cloneNode(true);
+                        newBtn.removeAttribute('onclick');
+                        newBtn.title = 'Play from library';
+                        newBtn.style.background = 'rgba(76,175,80,0.15)';
+                        newBtn.style.color = '#4caf50';
+                        newBtn.addEventListener('click', e => {
+                            e.stopPropagation();
+                            playLibraryTrack(
+                                { id: tr.track_id, title: tr.title, file_path: tr.file_path, _stats_image: tr.album_thumb_url || null },
+                                tr.album_title || '',
+                                tr.artist_name || ''
+                            );
+                        });
+                        playBtn.replaceWith(newBtn);
+                    }
+                }
+            } else if (tr && tr.in_wishlist) {
+                if (!el.querySelector('.gsearch-item-badge')) {
+                    const badge = document.createElement('span');
+                    badge.className = 'gsearch-item-badge gsearch-wishlist-badge';
+                    badge.textContent = 'In Wishlist';
+                    badge.style.marginRight = '4px';
+                    el.querySelector('.gsearch-track-dur')?.before(badge);
+                }
+            }
+        });
+    } catch (e) {
+        // Non-critical
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+/**
+ * Escape a value for safe use inside a single-quoted JS string literal
+ * within a double-quoted HTML attribute (e.g. onclick="fn('${val}')").
+ *
+ * Layer 1 (JS): escape \ and ' so the JS string parses correctly.
+ * Layer 2 (HTML): escape &, ", <, > so the HTML attribute parses correctly.
+ * The browser applies these in reverse: HTML-decode first, then JS-execute.
+ */
+function escapeForInlineJs(str) {
+    if (str == null) return '';
+    return String(str)
+        .replace(/\\/g, '\\\\')   // JS: literal backslash
+        .replace(/'/g, "\\'")     // JS: single quote
+        .replace(/&/g, '&amp;')   // HTML: ampersand
+        .replace(/"/g, '&quot;')  // HTML: double quote
+        .replace(/</g, '&lt;')    // HTML: less-than
+        .replace(/>/g, '&gt;');   // HTML: greater-than
+}
+
+function formatArtists(artists) {
+    if (!artists || !Array.isArray(artists)) {
+        return 'Unknown Artist';
+    }
+
+    // Handle both string arrays and object arrays with 'name' property
+    const artistNames = artists.map(artist => {
+        let artistName;
+        if (typeof artist === 'string') {
+            artistName = artist;
+        } else if (artist && typeof artist === 'object' && artist.name) {
+            artistName = artist.name;
+        } else {
+            artistName = 'Unknown Artist';
+        }
+
+        // Clean featured artists from the name
+        return cleanArtistName(artistName);
+    });
+
+    return artistNames.join(', ') || 'Unknown Artist';
+}
+
+async function checkForUpdates() {
+    try {
+        const res = await fetch('/api/update-check');
+        if (!res.ok) return;
+        const data = await res.json();
+        const btn = document.querySelector('.version-button');
+        if (!btn) return;
+        if (data.update_available) {
+            const dismissed = localStorage.getItem('soulsync-update-dismissed');
+            if (dismissed !== data.latest_sha) {
+                // Add glow class
+                btn.classList.add('update-available');
+                // Add UPDATE badge if not already present
+                if (!btn.querySelector('.update-badge')) {
+                    const badge = document.createElement('span');
+                    badge.className = 'update-badge';
+                    badge.textContent = 'UPDATE';
+                    btn.appendChild(badge);
+                }
+                // Show toast on first detection (not if already notified this session)
+                const notified = sessionStorage.getItem('soulsync-update-notified');
+                if (notified !== data.latest_sha) {
+                    sessionStorage.setItem('soulsync-update-notified', data.latest_sha);
+                    showToast(data.is_docker
+                        ? 'A new SoulSync update has been pushed to the repo — Docker image will be updated soon!'
+                        : 'A new SoulSync update is available!', 'info');
+                }
+            }
+        } else {
+            btn.classList.remove('update-available');
+            const badge = btn.querySelector('.update-badge');
+            if (badge) badge.remove();
+        }
+    } catch (e) {
+        console.debug('Update check failed:', e);
+    }
+}
+
+async function showVersionInfo() {
+    // Check update status before dismissing so we can pass it to the modal
+    let updateInfo = null;
+    const btn = document.querySelector('.version-button');
+    const hadUpdate = btn && btn.classList.contains('update-available');
+
+    // Dismiss update glow when user opens the modal
+    if (hadUpdate) {
+        btn.classList.remove('update-available');
+        const badge = btn.querySelector('.update-badge');
+        if (badge) badge.remove();
+        try {
+            const updateRes = await fetch('/api/update-check');
+            if (updateRes.ok) {
+                updateInfo = await updateRes.json();
+                if (updateInfo.latest_sha) {
+                    localStorage.setItem('soulsync-update-dismissed', updateInfo.latest_sha);
+                }
+            }
+        } catch (e) { /* ignore */ }
+    }
+
+    try {
+        console.log('Fetching version info...');
+
+        // Fetch version data from API
+        const response = await fetch('/api/version-info');
+        if (!response.ok) {
+            throw new Error('Failed to fetch version info');
+        }
+
+        const versionData = await response.json();
+        console.log('Version data received:', versionData);
+
+        // Populate modal content
+        populateVersionModal(versionData, hadUpdate ? updateInfo : null);
+
+        // Show modal
+        const modalOverlay = document.getElementById('version-modal-overlay');
+        modalOverlay.classList.remove('hidden');
+
+        console.log('Version modal opened');
+
+    } catch (error) {
+        console.error('Error showing version info:', error);
+        showToast('Failed to load version information', 'error');
+    }
+}
+
+function closeVersionModal() {
+    const modalOverlay = document.getElementById('version-modal-overlay');
+    modalOverlay.classList.add('hidden');
+    console.log('Version modal closed');
+}
+
+function populateVersionModal(versionData, updateInfo) {
+    const container = document.getElementById('version-content-container');
+    if (!container) {
+        console.error('Version content container not found');
+        return;
+    }
+
+    // Update header with dynamic data
+    const titleElement = document.querySelector('.version-modal-title');
+    const subtitleElement = document.querySelector('.version-modal-subtitle');
+
+    if (titleElement) titleElement.textContent = versionData.title;
+    if (subtitleElement) subtitleElement.textContent = versionData.subtitle;
+
+    // Clear existing content
+    container.innerHTML = '';
+
+    // Show update banner if an update was available when modal was opened
+    if (updateInfo && updateInfo.update_available) {
+        const banner = document.createElement('div');
+        banner.className = 'version-update-banner';
+        const isDocker = updateInfo.is_docker;
+        banner.innerHTML = `
+            <div class="version-update-banner-icon">&#x2B06;</div>
+            <div class="version-update-banner-text">
+                <strong>${isDocker ? 'Repo update detected' : 'New update available'}</strong>
+                <span>${isDocker
+                ? 'A new update has been pushed to the repo. The Docker image will be updated soon — no action needed yet.'
+                : `Your version: ${updateInfo.current_sha || 'unknown'} &rarr; Latest: ${updateInfo.latest_sha || 'unknown'}`}</span>
+            </div>
+        `;
+        container.appendChild(banner);
+    }
+
+    // Create sections
+    versionData.sections.forEach(section => {
+        const sectionDiv = document.createElement('div');
+        sectionDiv.className = 'version-feature-section';
+
+        // Section title
+        const titleDiv = document.createElement('div');
+        titleDiv.className = 'version-section-title';
+        titleDiv.textContent = section.title;
+        sectionDiv.appendChild(titleDiv);
+
+        // Section description
+        const descDiv = document.createElement('div');
+        descDiv.className = 'version-section-description';
+        descDiv.textContent = section.description;
+        sectionDiv.appendChild(descDiv);
+
+        // Features list
+        const featuresList = document.createElement('ul');
+        featuresList.className = 'version-feature-list';
+
+        section.features.forEach(feature => {
+            const featureItem = document.createElement('li');
+            featureItem.className = 'version-feature-item';
+            featureItem.textContent = feature;
+            featuresList.appendChild(featureItem);
+        });
+
+        sectionDiv.appendChild(featuresList);
+
+        // Usage note (if present)
+        if (section.usage_note) {
+            const usageDiv = document.createElement('div');
+            usageDiv.className = 'version-usage-note';
+            usageDiv.textContent = `💡 ${section.usage_note}`;
+            sectionDiv.appendChild(usageDiv);
+        }
+
+        container.appendChild(sectionDiv);
+    });
+
+    console.log('Version modal content populated');
+}
+
+// ===============================
+// ADDITIONAL STYLES FOR SEARCH RESULTS
+// ===============================
+
+// Add dynamic styles for search results (since they're created dynamically)
+const additionalStyles = `
+<style>
+.search-result-item {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.search-result-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(29, 185, 84, 0.2);
+}
+
+.result-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 8px;
+}
+
+.result-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.result-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.result-artist {
+    font-size: 12px;
+    color: #b3b3b3;
+    margin-bottom: 2px;
+}
+
+.result-album {
+    font-size: 11px;
+    color: #888888;
+}
+
+.result-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.stream-button, .download-button {
+    padding: 6px 12px;
+    border: none;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.stream-button {
+    background: rgba(var(--accent-rgb), 0.1);
+    color: rgb(var(--accent-light-rgb));
+    border: 1px solid rgba(var(--accent-rgb), 0.3);
+}
+
+.stream-button:hover {
+    background: rgba(29, 185, 84, 0.2);
+    border-color: rgba(29, 185, 84, 0.5);
+}
+
+.download-button {
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.download-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+
+.result-details {
+    display: flex;
+    gap: 16px;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.result-quality {
+    color: rgb(var(--accent-light-rgb));
+    font-weight: 500;
+}
+
+.no-results, .no-artists, .error {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    padding: 40px 20px;
+    font-size: 14px;
+}
+
+.artist-card {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 16px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.artist-card:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(29, 185, 84, 0.2);
+}
+
+.artist-image {
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 12px auto;
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.artist-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.artist-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32px;
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.artist-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.artist-albums {
+    font-size: 12px;
+    color: #b3b3b3;
+}
+</style>
+`;
+
+// Inject additional styles
+document.head.insertAdjacentHTML('beforeend', additionalStyles);
+
+// ============================================================================
+
diff --git a/webui/static/enrichment.js b/webui/static/enrichment.js
new file mode 100644
index 00000000..3a361baf
--- /dev/null
+++ b/webui/static/enrichment.js
@@ -0,0 +1,3552 @@
+// MUSICBRAINZ ENRICHMENT UI - PHASE 5 WEB UI
+// ============================================================================
+
+/**
+ * Poll MusicBrainz status every 2 seconds and update UI
+ */
+async function updateMusicBrainzStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/musicbrainz/status');
+        if (!response.ok) { console.warn('MusicBrainz status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateMusicBrainzStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating MusicBrainz status:', error);
+    }
+}
+
+function updateMusicBrainzStatusFromData(data) {
+    const button = document.getElementById('musicbrainz-button');
+    if (!button) return;
+
+    // Update button state classes
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    // Update tooltip content
+    const tooltipStatus = document.getElementById('mb-tooltip-status');
+    const tooltipCurrent = document.getElementById('mb-tooltip-current');
+    const tooltipProgress = document.getElementById('mb-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) {
+            tooltipStatus.textContent = 'Complete';
+        } else if (data.running && !data.paused) {
+            tooltipStatus.textContent = 'Running';
+        } else if (data.paused) {
+            tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
+        } else {
+            tooltipStatus.textContent = 'Idle';
+        }
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            const type = data.current_item.type || 'item';
+            const name = data.current_item.name;
+            tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
+        } else {
+            tooltipCurrent.textContent = 'No active matches';
+        }
+    }
+
+    if (tooltipProgress && data.progress) {
+        const artists = data.progress.artists || {};
+        const albums = data.progress.albums || {};
+        const tracks = data.progress.tracks || {};
+
+        const currentType = data.current_item?.type;
+        let progressText = '';
+
+        const artistsComplete = artists.matched >= artists.total;
+        const albumsComplete = albums.matched >= albums.total;
+
+        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
+        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+            progressText = `Albums: ${albums.matched || 0} / ${albums.total} (${albums.percent || 0}%)`;
+        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total} (${tracks.percent || 0}%)`;
+        } else {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
+        }
+
+        tooltipProgress.textContent = progressText;
+    }
+}
+
+/**
+ * Toggle MusicBrainz enrichment pause/resume
+ */
+async function toggleMusicBrainzEnrichment() {
+    try {
+        const button = document.getElementById('musicbrainz-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/musicbrainz/pause' : '/api/musicbrainz/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} MusicBrainz enrichment`);
+        }
+
+        // Immediately update UI
+        await updateMusicBrainzStatus();
+
+        console.log(`✅ MusicBrainz enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling MusicBrainz enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// Initialize MusicBrainz UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('musicbrainz-button');
+        if (button) {
+            button.addEventListener('click', toggleMusicBrainzEnrichment);
+            // Start polling
+            updateMusicBrainzStatus();
+            setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
+            console.log('✅ MusicBrainz UI initialized');
+        }
+    });
+} else {
+    const button = document.getElementById('musicbrainz-button');
+    if (button) {
+        button.addEventListener('click', toggleMusicBrainzEnrichment);
+        // Start polling
+        updateMusicBrainzStatus();
+        setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
+        console.log('✅ MusicBrainz UI initialized');
+    }
+}
+
+// ============================================================================
+// AUDIODB ENRICHMENT UI
+// ============================================================================
+
+/**
+ * Poll AudioDB status every 2 seconds and update UI
+ */
+async function updateAudioDBStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/audiodb/status');
+        if (!response.ok) { console.warn('AudioDB status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateAudioDBStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating AudioDB status:', error);
+    }
+}
+
+function updateAudioDBStatusFromData(data) {
+    const button = document.getElementById('audiodb-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const tooltipStatus = document.getElementById('audiodb-tooltip-status');
+    const tooltipCurrent = document.getElementById('audiodb-tooltip-current');
+    const tooltipProgress = document.getElementById('audiodb-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            const type = data.current_item.type || 'item';
+            const name = data.current_item.name;
+            tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
+        } else {
+            tooltipCurrent.textContent = 'No active matches';
+        }
+    }
+
+    if (tooltipProgress && data.progress) {
+        const artists = data.progress.artists || {};
+        const albums = data.progress.albums || {};
+        const tracks = data.progress.tracks || {};
+
+        const currentType = data.current_item?.type;
+        let progressText = '';
+
+        const artistsComplete = artists.matched >= artists.total;
+        const albumsComplete = albums.matched >= albums.total;
+
+        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+        } else {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        }
+
+        tooltipProgress.textContent = progressText;
+    }
+}
+
+function updateDiscogsStatusFromData(data) {
+    const button = document.getElementById('discogs-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const tooltipStatus = document.getElementById('discogs-tooltip-status');
+    const tooltipCurrent = document.getElementById('discogs-tooltip-current');
+    const tooltipProgress = document.getElementById('discogs-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) tooltipStatus.textContent = 'Complete';
+        else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
+        else if (data.paused) tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
+        else tooltipStatus.textContent = 'Idle';
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) tooltipCurrent.textContent = 'All items processed';
+        else if (data.current_item) tooltipCurrent.textContent = `Processing: "${data.current_item}"`;
+        else tooltipCurrent.textContent = 'No active matches';
+    }
+
+    if (tooltipProgress && data.stats) {
+        const s = data.stats;
+        tooltipProgress.textContent = `Matched: ${s.matched || 0} | Not found: ${s.not_found || 0} | Pending: ${s.pending || 0}`;
+    }
+}
+
+async function toggleDiscogsEnrichment() {
+    try {
+        const button = document.getElementById('discogs-button');
+        if (!button) return;
+        const isPaused = button.classList.contains('paused') || button.classList.contains('complete');
+        const endpoint = isPaused ? '/api/discogs/resume' : '/api/discogs/pause';
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (response.ok) {
+            showToast(isPaused ? 'Discogs enrichment resumed' : 'Discogs enrichment paused', 'info');
+        }
+    } catch (e) {
+        showToast('Failed to toggle Discogs enrichment', 'error');
+    }
+}
+
+/**
+ * Toggle AudioDB enrichment pause/resume
+ */
+async function toggleAudioDBEnrichment() {
+    try {
+        const button = document.getElementById('audiodb-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/audiodb/pause' : '/api/audiodb/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} AudioDB enrichment`);
+        }
+
+        // Immediately update UI
+        await updateAudioDBStatus();
+
+        console.log(`✅ AudioDB enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling AudioDB enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// Initialize AudioDB UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('audiodb-button');
+        if (button) {
+            button.addEventListener('click', toggleAudioDBEnrichment);
+            updateAudioDBStatus();
+            setInterval(updateAudioDBStatus, 2000);
+            console.log('✅ AudioDB UI initialized');
+        }
+    });
+} else {
+    const button = document.getElementById('audiodb-button');
+    if (button) {
+        button.addEventListener('click', toggleAudioDBEnrichment);
+        updateAudioDBStatus();
+        setInterval(updateAudioDBStatus, 2000);
+        console.log('✅ AudioDB UI initialized');
+    }
+}
+
+// ===================================================================
+// DEEZER ENRICHMENT STATUS
+// ===================================================================
+
+async function updateDeezerStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/deezer/status');
+        if (!response.ok) { console.warn('Deezer status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateDeezerStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Deezer status:', error);
+    }
+}
+
+function updateDeezerStatusFromData(data) {
+    const button = document.getElementById('deezer-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const tooltipStatus = document.getElementById('deezer-tooltip-status');
+    const tooltipCurrent = document.getElementById('deezer-tooltip-current');
+    const tooltipProgress = document.getElementById('deezer-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        const artists = data.progress.artists || {};
+        const albums = data.progress.albums || {};
+        const tracks = data.progress.tracks || {};
+
+        const currentType = data.current_item?.type;
+        let progressText = '';
+
+        const artistsComplete = artists.matched >= artists.total;
+        const albumsComplete = albums.matched >= albums.total;
+
+        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+        } else {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        }
+
+        tooltipProgress.textContent = progressText;
+    }
+}
+
+async function toggleDeezerEnrichment() {
+    try {
+        const button = document.getElementById('deezer-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/deezer/pause' : '/api/deezer/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Deezer enrichment`);
+        }
+
+        // Immediately update UI
+        await updateDeezerStatus();
+
+        console.log(`✅ Deezer enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Deezer enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// Initialize Deezer UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('deezer-button');
+        if (button) {
+            button.addEventListener('click', toggleDeezerEnrichment);
+            updateDeezerStatus();
+            setInterval(updateDeezerStatus, 2000);
+            console.log('✅ Deezer UI initialized');
+        }
+    });
+} else {
+    const button = document.getElementById('deezer-button');
+    if (button) {
+        button.addEventListener('click', toggleDeezerEnrichment);
+        updateDeezerStatus();
+        setInterval(updateDeezerStatus, 2000);
+        console.log('✅ Deezer UI initialized');
+    }
+}
+
+// ===================================================================
+// SPOTIFY ENRICHMENT STATUS
+// ===================================================================
+
+async function updateSpotifyEnrichmentStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/spotify-enrichment/status');
+        if (!response.ok) { console.warn('Spotify enrichment status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateSpotifyEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Spotify enrichment status:', error);
+    }
+}
+
+function updateSpotifyEnrichmentStatusFromData(data) {
+    const button = document.getElementById('spotify-enrich-button');
+    if (!button) return;
+
+    const notAuthenticated = data.authenticated === false;
+    const isRateLimited = data.rate_limited === true;
+    const budgetExhausted = data.daily_budget && data.daily_budget.exhausted;
+
+    button.classList.remove('active', 'paused', 'complete', 'no-auth');
+    if (data.paused) {
+        button.classList.add('paused');
+    } else if (notAuthenticated) {
+        button.classList.add('no-auth');
+    } else if (isRateLimited || budgetExhausted) {
+        button.classList.add('paused');
+    } else if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('spotify-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('spotify-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('spotify-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+        else if (isRateLimited) { tooltipStatus.textContent = 'Rate Limited'; }
+        else if (budgetExhausted) { tooltipStatus.textContent = 'Daily Limit Reached'; }
+        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running) { tooltipStatus.textContent = 'Running'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.paused) {
+            tooltipCurrent.textContent = notAuthenticated ? 'Connect Spotify in Settings to enrich' : 'Click to resume';
+        } else if (notAuthenticated) {
+            tooltipCurrent.textContent = 'Connect Spotify in Settings to enrich';
+        } else if (isRateLimited) {
+            const info = data.rate_limit || {};
+            const remaining = info.remaining_seconds || 0;
+            tooltipCurrent.textContent = remaining > 0 ? `Waiting ${Math.ceil(remaining / 60)}m for rate limit to clear` : 'Waiting for rate limit to clear';
+        } else if (budgetExhausted) {
+            const resets = data.daily_budget.resets_in_seconds || 0;
+            const hours = Math.floor(resets / 3600);
+            const mins = Math.floor((resets % 3600) / 60);
+            tooltipCurrent.textContent = `Resets in ${hours}h ${mins}m`;
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        } else {
+            tooltipCurrent.textContent = 'Waiting for next item...';
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        if (notAuthenticated) {
+            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+        } else {
+            const artists = data.progress.artists || {};
+            const albums = data.progress.albums || {};
+            const tracks = data.progress.tracks || {};
+
+            const currentType = data.current_item?.type || '';
+            let progressText = '';
+
+            const artistsComplete = artists.matched >= artists.total;
+            const albumsComplete = albums.matched >= albums.total;
+
+            if (currentType === 'artist') {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else if (currentType.includes('album')) {
+                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+            } else if (currentType.includes('track')) {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            } else if (!artistsComplete) {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else if (!albumsComplete) {
+                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+            } else {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            }
+
+            tooltipProgress.textContent = progressText;
+        }
+    }
+}
+
+async function toggleSpotifyEnrichment() {
+    try {
+        const button = document.getElementById('spotify-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/spotify-enrichment/pause' : '/api/spotify-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}));
+            if (data.rate_limited) {
+                showToast('Cannot resume — Spotify is rate limited', 'warning');
+                return;
+            }
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Spotify enrichment`);
+        }
+
+        await updateSpotifyEnrichmentStatus();
+        console.log(`Spotify enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Spotify enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// Initialize Spotify Enrichment UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('spotify-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleSpotifyEnrichment);
+            updateSpotifyEnrichmentStatus();
+            setInterval(updateSpotifyEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('spotify-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleSpotifyEnrichment);
+        updateSpotifyEnrichmentStatus();
+        setInterval(updateSpotifyEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// ITUNES ENRICHMENT STATUS
+// ===================================================================
+
+async function updateiTunesEnrichmentStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/itunes-enrichment/status');
+        if (!response.ok) { console.warn('iTunes enrichment status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateiTunesEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating iTunes enrichment status:', error);
+    }
+}
+
+function updateiTunesEnrichmentStatusFromData(data) {
+    const button = document.getElementById('itunes-enrich-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const tooltipStatus = document.getElementById('itunes-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('itunes-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('itunes-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        const artists = data.progress.artists || {};
+        const albums = data.progress.albums || {};
+        const tracks = data.progress.tracks || {};
+
+        const currentType = data.current_item?.type || '';
+        let progressText = '';
+
+        const artistsComplete = artists.matched >= artists.total;
+        const albumsComplete = albums.matched >= albums.total;
+
+        if (currentType === 'artist') {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        } else if (currentType.includes('album')) {
+            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+        } else if (currentType.includes('track')) {
+            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+        } else if (!artistsComplete) {
+            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+        } else if (!albumsComplete) {
+            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+        } else {
+            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+        }
+
+        tooltipProgress.textContent = progressText;
+    }
+}
+
+async function toggleiTunesEnrichment() {
+    try {
+        const button = document.getElementById('itunes-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/itunes-enrichment/pause' : '/api/itunes-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} iTunes enrichment`);
+        }
+
+        await updateiTunesEnrichmentStatus();
+        console.log(`iTunes enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling iTunes enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// Initialize iTunes Enrichment UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('itunes-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleiTunesEnrichment);
+            updateiTunesEnrichmentStatus();
+            setInterval(updateiTunesEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('itunes-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleiTunesEnrichment);
+        updateiTunesEnrichmentStatus();
+        setInterval(updateiTunesEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// LAST.FM ENRICHMENT STATUS
+// ===================================================================
+
+async function updateLastFMEnrichmentStatus() {
+    if (socketConnected) return;
+    if (document.hidden) return;
+    try {
+        const response = await fetch('/api/lastfm-enrichment/status');
+        if (!response.ok) { console.warn('Last.fm status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateLastFMEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Last.fm status:', error);
+    }
+}
+
+function updateLastFMEnrichmentStatusFromData(data) {
+    const button = document.getElementById('lastfm-enrich-button');
+    if (!button) return;
+
+    const notAuthenticated = data.authenticated === false;
+
+    button.classList.remove('active', 'paused', 'complete', 'no-auth');
+    if (data.paused) {
+        button.classList.add('paused');
+    } else if (notAuthenticated) {
+        button.classList.add('no-auth');
+    } else if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('lastfm-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('lastfm-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('lastfm-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running) { tooltipStatus.textContent = 'Running'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.paused) {
+            tooltipCurrent.textContent = notAuthenticated ? 'Add Last.fm API key in Settings to enrich' : 'Click to resume';
+        } else if (notAuthenticated) {
+            tooltipCurrent.textContent = 'Add Last.fm API key in Settings to enrich';
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        if (notAuthenticated) {
+            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+        } else {
+            const artists = data.progress.artists || {};
+            const albums = data.progress.albums || {};
+            const tracks = data.progress.tracks || {};
+
+            const currentType = data.current_item?.type;
+            let progressText = '';
+
+            const artistsComplete = artists.matched >= artists.total;
+            const albumsComplete = albums.matched >= albums.total;
+
+            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
+                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+            } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            } else {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            }
+
+            tooltipProgress.textContent = progressText;
+        }
+    }
+}
+
+async function toggleLastFMEnrichment() {
+    try {
+        const button = document.getElementById('lastfm-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/lastfm-enrichment/pause' : '/api/lastfm-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Last.fm enrichment`);
+        }
+
+        await updateLastFMEnrichmentStatus();
+        console.log(`Last.fm enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Last.fm enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('lastfm-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleLastFMEnrichment);
+            updateLastFMEnrichmentStatus();
+            setInterval(updateLastFMEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('lastfm-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleLastFMEnrichment);
+        updateLastFMEnrichmentStatus();
+        setInterval(updateLastFMEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// GENIUS ENRICHMENT STATUS
+// ===================================================================
+
+async function updateGeniusEnrichmentStatus() {
+    if (socketConnected) return;
+    if (document.hidden) return;
+    try {
+        const response = await fetch('/api/genius-enrichment/status');
+        if (!response.ok) { console.warn('Genius status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateGeniusEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Genius status:', error);
+    }
+}
+
+function updateGeniusEnrichmentStatusFromData(data) {
+    const button = document.getElementById('genius-enrich-button');
+    if (!button) return;
+
+    const notAuthenticated = data.authenticated === false;
+
+    button.classList.remove('active', 'paused', 'complete', 'no-auth');
+    if (data.paused) {
+        button.classList.add('paused');
+    } else if (notAuthenticated) {
+        button.classList.add('no-auth');
+    } else if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('genius-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('genius-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('genius-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running) { tooltipStatus.textContent = 'Running'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.paused) {
+            tooltipCurrent.textContent = notAuthenticated ? 'Add Genius access token in Settings to enrich' : 'Click to resume';
+        } else if (notAuthenticated) {
+            tooltipCurrent.textContent = 'Add Genius access token in Settings to enrich';
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        if (notAuthenticated) {
+            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+        } else {
+            const artists = data.progress.artists || {};
+            const tracks = data.progress.tracks || {};
+
+            const currentType = data.current_item?.type;
+            let progressText = '';
+
+            const artistsComplete = artists.matched >= artists.total;
+
+            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            }
+
+            tooltipProgress.textContent = progressText;
+        }
+    }
+}
+
+async function toggleGeniusEnrichment() {
+    try {
+        const button = document.getElementById('genius-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/genius-enrichment/pause' : '/api/genius-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Genius enrichment`);
+        }
+
+        await updateGeniusEnrichmentStatus();
+        console.log(`Genius enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Genius enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('genius-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleGeniusEnrichment);
+            updateGeniusEnrichmentStatus();
+            setInterval(updateGeniusEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('genius-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleGeniusEnrichment);
+        updateGeniusEnrichmentStatus();
+        setInterval(updateGeniusEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// TIDAL ENRICHMENT WORKER
+// ===================================================================
+
+async function updateTidalEnrichmentStatus() {
+    if (socketConnected) return;
+    if (document.hidden) return;
+    try {
+        const response = await fetch('/api/tidal-enrichment/status');
+        if (!response.ok) { console.warn('Tidal status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateTidalEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Tidal status:', error);
+    }
+}
+
+function updateTidalEnrichmentStatusFromData(data) {
+    const button = document.getElementById('tidal-enrich-button');
+    if (!button) return;
+
+    const notAuthenticated = data.authenticated === false;
+
+    button.classList.remove('active', 'paused', 'complete', 'no-auth');
+    if (data.paused) {
+        button.classList.add('paused');
+    } else if (notAuthenticated) {
+        button.classList.add('no-auth');
+    } else if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('tidal-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('tidal-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('tidal-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running) { tooltipStatus.textContent = 'Running'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.paused) {
+            tooltipCurrent.textContent = notAuthenticated ? 'Connect Tidal in Settings to enrich' : 'Click to resume';
+        } else if (notAuthenticated) {
+            tooltipCurrent.textContent = 'Connect Tidal in Settings to enrich';
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        if (notAuthenticated) {
+            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+        } else {
+            const artists = data.progress.artists || {};
+            const albums = data.progress.albums || {};
+            const tracks = data.progress.tracks || {};
+
+            const currentType = data.current_item?.type;
+            let progressText = '';
+
+            const artistsComplete = artists.matched >= artists.total;
+            const albumsComplete = albums.matched >= albums.total;
+
+            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
+                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+            } else {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            }
+
+            tooltipProgress.textContent = progressText;
+        }
+    }
+}
+
+async function toggleTidalEnrichment() {
+    try {
+        const button = document.getElementById('tidal-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/tidal-enrichment/pause' : '/api/tidal-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Tidal enrichment`);
+        }
+
+        await updateTidalEnrichmentStatus();
+        console.log(`Tidal enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Tidal enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('tidal-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleTidalEnrichment);
+            updateTidalEnrichmentStatus();
+            setInterval(updateTidalEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('tidal-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleTidalEnrichment);
+        updateTidalEnrichmentStatus();
+        setInterval(updateTidalEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// QOBUZ ENRICHMENT WORKER
+// ===================================================================
+
+async function updateQobuzEnrichmentStatus() {
+    if (socketConnected) return;
+    if (document.hidden) return;
+    try {
+        const response = await fetch('/api/qobuz-enrichment/status');
+        if (!response.ok) { console.warn('Qobuz status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateQobuzEnrichmentStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating Qobuz status:', error);
+    }
+}
+
+function updateQobuzEnrichmentStatusFromData(data) {
+    const button = document.getElementById('qobuz-enrich-button');
+    if (!button) return;
+
+    const notAuthenticated = data.authenticated === false;
+
+    button.classList.remove('active', 'paused', 'complete', 'no-auth');
+    if (data.paused) {
+        button.classList.add('paused');
+    } else if (notAuthenticated) {
+        button.classList.add('no-auth');
+    } else if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('qobuz-enrich-tooltip-status');
+    const tooltipCurrent = document.getElementById('qobuz-enrich-tooltip-current');
+    const tooltipProgress = document.getElementById('qobuz-enrich-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
+        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
+        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running) { tooltipStatus.textContent = 'Running'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.paused) {
+            tooltipCurrent.textContent = notAuthenticated ? 'Connect Qobuz in Settings to enrich' : 'Click to resume';
+        } else if (notAuthenticated) {
+            tooltipCurrent.textContent = 'Connect Qobuz in Settings to enrich';
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All items processed';
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
+        }
+    }
+
+    if (data.progress && tooltipProgress) {
+        if (notAuthenticated) {
+            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
+        } else {
+            const artists = data.progress.artists || {};
+            const albums = data.progress.albums || {};
+            const tracks = data.progress.tracks || {};
+
+            const currentType = data.current_item?.type;
+            let progressText = '';
+
+            const artistsComplete = artists.matched >= artists.total;
+            const albumsComplete = albums.matched >= albums.total;
+
+            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
+                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
+            } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
+                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
+            } else {
+                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
+            }
+
+            tooltipProgress.textContent = progressText;
+        }
+    }
+}
+
+async function toggleQobuzEnrichment() {
+    try {
+        const button = document.getElementById('qobuz-enrich-button');
+        if (!button) return;
+
+        const isRunning = button.classList.contains('active');
+        const endpoint = isRunning ? '/api/qobuz-enrichment/pause' : '/api/qobuz-enrichment/resume';
+
+        const response = await fetch(endpoint, { method: 'POST' });
+        if (!response.ok) {
+            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Qobuz enrichment`);
+        }
+
+        await updateQobuzEnrichmentStatus();
+        console.log(`Qobuz enrichment ${isRunning ? 'paused' : 'resumed'}`);
+
+    } catch (error) {
+        console.error('Error toggling Qobuz enrichment:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('qobuz-enrich-button');
+        if (button) {
+            button.addEventListener('click', toggleQobuzEnrichment);
+            updateQobuzEnrichmentStatus();
+            setInterval(updateQobuzEnrichmentStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('qobuz-enrich-button');
+    if (button) {
+        button.addEventListener('click', toggleQobuzEnrichment);
+        updateQobuzEnrichmentStatus();
+        setInterval(updateQobuzEnrichmentStatus, 2000);
+    }
+}
+
+// ===================================================================
+// HYDRABASE P2P MIRROR WORKER
+// ===================================================================
+
+async function updateHydrabaseStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/hydrabase-worker/status');
+        if (!response.ok) return;
+        const data = await response.json();
+        updateHydrabaseStatusFromData(data);
+    } catch (error) {
+        // Silently ignore — worker may not be available
+    }
+}
+
+function updateHydrabaseStatusFromData(data) {
+    const button = document.getElementById('hydrabase-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused');
+    if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const statusEl = document.getElementById('hydrabase-tooltip-status');
+    if (statusEl) {
+        if (data.paused) {
+            statusEl.textContent = 'Paused';
+            statusEl.style.color = '#ffc107';
+        } else if (data.running) {
+            statusEl.textContent = 'Active';
+            statusEl.style.color = '#ffffff';
+        } else {
+            statusEl.textContent = 'Stopped';
+            statusEl.style.color = '#ff5252';
+        }
+    }
+}
+
+async function toggleHydrabaseWorker() {
+    const button = document.getElementById('hydrabase-button');
+    if (!button) return;
+    const isRunning = button.classList.contains('active');
+    const endpoint = isRunning ? '/api/hydrabase-worker/pause' : '/api/hydrabase-worker/resume';
+    try {
+        await fetch(endpoint, { method: 'POST' });
+        await updateHydrabaseStatus();
+    } catch (error) {
+        console.error('Error toggling Hydrabase worker:', error);
+    }
+}
+
+// Initialize Hydrabase UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('hydrabase-button');
+        if (button) {
+            button.addEventListener('click', toggleHydrabaseWorker);
+            updateHydrabaseStatus();
+            setInterval(updateHydrabaseStatus, 2000);
+        }
+    });
+} else {
+    const button = document.getElementById('hydrabase-button');
+    if (button) {
+        button.addEventListener('click', toggleHydrabaseWorker);
+        updateHydrabaseStatus();
+        setInterval(updateHydrabaseStatus, 2000);
+    }
+}
+
+// ===================================================================
+// LIBRARY REPAIR WORKER
+// ===================================================================
+
+async function updateRepairStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    if (document.hidden) return; // Skip polling when tab is not visible
+    try {
+        const response = await fetch('/api/repair/status');
+        if (!response.ok) { console.warn('Repair status endpoint unavailable'); return; }
+        const data = await response.json();
+        updateRepairStatusFromData(data);
+    } catch (error) {
+        console.error('Error updating repair status:', error);
+    }
+}
+
+function updateRepairStatusFromData(data) {
+    const button = document.getElementById('repair-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'paused', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    } else if (data.paused) {
+        button.classList.add('paused');
+    }
+
+    const tooltipStatus = document.getElementById('repair-tooltip-status');
+    const tooltipCurrent = document.getElementById('repair-tooltip-current');
+    const tooltipProgress = document.getElementById('repair-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
+        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
+        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
+        else { tooltipStatus.textContent = 'Idle'; }
+    }
+
+    if (tooltipCurrent) {
+        if (data.idle) {
+            tooltipCurrent.textContent = 'All jobs complete — waiting for next schedule';
+        } else if (data.current_job && data.current_job.display_name) {
+            const jobName = data.current_job.display_name;
+            const jobProgress = data.progress && data.progress.current_job;
+            if (jobProgress && jobProgress.total > 0) {
+                tooltipCurrent.textContent = `${jobName}: ${jobProgress.scanned} / ${jobProgress.total} (${jobProgress.percent}%)`;
+            } else {
+                tooltipCurrent.textContent = `Running: ${jobName}`;
+            }
+        } else if (data.current_item && data.current_item.name) {
+            tooltipCurrent.textContent = `Running: ${data.current_item.name}`;
+        } else {
+            tooltipCurrent.textContent = 'No active repairs';
+        }
+    }
+
+    if (tooltipProgress && data.progress) {
+        const tracks = data.progress.tracks || {};
+        const parts = [];
+        if (tracks.total > 0) parts.push(`Checked: ${tracks.checked || 0} / ${tracks.total || 0}`);
+        if (tracks.repaired > 0) parts.push(`Repaired: ${tracks.repaired}`);
+        const pending = data.findings_pending || 0;
+        if (pending > 0) parts.push(`Findings: ${pending}`);
+        tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
+    }
+
+    // Update findings badge
+    const badge = document.getElementById('repair-findings-badge');
+    const findingsPending = data.findings_pending || 0;
+    if (badge) {
+        badge.textContent = findingsPending;
+        badge.style.display = findingsPending > 0 ? '' : 'none';
+    }
+    const tabBadge = document.getElementById('repair-findings-tab-badge');
+    if (tabBadge) {
+        tabBadge.textContent = findingsPending;
+        tabBadge.style.display = findingsPending > 0 ? '' : 'none';
+    }
+
+    // Update master toggle in modal if open
+    const masterToggle = document.getElementById('repair-master-toggle');
+    const masterLabel = document.getElementById('repair-master-label');
+    if (masterToggle) masterToggle.checked = data.enabled || false;
+    if (masterLabel) masterLabel.textContent = data.enabled ? 'Enabled' : 'Disabled';
+
+    // Update button state
+    if (!data.enabled) {
+        button.classList.add('paused');
+        button.classList.remove('active', 'complete');
+    }
+}
+
+// ── SoulID Worker Status ──
+
+function updateSoulIDStatusFromData(data) {
+    const button = document.getElementById('soulid-button');
+    if (!button) return;
+
+    button.classList.remove('active', 'complete');
+    if (data.idle) {
+        button.classList.add('complete');
+    } else if (data.running && !data.paused) {
+        button.classList.add('active');
+    }
+
+    const tooltipStatus = document.getElementById('soulid-tooltip-status');
+    const tooltipCurrent = document.getElementById('soulid-tooltip-current');
+    const tooltipProgress = document.getElementById('soulid-tooltip-progress');
+
+    if (tooltipStatus) {
+        if (data.idle) tooltipStatus.textContent = 'Complete';
+        else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
+        else if (data.paused) tooltipStatus.textContent = 'Paused';
+        else tooltipStatus.textContent = 'Idle';
+    }
+
+    if (tooltipCurrent) {
+        if (data.current_item) {
+            tooltipCurrent.textContent = data.current_item;
+        } else if (data.idle) {
+            tooltipCurrent.textContent = 'All entities have soul IDs';
+        } else {
+            tooltipCurrent.textContent = 'No items processing';
+        }
+    }
+
+    if (tooltipProgress && data.stats) {
+        const s = data.stats;
+        const parts = [];
+        if (s.artists_processed) parts.push(`Artists: ${s.artists_processed}`);
+        if (s.albums_processed) parts.push(`Albums: ${s.albums_processed}`);
+        if (s.tracks_processed) parts.push(`Tracks: ${s.tracks_processed}`);
+        if (s.pending > 0) parts.push(`Pending: ${s.pending}`);
+        tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
+    }
+}
+
+// ── Repair Modal State ──
+let _repairCurrentTab = 'jobs';
+let _repairFindingsPage = 0;
+let _repairSelectedFindings = new Set();
+let _repairFindingsTotal = 0;
+const REPAIR_FINDINGS_PAGE_SIZE = 30;
+let _repairJobsCache = {}; // Cache job data for help modal
+
+/**
+ * Open the Library Maintenance modal
+ */
+async function openRepairModal() {
+    navigateToPage('tools');
+    // Scroll to maintenance section
+    setTimeout(() => {
+        const section = document.querySelector('.tools-maintenance-section');
+        if (section) section.scrollIntoView({ behavior: 'smooth' });
+    }, 100);
+    _repairCurrentTab = 'jobs';
+    switchRepairTab('jobs');
+    // Load master toggle state
+    updateRepairStatus();
+    // Load any active job progress
+    try {
+        const resp = await fetch('/api/repair/progress');
+        if (resp.ok) {
+            const data = await resp.json();
+            if (Object.keys(data).length > 0) {
+                // Brief delay so job cards are rendered first
+                setTimeout(() => updateRepairJobProgressFromData(data), 300);
+            }
+        }
+    } catch (e) { /* ignore */ }
+}
+
+function closeRepairModal() {
+    // No-op — repair content now lives on the tools page, no modal to close
+}
+
+async function toggleRepairMaster() {
+    try {
+        const response = await fetch('/api/repair/toggle', { method: 'POST' });
+        if (!response.ok) throw new Error('Failed to toggle');
+        const data = await response.json();
+        const label = document.getElementById('repair-master-label');
+        const toggle = document.getElementById('repair-master-toggle');
+        if (label) label.textContent = data.enabled ? 'Enabled' : 'Disabled';
+        if (toggle) toggle.checked = data.enabled;
+        await updateRepairStatus();
+    } catch (error) {
+        console.error('Error toggling repair master:', error);
+        showToast('Error toggling maintenance worker', 'error');
+    }
+}
+
+function switchRepairTab(tab) {
+    _repairCurrentTab = tab;
+    document.querySelectorAll('.repair-tab').forEach(t => {
+        t.classList.toggle('active', t.dataset.tab === tab);
+    });
+    document.querySelectorAll('.repair-tab-content').forEach(c => {
+        c.style.display = 'none';
+    });
+    const content = document.getElementById(`repair-tab-${tab}`);
+    if (content) content.style.display = '';
+
+    if (tab === 'jobs') loadRepairJobs();
+    else if (tab === 'findings') { loadRepairFindingsDashboard(); loadRepairFindings(); }
+    else if (tab === 'history') loadRepairHistory();
+}
+
+// Turn a snake_case setting key into a human label. Handles acronym fix-ups
+// (EP, ID, URL, MB, AC, OS) that the naive Title-Case would otherwise botch.
+function _prettifyRepairSettingKey(key) {
+    const words = key.replace(/^_+/, '').split('_');
+    const acronyms = { 'eps': 'EPs', 'id': 'ID', 'url': 'URL', 'mb': 'MB',
+                       'ac': 'AC', 'os': 'OS', 'api': 'API', 'mp3': 'MP3',
+                       'flac': 'FLAC', 'cd': 'CD' };
+    return words.map(w => acronyms[w.toLowerCase()] || (w.charAt(0).toUpperCase() + w.slice(1))).join(' ');
+}
+
+async function loadRepairJobs() {
+    const container = document.getElementById('repair-jobs-list');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/repair/jobs');
+        if (!response.ok) throw new Error('Failed to fetch jobs');
+        const data = await response.json();
+        const jobs = data.jobs || [];
+
+        // Cache job data for help modal
+        _repairJobsCache = {};
+        jobs.forEach(j => { _repairJobsCache[j.job_id] = j; });
+
+        if (jobs.length === 0) {
+            container.innerHTML = `<div class="repair-empty-state">
+                <div class="repair-empty-icon">🔧</div>
+                <div class="repair-empty-title">No Maintenance Jobs</div>
+                <div class="repair-empty-text">Library maintenance jobs will appear here once available.</div>
+            </div>`;
+            return;
+        }
+
+        // Populate findings job filter dropdown
+        const jobFilter = document.getElementById('repair-findings-job-filter');
+        if (jobFilter && jobFilter.options.length <= 1) {
+            jobs.forEach(job => {
+                const opt = document.createElement('option');
+                opt.value = job.job_id;
+                opt.textContent = job.display_name;
+                jobFilter.appendChild(opt);
+            });
+        }
+
+        container.innerHTML = jobs.map(job => {
+            const lastRunText = job.last_run ? formatCacheAge(job.last_run.finished_at) : 'Never';
+            const nextRunText = job.next_run ? formatCacheAge(job.next_run) : (job.enabled ? 'Pending' : '-');
+            const statusClass = job.is_running ? 'running' : (job.enabled ? 'idle' : 'disabled');
+            const dotClass = job.is_running ? 'running' : (job.enabled ? 'enabled' : 'disabled');
+            const cardClass = job.is_running ? 'running' : (!job.enabled ? 'disabled' : '');
+
+            // Build flow badges
+            const flowParts = [];
+            flowParts.push(`<span class="repair-flow-badge scan">${job.is_running ? '&#9654; Running' : 'Scan'}</span>`);
+            if (job.auto_fix) {
+                flowParts.push('<span class="repair-flow-arrow">&rarr;</span>');
+                const isDryRun = job.settings && job.settings.dry_run === true;
+                if (isDryRun) {
+                    flowParts.push('<span class="repair-flow-badge dryrun">Dry Run</span>');
+                } else {
+                    flowParts.push('<span class="repair-flow-badge autofix">Auto-fix</span>');
+                }
+            }
+            // Show pending findings count
+            const findingsCount = job.last_run ? (job.last_run.findings_created || 0) : 0;
+            if (findingsCount > 0) {
+                flowParts.push('<span class="repair-flow-arrow">&rarr;</span>');
+                flowParts.push(`<span class="repair-flow-badge findings">${findingsCount} finding${findingsCount !== 1 ? 's' : ''}</span>`);
+            }
+
+            // Build meta parts
+            const metaParts = [];
+            metaParts.push('Last: ' + lastRunText);
+            metaParts.push('Next: ' + nextRunText);
+            if (job.last_run) {
+                metaParts.push(`Scanned: ${(job.last_run.items_scanned || 0).toLocaleString()}`);
+                if (job.last_run.auto_fixed) metaParts.push(`Fixed: ${job.last_run.auto_fixed}`);
+            }
+            if (job.last_run && job.last_run.duration_seconds) {
+                metaParts.push(`${job.last_run.duration_seconds.toFixed(1)}s`);
+            }
+
+            // Build settings HTML
+            let settingsHtml = '';
+            if (job.settings && Object.keys(job.settings).length > 0) {
+                const settingsRows = Object.entries(job.settings).map(([key, val]) => {
+                    // Section header: keys starting with `_section_` render as a
+                    // group divider + title instead of a setting row. The value
+                    // is the human-readable title.
+                    if (key.startsWith('_section_')) {
+                        return `<div class="repair-setting-section">${val}</div>`;
+                    }
+                    const label = _prettifyRepairSettingKey(key);
+                    const inputType = typeof val === 'boolean' ? 'checkbox' :
+                        typeof val === 'number' ? 'number' : 'text';
+                    const inputVal = inputType === 'checkbox' ?
+                        (val ? ' checked' : '') :
+                        ` value="${val}"`;
+                    return `<div class="repair-setting-row">
+                        <label>${label}</label>
+                        <input type="${inputType}" class="repair-setting-input"
+                               data-job="${job.job_id}" data-key="${key}"${inputVal}
+                               ${inputType === 'number' ? 'step="0.01" min="0"' : ''}>
+                    </div>`;
+                }).join('');
+
+                settingsHtml = `
+                    <div class="repair-job-settings" id="repair-settings-${job.job_id}" style="display:none;">
+                        <div class="repair-setting-row">
+                            <label>Interval (hours)</label>
+                            <input type="number" class="repair-setting-input"
+                                   data-job="${job.job_id}" data-key="_interval_hours"
+                                   value="${job.interval_hours}" min="1" step="1">
+                        </div>
+                        ${settingsRows}
+                        <button class="repair-save-settings-btn" onclick="saveRepairJobSettings('${job.job_id}')">Save Settings</button>
+                    </div>`;
+            }
+
+            return `<div class="repair-job-card ${cardClass}" data-job-id="${job.job_id}">
+                <div class="repair-job-main">
+                    <div class="repair-job-status ${dotClass}"></div>
+                    <div class="repair-job-info">
+                        <div class="repair-job-name">${job.display_name}</div>
+                        <div class="repair-job-desc">${job.description || ''}</div>
+                        <div class="repair-job-flow">${flowParts.join('')}</div>
+                        <div class="repair-job-meta">${metaParts.join(' &middot; ')}</div>
+                    </div>
+                    <div class="repair-job-actions">
+                        <label class="repair-job-toggle">
+                            <input type="checkbox" ${job.enabled ? 'checked' : ''}
+                                   onchange="toggleRepairJob('${job.job_id}', this.checked)">
+                            <span class="repair-toggle-slider small"></span>
+                        </label>
+                        <button class="repair-run-btn" onclick="runRepairJobNow('${job.job_id}')"
+                                title="Run now">&#9654;</button>
+                        ${Object.keys(job.settings || {}).length > 0 ?
+                    `<button class="repair-settings-btn" onclick="expandRepairJobSettings('${job.job_id}')"
+                                     title="Settings">&#9881;</button>` : ''}
+                        <button class="repair-help-btn" onclick="event.stopPropagation(); showRepairJobHelp('${job.job_id}')"
+                                title="About this job">?</button>
+                    </div>
+                </div>
+                ${settingsHtml}
+            </div>`;
+        }).join('');
+
+    } catch (error) {
+        console.error('Error loading repair jobs:', error);
+        container.innerHTML = '<div class="repair-empty">Error loading jobs</div>';
+    }
+}
+
+async function toggleRepairJob(jobId, enabled) {
+    try {
+        await fetch(`/api/repair/jobs/${jobId}/toggle`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ enabled })
+        });
+        // Update card visuals immediately
+        const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
+        if (card) {
+            card.classList.toggle('disabled', !enabled);
+            const dot = card.querySelector('.repair-job-status');
+            if (dot) dot.className = 'repair-job-status ' + (enabled ? 'enabled' : 'disabled');
+        }
+    } catch (error) {
+        console.error('Error toggling job:', error);
+        showToast('Error toggling job', 'error');
+    }
+}
+
+function expandRepairJobSettings(jobId) {
+    const el = document.getElementById(`repair-settings-${jobId}`);
+    if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
+}
+
+function showRepairJobHelp(jobId) {
+    const job = _repairJobsCache[jobId];
+    if (!job) return;
+
+    // Remove existing overlay if present
+    let overlay = document.getElementById('repair-help-overlay');
+    if (overlay) overlay.remove();
+
+    // Build settings summary (skip `_section_` group-header sentinels)
+    let settingsHtml = '';
+    if (job.settings && Object.keys(job.settings).length > 0) {
+        const rows = Object.entries(job.settings)
+            .filter(([key]) => !key.startsWith('_section_'))
+            .map(([key, val]) => {
+                const label = _prettifyRepairSettingKey(key);
+                const display = typeof val === 'boolean' ? (val ? 'Yes' : 'No') : val;
+                return `<div class="repair-help-setting"><span class="repair-help-setting-key">${label}</span><span class="repair-help-setting-val">${display}</span></div>`;
+            }).join('');
+        settingsHtml = `<div class="repair-help-settings-section">
+            <div class="repair-help-section-title">Current Settings</div>
+            ${rows}
+        </div>`;
+    }
+
+    // Build info badges
+    const badges = [];
+    if (job.auto_fix) {
+        const isDryRun = job.settings && job.settings.dry_run === true;
+        badges.push(isDryRun
+            ? '<span class="repair-flow-badge dryrun">Dry Run</span>'
+            : '<span class="repair-flow-badge autofix">Auto-fix</span>');
+    } else {
+        badges.push('<span class="repair-flow-badge scan">Scan Only</span>');
+    }
+    badges.push(`<span class="repair-flow-badge scan">Every ${job.interval_hours}h</span>`);
+    if (job.enabled) {
+        badges.push('<span class="repair-flow-badge" style="background:rgba(74,222,128,0.12);color:#4ade80;">Enabled</span>');
+    } else {
+        badges.push('<span class="repair-flow-badge" style="background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);">Disabled</span>');
+    }
+
+    // Format help text paragraphs
+    const helpBody = (job.help_text || job.description || '').split('\n\n').map(p => {
+        if (p.startsWith('Settings:\n')) {
+            const lines = p.split('\n').slice(1);
+            return '<div class="repair-help-setting-list">' +
+                lines.map(l => `<div class="repair-help-setting-item">${l.replace(/^- /, '')}</div>`).join('') +
+                '</div>';
+        }
+        return `<p>${p.replace(/\n/g, '<br>')}</p>`;
+    }).join('');
+
+    overlay = document.createElement('div');
+    overlay.id = 'repair-help-overlay';
+    overlay.className = 'repair-help-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+    overlay.innerHTML = `
+        <div class="repair-help-modal">
+            <div class="repair-help-header">
+                <h3>${job.display_name}</h3>
+                <button class="repair-help-close" onclick="document.getElementById('repair-help-overlay').remove()">&times;</button>
+            </div>
+            <div class="repair-help-badges">${badges.join('')}</div>
+            <div class="repair-help-body">${helpBody}</div>
+            ${settingsHtml}
+        </div>
+    `;
+    document.body.appendChild(overlay);
+}
+
+async function saveRepairJobSettings(jobId) {
+    try {
+        const inputs = document.querySelectorAll(`.repair-setting-input[data-job="${jobId}"]`);
+        let intervalHours = null;
+        const settings = {};
+
+        inputs.forEach(input => {
+            const key = input.dataset.key;
+            if (key === '_interval_hours') {
+                intervalHours = parseInt(input.value) || 24;
+            } else {
+                if (input.type === 'checkbox') settings[key] = input.checked;
+                else if (input.type === 'number') settings[key] = parseFloat(input.value);
+                else settings[key] = input.value;
+            }
+        });
+
+        await fetch(`/api/repair/jobs/${jobId}/settings`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ interval_hours: intervalHours, settings })
+        });
+
+        showToast('Settings saved', 'success');
+    } catch (error) {
+        console.error('Error saving job settings:', error);
+        showToast('Error saving settings', 'error');
+    }
+}
+
+async function runRepairJobNow(jobId) {
+    try {
+        await fetch(`/api/repair/jobs/${jobId}/run`, { method: 'POST' });
+        showToast('Job started', 'success');
+        setTimeout(() => loadRepairJobs(), 1000);
+    } catch (error) {
+        console.error('Error running job:', error);
+        showToast('Error starting job', 'error');
+    }
+}
+
+// ── Repair Job Live Progress ──
+const _repairProgressLogCounts = {};
+const _repairProgressHideTimers = {};
+
+function updateRepairJobProgressFromData(data) {
+    for (const [jobId, state] of Object.entries(data)) {
+        const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
+        if (!card) continue;
+
+        // Update status dot
+        const statusDot = card.querySelector('.repair-job-status');
+        if (statusDot) {
+            if (state.status === 'running') statusDot.className = 'repair-job-status running';
+            else if (state.status === 'finished') statusDot.className = 'repair-job-status enabled';
+            else if (state.status === 'error') statusDot.className = 'repair-job-status enabled';
+        }
+
+        // Update flow badge to show running state
+        const firstBadge = card.querySelector('.repair-flow-badge.scan');
+        if (firstBadge) {
+            if (state.status === 'running') firstBadge.innerHTML = '&#9654; Running';
+            else if (state.status === 'finished') firstBadge.innerHTML = '&#10003; Complete';
+            else if (state.status === 'error') firstBadge.innerHTML = '&#10007; Error';
+        }
+
+        // Add/update card running class
+        card.classList.toggle('running', state.status === 'running');
+        card.classList.remove('disabled');
+
+        // Create or find progress panel (bar-first layout like automation)
+        let panel = card.querySelector('.repair-job-progress');
+        if (!panel) {
+            panel = document.createElement('div');
+            panel.className = 'repair-job-progress';
+            panel.innerHTML = `
+                <div class="repair-progress-bar-wrap">
+                    <div class="repair-progress-bar" style="width:0%"></div>
+                </div>
+                <div class="repair-progress-phase"></div>
+                <div class="repair-progress-log"></div>
+            `;
+            card.appendChild(panel);
+        }
+
+        // Show panel
+        panel.classList.add('visible');
+        panel.classList.toggle('finished', state.status === 'finished');
+        panel.classList.toggle('error', state.status === 'error');
+
+        if (state.status === 'running') {
+            panel.classList.remove('finished', 'error');
+            if (_repairProgressHideTimers[jobId]) {
+                clearTimeout(_repairProgressHideTimers[jobId]);
+                delete _repairProgressHideTimers[jobId];
+            }
+            // Reset log for re-run
+            if (_repairProgressLogCounts[jobId] > 0 && state.log && state.log.length < _repairProgressLogCounts[jobId]) {
+                const existingLog = panel.querySelector('.repair-progress-log');
+                if (existingLog) existingLog.innerHTML = '';
+                _repairProgressLogCounts[jobId] = 0;
+            }
+        }
+
+        // Update progress bar
+        const bar = panel.querySelector('.repair-progress-bar');
+        if (bar) bar.style.width = (state.progress || 0) + '%';
+
+        // Update phase
+        const phaseEl = panel.querySelector('.repair-progress-phase');
+        if (phaseEl && state.phase) phaseEl.textContent = state.phase;
+
+        // Update log
+        const logEl = panel.querySelector('.repair-progress-log');
+        if (logEl && state.log) {
+            const prevCount = _repairProgressLogCounts[jobId] || 0;
+            if (state.log.length > prevCount) {
+                const newLines = state.log.slice(prevCount);
+                for (const line of newLines) {
+                    const div = document.createElement('div');
+                    div.className = 'repair-log-line ' + (line.type || 'info');
+                    div.textContent = line.text;
+                    logEl.appendChild(div);
+                }
+                logEl.scrollTop = logEl.scrollHeight;
+            }
+            _repairProgressLogCounts[jobId] = state.log.length;
+        }
+
+        // Auto-hide panel after completion
+        if (state.status === 'finished' || state.status === 'error') {
+            if (!_repairProgressHideTimers[jobId]) {
+                _repairProgressHideTimers[jobId] = setTimeout(() => {
+                    panel.classList.remove('visible');
+                    card.classList.remove('running');
+                    delete _repairProgressHideTimers[jobId];
+                    delete _repairProgressLogCounts[jobId];
+                    // Reload to get updated stats
+                    loadRepairJobs();
+                }, 30000);
+            }
+        } else {
+            // Clear any existing hide timer if job restarts
+            if (_repairProgressHideTimers[jobId]) {
+                clearTimeout(_repairProgressHideTimers[jobId]);
+                delete _repairProgressHideTimers[jobId];
+            }
+        }
+    }
+}
+
+async function loadRepairFindingsDashboard() {
+    const dashboard = document.getElementById('repair-findings-dashboard');
+    if (!dashboard) return;
+
+    try {
+        const response = await fetch('/api/repair/findings/counts');
+        if (!response.ok) throw new Error('Failed to fetch counts');
+        const data = await response.json();
+
+        const pending = data.pending || 0;
+        const resolved = data.resolved || 0;
+        const dismissed = data.dismissed || 0;
+        const autoFixed = data.auto_fixed || 0;
+        const byJob = data.by_job || {};
+
+        // Summary stats row
+        let html = '<div class="repair-dashboard-summary">';
+        html += `<div class="repair-dashboard-stat pending">
+            <span class="stat-count">${pending.toLocaleString()}</span> pending
+        </div>`;
+        html += `<div class="repair-dashboard-stat resolved">
+            <span class="stat-count">${resolved.toLocaleString()}</span> resolved
+        </div>`;
+        html += `<div class="repair-dashboard-stat dismissed">
+            <span class="stat-count">${dismissed.toLocaleString()}</span> dismissed
+        </div>`;
+        if (autoFixed > 0) {
+            html += `<div class="repair-dashboard-stat auto-fixed">
+                <span class="stat-count">${autoFixed.toLocaleString()}</span> auto-fixed
+            </div>`;
+        }
+        html += '</div>';
+
+        // Per-job chips (only if there are pending findings)
+        const jobIds = Object.keys(byJob).sort((a, b) => byJob[b].total - byJob[a].total);
+        if (jobIds.length > 0) {
+            html += '<div class="repair-dashboard-jobs">';
+            const jobFilter = document.getElementById('repair-findings-job-filter');
+            const activeJob = jobFilter ? jobFilter.value : '';
+
+            for (const jid of jobIds) {
+                const job = byJob[jid];
+                const isActive = activeJob === jid;
+                const severityDots = [];
+                if (job.warning > 0) severityDots.push(`<span class="repair-dashboard-chip-severity warning" title="${job.warning} warnings"></span>`);
+                if (job.info > 0) severityDots.push(`<span class="repair-dashboard-chip-severity info" title="${job.info} info"></span>`);
+
+                html += `<div class="repair-dashboard-chip ${isActive ? 'active' : ''}" onclick="filterFindingsByJob('${jid}')">
+                    <span class="repair-dashboard-chip-count">${job.total.toLocaleString()}</span>
+                    <span class="repair-dashboard-chip-name">${_escFinding(job.display_name || jid.replace(/_/g, ' '))}</span>
+                    ${severityDots.length ? `<span class="repair-dashboard-chip-bar">${severityDots.join('')}</span>` : ''}
+                </div>`;
+            }
+            html += '</div>';
+        }
+
+        dashboard.innerHTML = html;
+
+        // Load cache health stats
+        _loadCacheHealthStats(dashboard);
+    } catch (error) {
+        console.error('Error loading findings dashboard:', error);
+        dashboard.innerHTML = '';
+    }
+}
+
+async function _loadCacheHealthStats(dashboard) {
+    try {
+        const response = await fetch('/api/repair/cache-health');
+        if (!response.ok) return;
+        const stats = await response.json();
+        if (!stats.total_entities && !stats.total_searches) return;
+
+        const healthScore = stats.junk_entities === 0 && stats.stale_mb_nulls === 0 ? 'healthy' : stats.junk_entities > 50 ? 'poor' : 'fair';
+        const healthLabel = healthScore === 'healthy' ? 'Healthy' : healthScore === 'fair' ? 'Needs Cleanup' : 'Needs Attention';
+
+        // Remove any existing cache-health bar before appending — prevents
+        // stacking when multiple dashboard refreshes race and each resolved
+        // fetch appends its own section.
+        dashboard.querySelectorAll('.repair-cache-health').forEach(el => el.remove());
+
+        const section = document.createElement('div');
+        section.className = 'repair-cache-health';
+        section.innerHTML = `
+            <div class="repair-cache-health-bar" onclick="openCacheHealthModal()">
+                <span class="repair-cache-health-dot ${healthScore}"></span>
+                <span class="repair-cache-health-title">Metadata Cache</span>
+                <span class="repair-cache-health-summary">${stats.total_entities.toLocaleString()} entities · ${healthLabel}</span>
+                <span class="repair-cache-health-action">View Details ›</span>
+            </div>
+        `;
+        dashboard.appendChild(section);
+    } catch (error) {
+        console.error('Error loading cache health:', error);
+    }
+}
+
+async function openCacheHealthModal() {
+    if (document.getElementById('cache-health-modal-overlay')) return;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'cache-health-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="cache-health-modal">
+            <div class="cache-health-header">
+                <div class="cache-health-header-content">
+                    <div class="cache-health-header-icon">&#128202;</div>
+                    <div>
+                        <h2 class="cache-health-title">Cache Health</h2>
+                        <p class="cache-health-subtitle">Metadata cache status across all sources</p>
+                    </div>
+                </div>
+                <button class="watch-all-close" onclick="document.getElementById('cache-health-modal-overlay').remove()">&times;</button>
+            </div>
+            <div class="cache-health-body">
+                <div class="cache-health-loading">
+                    <div class="watch-all-loading-spinner"></div>
+                    <div>Loading cache stats...</div>
+                </div>
+            </div>
+            <div class="cache-health-footer">
+                <button class="watch-all-btn watch-all-btn-cancel" onclick="document.getElementById('cache-health-modal-overlay').remove()">Close</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    try {
+        const response = await fetch('/api/repair/cache-health');
+        if (!response.ok) throw new Error('Failed to load');
+        const s = await response.json();
+
+        const body = overlay.querySelector('.cache-health-body');
+        const healthScore = s.junk_entities === 0 && s.stale_mb_nulls === 0 ? 'healthy' : s.junk_entities > 50 ? 'poor' : 'fair';
+        const healthEmoji = healthScore === 'healthy' ? '&#10003;' : healthScore === 'fair' ? '&#9888;' : '&#10060;';
+        const healthLabel = healthScore === 'healthy' ? 'Cache is healthy' : healthScore === 'fair' ? 'Minor issues detected' : 'Cleanup recommended';
+
+        body.innerHTML = `
+            <div class="cache-health-status ${healthScore}">
+                <div class="cache-health-status-icon">${healthEmoji}</div>
+                <div class="cache-health-status-text">${healthLabel}</div>
+            </div>
+
+            <div class="cache-health-cards">
+                <div class="cache-health-card">
+                    <div class="cache-health-card-value">${s.total_entities.toLocaleString()}</div>
+                    <div class="cache-health-card-label">Total Entities</div>
+                </div>
+                <div class="cache-health-card">
+                    <div class="cache-health-card-value">${s.total_searches.toLocaleString()}</div>
+                    <div class="cache-health-card-label">Search Results</div>
+                </div>
+                <div class="cache-health-card">
+                    <div class="cache-health-card-value ${s.junk_entities > 0 ? 'warn' : ''}">${s.junk_entities}</div>
+                    <div class="cache-health-card-label">Junk Entries</div>
+                </div>
+                <div class="cache-health-card ${s.stale_mb_nulls > 0 ? 'clickable' : ''}" ${s.stale_mb_nulls > 0 ? 'onclick="openFailedMBLookupsModal()"' : ''}>
+                    <div class="cache-health-card-value ${s.stale_mb_nulls > 10 ? 'warn' : ''}">${s.stale_mb_nulls}</div>
+                    <div class="cache-health-card-label">Failed MB Lookups</div>
+                    ${s.stale_mb_nulls > 0 ? '<div class="cache-health-card-action">Manage ›</div>' : ''}
+                </div>
+            </div>
+
+            <div class="cache-health-section">
+                <div class="cache-health-section-title">By Source</div>
+                <div class="cache-health-source-bars">
+                    ${(() => {
+                const allSources = { ...(s.by_source || {}) };
+                if (s.total_musicbrainz) allSources['musicbrainz'] = s.total_musicbrainz;
+                const maxCount = Math.max(...Object.values(allSources), 1);
+                return Object.entries(allSources).map(([src, count]) => {
+                    const pct = Math.round(count / maxCount * 100);
+                    const color = src === 'spotify' ? '#1DB954' : src === 'itunes' ? '#FC3C44' : src === 'deezer' ? '#A238FF' : src === 'musicbrainz' ? '#BA478F' : '#666';
+                    return `<div class="cache-health-source-row">
+                                <span class="cache-health-source-name">${src === 'musicbrainz' ? 'MusicBrainz' : src}</span>
+                                <div class="cache-health-source-track"><div class="cache-health-source-fill" style="width:${pct}%;background:${color}"></div></div>
+                                <span class="cache-health-source-count">${count.toLocaleString()}</span>
+                            </div>`;
+                }).join('');
+            })()}
+                </div>
+            </div>
+
+            <div class="cache-health-section">
+                <div class="cache-health-section-title">By Type</div>
+                <div class="cache-health-type-pills">
+                    ${Object.entries(s.by_type || {}).map(([type, count]) => `<span class="cache-health-pill">${type}s <strong>${count.toLocaleString()}</strong></span>`).join('')}
+                </div>
+            </div>
+
+            <div class="cache-health-section">
+                <div class="cache-health-section-title">Metrics</div>
+                <div class="cache-health-metrics">
+                    <div class="cache-health-metric"><span class="cache-health-metric-label">Average Age</span><span class="cache-health-metric-value">${s.avg_age_days} days</span></div>
+                    <div class="cache-health-metric"><span class="cache-health-metric-label">Total Cache Hits</span><span class="cache-health-metric-value">${s.total_access_hits.toLocaleString()}</span></div>
+                    <div class="cache-health-metric"><span class="cache-health-metric-label">Expiring in 24h</span><span class="cache-health-metric-value">${s.expiring_24h}</span></div>
+                    <div class="cache-health-metric"><span class="cache-health-metric-label">Expiring in 7 days</span><span class="cache-health-metric-value">${s.expiring_7d}</span></div>
+                </div>
+            </div>
+        `;
+    } catch (error) {
+        const body = overlay.querySelector('.cache-health-body');
+        body.innerHTML = '<div class="cache-health-loading">Failed to load cache stats</div>';
+    }
+}
+
+// ── Failed MB Lookups Management Modal ──
+let _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
+
+async function openFailedMBLookupsModal() {
+    if (document.getElementById('failed-mb-modal-overlay')) return;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'failed-mb-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="failed-mb-modal">
+            <div class="failed-mb-header">
+                <div>
+                    <h2 class="failed-mb-title">Failed MusicBrainz Lookups</h2>
+                    <p class="failed-mb-subtitle">Tracks, albums, and artists that couldn't be matched automatically</p>
+                </div>
+                <button class="watch-all-close" onclick="document.getElementById('failed-mb-modal-overlay').remove()">&times;</button>
+            </div>
+            <div class="failed-mb-toolbar">
+                <div class="failed-mb-tabs" id="failed-mb-tabs"></div>
+                <div class="failed-mb-search-row">
+                    <input type="text" id="failed-mb-search" class="failed-mb-search-input" placeholder="Filter by name...">
+                    <button class="failed-mb-btn failed-mb-btn-danger" onclick="_failedMBClearAll()">Clear All Failed</button>
+                </div>
+            </div>
+            <div class="failed-mb-body" id="failed-mb-body">
+                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading...</div></div>
+            </div>
+            <div class="failed-mb-footer" id="failed-mb-footer"></div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Search debounce
+    const searchInput = overlay.querySelector('#failed-mb-search');
+    let searchTimer = null;
+    searchInput.addEventListener('input', () => {
+        clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => {
+            _failedMBState.filter = searchInput.value;
+            _failedMBState.page = 1;
+            _loadFailedMBLookups();
+        }, 300);
+    });
+
+    _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
+    await _loadFailedMBLookups();
+}
+
+async function _loadFailedMBLookups() {
+    const body = document.getElementById('failed-mb-body');
+    if (!body) return;
+
+    // Only fetch type_counts on first load — cache them for tab switches
+    const needCounts = Object.keys(_failedMBState.typeCounts).length === 0;
+    const params = new URLSearchParams({
+        page: _failedMBState.page,
+        limit: 50,
+    });
+    if (needCounts) params.set('counts', 'true');
+    if (_failedMBState.typeFilter) params.set('entity_type', _failedMBState.typeFilter);
+    if (_failedMBState.filter) params.set('search', _failedMBState.filter);
+
+    try {
+        const resp = await fetch(`/api/metadata-cache/failed-mb-lookups?${params}`);
+        if (!resp.ok) throw new Error('Failed to load');
+        const data = await resp.json();
+        _failedMBState.items = data.items;
+        _failedMBState.total = data.total;
+        if (data.type_counts) _failedMBState.typeCounts = data.type_counts;
+
+        // Render type filter tabs
+        const tabsEl = document.getElementById('failed-mb-tabs');
+        if (tabsEl) {
+            const allCount = Object.values(_failedMBState.typeCounts).reduce((a, b) => a + b, 0);
+            let tabsHTML = `<button class="failed-mb-tab ${!_failedMBState.typeFilter ? 'active' : ''}" onclick="_failedMBSetType('')">All (${allCount})</button>`;
+            const typeLabels = { artist: 'Artists', release: 'Albums', recording: 'Tracks' };
+            for (const [type, count] of Object.entries(_failedMBState.typeCounts)) {
+                tabsHTML += `<button class="failed-mb-tab ${_failedMBState.typeFilter === type ? 'active' : ''}" onclick="_failedMBSetType('${type}')">${typeLabels[type] || type} (${count})</button>`;
+            }
+            tabsEl.innerHTML = tabsHTML;
+        }
+
+        // Render items
+        if (data.items.length === 0) {
+            body.innerHTML = `<div class="failed-mb-empty">${_failedMBState.filter ? 'No matches for your search' : 'No failed lookups — cache is clean!'}</div>`;
+        } else {
+            const typeIcons = { artist: '🎤', release: '💿', recording: '🎵' };
+            body.innerHTML = data.items.map(item => `
+                <div class="failed-mb-item" data-id="${item.id}">
+                    <div class="failed-mb-item-icon">${typeIcons[item.entity_type] || '?'}</div>
+                    <div class="failed-mb-item-info">
+                        <div class="failed-mb-item-name">${escapeHtml(item.entity_name)}</div>
+                        ${item.artist_name ? `<div class="failed-mb-item-artist">${escapeHtml(item.artist_name)}</div>` : ''}
+                    </div>
+                    <div class="failed-mb-item-meta">
+                        <span class="failed-mb-item-type">${item.entity_type}</span>
+                        <span class="failed-mb-item-date">${item.last_updated ? new Date(item.last_updated).toLocaleDateString() : ''}</span>
+                    </div>
+                    <div class="failed-mb-item-actions">
+                        <button class="failed-mb-btn-sm failed-mb-btn-primary" onclick="_failedMBSearch(${item.id}, '${item.entity_type}', '${escapeForInlineJs(item.entity_name)}', '${escapeForInlineJs(item.artist_name || '')}')">Search MB</button>
+                        <button class="failed-mb-btn-sm failed-mb-btn-ghost" onclick="_failedMBDelete(${item.id})">Remove</button>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        // Pagination footer
+        const footer = document.getElementById('failed-mb-footer');
+        if (footer) {
+            const totalPages = Math.ceil(data.total / 50);
+            footer.innerHTML = totalPages > 1 ? `
+                <div class="failed-mb-pagination">
+                    <button class="failed-mb-btn-sm" ${_failedMBState.page <= 1 ? 'disabled' : ''} onclick="_failedMBPage(${_failedMBState.page - 1})">Prev</button>
+                    <span>Page ${_failedMBState.page} of ${totalPages} (${data.total} total)</span>
+                    <button class="failed-mb-btn-sm" ${_failedMBState.page >= totalPages ? 'disabled' : ''} onclick="_failedMBPage(${_failedMBState.page + 1})">Next</button>
+                </div>
+            ` : `<div class="failed-mb-pagination"><span>${data.total} entries</span></div>`;
+        }
+    } catch (err) {
+        body.innerHTML = '<div class="failed-mb-empty">Failed to load data</div>';
+    }
+}
+
+function _failedMBSetType(type) {
+    _failedMBState.typeFilter = type;
+    _failedMBState.page = 1;
+    _loadFailedMBLookups();
+}
+
+function _failedMBPage(page) {
+    _failedMBState.page = page;
+    _loadFailedMBLookups();
+}
+
+async function _failedMBDelete(entryId) {
+    try {
+        const resp = await fetch(`/api/metadata-cache/mb-entry/${entryId}`, { method: 'DELETE' });
+        if (resp.ok) {
+            const row = document.querySelector(`.failed-mb-item[data-id="${entryId}"]`);
+            if (row) {
+                row.style.opacity = '0';
+                setTimeout(() => {
+                    row.remove();
+                    _failedMBState.typeCounts = {};  // Force refresh counts
+                    _loadFailedMBLookups();
+                }, 200);
+            }
+        }
+    } catch (err) {
+        showToast('Failed to delete entry', 'error');
+    }
+}
+
+async function _failedMBClearAll() {
+    if (!confirm(`Clear all ${_failedMBState.total} failed lookups? They will be retried on next enrichment run.`)) return;
+    try {
+        const resp = await fetch('/api/metadata-cache/clear-musicbrainz?failed_only=true', { method: 'DELETE' });
+        const data = await resp.json();
+        if (data.success) {
+            showToast(`Cleared ${data.cleared} failed lookups`, 'success');
+            _failedMBState.page = 1;
+            _failedMBState.typeCounts = {};  // Force refresh counts
+            _loadFailedMBLookups();
+        }
+    } catch (err) {
+        showToast('Failed to clear lookups', 'error');
+    }
+}
+
+// ── MusicBrainz Search Sub-Modal ──
+async function _failedMBSearch(entryId, entityType, entityName, artistName) {
+    // Remove existing search modal if any
+    const existing = document.getElementById('mb-search-modal-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'mb-search-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.style.zIndex = '10001';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    const typeLabels = { artist: 'Artist', release: 'Album', recording: 'Track' };
+    overlay.innerHTML = `
+        <div class="mb-search-modal">
+            <div class="mb-search-header">
+                <div>
+                    <h2 class="mb-search-title">Search MusicBrainz</h2>
+                    <p class="mb-search-subtitle">Find a match for: <strong>${escapeHtml(entityName)}</strong>${artistName ? ` by ${escapeHtml(artistName)}` : ''}</p>
+                </div>
+                <button class="watch-all-close" onclick="document.getElementById('mb-search-modal-overlay').remove()">&times;</button>
+            </div>
+            <div class="mb-search-inputs">
+                <div class="mb-search-input-row">
+                    <label>Type</label>
+                    <select id="mb-search-type" class="mb-search-select">
+                        <option value="artist" ${entityType === 'artist' ? 'selected' : ''}>Artist</option>
+                        <option value="release" ${entityType === 'release' ? 'selected' : ''}>Album / Release</option>
+                        <option value="recording" ${entityType === 'recording' ? 'selected' : ''}>Track / Recording</option>
+                    </select>
+                </div>
+                <div class="mb-search-input-row">
+                    <label>Name</label>
+                    <input type="text" id="mb-search-query" class="mb-search-input" value="${escapeHtml(entityName)}">
+                </div>
+                <div class="mb-search-input-row" id="mb-search-artist-row" ${entityType === 'artist' ? 'style="display:none"' : ''}>
+                    <label>Artist</label>
+                    <input type="text" id="mb-search-artist" class="mb-search-input" value="${escapeHtml(artistName)}">
+                </div>
+                <button class="failed-mb-btn failed-mb-btn-primary" id="mb-search-go-btn" onclick="_runMBSearch(${entryId})">Search</button>
+            </div>
+            <div class="mb-search-results" id="mb-search-results">
+                <div class="failed-mb-empty">Enter a search query and click Search</div>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Toggle artist row visibility based on type
+    const typeSelect = overlay.querySelector('#mb-search-type');
+    typeSelect.addEventListener('change', () => {
+        const artistRow = overlay.querySelector('#mb-search-artist-row');
+        artistRow.style.display = typeSelect.value === 'artist' ? 'none' : '';
+    });
+
+    // Enter to search
+    overlay.querySelectorAll('.mb-search-input').forEach(input => {
+        input.addEventListener('keydown', (e) => { if (e.key === 'Enter') _runMBSearch(entryId); });
+    });
+
+    // Auto-search on open
+    _runMBSearch(entryId);
+}
+
+async function _runMBSearch(entryId) {
+    const resultsEl = document.getElementById('mb-search-results');
+    const typeEl = document.getElementById('mb-search-type');
+    const queryEl = document.getElementById('mb-search-query');
+    const artistEl = document.getElementById('mb-search-artist');
+    const goBtn = document.getElementById('mb-search-go-btn');
+    if (!resultsEl || !queryEl) return;
+
+    const type = typeEl.value;
+    const query = queryEl.value.trim();
+    const artist = artistEl ? artistEl.value.trim() : '';
+    if (!query) return;
+
+    goBtn.disabled = true;
+    goBtn.textContent = 'Searching...';
+    resultsEl.innerHTML = '<div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Searching MusicBrainz...</div></div>';
+
+    try {
+        const params = new URLSearchParams({ type, q: query, limit: 10 });
+        if (artist && type !== 'artist') params.set('artist', artist);
+
+        const resp = await fetch(`/api/musicbrainz/search?${params}`);
+        if (!resp.ok) throw new Error('Search failed');
+        const data = await resp.json();
+
+        if (!data.results || data.results.length === 0) {
+            resultsEl.innerHTML = '<div class="failed-mb-empty">No results found. Try adjusting your search.</div>';
+            return;
+        }
+
+        resultsEl.innerHTML = data.results.map((r, i) => {
+            const scoreColor = r.score >= 90 ? '#4ade80' : r.score >= 70 ? '#fbbf24' : '#f87171';
+            let detail = '';
+            if (type === 'release') detail = [r.artist, r.date, r.track_count ? `${r.track_count} tracks` : ''].filter(Boolean).join(' · ');
+            else if (type === 'recording') detail = [r.artist, r.album].filter(Boolean).join(' · ');
+            else detail = [r.type, r.country].filter(Boolean).join(' · ');
+
+            return `
+                <div class="mb-search-result" onclick="_selectMBMatch(${entryId}, '${r.mbid}', '${escapeForInlineJs(r.name)}')">
+                    <div class="mb-search-result-score" style="color:${scoreColor}">${r.score}%</div>
+                    <div class="mb-search-result-info">
+                        <div class="mb-search-result-name">${escapeHtml(r.name)}</div>
+                        ${r.disambiguation ? `<div class="mb-search-result-disambig">${escapeHtml(r.disambiguation)}</div>` : ''}
+                        ${detail ? `<div class="mb-search-result-detail">${escapeHtml(detail)}</div>` : ''}
+                    </div>
+                    <div class="mb-search-result-mbid" title="${r.mbid}">${r.mbid.substring(0, 8)}...</div>
+                </div>
+            `;
+        }).join('');
+    } catch (err) {
+        resultsEl.innerHTML = `<div class="failed-mb-empty">Search error: ${err.message}</div>`;
+    } finally {
+        goBtn.disabled = false;
+        goBtn.textContent = 'Search';
+    }
+}
+
+async function _selectMBMatch(entryId, mbid, mbName) {
+    try {
+        const resp = await fetch('/api/metadata-cache/mb-match', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ entry_id: entryId, mbid, mb_name: mbName })
+        });
+        const data = await resp.json();
+        if (data.success) {
+            showToast(`Matched to: ${mbName}`, 'success');
+            // Close search modal, refresh list with fresh counts
+            const searchOverlay = document.getElementById('mb-search-modal-overlay');
+            if (searchOverlay) searchOverlay.remove();
+            _failedMBState.typeCounts = {};
+            _loadFailedMBLookups();
+        } else {
+            showToast(data.error || 'Failed to save match', 'error');
+        }
+    } catch (err) {
+        showToast('Failed to save match', 'error');
+    }
+}
+
+function filterFindingsByJob(jobId) {
+    const jobFilter = document.getElementById('repair-findings-job-filter');
+    if (!jobFilter) return;
+
+    // Toggle: click same chip again to clear filter
+    if (jobFilter.value === jobId) {
+        jobFilter.value = '';
+    } else {
+        jobFilter.value = jobId;
+    }
+    _repairFindingsPage = 0;
+    loadRepairFindingsDashboard();
+    loadRepairFindings();
+}
+
+async function loadRepairFindings() {
+    const container = document.getElementById('repair-findings-list');
+    if (!container) return;
+
+    const jobFilter = document.getElementById('repair-findings-job-filter');
+    const severityFilter = document.getElementById('repair-findings-severity-filter');
+    const statusFilter = document.getElementById('repair-findings-status-filter');
+
+    const params = new URLSearchParams();
+    if (jobFilter && jobFilter.value) params.set('job_id', jobFilter.value);
+    if (severityFilter && severityFilter.value) params.set('severity', severityFilter.value);
+    if (statusFilter && statusFilter.value) params.set('status', statusFilter.value);
+    params.set('page', _repairFindingsPage);
+    params.set('limit', REPAIR_FINDINGS_PAGE_SIZE);
+
+    try {
+        const response = await fetch(`/api/repair/findings?${params}`);
+        if (!response.ok) throw new Error('Failed to fetch findings');
+        const data = await response.json();
+        const items = data.items || [];
+
+        _repairSelectedFindings.clear();
+        _repairFindingsTotal = data.total || 0;
+        const bulkBar = document.getElementById('repair-findings-bulk');
+        if (bulkBar) bulkBar.style.display = 'none';
+        const selectAllCb = document.getElementById('repair-select-all-cb');
+        if (selectAllCb) { selectAllCb.checked = false; selectAllCb.indeterminate = false; }
+
+        if (items.length === 0) {
+            container.innerHTML = `<div class="repair-empty-state">
+                <div class="repair-empty-icon">&#10003;</div>
+                <div class="repair-empty-title">All Clear</div>
+                <div class="repair-empty-text">No findings match your filters. Your library is looking good!</div>
+            </div>`;
+            document.getElementById('repair-findings-pagination').innerHTML = '';
+            return;
+        }
+
+        const severityIcons = { info: 'ℹ️', warning: '⚠️', critical: '🔴' };
+        const typeLabels = {
+            dead_file: 'Dead File', orphan_file: 'Orphan', acoustid_mismatch: 'Wrong Song',
+            acoustid_no_match: 'No Match', fake_lossless: 'Fake Lossless',
+            duplicate_tracks: 'Duplicate', incomplete_album: 'Incomplete',
+            path_mismatch: 'Path Mismatch', metadata_gap: 'Missing Metadata',
+            missing_cover_art: 'Missing Art', track_number_mismatch: 'Track Number',
+            missing_lossy_copy: 'No Lossy Copy'
+        };
+
+        // Finding types that have an automated fix action
+        const fixableTypes = {
+            dead_file: 'Re-download',
+            orphan_file: 'Resolve',
+            track_number_mismatch: 'Fix',
+            missing_cover_art: 'Apply Art',
+            metadata_gap: 'Apply',
+            duplicate_tracks: 'Keep Best',
+            incomplete_album: 'Auto-Fill',
+            missing_lossy_copy: 'Convert',
+            acoustid_mismatch: 'Fix',
+            missing_discography_track: 'Add to Wishlist',
+        };
+
+        container.innerHTML = items.map(f => {
+            const icon = severityIcons[f.severity] || 'ℹ️';
+            const age = formatCacheAge(f.created_at);
+            const actionLabels = {
+                removed_db_entry: 'Entry Removed', added_to_wishlist: 'Wishlisted', deleted_file: 'File Deleted',
+                already_gone: 'Already Gone', fixed_track_number: 'Track # Fixed',
+                applied_cover_art: 'Art Applied', applied_metadata: 'Metadata Applied',
+                removed_duplicates: 'Duplicates Removed',
+            };
+            let statusBadge = '';
+            if (f.status !== 'pending') {
+                const actionText = actionLabels[f.user_action] || f.status;
+                statusBadge = `<span class="repair-finding-status-badge ${f.status}">${actionText}</span>`;
+            }
+            const typeLabel = typeLabels[f.finding_type] || f.finding_type.replace(/_/g, ' ');
+            const d = f.details || {};
+            const filePath = f.file_path || d.original_path || d.file_path || '';
+            const fixLabel = fixableTypes[f.finding_type];
+
+            return `<div class="repair-finding-card ${f.severity}" data-id="${f.id}" data-job-id="${f.job_id}" data-mass-orphan="${!!(d.mass_orphan)}">
+                <div class="repair-finding-main" onclick="toggleFindingDetail(${f.id})">
+                    <div class="repair-finding-select" onclick="event.stopPropagation()">
+                        <input type="checkbox" onchange="toggleFindingSelect(${f.id}, this.checked)">
+                    </div>
+                    <div class="repair-finding-content">
+                        <div class="repair-finding-title">
+                            <span class="repair-finding-icon">${icon}</span>
+                            ${_escFinding(f.title)}
+                            <span class="repair-finding-type-badge">${typeLabel}</span>
+                            ${statusBadge}
+                        </div>
+                        <div class="repair-finding-desc">${_escFinding(f.description || '')}</div>
+                        ${filePath ? `<div class="repair-finding-path">${_escFinding(filePath)}</div>` : ''}
+                        <div class="repair-finding-meta">
+                            <span>${f.job_id.replace(/_/g, ' ')}</span>
+                            <span>&middot;</span>
+                            <span>${f.entity_type || 'file'}</span>
+                            ${f.entity_id ? `<span>&middot;</span><span>ID: ${f.entity_id}</span>` : ''}
+                            <span>&middot;</span>
+                            <span>${age}</span>
+                        </div>
+                    </div>
+                    <div class="repair-finding-actions" onclick="event.stopPropagation()">
+                        ${f.status === 'pending' ? `
+                            ${fixLabel ? `<button class="repair-finding-btn fix" onclick="fixRepairFinding(${f.id}, '${f.finding_type}')" title="${fixLabel}">${_escFinding(fixLabel)}</button>` : ''}
+                            <button class="repair-finding-btn dismiss" onclick="dismissRepairFinding(${f.id})" title="Dismiss">&times;</button>
+                        ` : ''}
+                        <button class="repair-finding-expand-btn" data-finding="${f.id}" title="Details">&#9660;</button>
+                    </div>
+                </div>
+                <div class="repair-finding-detail" id="repair-detail-${f.id}">
+                    <div class="repair-finding-detail-inner">
+                        ${_renderFindingDetail(f)}
+                    </div>
+                </div>
+            </div>`;
+        }).join('');
+
+        // Pagination
+        renderRepairFindingsPagination(data.total, data.page);
+
+    } catch (error) {
+        console.error('Error loading findings:', error);
+        container.innerHTML = '<div class="repair-empty">Error loading findings</div>';
+    }
+}
+
+function _escFinding(s) {
+    if (!s) return '';
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function _renderScoreBar(value, label) {
+    const pct = Math.round((value || 0) * 100);
+    const cls = pct >= 80 ? 'good' : pct >= 50 ? 'warn' : 'bad';
+    return `<div class="repair-score-bar">
+        <span class="repair-detail-key">${label}</span>
+        <div class="repair-score-bar-track"><div class="repair-score-bar-fill ${cls}" style="width:${pct}%"></div></div>
+        <span class="repair-detail-val">${pct}%</span>
+    </div>`;
+}
+
+function _formatFileSize(bytes) {
+    if (!bytes) return '-';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function _renderPlayButton(f) {
+    const d = f.details || {};
+    const filePath = f.file_path || d.file_path || d.original_path;
+    if (!filePath) return '';
+    const title = d.expected_title || d.title || d.file_title || d.matched_title || '';
+    const artist = d.expected_artist || d.artist || d.artist_name || '';
+    const album = d.album || d.album_title || '';
+    const albumArt = d.album_thumb_url || '';
+    return `<button class="repair-finding-play-btn" onclick="event.stopPropagation(); playFindingTrack(this)"
+        data-path="${_escFinding(filePath)}" data-title="${_escFinding(title)}"
+        data-artist="${_escFinding(artist)}" data-album="${_escFinding(album)}"
+        data-art="${_escFinding(albumArt)}" data-entity-id="${_escFinding(f.entity_id || '')}" title="Play this track">
+        <svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21"/></svg> Play
+    </button>`;
+}
+
+function playFindingTrack(btn) {
+    const track = {
+        file_path: btn.dataset.path,
+        title: btn.dataset.title || 'Unknown Track',
+        id: btn.dataset.entityId || null
+    };
+    const albumTitle = btn.dataset.album || '';
+    const artistName = btn.dataset.artist || '';
+    playLibraryTrack(track, albumTitle, artistName);
+}
+
+function _renderFindingMedia(d) {
+    const albumUrl = d.album_thumb_url;
+    const artistUrl = d.artist_thumb_url;
+    if (!albumUrl && !artistUrl) return '';
+    let html = '<div class="repair-finding-media">';
+    if (albumUrl) {
+        const albumLabel = d.album_title || 'Album';
+        html += `<div class="repair-finding-media-card">
+            <img class="repair-finding-media-img" src="${_escFinding(albumUrl)}" alt="Album art"
+                 onerror="this.parentElement.style.display='none'" />
+            <span class="repair-finding-media-label">${_escFinding(albumLabel)}</span>
+        </div>`;
+    }
+    if (artistUrl) {
+        const artistLabel = d.artist_name || d.artist || 'Artist';
+        html += `<div class="repair-finding-media-card">
+            <img class="repair-finding-media-img artist" src="${_escFinding(artistUrl)}" alt="Artist"
+                 onerror="this.parentElement.style.display='none'" />
+            <span class="repair-finding-media-label">${_escFinding(artistLabel)}</span>
+        </div>`;
+    }
+    html += '</div>';
+    return html;
+}
+
+function _renderFindingDetail(f) {
+    const d = f.details || {};
+    const rows = [];
+    const media = _renderFindingMedia(d);
+
+    switch (f.finding_type) {
+        case 'dead_file':
+            if (d.artist) rows.push(['Artist', d.artist]);
+            if (d.album) rows.push(['Album', d.album]);
+            if (d.title) rows.push(['Title', d.title]);
+            if (d.track_id) rows.push(['Track ID', d.track_id]);
+            if (d.original_path) rows.push(['Original Path', d.original_path, 'path']);
+            return media + _gridRows(rows) + _renderPlayButton(f);
+
+        case 'orphan_file':
+            if (d.folder) rows.push(['Folder', d.folder, 'path']);
+            if (d.format) rows.push(['Format', d.format.toUpperCase()]);
+            if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
+            if (d.modified) rows.push(['Last Modified', d.modified]);
+            if (f.file_path) rows.push(['Full Path', f.file_path, 'path']);
+            return _gridRows(rows) + _renderPlayButton(f);
+
+        case 'acoustid_mismatch': {
+            let html = media + '<div style="margin-bottom:8px">';
+            html += _renderScoreBar(d.fingerprint_score, 'Fingerprint');
+            html += _renderScoreBar(d.title_similarity, 'Title Match');
+            html += _renderScoreBar(d.artist_similarity, 'Artist Match');
+            html += '</div>';
+            rows.push(['Expected Title', d.expected_title || '-']);
+            rows.push(['Expected Artist', d.expected_artist || '-']);
+            rows.push(['AcoustID Title', d.acoustid_title || '-', 'highlight']);
+            rows.push(['AcoustID Artist', d.acoustid_artist || '-', 'highlight']);
+            if (f.file_path) rows.push(['File', f.file_path, 'path']);
+            return html + _gridRows(rows) + _renderPlayButton(f);
+        }
+
+        case 'acoustid_no_match':
+            if (d.expected_title) rows.push(['Expected Title', d.expected_title]);
+            if (d.expected_artist) rows.push(['Expected Artist', d.expected_artist]);
+            if (f.file_path) rows.push(['File', f.file_path, 'path']);
+            return media + _gridRows(rows) + _renderPlayButton(f);
+
+        case 'fake_lossless': {
+            const cutoff = d.detected_cutoff_khz || 0;
+            const expectedMin = d.expected_min_khz || 0;
+            const nyquist = d.nyquist_khz || (d.sample_rate ? d.sample_rate / 2000 : 22.05);
+            let flHtml = '';
+            if (cutoff && expectedMin) {
+                const cutoffPct = Math.min(100, Math.round((cutoff / nyquist) * 100));
+                const expectedPct = Math.min(100, Math.round((expectedMin / nyquist) * 100));
+                flHtml += `<div class="repair-spectrum-bar">
+                    <div class="repair-spectrum-label">Spectral Analysis</div>
+                    <div class="repair-spectrum-track">
+                        <div class="repair-spectrum-detected" style="width:${cutoffPct}%"></div>
+                        <div class="repair-spectrum-expected" style="left:${expectedPct}%"></div>
+                    </div>
+                    <div class="repair-spectrum-legend">
+                        <span class="repair-spectrum-legend-detected">${cutoff} kHz detected</span>
+                        <span class="repair-spectrum-legend-expected">${expectedMin} kHz expected min</span>
+                    </div>
+                </div>`;
+            }
+            if (d.format) rows.push(['Format', d.format.toUpperCase()]);
+            if (d.sample_rate) rows.push(['Sample Rate', `${d.sample_rate} Hz`]);
+            if (d.bit_depth) rows.push(['Bit Depth', `${d.bit_depth}-bit`]);
+            if (d.bitrate) rows.push(['Bitrate', `${d.bitrate} kbps`]);
+            if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
+            if (f.file_path) rows.push(['File', f.file_path, 'path']);
+            return flHtml + _gridRows(rows) + _renderPlayButton(f);
+        }
+
+        case 'duplicate_tracks':
+            if (!d.tracks || !d.tracks.length) return _gridRows([['Count', d.count || '?']]);
+            // Determine best copy (same logic as backend: highest bitrate, then duration, then track number)
+            const bestDup = d.tracks.reduce((best, t) => {
+                const bBr = best.bitrate || 0, tBr = t.bitrate || 0;
+                const bDur = best.duration || 0, tDur = t.duration || 0;
+                const bTn = best.track_number || 0, tTn = t.track_number || 0;
+                return (tBr > bBr || (tBr === bBr && tDur > bDur) || (tBr === bBr && tDur === bDur && tTn > bTn)) ? t : best;
+            }, d.tracks[0]);
+            const findingId = f.id;
+            return media + `<div class="repair-detail-sublist">${d.tracks.map((t, i) => {
+                const tid = t.track_id || t.id;
+                const isBest = (t.id === bestDup.id);
+                return `<div class="repair-detail-subitem ${isBest ? 'best' : 'removable'}" style="cursor:pointer;" onclick="selectDuplicateToKeep(${findingId}, '${tid}')" title="Click to keep this version">
+                    <strong>
+                        ${isBest ? '<span class="repair-keep-badge">KEEP</span>' : '<span class="repair-remove-badge">REMOVE</span>'}
+                        ${_escFinding(t.title)} by ${_escFinding(t.artist)}
+                    </strong>
+                    <span>Album: ${_escFinding(t.album || 'Unknown')}${t.bitrate ? ` &middot; ${t.bitrate} kbps` : ''}${t.duration ? ` &middot; ${Math.round(t.duration)}s` : ''}${t.track_number ? ` &middot; Track #${t.track_number}` : ''}</span>
+                    ${t.file_path ? `<span class="mono">${_escFinding(t.file_path)}</span>` : ''}
+                </div>`;
+            }).join('')}</div>
+            <div style="color:rgba(255,255,255,0.3);font-size:11px;padding:4px 0;">Click on a version to keep it, or use "Keep Best" for auto-selection</div>`;
+
+        case 'incomplete_album':
+            if (d.artist) rows.push(['Artist', d.artist]);
+            if (d.album_title) rows.push(['Album', d.album_title]);
+            if (d.primary_source && d.primary_album_id) {
+                const primaryLabel = d.primary_source.charAt(0).toUpperCase() + d.primary_source.slice(1);
+                rows.push([`${primaryLabel} ID`, d.primary_album_id]);
+                if (d.spotify_album_id && d.primary_source !== 'spotify') {
+                    rows.push(['Spotify ID', d.spotify_album_id]);
+                }
+            } else if (d.spotify_album_id) {
+                rows.push(['Spotify ID', d.spotify_album_id]);
+            }
+            let incHtml = media + _gridRows(rows);
+            const actual = d.actual_tracks || 0, expected = d.expected_tracks || 0;
+            if (expected > 0) {
+                const pct = Math.round((actual / expected) * 100);
+                incHtml += `<div class="repair-completion-bar">
+                    <div class="repair-completion-label">${actual} of ${expected} tracks (${pct}%)</div>
+                    <div class="repair-completion-track"><div class="repair-completion-fill" style="width:${pct}%"></div></div>
+                </div>`;
+            }
+            if (d.missing_tracks && d.missing_tracks.length) {
+                incHtml += `<div class="repair-detail-sublist">${d.missing_tracks.map(t => `
+                    <div class="repair-detail-subitem">
+                        <strong>#${t.track_number || '?'} ${_escFinding(t.name || t.title || 'Unknown')}</strong>
+                        ${t.source && t.source !== 'spotify' ? `<span>Source: ${_escFinding(t.source)}${t.source_track_id ? ` · ID: ${_escFinding(t.source_track_id)}` : ''}</span>` : ''}
+                        ${t.duration_ms ? `<span>Duration: ${Math.round(t.duration_ms / 1000)}s</span>` : ''}
+                    </div>`).join('')}</div>`;
+            }
+            return incHtml;
+
+        case 'path_mismatch':
+            if (d.from) rows.push(['Current Path', d.from, 'path']);
+            if (d.to) rows.push(['Expected Path', d.to, 'success']);
+            return _gridRows(rows);
+
+        case 'metadata_gap':
+            if (d.artist) rows.push(['Artist', d.artist]);
+            if (d.album) rows.push(['Album', d.album]);
+            if (d.title) rows.push(['Title', d.title]);
+            if (d.spotify_track_id) rows.push(['Spotify ID', d.spotify_track_id]);
+            if (d.resolved_source) rows.push(['Resolved Source', d.resolved_source]);
+            if (d.resolved_track_id) rows.push(['Resolved Track ID', d.resolved_track_id]);
+            if (d.found_fields && typeof d.found_fields === 'object') {
+                Object.entries(d.found_fields).forEach(([k, v]) => {
+                    rows.push([`Found: ${k}`, String(v), 'success']);
+                });
+            }
+            return media + _gridRows(rows);
+
+        case 'missing_cover_art':
+            if (d.artist) rows.push(['Artist', d.artist]);
+            if (d.album_title) rows.push(['Album', d.album_title]);
+            if (d.spotify_album_id) rows.push(['Spotify ID', d.spotify_album_id]);
+            let artHtml = '';
+            // Show artist image + found artwork side by side
+            if (d.artist_thumb_url || d.found_artwork_url) {
+                artHtml += '<div class="repair-finding-media">';
+                if (d.artist_thumb_url) {
+                    artHtml += `<div class="repair-finding-media-card">
+                        <img class="repair-finding-media-img artist" src="${_escFinding(d.artist_thumb_url)}" alt="Artist"
+                             onerror="this.parentElement.style.display='none'" />
+                        <span class="repair-finding-media-label">${_escFinding(d.artist || 'Artist')}</span>
+                    </div>`;
+                }
+                if (d.found_artwork_url) {
+                    artHtml += `<div class="repair-finding-media-card">
+                        <img class="repair-finding-media-img" src="${_escFinding(d.found_artwork_url)}" alt="Found artwork"
+                             onerror="this.parentElement.style.display='none'" />
+                        <span class="repair-finding-media-label">Found Artwork</span>
+                    </div>`;
+                }
+                artHtml += '</div>';
+            }
+            artHtml += _gridRows(rows);
+            return artHtml;
+
+        case 'track_number_mismatch':
+            if (d.album_title) rows.push(['Album', d.album_title]);
+            if (d.artist_name) rows.push(['Artist', d.artist_name]);
+            if (d.matched_title) rows.push(['Matched To', d.matched_title]);
+            if (d.file_title) rows.push(['File Title', d.file_title]);
+            if (d.current_track_num !== undefined) rows.push(['Current Track #', String(d.current_track_num)]);
+            if (d.correct_track_num !== undefined) rows.push(['Correct Track #', String(d.correct_track_num), 'success']);
+            if (f.file_path) rows.push(['File', f.file_path, 'path']);
+            let tnHtml = media;
+            if (d.match_score) {
+                tnHtml += '<div style="margin-bottom:8px">';
+                tnHtml += _renderScoreBar(d.match_score, 'Title Match');
+                tnHtml += '</div>';
+            }
+            tnHtml += _gridRows(rows);
+            if (d.changes && d.changes.length) {
+                tnHtml += `<div class="repair-detail-sublist">${d.changes.map(c => `
+                    <div class="repair-detail-subitem"><strong>${_escFinding(c)}</strong></div>`).join('')}</div>`;
+            }
+            tnHtml += _renderPlayButton(f);
+            return tnHtml;
+
+        default:
+            // Generic: render all detail keys
+            Object.entries(d).forEach(([k, v]) => {
+                if (typeof v !== 'object' && !k.endsWith('_thumb_url')) {
+                    rows.push([k.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()), String(v)]);
+                }
+            });
+            if (f.file_path) rows.push(['File', f.file_path, 'path']);
+            return (media || '') + (rows.length ? _gridRows(rows) : '<span style="color:rgba(255,255,255,0.3);font-size:12px;">No additional details available</span>');
+    }
+}
+
+function _gridRows(rows) {
+    if (!rows.length) return '';
+    return `<div class="repair-detail-grid">${rows.map(([k, v, cls]) =>
+        `<span class="repair-detail-key">${_escFinding(k)}</span><span class="repair-detail-val ${cls || ''}">${_escFinding(v)}</span>`
+    ).join('')}</div>`;
+}
+
+function toggleFindingDetail(id) {
+    const panel = document.getElementById(`repair-detail-${id}`);
+    const btn = document.querySelector(`.repair-finding-expand-btn[data-finding="${id}"]`);
+    if (!panel) return;
+    const isOpen = panel.classList.toggle('open');
+    if (btn) btn.classList.toggle('open', isOpen);
+}
+
+function toggleFindingSelect(id, checked) {
+    if (checked) _repairSelectedFindings.add(id);
+    else _repairSelectedFindings.delete(id);
+
+    _updateFindingsBulkBar();
+}
+
+function _updateFindingsBulkBar() {
+    const bulkBar = document.getElementById('repair-findings-bulk');
+    const count = _repairSelectedFindings.size;
+    if (bulkBar) bulkBar.style.display = count > 0 ? '' : 'none';
+    const countEl = document.getElementById('repair-bulk-count');
+    if (countEl) countEl.textContent = count > 0 ? `${count} selected` : '';
+
+    // Show "Fix All (N)" when all on page are selected and there are more pages
+    const fixAllBtn = document.getElementById('repair-fix-all-btn');
+    if (fixAllBtn && _repairFindingsTotal > 0) {
+        const allPageSelected = count > 0 && count >= document.querySelectorAll('.repair-finding-card').length;
+        fixAllBtn.style.display = (allPageSelected && _repairFindingsTotal > count) ? '' : 'none';
+        fixAllBtn.textContent = `Fix All ${_repairFindingsTotal}`;
+    }
+
+    // Sync "Select All" checkbox
+    const selectAllCb = document.getElementById('repair-select-all-cb');
+    if (selectAllCb) {
+        const totalOnPage = document.querySelectorAll('.repair-finding-card').length;
+        selectAllCb.checked = totalOnPage > 0 && count >= totalOnPage;
+        selectAllCb.indeterminate = count > 0 && count < totalOnPage;
+    }
+}
+
+function toggleSelectAllFindings(checked) {
+    const checkboxes = document.querySelectorAll('.repair-finding-select input[type="checkbox"]');
+    checkboxes.forEach(cb => {
+        cb.checked = checked;
+        const card = cb.closest('.repair-finding-card');
+        if (card) {
+            const id = parseInt(card.dataset.id);
+            if (checked) _repairSelectedFindings.add(id);
+            else _repairSelectedFindings.delete(id);
+        }
+    });
+    _updateFindingsBulkBar();
+}
+
+async function fixAllMatchingFindings() {
+    const jobFilter = document.getElementById('repair-findings-job-filter');
+    const severityFilter = document.getElementById('repair-findings-severity-filter');
+    const jobId = jobFilter ? jobFilter.value : '';
+    const severity = severityFilter ? severityFilter.value : '';
+
+    // If fixing orphan files or dead files, prompt for action FIRST
+    let fixAction = null;
+    // Discography backfill: 3-option prompt (Add to Wishlist / Just Clear / Cancel).
+    // "Just Clear" bypasses bulk-fix entirely and goes through the clear endpoint,
+    // which is why it's handled inline and returns early.
+    if (jobId === 'discography_backfill') {
+        const choice = await _promptDiscographyBackfillAction(_repairFindingsTotal);
+        if (!choice) return;
+        if (choice === 'dismiss') {
+            if (!await showConfirmDialog({
+                title: 'Clear All Discography Findings',
+                message: `Clear all ${_repairFindingsTotal} discography backfill findings without adding any to the wishlist? Tracks can be re-detected next scan.`,
+                confirmText: 'Clear All',
+                destructive: false
+            })) return;
+            showToast(`Clearing ${_repairFindingsTotal} findings...`, 'info');
+            try {
+                const resp = await fetch('/api/repair/findings/clear', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ job_id: 'discography_backfill', status: 'pending' })
+                });
+                const result = await resp.json();
+                if (result.success) {
+                    showToast(`Cleared ${result.deleted} findings`, 'success');
+                } else {
+                    showToast(result.error || 'Clear failed', 'error');
+                }
+            } catch (err) {
+                console.error('Error clearing findings:', err);
+                showToast('Error clearing findings', 'error');
+            }
+            _repairSelectedFindings.clear();
+            loadRepairFindingsDashboard();
+            loadRepairFindings();
+            updateRepairStatus();
+            return;
+        }
+        // 'add_to_wishlist' falls through to bulk-fix. No destructive warning —
+        // the backend handler only adds tracks to the wishlist.
+    } else if (jobId === 'dead_file_cleaner') {
+        fixAction = await _promptDeadFileAction();
+        if (!fixAction) return;
+    } else if (jobId === 'orphan_file_detector' || _isMassOrphanFix(jobId, _repairFindingsTotal)) {
+        fixAction = await _promptOrphanAction();
+        if (!fixAction) return;
+        // Confirm before proceeding
+        if (fixAction === 'delete' && _repairFindingsTotal > 50) {
+            if (!await showWitnessMeDialog(_repairFindingsTotal)) return;
+        } else if (fixAction === 'delete') {
+            if (!await showConfirmDialog({
+                title: 'Delete Orphan Files',
+                message: `Permanently delete ${_repairFindingsTotal} orphan files from disk? This cannot be undone.`,
+                confirmText: 'Delete',
+                destructive: true
+            })) return;
+        } else if (fixAction === 'staging') {
+            if (!await showConfirmDialog({
+                title: 'Move to Staging',
+                message: `Move ${_repairFindingsTotal} orphan files to the import folder? Files are NOT deleted — you can review and import them.`,
+                confirmText: 'Move All to Staging',
+                destructive: false
+            })) return;
+        }
+    } else {
+        const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
+        if (!await showConfirmDialog({
+            title: 'Fix All Findings',
+            message: `Apply fixes to all ${_repairFindingsTotal} pending fixable findings for ${scopeLabel}? This may delete files or remove database entries depending on finding type.`,
+            confirmText: 'Fix All',
+            destructive: true
+        })) return;
+    }
+
+    showToast(`Fixing ${_repairFindingsTotal} findings...`, 'info');
+
+    try {
+        const body = {};
+        if (jobId) body.job_id = jobId;
+        if (severity) body.severity = severity;
+        if (fixAction) body.fix_action = fixAction;
+
+        const response = await fetch('/api/repair/findings/bulk-fix', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        });
+        const result = await response.json();
+        if (result.success) {
+            let msg = `Fixed ${result.fixed}${result.failed ? `, ${result.failed} failed` : ''} of ${result.total}`;
+            if (result.errors && result.errors.length > 0) {
+                msg += `: ${result.errors[0].error}`;
+            }
+            showToast(msg, result.fixed > 0 ? 'success' : 'error');
+        } else {
+            showToast(result.error || 'Bulk fix failed', 'error');
+        }
+    } catch (error) {
+        console.error('Error in bulk fix:', error);
+        showToast('Error applying bulk fix', 'error');
+    }
+
+    _repairSelectedFindings.clear();
+    loadRepairFindingsDashboard();
+    loadRepairFindings();
+    updateRepairStatus();
+}
+
+function renderRepairFindingsPagination(total, currentPage) {
+    const container = document.getElementById('repair-findings-pagination');
+    if (!container) return;
+
+    const totalPages = Math.ceil(total / REPAIR_FINDINGS_PAGE_SIZE);
+    if (totalPages <= 1) { container.innerHTML = ''; return; }
+
+    let html = '';
+    if (currentPage > 0) {
+        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${currentPage - 1};loadRepairFindings()">&larr;</button>`;
+    }
+
+    // Smart page range
+    let startPage = Math.max(0, currentPage - 3);
+    let endPage = Math.min(totalPages, startPage + 7);
+    if (endPage - startPage < 7) startPage = Math.max(0, endPage - 7);
+
+    if (startPage > 0) {
+        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=0;loadRepairFindings()">1</button>`;
+        if (startPage > 1) html += '<span class="repair-page-info">...</span>';
+    }
+    for (let i = startPage; i < endPage; i++) {
+        html += `<button class="repair-page-btn ${i === currentPage ? 'active' : ''}"
+                         onclick="_repairFindingsPage=${i};loadRepairFindings()">${i + 1}</button>`;
+    }
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) html += '<span class="repair-page-info">...</span>';
+        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${totalPages - 1};loadRepairFindings()">${totalPages}</button>`;
+    }
+
+    if (currentPage < totalPages - 1) {
+        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${currentPage + 1};loadRepairFindings()">&rarr;</button>`;
+    }
+    html += `<span class="repair-page-info">${total.toLocaleString()} total</span>`;
+    container.innerHTML = html;
+}
+
+async function selectDuplicateToKeep(findingId, keepTrackId) {
+    if (!await showConfirmDialog({ title: 'Keep This Version', message: 'Keep this version and remove the other duplicate(s)?', confirmText: 'Keep', destructive: true })) return;
+    try {
+        const response = await fetch(`/api/repair/findings/${findingId}/fix`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fix_action: keepTrackId }),
+        });
+        const result = await response.json();
+        if (result.success) {
+            showToast(result.message || 'Duplicate resolved', 'success');
+        } else {
+            showToast(result.error || 'Failed to resolve duplicate', 'error');
+        }
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error fixing duplicate:', error);
+        showToast('Error resolving duplicate', 'error');
+    }
+}
+
+async function fixRepairFinding(id, findingType) {
+    // Orphan files require user to choose an action
+    let fixAction = null;
+    if (findingType === 'orphan_file') {
+        fixAction = await _promptOrphanAction();
+        if (!fixAction) return; // User cancelled
+    }
+    // Dead files: re-download or just remove from DB
+    if (findingType === 'dead_file') {
+        fixAction = await _promptDeadFileAction();
+        if (!fixAction) return;
+    }
+    // AcoustID mismatch: retag, redownload, or delete
+    if (findingType === 'acoustid_mismatch') {
+        fixAction = await _promptAcoustidAction();
+        if (!fixAction) return;
+    }
+    // Discography backfill: add to wishlist or just clear the finding
+    if (findingType === 'missing_discography_track') {
+        const choice = await _promptDiscographyBackfillAction(1);
+        if (!choice) return;  // cancel
+        if (choice === 'dismiss') {
+            // User just wants to remove the finding without adding to wishlist
+            await dismissRepairFinding(id);
+            return;
+        }
+        // 'add_to_wishlist' — fall through to the fix endpoint. The handler
+        // already defaults to adding to wishlist, so no fix_action is needed.
+    }
+
+    const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+    const fixBtn = card ? card.querySelector('.repair-finding-btn.fix') : null;
+    let originalText = '';
+    if (fixBtn) {
+        originalText = fixBtn.textContent;
+        fixBtn.disabled = true;
+        fixBtn.textContent = '...';
+    }
+    try {
+        const body = fixAction ? { fix_action: fixAction } : {};
+        const response = await fetch(`/api/repair/findings/${id}/fix`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body),
+        });
+        const result = await response.json();
+        if (result.success) {
+            showToast(result.message || 'Fixed successfully', 'success');
+        } else {
+            showToast(result.error || 'Fix failed', 'error');
+        }
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error fixing finding:', error);
+        showToast('Error applying fix', 'error');
+        if (fixBtn) {
+            fixBtn.disabled = false;
+            fixBtn.textContent = originalText;
+        }
+    }
+}
+
+function _promptOrphanAction() {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+        overlay.innerHTML = `
+            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:380px;width:90%;text-align:center;">
+                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">Orphan File Action</div>
+                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
+                    Choose how to handle orphan files. Staging is safe and reversible.
+                </div>
+                <div style="display:flex;gap:10px;justify-content:center;">
+                    <button id="_orphan-staging" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
+                        Move to Staging
+                    </button>
+                    <button id="_orphan-delete" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
+                        Delete
+                    </button>
+                </div>
+                <button id="_orphan-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
+                    Cancel
+                </button>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        overlay.querySelector('#_orphan-staging').onclick = () => { overlay.remove(); resolve('staging'); };
+        overlay.querySelector('#_orphan-delete').onclick = () => { overlay.remove(); resolve('delete'); };
+        overlay.querySelector('#_orphan-cancel').onclick = () => { overlay.remove(); resolve(null); };
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+    });
+}
+
+function _promptDeadFileAction() {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+        overlay.innerHTML = `
+            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:420px;width:90%;text-align:center;">
+                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">Dead File Action</div>
+                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
+                    This track's file no longer exists on disk. Choose how to handle it.
+                </div>
+                <div style="display:flex;gap:10px;justify-content:center;">
+                    <button id="_dead-redownload" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
+                        Re-download
+                    </button>
+                    <button id="_dead-remove" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
+                        Remove from DB
+                    </button>
+                </div>
+                <button id="_dead-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
+                    Cancel
+                </button>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        overlay.querySelector('#_dead-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
+        overlay.querySelector('#_dead-remove').onclick = () => { overlay.remove(); resolve('remove'); };
+        overlay.querySelector('#_dead-cancel').onclick = () => { overlay.remove(); resolve(null); };
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+    });
+}
+
+function _promptAcoustidAction() {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+        overlay.innerHTML = `
+            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:460px;width:90%;text-align:center;">
+                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">AcoustID Mismatch</div>
+                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
+                    The audio fingerprint doesn't match the expected track. Choose how to fix it.
+                </div>
+                <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
+                    <button id="_acid-retag" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(102,126,234,0.4);background:rgba(102,126,234,0.15);color:#667eea;font-weight:600;cursor:pointer;font-family:inherit;">
+                        Retag
+                    </button>
+                    <button id="_acid-redownload" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
+                        Re-download
+                    </button>
+                    <button id="_acid-delete" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
+                        Delete
+                    </button>
+                </div>
+                <div style="margin-top:12px;font-size:0.78em;color:rgba(255,255,255,0.35);line-height:1.4;">
+                    Retag = update metadata to match actual audio &bull; Re-download = add correct track to wishlist &amp; delete wrong file &bull; Delete = remove file and DB entry
+                </div>
+                <button id="_acid-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
+                    Cancel
+                </button>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+
+        overlay.querySelector('#_acid-retag').onclick = () => { overlay.remove(); resolve('retag'); };
+        overlay.querySelector('#_acid-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
+        overlay.querySelector('#_acid-delete').onclick = () => { overlay.remove(); resolve('delete'); };
+        overlay.querySelector('#_acid-cancel').onclick = () => { overlay.remove(); resolve(null); };
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+    });
+}
+
+function _promptDiscographyBackfillAction(count = 1) {
+    const isSingle = count <= 1;
+    const headerText = isSingle ? 'Missing Discography Track' : `Missing Discography Tracks (${count})`;
+    const bodyText = isSingle
+        ? 'Add this track to the wishlist for automatic download, or just clear the finding?'
+        : `Add all ${count} selected tracks to the wishlist for automatic download, or just clear the findings?`;
+    const addLabel = isSingle ? 'Add to Wishlist' : `Add All ${count} to Wishlist`;
+    const clearLabel = isSingle ? 'Just Clear Finding' : 'Just Clear Findings';
+
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
+        overlay.innerHTML = `
+            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:460px;width:90%;text-align:center;">
+                <div id="_dbf-header" style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;"></div>
+                <div id="_dbf-body" style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;"></div>
+                <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
+                    <button id="_dbf-add" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;"></button>
+                    <button id="_dbf-dismiss" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(102,126,234,0.4);background:rgba(102,126,234,0.15);color:#667eea;font-weight:500;cursor:pointer;font-family:inherit;"></button>
+                </div>
+                <button id="_dbf-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
+                    Cancel
+                </button>
+            </div>
+        `;
+        // Assign text content (avoids HTML-escaping gotchas with dynamic values)
+        overlay.querySelector('#_dbf-header').textContent = headerText;
+        overlay.querySelector('#_dbf-body').textContent = bodyText;
+        overlay.querySelector('#_dbf-add').textContent = addLabel;
+        overlay.querySelector('#_dbf-dismiss').textContent = clearLabel;
+        document.body.appendChild(overlay);
+
+        overlay.querySelector('#_dbf-add').onclick = () => { overlay.remove(); resolve('add_to_wishlist'); };
+        overlay.querySelector('#_dbf-dismiss').onclick = () => { overlay.remove(); resolve('dismiss'); };
+        overlay.querySelector('#_dbf-cancel').onclick = () => { overlay.remove(); resolve(null); };
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+    });
+}
+
+async function resolveRepairFinding(id) {
+    try {
+        await fetch(`/api/repair/findings/${id}/resolve`, { method: 'POST' });
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error resolving finding:', error);
+    }
+}
+
+async function dismissRepairFinding(id) {
+    try {
+        await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error dismissing finding:', error);
+    }
+}
+
+async function bulkRepairAction(action) {
+    if (_repairSelectedFindings.size === 0) return;
+    try {
+        await fetch('/api/repair/findings/bulk', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ ids: Array.from(_repairSelectedFindings), action })
+        });
+        showToast(`${_repairSelectedFindings.size} findings ${action === 'dismiss' ? 'dismissed' : 'resolved'}`, 'success');
+        _repairSelectedFindings.clear();
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error bulk updating findings:', error);
+        showToast('Error updating findings', 'error');
+    }
+}
+
+async function bulkFixFindings() {
+    if (_repairSelectedFindings.size === 0) return;
+    const ids = Array.from(_repairSelectedFindings);
+
+    // If any selected findings are orphan files, prompt for action FIRST
+    const selectedOrphanCards = ids.filter(id => {
+        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+        return card && card.dataset.jobId === 'orphan_file_detector';
+    });
+    let orphanFixAction = null;
+    if (selectedOrphanCards.length > 0) {
+        orphanFixAction = await _promptOrphanAction();
+        if (!orphanFixAction) return;
+        // Only show scary dialog for mass deletion, not staging
+        if (orphanFixAction === 'delete' && selectedOrphanCards.length > MASS_ORPHAN_THRESHOLD) {
+            const hasMassFlag = ids.some(id => {
+                const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+                return card && card.dataset.massOrphan === 'true';
+            });
+            if (hasMassFlag && !await showWitnessMeDialog(selectedOrphanCards.length)) return;
+        }
+    }
+
+    // If any selected findings are dead files, prompt for action
+    const selectedDeadCards = ids.filter(id => {
+        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+        return card && card.dataset.jobId === 'dead_file_cleaner';
+    });
+    let deadFixAction = null;
+    if (selectedDeadCards.length > 0) {
+        deadFixAction = await _promptDeadFileAction();
+        if (!deadFixAction) return;
+    }
+
+    // If any selected findings are AcoustID mismatches, prompt for action
+    const selectedAcoustidCards = ids.filter(id => {
+        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+        return card && card.dataset.jobId === 'acoustid_scanner';
+    });
+    let acoustidFixAction = null;
+    if (selectedAcoustidCards.length > 0) {
+        acoustidFixAction = await _promptAcoustidAction();
+        if (!acoustidFixAction) return;
+    }
+
+    // If any selected findings are discography backfill, prompt once (add-to-wishlist vs clear)
+    const selectedBackfillCards = ids.filter(id => {
+        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+        return card && card.dataset.jobId === 'discography_backfill';
+    });
+    let backfillAction = null;
+    if (selectedBackfillCards.length > 0) {
+        backfillAction = await _promptDiscographyBackfillAction(selectedBackfillCards.length);
+        if (!backfillAction) return;
+    }
+
+    let fixed = 0, failed = 0, lastError = '';
+    showToast(`Fixing ${ids.length} findings...`, 'info');
+
+    for (const id of ids) {
+        try {
+            // Determine if this finding needs a specific action
+            const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
+            const isOrphan = card && card.dataset.jobId === 'orphan_file_detector';
+            const isDead = card && card.dataset.jobId === 'dead_file_cleaner';
+            const isAcoustid = card && card.dataset.jobId === 'acoustid_scanner';
+            const isBackfill = card && card.dataset.jobId === 'discography_backfill';
+
+            // Discography backfill "Just Clear" path uses the dismiss endpoint,
+            // not the fix endpoint — so handle it inline before the fix call.
+            if (isBackfill && backfillAction === 'dismiss') {
+                try {
+                    const resp = await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
+                    if (resp.ok) fixed++;
+                    else { failed++; lastError = 'dismiss failed'; }
+                } catch {
+                    failed++;
+                }
+                continue;
+            }
+
+            let body = {};
+            if (isOrphan && orphanFixAction) body = { fix_action: orphanFixAction };
+            else if (isDead && deadFixAction) body = { fix_action: deadFixAction };
+            else if (isAcoustid && acoustidFixAction) body = { fix_action: acoustidFixAction };
+            // Discography backfill "Add to Wishlist" falls through with empty body
+            // — the fix handler already adds to wishlist by default.
+
+            const response = await fetch(`/api/repair/findings/${id}/fix`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            const result = await response.json();
+            if (result.success) fixed++;
+            else { failed++; lastError = result.error || 'unknown error'; }
+        } catch {
+            failed++;
+        }
+    }
+
+    _repairSelectedFindings.clear();
+    let fixMsg = `Fixed ${fixed}${failed ? `, ${failed} failed` : ''}`;
+    if (failed && lastError) fixMsg += `: ${lastError}`;
+    showToast(fixMsg, fixed > 0 ? 'success' : 'error');
+    loadRepairFindingsDashboard();
+    loadRepairFindings();
+    updateRepairStatus();
+}
+
+async function clearRepairFindings() {
+    const jobFilter = document.getElementById('repair-findings-job-filter');
+    const statusFilter = document.getElementById('repair-findings-status-filter');
+    const jobId = jobFilter ? jobFilter.value : '';
+    const status = statusFilter ? statusFilter.value : '';
+
+    const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
+    const statusLabel = status ? ` (${status})` : '';
+    if (!await showConfirmDialog({
+        title: 'Clear Findings',
+        message: `Delete all findings for ${scopeLabel}${statusLabel}? This cannot be undone.`,
+        confirmText: 'Clear',
+        destructive: true
+    })) return;
+
+    try {
+        const body = {};
+        if (jobId) body.job_id = jobId;
+        if (status) body.status = status;
+
+        const response = await fetch('/api/repair/findings/clear', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(body)
+        });
+        const result = await response.json();
+        if (result.success) {
+            showToast(`Cleared ${result.deleted} findings`, 'success');
+        } else {
+            showToast(result.error || 'Failed to clear findings', 'error');
+        }
+        _repairSelectedFindings.clear();
+        loadRepairFindingsDashboard();
+        loadRepairFindings();
+        updateRepairStatus();
+    } catch (error) {
+        console.error('Error clearing findings:', error);
+        showToast('Error clearing findings', 'error');
+    }
+}
+
+async function loadRepairHistory() {
+    const container = document.getElementById('repair-history-list');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/repair/history?limit=50');
+        if (!response.ok) throw new Error('Failed to fetch history');
+        const data = await response.json();
+        const runs = data.runs || [];
+
+        if (runs.length === 0) {
+            container.innerHTML = `<div class="repair-empty-state">
+                <div class="repair-empty-icon">&#128337;</div>
+                <div class="repair-empty-title">No History Yet</div>
+                <div class="repair-empty-text">Job run history will appear here after maintenance jobs complete their first scan.</div>
+            </div>`;
+            return;
+        }
+
+        container.innerHTML = runs.map(run => {
+            const duration = run.duration_seconds ? `${run.duration_seconds.toFixed(1)}s` : '-';
+            const age = formatCacheAge(run.started_at);
+            const statusClass = run.status === 'completed' ? 'success' :
+                run.status === 'failed' ? 'error' : 'running';
+
+            // Build stat pills
+            const stats = [];
+            stats.push(`<span class="repair-history-stat"><strong>${(run.items_scanned || 0).toLocaleString()}</strong> scanned</span>`);
+            if (run.findings_created) stats.push(`<span class="repair-history-stat findings"><strong>${run.findings_created}</strong> findings</span>`);
+            if (run.auto_fixed) stats.push(`<span class="repair-history-stat fixed"><strong>${run.auto_fixed}</strong> fixed</span>`);
+            if (run.errors) stats.push(`<span class="repair-history-stat errors"><strong>${run.errors}</strong> errors</span>`);
+
+            // Format timestamps
+            const startTime = run.started_at ? new Date(run.started_at).toLocaleString() : '-';
+            const endTime = run.finished_at ? new Date(run.finished_at).toLocaleString() : 'In progress';
+
+            return `<div class="repair-history-entry">
+                <div class="repair-history-header">
+                    <div class="repair-history-dot ${statusClass}"></div>
+                    <span class="repair-history-name">${run.display_name || run.job_id}</span>
+                    <span class="repair-history-status ${statusClass}">${run.status}</span>
+                    <span class="repair-history-duration">${duration}</span>
+                </div>
+                <div class="repair-history-stats">${stats.join('')}</div>
+                <div class="repair-history-meta">${age} &middot; ${startTime} &rarr; ${endTime}</div>
+            </div>`;
+        }).join('');
+
+    } catch (error) {
+        console.error('Error loading repair history:', error);
+        container.innerHTML = '<div class="repair-empty">Error loading history</div>';
+    }
+}
+
+// Initialize Repair Worker UI on page load
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('repair-button');
+        if (button) {
+            button.addEventListener('click', openRepairModal);
+            updateRepairStatus();
+            setInterval(updateRepairStatus, 5000);
+        }
+    });
+} else {
+    const button = document.getElementById('repair-button');
+    if (button) {
+        button.addEventListener('click', openRepairModal);
+        updateRepairStatus();
+        setInterval(updateRepairStatus, 5000);
+    }
+}
+
+// ===================================================================
+
diff --git a/webui/static/init.js b/webui/static/init.js
new file mode 100644
index 00000000..047e3675
--- /dev/null
+++ b/webui/static/init.js
@@ -0,0 +1,2359 @@
+// INITIALIZATION
+// ===============================
+
+// ---- Accent Color System ----
+
+function getAccentFallbackColors() {
+    let accent = localStorage.getItem('soulsync-accent') || '#1db954';
+    if (!/^#[0-9a-fA-F]{6}$/.test(accent)) accent = '#1db954';
+    // Compute a lighter variant for the second color
+    const r = parseInt(accent.slice(1, 3), 16), g = parseInt(accent.slice(3, 5), 16), b = parseInt(accent.slice(5, 7), 16);
+    const lighter = '#' + [Math.min(r + 20, 255), Math.min(g + 30, 255), Math.min(b + 12, 255)]
+        .map(v => v.toString(16).padStart(2, '0')).join('');
+    return [accent, lighter];
+}
+
+function applyAccentColor(hex) {
+    // Validate hex format — reject corrupt values
+    if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(hex)) {
+        hex = '#1db954'; // fallback to default
+    }
+    // Convert hex to RGB
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+
+    // Convert RGB to HSL
+    const rn = r / 255, gn = g / 255, bn = b / 255;
+    const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    let h = 0, s = 0;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
+        else if (max === gn) h = ((bn - rn) / d + 2) / 6;
+        else h = ((rn - gn) / d + 4) / 6;
+    }
+
+    // Compute light variant: +16% lightness
+    const lightL = Math.min(l + 0.16, 0.95);
+    // Compute neon variant: high lightness + boosted saturation
+    const neonL = Math.min(l + 0.30, 0.95);
+    const neonS = Math.min(s + 0.1, 1.0);
+
+    function hslToRgb(h, s, l) {
+        if (s === 0) { const v = Math.round(l * 255); return [v, v, v]; }
+        const hue2rgb = (p, q, t) => {
+            if (t < 0) t += 1; if (t > 1) t -= 1;
+            if (t < 1 / 6) return p + (q - p) * 6 * t;
+            if (t < 1 / 2) return q;
+            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+            return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        return [Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+        Math.round(hue2rgb(p, q, h) * 255),
+        Math.round(hue2rgb(p, q, h - 1 / 3) * 255)];
+    }
+
+    const light = hslToRgb(h, s, lightL);
+    const neon = hslToRgb(h, neonS, neonL);
+
+    const root = document.documentElement.style;
+    root.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
+    root.setProperty('--accent-light-rgb', `${light[0]}, ${light[1]}, ${light[2]}`);
+    root.setProperty('--accent-neon-rgb', `${neon[0]}, ${neon[1]}, ${neon[2]}`);
+
+    // Store for instant restore on next page load
+    localStorage.setItem('soulsync-accent', hex);
+
+    // Update preview swatch if it exists
+    const swatch = document.getElementById('accent-preview-swatch');
+    if (swatch) swatch.style.background = hex;
+}
+
+function applyParticlesSetting(enabled) {
+    const canvas = document.getElementById('page-particles-canvas');
+    if (canvas) canvas.style.display = enabled ? '' : 'none';
+    if (window.pageParticles) {
+        if (enabled) {
+            const activePage = document.querySelector('.page.active');
+            if (activePage) {
+                window.pageParticles.setPage(activePage.id.replace('-page', ''));
+            }
+        } else {
+            window.pageParticles.stop();
+        }
+    }
+    window._particlesEnabled = enabled;
+    localStorage.setItem('soulsync-particles', String(enabled));
+}
+
+function applyWorkerOrbsSetting(enabled) {
+    window._workerOrbsEnabled = enabled;
+    localStorage.setItem('soulsync-worker-orbs', String(enabled));
+    if (window.workerOrbs) {
+        if (enabled) {
+            const activePage = document.querySelector('.page.active');
+            if (activePage && activePage.id === 'dashboard-page') {
+                window.workerOrbs.setPage('dashboard');
+            }
+        } else {
+            window.workerOrbs.setPage('_disabled');
+        }
+    }
+}
+
+function initAccentColorListeners() {
+    const presetSelect = document.getElementById('accent-preset');
+    const customGroup = document.getElementById('custom-color-group');
+    const customPicker = document.getElementById('accent-custom-color');
+    if (!presetSelect) return;
+
+    presetSelect.addEventListener('change', () => {
+        const val = presetSelect.value;
+        if (val === 'custom') {
+            if (customGroup) customGroup.style.display = '';
+            if (customPicker) applyAccentColor(customPicker.value);
+        } else {
+            if (customGroup) customGroup.style.display = 'none';
+            applyAccentColor(val);
+        }
+    });
+
+    if (customPicker) {
+        customPicker.addEventListener('input', () => {
+            applyAccentColor(customPicker.value);
+        });
+    }
+
+    // Particles toggle — apply immediately on change
+    const particlesCheckbox = document.getElementById('particles-enabled');
+    if (particlesCheckbox) {
+        particlesCheckbox.addEventListener('change', () => {
+            applyParticlesSetting(particlesCheckbox.checked);
+        });
+    }
+
+    // Worker orbs toggle — apply immediately on change
+    const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
+    if (workerOrbsCheckbox) {
+        workerOrbsCheckbox.addEventListener('change', () => {
+            applyWorkerOrbsSetting(workerOrbsCheckbox.checked);
+        });
+    }
+
+    // Reduce effects toggle — apply immediately on change
+    const reduceEffectsCheckbox = document.getElementById('reduce-effects-enabled');
+    if (reduceEffectsCheckbox) {
+        reduceEffectsCheckbox.addEventListener('change', () => {
+            applyReduceEffects(reduceEffectsCheckbox.checked);
+        });
+    }
+}
+
+function applyReduceEffects(enabled) {
+    if (enabled) {
+        document.body.classList.add('reduce-effects');
+    } else {
+        document.body.classList.remove('reduce-effects');
+    }
+    localStorage.setItem('soulsync-reduce-effects', enabled ? '1' : '0');
+}
+
+// Bootstrap accent and reduce-effects from localStorage instantly (prevents flash)
+(function () {
+    if (localStorage.getItem('soulsync-reduce-effects') === '1') {
+        document.body.classList.add('reduce-effects');
+    }
+    const saved = localStorage.getItem('soulsync-accent');
+    if (saved) applyAccentColor(saved);
+    // Bootstrap particles setting from localStorage
+    const particlesSaved = localStorage.getItem('soulsync-particles');
+    if (particlesSaved === 'false') {
+        window._particlesEnabled = false;
+        const canvas = document.getElementById('page-particles-canvas');
+        if (canvas) canvas.style.display = 'none';
+    }
+    // Bootstrap worker orbs setting from localStorage
+    const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
+    if (workerOrbsSaved === 'false') {
+        window._workerOrbsEnabled = false;
+    }
+})();
+
+// ── Profile System ─────────────────────────────────────────────
+let currentProfile = null;
+
+function getProfileHomePage() {
+    if (!currentProfile) return 'dashboard';
+    if (currentProfile.home_page) return currentProfile.home_page;
+    return currentProfile.is_admin ? 'dashboard' : 'discover';
+}
+
+function isPageAllowed(pageId) {
+    if (!currentProfile) return true;
+    if (currentProfile.id === 1) return true;
+    if (pageId === 'help' || pageId === 'issues') return true;
+    if (pageId === 'artist-detail') {
+        // artist-detail requires library access
+        const ap = currentProfile.allowed_pages;
+        if (!ap) return true;
+        return ap.includes('library');
+    }
+    if (pageId === 'settings') return currentProfile.is_admin;
+    const ap = currentProfile.allowed_pages;
+    if (!ap) return true; // null = all pages
+    return ap.includes(pageId);
+}
+
+function canDownload() {
+    if (!currentProfile) return true;
+    if (currentProfile.id === 1) return true;
+    return currentProfile.can_download !== false && currentProfile.can_download !== 0;
+}
+
+function renderProfileAvatar(el, profile) {
+    // Renders avatar as image (if avatar_url set) or colored initial fallback
+    // Preserves existing classes, ensures 'profile-avatar' is present
+    if (!el.classList.contains('profile-avatar') && !el.classList.contains('profile-indicator-avatar') && !el.classList.contains('profile-pin-avatar')) {
+        el.className = 'profile-avatar';
+    }
+    el.style.background = profile.avatar_color || '#6366f1';
+    el.textContent = '';
+    if (profile.avatar_url) {
+        const img = document.createElement('img');
+        img.src = profile.avatar_url;
+        img.alt = profile.name;
+        img.className = 'profile-avatar-img';
+        img.onerror = () => {
+            img.remove();
+            el.textContent = profile.name.charAt(0).toUpperCase();
+        };
+        el.appendChild(img);
+    } else {
+        el.textContent = profile.name.charAt(0).toUpperCase();
+    }
+}
+
+async function initProfileSystem() {
+    try {
+        // Check if a session already has a profile selected
+        const currentRes = await fetch('/api/profiles/current');
+        const currentData = await currentRes.json();
+        if (currentData.success && currentData.profile) {
+            currentProfile = currentData.profile;
+            updateProfileIndicator();
+
+            // Check if launch PIN is required
+            if (currentData.launch_pin_required) {
+                showLaunchPinScreen();
+                return false; // Defer app init until PIN verified
+            }
+
+            return true; // Profile already selected, skip picker
+        }
+
+        // Fetch all profiles
+        const res = await fetch('/api/profiles');
+        const data = await res.json();
+        const profiles = data.profiles || [];
+
+        if (profiles.length === 0) {
+            // No profiles yet — auto-select admin profile 1
+            await selectProfile(1);
+            return true;
+        }
+
+        if (profiles.length === 1) {
+            // Only one profile — always auto-select (PIN only matters with multiple profiles)
+            await selectProfile(profiles[0].id);
+
+            // Re-check for launch PIN after auto-select
+            const recheck = await fetch('/api/profiles/current');
+            const recheckData = await recheck.json();
+            if (recheckData.launch_pin_required) {
+                showLaunchPinScreen();
+                return false;
+            }
+
+            return true;
+        }
+
+        // Multiple profiles or PIN required — show picker
+        showProfilePicker(profiles);
+        return false; // App init deferred until profile selected
+    } catch (e) {
+        console.error('Profile init error:', e);
+        return true; // Fall through to normal init
+    }
+}
+
+// ── Launch PIN Lock Screen ─────────────────────────────────────────────
+
+function showLaunchPinScreen() {
+    const overlay = document.getElementById('launch-pin-overlay');
+    if (!overlay) return;
+    overlay.style.display = 'flex';
+
+    const input = document.getElementById('launch-pin-input');
+    const submit = document.getElementById('launch-pin-submit');
+    const error = document.getElementById('launch-pin-error');
+
+    input.value = '';
+    error.style.display = 'none';
+    setTimeout(() => input.focus(), 100);
+
+    const doSubmit = async () => {
+        const pin = input.value.trim();
+        if (!pin) return;
+
+        submit.disabled = true;
+        submit.textContent = 'Verifying...';
+
+        try {
+            const res = await fetch('/api/profiles/verify-launch-pin', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ pin })
+            });
+            const data = await res.json();
+
+            if (data.success) {
+                // Server session flag set by verify endpoint — consumed on next /api/profiles/current call
+                overlay.style.display = 'none';
+                initApp(); // Now safe to load the full app
+            } else {
+                error.textContent = data.error || 'Invalid PIN';
+                error.style.display = 'block';
+                input.value = '';
+                input.focus();
+                // Shake animation
+                overlay.querySelector('.launch-pin-container').classList.add('shake');
+                setTimeout(() => overlay.querySelector('.launch-pin-container').classList.remove('shake'), 500);
+            }
+        } catch (e) {
+            error.textContent = 'Connection error';
+            error.style.display = 'block';
+        }
+
+        submit.disabled = false;
+        submit.textContent = 'Unlock';
+    };
+
+    // Remove old listeners to prevent stacking
+    const newSubmit = submit.cloneNode(true);
+    submit.parentNode.replaceChild(newSubmit, submit);
+    newSubmit.addEventListener('click', doSubmit);
+
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') doSubmit();
+    });
+}
+
+// ── Security Settings Helpers ──────────────────────────────────────────
+
+async function saveSecurityPin() {
+    const pin = document.getElementById('security-new-pin').value;
+    const confirm = document.getElementById('security-confirm-pin').value;
+    const msg = document.getElementById('security-pin-msg');
+
+    if (!pin || pin.length < 4) {
+        msg.textContent = 'PIN must be at least 4 characters';
+        msg.style.display = 'block';
+        msg.style.color = '#ff5252';
+        return;
+    }
+    if (pin !== confirm) {
+        msg.textContent = 'PINs do not match';
+        msg.style.display = 'block';
+        msg.style.color = '#ff5252';
+        return;
+    }
+
+    try {
+        const res = await fetch('/api/profiles/1/set-pin', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ pin })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            msg.textContent = 'PIN saved! You can now enable the lock screen.';
+            msg.style.color = '#4caf50';
+            msg.style.display = 'block';
+
+            // Update UI — hide setup, show change, enable toggle
+            document.getElementById('security-pin-setup').style.display = 'none';
+            document.getElementById('security-change-pin-section').style.display = 'block';
+            document.getElementById('security-require-pin').disabled = false;
+
+            // Clear inputs
+            document.getElementById('security-new-pin').value = '';
+            document.getElementById('security-confirm-pin').value = '';
+        } else {
+            msg.textContent = data.error || 'Failed to save PIN';
+            msg.style.color = '#ff5252';
+            msg.style.display = 'block';
+        }
+    } catch (e) {
+        msg.textContent = 'Connection error';
+        msg.style.color = '#ff5252';
+        msg.style.display = 'block';
+    }
+}
+
+function handleSecurityPinToggle(checkbox) {
+    // If trying to enable but no PIN, show the setup section
+    if (checkbox.checked) {
+        const setupSection = document.getElementById('security-pin-setup');
+        if (setupSection.style.display !== 'none' || checkbox.disabled) {
+            checkbox.checked = false;
+            setupSection.style.display = 'block';
+            document.getElementById('security-new-pin').focus();
+            return;
+        }
+    }
+    // Auto-save this setting
+    saveSettings(true);
+}
+
+function showChangeSecurityPin() {
+    document.getElementById('security-pin-setup').style.display = 'block';
+    document.getElementById('security-new-pin').focus();
+}
+
+// ── Forgot PIN Recovery ────────────────────────────────────────────────
+
+function showForgotPinView() {
+    document.getElementById('launch-pin-entry').style.display = 'none';
+    document.getElementById('launch-pin-recovery').style.display = 'block';
+    document.getElementById('launch-recovery-input').value = '';
+    document.getElementById('launch-recovery-error').style.display = 'none';
+    setTimeout(() => document.getElementById('launch-recovery-input').focus(), 100);
+}
+
+function showPinEntryView() {
+    document.getElementById('launch-pin-recovery').style.display = 'none';
+    document.getElementById('launch-pin-entry').style.display = 'block';
+    setTimeout(() => document.getElementById('launch-pin-input').focus(), 100);
+}
+
+async function submitRecoveryCredential() {
+    const input = document.getElementById('launch-recovery-input');
+    const error = document.getElementById('launch-recovery-error');
+    const btn = document.getElementById('launch-recovery-submit');
+    const credential = input.value.trim();
+
+    if (!credential) return;
+
+    btn.disabled = true;
+    btn.textContent = 'Verifying...';
+    error.style.display = 'none';
+
+    try {
+        const res = await fetch('/api/profiles/reset-pin-via-credential', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ credential })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+            sessionStorage.setItem('soulsync_pin_ok', '1');
+            document.getElementById('launch-pin-overlay').style.display = 'none';
+            initApp();
+            setTimeout(() => showToast('PIN cleared. You can set a new one in Settings → Advanced.', 'success'), 1000);
+        } else {
+            error.textContent = data.error || 'Credential not recognized';
+            error.style.display = 'block';
+            input.value = '';
+            input.focus();
+            document.getElementById('launch-pin-container').classList.add('shake');
+            setTimeout(() => document.getElementById('launch-pin-container').classList.remove('shake'), 500);
+        }
+    } catch (e) {
+        error.textContent = 'Connection error';
+        error.style.display = 'block';
+    }
+
+    btn.disabled = false;
+    btn.textContent = 'Verify & Reset PIN';
+}
+
+// ── Profile PIN Forgot Recovery ────────────────────────────────────────
+function showProfileForgotPin() {
+    const dialog = document.getElementById('profile-pin-dialog');
+    const content = dialog.querySelector('.profile-pin-content');
+
+    // Store the profile ID we're recovering for
+    const profileName = document.getElementById('profile-pin-name').textContent;
+
+    // Replace dialog content with recovery form
+    content.dataset.prevHtml = content.innerHTML;
+    content.innerHTML = `
+        <p style="color:#fff;font-size:14px;font-weight:600;margin-bottom:4px">Reset PIN for ${profileName}</p>
+        <p style="color:rgba(255,255,255,0.5);font-size:12px;margin-bottom:12px">Enter any configured API credential<br>(Spotify secret, Plex token, etc.)</p>
+        <input type="password" id="profile-recovery-input" class="profile-pin-input" maxlength="200" placeholder="Paste API credential" autocomplete="off">
+        <div class="profile-pin-buttons">
+            <button id="profile-recovery-cancel" class="profile-pin-cancel">Back</button>
+            <button id="profile-recovery-submit" class="profile-pin-submit">Verify & Reset</button>
+        </div>
+        <p id="profile-recovery-error" class="profile-pin-error" style="display:none"></p>
+    `;
+    setTimeout(() => document.getElementById('profile-recovery-input').focus(), 100);
+
+    document.getElementById('profile-recovery-cancel').onclick = () => {
+        content.innerHTML = content.dataset.prevHtml;
+    };
+
+    document.getElementById('profile-recovery-submit').onclick = async () => {
+        const input = document.getElementById('profile-recovery-input');
+        const error = document.getElementById('profile-recovery-error');
+        const credential = input.value.trim();
+        if (!credential) return;
+
+        const btn = document.getElementById('profile-recovery-submit');
+        btn.disabled = true;
+        btn.textContent = 'Verifying...';
+        error.style.display = 'none';
+
+        try {
+            const res = await fetch('/api/profiles/reset-pin-via-credential', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ credential, profile_id: dialog._profileId || 1 })
+            });
+            const data = await res.json();
+            if (data.success) {
+                dialog.style.display = 'none';
+                content.innerHTML = content.dataset.prevHtml;
+                showToast('PIN cleared. You can set a new one in Settings.', 'success');
+                // Re-try selecting the profile (now PIN-free)
+                if (dialog._profileId) selectProfile(dialog._profileId);
+            } else {
+                error.textContent = data.error || 'Credential not recognized';
+                error.style.display = 'block';
+                input.value = '';
+                input.focus();
+            }
+        } catch (e) {
+            error.textContent = 'Connection error';
+            error.style.display = 'block';
+        }
+        btn.disabled = false;
+        btn.textContent = 'Verify & Reset';
+    };
+
+    document.getElementById('profile-recovery-input').onkeydown = (e) => {
+        if (e.key === 'Enter') document.getElementById('profile-recovery-submit').click();
+    };
+}
+
+function showProfilePicker(profiles, canCancel = false) {
+    const overlay = document.getElementById('profile-picker-overlay');
+    const grid = document.getElementById('profile-picker-grid');
+    const actions = document.getElementById('profile-picker-actions');
+
+    grid.innerHTML = '';
+    profiles.forEach(p => {
+        const card = document.createElement('div');
+        card.className = 'profile-picker-card';
+        const avatarEl = document.createElement('div');
+        renderProfileAvatar(avatarEl, p);
+        card.appendChild(avatarEl);
+        const nameEl = document.createElement('span');
+        nameEl.className = 'profile-name';
+        nameEl.textContent = p.name;
+        card.appendChild(nameEl);
+        if (p.is_admin) {
+            const badge = document.createElement('span');
+            badge.className = 'profile-badge';
+            badge.textContent = 'Admin';
+            card.appendChild(badge);
+        }
+        card.onclick = () => handleProfileClick(p);
+        grid.appendChild(card);
+    });
+
+    // Show actions: admin sees "Manage Profiles", non-admin sees "My Profile" (when they have a profile selected)
+    const isAdmin = currentProfile ? currentProfile.is_admin : false;
+    const manageBtn = document.getElementById('manage-profiles-btn');
+    if (isAdmin) {
+        actions.style.display = '';
+        if (manageBtn) {
+            manageBtn.textContent = 'Manage Profiles';
+            // Reset onclick to admin handler (initProfileManagement sets this, but re-affirm here)
+            manageBtn.onclick = () => {
+                document.getElementById('profile-manage-panel').style.display = 'flex';
+                loadProfileManageList();
+            };
+        }
+    } else if (currentProfile && canCancel) {
+        // Non-admin with an active profile: show "My Profile" to edit own settings
+        actions.style.display = '';
+        if (manageBtn) {
+            manageBtn.textContent = 'My Profile';
+            manageBtn.onclick = () => showSelfEditForm();
+        }
+    } else {
+        actions.style.display = 'none';
+    }
+
+    // Show/remove cancel button when opened from sidebar indicator
+    let cancelBtn = overlay.querySelector('.profile-picker-cancel');
+    if (cancelBtn) cancelBtn.remove();
+    if (canCancel) {
+        cancelBtn = document.createElement('button');
+        cancelBtn.className = 'profile-picker-cancel';
+        cancelBtn.textContent = 'Cancel';
+        cancelBtn.onclick = () => hideProfilePicker();
+        actions.parentElement.appendChild(cancelBtn);
+    }
+
+    overlay.style.display = 'flex';
+    document.querySelector('.main-container').style.display = 'none';
+}
+
+async function handleProfileClick(profile) {
+    // Fetch profile count — PIN only matters with multiple profiles
+    let profileCount = 1;
+    try {
+        const r = await fetch('/api/profiles');
+        const d = await r.json();
+        profileCount = (d.profiles || []).length;
+    } catch (e) { }
+
+    if (profile.has_pin && profileCount > 1) {
+        showPinDialog(profile);
+    } else {
+        const wasSwitching = !!currentProfile;
+        await selectProfile(profile.id);
+        if (wasSwitching) {
+            window.location.reload();
+            return;
+        }
+        hideProfilePicker();
+        initApp();
+    }
+}
+
+function showPinDialog(profile) {
+    const dialog = document.getElementById('profile-pin-dialog');
+    const avatar = document.getElementById('profile-pin-avatar');
+    const nameEl = document.getElementById('profile-pin-name');
+    const input = document.getElementById('profile-pin-input');
+    const errorEl = document.getElementById('profile-pin-error');
+
+    renderProfileAvatar(avatar, profile);
+    nameEl.textContent = profile.name;
+    input.value = '';
+    errorEl.style.display = 'none';
+    dialog._profileId = profile.id;
+    dialog.style.display = 'flex';
+    setTimeout(() => input.focus(), 100);
+
+    const submit = document.getElementById('profile-pin-submit');
+    const cancel = document.getElementById('profile-pin-cancel');
+
+    const wasSwitching = !!currentProfile;
+    const handleSubmit = async () => {
+        const pin = input.value;
+        if (!pin) return;
+        try {
+            const res = await fetch('/api/profiles/select', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ profile_id: profile.id, pin })
+            });
+            const data = await res.json();
+            if (data.success) {
+                cleanup();
+                if (wasSwitching) {
+                    window.location.reload();
+                    return;
+                }
+                currentProfile = data.profile;
+                dialog.style.display = 'none';
+                hideProfilePicker();
+                updateProfileIndicator();
+                initApp();
+                return;
+            } else {
+                errorEl.textContent = data.error || 'Invalid PIN';
+                errorEl.style.display = '';
+                input.value = '';
+                input.focus();
+            }
+        } catch (e) {
+            errorEl.textContent = 'Connection error';
+            errorEl.style.display = '';
+        }
+        cleanup();
+    };
+
+    const handleCancel = () => {
+        dialog.style.display = 'none';
+        cleanup();
+    };
+
+    const handleKeydown = (e) => {
+        if (e.key === 'Enter') handleSubmit();
+        if (e.key === 'Escape') handleCancel();
+    };
+
+    const cleanup = () => {
+        submit.removeEventListener('click', handleSubmit);
+        cancel.removeEventListener('click', handleCancel);
+        input.removeEventListener('keydown', handleKeydown);
+    };
+
+    submit.addEventListener('click', handleSubmit);
+    cancel.addEventListener('click', handleCancel);
+    input.addEventListener('keydown', handleKeydown);
+}
+
+async function selectProfile(profileId) {
+    try {
+        const oldProfileId = currentProfile ? currentProfile.id : null;
+        const res = await fetch('/api/profiles/select', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ profile_id: profileId })
+        });
+        const data = await res.json();
+        if (data.success) {
+            currentProfile = data.profile;
+            updateProfileIndicator();
+            // Join profile-scoped WebSocket room for watchlist/wishlist count updates
+            if (socket && socket.connected) {
+                socket.emit('profile:join', { profile_id: profileId, old_profile_id: oldProfileId });
+            }
+            // Invalidate ListenBrainz cache on profile switch (each profile has their own playlists)
+            _invalidateListenBrainzCache();
+        }
+        return data.success;
+    } catch (e) {
+        console.error('Error selecting profile:', e);
+        return false;
+    }
+}
+
+function hideProfilePicker() {
+    document.getElementById('profile-picker-overlay').style.display = 'none';
+    document.querySelector('.main-container').style.display = 'flex';
+}
+
+function updateProfileIndicator() {
+    const indicator = document.getElementById('profile-indicator');
+    if (!currentProfile || !indicator) return;
+
+    const avatar = document.getElementById('profile-indicator-avatar');
+    const name = document.getElementById('profile-indicator-name');
+
+    renderProfileAvatar(avatar, currentProfile);
+    name.textContent = currentProfile.name;
+    indicator.style.display = 'flex';
+
+    indicator.onclick = async () => {
+        const res = await fetch('/api/profiles');
+        const data = await res.json();
+        if (data.profiles && data.profiles.length > 0) {
+            showProfilePicker(data.profiles, true);
+        }
+    };
+
+    // Filter sidebar pages based on profile permissions
+    document.querySelectorAll('.nav-button[data-page]').forEach(btn => {
+        const page = btn.getAttribute('data-page');
+        if (page === 'hydrabase') return; // Managed by dev mode toggle
+        if (page === 'settings') {
+            // Settings always gated by is_admin
+            btn.style.display = currentProfile.is_admin ? '' : 'none';
+        } else if (page === 'help' || page === 'issues') {
+            btn.style.display = ''; // Always visible
+        } else if (currentProfile.id === 1) {
+            btn.style.display = ''; // Root admin sees all
+        } else {
+            const ap = currentProfile.allowed_pages;
+            btn.style.display = (!ap || ap.includes(page)) ? '' : 'none';
+        }
+    });
+
+    // Toggle download capability
+    if (canDownload()) {
+        document.body.classList.remove('downloads-disabled');
+    } else {
+        document.body.classList.add('downloads-disabled');
+    }
+}
+
+// =====================
+// PERSONAL SETTINGS MODAL
+// =====================
+
+async function openPersonalSettings() {
+    const overlay = document.getElementById('personal-settings-overlay');
+    if (!overlay) return;
+    overlay.style.display = 'flex';
+
+    const body = document.getElementById('personal-settings-body');
+    body.innerHTML = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.4);">Loading...</div>';
+
+    try {
+        // Load all per-profile service data in parallel
+        const [lbRes, spotifyRes] = await Promise.all([
+            fetch('/api/profiles/me/listenbrainz'),
+            fetch('/api/profiles/me/spotify'),
+        ]);
+        const lbData = await lbRes.json();
+        const spotifyData = await spotifyRes.json();
+
+        body.innerHTML = '';
+        const isNonAdmin = currentProfile && !currentProfile.is_admin;
+
+        if (isNonAdmin) {
+            // Tabbed layout for non-admin with multiple sections
+            const tabs = [
+                { id: 'music', label: 'Music Services' },
+                { id: 'server', label: 'Server' },
+                { id: 'scrobble', label: 'Scrobbling' },
+            ];
+            const tabBar = document.createElement('div');
+            tabBar.className = 'ps-tabbar';
+            tabs.forEach((t, i) => {
+                const btn = document.createElement('button');
+                btn.className = 'ps-tab' + (i === 0 ? ' active' : '');
+                btn.textContent = t.label;
+                btn.onclick = () => {
+                    tabBar.querySelectorAll('.ps-tab').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    body.querySelectorAll('.ps-tab-content').forEach(c => c.classList.remove('active'));
+                    const target = document.getElementById(`ps-tab-${t.id}`);
+                    if (target) target.classList.add('active');
+                };
+                tabBar.appendChild(btn);
+            });
+            body.appendChild(tabBar);
+
+            // Music Services tab
+            const musicTab = document.createElement('div');
+            musicTab.id = 'ps-tab-music';
+            musicTab.className = 'ps-tab-content active';
+            renderPersonalSettingsSpotify(musicTab, spotifyData);
+            renderPersonalSettingsTidal(musicTab);
+            body.appendChild(musicTab);
+
+            // Server tab
+            const serverTab = document.createElement('div');
+            serverTab.id = 'ps-tab-server';
+            serverTab.className = 'ps-tab-content';
+            serverTab.innerHTML = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.3);">Loading libraries...</div>';
+            body.appendChild(serverTab);
+            // Load server libraries async (don't block modal)
+            fetch('/api/profiles/me/server-library').then(r => r.json()).then(libData => {
+                serverTab.innerHTML = '';
+                renderPersonalSettingsServerLibrary(serverTab, libData);
+            }).catch(() => {
+                serverTab.innerHTML = '';
+                renderPersonalSettingsServerLibrary(serverTab, {});
+            });
+
+            // Scrobbling tab
+            const scrobbleTab = document.createElement('div');
+            scrobbleTab.id = 'ps-tab-scrobble';
+            scrobbleTab.className = 'ps-tab-content';
+            body.appendChild(scrobbleTab);
+            // Render LB into the scrobble tab
+            const origBody = body;
+            renderPersonalSettingsLB(lbData, scrobbleTab);
+        } else {
+            // Admin: just ListenBrainz, no tabs
+            const content = document.createElement('div');
+            content.style.padding = '18px 22px 22px';
+            body.appendChild(content);
+            renderPersonalSettingsLB(lbData, content);
+        }
+    } catch (e) {
+        body.innerHTML = '<div style="color:#ef4444;padding:16px;">Failed to load settings</div>';
+    }
+}
+
+function closePersonalSettings() {
+    const overlay = document.getElementById('personal-settings-overlay');
+    if (overlay) overlay.style.display = 'none';
+}
+
+function renderPersonalSettingsSpotify(body, data) {
+    const hasCreds = data.has_credentials;
+    const clientId = data.client_id || '';
+
+    let contentHtml;
+    if (hasCreds) {
+        contentHtml = `
+            <div class="ps-connected-info">
+                <div class="ps-connected-icon">🟢</div>
+                <div class="ps-connected-details">
+                    <div class="ps-connected-username">Credentials configured</div>
+                    <div class="ps-connected-server">Client ID: ${escapeHtml(clientId.substring(0, 8))}...</div>
+                    <div class="ps-connected-source">Personal Spotify app</div>
+                </div>
+            </div>
+            <div class="ps-actions">
+                <button class="ps-btn ps-btn-primary" onclick="authenticatePersonalSpotify()">🔐 Authenticate</button>
+                <button class="ps-btn ps-btn-danger" onclick="disconnectPersonalSpotify()">Remove</button>
+            </div>
+        `;
+    } else {
+        contentHtml = `
+            <div class="ps-form-group">
+                <label>Client ID</label>
+                <input type="text" id="ps-spotify-client-id" placeholder="Your Spotify Client ID">
+            </div>
+            <div class="ps-form-group">
+                <label>Client Secret</label>
+                <input type="password" id="ps-spotify-client-secret" placeholder="Your Spotify Client Secret">
+            </div>
+            <div class="ps-form-group">
+                <label>Redirect URI <span style="font-weight:400;color:rgba(255,255,255,0.3)">(optional)</span></label>
+                <input type="text" id="ps-spotify-redirect-uri" placeholder="http://127.0.0.1:8888/callback">
+                <div class="ps-help-text">
+                    Create an app at <a href="https://developer.spotify.com/dashboard" target="_blank">developer.spotify.com</a> and add the redirect URI
+                </div>
+            </div>
+            <div id="ps-spotify-result"></div>
+            <div class="ps-actions">
+                <button class="ps-btn ps-btn-primary" onclick="savePersonalSpotify()">Save Credentials</button>
+            </div>
+        `;
+    }
+
+    const section = document.createElement('div');
+    section.id = 'ps-spotify-section';
+    section.innerHTML = `
+        <div class="ps-section">
+            <div class="ps-section-header">
+                <h4 class="ps-section-title">Spotify</h4>
+                <span class="ps-connection-badge ${hasCreds ? 'connected' : 'disconnected'}">
+                    <span class="ps-connection-dot"></span>
+                    ${hasCreds ? 'Configured' : 'Not configured'}
+                </span>
+            </div>
+            <div class="ps-help-text" style="margin-bottom:12px;">
+                Connect your own Spotify account to see your playlists instead of the admin's.
+            </div>
+            ${contentHtml}
+        </div>
+    `;
+
+    const existing = document.getElementById('ps-spotify-section');
+    if (existing) existing.replaceWith(section);
+    else body.appendChild(section);
+}
+
+async function savePersonalSpotify() {
+    const clientId = document.getElementById('ps-spotify-client-id')?.value?.trim();
+    const clientSecret = document.getElementById('ps-spotify-client-secret')?.value?.trim();
+    const redirectUri = document.getElementById('ps-spotify-redirect-uri')?.value?.trim();
+    const resultEl = document.getElementById('ps-spotify-result');
+
+    if (!clientId || !clientSecret) {
+        if (resultEl) resultEl.innerHTML = '<div style="color:#ef4444;font-size:12px;margin-top:8px;">Client ID and Secret are required</div>';
+        return;
+    }
+
+    try {
+        const res = await fetch('/api/profiles/me/spotify', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri })
+        });
+        const data = await res.json();
+        if (data.success) {
+            showToast('Spotify credentials saved', 'success');
+            openPersonalSettings(); // Reload to show connected state
+        } else {
+            if (resultEl) resultEl.innerHTML = `<div style="color:#ef4444;font-size:12px;margin-top:8px;">${data.error || 'Failed to save'}</div>`;
+        }
+    } catch (e) {
+        if (resultEl) resultEl.innerHTML = '<div style="color:#ef4444;font-size:12px;margin-top:8px;">Network error</div>';
+    }
+}
+
+async function authenticatePersonalSpotify() {
+    // Trigger OAuth flow with profile_id in state so callback knows which profile
+    window.open('/auth/spotify?profile_id=' + (currentProfile?.id || ''), '_blank');
+}
+
+function renderPersonalSettingsTidal(body) {
+    const section = document.createElement('div');
+    section.id = 'ps-tidal-section';
+    section.innerHTML = `
+        <div class="ps-section">
+            <div class="ps-section-header">
+                <h4 class="ps-section-title">Tidal</h4>
+            </div>
+            <div class="ps-help-text" style="margin-bottom:12px;">
+                Connect your own Tidal account to see your playlists. Uses the admin's Tidal app credentials.
+            </div>
+            <div class="ps-actions">
+                <button class="ps-btn ps-btn-primary" onclick="authenticatePersonalTidal()">🔐 Authenticate Tidal</button>
+            </div>
+        </div>
+    `;
+    const existing = document.getElementById('ps-tidal-section');
+    if (existing) existing.replaceWith(section);
+    else body.appendChild(section);
+}
+
+function authenticatePersonalTidal() {
+    window.open('/auth/tidal?profile_id=' + (currentProfile?.id || ''), '_blank');
+}
+
+async function renderPersonalSettingsServerLibrary(container, profileData) {
+    const section = document.createElement('div');
+    section.id = 'ps-server-library-section';
+
+    // Detect which server is active
+    let serverType = 'none';
+    let libraries = [];
+    let users = [];
+    const currentLib = profileData || {};
+
+    try {
+        // Try each server type to find the active one
+        const plexRes = await fetch('/api/plex/music-libraries');
+        if (plexRes.ok) {
+            const plexData = await plexRes.json();
+            if (plexData.libraries && plexData.libraries.length > 0) {
+                serverType = 'plex';
+                libraries = plexData.libraries;
+            }
+        }
+    } catch (e) { }
+
+    if (serverType === 'none') {
+        try {
+            const jellyRes = await fetch('/api/jellyfin/music-libraries');
+            if (jellyRes.ok) {
+                const jellyData = await jellyRes.json();
+                if (jellyData.libraries && jellyData.libraries.length > 0) {
+                    serverType = 'jellyfin';
+                    libraries = jellyData.libraries;
+                    users = jellyData.users || [];
+                }
+            }
+        } catch (e) { }
+    }
+
+    if (serverType === 'none') {
+        section.innerHTML = `
+            <div class="ps-section">
+                <div class="ps-section-header">
+                    <h4 class="ps-section-title">Media Server</h4>
+                </div>
+                <div class="ps-help-text">No media server connected. Ask your admin to configure Plex, Jellyfin, or Navidrome in Settings.</div>
+            </div>
+        `;
+    } else if (serverType === 'plex') {
+        const selectedLib = currentLib.plex_library_id || '';
+        const optionsHtml = libraries.map(lib => {
+            const name = lib.name || lib.title || lib;
+            const val = typeof lib === 'string' ? lib : (lib.name || lib.title);
+            return `<option value="${escapeHtml(val)}" ${val === selectedLib ? 'selected' : ''}>${escapeHtml(val)}</option>`;
+        }).join('');
+
+        section.innerHTML = `
+            <div class="ps-section">
+                <div class="ps-section-header">
+                    <h4 class="ps-section-title">Plex Library</h4>
+                    <span class="ps-connection-badge ${selectedLib ? 'connected' : 'disconnected'}">
+                        <span class="ps-connection-dot"></span>
+                        ${selectedLib ? 'Custom' : 'Default'}
+                    </span>
+                </div>
+                <div class="ps-help-text" style="margin-bottom:12px;">Choose which Plex music library your playlists sync to.</div>
+                <div class="ps-form-group">
+                    <label>Music Library</label>
+                    <select id="ps-plex-library-select">
+                        <option value="">Use admin default</option>
+                        ${optionsHtml}
+                    </select>
+                </div>
+                <div class="ps-actions">
+                    <button class="ps-btn ps-btn-primary" onclick="savePersonalServerLibrary()">Save</button>
+                </div>
+            </div>
+        `;
+    } else if (serverType === 'jellyfin') {
+        const selectedUser = currentLib.jellyfin_user_id || '';
+        const selectedLib = currentLib.jellyfin_library_id || '';
+
+        const userOpts = users.map(u => {
+            const uid = u.id || u.Id;
+            const uname = u.name || u.Name;
+            return `<option value="${escapeHtml(uid)}" ${uid === selectedUser ? 'selected' : ''}>${escapeHtml(uname)}</option>`;
+        }).join('');
+
+        const libOpts = libraries.map(lib => {
+            const lid = lib.key || lib.id || lib.Id;
+            const lname = lib.name || lib.Name || lib.title;
+            return `<option value="${escapeHtml(lid)}" ${lid === selectedLib ? 'selected' : ''}>${escapeHtml(lname)}</option>`;
+        }).join('');
+
+        section.innerHTML = `
+            <div class="ps-section">
+                <div class="ps-section-header">
+                    <h4 class="ps-section-title">Jellyfin</h4>
+                    <span class="ps-connection-badge ${selectedUser || selectedLib ? 'connected' : 'disconnected'}">
+                        <span class="ps-connection-dot"></span>
+                        ${selectedUser || selectedLib ? 'Custom' : 'Default'}
+                    </span>
+                </div>
+                <div class="ps-help-text" style="margin-bottom:12px;">Choose which Jellyfin user and library your playlists sync to.</div>
+                ${users.length ? `<div class="ps-form-group"><label>User</label><select id="ps-jellyfin-user-select"><option value="">Use admin default</option>${userOpts}</select></div>` : ''}
+                <div class="ps-form-group">
+                    <label>Music Library</label>
+                    <select id="ps-jellyfin-library-select">
+                        <option value="">Use admin default</option>
+                        ${libOpts}
+                    </select>
+                </div>
+                <div class="ps-actions">
+                    <button class="ps-btn ps-btn-primary" onclick="savePersonalServerLibrary()">Save</button>
+                </div>
+            </div>
+        `;
+    }
+
+    const existing = document.getElementById('ps-server-library-section');
+    if (existing) existing.replaceWith(section);
+    else container.appendChild(section);
+}
+
+async function savePersonalServerLibrary() {
+    try {
+        const plexSelect = document.getElementById('ps-plex-library-select');
+        const jellyUserSelect = document.getElementById('ps-jellyfin-user-select');
+        const jellyLibSelect = document.getElementById('ps-jellyfin-library-select');
+
+        if (plexSelect) {
+            await fetch('/api/profiles/me/server-library', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ server_type: 'plex', library_id: plexSelect.value || null })
+            });
+        }
+        if (jellyUserSelect || jellyLibSelect) {
+            await fetch('/api/profiles/me/server-library', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    server_type: 'jellyfin',
+                    user_id: jellyUserSelect?.value || null,
+                    library_id: jellyLibSelect?.value || null
+                })
+            });
+        }
+
+        showToast('Server library settings saved', 'success');
+    } catch (e) {
+        showToast('Error saving settings', 'error');
+    }
+}
+
+async function disconnectPersonalSpotify() {
+    try {
+        const res = await fetch('/api/profiles/me/spotify', { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            showToast('Spotify credentials removed — using shared config', 'info');
+            openPersonalSettings(); // Reload
+        }
+    } catch (e) {
+        showToast('Error removing credentials', 'error');
+    }
+}
+
+function renderPersonalSettingsLB(data, container) {
+    const body = container || document.getElementById('personal-settings-body');
+    const connected = data.connected;
+    const username = data.username || '';
+    const baseUrl = data.base_url || '';
+    const source = data.source || 'global';
+
+    const tokenFormHtml = `
+        <div class="ps-form-group">
+            <label>User Token</label>
+            <input type="password" id="ps-lb-token" placeholder="Paste your ListenBrainz token">
+        </div>
+        <div class="ps-form-group">
+            <label>Server URL <span style="font-weight:400;color:rgba(255,255,255,0.3)">(optional)</span></label>
+            <input type="text" id="ps-lb-base-url" placeholder="Leave empty for official (api.listenbrainz.org)">
+            <div class="ps-help-text">
+                Get your token from <a href="https://listenbrainz.org/profile/" target="_blank">listenbrainz.org/profile</a>
+            </div>
+        </div>
+        <div id="ps-lb-result"></div>
+        <div class="ps-actions">
+            <button class="ps-btn ps-btn-secondary" onclick="testPersonalListenBrainz()">Test</button>
+            <button class="ps-btn ps-btn-primary" onclick="connectPersonalListenBrainz()">Connect</button>
+        </div>
+    `;
+
+    let contentHtml;
+    if (connected && source === 'profile') {
+        // Personal token — show connected state with Disconnect
+        const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
+        contentHtml = `
+            <div class="ps-connected-info">
+                <div class="ps-connected-icon">&#129504;</div>
+                <div class="ps-connected-details">
+                    <div class="ps-connected-username">Connected as ${escapeHtml(username)}</div>
+                    <div class="ps-connected-server">${escapeHtml(serverDisplay)}</div>
+                    <div class="ps-connected-source">Personal token</div>
+                </div>
+            </div>
+            <div class="ps-actions">
+                <button class="ps-btn ps-btn-danger" onclick="disconnectPersonalListenBrainz()">Disconnect</button>
+            </div>
+        `;
+    } else if (connected && source === 'global') {
+        // Using admin's shared token — show status + option to set own token
+        const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
+        contentHtml = `
+            <div class="ps-connected-info">
+                <div class="ps-connected-icon">&#129504;</div>
+                <div class="ps-connected-details">
+                    <div class="ps-connected-username">Connected as ${escapeHtml(username)}</div>
+                    <div class="ps-connected-server">${escapeHtml(serverDisplay)}</div>
+                    <div class="ps-connected-source">Using shared token from Settings</div>
+                </div>
+            </div>
+            <div style="margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);">
+                <div style="font-size:11px;color:rgba(255,255,255,0.45);margin-bottom:10px;">Set your own token to use a different ListenBrainz account:</div>
+                ${tokenFormHtml}
+            </div>
+        `;
+    } else {
+        // Not connected at all
+        contentHtml = tokenFormHtml;
+    }
+
+    const section = document.createElement('div');
+    section.id = 'ps-listenbrainz-section';
+    section.innerHTML = `
+        <div class="ps-section">
+            <div class="ps-section-header">
+                <h4 class="ps-section-title">ListenBrainz</h4>
+                <span class="ps-connection-badge ${connected ? 'connected' : 'disconnected'}">
+                    <span class="ps-connection-dot"></span>
+                    ${connected ? 'Connected' : 'Not connected'}
+                </span>
+            </div>
+            ${contentHtml}
+        </div>
+    `;
+    // Replace existing or append
+    const existing = document.getElementById('ps-listenbrainz-section');
+    if (existing) existing.replaceWith(section);
+    else body.appendChild(section);
+}
+
+async function testPersonalListenBrainz() {
+    const token = document.getElementById('ps-lb-token')?.value?.trim();
+    const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
+    const resultEl = document.getElementById('ps-lb-result');
+    if (!token) {
+        if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result error">Please enter a token</div>';
+        return;
+    }
+    if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result" style="color:rgba(255,255,255,0.5);">Testing...</div>';
+    try {
+        const res = await fetch('/api/profiles/me/listenbrainz/test', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ token, base_url: baseUrl })
+        });
+        const data = await res.json();
+        if (data.success) {
+            resultEl.innerHTML = `<div class="ps-inline-result success">Valid token — ${escapeHtml(data.username)}</div>`;
+        } else {
+            resultEl.innerHTML = `<div class="ps-inline-result error">${escapeHtml(data.error || 'Invalid token')}</div>`;
+        }
+    } catch (e) {
+        resultEl.innerHTML = '<div class="ps-inline-result error">Connection failed</div>';
+    }
+}
+
+async function connectPersonalListenBrainz() {
+    const token = document.getElementById('ps-lb-token')?.value?.trim();
+    const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
+    const resultEl = document.getElementById('ps-lb-result');
+    if (!token) {
+        if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result error">Please enter a token</div>';
+        return;
+    }
+    // Disable buttons during connect
+    document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = true);
+    if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result" style="color:rgba(255,255,255,0.5);">Connecting...</div>';
+    try {
+        const res = await fetch('/api/profiles/me/listenbrainz', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ token, base_url: baseUrl })
+        });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Connected to ListenBrainz as ${data.username}`, 'success');
+            // Re-render as connected
+            renderPersonalSettingsLB({ connected: true, username: data.username, base_url: baseUrl, source: 'profile' });
+            // Refresh LB playlists on discover page
+            _invalidateListenBrainzCache();
+            if (typeof initializeListenBrainzTabs === 'function') {
+                initializeListenBrainzTabs();
+            }
+        } else {
+            resultEl.innerHTML = `<div class="ps-inline-result error">${escapeHtml(data.error || 'Connection failed')}</div>`;
+            document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
+        }
+    } catch (e) {
+        resultEl.innerHTML = '<div class="ps-inline-result error">Connection failed</div>';
+        document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
+    }
+}
+
+async function disconnectPersonalListenBrainz() {
+    try {
+        await fetch('/api/profiles/me/listenbrainz', { method: 'DELETE' });
+        showToast('ListenBrainz disconnected', 'info');
+        // Re-render as disconnected — re-fetch to check if global fallback exists
+        const res = await fetch('/api/profiles/me/listenbrainz');
+        const data = await res.json();
+        renderPersonalSettingsLB(data);
+        // Refresh LB playlists on discover page
+        _invalidateListenBrainzCache();
+        if (typeof initializeListenBrainzTabs === 'function') {
+            initializeListenBrainzTabs();
+        }
+    } catch (e) {
+        showToast('Failed to disconnect', 'error');
+    }
+}
+
+function _invalidateListenBrainzCache() {
+    if (typeof listenbrainzPlaylistsLoaded !== 'undefined') listenbrainzPlaylistsLoaded = false;
+    if (typeof listenbrainzPlaylistsCache !== 'undefined') {
+        try { Object.keys(listenbrainzPlaylistsCache).forEach(k => delete listenbrainzPlaylistsCache[k]); } catch (e) { }
+    }
+    if (typeof listenbrainzTracksCache !== 'undefined') {
+        try { Object.keys(listenbrainzTracksCache).forEach(k => delete listenbrainzTracksCache[k]); } catch (e) { }
+    }
+}
+
+function initProfileManagement() {
+    const manageBtn = document.getElementById('manage-profiles-btn');
+    const closeBtn = document.getElementById('profile-manage-close');
+    const createBtn = document.getElementById('create-profile-btn');
+    const adminPinBtn = document.getElementById('set-admin-pin-btn');
+
+    if (manageBtn) {
+        manageBtn.onclick = () => {
+            document.getElementById('profile-manage-panel').style.display = 'flex';
+            loadProfileManageList();
+        };
+    }
+
+    if (closeBtn) {
+        closeBtn.onclick = () => {
+            document.getElementById('profile-manage-panel').style.display = 'none';
+            // Refresh picker — keep cancel button if user already has a profile selected
+            const hasCancel = !!currentProfile;
+            fetch('/api/profiles').then(r => r.json()).then(d => {
+                showProfilePicker(d.profiles || [], hasCancel);
+            });
+        };
+    }
+
+    // Color picker
+    let selectedColor = '#6366f1';
+    document.querySelectorAll('.profile-color-swatch').forEach(swatch => {
+        swatch.onclick = () => {
+            document.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
+            swatch.classList.add('selected');
+            selectedColor = swatch.dataset.color;
+        };
+    });
+    // Select first by default
+    const firstSwatch = document.querySelector('.profile-color-swatch');
+    if (firstSwatch) firstSwatch.classList.add('selected');
+
+    if (createBtn) {
+        createBtn.onclick = async () => {
+            const name = document.getElementById('new-profile-name').value.trim();
+            const avatarUrl = document.getElementById('new-profile-avatar-url').value.trim();
+            const pin = document.getElementById('new-profile-pin').value;
+            if (!name) return;
+
+            // Collect profile settings
+            const homePage = document.getElementById('new-profile-home-page').value || null;
+            const pageCheckboxes = document.querySelectorAll('#new-profile-allowed-pages input[type="checkbox"]:not(:disabled)');
+            const allChecked = Array.from(pageCheckboxes).every(cb => cb.checked);
+            const allowedPages = allChecked ? null : Array.from(pageCheckboxes).filter(cb => cb.checked).map(cb => cb.value);
+            const canDl = document.getElementById('new-profile-can-download').checked;
+
+            const res = await fetch('/api/profiles', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name, avatar_color: selectedColor,
+                    avatar_url: avatarUrl || undefined,
+                    pin: pin || undefined,
+                    home_page: homePage,
+                    allowed_pages: allowedPages,
+                    can_download: canDl
+                })
+            });
+            const data = await res.json();
+            if (data.success) {
+                document.getElementById('new-profile-name').value = '';
+                document.getElementById('new-profile-avatar-url').value = '';
+                document.getElementById('new-profile-pin').value = '';
+                document.getElementById('new-profile-home-page').value = '';
+                pageCheckboxes.forEach(cb => cb.checked = true);
+                document.getElementById('new-profile-can-download').checked = true;
+                loadProfileManageList();
+                // Show admin PIN section if >1 profiles and admin has no PIN
+                checkAdminPinRequired();
+            } else {
+                alert(data.error || 'Failed to create profile');
+            }
+        };
+    }
+
+    if (adminPinBtn) {
+        adminPinBtn.onclick = async () => {
+            const pin = document.getElementById('admin-pin-input').value;
+            if (!pin || pin.length < 1) return;
+            // Find admin profile
+            const res = await fetch('/api/profiles');
+            const data = await res.json();
+            const admin = (data.profiles || []).find(p => p.is_admin);
+            if (!admin) return;
+
+            try {
+                const pinRes = await fetch(`/api/profiles/${admin.id}/set-pin`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ pin })
+                });
+                const pinData = await pinRes.json();
+                if (!pinData.success) {
+                    alert(pinData.error || 'Failed to set PIN');
+                    return;
+                }
+            } catch (e) {
+                alert('Connection error');
+                return;
+            }
+            document.getElementById('admin-pin-input').value = '';
+            document.getElementById('admin-pin-section').style.display = 'none';
+            loadProfileManageList();
+        };
+    }
+}
+
+async function loadProfileManageList() {
+    const list = document.getElementById('profile-manage-list');
+    const res = await fetch('/api/profiles');
+    const data = await res.json();
+    const profiles = data.profiles || [];
+
+    list.innerHTML = '';
+    profiles.forEach(p => {
+        const item = document.createElement('div');
+        item.className = 'profile-manage-item';
+
+        const av = document.createElement('div');
+        renderProfileAvatar(av, p);
+        item.appendChild(av);
+
+        const info = document.createElement('div');
+        info.className = 'profile-info';
+        const nameDiv = document.createElement('div');
+        nameDiv.className = 'name';
+        nameDiv.textContent = p.name + (p.has_pin ? ' 🔒' : '');
+        info.appendChild(nameDiv);
+        const roleTags = [];
+        if (p.is_admin) roleTags.push('Admin');
+        if (p.can_download === false) roleTags.push('No Downloads');
+        if (p.allowed_pages) roleTags.push(`${p.allowed_pages.length} pages`);
+        if (roleTags.length) {
+            const roleDiv = document.createElement('div');
+            roleDiv.className = 'role';
+            roleDiv.textContent = roleTags.join(' · ');
+            info.appendChild(roleDiv);
+        }
+        item.appendChild(info);
+
+        const actions = document.createElement('div');
+        actions.className = 'profile-manage-actions';
+
+        const editBtn = document.createElement('button');
+        editBtn.className = 'profile-edit-btn';
+        editBtn.dataset.id = p.id;
+        editBtn.dataset.name = p.name;
+        editBtn.dataset.color = p.avatar_color || '#6366f1';
+        editBtn.dataset.avatarUrl = p.avatar_url || '';
+        editBtn.dataset.homePage = p.home_page || '';
+        editBtn.dataset.allowedPages = p.allowed_pages ? JSON.stringify(p.allowed_pages) : '';
+        editBtn.dataset.canDownload = p.can_download !== false ? '1' : '0';
+        editBtn.dataset.isAdmin = p.is_admin ? '1' : '0';
+        editBtn.title = 'Edit profile';
+        editBtn.textContent = '✏️';
+        actions.appendChild(editBtn);
+
+        if (!p.is_admin) {
+            const delBtn = document.createElement('button');
+            delBtn.className = 'profile-delete-btn';
+            delBtn.dataset.id = p.id;
+            delBtn.title = 'Delete profile';
+            delBtn.textContent = '🗑️';
+            actions.appendChild(delBtn);
+        }
+
+        item.appendChild(actions);
+        list.appendChild(item);
+    });
+
+    // Bind edit buttons
+    list.querySelectorAll('.profile-edit-btn').forEach(btn => {
+        btn.onclick = () => {
+            showProfileEditForm(btn.dataset.id, btn.dataset.name, btn.dataset.color, btn.dataset.avatarUrl, {
+                home_page: btn.dataset.homePage || '',
+                allowed_pages: btn.dataset.allowedPages ? JSON.parse(btn.dataset.allowedPages) : null,
+                can_download: btn.dataset.canDownload !== '0',
+                is_admin: btn.dataset.isAdmin === '1'
+            });
+        };
+    });
+
+    // Bind delete buttons
+    list.querySelectorAll('.profile-delete-btn').forEach(btn => {
+        btn.onclick = async () => {
+            if (!await showConfirmDialog({ title: 'Delete Profile', message: 'Delete this profile and all its data?', confirmText: 'Delete', destructive: true })) return;
+            try {
+                const res = await fetch(`/api/profiles/${btn.dataset.id}`, { method: 'DELETE' });
+                const data = await res.json();
+                if (!data.success) {
+                    alert(data.error || 'Failed to delete profile');
+                }
+            } catch (e) {
+                alert('Connection error');
+            }
+            loadProfileManageList();
+        };
+    });
+
+    checkAdminPinRequired();
+}
+
+function showProfileEditForm(profileId, currentName, currentColor, currentAvatarUrl, profileSettings = {}) {
+    const list = document.getElementById('profile-manage-list');
+    // Remove any existing edit form
+    const existing = document.getElementById('profile-edit-form');
+    if (existing) existing.remove();
+
+    const isAdmin = currentProfile && currentProfile.is_admin;
+    const isEditingAdmin = profileSettings.is_admin;
+    const editColors = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
+    const pageLabels = {
+        dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
+        artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
+        'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
+    };
+
+    const form = document.createElement('div');
+    form.id = 'profile-edit-form';
+    form.className = 'profile-edit-form';
+
+    const nameInput = document.createElement('input');
+    nameInput.type = 'text';
+    nameInput.className = 'profile-input';
+    nameInput.value = currentName;
+    nameInput.maxLength = 20;
+    nameInput.placeholder = 'Profile name';
+    form.appendChild(nameInput);
+
+    const urlInput = document.createElement('input');
+    urlInput.type = 'url';
+    urlInput.className = 'profile-input';
+    urlInput.value = currentAvatarUrl || '';
+    urlInput.placeholder = 'Avatar image URL (optional)';
+    form.appendChild(urlInput);
+
+    const colorRow = document.createElement('div');
+    colorRow.className = 'profile-color-picker';
+    let editColor = currentColor;
+    editColors.forEach(c => {
+        const swatch = document.createElement('span');
+        swatch.className = 'profile-color-swatch' + (c === currentColor ? ' selected' : '');
+        swatch.style.background = c;
+        swatch.dataset.color = c;
+        swatch.onclick = () => {
+            colorRow.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
+            swatch.classList.add('selected');
+            editColor = c;
+        };
+        colorRow.appendChild(swatch);
+    });
+    form.appendChild(colorRow);
+
+    // Home page selector — visible to everyone (self-edit or admin editing others)
+    const homeLabel = document.createElement('label');
+    homeLabel.className = 'profile-settings-label';
+    homeLabel.textContent = 'Home Page';
+    form.appendChild(homeLabel);
+
+    const homeSelect = document.createElement('select');
+    homeSelect.className = 'profile-input';
+    const defaultOpt = document.createElement('option');
+    defaultOpt.value = '';
+    defaultOpt.textContent = isEditingAdmin ? 'Default (Dashboard)' : 'Default (Discover)';
+    homeSelect.appendChild(defaultOpt);
+    // Filter home page options to only allowed pages
+    const allowedSet = profileSettings.allowed_pages;
+    Object.entries(pageLabels).forEach(([id, label]) => {
+        if (allowedSet && !allowedSet.includes(id)) return; // Skip non-permitted
+        const opt = document.createElement('option');
+        opt.value = id;
+        opt.textContent = label;
+        if (id === profileSettings.home_page) opt.selected = true;
+        homeSelect.appendChild(opt);
+    });
+    form.appendChild(homeSelect);
+
+    // Admin-only settings: allowed pages & can_download
+    let pageCheckboxes = [];
+    let canDlCheckbox = null;
+    if (isAdmin && !isEditingAdmin) {
+        const apLabel = document.createElement('label');
+        apLabel.className = 'profile-settings-label';
+        apLabel.textContent = 'Page Access';
+        form.appendChild(apLabel);
+
+        const apContainer = document.createElement('div');
+        apContainer.className = 'profile-page-checkboxes';
+        Object.entries(pageLabels).forEach(([id, label]) => {
+            const lbl = document.createElement('label');
+            const cb = document.createElement('input');
+            cb.type = 'checkbox';
+            cb.value = id;
+            cb.checked = !allowedSet || allowedSet.includes(id);
+            lbl.appendChild(cb);
+            lbl.appendChild(document.createTextNode(' ' + label));
+            apContainer.appendChild(lbl);
+            pageCheckboxes.push(cb);
+        });
+        // Always-on help
+        const helpLbl = document.createElement('label');
+        const helpCb = document.createElement('input');
+        helpCb.type = 'checkbox';
+        helpCb.checked = true;
+        helpCb.disabled = true;
+        helpLbl.appendChild(helpCb);
+        helpLbl.appendChild(document.createTextNode(' Help & Docs'));
+        apContainer.appendChild(helpLbl);
+        form.appendChild(apContainer);
+
+        const dlLabel = document.createElement('label');
+        dlLabel.className = 'profile-checkbox-label';
+        canDlCheckbox = document.createElement('input');
+        canDlCheckbox.type = 'checkbox';
+        canDlCheckbox.checked = profileSettings.can_download !== false;
+        dlLabel.appendChild(canDlCheckbox);
+        dlLabel.appendChild(document.createTextNode(' Can download music'));
+        form.appendChild(dlLabel);
+    }
+
+    const btnRow = document.createElement('div');
+    btnRow.className = 'profile-edit-buttons';
+
+    const saveBtn = document.createElement('button');
+    saveBtn.className = 'profile-create-btn';
+    saveBtn.textContent = 'Save';
+    saveBtn.onclick = async () => {
+        const newName = nameInput.value.trim();
+        if (!newName) { alert('Name cannot be empty'); return; }
+        const newAvatarUrl = urlInput.value.trim() || null;
+        const payload = { name: newName, avatar_color: editColor, avatar_url: newAvatarUrl };
+
+        // Home page
+        payload.home_page = homeSelect.value || null;
+
+        // Admin-only fields
+        if (isAdmin && !isEditingAdmin && pageCheckboxes.length) {
+            const allChecked = pageCheckboxes.every(cb => cb.checked);
+            payload.allowed_pages = allChecked ? null : pageCheckboxes.filter(cb => cb.checked).map(cb => cb.value);
+            payload.can_download = canDlCheckbox ? canDlCheckbox.checked : true;
+        }
+
+        try {
+            const res = await fetch(`/api/profiles/${profileId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            if (data.success) {
+                // Update sidebar indicator if editing current profile
+                if (currentProfile && currentProfile.id == profileId) {
+                    currentProfile.name = newName;
+                    currentProfile.avatar_color = editColor;
+                    currentProfile.avatar_url = newAvatarUrl;
+                    if (payload.home_page !== undefined) currentProfile.home_page = payload.home_page;
+                    if (payload.allowed_pages !== undefined) currentProfile.allowed_pages = payload.allowed_pages;
+                    if (payload.can_download !== undefined) currentProfile.can_download = payload.can_download;
+                    updateProfileIndicator();
+                }
+                loadProfileManageList();
+            } else {
+                alert(data.error || 'Failed to update profile');
+            }
+        } catch (e) {
+            alert('Connection error');
+        }
+    };
+    btnRow.appendChild(saveBtn);
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'profile-picker-cancel';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.onclick = () => form.remove();
+    btnRow.appendChild(cancelBtn);
+
+    form.appendChild(btnRow);
+    list.appendChild(form);
+    nameInput.focus();
+    nameInput.select();
+}
+
+function showSelfEditForm() {
+    if (!currentProfile) return;
+    const overlay = document.getElementById('profile-picker-overlay');
+    const container = overlay.querySelector('.profile-picker-container');
+
+    // Hide the picker grid and show self-edit form
+    const grid = document.getElementById('profile-picker-grid');
+    const actions = document.getElementById('profile-picker-actions');
+    grid.style.display = 'none';
+    actions.style.display = 'none';
+
+    // Remove any existing self-edit form
+    const existing = document.getElementById('self-edit-form');
+    if (existing) existing.remove();
+
+    const pageLabels = {
+        dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
+        artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
+        'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
+    };
+
+    const form = document.createElement('div');
+    form.id = 'self-edit-form';
+    form.className = 'profile-edit-form';
+    form.style.marginTop = '16px';
+
+    const title = document.createElement('h3');
+    title.textContent = 'My Profile';
+    title.style.cssText = 'color: #fff; margin: 0 0 12px; font-size: 18px;';
+    form.appendChild(title);
+
+    // Name
+    const nameInput = document.createElement('input');
+    nameInput.type = 'text';
+    nameInput.className = 'profile-input';
+    nameInput.value = currentProfile.name;
+    nameInput.maxLength = 20;
+    nameInput.placeholder = 'Profile name';
+    form.appendChild(nameInput);
+
+    // Home page
+    const homeLabel = document.createElement('label');
+    homeLabel.className = 'profile-settings-label';
+    homeLabel.textContent = 'Home Page';
+    form.appendChild(homeLabel);
+
+    const homeSelect = document.createElement('select');
+    homeSelect.className = 'profile-input';
+    const defaultOpt = document.createElement('option');
+    defaultOpt.value = '';
+    defaultOpt.textContent = 'Default (Discover)';
+    homeSelect.appendChild(defaultOpt);
+    const ap = currentProfile.allowed_pages;
+    Object.entries(pageLabels).forEach(([id, label]) => {
+        if (ap && !ap.includes(id)) return;
+        const opt = document.createElement('option');
+        opt.value = id;
+        opt.textContent = label;
+        if (id === currentProfile.home_page) opt.selected = true;
+        homeSelect.appendChild(opt);
+    });
+    form.appendChild(homeSelect);
+
+    // Buttons
+    const btnRow = document.createElement('div');
+    btnRow.className = 'profile-edit-buttons';
+    btnRow.style.marginTop = '12px';
+
+    const saveBtn = document.createElement('button');
+    saveBtn.className = 'profile-create-btn';
+    saveBtn.textContent = 'Save';
+    saveBtn.onclick = async () => {
+        const newName = nameInput.value.trim();
+        if (!newName) { alert('Name cannot be empty'); return; }
+        try {
+            const res = await fetch(`/api/profiles/${currentProfile.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: newName, home_page: homeSelect.value || null })
+            });
+            const data = await res.json();
+            if (data.success) {
+                currentProfile.name = newName;
+                currentProfile.home_page = homeSelect.value || null;
+                updateProfileIndicator();
+                closeSelfEdit();
+                hideProfilePicker();
+            } else {
+                alert(data.error || 'Failed to update');
+            }
+        } catch (e) {
+            alert('Connection error');
+        }
+    };
+    btnRow.appendChild(saveBtn);
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'profile-picker-cancel';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.onclick = () => closeSelfEdit();
+    btnRow.appendChild(cancelBtn);
+
+    form.appendChild(btnRow);
+    container.appendChild(form);
+
+    function closeSelfEdit() {
+        form.remove();
+        grid.style.display = '';
+        actions.style.display = '';
+    }
+}
+
+async function checkAdminPinRequired() {
+    const res = await fetch('/api/profiles');
+    const data = await res.json();
+    const profiles = data.profiles || [];
+    const admin = profiles.find(p => p.is_admin);
+    const section = document.getElementById('admin-pin-section');
+
+    if (profiles.length > 1 && admin && !admin.has_pin && section) {
+        section.style.display = '';
+    } else if (section) {
+        section.style.display = 'none';
+    }
+}
+
+document.addEventListener('DOMContentLoaded', async function () {
+    console.log('SoulSync WebUI initializing...');
+
+    // Check if first-run setup wizard should be shown
+    const params = new URLSearchParams(window.location.search);
+    const forceSetup = params.get('setup') === '1';
+    let showWizard = forceSetup;
+
+    if (!forceSetup) {
+        try {
+            const setupResp = await fetch('/api/setup/status');
+            const setupData = await setupResp.json();
+            if (!setupData.setup_complete) {
+                showWizard = true;
+                localStorage.removeItem('soulsync_setup_complete');
+            }
+        } catch (e) {
+            console.warn('Setup status check failed, continuing normal init:', e);
+        }
+    }
+
+    if (showWizard && typeof openSetupWizard === 'function') {
+        window._onSetupWizardComplete = function () {
+            _continueAppInit();
+        };
+        openSetupWizard();
+        return; // Defer init until wizard closes
+    }
+
+    _continueAppInit();
+});
+
+async function _continueAppInit() {
+    // Initialize profile management UI handlers
+    initProfileManagement();
+
+    // Check profiles first — may show picker instead of app
+    const profileReady = await initProfileSystem();
+    if (!profileReady) {
+        console.log('Waiting for profile selection...');
+        return; // App init deferred until profile is selected via picker
+    }
+
+    initApp();
+}
+
+function initApp() {
+    // Initialize components
+    initializeNavigation();
+    initializeMobileNavigation();
+    initializeMediaPlayer();
+    initExpandedPlayer();
+    initializeSyncPage();
+    initializeWatchlist();
+    initializeDownloadManagerToggle();
+
+
+    // Initialize WebSocket connection (falls back to HTTP polling if unavailable)
+    initializeWebSocket();
+
+    // Start global service status polling for sidebar (works on all pages)
+    // Initial fetch for immediate data, then setInterval as fallback when WebSocket is disconnected
+    fetchAndUpdateServiceStatus();
+    setInterval(fetchAndUpdateServiceStatus, 5000); // Every 5 seconds (no-op when WebSocket active)
+
+    // Check for updates on load and every hour
+    checkForUpdates();
+    setInterval(checkForUpdates, 3600000);
+
+    // Refresh key data immediately when user returns to this tab
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+            fetchAndUpdateServiceStatus();
+            // Refresh dashboard-specific data if on dashboard
+            const dashboardPage = document.getElementById('dashboard-page');
+            if (dashboardPage && dashboardPage.classList.contains('active')) {
+                fetchAndUpdateSystemStats();
+                fetchAndUpdateActivityFeed();
+            }
+        }
+    });
+
+    // Start always-on download polling (batched, minimal overhead)
+    startGlobalDownloadPolling();
+
+    // Load issues badge count
+    loadIssuesBadge();
+
+    // Load initial data
+    loadInitialData();
+
+    // Handle window resize to re-check track title scrolling
+    window.addEventListener('resize', function () {
+        if (currentTrack) {
+            const trackTitleElement = document.getElementById('track-title');
+            const trackTitle = currentTrack.title || 'Unknown Track';
+            setTimeout(() => {
+                checkAndEnableScrolling(trackTitleElement, trackTitle);
+            }, 100); // Small delay to allow layout to settle
+        }
+    });
+
+    console.log('SoulSync WebUI initialized successfully!');
+}
+
+// ===============================
+// NAVIGATION SYSTEM
+// ===============================
+
+function initializeNavigation() {
+    const navButtons = document.querySelectorAll('.nav-button');
+
+    navButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const page = button.getAttribute('data-page');
+            navigateToPage(page);
+        });
+    });
+
+    window.addEventListener('popstate', (event) => {
+        const page = (event.state && event.state.page) || _getPageFromPath();
+        if (page && page !== currentPage) {
+            navigateToPage(page, { skipPushState: true });
+        }
+    });
+}
+
+const _DEEPLINK_VALID_PAGES = new Set([
+    'dashboard', 'sync', 'downloads', 'discover', 'artists', 'automations',
+    'library', 'import', 'settings', 'help', 'issues', 'stats', 'watchlist',
+    'wishlist', 'active-downloads', 'artist-detail', 'playlist-explorer',
+    'hydrabase', 'tools'
+]);
+
+function _getPageFromPath() {
+    const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
+    if (!path) return 'dashboard';
+    const basePage = path.split('/')[0];
+    if (!_DEEPLINK_VALID_PAGES.has(basePage)) return 'dashboard';
+    // Context-dependent pages fall back to a sensible parent
+    if (basePage === 'artist-detail') return 'artists';
+    if (basePage === 'playlist-explorer') return 'library';
+    return basePage;
+}
+
+// ===============================
+// MOBILE NAVIGATION
+// ===============================
+
+function initializeMobileNavigation() {
+    const hamburgerBtn = document.getElementById('hamburger-btn');
+    const sidebar = document.querySelector('.sidebar');
+    const overlay = document.getElementById('mobile-overlay');
+
+    if (!hamburgerBtn || !sidebar || !overlay) return;
+
+    function openMobileNav() {
+        sidebar.classList.add('mobile-open');
+        hamburgerBtn.classList.add('active');
+        overlay.classList.add('active');
+        document.body.classList.add('mobile-nav-open');
+    }
+
+    function closeMobileNav() {
+        sidebar.classList.remove('mobile-open');
+        hamburgerBtn.classList.remove('active');
+        overlay.classList.remove('active');
+        document.body.classList.remove('mobile-nav-open');
+    }
+
+    hamburgerBtn.addEventListener('click', () => {
+        if (sidebar.classList.contains('mobile-open')) {
+            closeMobileNav();
+        } else {
+            openMobileNav();
+        }
+    });
+
+    overlay.addEventListener('click', closeMobileNav);
+
+    // Close sidebar on nav button click (mobile only)
+    document.querySelectorAll('.nav-button').forEach(btn => {
+        btn.addEventListener('click', () => {
+            if (window.innerWidth <= 768) {
+                closeMobileNav();
+            }
+        });
+    });
+}
+
+function initializeWatchlist() {
+    // Watchlist button navigates to watchlist page
+    const watchlistButton = document.getElementById('watchlist-button');
+    if (watchlistButton) {
+        watchlistButton.addEventListener('click', () => navigateToPage('watchlist'));
+    }
+
+    // Wishlist button: quick check for active download, otherwise navigate to page
+    const wishlistButton = document.getElementById('wishlist-button');
+    if (wishlistButton) {
+        wishlistButton.addEventListener('click', async () => {
+            // Fast path: check if we already know about an active wishlist process
+            const clientProcess = activeDownloadProcesses['wishlist'];
+            if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+                clientProcess.modalElement.style.display = 'flex';
+                WishlistModalState.setVisible();
+                return;
+            }
+            // Slow path: ask the server (with timeout to prevent button feeling dead)
+            try {
+                const controller = new AbortController();
+                const timeout = setTimeout(() => controller.abort(), 2000);
+                const resp = await fetch('/api/active-processes', { signal: controller.signal });
+                clearTimeout(timeout);
+                if (resp.ok) {
+                    const data = await resp.json();
+                    const serverProcess = (data.active_processes || []).find(p => p.playlist_id === 'wishlist');
+                    if (serverProcess) {
+                        try {
+                            WishlistModalState.clearUserClosed();
+                            await rehydrateModal(serverProcess, true);
+                        } catch (e) {
+                            console.debug('Rehydration failed, navigating to page:', e);
+                            navigateToPage('wishlist');
+                        }
+                        return;
+                    }
+                }
+            } catch (e) {
+                // Timeout or network error — just navigate
+            }
+            navigateToPage('wishlist');
+        });
+    }
+
+    // Update watchlist count initially
+    updateWatchlistButtonCount();
+
+    // Update count every 10 seconds
+    setInterval(updateWatchlistButtonCount, 10000);
+
+    console.log('Watchlist system initialized');
+}
+
+function initializeDownloadManagerToggle() {
+    const toggleButton = document.getElementById('toggle-download-manager-btn');
+    const downloadsContent = document.querySelector('.downloads-content');
+
+    if (!toggleButton || !downloadsContent) {
+        console.log('Download manager toggle not found on this page');
+        return;
+    }
+
+    // Load saved state from localStorage (hidden by default for more search space)
+    const isHidden = localStorage.getItem('downloadManagerHidden') !== 'false';
+    if (isHidden) {
+        downloadsContent.classList.add('manager-hidden');
+    }
+
+    // Add click handler
+    toggleButton.addEventListener('click', () => {
+        const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
+
+        if (isCurrentlyHidden) {
+            downloadsContent.classList.remove('manager-hidden');
+            localStorage.setItem('downloadManagerHidden', 'false');
+        } else {
+            downloadsContent.classList.add('manager-hidden');
+            localStorage.setItem('downloadManagerHidden', 'true');
+        }
+    });
+
+    console.log('Download manager toggle initialized');
+}
+
+function navigateToPage(pageId, options = {}) {
+    if (pageId === currentPage) return;
+
+    // Permission guard — redirect to home page if not allowed
+    if (!isPageAllowed(pageId)) {
+        const home = getProfileHomePage();
+        if (home !== currentPage && isPageAllowed(home)) {
+            navigateToPage(home);
+        }
+        return;
+    }
+
+    // Update navigation buttons (only if there's a nav button for this page)
+    document.querySelectorAll('.nav-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+
+    // Handle artist-detail page specially - it should highlight the 'library' nav button
+    const navPageId = pageId === 'artist-detail' ? 'library' : pageId;
+    const navButton = document.querySelector(`[data-page="${navPageId}"]`);
+    if (navButton) {
+        navButton.classList.add('active');
+    }
+
+    // Update pages
+    document.querySelectorAll('.page').forEach(page => {
+        page.classList.remove('active');
+    });
+    document.getElementById(`${pageId}-page`).classList.add('active');
+
+    currentPage = pageId;
+
+    if (!options.skipPushState) {
+        const urlPath = pageId === 'dashboard' ? '/' : '/' + pageId;
+        if (window.location.pathname !== urlPath) {
+            history.pushState({ page: pageId }, '', urlPath);
+        }
+    }
+
+    // Show/hide global search bar (hide on downloads page where enhanced search exists)
+    if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
+
+    // Show/hide discover download sidebar based on page
+    const downloadSidebar = document.getElementById('discover-download-sidebar');
+    if (downloadSidebar) {
+        if (pageId === 'discover') {
+            // Show sidebar on discover page if there are active downloads
+            const activeDownloads = Object.keys(discoverDownloads || {}).length;
+            console.log(`📊 [NAVIGATE] Discover page - ${activeDownloads} active downloads`);
+            if (activeDownloads > 0) {
+                // Update the sidebar UI to render the bubbles
+                console.log(`🔄 [NAVIGATE] Updating discover download bar UI`);
+                updateDiscoverDownloadBar();
+            }
+        } else {
+            // Always hide sidebar on other pages
+            downloadSidebar.classList.add('hidden');
+        }
+    }
+
+    // Load page-specific data
+    loadPageData(pageId);
+
+    // Update page background particles
+    if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
+
+    // Update worker orbs
+    if (window.workerOrbs) window.workerOrbs.setPage(pageId);
+}
+
+// REPLACE your old loadPageData function with this one:
+// REPLACE your old loadPageData function with this corrected one
+
+async function loadPageData(pageId) {
+    try {
+        // Stop any active polling when navigating away
+        stopDbStatsPolling();
+        stopDbUpdatePolling();
+        stopWishlistCountPolling();
+        stopLogPolling();
+        // Stop watchlist/wishlist page timers when navigating away
+        if (watchlistCountdownInterval) { clearInterval(watchlistCountdownInterval); watchlistCountdownInterval = null; }
+        if (wishlistCountdownInterval) { clearInterval(wishlistCountdownInterval); wishlistCountdownInterval = null; }
+        if (typeof _stopNebulaLivePolling === 'function') _stopNebulaLivePolling();
+        if (pageId !== 'sync') {
+            cleanupBeatportContent();
+        }
+        switch (pageId) {
+            case 'dashboard':
+                await loadDashboardData();
+                loadDashboardSyncHistory();
+                break;
+            case 'sync':
+                initializeSyncPage();
+                await loadSyncData();
+                break;
+            case 'downloads':
+                initializeSearch();
+                initializeSearchModeToggle();
+                initializeFilters();
+                await loadDownloadsData();
+                break;
+            case 'artists':
+                // Only fully initialize if not already initialized
+                if (!artistsPageState.isInitialized) {
+                    initializeArtistsPage();
+                } else {
+                    // Just restore state if already initialized
+                    restoreArtistsPageState();
+                }
+                break;
+            case 'active-downloads':
+                loadActiveDownloadsPage();
+                break;
+            case 'library':
+                // Check if we should return to artist detail view instead of list
+                if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
+                    navigateToPage('artist-detail');
+                    if (!artistDetailPageState.isInitialized) {
+                        initializeArtistDetailPage();
+                        loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
+                    }
+                    // Already initialized — DOM content persists, no reload needed
+                } else {
+                    if (!libraryPageState.isInitialized) {
+                        initializeLibraryPage();
+                    }
+                    // Already initialized — DOM content persists, no reload needed
+                }
+                break;
+            case 'artist-detail':
+                // Artist detail page is handled separately by navigateToArtistDetail()
+                break;
+            case 'discover':
+                if (!discoverPageInitialized) {
+                    await loadDiscoverPage();
+                    discoverPageInitialized = true;
+                }
+                // Already initialized — DOM content persists, no reload needed
+                break;
+            case 'playlist-explorer':
+                initExplorer();
+                break;
+            case 'settings':
+                initializeSettings();
+                switchSettingsTab('connections');
+                await loadSettingsData();
+                await loadQualityProfile();
+                loadApiKeys();
+                loadBlacklistCount();
+                break;
+            case 'stats':
+                initializeStatsPage();
+                break;
+            case 'import':
+                initializeImportPage();
+                break;
+            case 'hydrabase':
+                // Check connection status and pre-fill saved credentials
+                try {
+                    const hsResp = await fetch('/api/hydrabase/status');
+                    const hsData = await hsResp.json();
+                    _hydrabaseConnected = hsData.connected;
+                    document.getElementById('hydra-connection-status').textContent = hsData.connected ? 'Connected' : 'Disconnected';
+                    document.getElementById('hydra-connection-status').style.color = hsData.connected ? 'rgb(var(--accent-light-rgb))' : '#888';
+                    document.getElementById('hydra-connect-btn').textContent = hsData.connected ? 'Disconnect' : 'Connect';
+                    // Pre-fill saved credentials
+                    if (hsData.saved_url) {
+                        document.getElementById('hydra-ws-url').value = hsData.saved_url;
+                    }
+                    if (hsData.saved_api_key) {
+                        document.getElementById('hydra-api-key').value = hsData.saved_api_key;
+                    }
+                    // Update peer count
+                    if (hsData.peer_count !== null && hsData.peer_count !== undefined) {
+                        document.getElementById('hydra-peer-count').textContent = `Peers: ${hsData.peer_count}`;
+                    }
+                } catch (e) { }
+                // Load comparisons
+                loadHydrabaseComparisons();
+                break;
+            case 'tools':
+                await initializeToolsPage();
+                break;
+            case 'watchlist':
+                await initializeWatchlistPage();
+                break;
+            case 'wishlist':
+                await initializeWishlistPage();
+                break;
+            case 'automations':
+                await loadAutomations();
+                break;
+            case 'issues':
+                await loadIssuesPage();
+                break;
+            case 'help':
+                initializeDocsPage();
+                break;
+        }
+    } catch (error) {
+        console.error(`Error loading ${pageId} data:`, error);
+        showToast(`Failed to load ${pageId} data`, 'error');
+    }
+}
+
+// ===============================
+// SERVICE STATUS MONITORING
+// ===============================
+
+// Legacy function - now handled by fetchAndUpdateServiceStatus
+// Keeping this for compatibility but it's no longer actively used
+
+// Old updateStatusIndicator function removed - replaced by updateSidebarServiceStatus
+
+// ===============================
+
diff --git a/webui/static/library.js b/webui/static/library.js
new file mode 100644
index 00000000..90f9b3ad
--- /dev/null
+++ b/webui/static/library.js
@@ -0,0 +1,6653 @@
+// LIBRARY PAGE FUNCTIONALITY
+// ===============================
+
+// Library page state
+const libraryPageState = {
+    isInitialized: false,
+    currentSearch: "",
+    currentLetter: "all",
+    currentPage: 1,
+    limit: 75,
+    debounceTimer: null,
+    watchlistFilter: "all",
+    sourceFilter: ""
+};
+
+function initializeLibraryPage() {
+    console.log("🔧 Initializing Library page...");
+
+    try {
+        // Initialize search functionality
+        initializeLibrarySearch();
+
+        // Initialize watchlist filter
+        initializeWatchlistFilter();
+
+        // Initialize metadata source filter
+        initializeSourceFilter();
+
+        // Initialize alphabet selector
+        initializeAlphabetSelector();
+
+        // Initialize pagination
+        initializeLibraryPagination();
+
+        // Load initial data
+        loadLibraryArtists();
+
+        // Show download bubbles if any exist
+        showLibraryDownloadsSection();
+
+        libraryPageState.isInitialized = true;
+        console.log("✅ Library page initialized successfully");
+
+    } catch (error) {
+        console.error("❌ Error initializing Library page:", error);
+        showToast("Failed to initialize Library page", "error");
+    }
+}
+
+function initializeLibrarySearch() {
+    const searchInput = document.getElementById("library-search-input");
+    if (!searchInput) return;
+
+    searchInput.addEventListener("input", (e) => {
+        const query = e.target.value.trim();
+
+        // Clear existing debounce timer
+        if (libraryPageState.debounceTimer) {
+            clearTimeout(libraryPageState.debounceTimer);
+        }
+
+        // Debounce search requests
+        libraryPageState.debounceTimer = setTimeout(() => {
+            libraryPageState.currentSearch = query;
+            libraryPageState.currentPage = 1; // Reset to first page
+            loadLibraryArtists();
+        }, 300);
+    });
+
+    // Clear search on Escape key
+    searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+            searchInput.value = "";
+            libraryPageState.currentSearch = "";
+            libraryPageState.currentPage = 1;
+            loadLibraryArtists();
+        }
+    });
+}
+
+function initializeWatchlistFilter() {
+    const filterButtons = document.querySelectorAll(".watchlist-filter-btn");
+    const watchAllBtn = document.getElementById("library-watchlist-all-btn");
+
+    filterButtons.forEach(button => {
+        button.addEventListener("click", () => {
+            const filter = button.getAttribute("data-filter");
+
+            // Update active state
+            filterButtons.forEach(btn => btn.classList.remove("active"));
+            button.classList.add("active");
+
+            // Show/hide "Watch All Unwatched" button
+            if (watchAllBtn) {
+                if (filter === "unwatched") {
+                    watchAllBtn.classList.remove("hidden");
+                } else {
+                    watchAllBtn.classList.add("hidden");
+                }
+            }
+
+            // Update state and reload
+            libraryPageState.watchlistFilter = filter;
+            libraryPageState.currentPage = 1;
+            loadLibraryArtists();
+        });
+    });
+}
+
+function initializeSourceFilter() {
+    const select = document.getElementById('library-source-filter');
+    if (!select) return;
+    select.addEventListener('change', () => {
+        libraryPageState.sourceFilter = select.value;
+        libraryPageState.currentPage = 1;
+        loadLibraryArtists();
+    });
+}
+
+function initializeAlphabetSelector() {
+    const alphabetButtons = document.querySelectorAll(".alphabet-btn");
+
+    alphabetButtons.forEach(button => {
+        button.addEventListener("click", () => {
+            const letter = button.getAttribute("data-letter");
+
+            // Update active state
+            alphabetButtons.forEach(btn => btn.classList.remove("active"));
+            button.classList.add("active");
+
+            // Update state and load data
+            libraryPageState.currentLetter = letter;
+            libraryPageState.currentPage = 1; // Reset to first page
+            loadLibraryArtists();
+        });
+    });
+}
+
+function initializeLibraryPagination() {
+    const prevBtn = document.getElementById("prev-page-btn");
+    const nextBtn = document.getElementById("next-page-btn");
+
+    if (prevBtn) {
+        prevBtn.addEventListener("click", () => {
+            if (libraryPageState.currentPage > 1) {
+                libraryPageState.currentPage--;
+                loadLibraryArtists();
+            }
+        });
+    }
+
+    if (nextBtn) {
+        nextBtn.addEventListener("click", () => {
+            libraryPageState.currentPage++;
+            loadLibraryArtists();
+        });
+    }
+}
+
+async function loadLibraryArtists() {
+    try {
+        // Show loading state
+        showLibraryLoading(true);
+
+        // Build query parameters
+        const params = new URLSearchParams({
+            search: libraryPageState.currentSearch,
+            letter: libraryPageState.currentLetter,
+            page: libraryPageState.currentPage,
+            limit: libraryPageState.limit,
+            watchlist: libraryPageState.watchlistFilter
+        });
+        if (libraryPageState.sourceFilter) params.set('source_filter', libraryPageState.sourceFilter);
+
+        // Fetch artists from API
+        const response = await fetch(`/api/library/artists?${params}`);
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || "Failed to load artists");
+        }
+
+        // Update UI with artists
+        displayLibraryArtists(data.artists);
+        updateLibraryPagination(data.pagination);
+        updateLibraryStats(data.pagination.total_count);
+
+        // Hide loading state
+        showLibraryLoading(false);
+
+        // Show empty state if no artists
+        if (data.artists.length === 0) {
+            showLibraryEmpty(true);
+        } else {
+            showLibraryEmpty(false);
+        }
+
+    } catch (error) {
+        console.error("❌ Error loading library artists:", error);
+        showToast("Failed to load artists", "error");
+        showLibraryLoading(false);
+        showLibraryEmpty(true);
+    }
+}
+
+function displayLibraryArtists(artists) {
+    const grid = document.getElementById("library-artists-grid");
+    if (!grid) return;
+
+    // Build all cards as HTML string for single DOM write (much faster than createElement loop)
+    grid.innerHTML = artists.map((artist, i) => {
+        try { return buildLibraryArtistCardHTML(artist, i); }
+        catch (e) { console.error('Failed to render artist card:', artist.name, e); return ''; }
+    }).join('');
+
+    // Attach click handlers via event delegation (single listener vs 75+ individual)
+    grid.onclick = (e) => {
+        // Ignore clicks on badge icons (they open external links / toggle watchlist)
+        const badge = e.target.closest('.source-card-icon');
+        if (badge) {
+            e.stopPropagation();
+            const url = badge.dataset.url;
+            if (url) { window.open(url, '_blank'); return; }
+            // Watchlist toggle
+            if (badge.classList.contains('watch-card-icon') && badge.dataset.unwatched) {
+                const card = badge.closest('.library-artist-card');
+                if (card) {
+                    const artistId = card.dataset.artistId;
+                    const artistName = card.dataset.artistName;
+                    const artist = artists.find(a => String(a.id) === artistId);
+                    if (artist) toggleLibraryCardWatchlist(badge, artist);
+                }
+            }
+            return;
+        }
+        const card = e.target.closest('.library-artist-card');
+        if (card) {
+            navigateToArtistDetail(card.dataset.artistId, card.dataset.artistName);
+        }
+    };
+}
+
+function buildLibraryArtistCardHTML(artist, index) {
+    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    const delay = Math.min(index * 20, 600); // Cap at 600ms so last cards don't wait too long
+
+    // Build badge icons
+    const badges = [];
+    if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify', url: `https://open.spotify.com/artist/${artist.spotify_artist_id}` });
+    if (artist.musicbrainz_id) badges.push({ logo: MUSICBRAINZ_LOGO_URL, fb: 'MB', title: 'MusicBrainz', url: `https://musicbrainz.org/artist/${artist.musicbrainz_id}` });
+    if (artist.deezer_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer', url: `https://www.deezer.com/artist/${artist.deezer_id}` });
+    if (artist.audiodb_id) {
+        const slug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
+        badges.push({ logo: typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', fb: 'ADB', title: 'AudioDB', url: `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${slug}` });
+    }
+    if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music', url: `https://music.apple.com/artist/${artist.itunes_artist_id}` });
+    if (artist.lastfm_url) badges.push({ logo: LASTFM_LOGO_URL, fb: 'LFM', title: 'Last.fm', url: artist.lastfm_url });
+    if (artist.genius_url) badges.push({ logo: GENIUS_LOGO_URL, fb: 'GEN', title: 'Genius', url: artist.genius_url });
+    if (artist.tidal_id) badges.push({ logo: TIDAL_LOGO_URL, fb: 'TD', title: 'Tidal', url: `https://tidal.com/browse/artist/${artist.tidal_id}` });
+    if (artist.qobuz_id) badges.push({ logo: QOBUZ_LOGO_URL, fb: 'Qz', title: 'Qobuz', url: `https://www.qobuz.com/artist/${artist.qobuz_id}` });
+    if (artist.discogs_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs', url: `https://www.discogs.com/artist/${artist.discogs_id}` });
+    if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push({ logo: '/static/trans2.png', fb: 'SS', title: `SoulID: ${artist.soul_id}`, url: null });
+
+    // Watchlist badge
+    const hasActiveSourceId = currentMusicSourceName === 'iTunes'
+        ? (artist.itunes_artist_id || artist.spotify_artist_id)
+        : (artist.spotify_artist_id || artist.itunes_artist_id);
+    let watchBadgeHTML = '';
+    if (artist.is_watched) {
+        watchBadgeHTML = `<div class="watch-card-icon watched source-card-icon" title="On your watchlist"><span class="watch-icon-emoji">👁️</span><span class="watch-icon-label">Watching</span></div>`;
+    } else if (hasActiveSourceId) {
+        watchBadgeHTML = `<div class="watch-card-icon source-card-icon" data-unwatched="1" title="Add to Watchlist" style="opacity:0.4"><span class="watch-icon-emoji">👁️</span><span class="watch-icon-label">Watch</span></div>`;
+    }
+
+    const maxPerColumn = 6;
+    const needsOverflow = badges.length > maxPerColumn;
+    const badgeIcon = (b) => `<div class="source-card-icon" title="${_esc(b.title)}" ${b.url ? `data-url="${_esc(b.url)}"` : ''}>${b.logo ? `<img src="${_esc(b.logo)}" style="width:16px;height:auto;display:block" onerror="this.parentNode.textContent='${b.fb}'">` : `<span style="font-size:9px;font-weight:700">${b.fb}</span>`}</div>`;
+
+    let badgeContainerHTML = '';
+    if (badges.length > 0 || watchBadgeHTML) {
+        if (needsOverflow) {
+            badgeContainerHTML = `<div class="card-badge-container">
+                <div class="badge-overflow-column">${watchBadgeHTML}${badges.slice(maxPerColumn).map(badgeIcon).join('')}</div>
+                <div class="badge-primary-column">${badges.slice(0, maxPerColumn).map(badgeIcon).join('')}</div>
+            </div>`;
+        } else {
+            badgeContainerHTML = `<div class="card-badge-container">${badges.map(badgeIcon).join('')}${watchBadgeHTML}</div>`;
+        }
+    }
+
+    // Image
+    const hasImage = artist.image_url && artist.image_url.trim() !== '';
+    const deezerFallback = artist.deezer_id ? `if(!this.dataset.triedDeezer){this.dataset.triedDeezer='true';this.src='https://api.deezer.com/artist/${artist.deezer_id}/image?size=big'}else{this.parentNode.innerHTML='<div class=\\'library-artist-image-fallback\\'>🎵</div>'}` : `this.parentNode.innerHTML='<div class=\\'library-artist-image-fallback\\'>🎵</div>'`;
+    const imageHTML = hasImage
+        ? `<div class="library-artist-image"><img src="${_esc(artist.image_url)}" alt="${_esc(artist.name)}" loading="lazy" onerror="${deezerFallback}"></div>`
+        : `<div class="library-artist-image"><div class="library-artist-image-fallback">🎵</div></div>`;
+
+    // Track stats
+    const trackStat = artist.track_count > 0 ? `<span class="library-artist-stat">${artist.track_count} track${artist.track_count !== 1 ? 's' : ''}</span>` : '';
+
+    return `<div class="library-artist-card" data-artist-id="${_esc(String(artist.id))}" data-artist-name="${_esc(artist.name)}" style="position:relative;animation:cardFadeIn 0.35s cubic-bezier(0.4,0,0.2,1) ${delay}ms both">
+        ${badgeContainerHTML}
+        ${imageHTML}
+        <div class="library-artist-info">
+            <h3 class="library-artist-name" title="${_esc(artist.name)}">${_esc(artist.name)}</h3>
+            <div class="library-artist-stats">${trackStat}</div>
+        </div>
+    </div>`;
+}
+
+function updateLibraryPagination(pagination) {
+    const prevBtn = document.getElementById("prev-page-btn");
+    const nextBtn = document.getElementById("next-page-btn");
+    const pageInfo = document.getElementById("page-info");
+    const paginationContainer = document.getElementById("library-pagination");
+
+    if (!paginationContainer) return;
+
+    // Update button states
+    if (prevBtn) {
+        prevBtn.disabled = !pagination.has_prev;
+    }
+
+    if (nextBtn) {
+        nextBtn.disabled = !pagination.has_next;
+    }
+
+    // Update page info
+    if (pageInfo) {
+        pageInfo.textContent = `Page ${pagination.page} of ${pagination.total_pages}`;
+    }
+
+    // Show/hide pagination based on total pages
+    if (pagination.total_pages > 1) {
+        paginationContainer.classList.remove("hidden");
+    } else {
+        paginationContainer.classList.add("hidden");
+    }
+}
+
+function updateLibraryStats(totalCount) {
+    const countElement = document.getElementById("library-artist-count");
+    if (countElement) {
+        countElement.textContent = totalCount;
+    }
+}
+
+function showLibraryLoading(show) {
+    const loadingElement = document.getElementById("library-loading");
+    if (loadingElement) {
+        if (show) {
+            loadingElement.classList.remove("hidden");
+        } else {
+            loadingElement.classList.add("hidden");
+        }
+    }
+}
+
+function showLibraryEmpty(show) {
+    const emptyElement = document.getElementById("library-empty");
+    if (emptyElement) {
+        if (show) {
+            emptyElement.classList.remove("hidden");
+        } else {
+            emptyElement.classList.add("hidden");
+        }
+    }
+}
+
+async function openWatchAllUnwatchedModal() {
+    if (document.getElementById('watch-all-modal-overlay')) return;
+
+    const sourceIdField = currentMusicSourceName === 'iTunes' ? 'itunes_artist_id'
+        : currentMusicSourceName === 'Deezer' ? 'deezer_id' : 'spotify_artist_id';
+    const sourceName = currentMusicSourceName || 'Spotify';
+
+    const overlay = document.createElement('div');
+    overlay.id = 'watch-all-modal-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) closeWatchAllUnwatchedModal(); };
+
+    overlay.innerHTML = `
+        <div class="watch-all-modal">
+            <div class="watch-all-header">
+                <div class="watch-all-header-content">
+                    <div class="watch-all-header-icon">&#128065;</div>
+                    <div>
+                        <h2 class="watch-all-title">Watch All Unwatched</h2>
+                        <p class="watch-all-subtitle">Add unwatched artists with ${_esc(sourceName)} IDs to your watchlist</p>
+                    </div>
+                </div>
+                <button class="watch-all-close" onclick="closeWatchAllUnwatchedModal()">&times;</button>
+            </div>
+            <div class="watch-all-body">
+                <div class="watch-all-loading-state">
+                    <div class="watch-all-loading-spinner"></div>
+                    <div class="watch-all-loading-text">Loading unwatched artists...</div>
+                    <div class="watch-all-loading-count" id="watch-all-load-count"></div>
+                </div>
+            </div>
+            <div class="watch-all-footer">
+                <button class="watch-all-btn watch-all-btn-cancel" onclick="closeWatchAllUnwatchedModal()">Cancel</button>
+                <button class="watch-all-btn watch-all-btn-primary" id="watch-all-confirm-btn" disabled>Watch All</button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Fetch all unwatched artists paginated (SQLite variable limit safe)
+    try {
+        const eligible = [];
+        const ineligible = [];
+        let page = 1;
+        const pageSize = 400;
+        const countEl = document.getElementById('watch-all-load-count');
+
+        while (true) {
+            if (!document.getElementById('watch-all-modal-overlay')) return;
+            if (countEl) countEl.textContent = `${eligible.length + ineligible.length} artists loaded...`;
+
+            const params = new URLSearchParams({ search: '', letter: 'all', page, limit: pageSize, watchlist: 'unwatched' });
+            const response = await fetch(`/api/library/artists?${params}`);
+            const data = await response.json();
+            if (!data.success) throw new Error(data.error || 'Failed to load artists');
+
+            for (const a of (data.artists || [])) {
+                if (a[sourceIdField]) eligible.push(a);
+                else ineligible.push(a);
+            }
+
+            if (!data.pagination.has_next) break;
+            page++;
+        }
+
+        _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName);
+    } catch (error) {
+        console.error('Error loading unwatched artists:', error);
+        const body = overlay.querySelector('.watch-all-body');
+        if (body) body.innerHTML = `<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#9888;</div><div>Failed to load artists</div><a href="#" onclick="closeWatchAllUnwatchedModal(); openWatchAllUnwatchedModal(); return false;" class="watch-all-retry-link">Retry</a></div>`;
+    }
+}
+
+function _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName) {
+    const body = overlay.querySelector('.watch-all-body');
+    const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
+
+    if (eligible.length === 0 && ineligible.length === 0) {
+        body.innerHTML = '<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#127925;</div><div>No unwatched artists found</div></div>';
+        return;
+    }
+
+    // Store data for search filtering
+    overlay._watchAllEligible = eligible;
+    overlay._watchAllIneligible = ineligible;
+
+    let html = '';
+
+    // Summary bar (sticky)
+    html += '<div class="watch-all-stats">';
+    html += `<div class="watch-all-stat-card eligible"><div class="watch-all-stat-value">${eligible.length}</div><div class="watch-all-stat-label">Ready to watch</div></div>`;
+    html += `<div class="watch-all-stat-card ineligible"><div class="watch-all-stat-value">${ineligible.length}</div><div class="watch-all-stat-label">No ${_esc(sourceName)} ID</div></div>`;
+    html += `<div class="watch-all-stat-card total"><div class="watch-all-stat-value">${eligible.length + ineligible.length}</div><div class="watch-all-stat-label">Total unwatched</div></div>`;
+    html += '</div>';
+
+    // Search filter
+    if (eligible.length > 10) {
+        html += '<div class="watch-all-search-wrap"><input type="text" class="watch-all-search" id="watch-all-search" placeholder="Search artists..." oninput="_filterWatchAllList(this.value)"></div>';
+    }
+
+    // Eligible grid
+    if (eligible.length > 0) {
+        html += '<div class="watch-all-section-label">Artists to be watched</div>';
+        html += '<div class="watch-all-grid" id="watch-all-eligible-grid">';
+        html += _buildWatchAllRows(eligible, false);
+        html += '</div>';
+    }
+
+    // Ineligible section
+    if (ineligible.length > 0) {
+        html += `<div class="watch-all-ineligible">
+            <div class="watch-all-ineligible-header" onclick="this.parentElement.classList.toggle('expanded')">
+                <div class="watch-all-ineligible-label">
+                    <span class="watch-all-ineligible-icon">&#9888;</span>
+                    <span>${ineligible.length} artist${ineligible.length !== 1 ? 's' : ''} without ${_esc(sourceName)} ID</span>
+                </div>
+                <span class="watch-all-chevron">&#9660;</span>
+            </div>
+            <div class="watch-all-ineligible-body">
+                <div class="watch-all-ineligible-hint">These artists haven't been matched to ${_esc(sourceName)} yet. The background enrichment worker will match them over time.</div>
+                <div class="watch-all-grid" id="watch-all-ineligible-grid">${_buildWatchAllRows(ineligible, true)}</div>
+            </div>
+        </div>`;
+    }
+
+    if (eligible.length === 0) {
+        html += `<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#128268;</div><div>None of your unwatched artists have a ${_esc(sourceName)} ID yet</div><div class="watch-all-empty-hint">The background enrichment worker will match them over time.</div></div>`;
+    }
+
+    body.innerHTML = html;
+
+    if (eligible.length > 0 && confirmBtn) {
+        confirmBtn.textContent = `Watch All (${eligible.length})`;
+        confirmBtn.disabled = false;
+        confirmBtn.onclick = () => _confirmWatchAllUnwatched(overlay, eligible.length);
+    }
+}
+
+function _buildWatchAllRows(artists, dimmed) {
+    let html = '';
+    for (const a of artists) {
+        const img = a.image_url
+            ? `<img src="${_esc(a.image_url)}" alt="" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" loading="lazy"><div class="watch-all-cell-placeholder" style="display:none">&#127925;</div>`
+            : `<div class="watch-all-cell-placeholder">&#127925;</div>`;
+        html += `<div class="watch-all-cell${dimmed ? ' dimmed' : ''}" data-name="${_esc(a.name.toLowerCase())}">
+            <div class="watch-all-cell-img">${img}</div>
+            <div class="watch-all-cell-name" title="${_esc(a.name)}">${_esc(a.name)}</div>
+            <div class="watch-all-cell-meta">${a.track_count || 0} tracks</div>
+        </div>`;
+    }
+    return html;
+}
+
+function _filterWatchAllList(query) {
+    const q = query.toLowerCase().trim();
+    document.querySelectorAll('#watch-all-eligible-grid .watch-all-cell').forEach(cell => {
+        cell.style.display = !q || cell.dataset.name.includes(q) ? '' : 'none';
+    });
+}
+
+async function _confirmWatchAllUnwatched(overlay, expectedCount) {
+    const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
+    const cancelBtn = overlay.querySelector('.watch-all-btn-cancel');
+    if (confirmBtn) { confirmBtn.disabled = true; confirmBtn.textContent = 'Adding...'; }
+    if (cancelBtn) cancelBtn.disabled = true;
+
+    try {
+        const response = await fetch('/api/library/watchlist-all-unwatched', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+        const data = await response.json();
+
+        if (data.success) {
+            const body = overlay.querySelector('.watch-all-body');
+            body.innerHTML = `<div class="watch-all-results">
+                <div class="watch-all-results-icon">&#10003;</div>
+                <div class="watch-all-results-title">Added ${data.added} artist${data.added !== 1 ? 's' : ''} to watchlist</div>
+                ${data.skipped_already > 0 ? `<div class="watch-all-results-detail">${data.skipped_already} already watched</div>` : ''}
+                ${data.skipped_no_id > 0 ? `<div class="watch-all-results-detail">${data.skipped_no_id} skipped (no external ID)</div>` : ''}
+            </div>`;
+
+            if (confirmBtn) confirmBtn.style.display = 'none';
+            if (cancelBtn) { cancelBtn.disabled = false; cancelBtn.textContent = 'Close'; }
+            overlay.dataset.needsRefresh = 'true';
+        } else {
+            throw new Error(data.error || 'Failed to add artists');
+        }
+    } catch (error) {
+        console.error('Error in watch all:', error);
+        if (confirmBtn) { confirmBtn.disabled = false; confirmBtn.textContent = `Watch All (${expectedCount})`; }
+        if (cancelBtn) cancelBtn.disabled = false;
+        showToast('Failed to add artists to watchlist', 'error');
+    }
+}
+
+function closeWatchAllUnwatchedModal() {
+    const overlay = document.getElementById('watch-all-modal-overlay');
+    if (!overlay) return;
+    const needsRefresh = overlay.dataset.needsRefresh === 'true';
+    overlay.remove();
+    if (needsRefresh) loadLibraryArtists();
+}
+
+async function toggleLibraryCardWatchlist(btn, artist) {
+    if (btn.disabled) return;
+    btn.disabled = true;
+
+    // Support both badge-style (.watch-icon-label) and button-style (.watchlist-text)
+    const label = btn.querySelector('.watch-icon-label') || btn.querySelector('.watchlist-text');
+    const isWatching = btn.classList.contains('watched') || btn.classList.contains('watching');
+
+    if (label) label.textContent = '...';
+
+    try {
+        // Use the ID matching the active metadata source
+        const artistId = currentMusicSourceName === 'iTunes'
+            ? (artist.itunes_artist_id || artist.spotify_artist_id)
+            : (artist.spotify_artist_id || artist.itunes_artist_id);
+        if (!artistId) throw new Error('No iTunes or Spotify ID available for this artist');
+
+        if (isWatching) {
+            const response = await fetch('/api/watchlist/remove', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: artistId })
+            });
+            const data = await response.json();
+            if (!data.success) throw new Error(data.error);
+
+            btn.classList.remove('watched', 'watching');
+            btn.style.opacity = '0.4';
+            btn.title = 'Add to Watchlist';
+            if (label) label.textContent = 'Watch';
+            showToast(`Removed ${artist.name} from watchlist`, 'success');
+        } else {
+            const response = await fetch('/api/watchlist/add', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ artist_id: artistId, artist_name: artist.name })
+            });
+            const data = await response.json();
+            if (!data.success) throw new Error(data.error);
+
+            btn.classList.add('watched');
+            btn.style.opacity = '';
+            btn.title = 'Remove from Watchlist';
+            if (label) label.textContent = 'Watching';
+            showToast(`Added ${artist.name} to watchlist`, 'success');
+        }
+
+        if (typeof updateWatchlistCount === 'function') {
+            updateWatchlistCount();
+        }
+    } catch (error) {
+        console.error('Error toggling library card watchlist:', error);
+        if (label) label.textContent = isWatching ? 'Watching' : 'Watch';
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        btn.disabled = false;
+    }
+}
+
+// ===============================================
+// Artist Detail Page Functions
+// ===============================================
+
+// Artist detail page state
+let artistDetailPageState = {
+    isInitialized: false,
+    currentArtistId: null,
+    currentArtistName: null,
+    enhancedView: false,
+    enhancedData: null,
+    expandedAlbums: new Set(),
+    selectedTracks: new Set(),
+    editingCell: null,
+    enhancedTrackSort: {}
+};
+
+// Discography filter state
+let discographyFilterState = {
+    categories: { albums: true, eps: true, singles: true },
+    content: { live: true, compilations: true, featured: true },
+    ownership: 'all'  // 'all', 'owned', 'missing'
+};
+
+function navigateToArtistDetail(artistId, artistName) {
+    console.log(`🎵 Navigating to artist detail: ${artistName} (ID: ${artistId})`);
+
+    // Abort any in-progress completion stream
+    if (artistDetailPageState.completionController) {
+        artistDetailPageState.completionController.abort();
+        artistDetailPageState.completionController = null;
+    }
+
+    // Cancel any active inline edit and close manual match modal before resetting state
+    cancelInlineEdit();
+    const existingMatchOverlay = document.getElementById('enhanced-manual-match-overlay');
+    if (existingMatchOverlay) existingMatchOverlay.remove();
+
+    // Store current artist info and reset enhanced view state
+    artistDetailPageState.currentArtistId = artistId;
+    artistDetailPageState.currentArtistName = artistName;
+    artistDetailPageState.enhancedData = null;
+    artistDetailPageState.expandedAlbums = new Set();
+    artistDetailPageState.selectedTracks = new Set();
+    artistDetailPageState.enhancedTrackSort = {};
+    artistDetailPageState.enhancedView = false;
+
+    // Reset enhanced view toggle to standard
+    const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
+    toggleBtns.forEach(btn => {
+        btn.classList.toggle('active', btn.getAttribute('data-view') === 'standard');
+    });
+    const enhancedContainer = document.getElementById('enhanced-view-container');
+    if (enhancedContainer) enhancedContainer.classList.add('hidden');
+    const standardSections = document.querySelector('.discography-sections');
+    if (standardSections) standardSections.classList.remove('hidden');
+    // Restore standard view filter groups
+    const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
+    filterGroups.forEach(group => {
+        const label = group.querySelector('.filter-label');
+        if (label && label.textContent !== 'View') group.style.display = '';
+    });
+    const dividers = document.querySelectorAll('#discography-filters .filter-divider');
+    dividers.forEach(d => d.style.display = '');
+    // Hide bulk bar
+    const bulkBar = document.getElementById('enhanced-bulk-bar');
+    if (bulkBar) bulkBar.classList.remove('visible');
+
+    // Navigate to artist detail page
+    navigateToPage('artist-detail');
+
+    // Initialize if needed and load data
+    if (!artistDetailPageState.isInitialized) {
+        initializeArtistDetailPage();
+    }
+
+    // Load artist data
+    loadArtistDetailData(artistId, artistName);
+}
+
+function initializeArtistDetailPage() {
+    console.log("🔧 Initializing Artist Detail page...");
+
+    // Initialize back button
+    const backBtn = document.getElementById("artist-detail-back-btn");
+    if (backBtn) {
+        backBtn.addEventListener("click", () => {
+            console.log("🔙 Returning to Library page");
+            // Abort any in-progress completion stream
+            if (artistDetailPageState.completionController) {
+                artistDetailPageState.completionController.abort();
+                artistDetailPageState.completionController = null;
+            }
+            // Clear artist detail state so we go back to the list view
+            artistDetailPageState.currentArtistId = null;
+            artistDetailPageState.currentArtistName = null;
+            navigateToPage('library');
+        });
+    }
+
+    // Initialize retry button
+    const retryBtn = document.getElementById("artist-detail-retry-btn");
+    if (retryBtn) {
+        retryBtn.addEventListener("click", () => {
+            if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
+                loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
+            }
+        });
+    }
+
+    // Initialize discography filter buttons
+    initializeDiscographyFilters();
+
+    artistDetailPageState.isInitialized = true;
+    console.log("✅ Artist Detail page initialized successfully");
+}
+
+async function loadArtistDetailData(artistId, artistName) {
+    console.log(`🔄 Loading artist detail data for: ${artistName} (ID: ${artistId})`);
+
+    // Reset discography filters to defaults
+    resetDiscographyFilters();
+
+    // Show loading state and hide all content
+    showArtistDetailLoading(true);
+    showArtistDetailError(false);
+    showArtistDetailMain(false);
+    showArtistDetailHero(false);
+
+    // Don't update header until data loads to avoid showing stale data
+
+    try {
+        // Call API to get artist discography data
+        const response = await fetch(`/api/artist-detail/${artistId}`);
+
+        if (!response.ok) {
+            throw new Error(`Failed to load artist data: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to load artist data');
+        }
+
+        console.log(`✅ Loaded artist detail data:`, data);
+
+        // Hide loading and show all content
+        showArtistDetailLoading(false);
+        showArtistDetailMain(true);
+        showArtistDetailHero(true);
+
+        console.log(`🎨 Main content visibility:`, document.getElementById('artist-detail-main'));
+        console.log(`🎨 Albums section:`, document.getElementById('albums-section'));
+
+        // Populate the page with data (which updates the hero section and sets textContent)
+        populateArtistDetailPage(data);
+
+        // Update header with artist name and MusicBrainz link LAST to avoid overwrite
+        updateArtistDetailPageHeaderWithData(data.artist);
+
+        // Render per-artist enrichment coverage
+        renderArtistEnrichmentCoverage(data.enrichment_coverage);
+
+        // Start streaming ownership checks if we have Spotify discography with checking state
+        if (data.discography && data.discography.albums) {
+            const hasChecking = [...(data.discography.albums || []), ...(data.discography.eps || []), ...(data.discography.singles || [])]
+                .some(r => r.owned === null);
+            if (hasChecking) {
+                // Store discography for stream updates
+                artistDetailPageState.currentDiscography = data.discography;
+                checkLibraryCompletion(data.artist.name, data.discography);
+            }
+        }
+
+        // Check if artist has tracks eligible for quality enhancement
+        checkArtistEnhanceEligibility(artistId);
+
+    } catch (error) {
+        console.error(`❌ Error loading artist detail data:`, error);
+
+        // Show error state (keep hero section hidden)
+        showArtistDetailLoading(false);
+        showArtistDetailError(true, error.message);
+        showArtistDetailHero(false);
+
+        showToast(`Failed to load artist details: ${error.message}`, "error");
+    }
+}
+
+function updateArtistDetailPageHeader(artistName) {
+    // Update header title
+    const headerTitle = document.getElementById("artist-detail-name");
+    if (headerTitle) {
+        headerTitle.textContent = artistName;
+    }
+
+    // Update main artist name
+    const mainTitle = document.getElementById("artist-info-name");
+    if (mainTitle) {
+        mainTitle.textContent = artistName;
+    }
+}
+
+function updateArtistDetailPageHeaderWithData(artist) {
+    // Update name
+    const mainTitle = document.getElementById("artist-detail-name");
+    if (mainTitle) {
+        mainTitle.textContent = artist.name;
+        // Remove any old source links that were appended to the h1
+        mainTitle.querySelectorAll('.source-link-btn').forEach(el => el.remove());
+    }
+
+    // Render badges in dedicated container
+    const badgesContainer = document.getElementById("artist-hero-badges");
+    if (badgesContainer) {
+        const _hb = (logo, fallback, title, url) => {
+            const inner = logo
+                ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
+                : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
+            if (url) return `<a class="artist-hero-badge" title="${title}" href="${url}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
+            return `<div class="artist-hero-badge" title="${title}">${inner}</div>`;
+        };
+
+        const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
+        const badges = [];
+        if (artist.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${artist.spotify_artist_id}`));
+        if (artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${artist.musicbrainz_id}`));
+        if (artist.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${artist.deezer_id}`));
+        if (artist.audiodb_id) badges.push(_hb(typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', 'ADB', 'AudioDB', `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${adbSlug}`));
+        if (artist.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${artist.itunes_artist_id}`));
+        if (artist.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', artist.lastfm_url));
+        if (artist.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', artist.genius_url));
+        if (artist.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${artist.tidal_id}`));
+        if (artist.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${artist.qobuz_id}`));
+        if (artist.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${artist.discogs_id}`));
+        if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push(_hb('/static/trans2.png', 'SS', `SoulID: ${artist.soul_id}`, null));
+
+        badgesContainer.innerHTML = badges.join('');
+    }
+}
+
+function renderArtistEnrichmentCoverage(enrichment) {
+    const el = document.getElementById('artist-enrichment-coverage');
+    if (!el) return;
+
+    if (!enrichment || !enrichment.total_tracks) {
+        el.style.display = 'none';
+        return;
+    }
+
+    const services = [
+        { name: 'Spotify', key: 'spotify', color: '#1db954' },
+        { name: 'MusicBrainz', key: 'musicbrainz', color: '#ba55d3' },
+        { name: 'Deezer', key: 'deezer', color: '#a238ff' },
+        { name: 'Last.fm', key: 'lastfm', color: '#d51007' },
+        { name: 'iTunes', key: 'itunes', color: '#fc3c44' },
+        { name: 'AudioDB', key: 'audiodb', color: '#1a9fff' },
+        { name: 'Discogs', key: 'discogs', color: '#D4A574' },
+        { name: 'Genius', key: 'genius', color: '#ffff64' },
+        { name: 'Tidal', key: 'tidal', color: '#00ffff' },
+        { name: 'Qobuz', key: 'qobuz', color: '#4285f4' },
+    ];
+
+    const r = 20, circ = 2 * Math.PI * r;
+
+    el.style.display = '';
+    el.innerHTML = `
+        <div class="artist-enrich-title">Enrichment Coverage</div>
+        <div class="artist-enrich-grid">
+            ${services.map((s, i) => {
+        const pct = enrichment[s.key] || 0;
+        const offset = circ - (circ * pct / 100);
+        const delay = (i * 0.08).toFixed(2);
+        return `<div class="artist-enrich-circle">
+                    <div class="artist-enrich-ring" style="--ring-color:${s.color}">
+                        <svg viewBox="0 0 48 48">
+                            <circle class="ring-bg" cx="24" cy="24" r="${r}"/>
+                            <circle class="ring-fill" cx="24" cy="24" r="${r}"
+                                stroke="${s.color}" stroke-dasharray="${circ.toFixed(1)}"
+                                style="--ring-circ:${circ.toFixed(1)};--ring-offset:${offset.toFixed(1)};stroke-dashoffset:${offset.toFixed(1)};animation:ringFillIn 1s cubic-bezier(0.4,0,0.2,1) ${delay}s both"/>
+                        </svg>
+                        <span class="ring-pct" style="animation:ringPctFade 0.8s ease ${(parseFloat(delay) + 0.3).toFixed(2)}s both">${Math.round(pct)}</span>
+                    </div>
+                    <span class="artist-enrich-label">${s.name}</span>
+                </div>`;
+    }).join('')}
+        </div>
+    `;
+}
+
+function populateArtistDetailPage(data) {
+    const artist = data.artist;
+    const discography = data.discography;
+
+    console.log(`🎨 Populating artist detail page for: ${artist.name}`);
+    console.log(`📀 Discography data:`, discography);
+    console.log(`📀 Albums:`, discography.albums);
+    console.log(`📀 EPs:`, discography.eps);
+    console.log(`📀 Singles:`, discography.singles);
+
+    // Update hero section with image, name, and stats
+    updateArtistHeroSection(artist, discography);
+
+    // Update genres (if element exists)
+    updateArtistGenres(artist.genres);
+
+    // Update summary stats (if element exists)
+    updateArtistSummaryStats(discography);
+
+    // Populate discography sections
+    populateDiscographySections(discography);
+
+    // Initialize library watchlist button if it exists (for library page)
+    const libraryWatchlistBtn = document.getElementById('library-artist-watchlist-btn');
+    if (libraryWatchlistBtn && data.spotify_artist && data.spotify_artist.spotify_artist_id) {
+        initializeLibraryWatchlistButton(data.spotify_artist.spotify_artist_id, data.spotify_artist.spotify_artist_name);
+    }
+}
+
+function updateArtistDetailImage(imageUrl, artistName) {
+    const imageElement = document.getElementById("artist-detail-image");
+    const fallbackElement = document.getElementById("artist-image-fallback");
+
+    if (imageUrl && imageUrl.trim() !== "") {
+        imageElement.src = imageUrl;
+        imageElement.alt = artistName;
+        imageElement.classList.remove("hidden");
+        fallbackElement.classList.add("hidden");
+
+        imageElement.onerror = () => {
+            console.log(`Failed to load artist image for ${artistName}: ${imageUrl}`);
+            // Replace with fallback on error
+            imageElement.classList.add("hidden");
+            fallbackElement.classList.remove("hidden");
+        };
+
+        imageElement.onload = () => {
+            console.log(`Successfully loaded artist image for ${artistName}: ${imageUrl}`);
+        };
+    } else {
+        console.log(`No image URL for ${artistName}: '${imageUrl}'`);
+        imageElement.classList.add("hidden");
+        fallbackElement.classList.remove("hidden");
+    }
+}
+
+function updateArtistGenres(genres) {
+    const genresContainer = document.getElementById("artist-genres");
+    if (!genresContainer) return;
+
+    genresContainer.innerHTML = "";
+
+    // Clear any previous artist format tags (they arrive later via streaming)
+    const oldFormats = genresContainer.parentElement?.querySelector('.artist-formats');
+    if (oldFormats) oldFormats.remove();
+
+    if (genres && genres.length > 0) {
+        genres.forEach(genre => {
+            const genreTag = document.createElement("span");
+            genreTag.className = "genre-tag";
+            genreTag.textContent = genre;
+            genresContainer.appendChild(genreTag);
+        });
+    }
+}
+
+function updateArtistSummaryStats(discography) {
+    const allReleases = [...discography.albums, ...discography.eps, ...discography.singles];
+    const hasChecking = allReleases.some(r => r.owned === null);
+
+    const ownedAlbums = discography.albums.filter(album => album.owned === true).length;
+    const missingAlbums = discography.albums.filter(album => album.owned === false).length;
+    const totalAlbums = discography.albums.length;
+    const completionPercentage = totalAlbums > 0 ? Math.round((ownedAlbums / totalAlbums) * 100) : 0;
+
+    // Update owned albums count
+    const ownedElement = document.getElementById("owned-albums-count");
+    if (ownedElement) {
+        ownedElement.textContent = hasChecking ? '...' : ownedAlbums;
+    }
+
+    // Update missing albums count
+    const missingElement = document.getElementById("missing-albums-count");
+    if (missingElement) {
+        missingElement.textContent = hasChecking ? '...' : missingAlbums;
+    }
+
+    // Update completion percentage
+    const completionElement = document.getElementById("completion-percentage");
+    if (completionElement) {
+        completionElement.textContent = hasChecking ? 'Checking...' : `${completionPercentage}%`;
+    }
+}
+
+function updateArtistHeaderStats(albumCount, trackCount) {
+    // This function is deprecated - now using updateArtistHeroSection
+    console.log("📊 Using new hero section instead of old header stats");
+}
+
+function updateArtistHeroSection(artist, discography) {
+    console.log("🖼️ Updating artist hero section");
+
+    // Update artist image with detailed debugging
+    const imageElement = document.getElementById("artist-detail-image");
+    const fallbackElement = document.getElementById("artist-detail-image-fallback");
+
+    console.log(`🖼️ Debug Artist image info:`);
+    console.log(`   - URL: '${artist.image_url}'`);
+    console.log(`   - Type: ${typeof artist.image_url}`);
+    console.log(`   - Full artist object:`, artist);
+    console.log(`   - Image element:`, imageElement);
+    console.log(`   - Fallback element:`, fallbackElement);
+
+    if (artist.image_url && artist.image_url.trim() !== "" && artist.image_url !== "null") {
+        console.log(`✅ Setting image src to: ${artist.image_url}`);
+        imageElement.src = artist.image_url;
+        imageElement.alt = artist.name;
+        imageElement.style.display = "block";
+        if (fallbackElement) {
+            fallbackElement.style.display = "none";
+        }
+
+        imageElement.onload = () => {
+            console.log(`✅ Successfully loaded artist image: ${artist.image_url}`);
+        };
+
+        imageElement.onerror = () => {
+            console.error(`❌ Failed to load artist image: ${artist.image_url}`);
+            // Try Deezer fallback before emoji
+            if (artist.deezer_id && !imageElement.dataset.triedDeezer) {
+                imageElement.dataset.triedDeezer = 'true';
+                imageElement.src = `https://api.deezer.com/artist/${artist.deezer_id}/image?size=big`;
+            } else {
+                imageElement.style.display = "none";
+                if (fallbackElement) {
+                    fallbackElement.style.display = "flex";
+                }
+            }
+        };
+    } else {
+        console.log(`🖼️ No valid image URL - showing fallback for ${artist.name}`);
+        imageElement.style.display = "none";
+        if (fallbackElement) {
+            fallbackElement.style.display = "flex";
+        }
+    }
+
+    // Update artist name
+    const nameElement = document.getElementById("artist-detail-name");
+    if (nameElement) {
+        nameElement.textContent = artist.name;
+    }
+
+    // Calculate and update stats for each category
+    updateCategoryStats('albums', discography.albums);
+    updateCategoryStats('eps', discography.eps);
+    updateCategoryStats('singles', discography.singles);
+
+    // Show Download Discography button(s) if there are any releases
+    const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
+    const _discogWrap = document.getElementById('discog-download-wrap');
+    if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
+    const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
+    if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
+
+    // Last.fm stats (listeners / playcount)
+    const _fmtNum = (n) => {
+        if (!n || n <= 0) return '0';
+        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+        return n.toLocaleString();
+    };
+
+    const listenersEl = document.getElementById('artist-hero-listeners');
+    if (listenersEl) {
+        if (artist.lastfm_listeners) {
+            listenersEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_listeners);
+            listenersEl.style.display = '';
+        } else {
+            listenersEl.style.display = 'none';
+        }
+    }
+
+    const playcountEl = document.getElementById('artist-hero-playcount');
+    if (playcountEl) {
+        if (artist.lastfm_playcount) {
+            playcountEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_playcount);
+            playcountEl.style.display = '';
+        } else {
+            playcountEl.style.display = 'none';
+        }
+    }
+
+    // Last.fm bio
+    const bioEl = document.getElementById('artist-hero-bio');
+    if (bioEl) {
+        const bio = artist.lastfm_bio;
+        if (bio && bio.trim()) {
+            // Strip HTML tags and "Read more on Last.fm" links
+            let cleanBio = bio.replace(/<a\b[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
+            if (cleanBio) {
+                bioEl.innerHTML = `<span class="bio-text">${cleanBio}</span>
+                    <span class="artist-hero-bio-toggle" onclick="this.parentElement.classList.toggle('expanded');this.textContent=this.parentElement.classList.contains('expanded')?'Show less':'Read more'">Read more</span>`;
+                bioEl.style.display = '';
+            } else {
+                bioEl.style.display = 'none';
+            }
+        } else {
+            bioEl.style.display = 'none';
+        }
+    }
+
+    // Last.fm tags — merge with existing genres (deduplicate)
+    if (artist.lastfm_tags) {
+        try {
+            let lfmTags = typeof artist.lastfm_tags === 'string' ? JSON.parse(artist.lastfm_tags) : artist.lastfm_tags;
+            if (Array.isArray(lfmTags) && lfmTags.length > 0) {
+                const existingGenres = new Set((artist.genres || []).map(g => g.toLowerCase()));
+                const newTags = lfmTags.filter(t => !existingGenres.has(t.toLowerCase())).slice(0, 5);
+                if (newTags.length > 0) {
+                    const genresContainer = document.getElementById('artist-genres');
+                    if (genresContainer) {
+                        newTags.forEach(tag => {
+                            const el = document.createElement('span');
+                            el.className = 'genre-tag';
+                            el.textContent = tag;
+                            el.style.opacity = '0.6';
+                            genresContainer.appendChild(el);
+                        });
+                    }
+                }
+            }
+        } catch (e) {
+            console.debug('Failed to parse Last.fm tags:', e);
+        }
+    }
+
+    // Lazy-load top tracks sidebar
+    if (artist.lastfm_url || artist.lastfm_listeners) {
+        _loadArtistTopTracks(artist.name);
+    }
+}
+
+async function _loadArtistTopTracks(artistName) {
+    const sidebar = document.getElementById('artist-hero-sidebar');
+    const container = document.getElementById('hero-top-tracks');
+    if (!sidebar || !container) return;
+
+    try {
+        const resp = await fetch(`/api/artist/0/lastfm-top-tracks?name=${encodeURIComponent(artistName)}`);
+        const data = await resp.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            sidebar.style.display = 'none';
+            return;
+        }
+
+        const _fmtNum = (n) => {
+            if (!n || n <= 0) return '0';
+            if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+            if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+            return n.toLocaleString();
+        };
+
+        const _escAttr = (s) => (s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        container.innerHTML = data.tracks.map((t, i) => `
+            <div class="hero-top-track">
+                <span class="hero-top-track-num">${i + 1}</span>
+                <button class="hero-top-track-play" data-track="${_escAttr(t.name)}" data-artist="${_escAttr(artistName)}" title="Play">▶</button>
+                <span class="hero-top-track-name" title="${_escAttr(t.name)}">${_escAttr(t.name)}</span>
+                <span class="hero-top-track-plays">${_fmtNum(t.playcount)}</span>
+            </div>
+        `).join('');
+
+        // Attach play handlers via delegation (avoids inline JS escaping issues)
+        container.onclick = (e) => {
+            const btn = e.target.closest('.hero-top-track-play');
+            if (btn) {
+                e.stopPropagation();
+                playStatsTrack(btn.dataset.track, btn.dataset.artist, '');
+            }
+        };
+        sidebar.style.display = '';
+    } catch (e) {
+        console.debug('Failed to load top tracks:', e);
+        sidebar.style.display = 'none';
+    }
+}
+
+function updateCategoryStats(category, releases) {
+    const hasChecking = releases.some(r => r.owned === null);
+    const owned = releases.filter(r => r.owned === true).length;
+    const total = releases.length;
+    const completion = total > 0 ? Math.round((owned / total) * 100) : 100;
+
+    // Update stats text (compact: "3/12")
+    const statsElement = document.getElementById(`${category}-stats`);
+    if (statsElement) {
+        statsElement.textContent = hasChecking ? '...' : `${owned}/${total}`;
+    }
+
+    // Update completion bar
+    const fillElement = document.getElementById(`${category}-completion-fill`);
+    if (fillElement) {
+        if (hasChecking) {
+            fillElement.style.width = '100%';
+            fillElement.classList.add('checking');
+        } else {
+            fillElement.style.width = `${completion}%`;
+            fillElement.classList.remove('checking');
+        }
+    }
+}
+
+function populateDiscographySections(discography) {
+    // Populate albums
+    populateReleaseSection('albums', discography.albums);
+
+    // Populate EPs
+    populateReleaseSection('eps', discography.eps);
+
+    // Populate singles
+    populateReleaseSection('singles', discography.singles);
+
+    // Apply any active filters after populating
+    applyDiscographyFilters();
+}
+
+function populateReleaseSection(sectionType, releases) {
+    const gridId = `${sectionType}-grid`;
+    const ownedCountId = `${sectionType}-owned-count`;
+    const missingCountId = `${sectionType}-missing-count`;
+
+    const grid = document.getElementById(gridId);
+    if (!grid) return;
+
+    // Clear existing content
+    grid.innerHTML = "";
+
+    const hasChecking = releases.some(r => r.owned === null);
+    const ownedCount = releases.filter(release => release.owned === true).length;
+    const missingCount = releases.filter(release => release.owned === false).length;
+
+    // Update section stats
+    const ownedElement = document.getElementById(ownedCountId);
+    const missingElement = document.getElementById(missingCountId);
+
+    if (ownedElement) {
+        ownedElement.textContent = hasChecking ? 'Checking...' : `${ownedCount} owned`;
+    }
+
+    if (missingElement) {
+        missingElement.textContent = hasChecking ? '' : `${missingCount} missing`;
+    }
+
+    // Create release cards
+    releases.forEach((release, index) => {
+        const card = createReleaseCard(release);
+        grid.appendChild(card);
+    });
+
+    console.log(`📀 Populated ${sectionType} section: ${ownedCount} owned, ${missingCount} missing`);
+    console.log(`📀 Grid element:`, grid);
+    console.log(`📀 Grid children count:`, grid.children.length);
+}
+
+function createReleaseCard(release) {
+    const card = document.createElement("div");
+    const isChecking = release.owned === null;
+    card.className = `release-card${isChecking ? " checking" : (release.owned ? "" : " missing")}`;
+    const releaseId = release.id || "";
+    card.setAttribute("data-release-id", releaseId);
+    // Store mutable reference so stream updates propagate to click handler
+    card._releaseData = release;
+
+    // Tag card for content-type filtering
+    const titleLower = (release.title || '').toLowerCase();
+    const livePattern = /\b(live)\b|\(live[^)]*\)|\[live[^]]*\]/i;
+    const compilationPattern = /\b(greatest hits|best of|collection|anthology|essential)\b/i;
+    const featuredPattern = /\(?\bfeat\.?\s|\bft\.?\s|\bfeaturing\b/i;
+    const isLive = livePattern.test(release.title || '') || (release.album_type === 'compilation' && livePattern.test(release.title || ''));
+    const isCompilation = (release.album_type === 'compilation') || compilationPattern.test(release.title || '');
+    const isFeatured = featuredPattern.test(release.title || '');
+    card.setAttribute("data-is-live", isLive ? "true" : "false");
+    card.setAttribute("data-is-compilation", isCompilation ? "true" : "false");
+    card.setAttribute("data-is-featured", isFeatured ? "true" : "false");
+
+    // Add MusicBrainz icon if available
+    let mbIcon = null;
+    if (release.musicbrainz_release_id) {
+        mbIcon = document.createElement("div");
+        mbIcon.className = "mb-card-icon";
+        mbIcon.title = "View on MusicBrainz";
+        mbIcon.innerHTML = `<img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">`;
+        mbIcon.onclick = (e) => {
+            e.stopPropagation();
+            window.open(`https://musicbrainz.org/release/${release.musicbrainz_release_id}`, '_blank');
+        };
+    }
+
+    // Create image
+    const imageContainer = document.createElement("div");
+    if (release.image_url && release.image_url.trim() !== "") {
+        const img = document.createElement("img");
+        img.src = release.image_url;
+        img.alt = release.title;
+        img.className = "release-image";
+        img.loading = 'lazy';
+        img.onerror = () => {
+            imageContainer.innerHTML = `<div class="release-image-fallback">💿</div>`;
+        };
+        imageContainer.appendChild(img);
+    } else {
+        imageContainer.innerHTML = `<div class="release-image-fallback">💿</div>`;
+    }
+
+    // Create title
+    const title = document.createElement("h4");
+    title.className = "release-title";
+    title.textContent = release.title;
+    title.title = release.title;
+
+    // Create year - extract from release_date (Spotify format) or fall back to year field
+    const year = document.createElement("div");
+    year.className = "release-year";
+
+    let yearText = "Unknown Year";
+
+    // DEBUG: Log the release data to see what we're working with (remove this after testing)
+    // console.log(`🔍 DEBUG: Release "${release.title}" data:`, {
+    //     title: release.title,
+    //     owned: release.owned,
+    //     year: release.year,
+    //     release_date: release.release_date,
+    //     track_completion: release.track_completion
+    // });
+
+    // First try to extract year from release_date (Spotify format: "YYYY-MM-DD")
+    if (release.release_date) {
+        try {
+            // Extract year directly from string to avoid timezone issues
+            const yearMatch = release.release_date.match(/^(\d{4})/);
+            if (yearMatch) {
+                const releaseYear = parseInt(yearMatch[1]);
+                if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
+                    yearText = releaseYear.toString();
+                }
+            } else {
+                // Fallback to Date parsing if format is different
+                const releaseYear = new Date(release.release_date).getFullYear();
+                if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
+                    yearText = releaseYear.toString();
+                }
+            }
+        } catch (e) {
+            console.warn('Error parsing release_date:', release.release_date, e);
+        }
+    }
+
+    // Fallback to direct year field if release_date parsing failed
+    if (yearText === "Unknown Year" && release.year) {
+        yearText = release.year.toString();
+    }
+
+    year.textContent = yearText;
+
+    // Create completion info
+    const completion = document.createElement("div");
+    completion.className = "release-completion";
+
+    const completionText = document.createElement("span");
+    const completionBar = document.createElement("div");
+    completionBar.className = "completion-bar";
+
+    const completionFill = document.createElement("div");
+    completionFill.className = "completion-fill";
+
+    if (release.owned === null || release.track_completion === 'checking') {
+        // Checking state - ownership not yet resolved
+        completionText.textContent = "Checking...";
+        completionText.className = "completion-text checking";
+        completionFill.className += " checking";
+        completionFill.style.width = "100%";
+    } else if (release.owned) {
+        // Handle new detailed track completion object
+        if (release.track_completion && typeof release.track_completion === 'object') {
+            const completion = release.track_completion;
+            const percentage = completion.percentage || 100;
+            const ownedTracks = completion.owned_tracks || 0;
+            const totalTracks = completion.total_tracks || 0;
+            const missingTracks = completion.missing_tracks || 0;
+
+            completionFill.style.width = `${percentage}%`;
+
+            if (missingTracks === 0) {
+                completionText.textContent = `Complete (${ownedTracks})`;
+                completionText.className = "completion-text complete";
+                completionFill.className += " complete";
+            } else {
+                completionText.textContent = `${ownedTracks}/${totalTracks} tracks`;
+                completionText.className = "completion-text partial";
+                completionFill.className += " partial";
+
+                // Add missing tracks indicator
+                completionText.title = `Missing ${missingTracks} track${missingTracks !== 1 ? 's' : ''}`;
+            }
+        } else {
+            // Fallback for legacy simple percentage
+            const percentage = release.track_completion || 100;
+            completionFill.style.width = `${percentage}%`;
+
+            if (percentage === 100) {
+                completionText.textContent = "Complete";
+                completionText.className = "completion-text complete";
+                completionFill.className += " complete";
+            } else {
+                completionText.textContent = `${percentage}%`;
+                completionText.className = "completion-text partial";
+                completionFill.className += " partial";
+            }
+        }
+    } else {
+        const totalTr = release.total_tracks || release.track_completion?.total_tracks || 0;
+        completionText.textContent = totalTr > 0 ? `Missing (${totalTr} tracks)` : "Not in library";
+        completionText.className = "completion-text missing";
+        completionFill.className += " missing";
+        completionFill.style.width = "0%";
+    }
+
+    completionBar.appendChild(completionFill);
+    completion.appendChild(completionText);
+    completion.appendChild(completionBar);
+
+    // Assemble card
+    card.appendChild(imageContainer);
+    card.appendChild(title);
+    card.appendChild(year);
+    card.appendChild(completion);
+
+    // Add MusicBrainz icon LAST to ensure it's on top
+    if (release.musicbrainz_release_id && mbIcon) { // Check if mbIcon was created
+        card.appendChild(mbIcon);
+    }
+
+    // Add click handler for release card (uses card._releaseData for mutable reference)
+    card.addEventListener("click", async () => {
+        const rel = card._releaseData;
+        console.log(`Clicked on release: ${rel.title} (Owned: ${rel.owned})`);
+
+        // Still checking - ignore click
+        if (rel.owned === null) {
+            showToast(`Still checking ownership for ${rel.title}...`, "info");
+            return;
+        }
+
+        showLoadingOverlay('Loading album...');
+
+        // For missing or incomplete releases, open wishlist modal
+        try {
+            // Convert release object to album format expected by our function
+            const albumData = {
+                id: rel.id,
+                name: rel.title,
+                image_url: rel.image_url,
+                release_date: rel.year ? `${rel.year}-01-01` : '',
+                album_type: rel.album_type || rel.type || 'album',
+                total_tracks: (rel.track_completion && typeof rel.track_completion === 'object')
+                    ? rel.track_completion.total_tracks : (rel.track_count || 1)
+            };
+
+            // Get current artist from artist detail page state
+            const currentArtist = artistDetailPageState.currentArtistName ? {
+                id: artistDetailPageState.currentArtistId,
+                name: artistDetailPageState.currentArtistName,
+                image_url: getArtistImageFromPage() || '' // Get artist image from page
+            } : null;
+
+            if (!currentArtist) {
+                console.error('❌ No current artist found for release click');
+                showToast('Error: No artist information available', 'error');
+                return;
+            }
+
+            // Load tracks for the album (pass name/artist for Hydrabase support)
+            const _aat2 = new URLSearchParams({ name: albumData.name || '', artist: currentArtist.name || '' });
+            const response = await fetch(`/api/album/${albumData.id}/tracks?${_aat2}`);
+            if (!response.ok) {
+                throw new Error(`Failed to load album tracks: ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (!data.success || !data.tracks || data.tracks.length === 0) {
+                throw new Error('No tracks found for this release');
+            }
+
+            // Use the actual album type from release data
+            const albumType = rel.album_type || rel.type || 'album';
+
+            // Open the Add to Wishlist modal immediately (no waiting for ownership check)
+            hideLoadingOverlay();
+            await openAddToWishlistModal(albumData, currentArtist, data.tracks, albumType);
+
+            // Always lazy-load track ownership + metadata (non-blocking)
+            lazyLoadTrackOwnership(currentArtist.name, data.tracks, card, albumData.name);
+
+        } catch (error) {
+            hideLoadingOverlay();
+            console.error('❌ Error handling release click:', error);
+            showToast(`Error opening wishlist modal: ${error.message}`, 'error');
+        }
+    });
+
+    return card;
+}
+
+/**
+ * Helper function to get artist image from the current artist detail page
+ */
+function getArtistImageFromPage() {
+    try {
+        // Try to get from artist detail image element
+        const artistDetailImage = document.getElementById('artist-detail-image');
+        if (artistDetailImage && artistDetailImage.src && artistDetailImage.src !== window.location.href) {
+            return artistDetailImage.src;
+        }
+
+        // Try to get from artist hero image
+        const artistImage = document.getElementById('artist-image');
+        if (artistImage) {
+            const bgImage = window.getComputedStyle(artistImage).backgroundImage;
+            if (bgImage && bgImage !== 'none') {
+                // Extract URL from CSS background-image
+                const urlMatch = bgImage.match(/url\(["']?(.*?)["']?\)/);
+                if (urlMatch && urlMatch[1]) {
+                    return urlMatch[1];
+                }
+            }
+        }
+
+        return null;
+    } catch (error) {
+        console.warn('Error getting artist image from page:', error);
+        return null;
+    }
+}
+
+// ================================================================================================
+// LIBRARY COMPLETION STREAMING - Two-phase lazy-load pattern
+// ================================================================================================
+
+async function checkLibraryCompletion(artistName, discography) {
+    // Abort any in-progress check
+    if (artistDetailPageState.completionController) {
+        artistDetailPageState.completionController.abort();
+    }
+    artistDetailPageState.completionController = new AbortController();
+
+    const payload = {
+        artist_name: artistName,
+        albums: discography.albums || [],
+        eps: discography.eps || [],
+        singles: discography.singles || [],
+        source: discography?.source || null
+    };
+
+    try {
+        const response = await fetch('/api/library/completion-stream', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload),
+            signal: artistDetailPageState.completionController.signal
+        });
+
+        if (!response.ok) {
+            console.error(`❌ Completion stream failed: ${response.status}`);
+            return;
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let ownedCounts = { albums: 0, eps: 0, singles: 0 };
+        let totalCounts = { albums: 0, eps: 0, singles: 0 };
+        const artistFormatSet = new Set();
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop(); // Keep incomplete line in buffer
+
+            for (const line of lines) {
+                if (!line.startsWith('data: ')) continue;
+                try {
+                    const eventData = JSON.parse(line.slice(6));
+                    if (eventData.type === 'completion') {
+                        updateLibraryReleaseCard(eventData);
+                        totalCounts[eventData.category]++;
+                        if (eventData.status !== 'missing' && eventData.status !== 'error') {
+                            ownedCounts[eventData.category]++;
+                            // Accumulate formats for artist-level summary
+                            if (eventData.formats) {
+                                eventData.formats.forEach(f => artistFormatSet.add(f));
+                            }
+                        }
+                        // Update stats incrementally
+                        updateCategoryStatsFromStream(
+                            eventData.category,
+                            ownedCounts[eventData.category],
+                            totalCounts[eventData.category] - ownedCounts[eventData.category]
+                        );
+                    } else if (eventData.type === 'complete') {
+                        console.log(`✅ Library completion stream done: ${eventData.processed_count} items`);
+                        // Final stats recalculation
+                        recalculateSummaryStats(artistFormatSet);
+                    }
+                } catch (parseError) {
+                    console.warn('Error parsing SSE event:', parseError, line);
+                }
+            }
+        }
+    } catch (error) {
+        if (error.name === 'AbortError') {
+            console.log('🛑 Library completion stream aborted (navigation)');
+        } else {
+            console.error('❌ Error in library completion stream:', error);
+        }
+    }
+}
+
+function updateLibraryReleaseCard(data) {
+    const releaseId = data.id || "";
+    const card = document.querySelector(`[data-release-id="${releaseId}"]`);
+    if (!card) return;
+
+    const isOwned = data.status !== 'missing' && data.status !== 'error';
+
+    // Update card class
+    card.classList.remove('checking', 'missing');
+    if (!isOwned) {
+        card.classList.add('missing');
+    }
+
+    // Use real numbers — no rounding or overrides
+    const isComplete = data.owned_tracks >= data.expected_tracks && data.owned_tracks > 0;
+    const effectiveMissing = data.expected_tracks - data.owned_tracks;
+
+    // Update the mutable release data on the card
+    if (card._releaseData) {
+        card._releaseData.owned = isOwned;
+        if (isOwned && data.expected_tracks > 0) {
+            card._releaseData.track_completion = {
+                owned_tracks: data.owned_tracks,
+                total_tracks: isComplete ? data.owned_tracks : data.expected_tracks,
+                percentage: isComplete ? 100 : data.completion_percentage,
+                missing_tracks: effectiveMissing
+            };
+        } else if (isOwned) {
+            card._releaseData.track_completion = {
+                owned_tracks: data.owned_tracks,
+                total_tracks: data.owned_tracks,
+                percentage: 100,
+                missing_tracks: 0
+            };
+        } else {
+            card._releaseData.track_completion = 0;
+        }
+    }
+
+    // Update completion text element in-place
+    const completionText = card.querySelector('.completion-text');
+    if (completionText) {
+        completionText.classList.remove('checking', 'complete', 'partial', 'missing');
+        if (isOwned) {
+            if (effectiveMissing <= 0) {
+                completionText.textContent = `Complete (${data.owned_tracks})`;
+                completionText.className = 'completion-text complete';
+            } else {
+                completionText.textContent = `${data.owned_tracks}/${data.expected_tracks} tracks`;
+                completionText.className = 'completion-text partial';
+                completionText.title = `Missing ${effectiveMissing} track${effectiveMissing !== 1 ? 's' : ''}`;
+            }
+        } else {
+            completionText.textContent = 'Missing';
+            completionText.className = 'completion-text missing';
+        }
+    }
+
+    // Update completion fill bar in-place
+    const completionFill = card.querySelector('.completion-fill');
+    if (completionFill) {
+        completionFill.classList.remove('checking', 'complete', 'partial', 'missing');
+        if (isOwned) {
+            const pct = isComplete ? 100 : (data.completion_percentage || 100);
+            completionFill.style.width = `${pct}%`;
+            completionFill.classList.add(effectiveMissing <= 0 ? 'complete' : 'partial');
+        } else {
+            completionFill.style.width = '0%';
+            completionFill.classList.add('missing');
+        }
+    }
+
+    // Display format tags on owned releases
+    if (isOwned && data.formats && data.formats.length > 0) {
+        // Store formats on release data for modal use
+        if (card._releaseData) {
+            card._releaseData.formats = data.formats;
+        }
+        // Remove any existing format tags
+        const existingFormats = card.querySelector('.release-formats');
+        if (existingFormats) existingFormats.remove();
+
+        const formatsDiv = document.createElement('div');
+        formatsDiv.className = 'release-formats';
+        formatsDiv.innerHTML = data.formats.map(f => `<span class="release-format-tag">${f}</span>`).join('');
+        card.appendChild(formatsDiv);
+    }
+
+    // Re-apply filters so newly resolved cards respect active filters
+    applyDiscographyFilters();
+}
+
+function updateCategoryStatsFromStream(category, ownedCount, missingCount) {
+    const total = ownedCount + missingCount;
+    const completion = total > 0 ? Math.round((ownedCount / total) * 100) : 100;
+
+    const statsElement = document.getElementById(`${category}-stats`);
+    if (statsElement) {
+        statsElement.textContent = `${ownedCount}/${total}`;
+    }
+
+    const fillElement = document.getElementById(`${category}-completion-fill`);
+    if (fillElement) {
+        fillElement.classList.remove('checking');
+        fillElement.style.width = `${completion}%`;
+    }
+}
+
+function recalculateSummaryStats(artistFormatSet) {
+    const disc = artistDetailPageState.currentDiscography;
+    if (!disc) return;
+
+    // Recalculate from the live card data
+    const categories = ['albums', 'eps', 'singles'];
+    for (const cat of categories) {
+        const grid = document.getElementById(`${cat}-grid`);
+        if (!grid) continue;
+        let owned = 0, missing = 0;
+        grid.querySelectorAll('.release-card').forEach(card => {
+            if (card._releaseData) {
+                if (card._releaseData.owned === true) owned++;
+                else if (card._releaseData.owned === false) missing++;
+            }
+        });
+        updateCategoryStatsFromStream(cat, owned, missing);
+    }
+
+    // Update summary stats (albums only, matches original behavior)
+    const albumGrid = document.getElementById('albums-grid');
+    if (albumGrid) {
+        let ownedAlbums = 0, missingAlbums = 0;
+        albumGrid.querySelectorAll('.release-card').forEach(card => {
+            if (card._releaseData) {
+                if (card._releaseData.owned === true) ownedAlbums++;
+                else if (card._releaseData.owned === false) missingAlbums++;
+            }
+        });
+        const total = ownedAlbums + missingAlbums;
+        const pct = total > 0 ? Math.round((ownedAlbums / total) * 100) : 0;
+
+        const ownedEl = document.getElementById("owned-albums-count");
+        if (ownedEl) ownedEl.textContent = ownedAlbums;
+        const missingEl = document.getElementById("missing-albums-count");
+        if (missingEl) missingEl.textContent = missingAlbums;
+        const completionEl = document.getElementById("completion-percentage");
+        if (completionEl) completionEl.textContent = `${pct}%`;
+    }
+
+    // Display artist-level format summary
+    if (artistFormatSet && artistFormatSet.size > 0) {
+        const heroInfo = document.querySelector('.artist-hero-section .artist-info');
+        if (heroInfo) {
+            // Remove any existing artist format tag
+            const existing = heroInfo.querySelector('.artist-formats');
+            if (existing) existing.remove();
+
+            const formatsDiv = document.createElement('div');
+            formatsDiv.className = 'artist-formats';
+            formatsDiv.innerHTML = [...artistFormatSet].sort()
+                .map(f => `<span class="artist-format-tag">${f}</span>`)
+                .join('');
+            // Insert after genres container
+            const genresContainer = heroInfo.querySelector('.artist-genres-container');
+            if (genresContainer && genresContainer.nextSibling) {
+                heroInfo.insertBefore(formatsDiv, genresContainer.nextSibling);
+            } else {
+                heroInfo.appendChild(formatsDiv);
+            }
+        }
+    }
+}
+
+// ===============================================
+// Discography Filter Functions
+// ===============================================
+
+function initializeDiscographyFilters() {
+    const container = document.getElementById('discography-filters');
+    if (!container) return;
+
+    container.addEventListener('click', (e) => {
+        const btn = e.target.closest('.discography-filter-btn');
+        if (!btn) return;
+
+        const filterType = btn.dataset.filter;
+        const value = btn.dataset.value;
+
+        if (filterType === 'category') {
+            // Multi-toggle: toggle this category on/off
+            btn.classList.toggle('active');
+            discographyFilterState.categories[value] = btn.classList.contains('active');
+        } else if (filterType === 'content') {
+            // Multi-toggle: toggle this content type on/off
+            btn.classList.toggle('active');
+            discographyFilterState.content[value] = btn.classList.contains('active');
+        } else if (filterType === 'ownership') {
+            // Single-select: deactivate siblings, activate this one
+            container.querySelectorAll('[data-filter="ownership"]').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            discographyFilterState.ownership = value;
+        }
+
+        applyDiscographyFilters();
+    });
+}
+
+function resetDiscographyFilters() {
+    discographyFilterState.categories = { albums: true, eps: true, singles: true };
+    discographyFilterState.content = { live: true, compilations: true, featured: true };
+    discographyFilterState.ownership = 'all';
+
+    // Reset button visual states
+    const container = document.getElementById('discography-filters');
+    if (!container) return;
+    container.querySelectorAll('.discography-filter-btn').forEach(btn => {
+        const filterType = btn.dataset.filter;
+        const value = btn.dataset.value;
+        if (filterType === 'ownership') {
+            btn.classList.toggle('active', value === 'all');
+        } else {
+            btn.classList.add('active');
+        }
+    });
+}
+
+function applyDiscographyFilters() {
+    const categories = ['albums', 'eps', 'singles'];
+
+    for (const cat of categories) {
+        const section = document.getElementById(`${cat}-section`);
+        if (!section) continue;
+
+        // Category toggle — hide entire section
+        if (!discographyFilterState.categories[cat]) {
+            section.style.display = 'none';
+            continue;
+        }
+        section.style.display = '';
+
+        // Filter individual cards within the section
+        const grid = document.getElementById(`${cat}-grid`);
+        if (!grid) continue;
+
+        let visibleOwned = 0;
+        let visibleMissing = 0;
+        let visibleCount = 0;
+
+        grid.querySelectorAll('.release-card').forEach(card => {
+            let hidden = false;
+
+            // Content filters
+            if (!discographyFilterState.content.live && card.getAttribute('data-is-live') === 'true') {
+                hidden = true;
+            }
+            if (!discographyFilterState.content.compilations && card.getAttribute('data-is-compilation') === 'true') {
+                hidden = true;
+            }
+            if (!discographyFilterState.content.featured && card.getAttribute('data-is-featured') === 'true') {
+                hidden = true;
+            }
+
+            // Ownership filter (only apply if card is not still checking)
+            if (!hidden && discographyFilterState.ownership !== 'all' && card._releaseData) {
+                const owned = card._releaseData.owned;
+                if (owned !== null) {  // Don't hide cards still being checked
+                    if (discographyFilterState.ownership === 'owned' && !owned) hidden = true;
+                    if (discographyFilterState.ownership === 'missing' && owned) hidden = true;
+                }
+            }
+
+            card.style.display = hidden ? 'none' : '';
+
+            // Count visible cards for stats
+            if (!hidden && card._releaseData) {
+                visibleCount++;
+                if (card._releaseData.owned === true) visibleOwned++;
+                else if (card._releaseData.owned === false) visibleMissing++;
+            }
+        });
+
+        // Update section stats to reflect filtered view
+        const ownedEl = document.getElementById(`${cat}-owned-count`);
+        const missingEl = document.getElementById(`${cat}-missing-count`);
+        if (ownedEl) ownedEl.textContent = `${visibleOwned} owned`;
+        if (missingEl) missingEl.textContent = `${visibleMissing} missing`;
+
+        // Hide section entirely if all cards are hidden
+        section.style.display = visibleCount === 0 ? 'none' : '';
+    }
+}
+
+// ==================== Download Discography Modal ====================
+
+async function openDiscographyModal() {
+    // Support both Artists search page and Library artist detail page
+    let artist = artistsPageState.selectedArtist;
+    let discography = artistsPageState.artistDiscography;
+    let completionCache = artistsPageState.cache.completionData;
+
+    // Fallback to Library page state if Artists page has no data for THIS artist
+    const libId = artistDetailPageState.currentArtistId;
+    const libName = artistDetailPageState.currentArtistName;
+    const isLibraryPage = libId && libName;
+    const artistsPageMatchesLibrary = artist && isLibraryPage && artist.name?.toLowerCase() === libName?.toLowerCase();
+
+    if (isLibraryPage && (!artist || !discography || !artistsPageMatchesLibrary)) {
+        // On library page — don't trust stale artistsPageState from a previous Artists page search
+        artist = { id: libId, name: libName, image_url: document.getElementById('artist-detail-image')?.src || '' };
+        discography = null;
+
+        let metadataArtistId = null;
+        try {
+            showToast('Loading discography...', 'info');
+
+            // Fetch the artist's metadata IDs from the DB (enhanced view may not be loaded)
+            let lookupId = libId;
+            try {
+                const idRes = await fetch(`/api/library/artist/${libId}/enhanced`);
+                const idData = await idRes.json();
+                if (idData.success && idData.artist) {
+                    const a = idData.artist;
+                    metadataArtistId = a.spotify_artist_id || a.itunes_artist_id || a.deezer_id || null;
+                    lookupId = metadataArtistId || libId;
+                }
+            } catch (e) {
+                console.debug('[Discography] Could not fetch artist IDs, using DB id');
+            }
+
+            const res = await fetch(`/api/artist/${encodeURIComponent(lookupId)}/discography?artist_name=${encodeURIComponent(libName)}`);
+            const data = await res.json();
+
+            if (!data.error) {
+                discography = { albums: data.albums || [], singles: data.singles || [] };
+                if (discography.albums.length > 0 || discography.singles.length > 0) {
+                    artistsPageState.artistDiscography = discography;
+                    // Use metadata source ID for the modal (needed for download API calls)
+                    if (metadataArtistId) artist.id = metadataArtistId;
+                    artistsPageState.selectedArtist = artist;
+                } else {
+                    discography = null;
+                }
+            }
+        } catch (e) {
+            console.error('Failed to load discography:', e);
+        }
+    }
+
+    if (!artist || !discography) {
+        showToast('No discography found. Try searching this artist on the Artists page instead.', 'error');
+        return;
+    }
+
+    const completionData = (completionCache || {})[artist.id] || {};
+    const allReleases = [
+        ...(discography.albums || []).map(a => ({ ...a, _type: 'album' })),
+        ...(discography.eps || []).map(a => ({ ...a, _type: 'ep' })),
+        ...(discography.singles || []).map(a => ({ ...a, _type: 'single' })),
+    ];
+
+    // Build modal
+    const overlay = document.createElement('div');
+    overlay.className = 'discog-modal-overlay';
+    overlay.id = 'discog-modal-overlay';
+
+    const artistImg = artist.image_url || '';
+
+    overlay.innerHTML = `
+        <div class="discog-modal">
+            <div class="discog-modal-hero" ${artistImg ? `style="background-image:url('${artistImg}')"` : ''}>
+                <div class="discog-modal-hero-overlay"></div>
+                <div class="discog-modal-hero-content">
+                    <h2 class="discog-modal-title">Download Discography</h2>
+                    <p class="discog-modal-artist">${_esc(artist.name)}</p>
+                </div>
+                <button class="discog-modal-close" onclick="closeDiscographyModal()">&times;</button>
+            </div>
+            <div class="discog-filter-bar">
+                <div class="discog-filters">
+                    <button class="discog-filter active" data-type="album" onclick="toggleDiscogFilter(this)">Albums</button>
+                    <button class="discog-filter active" data-type="ep" onclick="toggleDiscogFilter(this)">EPs</button>
+                    <button class="discog-filter active" data-type="single" onclick="toggleDiscogFilter(this)">Singles</button>
+                </div>
+                <div class="discog-select-actions">
+                    <button class="discog-select-btn" onclick="discogSelectAll(true)">Select All</button>
+                    <button class="discog-select-btn" onclick="discogSelectAll(false)">Deselect All</button>
+                </div>
+            </div>
+            <div class="discog-grid" id="discog-grid">
+                ${allReleases.map((r, i) => _renderDiscogCard(r, i, completionData)).join('')}
+            </div>
+            <div class="discog-progress" id="discog-progress" style="display:none;"></div>
+            <div class="discog-footer" id="discog-footer">
+                <div class="discog-footer-info" id="discog-footer-info"></div>
+                <div class="discog-footer-actions">
+                    <button class="discog-cancel-btn" onclick="closeDiscographyModal()">Cancel</button>
+                    <button class="discog-submit-btn" id="discog-submit-btn">
+                        <span class="discog-submit-icon">⬇</span>
+                        <span id="discog-submit-text">Add to Wishlist</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+    _updateDiscogFooterCount();
+
+    // Bind submit button (avoids onclick being intercepted by helper system)
+    document.getElementById('discog-submit-btn')?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startDiscographyDownload();
+    });
+}
+
+function _esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+
+function _renderDiscogCard(release, index, completionData) {
+    const comp = completionData?.albums?.find(c => c.id === release.id) || completionData?.singles?.find(c => c.id === release.id);
+    const status = comp?.status || 'unknown';
+    const isOwned = status === 'completed';
+    const isPartial = status === 'partial' || status === 'nearly_complete';
+    const year = release.release_date ? release.release_date.substring(0, 4) : '';
+    const tracks = release.total_tracks || 0;
+    const img = release.image_url || '';
+    const checked = !isOwned;
+    const statusClass = isOwned ? 'owned' : isPartial ? 'partial' : '';
+    const statusIcon = isOwned ? '✓' : isPartial ? '◐' : '';
+
+    return `
+        <label class="discog-card ${statusClass}" data-type="${release._type}" style="animation-delay:${index * 0.03}s">
+            <input type="checkbox" class="discog-card-cb" data-album-id="${release.id}" data-tracks="${tracks}" ${checked ? 'checked' : ''} onchange="_updateDiscogFooterCount()">
+            <div class="discog-card-art">
+                ${img ? `<img src="${img}" alt="" loading="lazy">` : '<div class="discog-card-art-placeholder">🎵</div>'}
+                ${statusIcon ? `<span class="discog-card-status">${statusIcon}</span>` : ''}
+            </div>
+            <div class="discog-card-info">
+                <div class="discog-card-title">${_esc(release.name)}</div>
+                <div class="discog-card-meta">${year}${year && tracks ? ' · ' : ''}${tracks ? tracks + ' tracks' : ''}</div>
+            </div>
+            <div class="discog-card-check"></div>
+        </label>
+    `;
+}
+
+function toggleDiscogFilter(btn) {
+    btn.classList.toggle('active');
+    const type = btn.dataset.type;
+    document.querySelectorAll(`.discog-card[data-type="${type}"]`).forEach(card => {
+        card.style.display = btn.classList.contains('active') ? '' : 'none';
+    });
+    _updateDiscogFooterCount();
+}
+
+function discogSelectAll(select) {
+    document.querySelectorAll('.discog-card-cb').forEach(cb => {
+        if (cb.closest('.discog-card').style.display !== 'none') {
+            cb.checked = select;
+        }
+    });
+    _updateDiscogFooterCount();
+}
+
+function _updateDiscogFooterCount() {
+    const checked = document.querySelectorAll('.discog-card-cb:checked');
+    let releases = 0, tracks = 0;
+    checked.forEach(cb => {
+        if (cb.closest('.discog-card').style.display !== 'none') {
+            releases++;
+            tracks += parseInt(cb.dataset.tracks) || 0;
+        }
+    });
+    const info = document.getElementById('discog-footer-info');
+    const btn = document.getElementById('discog-submit-text');
+    if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
+    if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
+    const submitBtn = document.getElementById('discog-submit-btn');
+    if (submitBtn) submitBtn.disabled = releases === 0;
+}
+
+async function startDiscographyDownload() {
+    let artist = artistsPageState.selectedArtist;
+    // Fallback to library page state
+    if (!artist && artistDetailPageState.currentArtistId) {
+        artist = { id: artistDetailPageState.currentArtistId, name: artistDetailPageState.currentArtistName || 'Unknown' };
+    }
+    if (!artist || !artist.id) {
+        showToast('No artist data available', 'error');
+        return;
+    }
+
+    const checked = document.querySelectorAll('.discog-card-cb:checked');
+    const albumEntries = [];
+    checked.forEach(cb => {
+        if (cb.closest('.discog-card').style.display !== 'none') {
+            albumEntries.push({
+                id: cb.dataset.albumId,
+                tracks: parseInt(cb.dataset.tracks) || 0
+            });
+        }
+    });
+    // Sort by track count descending — process Deluxe/expanded editions first
+    // so their tracks get added before standard editions (which then get deduped)
+    albumEntries.sort((a, b) => b.tracks - a.tracks);
+    const albumIds = albumEntries.map(e => e.id);
+
+    if (albumIds.length === 0) return;
+
+    // Switch to progress view
+    const grid = document.getElementById('discog-grid');
+    const progress = document.getElementById('discog-progress');
+    const footer = document.getElementById('discog-footer');
+    const filterBar = document.querySelector('.discog-filter-bar');
+
+    if (grid) grid.style.display = 'none';
+    if (filterBar) filterBar.style.display = 'none';
+    if (progress) {
+        progress.style.display = '';
+        progress.innerHTML = '';
+    }
+
+    // Build progress items
+    const albumMap = {};
+    checked.forEach(cb => {
+        if (cb.closest('.discog-card').style.display !== 'none') {
+            const card = cb.closest('.discog-card');
+            const id = cb.dataset.albumId;
+            const title = card.querySelector('.discog-card-title')?.textContent || '';
+            const img = card.querySelector('.discog-card-art img')?.src || '';
+            albumMap[id] = { title, img };
+
+            const item = document.createElement('div');
+            item.className = 'discog-progress-item';
+            item.id = `discog-prog-${id}`;
+            item.innerHTML = `
+                <div class="discog-prog-art">${img ? `<img src="${img}">` : '🎵'}</div>
+                <div class="discog-prog-info">
+                    <div class="discog-prog-title">${_esc(title)}</div>
+                    <div class="discog-prog-status">Waiting...</div>
+                </div>
+                <div class="discog-prog-icon"><div class="discog-spinner"></div></div>
+            `;
+            progress.appendChild(item);
+        }
+    });
+
+    // Update footer
+    const submitBtn = document.getElementById('discog-submit-btn');
+    if (submitBtn) submitBtn.style.display = 'none';
+    if (footer) {
+        const info = document.getElementById('discog-footer-info');
+        if (info) info.textContent = 'Processing... this may take a moment';
+    }
+
+    // Mark all items as active
+    document.querySelectorAll('.discog-progress-item').forEach(item => item.classList.add('active'));
+
+    try {
+        const response = await fetch(`/api/artist/${artist.id}/download-discography`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ album_ids: albumIds, artist_name: artist.name })
+        });
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop(); // Keep incomplete line in buffer
+
+            for (const line of lines) {
+                if (!line.trim()) continue;
+                try {
+                    const data = JSON.parse(line);
+
+                    if (data.status === 'complete') {
+                        _handleDiscogProgress({ type: 'complete', total_added: data.total_added, total_skipped: data.total_skipped });
+                    } else {
+                        // Per-album update
+                        const item = document.getElementById(`discog-prog-${data.album_id}`);
+                        if (!item) continue;
+
+                        const statusEl = item.querySelector('.discog-prog-status');
+                        const iconEl = item.querySelector('.discog-prog-icon');
+                        item.classList.remove('active');
+
+                        if (data.status === 'done') {
+                            const parts = [];
+                            if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
+                            if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
+                            statusEl.textContent = parts.join(', ') || 'No new tracks';
+                            iconEl.innerHTML = data.tracks_added > 0 ? '<span class="discog-check">✓</span>' : '<span class="discog-skip">—</span>';
+                            item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
+                        } else if (data.status === 'error') {
+                            statusEl.textContent = data.message || 'Error';
+                            iconEl.innerHTML = '<span class="discog-error">✗</span>';
+                            item.classList.add('error');
+                        }
+                    }
+                } catch (e) { /* skip malformed line */ }
+            }
+        }
+    } catch (err) {
+        showToast(`Discography download failed: ${err.message}`, 'error');
+    }
+}
+
+function _handleDiscogProgress(data) {
+    if (data.type === 'album') {
+        const item = document.getElementById(`discog-prog-${data.album_id}`);
+        if (!item) return;
+
+        const statusEl = item.querySelector('.discog-prog-status');
+        const iconEl = item.querySelector('.discog-prog-icon');
+
+        if (data.status === 'processing') {
+            statusEl.textContent = `Processing ${data.tracks_total} tracks...`;
+            item.classList.add('active');
+        } else if (data.status === 'done') {
+            const parts = [];
+            if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
+            if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
+            statusEl.textContent = parts.join(', ') || 'No new tracks';
+            iconEl.innerHTML = data.tracks_added > 0 ? '<span class="discog-check">✓</span>' : '<span class="discog-skip">—</span>';
+            item.classList.remove('active');
+            item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
+        } else if (data.status === 'error') {
+            statusEl.textContent = data.message || 'Error';
+            iconEl.innerHTML = '<span class="discog-error">✗</span>';
+            item.classList.add('error');
+        }
+    } else if (data.type === 'complete') {
+        const info = document.getElementById('discog-footer-info');
+        if (info) info.textContent = `Done — ${data.total_added} tracks added, ${data.total_skipped} skipped`;
+
+        // Show "Process Wishlist" button
+        const footer = document.querySelector('.discog-footer-actions');
+        if (footer && data.total_added > 0) {
+            footer.innerHTML = `
+                <button class="discog-cancel-btn" onclick="closeDiscographyModal()">Close</button>
+                <button class="discog-submit-btn" onclick="closeDiscographyModal();fetch('/api/wishlist/process',{method:'POST'});showToast('Wishlist processing started','success')">
+                    <span class="discog-submit-icon">🚀</span>
+                    <span>Process Wishlist Now</span>
+                </button>
+            `;
+        } else if (footer) {
+            footer.innerHTML = '<button class="discog-cancel-btn" onclick="closeDiscographyModal()">Close</button>';
+        }
+    }
+}
+
+function closeDiscographyModal() {
+    const overlay = document.getElementById('discog-modal-overlay');
+    if (overlay) {
+        overlay.classList.remove('visible');
+        setTimeout(() => overlay.remove(), 300);
+    }
+}
+
+// ==================== Enhanced Library Management View ====================
+
+function isEnhancedAdmin() {
+    return currentProfile && currentProfile.is_admin;
+}
+
+function toggleEnhancedView(enabled) {
+
+    const standardSections = document.querySelector('.discography-sections');
+    const enhancedContainer = document.getElementById('enhanced-view-container');
+    const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
+
+    if (!standardSections || !enhancedContainer) return;
+
+    artistDetailPageState.enhancedView = enabled;
+
+    // Update toggle button states
+    toggleBtns.forEach(btn => {
+        const view = btn.getAttribute('data-view');
+        btn.classList.toggle('active', (view === 'enhanced') === enabled);
+    });
+
+    // Hide/show standard filter groups (not relevant in enhanced view)
+    const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
+    filterGroups.forEach(group => {
+        const label = group.querySelector('.filter-label');
+        if (label && label.textContent !== 'View') {
+            group.style.display = enabled ? 'none' : '';
+        }
+    });
+    const dividers = document.querySelectorAll('#discography-filters .filter-divider');
+    dividers.forEach((d, i) => {
+        if (i < dividers.length - 1) d.style.display = enabled ? 'none' : '';
+    });
+
+    if (enabled) {
+        standardSections.classList.add('hidden');
+        enhancedContainer.classList.remove('hidden');
+
+        if (!artistDetailPageState.enhancedData) {
+            loadEnhancedViewData(artistDetailPageState.currentArtistId);
+        } else {
+            renderEnhancedView();
+        }
+    } else {
+        standardSections.classList.remove('hidden');
+        enhancedContainer.classList.add('hidden');
+        const bulkBar = document.getElementById('enhanced-bulk-bar');
+        if (bulkBar) bulkBar.classList.remove('visible');
+    }
+}
+
+async function loadEnhancedViewData(artistId) {
+    const container = document.getElementById('enhanced-view-container');
+    if (!container) return;
+
+    container.innerHTML = '<div class="enhanced-loading">Loading library data...</div>';
+
+    try {
+        const response = await fetch(`/api/library/artist/${artistId}/enhanced`);
+        const data = await response.json();
+
+        if (!data.success) throw new Error(data.error || 'Failed to load enhanced data');
+
+        artistDetailPageState.enhancedData = data;
+        artistDetailPageState.expandedAlbums = new Set();
+        artistDetailPageState.selectedTracks = new Set();
+        artistDetailPageState.enhancedTrackSort = {};
+        artistDetailPageState.serverType = data.server_type || null;
+        _tagPreviewServerType = data.server_type || null;
+        _rebuildAlbumMap();
+        renderEnhancedView();
+
+    } catch (error) {
+        console.error('Error loading enhanced view data:', error);
+        container.innerHTML = `<div class="enhanced-loading" style="color: #ff6b6b;">Failed to load: ${escapeHtml(error.message)}</div>`;
+    }
+}
+
+function renderEnhancedView() {
+    const container = document.getElementById('enhanced-view-container');
+    const data = artistDetailPageState.enhancedData;
+    if (!container || !data) return;
+
+    container.innerHTML = '';
+
+    // Artist metadata card (visual + editable)
+    container.appendChild(renderArtistMetaPanel(data.artist));
+
+    // Library stats summary bar
+    container.appendChild(renderEnhancedStatsBar(data));
+
+    // Group albums by type
+    const grouped = { album: [], ep: [], single: [] };
+    (data.albums || []).forEach(album => {
+        const type = (album.record_type || 'album').toLowerCase();
+        if (grouped[type]) grouped[type].push(album);
+        else grouped[type] = [album];
+    });
+
+    const sectionLabels = { album: 'Albums', ep: 'EPs', single: 'Singles' };
+    for (const [type, label] of Object.entries(sectionLabels)) {
+        const albums = grouped[type] || [];
+        if (albums.length === 0) continue;
+        container.appendChild(renderEnhancedSection(type, label, albums));
+    }
+}
+
+function renderEnhancedStatsBar(data) {
+    const bar = document.createElement('div');
+    bar.className = 'enhanced-stats-bar';
+
+    const albums = data.albums || [];
+    const totalAlbums = albums.filter(a => (a.record_type || 'album') === 'album').length;
+    const totalEps = albums.filter(a => a.record_type === 'ep').length;
+    const totalSingles = albums.filter(a => a.record_type === 'single').length;
+    const totalTracks = albums.reduce((s, a) => s + (a.tracks ? a.tracks.length : 0), 0);
+
+    // Calculate total duration
+    let totalDurationMs = 0;
+    albums.forEach(a => (a.tracks || []).forEach(t => { totalDurationMs += (t.duration || 0); }));
+    const totalHours = Math.floor(totalDurationMs / 3600000);
+    const totalMins = Math.floor((totalDurationMs % 3600000) / 60000);
+
+    // Calculate format breakdown
+    const formatCounts = {};
+    albums.forEach(a => (a.tracks || []).forEach(t => {
+        const fmt = extractFormat(t.file_path);
+        if (fmt !== '-') formatCounts[fmt] = (formatCounts[fmt] || 0) + 1;
+    }));
+
+    const statsItems = [
+        { value: totalAlbums, label: 'Albums', icon: '&#128191;' },
+        { value: totalEps, label: 'EPs', icon: '&#128192;' },
+        { value: totalSingles, label: 'Singles', icon: '&#9834;' },
+        { value: totalTracks, label: 'Tracks', icon: '&#127925;' },
+        { value: totalHours > 0 ? `${totalHours}h ${totalMins}m` : `${totalMins}m`, label: 'Duration', icon: '&#9202;' },
+    ];
+
+    let statsHtml = statsItems.map(s =>
+        `<div class="enhanced-stat-item">
+            <span class="enhanced-stat-value">${s.value}</span>
+            <span class="enhanced-stat-label">${s.label}</span>
+        </div>`
+    ).join('');
+
+    // Format badges
+    const formatBadges = Object.entries(formatCounts)
+        .sort((a, b) => b[1] - a[1])
+        .map(([fmt, count]) => {
+            const cls = fmt === 'FLAC' ? 'flac' : (fmt === 'MP3' ? 'mp3' : 'other');
+            return `<span class="enhanced-format-badge ${cls}">${fmt} (${count})</span>`;
+        }).join('');
+
+    bar.innerHTML = `
+        <div class="enhanced-stats-items">${statsHtml}</div>
+        <div class="enhanced-stats-formats">${formatBadges}</div>
+    `;
+
+    return bar;
+}
+
+function renderArtistMetaPanel(artist) {
+    const panel = document.createElement('div');
+    panel.className = 'enhanced-artist-meta';
+    panel.id = 'enhanced-artist-meta';
+
+    // Build using DOM to avoid innerHTML escaping issues
+    const header = document.createElement('div');
+    header.className = 'enhanced-artist-meta-header';
+
+    // Left side: artist image + name display
+    const headerLeft = document.createElement('div');
+    headerLeft.className = 'enhanced-artist-meta-header-left';
+
+    if (artist.thumb_url) {
+        const img = document.createElement('img');
+        img.className = 'enhanced-artist-meta-image';
+        img.src = artist.thumb_url;
+        img.alt = artist.name || '';
+        img.onerror = function () { this.style.display = 'none'; };
+        headerLeft.appendChild(img);
+    }
+
+    const headerInfo = document.createElement('div');
+    headerInfo.className = 'enhanced-artist-meta-info';
+    const artistTitle = document.createElement('div');
+    artistTitle.className = 'enhanced-artist-meta-name';
+    artistTitle.textContent = artist.name || 'Unknown Artist';
+    headerInfo.appendChild(artistTitle);
+
+    // ID badges row (clickable links)
+    const idBadges = document.createElement('div');
+    idBadges.className = 'enhanced-artist-id-badges';
+    const idSources = [
+        { key: 'spotify_artist_id', label: 'Spotify', svc: 'spotify' },
+        { key: 'musicbrainz_id', label: 'MusicBrainz', svc: 'musicbrainz' },
+        { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
+        { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
+        { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
+        { key: 'itunes_artist_id', label: 'iTunes', svc: 'itunes' },
+        { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
+        { key: 'genius_url', label: 'Genius', svc: 'genius' },
+        { key: 'tidal_id', label: 'Tidal', svc: 'tidal' },
+        { key: 'qobuz_id', label: 'Qobuz', svc: 'qobuz' },
+    ];
+    idSources.forEach(src => {
+        if (artist[src.key]) {
+            idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label));
+        }
+    });
+    headerInfo.appendChild(idBadges);
+    headerLeft.appendChild(headerInfo);
+    header.appendChild(headerLeft);
+
+    // Right side: admin actions
+    const headerRight = document.createElement('div');
+    headerRight.className = 'enhanced-artist-meta-actions';
+
+    if (isEnhancedAdmin()) {
+        const editToggle = document.createElement('button');
+        editToggle.className = 'enhanced-meta-edit-toggle';
+        editToggle.textContent = 'Edit Metadata';
+        editToggle.onclick = () => {
+            const form = document.getElementById('enhanced-artist-meta-form');
+            if (form) {
+                const isVisible = !form.classList.contains('hidden');
+                form.classList.toggle('hidden');
+                editToggle.textContent = isVisible ? 'Edit Metadata' : 'Hide Editor';
+                editToggle.classList.toggle('active', !isVisible);
+            }
+        };
+        headerRight.appendChild(editToggle);
+
+        // Enrich dropdown button
+        const enrichWrap = document.createElement('div');
+        enrichWrap.className = 'enhanced-enrich-wrap';
+        const enrichBtn = document.createElement('button');
+        enrichBtn.className = 'enhanced-enrich-btn';
+        enrichBtn.textContent = 'Enrich ▾';
+        enrichBtn.onclick = (e) => {
+            e.stopPropagation();
+            enrichMenu.classList.toggle('visible');
+        };
+        enrichWrap.appendChild(enrichBtn);
+
+        const enrichMenu = document.createElement('div');
+        enrichMenu.className = 'enhanced-enrich-menu';
+        const services = [
+            { id: 'spotify', label: 'Spotify', icon: '🟢' },
+            { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
+            { id: 'deezer', label: 'Deezer', icon: '🟣' },
+            { id: 'discogs', label: 'Discogs', icon: '🟤' },
+            { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
+            { id: 'itunes', label: 'iTunes', icon: '🔴' },
+            { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
+            { id: 'genius', label: 'Genius', icon: '🟡' },
+            { id: 'tidal', label: 'Tidal', icon: '⬛' },
+            { id: 'qobuz', label: 'Qobuz', icon: '🔷' },
+        ];
+        services.forEach(svc => {
+            const item = document.createElement('div');
+            item.className = 'enhanced-enrich-menu-item';
+            item.textContent = `${svc.icon} ${svc.label}`;
+            item.onclick = (e) => {
+                e.stopPropagation();
+                enrichMenu.classList.remove('visible');
+                runEnrichment('artist', artist.id, svc.id, artist.name, '', artist.id);
+            };
+            enrichMenu.appendChild(item);
+        });
+        enrichWrap.appendChild(enrichMenu);
+        headerRight.appendChild(enrichWrap);
+    }
+
+    // Sync / Validate button
+    const syncBtn = document.createElement('button');
+    syncBtn.className = 'enhanced-sync-btn';
+    syncBtn.innerHTML = '&#x1f504; Sync';
+    syncBtn.title = 'Validate files — removes stale entries for tracks no longer on disk';
+    syncBtn.onclick = async (e) => {
+        e.stopPropagation();
+        syncBtn.disabled = true;
+        syncBtn.textContent = 'Syncing...';
+        try {
+            const res = await fetch(`/api/library/artist/${artist.id}/sync`, { method: 'POST' });
+            const data = await res.json();
+            if (data.success) {
+                const parts = [];
+                if (data.new_albums > 0) parts.push(`+${data.new_albums} albums`);
+                if (data.new_tracks > 0) parts.push(`+${data.new_tracks} tracks`);
+                if (data.stale_removed > 0) parts.push(`${data.stale_removed} stale removed`);
+                if (data.empty_albums_removed > 0) parts.push(`${data.empty_albums_removed} empty albums cleaned`);
+                if (data.name_updated) parts.push('name updated');
+                if (parts.length === 0) parts.push('Already in sync');
+                showToast(`${data.artist_name}: ${parts.join(', ')}`, 'success');
+                // Refresh enhanced view if anything changed
+                if (data.stale_removed > 0 || data.empty_albums_removed > 0) {
+                    loadEnhancedViewData(artist.id);
+                }
+            } else {
+                showToast(`Sync failed: ${data.error}`, 'error');
+            }
+        } catch (err) {
+            showToast(`Sync failed: ${err.message}`, 'error');
+        }
+        syncBtn.disabled = false;
+        syncBtn.innerHTML = '&#x1f504; Sync';
+    };
+    headerRight.appendChild(syncBtn);
+
+    const reorgAllBtn = document.createElement('button');
+    reorgAllBtn.className = 'enhanced-sync-btn';
+    reorgAllBtn.innerHTML = '&#128193; Reorganize All';
+    reorgAllBtn.title = 'Reorganize all albums for this artist using path template';
+    reorgAllBtn.onclick = () => _showReorganizeAllModal();
+    headerRight.appendChild(reorgAllBtn);
+
+    header.appendChild(headerRight);
+
+    panel.appendChild(header);
+
+    // Match status row (clickable to rematch)
+    const statusRow = document.createElement('div');
+    statusRow.className = 'enhanced-match-status-row';
+    const statusServices = [
+        { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
+        { key: 'musicbrainz_match_status', label: 'MusicBrainz', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
+        { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
+        { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
+        { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
+        { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
+        { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
+        { key: 'genius_match_status', label: 'Genius', attempted: 'genius_last_attempted', svc: 'genius' },
+        { key: 'tidal_match_status', label: 'Tidal', attempted: 'tidal_last_attempted', svc: 'tidal' },
+        { key: 'qobuz_match_status', label: 'Qobuz', attempted: 'qobuz_last_attempted', svc: 'qobuz' },
+    ];
+    statusServices.forEach(s => {
+        const status = artist[s.key];
+        const attempted = artist[s.attempted];
+        const chip = document.createElement('span');
+        chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
+        chip.textContent = `${s.label}: ${status || 'pending'}`;
+        const tipParts = [];
+        if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
+        tipParts.push('Click to rematch');
+        chip.title = tipParts.join(' · ');
+        chip.onclick = () => openManualMatchModal('artist', artist.id, s.svc, artist.name, artist.id);
+        statusRow.appendChild(chip);
+    });
+    panel.appendChild(statusRow);
+
+    // Collapsible edit form (hidden by default)
+    const form = document.createElement('div');
+    form.className = 'enhanced-artist-meta-form hidden';
+    form.id = 'enhanced-artist-meta-form';
+
+    const editableFields = [
+        { key: 'name', label: 'Artist Name', type: 'text' },
+        { key: 'genres', label: 'Genres (comma separated)', type: 'text', isArray: true },
+        { key: 'label', label: 'Label', type: 'text' },
+        { key: 'style', label: 'Style', type: 'text' },
+        { key: 'mood', label: 'Mood', type: 'text' },
+        { key: 'summary', label: 'Summary / Bio', type: 'textarea', wide: true },
+    ];
+
+    const grid = document.createElement('div');
+    grid.className = 'enhanced-artist-meta-grid';
+
+    editableFields.forEach(f => {
+        const fieldDiv = document.createElement('div');
+        fieldDiv.className = 'enhanced-meta-field' + (f.wide ? ' wide' : '');
+
+        const label = document.createElement('label');
+        label.className = 'enhanced-meta-field-label';
+        label.textContent = f.label;
+        fieldDiv.appendChild(label);
+
+        const val = f.isArray
+            ? (Array.isArray(artist[f.key]) ? artist[f.key].join(', ') : (artist[f.key] || ''))
+            : (artist[f.key] || '');
+
+        if (f.type === 'textarea') {
+            const ta = document.createElement('textarea');
+            ta.className = 'enhanced-meta-field-input';
+            ta.dataset.field = f.key;
+            ta.placeholder = f.label + '...';
+            ta.textContent = val;
+            fieldDiv.appendChild(ta);
+        } else {
+            const inp = document.createElement('input');
+            inp.type = 'text';
+            inp.className = 'enhanced-meta-field-input';
+            inp.dataset.field = f.key;
+            inp.value = val;
+            inp.placeholder = f.label + '...';
+            fieldDiv.appendChild(inp);
+        }
+
+        grid.appendChild(fieldDiv);
+    });
+
+    form.appendChild(grid);
+
+    // Save/revert buttons
+    const formActions = document.createElement('div');
+    formActions.className = 'enhanced-artist-form-actions';
+    const revertBtn = document.createElement('button');
+    revertBtn.className = 'enhanced-meta-cancel-btn';
+    revertBtn.textContent = 'Revert';
+    revertBtn.onclick = () => revertArtistMetadata();
+    const saveBtn = document.createElement('button');
+    saveBtn.className = 'enhanced-meta-save-btn';
+    saveBtn.textContent = 'Save Changes';
+    saveBtn.onclick = () => saveArtistMetadata();
+    formActions.appendChild(revertBtn);
+    formActions.appendChild(saveBtn);
+    form.appendChild(formActions);
+
+    panel.appendChild(form);
+
+    return panel;
+}
+
+function renderEnhancedSection(type, label, albums) {
+    const section = document.createElement('div');
+    section.className = 'enhanced-section';
+
+    const totalTracks = albums.reduce((sum, a) => sum + (a.tracks ? a.tracks.length : 0), 0);
+
+    const sectionHeader = document.createElement('div');
+    sectionHeader.className = 'enhanced-section-header';
+    sectionHeader.innerHTML = `
+        <span class="enhanced-section-title">${label}</span>
+        <span class="enhanced-section-count">${albums.length} release${albums.length !== 1 ? 's' : ''} &middot; ${totalTracks} tracks</span>
+    `;
+    section.appendChild(sectionHeader);
+
+    const grid = document.createElement('div');
+    grid.className = 'enhanced-album-grid';
+
+    albums.forEach(album => {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'enhanced-album-wrapper';
+        wrapper.id = `enhanced-album-wrapper-${album.id}`;
+        const isExpanded = artistDetailPageState.expandedAlbums.has(album.id);
+        if (isExpanded) wrapper.classList.add('expanded');
+
+        wrapper.appendChild(renderAlbumRow(album, type));
+
+        const tracksPanel = document.createElement('div');
+        tracksPanel.className = 'enhanced-tracks-panel';
+        tracksPanel.id = `enhanced-tracks-panel-${album.id}`;
+        if (isExpanded) tracksPanel.classList.add('visible');
+        const inner = document.createElement('div');
+        inner.className = 'enhanced-tracks-panel-inner';
+        if (isExpanded) {
+            inner.dataset.rendered = 'true';
+            inner.appendChild(renderExpandedAlbumHeader(album));
+            inner.appendChild(renderAlbumMetaRow(album));
+            inner.appendChild(renderTrackTable(album));
+        }
+        tracksPanel.appendChild(inner);
+        wrapper.appendChild(tracksPanel);
+
+        grid.appendChild(wrapper);
+    });
+    section.appendChild(grid);
+
+    return section;
+}
+
+function renderAlbumRow(album, type) {
+    const row = document.createElement('div');
+    row.className = 'enhanced-album-row';
+    row.id = `enhanced-album-row-${album.id}`;
+
+    if (artistDetailPageState.expandedAlbums.has(album.id)) row.classList.add('expanded');
+
+    const trackCount = album.tracks ? album.tracks.length : 0;
+    const typeClass = (type || 'album').toLowerCase();
+
+    // Total duration for this album
+    let albumDurMs = 0;
+    (album.tracks || []).forEach(t => { albumDurMs += (t.duration || 0); });
+    const albumDur = formatDurationMs(albumDurMs);
+
+    // Format breakdown for this album
+    const fmts = {};
+    (album.tracks || []).forEach(t => {
+        const f = extractFormat(t.file_path);
+        if (f !== '-') fmts[f] = (fmts[f] || 0) + 1;
+    });
+    const primaryFormat = Object.keys(fmts).sort((a, b) => fmts[b] - fmts[a])[0] || '';
+
+    // Build with DOM for safety
+    const expandIcon = document.createElement('span');
+    expandIcon.className = 'enhanced-album-expand-icon';
+    expandIcon.innerHTML = '&#9654;';
+    row.appendChild(expandIcon);
+
+    // Album art - larger, prominent
+    const artWrap = document.createElement('div');
+    artWrap.className = 'enhanced-album-art-wrap';
+    if (album.thumb_url) {
+        const img = document.createElement('img');
+        img.className = 'enhanced-album-thumb';
+        img.src = album.thumb_url;
+        img.alt = '';
+        img.loading = 'lazy';
+        img.onerror = function () {
+            const fallback = document.createElement('div');
+            fallback.className = 'enhanced-album-thumb-fallback';
+            fallback.innerHTML = '&#127925;';
+            this.replaceWith(fallback);
+        };
+        artWrap.appendChild(img);
+    } else {
+        const fallback = document.createElement('div');
+        fallback.className = 'enhanced-album-thumb-fallback';
+        fallback.innerHTML = '&#127925;';
+        artWrap.appendChild(fallback);
+    }
+    row.appendChild(artWrap);
+
+    // Info block (title + meta line)
+    const infoBlock = document.createElement('div');
+    infoBlock.className = 'enhanced-album-info-block';
+
+    const titleEl = document.createElement('span');
+    titleEl.className = 'enhanced-album-title';
+    titleEl.textContent = album.title || 'Unknown';
+    titleEl.title = album.title || '';
+    infoBlock.appendChild(titleEl);
+
+    const metaLine = document.createElement('span');
+    metaLine.className = 'enhanced-album-meta-line';
+    const metaParts = [];
+    if (album.year) metaParts.push(String(album.year));
+    metaParts.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
+    if (albumDur !== '-') metaParts.push(albumDur);
+    if (album.label) metaParts.push(album.label);
+    metaLine.textContent = metaParts.join(' \u00B7 ');
+    infoBlock.appendChild(metaLine);
+
+    row.appendChild(infoBlock);
+
+    // Type badge
+    const badge = document.createElement('span');
+    badge.className = `enhanced-album-type-badge ${typeClass}`;
+    badge.textContent = type;
+    row.appendChild(badge);
+
+    // Format badge inline
+    if (primaryFormat) {
+        const fmtBadge = document.createElement('span');
+        const fmtClass = primaryFormat === 'FLAC' ? 'flac' : (primaryFormat === 'MP3' ? 'mp3' : 'other');
+        fmtBadge.className = `enhanced-format-badge ${fmtClass}`;
+        fmtBadge.textContent = primaryFormat;
+        row.appendChild(fmtBadge);
+    }
+
+    row.addEventListener('click', () => toggleAlbumExpand(album.id));
+
+    return row;
+}
+
+function toggleAlbumExpand(albumId) {
+    const row = document.getElementById(`enhanced-album-row-${albumId}`);
+    const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+    const wrapper = document.getElementById(`enhanced-album-wrapper-${albumId}`);
+    if (!row || !panel) return;
+
+    const isExpanded = artistDetailPageState.expandedAlbums.has(albumId);
+
+    if (isExpanded) {
+        artistDetailPageState.expandedAlbums.delete(albumId);
+        row.classList.remove('expanded');
+        panel.classList.remove('visible');
+        if (wrapper) wrapper.classList.remove('expanded');
+    } else {
+        artistDetailPageState.expandedAlbums.add(albumId);
+        row.classList.add('expanded');
+        panel.classList.add('visible');
+        if (wrapper) wrapper.classList.add('expanded');
+
+        // Lazy render
+        const inner = panel.querySelector('.enhanced-tracks-panel-inner');
+        if (inner && !inner.dataset.rendered) {
+            const album = findEnhancedAlbum(albumId);
+            if (album) {
+                inner.innerHTML = '';
+                inner.appendChild(renderExpandedAlbumHeader(album));
+                inner.appendChild(renderAlbumMetaRow(album));
+                inner.appendChild(renderTrackTable(album));
+                inner.dataset.rendered = 'true';
+            }
+        }
+    }
+}
+
+function findEnhancedAlbum(albumId) {
+    // Use cached map for O(1) lookups instead of O(n) array scan
+    if (artistDetailPageState._albumMap) {
+        return artistDetailPageState._albumMap.get(String(albumId)) || null;
+    }
+    const data = artistDetailPageState.enhancedData;
+    if (!data || !data.albums) return null;
+    return data.albums.find(a => String(a.id) === String(albumId));
+}
+
+function _rebuildAlbumMap() {
+    const data = artistDetailPageState.enhancedData;
+    if (!data || !data.albums) { artistDetailPageState._albumMap = null; return; }
+    const map = new Map();
+    data.albums.forEach(a => map.set(String(a.id), a));
+    artistDetailPageState._albumMap = map;
+}
+
+function renderExpandedAlbumHeader(album) {
+    const header = document.createElement('div');
+    header.className = 'enhanced-expanded-header';
+
+    // Large album art
+    if (album.thumb_url) {
+        const img = document.createElement('img');
+        img.className = 'enhanced-expanded-art';
+        img.src = album.thumb_url;
+        img.alt = album.title || '';
+        img.onerror = function () { this.style.display = 'none'; };
+        header.appendChild(img);
+    }
+
+    const info = document.createElement('div');
+    info.className = 'enhanced-expanded-info';
+
+    const title = document.createElement('div');
+    title.className = 'enhanced-expanded-title';
+    title.textContent = album.title || 'Unknown';
+    info.appendChild(title);
+
+    const meta = document.createElement('div');
+    meta.className = 'enhanced-expanded-meta';
+
+    const details = [];
+    if (album.year) details.push(String(album.year));
+    const trackCount = album.tracks ? album.tracks.length : 0;
+    details.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
+    let durMs = 0;
+    (album.tracks || []).forEach(t => { durMs += (t.duration || 0); });
+    if (durMs > 0) details.push(formatDurationMs(durMs));
+    if (album.label) details.push(album.label);
+    if (album.record_type) details.push(album.record_type.toUpperCase());
+
+    meta.textContent = details.join(' \u00B7 ');
+    info.appendChild(meta);
+
+    // Genre tags
+    const genres = Array.isArray(album.genres) ? album.genres : [];
+    if (genres.length > 0) {
+        const genreRow = document.createElement('div');
+        genreRow.className = 'enhanced-expanded-genres';
+        genres.forEach(g => {
+            const tag = document.createElement('span');
+            tag.className = 'enhanced-genre-tag';
+            tag.textContent = g;
+            genreRow.appendChild(tag);
+        });
+        info.appendChild(genreRow);
+    }
+
+    // External ID badges (clickable links)
+    const ids = document.createElement('div');
+    ids.className = 'enhanced-expanded-ids';
+    const idFields = [
+        { key: 'spotify_album_id', label: 'Spotify', svc: 'spotify' },
+        { key: 'musicbrainz_release_id', label: 'MusicBrainz', svc: 'musicbrainz' },
+        { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
+        { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
+        { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
+        { key: 'itunes_album_id', label: 'iTunes', svc: 'itunes' },
+        { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
+    ];
+    idFields.forEach(f => {
+        if (album[f.key]) {
+            ids.appendChild(makeClickableBadge(f.svc, 'album', album[f.key], f.label));
+        }
+    });
+    if (ids.children.length > 0) info.appendChild(ids);
+
+    // Resolve artist name for enrichment calls
+    const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+
+    // Match status chips (clickable to rematch)
+    const statusRow = document.createElement('div');
+    statusRow.className = 'enhanced-match-status-row compact';
+    const statusSvcs = [
+        { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
+        { key: 'musicbrainz_match_status', label: 'MB', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
+        { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
+        { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
+        { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
+        { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
+        { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
+    ];
+    statusSvcs.forEach(s => {
+        const status = album[s.key];
+        const attempted = album[s.attempted];
+        const chip = document.createElement('span');
+        chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
+        chip.textContent = `${s.label}: ${status || '—'}`;
+        const tipParts = [];
+        if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
+        tipParts.push('Click to rematch');
+        chip.title = tipParts.join(' · ');
+        chip.onclick = (e) => {
+            e.stopPropagation();
+            const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
+            openManualMatchModal('album', album.id, s.svc, album.title || '', aId);
+        };
+        statusRow.appendChild(chip);
+    });
+    info.appendChild(statusRow);
+
+    // Action buttons row
+    const enrichRow = document.createElement('div');
+    enrichRow.className = 'enhanced-expanded-actions';
+
+    if (isEnhancedAdmin()) {
+        const albumEnrichWrap = document.createElement('div');
+        albumEnrichWrap.className = 'enhanced-enrich-wrap';
+        const albumEnrichBtn = document.createElement('button');
+        albumEnrichBtn.className = 'enhanced-enrich-btn small';
+        albumEnrichBtn.textContent = 'Enrich Album ▾';
+        albumEnrichBtn.onclick = (e) => { e.stopPropagation(); albumEnrichMenu.classList.toggle('visible'); };
+        albumEnrichWrap.appendChild(albumEnrichBtn);
+        const albumEnrichMenu = document.createElement('div');
+        albumEnrichMenu.className = 'enhanced-enrich-menu';
+        [
+            { id: 'spotify', label: 'Spotify', icon: '🟢' },
+            { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
+            { id: 'deezer', label: 'Deezer', icon: '🟣' },
+            { id: 'discogs', label: 'Discogs', icon: '🟤' },
+            { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
+            { id: 'itunes', label: 'iTunes', icon: '🔴' },
+            { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
+            { id: 'genius', label: 'Genius', icon: '🟡' },
+        ].forEach(svc => {
+            const item = document.createElement('div');
+            item.className = 'enhanced-enrich-menu-item';
+            item.textContent = `${svc.icon} ${svc.label}`;
+            item.onclick = (e) => {
+                e.stopPropagation();
+                albumEnrichMenu.classList.remove('visible');
+                const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
+                runEnrichment('album', album.id, svc.id, album.title || '', artistName, aId);
+            };
+            albumEnrichMenu.appendChild(item);
+        });
+        albumEnrichWrap.appendChild(albumEnrichMenu);
+        enrichRow.appendChild(albumEnrichWrap);
+
+        const writeTagsBtn = document.createElement('button');
+        writeTagsBtn.className = 'enhanced-write-tags-album-btn';
+        writeTagsBtn.innerHTML = '&#9998; Write All Tags';
+        writeTagsBtn.title = 'Write DB metadata to file tags for all tracks in this album';
+        writeTagsBtn.onclick = (e) => { e.stopPropagation(); writeAlbumTags(album.id); };
+        enrichRow.appendChild(writeTagsBtn);
+
+        const rgAlbumBtn = document.createElement('button');
+        rgAlbumBtn.className = 'enhanced-rg-album-btn';
+        rgAlbumBtn.innerHTML = '&#9835; ReplayGain';
+        rgAlbumBtn.title = 'Analyze ReplayGain for all tracks in this album (writes track + album gain)';
+        rgAlbumBtn.dataset.albumId = album.id;
+        rgAlbumBtn.onclick = (e) => { e.stopPropagation(); analyzeAlbumReplayGain(album.id, rgAlbumBtn); };
+        enrichRow.appendChild(rgAlbumBtn);
+
+        const reorganizeBtn = document.createElement('button');
+        reorganizeBtn.className = 'enhanced-reorganize-album-btn';
+        reorganizeBtn.innerHTML = '&#128193; Reorganize';
+        reorganizeBtn.title = 'Reorganize album files using a custom path template';
+        reorganizeBtn.onclick = (e) => { e.stopPropagation(); showReorganizeModal(album.id); };
+        enrichRow.appendChild(reorganizeBtn);
+
+        const redownloadBtn = document.createElement('button');
+        redownloadBtn.className = 'enhanced-redownload-album-btn';
+        redownloadBtn.innerHTML = '&#8635; Redownload';
+        redownloadBtn.title = 'Redownload this album (opens Download Missing modal with force-download)';
+        redownloadBtn.onclick = (e) => {
+            e.stopPropagation();
+            const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+            redownloadLibraryAlbum(album, aName, redownloadBtn);
+        };
+        enrichRow.appendChild(redownloadBtn);
+
+        const deleteAlbumBtn = document.createElement('button');
+        deleteAlbumBtn.className = 'enhanced-delete-album-btn';
+        deleteAlbumBtn.textContent = 'Delete Album';
+        deleteAlbumBtn.onclick = (e) => { e.stopPropagation(); deleteLibraryAlbum(album.id); };
+        enrichRow.appendChild(deleteAlbumBtn);
+    }
+
+    // Report Issue button (available to all users)
+    const reportBtn = document.createElement('button');
+    reportBtn.className = 'enhanced-report-issue-btn';
+    reportBtn.innerHTML = '&#9873; Report Issue';
+    reportBtn.title = 'Report a problem with this album';
+    reportBtn.onclick = (e) => {
+        e.stopPropagation();
+        const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+        showReportIssueModal('album', album.id, album.title || '', aName);
+    };
+    enrichRow.appendChild(reportBtn);
+
+    info.appendChild(enrichRow);
+
+    header.appendChild(info);
+    return header;
+}
+
+function renderAlbumMetaRow(album) {
+    const row = document.createElement('div');
+    row.className = 'enhanced-album-meta-row';
+    row.id = `enhanced-album-meta-${album.id}`;
+
+    const fields = [
+        { key: 'title', label: 'Title', value: album.title || '' },
+        { key: 'year', label: 'Year', value: album.year || '', type: 'number' },
+        { key: 'genres', label: 'Genres', value: Array.isArray(album.genres) ? album.genres.join(', ') : (album.genres || '') },
+        { key: 'label', label: 'Label', value: album.label || '' },
+        { key: 'style', label: 'Style', value: album.style || '' },
+        { key: 'mood', label: 'Mood', value: album.mood || '' },
+        { key: 'record_type', label: 'Type', value: album.record_type || 'album' },
+        { key: 'explicit', label: 'Explicit', value: album.explicit ? '1' : '0' },
+    ];
+
+    const admin = isEnhancedAdmin();
+    fields.forEach(f => {
+        const fieldDiv = document.createElement('div');
+        fieldDiv.className = 'enhanced-album-meta-field';
+        const label = document.createElement('label');
+        label.className = 'enhanced-album-meta-label';
+        label.textContent = f.label;
+        fieldDiv.appendChild(label);
+        if (admin) {
+            const input = document.createElement('input');
+            input.className = 'enhanced-album-meta-input';
+            input.type = f.type || 'text';
+            input.dataset.albumId = album.id;
+            input.dataset.field = f.key;
+            input.value = String(f.value);
+            input.addEventListener('click', e => e.stopPropagation());
+            fieldDiv.appendChild(input);
+        } else {
+            const span = document.createElement('span');
+            span.className = 'enhanced-album-meta-value';
+            span.textContent = String(f.value) || '—';
+            fieldDiv.appendChild(span);
+        }
+        row.appendChild(fieldDiv);
+    });
+
+    if (admin) {
+        const saveDiv = document.createElement('div');
+        saveDiv.className = 'enhanced-album-meta-field';
+        const spacer = document.createElement('label');
+        spacer.className = 'enhanced-album-meta-label';
+        spacer.innerHTML = '&nbsp;';
+        saveDiv.appendChild(spacer);
+        const saveBtn = document.createElement('button');
+        saveBtn.className = 'enhanced-album-save-btn';
+        saveBtn.textContent = 'Save Album';
+        saveBtn.onclick = (e) => { e.stopPropagation(); saveAlbumMetadata(album.id); };
+        saveDiv.appendChild(saveBtn);
+        row.appendChild(saveDiv);
+    }
+
+    return row;
+}
+
+function _buildTrackRow(track, album, admin) {
+    const tr = document.createElement('tr');
+    tr.dataset.trackId = track.id;
+    tr.dataset.albumId = album.id;
+    if (artistDetailPageState.selectedTracks.has(String(track.id))) tr.classList.add('selected');
+
+    // Checkbox (admin only)
+    if (admin) {
+        const cbTd = document.createElement('td');
+        const cb = document.createElement('input');
+        cb.type = 'checkbox';
+        cb.className = 'enhanced-track-checkbox';
+        cb.checked = artistDetailPageState.selectedTracks.has(String(track.id));
+        cbTd.appendChild(cb);
+        tr.appendChild(cbTd);
+    }
+
+    // Play button
+    const playTd = document.createElement('td');
+    playTd.className = 'col-play';
+    const playBtn = document.createElement('button');
+    playBtn.className = 'enhanced-play-btn';
+    playBtn.innerHTML = '&#9654;';
+    playBtn.title = track.file_path ? 'Play track' : 'No file available';
+    if (!track.file_path) playBtn.disabled = true;
+    playTd.appendChild(playBtn);
+    tr.appendChild(playTd);
+
+    // Track number
+    const numTd = document.createElement('td');
+    numTd.className = 'col-num' + (admin ? ' editable' : '');
+    numTd.textContent = track.track_number || '-';
+    tr.appendChild(numTd);
+
+    // Disc number
+    const discTd = document.createElement('td');
+    discTd.className = 'col-disc';
+    discTd.textContent = track.disc_number || '-';
+    tr.appendChild(discTd);
+
+    // Title
+    const titleTd = document.createElement('td');
+    titleTd.className = 'col-title' + (admin ? ' editable' : '');
+    titleTd.textContent = track.title || 'Unknown';
+    tr.appendChild(titleTd);
+
+    // Duration
+    const durTd = document.createElement('td');
+    durTd.className = 'col-duration';
+    durTd.textContent = formatDurationMs(track.duration);
+    tr.appendChild(durTd);
+
+    // Format
+    const fmtTd = document.createElement('td');
+    fmtTd.className = 'col-format';
+    const format = extractFormat(track.file_path);
+    const fmtSpan = document.createElement('span');
+    const fmtClass = format === 'FLAC' ? 'flac' : (format === 'MP3' ? 'mp3' : 'other');
+    fmtSpan.className = `enhanced-format-badge ${fmtClass}`;
+    fmtSpan.textContent = format;
+    fmtTd.appendChild(fmtSpan);
+    tr.appendChild(fmtTd);
+
+    // Bitrate
+    const brTd = document.createElement('td');
+    brTd.className = 'col-bitrate';
+    const brSpan = document.createElement('span');
+    const brClass = (track.bitrate || 0) >= 320 ? 'high' : ((track.bitrate || 0) >= 192 ? 'medium' : 'low');
+    brSpan.className = `enhanced-bitrate ${brClass}`;
+    brSpan.textContent = track.bitrate ? track.bitrate + ' kbps' : '-';
+    brTd.appendChild(brSpan);
+    tr.appendChild(brTd);
+
+    // BPM
+    const bpmTd = document.createElement('td');
+    bpmTd.className = 'col-bpm' + (admin ? ' editable' : '');
+    bpmTd.textContent = track.bpm || '-';
+    tr.appendChild(bpmTd);
+
+    // File path
+    const pathTd = document.createElement('td');
+    pathTd.className = 'col-path';
+    const filePath = track.file_path || '-';
+    const fileName = filePath !== '-' ? filePath.split(/[\\/]/).pop() : '-';
+    pathTd.textContent = fileName;
+    pathTd.title = filePath;
+    tr.appendChild(pathTd);
+
+    // Match status chips
+    const matchTd = document.createElement('td');
+    matchTd.className = 'col-match';
+    const matchCell = document.createElement('div');
+    matchCell.className = 'enhanced-track-match-cell';
+    const trackServices = [
+        { svc: 'spotify', col: 'spotify_track_id', label: 'SP' },
+        { svc: 'musicbrainz', col: 'musicbrainz_recording_id', label: 'MB' },
+        { svc: 'deezer', col: 'deezer_id', label: 'Dz' },
+        { svc: 'audiodb', col: 'audiodb_id', label: 'ADB' },
+        { svc: 'itunes', col: 'itunes_track_id', label: 'iT' },
+        { svc: 'lastfm', col: 'lastfm_url', label: 'LFM' },
+        { svc: 'genius', col: 'genius_id', label: 'Gen' },
+    ];
+    trackServices.forEach(s => {
+        const hasId = !!track[s.col];
+        const chip = document.createElement('span');
+        chip.className = 'enhanced-track-match-chip' + (hasId ? ' matched' : ' not-found');
+        chip.textContent = s.label;
+        chip.title = hasId ? `${s.svc}: ${track[s.col]}` : `${s.svc}: no match`;
+        chip.dataset.service = s.svc;
+        matchCell.appendChild(chip);
+    });
+    matchTd.appendChild(matchCell);
+    tr.appendChild(matchTd);
+
+    // Add to Queue button
+    const queueTd = document.createElement('td');
+    queueTd.className = 'col-queue';
+    if (track.file_path) {
+        const queueBtn = document.createElement('button');
+        queueBtn.className = 'enhanced-queue-btn';
+        queueBtn.innerHTML = '&#43;';
+        queueBtn.title = 'Add to queue';
+        queueTd.appendChild(queueBtn);
+    }
+    tr.appendChild(queueTd);
+
+    if (admin) {
+        // Write Tags button (admin only)
+        const tagTd = document.createElement('td');
+        tagTd.className = 'col-writetag';
+        if (track.file_path) {
+            const tagBtn = document.createElement('button');
+            tagBtn.className = 'enhanced-write-tag-btn';
+            tagBtn.innerHTML = '&#9998;';
+            tagBtn.title = 'Write tags to file';
+            tagTd.appendChild(tagBtn);
+
+            const rgBtn = document.createElement('button');
+            rgBtn.className = 'enhanced-rg-btn';
+            rgBtn.textContent = 'RG';
+            rgBtn.title = 'Analyze & write ReplayGain (track gain)';
+            tagTd.appendChild(rgBtn);
+        }
+        tr.appendChild(tagTd);
+
+        // Track actions cell — source info, redownload, delete (admin only)
+        const actionsTd = document.createElement('td');
+        actionsTd.className = 'col-track-actions';
+        actionsTd.innerHTML = `
+            <div class="enhanced-track-actions-group">
+                <button class="enhanced-source-info-btn" title="View download source info">ℹ</button>
+                <button class="enhanced-redownload-btn" title="Redownload this track">&#8635;</button>
+                <button class="enhanced-delete-btn" title="Delete track from library">&#10005;</button>
+            </div>
+        `;
+        tr.appendChild(actionsTd);
+    } else {
+        // Report Issue button per track (non-admin)
+        const reportTd = document.createElement('td');
+        reportTd.className = 'col-report';
+        const reportBtn = document.createElement('button');
+        reportBtn.className = 'enhanced-track-report-btn';
+        reportBtn.innerHTML = '&#9873;';
+        reportBtn.title = 'Report issue with this track';
+        reportTd.appendChild(reportBtn);
+        tr.appendChild(reportTd);
+    }
+
+    // Mobile actions column (visible only on mobile via CSS)
+    const mobileTd = document.createElement('td');
+    mobileTd.className = 'col-mobile-actions';
+    const mobileBtn = document.createElement('button');
+    mobileBtn.className = 'enhanced-mobile-actions-btn';
+    mobileBtn.innerHTML = '⋯';
+    mobileBtn.title = 'Actions';
+    mobileTd.appendChild(mobileBtn);
+    tr.appendChild(mobileTd);
+
+    return tr;
+}
+
+function _getTrackDataFromRow(tr) {
+    const trackId = tr.dataset.trackId;
+    const albumId = tr.dataset.albumId;
+    const album = findEnhancedAlbum(albumId);
+    if (!album) return null;
+    const track = (album.tracks || []).find(t => String(t.id) === String(trackId));
+    return track ? { track, album, trackId, albumId } : null;
+}
+
+function _attachTableDelegation(table, album) {
+    // Single click handler for the entire table — replaces 12-16 per-row handlers
+    const admin = isEnhancedAdmin();
+    table.addEventListener('click', (e) => {
+        const target = e.target;
+        const tr = target.closest('tr[data-track-id]');
+
+        // Header checkbox (select all)
+        if (target.closest('thead') && target.classList.contains('enhanced-track-checkbox')) {
+            toggleSelectAllTracks(album.id, target.checked);
+            return;
+        }
+
+        // Sort header click
+        const th = target.closest('th[data-sort-field]');
+        if (th) {
+            cancelInlineEdit();
+            const sortField = th.dataset.sortField;
+            const current = artistDetailPageState.enhancedTrackSort[album.id];
+            const ascending = current && current.field === sortField ? !current.ascending : true;
+            artistDetailPageState.enhancedTrackSort[album.id] = { field: sortField, ascending };
+            sortEnhancedTracks(album, sortField, ascending);
+            _rebuildTbody(table, album);
+            // Update header sort indicators
+            table.querySelectorAll('th[data-sort-field]').forEach(h => {
+                const sf = h.dataset.sortField;
+                const baseLabel = h.dataset.label || '';
+                const sort = artistDetailPageState.enhancedTrackSort[album.id];
+                h.textContent = sort && sort.field === sf ? baseLabel + (sort.ascending ? ' \u25B2' : ' \u25BC') : baseLabel;
+            });
+            return;
+        }
+
+        if (!tr) return;
+        const info = _getTrackDataFromRow(tr);
+        if (!info) return;
+        const { track, trackId } = info;
+
+        // Checkbox
+        if (target.classList.contains('enhanced-track-checkbox')) {
+            toggleTrackSelection(String(trackId));
+            return;
+        }
+
+        // Play button
+        if (target.closest('.enhanced-play-btn')) {
+            e.stopPropagation();
+            if (track.file_path) {
+                const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+                playLibraryTrack(track, album.title || '', artistName);
+            }
+            return;
+        }
+
+        // Inline editable cells (admin)
+        if (admin) {
+            const cell = target.closest('td.editable');
+            if (cell) {
+                e.stopPropagation();
+                if (cell.classList.contains('col-num')) {
+                    startInlineEdit(cell, 'track', track.id, 'track_number', track.track_number || '');
+                } else if (cell.classList.contains('col-title')) {
+                    startInlineEdit(cell, 'track', track.id, 'title', track.title || '');
+                } else if (cell.classList.contains('col-bpm')) {
+                    startInlineEdit(cell, 'track', track.id, 'bpm', track.bpm || '');
+                }
+                return;
+            }
+        }
+
+        // Match chip click (admin — open manual match modal)
+        if (admin) {
+            const chip = target.closest('.enhanced-track-match-chip');
+            if (chip) {
+                e.stopPropagation();
+                const svc = chip.dataset.service;
+                const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null;
+                openManualMatchModal('track', track.id, svc, track.title || '', aId);
+                return;
+            }
+        }
+
+        // Queue button
+        if (target.closest('.enhanced-queue-btn')) {
+            e.stopPropagation();
+            if (track.file_path) {
+                const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+                let albumArt = album.thumb_url || null;
+                if (!albumArt && artistDetailPageState.enhancedData) {
+                    albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+                }
+                addToQueue({
+                    title: track.title || 'Unknown Track',
+                    artist: artistName || 'Unknown Artist',
+                    album: album.title || 'Unknown Album',
+                    file_path: track.file_path,
+                    filename: track.file_path,
+                    is_library: true,
+                    image_url: albumArt,
+                    id: track.id,
+                    artist_id: artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null,
+                    album_id: album.id,
+                    bitrate: track.bitrate,
+                    sample_rate: track.sample_rate
+                });
+            }
+            return;
+        }
+
+        // Write tags button (admin)
+        if (target.closest('.enhanced-write-tag-btn')) {
+            e.stopPropagation();
+            showTagPreview(track.id);
+            return;
+        }
+
+        // ReplayGain analyze button (admin)
+        if (target.closest('.enhanced-rg-btn')) {
+            e.stopPropagation();
+            analyzeTrackReplayGain(track.id, target.closest('.enhanced-rg-btn'));
+            return;
+        }
+
+        // Source info button (admin)
+        if (target.closest('.enhanced-source-info-btn')) {
+            e.stopPropagation();
+            showTrackSourceInfo(track, target.closest('.enhanced-source-info-btn'));
+            return;
+        }
+
+        // Redownload button (admin)
+        if (target.closest('.enhanced-redownload-btn')) {
+            e.stopPropagation();
+            showTrackRedownloadModal(track, album);
+            return;
+        }
+
+        // Delete button (admin)
+        if (target.closest('.enhanced-delete-btn')) {
+            e.stopPropagation();
+            deleteLibraryTrack(track.id, album.id);
+            return;
+        }
+
+        // Report button (non-admin)
+        if (target.closest('.enhanced-track-report-btn')) {
+            e.stopPropagation();
+            const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+            showReportIssueModal('track', track.id, track.title || 'Unknown', artistName, album.title || '');
+            return;
+        }
+
+        // Mobile actions button (⋯)
+        if (target.closest('.enhanced-mobile-actions-btn')) {
+            e.stopPropagation();
+            _showMobileTrackActions(track, album);
+            return;
+        }
+    });
+}
+
+function _showMobileTrackActions(track, album) {
+    // Remove any existing popover
+    document.querySelectorAll('.mobile-popover-overlay, .enhanced-mobile-actions-popover').forEach(el => el.remove());
+
+    const overlay = document.createElement('div');
+    overlay.className = 'mobile-popover-overlay';
+
+    const popover = document.createElement('div');
+    popover.className = 'enhanced-mobile-actions-popover';
+
+    const title = document.createElement('div');
+    title.className = 'popover-title';
+    title.textContent = track.title || 'Track';
+    popover.appendChild(title);
+
+    const admin = isEnhancedAdmin();
+    const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
+    const albumArt = album.thumb_url || (artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist?.thumb_url : null);
+
+    const actions = [];
+    if (track.file_path) {
+        actions.push({
+            icon: '▶', label: 'Play', action: () => {
+                playLibraryTrack({ id: track.id, title: track.title, file_path: track.file_path, bitrate: track.bitrate, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id }, album.title || '', artistName);
+            }
+        });
+        actions.push({
+            icon: '+', label: 'Add to Queue', action: () => {
+                addToQueue({ title: track.title || 'Unknown', artist: artistName, album: album.title || '', file_path: track.file_path, filename: track.file_path, is_library: true, image_url: albumArt, id: track.id, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id, bitrate: track.bitrate });
+            }
+        });
+    }
+    if (admin && track.file_path) {
+        actions.push({ icon: '✎', label: 'Write Tags', action: () => showTagPreview(track.id) });
+    }
+    if (admin) {
+        actions.push({ icon: 'ℹ', label: 'Source Info', action: () => showTrackSourceInfo(track, null) });
+        actions.push({ icon: '↻', label: 'Redownload Track', action: () => showTrackRedownloadModal(track, album) });
+        actions.push({ icon: '✕', label: 'Delete Track', cls: 'popover-delete', action: () => deleteLibraryTrack(track.id, album.id) });
+    }
+
+    actions.forEach(a => {
+        const btn = document.createElement('button');
+        if (a.cls) btn.className = a.cls;
+        btn.innerHTML = `<span class="popover-icon">${a.icon}</span>${a.label}`;
+        btn.addEventListener('click', () => { close(); a.action(); });
+        popover.appendChild(btn);
+    });
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'popover-cancel';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.addEventListener('click', close);
+    popover.appendChild(cancelBtn);
+
+    function close() {
+        overlay.remove();
+        popover.remove();
+    }
+    overlay.addEventListener('click', close);
+
+    document.body.appendChild(overlay);
+    document.body.appendChild(popover);
+}
+
+function _rebuildTbody(table, album) {
+    // Replace only the tbody — keeps thead and event delegation intact
+    const admin = isEnhancedAdmin();
+    const oldTbody = table.querySelector('tbody');
+    const newTbody = document.createElement('tbody');
+    (album.tracks || []).forEach(track => {
+        newTbody.appendChild(_buildTrackRow(track, album, admin));
+    });
+    if (oldTbody) table.replaceChild(newTbody, oldTbody);
+    else table.appendChild(newTbody);
+}
+
+function renderTrackTable(album) {
+    const wrapper = document.createElement('div');
+    const tracks = album.tracks || [];
+
+    // Re-apply stored sort order if any
+    const activeSort = artistDetailPageState.enhancedTrackSort[album.id];
+    if (activeSort) {
+        sortEnhancedTracks(album, activeSort.field, activeSort.ascending);
+    }
+
+    if (tracks.length === 0) {
+        wrapper.innerHTML = '<div class="enhanced-no-tracks">No tracks in database</div>';
+        return wrapper;
+    }
+
+    const table = document.createElement('table');
+    table.className = 'enhanced-track-table';
+    table.dataset.albumId = album.id;
+
+    const admin = isEnhancedAdmin();
+    // Clear stale selections for non-admin to prevent ghost state
+    if (!admin) {
+        artistDetailPageState.selectedTracks.clear();
+    }
+
+    // Header
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    if (admin) {
+        const selectAllTh = document.createElement('th');
+        const selectAllCb = document.createElement('input');
+        selectAllCb.type = 'checkbox';
+        selectAllCb.className = 'enhanced-track-checkbox';
+        selectAllTh.appendChild(selectAllCb);
+        headRow.appendChild(selectAllTh);
+    }
+
+    const columns = [
+        { label: '', cls: 'col-play' },
+        { label: '#', cls: 'col-num', sortField: 'track_number' },
+        { label: 'Disc', cls: 'col-disc', sortField: 'disc_number' },
+        { label: 'Title', cls: 'col-title', sortField: 'title' },
+        { label: 'Duration', cls: 'col-duration', sortField: 'duration' },
+        { label: 'Format', cls: 'col-format', sortField: 'format' },
+        { label: 'Bitrate', cls: 'col-bitrate', sortField: 'bitrate' },
+        { label: 'BPM', cls: 'col-bpm', sortField: 'bpm' },
+        { label: 'File', cls: 'col-path' },
+        { label: 'Match', cls: 'col-match' },
+        { label: '', cls: 'col-queue' },
+        ...(admin ? [
+            { label: '', cls: 'col-writetag' },
+            { label: '', cls: 'col-delete' },
+        ] : [
+            { label: '', cls: 'col-report' },
+        ]),
+        { label: '', cls: 'col-mobile-actions' },
+    ];
+    const currentSort = artistDetailPageState.enhancedTrackSort[album.id];
+    columns.forEach(col => {
+        const th = document.createElement('th');
+        th.className = col.cls;
+        if (col.sortField) {
+            let headerText = col.label;
+            if (currentSort && currentSort.field === col.sortField) {
+                headerText += currentSort.ascending ? ' \u25B2' : ' \u25BC';
+            }
+            th.textContent = headerText;
+            th.style.cursor = 'pointer';
+            th.dataset.sortField = col.sortField;
+            th.dataset.label = col.label;
+        } else {
+            th.textContent = col.label;
+        }
+        headRow.appendChild(th);
+    });
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement('tbody');
+    tracks.forEach(track => {
+        tbody.appendChild(_buildTrackRow(track, album, admin));
+    });
+    table.appendChild(tbody);
+
+    // Single delegated event listener for the whole table
+    _attachTableDelegation(table, album);
+
+    wrapper.appendChild(table);
+    return wrapper;
+}
+
+function sortEnhancedTracks(album, field, ascending) {
+    const tracks = album.tracks || [];
+    tracks.sort((a, b) => {
+        let valA, valB;
+        if (field === 'format') {
+            valA = extractFormat(a.file_path);
+            valB = extractFormat(b.file_path);
+        } else {
+            valA = a[field];
+            valB = b[field];
+        }
+        if (valA == null) return 1;
+        if (valB == null) return -1;
+        if (['track_number', 'disc_number', 'bpm', 'bitrate', 'duration'].includes(field)) {
+            return ascending ? (Number(valA) - Number(valB)) : (Number(valB) - Number(valA));
+        }
+        valA = String(valA).toLowerCase();
+        valB = String(valB).toLowerCase();
+        return ascending ? valA.localeCompare(valB) : valB.localeCompare(valA);
+    });
+}
+
+async function deleteLibraryTrack(trackId, albumId) {
+    cancelInlineEdit();
+
+    // Smart delete dialog — three options
+    const choice = await _showSmartDeleteDialog();
+    if (!choice) return;
+
+    const params = new URLSearchParams();
+    if (choice === 'delete_file') params.set('delete_file', 'true');
+
+    try {
+        const response = await fetch(`/api/library/track/${trackId}?${params}`, { method: 'DELETE' });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        let msg = 'Track removed from library';
+        let toastType = 'success';
+        if (result.file_deleted) {
+            msg = 'Track deleted from library and disk';
+        } else if (result.file_error) {
+            msg = 'Track removed from library but file could not be deleted';
+            toastType = 'warning';
+        }
+        if (result.blacklisted) msg += ' (source blacklisted)';
+        showToast(msg, toastType);
+        if (result.file_error) {
+            showToast(result.file_error, 'error', 8000);
+        }
+
+        if (artistDetailPageState.enhancedData) {
+            const albums = artistDetailPageState.enhancedData.albums || [];
+            const album = albums.find(a => a.id === albumId);
+            if (album) {
+                album.tracks = (album.tracks || []).filter(t => t.id !== trackId);
+            }
+        }
+        artistDetailPageState.selectedTracks.delete(String(trackId));
+        renderEnhancedView();
+    } catch (error) {
+        showToast(`Delete failed: ${error.message}`, 'error');
+    }
+}
+
+function _showSmartDeleteDialog() {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+        const close = (val) => { overlay.remove(); resolve(val); };
+        overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+        overlay.innerHTML = `
+            <div class="smart-delete-modal">
+                <div class="smart-delete-header">
+                    <h3>Delete Track</h3>
+                    <button class="smart-delete-close">&times;</button>
+                </div>
+                <p class="smart-delete-desc">How should this track be deleted?</p>
+                <div class="smart-delete-options">
+                    <button class="smart-delete-option" data-choice="db_only">
+                        <div class="smart-delete-option-icon">📋</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title">Remove from Library</div>
+                            <div class="smart-delete-option-desc">Remove the database entry only. File stays on disk.</div>
+                        </div>
+                    </button>
+                    <button class="smart-delete-option destructive" data-choice="delete_file">
+                        <div class="smart-delete-option-icon">🗑️</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title">Delete File Too</div>
+                            <div class="smart-delete-option-desc">Remove from library and delete the audio file from disk.</div>
+                        </div>
+                    </button>
+                    <!-- Blacklisting is done from Source Info (ℹ) where real download source data is available -->
+                </div>
+            </div>
+        `;
+
+        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+            btn.addEventListener('click', () => close(btn.dataset.choice));
+        });
+        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+
+        // Escape to close
+        const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
+        document.addEventListener('keydown', escHandler);
+
+        document.body.appendChild(overlay);
+    });
+}
+
+// ==================================================================================
+// TRACK SOURCE INFO — View download provenance and blacklist sources
+// ==================================================================================
+
+async function showTrackSourceInfo(track, anchorEl) {
+    // Remove existing popover
+    const existing = document.getElementById('source-info-popover');
+    if (existing) existing.remove();
+
+    const popover = document.createElement('div');
+    popover.id = 'source-info-popover';
+    popover.className = 'source-info-popover';
+    popover.innerHTML = '<div class="source-info-loading"><div class="server-search-spinner"></div>Loading source info...</div>';
+
+    document.body.appendChild(popover);
+
+    // Position near the button or center on mobile
+    if (anchorEl) {
+        const rect = anchorEl.getBoundingClientRect();
+        const popW = 360;
+        let left = rect.left - popW - 8;
+        if (left < 10) left = rect.right + 8;
+        let top = rect.top - 20;
+        if (top + 300 > window.innerHeight) top = window.innerHeight - 310;
+        popover.style.left = `${left}px`;
+        popover.style.top = `${Math.max(10, top)}px`;
+    } else {
+        popover.style.left = '50%';
+        popover.style.top = '50%';
+        popover.style.transform = 'translate(-50%, -50%)';
+    }
+
+    requestAnimationFrame(() => popover.classList.add('visible'));
+
+    // Close on outside click
+    const closeHandler = e => {
+        if (!popover.contains(e.target) && e.target !== anchorEl) {
+            popover.remove();
+            document.removeEventListener('click', closeHandler);
+        }
+    };
+    setTimeout(() => document.addEventListener('click', closeHandler), 100);
+
+    // Escape to close
+    const escH = e => { if (e.key === 'Escape') { popover.remove(); document.removeEventListener('keydown', escH); document.removeEventListener('click', closeHandler); } };
+    document.addEventListener('keydown', escH);
+
+    try {
+        const res = await fetch(`/api/library/track/${track.id}/source-info`);
+        const data = await res.json();
+
+        if (!data.success || !data.downloads || data.downloads.length === 0) {
+            popover.innerHTML = `
+                <div class="source-info-header">
+                    <span class="source-info-title">Source Info</span>
+                    <button class="source-info-close" onclick="document.getElementById('source-info-popover')?.remove()">&times;</button>
+                </div>
+                <div class="source-info-empty">No download source data available for this track. Source tracking starts with new downloads.</div>
+            `;
+            return;
+        }
+
+        const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer: '💜' };
+        const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer: 'Deezer' };
+
+        const dl = data.downloads[0]; // Most recent download
+        const icon = serviceIcons[dl.source_service] || '📦';
+        const label = serviceLabels[dl.source_service] || dl.source_service;
+        const displayFile = dl.source_filename ? dl.source_filename.replace(/\\/g, '/').split('/').pop() : 'Unknown';
+        const sizeStr = dl.source_size ? `${(dl.source_size / 1048576).toFixed(1)} MB` : '';
+        const dateStr = dl.created_at ? timeAgo(dl.created_at) : '';
+
+        popover.innerHTML = `
+            <div class="source-info-header">
+                <span class="source-info-title">Source Info</span>
+                <button class="source-info-close" onclick="document.getElementById('source-info-popover')?.remove()">&times;</button>
+            </div>
+            <div class="source-info-body">
+                <div class="source-info-row">
+                    <span class="source-info-label">Service</span>
+                    <span class="source-info-value">${icon} ${label}</span>
+                </div>
+                ${dl.source_service === 'soulseek' && dl.source_username ? `<div class="source-info-row">
+                    <span class="source-info-label">User</span>
+                    <span class="source-info-value source-info-mono">${_esc(dl.source_username)}</span>
+                </div>` : ''}
+                <div class="source-info-row">
+                    <span class="source-info-label">Original File</span>
+                    <span class="source-info-value source-info-mono source-info-ellipsis" title="${_esc(dl.source_filename || '')}">${_esc(displayFile)}</span>
+                </div>
+                ${sizeStr ? `<div class="source-info-row">
+                    <span class="source-info-label">Size</span>
+                    <span class="source-info-value">${sizeStr}</span>
+                </div>` : ''}
+                ${dl.audio_quality ? `<div class="source-info-row">
+                    <span class="source-info-label">Quality</span>
+                    <span class="source-info-value">${_esc(dl.audio_quality)}</span>
+                </div>` : ''}
+                ${dl.bit_depth || dl.sample_rate || dl.bitrate ? `<div class="source-info-row">
+                    <span class="source-info-label">Audio</span>
+                    <span class="source-info-value">${[dl.bit_depth ? `${dl.bit_depth}-bit` : '', dl.sample_rate ? `${(dl.sample_rate / 1000).toFixed(1)}kHz` : '', dl.bitrate ? `${Math.round(dl.bitrate / 1000)}kbps` : ''].filter(Boolean).join(' · ')}</span>
+                </div>` : ''}
+                ${dateStr ? `<div class="source-info-row">
+                    <span class="source-info-label">Downloaded</span>
+                    <span class="source-info-value">${dateStr}</span>
+                </div>` : ''}
+                ${dl.status !== 'completed' ? `<div class="source-info-row">
+                    <span class="source-info-label">Status</span>
+                    <span class="source-info-value" style="color:#ef5350">${dl.status}</span>
+                </div>` : ''}
+            </div>
+            ${dl.source_username && dl.source_filename ? `
+            <div class="source-info-actions">
+                <button class="source-info-blacklist-btn" id="source-info-blacklist-btn">⛔ Blacklist This Source</button>
+            </div>` : ''}
+            ${data.downloads.length > 1 ? `<div class="source-info-history">${data.downloads.length} download records for this track</div>` : ''}
+        `;
+
+        // Blacklist button handler
+        const blBtn = document.getElementById('source-info-blacklist-btn');
+        if (blBtn) {
+            blBtn.addEventListener('click', async () => {
+                if (!await showConfirmDialog({ title: 'Blacklist Source', message: `Blacklist "${displayFile}" from ${dl.source_service === 'soulseek' ? dl.source_username : label}? This source will be skipped in future downloads.`, confirmText: 'Blacklist', destructive: true })) return;
+
+                try {
+                    const db_res = await fetch('/api/library/blacklist', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            track_title: dl.track_title || track.title,
+                            track_artist: dl.track_artist || '',
+                            blocked_filename: dl.source_filename,
+                            blocked_username: dl.source_username,
+                            reason: 'user_rejected'
+                        })
+                    });
+                    const result = await db_res.json();
+                    if (result.success) {
+                        showToast('Source blacklisted', 'success');
+                        blBtn.disabled = true;
+                        blBtn.textContent = '⛔ Blacklisted';
+                    } else {
+                        showToast(result.error || 'Failed to blacklist', 'error');
+                    }
+                } catch (e) {
+                    showToast('Error: ' + e.message, 'error');
+                }
+            });
+        }
+
+    } catch (e) {
+        popover.innerHTML = `<div class="source-info-empty">Error loading source info: ${_esc(e.message)}</div>`;
+    }
+}
+
+
+// ==================================================================================
+// TRACK REDOWNLOAD MODAL — Multi-step: metadata selection → source selection → download
+// ==================================================================================
+
+async function showTrackRedownloadModal(track, album) {
+    const overlay = document.createElement('div');
+    overlay.id = 'redownload-overlay';
+    overlay.className = 'redownload-overlay';
+    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
+
+    const artistName = artistDetailPageState.enhancedData?.artist?.name || '';
+    const ext = (track.file_path || '').split('.').pop().toUpperCase();
+    const fmt = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'WAV'].includes(ext) ? ext : '';
+
+    overlay.innerHTML = `
+        <div class="redownload-modal">
+            <div class="redownload-header">
+                <div>
+                    <h3>Redownload Track</h3>
+                    <p class="redownload-header-sub">Find the correct version and download from your preferred source</p>
+                </div>
+                <button class="redownload-close" onclick="document.getElementById('redownload-overlay')?.remove()">&times;</button>
+            </div>
+            <div class="redownload-current" id="redownload-current">
+                <div class="redownload-current-art" id="redownload-current-art">
+                    <div class="redownload-art-empty">🎵</div>
+                </div>
+                <div class="redownload-current-info">
+                    <div class="redownload-current-title">${_esc(track.title)}</div>
+                    <div class="redownload-current-meta">${_esc(artistName)} · ${_esc(album?.title || '')}</div>
+                </div>
+                <div class="redownload-current-badges">
+                    ${fmt ? `<span class="redownload-badge fmt">${fmt}</span>` : ''}
+                    ${track.bitrate ? `<span class="redownload-badge bitrate">${track.bitrate}k</span>` : ''}
+                </div>
+            </div>
+            <div class="redownload-steps">
+                <div class="redownload-step active" data-step="1"><span class="redownload-step-num">1</span> Choose Metadata</div>
+                <div class="redownload-step-line"></div>
+                <div class="redownload-step" data-step="2"><span class="redownload-step-num">2</span> Choose Source</div>
+                <div class="redownload-step-line"></div>
+                <div class="redownload-step" data-step="3"><span class="redownload-step-num">3</span> Downloading</div>
+            </div>
+            <div class="redownload-body" id="redownload-body">
+                <div class="redownload-loading">
+                    <div class="server-search-spinner"></div>
+                    Searching metadata sources...
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Escape to close
+    const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); overlay.remove(); } };
+    document.addEventListener('keydown', escH);
+
+    document.body.appendChild(overlay);
+
+    // Auto-search metadata
+    try {
+        const res = await fetch(`/api/library/track/${track.id}/redownload/search-metadata`, { method: 'POST' });
+        const data = await res.json();
+        if (!data.success) throw new Error(data.error);
+
+        // Set album art in header if available
+        const artEl = document.getElementById('redownload-current-art');
+        if (artEl && data.current_track?.thumb_url) {
+            artEl.innerHTML = `<img src="${data.current_track.thumb_url}" alt="">`;
+        }
+
+        _renderRedownloadStep1(overlay, track, data);
+    } catch (e) {
+        document.getElementById('redownload-body').innerHTML = `<div class="redownload-error">Error: ${_esc(e.message)}</div>`;
+    }
+}
+
+function _renderRedownloadStep1(overlay, track, data) {
+    const body = document.getElementById('redownload-body');
+    if (!body) return;
+
+    const sources = Object.keys(data.metadata_results);
+    if (sources.length === 0) {
+        body.innerHTML = '<div class="redownload-error">No metadata sources available. Check your Spotify/iTunes/Deezer connections.</div>';
+        return;
+    }
+
+    const bestSource = data.best_match?.source || sources[0];
+    const sourceIcons = { spotify: '🟢', itunes: '🍎', deezer: '🟣', hydrabase: '🔷' };
+    const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase' };
+
+    // Build columns — one per source, side by side
+    const columnsHtml = sources.map(source => {
+        const results = data.metadata_results[source] || [];
+        const icon = sourceIcons[source] || '📋';
+        const label = sourceLabels[source] || source;
+
+        let itemsHtml;
+        if (results.length === 0) {
+            itemsHtml = `<div class="redownload-col-empty">No results</div>`;
+        } else {
+            itemsHtml = results.slice(0, 8).map((r, i) => {
+                const pct = Math.round((r.match_score || 0) * 100);
+                const cls = pct >= 90 ? 'high' : pct >= 70 ? 'medium' : 'low';
+                const dur = r.duration_ms ? `${Math.floor(r.duration_ms / 60000)}:${String(Math.floor((r.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+                const checked = (source === bestSource && i === 0) ? 'checked' : '';
+                return `
+                    <label class="redownload-result" data-source="${source}" data-index="${i}">
+                        <input type="radio" name="metadata-choice" value="${source}|${i}" ${checked}>
+                        <div class="redownload-result-art">${r.image_url ? `<img src="${r.image_url}" loading="lazy">` : '<div class="redownload-art-empty"></div>'}</div>
+                        <div class="redownload-result-info">
+                            <div class="redownload-result-title">${_esc(r.name)}${r.is_current_match ? ' <span class="redownload-current-badge">current</span>' : ''}</div>
+                            <div class="redownload-result-meta">${_esc(r.artist)}${r.album ? ` · ${_esc(r.album)}` : ''}</div>
+                        </div>
+                        <div class="redownload-result-right">
+                            <div class="redownload-result-score ${cls}">${pct}%</div>
+                            ${dur ? `<div class="redownload-result-dur">${dur}</div>` : ''}
+                        </div>
+                    </label>`;
+            }).join('');
+        }
+
+        return `
+            <div class="redownload-source-col">
+                <div class="redownload-col-header">
+                    <span class="redownload-col-icon">${icon}</span>
+                    <span class="redownload-col-label">${label}</span>
+                    <span class="redownload-col-count">${results.length}</span>
+                </div>
+                <div class="redownload-col-results">${itemsHtml}</div>
+            </div>`;
+    }).join('');
+
+    body.innerHTML = `<div class="redownload-columns">${columnsHtml}</div>`;
+
+    // Add sticky footer for Step 1
+    const modal = overlay.querySelector('.redownload-modal');
+    const oldFooter = modal.querySelector('.redownload-sticky-footer');
+    if (oldFooter) oldFooter.remove();
+    const footer = document.createElement('div');
+    footer.className = 'redownload-sticky-footer';
+    footer.innerHTML = `
+        <div class="redownload-actions">
+            <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
+            <button class="redownload-btn primary" id="redownload-next-btn">Search Download Sources →</button>
+        </div>
+    `;
+    modal.appendChild(footer);
+
+    // Next button
+    document.getElementById('redownload-next-btn').addEventListener('click', async () => {
+        const checked = body.querySelector('input[name="metadata-choice"]:checked');
+        if (!checked) { showToast('Select a metadata source first', 'error'); return; }
+        const [source, idx] = checked.value.split('|');
+        selectedMeta = data.metadata_results[source][parseInt(idx)];
+        selectedMeta._source = source;
+
+        // Update step indicator
+        overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+        overlay.querySelector('.redownload-step[data-step="2"]').classList.add('active');
+
+        // Stream results from all download sources — columns appear as each source responds
+        // Body gets the scrollable content, footer is sticky outside the scroll
+        body.innerHTML = `
+            <div class="rdl-src-columns" id="rdl-src-columns">
+                <div class="redownload-loading" id="rdl-src-loading"><div class="server-search-spinner"></div>Searching download sources...</div>
+            </div>
+        `;
+        // Add sticky footer outside the scrollable body
+        const existingFooter = overlay.querySelector('.redownload-sticky-footer');
+        if (existingFooter) existingFooter.remove();
+        const modal = overlay.querySelector('.redownload-modal');
+        const footer = document.createElement('div');
+        footer.className = 'redownload-sticky-footer';
+        footer.innerHTML = `
+            <label class="redownload-delete-old">
+                <input type="checkbox" id="redownload-delete-old-check" checked>
+                Delete old file after successful download
+            </label>
+            <div class="redownload-actions">
+                <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
+                <button class="redownload-btn primary" id="redownload-start-btn" disabled>Waiting for results...</button>
+            </div>
+        `;
+        modal.appendChild(footer);
+
+        // Wire up download button IMMEDIATELY (before streaming starts)
+        // so it works as soon as results appear
+        window._redownloadCandidates = [];
+        window._redownloadMetadata = selectedMeta;
+        document.getElementById('redownload-start-btn').addEventListener('click', async () => {
+            const checked = document.querySelector('input[name="source-choice"]:checked');
+            if (!checked) { showToast('Select a download source', 'error'); return; }
+            const cand = window._redownloadCandidates[parseInt(checked.value)];
+            if (!cand) { showToast('Invalid selection', 'error'); return; }
+            const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
+
+            overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+            overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
+
+            // Remove sticky footer for step 3
+            const ft = overlay.querySelector('.redownload-sticky-footer');
+            if (ft) ft.remove();
+
+            const body = document.getElementById('redownload-body');
+            body.innerHTML = `
+                <div class="redownload-progress">
+                    <div class="redownload-progress-title">Downloading: ${_esc(cand.display_name)}</div>
+                    <div class="redownload-progress-from">from ${_esc(cand.source_service === 'soulseek' ? cand.username : (cand.source_service || 'unknown'))}</div>
+                    <div class="redownload-progress-bar-wrap"><div class="redownload-progress-bar" id="redownload-progress-bar"></div></div>
+                    <div class="redownload-progress-status" id="redownload-progress-status">Starting download...</div>
+                </div>
+            `;
+
+            try {
+                const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ metadata: window._redownloadMetadata, candidate: cand, delete_old_file: deleteOld })
+                });
+                const startData = await res.json();
+                if (!startData.success) throw new Error(startData.error);
+                _pollRedownloadProgress(startData.task_id, overlay);
+            } catch (e) {
+                body.innerHTML = `<div class="redownload-error">Download failed: ${_esc(e.message)}</div>`;
+            }
+        });
+
+        _streamRedownloadSources(overlay, track, selectedMeta);
+    });
+}
+
+async function _streamRedownloadSources(overlay, track, metadata) {
+    const columnsEl = document.getElementById('rdl-src-columns');
+    const loadingEl = document.getElementById('rdl-src-loading');
+    const startBtn = document.getElementById('redownload-start-btn');
+    if (!columnsEl) return;
+
+    const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
+    const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
+
+    let allCandidates = [];
+    let firstResult = true;
+    let bestGlobalIdx = -1;
+
+    try {
+        const res = await fetch(`/api/library/track/${track.id}/redownload/search-sources`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ metadata })
+        });
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+
+            const lines = buffer.split('\n');
+            buffer = lines.pop(); // keep incomplete line
+
+            for (const line of lines) {
+                if (!line.trim()) continue;
+                try {
+                    const data = JSON.parse(line);
+                    if (data.done) continue;
+
+                    const svc = data.source;
+                    const candidates = data.candidates || [];
+
+                    // Remove loading spinner on first result
+                    if (firstResult && loadingEl) { loadingEl.remove(); firstResult = false; }
+
+                    // Assign global indices
+                    const startIdx = allCandidates.length;
+                    candidates.forEach((c, i) => { c._globalIdx = startIdx + i; });
+                    allCandidates.push(...candidates);
+                    window._redownloadCandidates = allCandidates; // Keep global ref updated for button handler
+
+                    // Find best overall candidate
+                    bestGlobalIdx = -1;
+                    let bestConf = 0;
+                    allCandidates.forEach((c, i) => {
+                        if (!c.blacklisted && c.confidence > bestConf) { bestConf = c.confidence; bestGlobalIdx = i; }
+                    });
+
+                    // Render column for this source
+                    const icon = serviceIcons[svc] || '📦';
+                    const label = serviceLabels[svc] || svc;
+
+                    const itemsHtml = candidates.length === 0
+                        ? '<div class="rdl-src-col-empty">No results</div>'
+                        : candidates.slice(0, 10).map(c => {
+                            const confPct = Math.round((c.confidence || 0) * 100);
+                            const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
+                            const isRec = c._globalIdx === bestGlobalIdx;
+                            const blClass = c.blacklisted ? ' blacklisted' : '';
+                            const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
+                            return `
+                                <label class="rdl-src-item${blClass}${isRec ? ' recommended' : ''}">
+                                    ${c.blacklisted ? '<div class="rdl-src-radio-placeholder"></div>' : `<input type="radio" name="source-choice" value="${c._globalIdx}" ${isRec ? 'checked' : ''}>`}
+                                    <div class="rdl-src-item-body">
+                                        <div class="rdl-src-item-top">
+                                            <div class="rdl-src-item-name" title="${_esc(c.filename)}">${_esc(c.display_name)}</div>
+                                            ${isRec ? '<span class="rdl-src-recommended">Best</span>' : ''}
+                                        </div>
+                                        <div class="rdl-src-item-details">
+                                            ${c.quality ? `<span class="rdl-src-fmt">${c.quality}</span>` : ''}
+                                            ${c.bitrate ? `<span class="rdl-src-detail">${c.bitrate}k</span>` : ''}
+                                            <span class="rdl-src-detail">${c.size_display}</span>
+                                            ${dur ? `<span class="rdl-src-detail">${dur}</span>` : ''}
+                                            ${svc === 'soulseek' ? `<span class="rdl-src-detail rdl-src-user">${_esc(c.username)}</span>` : ''}
+                                            ${svc === 'soulseek' && c.free_upload_slots != null ? `<span class="rdl-src-detail">${c.free_upload_slots} slots</span>` : ''}
+                                        </div>
+                                        <div class="rdl-src-conf-bar"><div class="rdl-src-conf-fill ${confCls}" style="width:${confPct}%"></div></div>
+                                    </div>
+                                    <div class="rdl-src-conf-pct ${confCls}">${confPct}%</div>
+                                    ${c.blacklisted ? '<span class="rdl-src-bl">Blacklisted</span>' : ''}
+                                </label>`;
+                        }).join('');
+
+                    const colEl = document.createElement('div');
+                    colEl.className = 'rdl-src-col';
+                    colEl.style.animation = 'fadeSlideUp 0.3s ease both';
+                    colEl.innerHTML = `
+                        <div class="rdl-src-col-header">
+                            <span class="rdl-src-col-icon">${icon}</span>
+                            <span class="rdl-src-col-label">${label}</span>
+                            <span class="rdl-src-col-count">${candidates.length}</span>
+                        </div>
+                        <div class="rdl-src-col-body">${itemsHtml}</div>
+                    `;
+                    columnsEl.appendChild(colEl);
+
+                    // Enable the download button
+                    if (startBtn && allCandidates.some(c => !c.blacklisted)) {
+                        startBtn.disabled = false;
+                        startBtn.textContent = 'Download Selected';
+                    }
+
+                } catch (e) { /* skip malformed lines */ }
+            }
+        }
+    } catch (e) {
+        if (loadingEl) loadingEl.innerHTML = `<div class="redownload-error">Error: ${_esc(e.message)}</div>`;
+    }
+
+    // If no results at all
+    if (allCandidates.length === 0 && loadingEl) {
+        loadingEl.innerHTML = '<div class="rdl-src-col-empty">No download sources found for this track.</div>';
+    }
+
+    // Update the shared candidates array (button handler reads from window._redownloadCandidates)
+    window._redownloadCandidates = allCandidates;
+}
+
+/* _renderRedownloadStep2 removed — replaced by _streamRedownloadSources above */
+if (false) {
+    const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
+    const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
+
+    // Group candidates by source service
+    const grouped = {};
+    candidates.forEach((c, i) => {
+        c._origIdx = i; // preserve original index for radio value
+        const svc = c.source_service || 'unknown';
+        if (!grouped[svc]) grouped[svc] = [];
+        grouped[svc].push(c);
+    });
+
+    // Build columns — one per source
+    const sourceColumnsHtml = Object.entries(grouped).map(([svc, items]) => {
+        const icon = serviceIcons[svc] || '📦';
+        const label = serviceLabels[svc] || svc;
+
+        const itemsHtml = items.slice(0, 10).map(c => {
+            const confPct = Math.round((c.confidence || 0) * 100);
+            const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
+            const isRecommended = c._origIdx === bestIdx && !c.blacklisted;
+            const checked = isRecommended ? 'checked' : '';
+            const blClass = c.blacklisted ? ' blacklisted' : '';
+            const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
+
+            return `
+                <label class="rdl-src-item${blClass}${isRecommended ? ' recommended' : ''}" data-index="${c._origIdx}">
+                    ${c.blacklisted ? '<div class="rdl-src-radio-placeholder"></div>' : `<input type="radio" name="source-choice" value="${c._origIdx}" ${checked}>`}
+                    <div class="rdl-src-item-body">
+                        <div class="rdl-src-item-top">
+                            <div class="rdl-src-item-name" title="${_esc(c.filename)}">${_esc(c.display_name)}</div>
+                            ${isRecommended ? '<span class="rdl-src-recommended">Best Match</span>' : ''}
+                        </div>
+                        <div class="rdl-src-item-details">
+                            ${c.quality ? `<span class="rdl-src-fmt">${c.quality}</span>` : ''}
+                            ${c.bitrate ? `<span class="rdl-src-detail">${c.bitrate}k</span>` : ''}
+                            <span class="rdl-src-detail">${c.size_display}</span>
+                            ${dur ? `<span class="rdl-src-detail">${dur}</span>` : ''}
+                            ${svc === 'soulseek' ? `<span class="rdl-src-detail rdl-src-user">${_esc(c.username)}</span>` : ''}
+                            ${svc === 'soulseek' ? `<span class="rdl-src-detail">${c.free_upload_slots || 0} slots</span>` : ''}
+                        </div>
+                        <div class="rdl-src-conf-bar">
+                            <div class="rdl-src-conf-fill ${confCls}" style="width:${confPct}%"></div>
+                        </div>
+                    </div>
+                    <div class="rdl-src-conf-pct ${confCls}">${confPct}%</div>
+                    ${c.blacklisted ? '<span class="rdl-src-bl">Blacklisted</span>' : ''}
+                </label>`;
+        }).join('');
+
+        return `
+            <div class="rdl-src-col">
+                <div class="rdl-src-col-header">
+                    <span class="rdl-src-col-icon">${icon}</span>
+                    <span class="rdl-src-col-label">${label}</span>
+                    <span class="rdl-src-col-count">${items.length}</span>
+                </div>
+                <div class="rdl-src-col-body">${itemsHtml}</div>
+            </div>`;
+    }).join('');
+
+    body.innerHTML = `
+        <div class="rdl-src-columns">${sourceColumnsHtml}</div>
+        <label class="redownload-delete-old">
+            <input type="checkbox" id="redownload-delete-old-check" checked>
+            Delete old file after successful download
+        </label>
+        <div class="redownload-actions">
+            <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
+            <button class="redownload-btn primary" id="redownload-start-btn">Download Selected</button>
+        </div>
+    `;
+
+    document.getElementById('redownload-start-btn').addEventListener('click', async () => {
+        const checked = body.querySelector('input[name="source-choice"]:checked');
+        if (!checked) { showToast('Select a download source', 'error'); return; }
+        const candidate = candidates[parseInt(checked.value)];
+        const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
+
+        // Update step indicator
+        overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
+        overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
+
+        body.innerHTML = `
+            <div class="redownload-progress">
+                <div class="redownload-progress-title">Downloading: ${_esc(candidate.display_name)}</div>
+                <div class="redownload-progress-from">from ${_esc(candidate.username)}</div>
+                <div class="redownload-progress-bar-wrap"><div class="redownload-progress-bar" id="redownload-progress-bar"></div></div>
+                <div class="redownload-progress-status" id="redownload-progress-status">Starting download...</div>
+            </div>
+        `;
+
+        try {
+            const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ metadata, candidate, delete_old_file: deleteOld })
+            });
+            const startData = await res.json();
+            if (!startData.success) throw new Error(startData.error);
+
+            // Poll for progress
+            _pollRedownloadProgress(startData.task_id, overlay);
+        } catch (e) {
+            body.innerHTML = `<div class="redownload-error">Download failed: ${_esc(e.message)}</div>`;
+        }
+    });
+}
+
+function _pollRedownloadProgress(taskId, overlay) {
+    let completed = false;
+
+    const poll = setInterval(async () => {
+        if (completed) return;
+
+        // Get fresh DOM references every tick (in case DOM was rebuilt)
+        const bar = document.getElementById('redownload-progress-bar');
+        const status = document.getElementById('redownload-progress-status');
+
+        try {
+            // Poll real download progress from /api/downloads/status
+            const dlRes = await fetch('/api/downloads/status');
+            const dlData = await dlRes.json();
+            const transfers = dlData.transfers || [];
+
+            // Find any active transfer
+            let bestTransfer = null;
+            for (const t of transfers) {
+                const st = (t.state || '').toLowerCase();
+                if (st.includes('inprogress') || st.includes('queued') || st.includes('initializing')) {
+                    bestTransfer = t;
+                    break;
+                }
+            }
+
+            if (bestTransfer) {
+                const pct = bestTransfer.percentComplete || 0;
+                const transferred = bestTransfer.bytesTransferred || 0;
+                const total = bestTransfer.size || 0;
+                const transferredMB = (transferred / 1048576).toFixed(1);
+                const totalMB = (total / 1048576).toFixed(1);
+
+                if (bar) bar.style.width = `${Math.min(95, pct)}%`;
+                if (status) {
+                    status.textContent = total > 0
+                        ? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
+                        : `Downloading... ${Math.round(pct)}%`;
+                }
+            } else {
+                // No active slskd transfer — streaming source or post-processing
+                if (bar) bar.style.width = '80%';
+                if (status) status.textContent = 'Processing...';
+            }
+
+            // Check for batch completion
+            const procRes = await fetch('/api/active-processes');
+            const procData = await procRes.json();
+            const procs = procData.active_processes || [];
+            const ourBatch = procs.find(p => p.batch_id && p.batch_id.includes('redownload_batch_'));
+
+            if (!ourBatch) {
+                completed = true;
+                clearInterval(poll);
+                if (bar) bar.style.width = '100%';
+                if (status) status.textContent = 'Complete! File replaced successfully.';
+                showToast('Track redownloaded successfully', 'success');
+                setTimeout(() => {
+                    overlay.remove();
+                    if (artistDetailPageState.enhancedData?.artist?.id) {
+                        loadEnhancedViewData(artistDetailPageState.enhancedData.artist.id);
+                    }
+                }, 2000);
+            }
+        } catch (e) { /* ignore poll errors */ }
+    }, 1500);
+
+    // Safety timeout — 5 minutes
+    setTimeout(() => {
+        if (!completed) {
+            clearInterval(poll);
+            const status = document.getElementById('redownload-progress-status');
+            if (status) status.textContent = 'Download may still be in progress. Check the dashboard.';
+        }
+    }, 300000);
+}
+
+async function deleteLibraryAlbum(albumId) {
+    const choice = await _showAlbumDeleteDialog();
+    if (!choice) return;
+
+    const deleteFiles = choice === 'delete_files';
+    const params = deleteFiles ? '?delete_files=true' : '';
+
+    try {
+        const response = await fetch(`/api/library/album/${albumId}${params}`, { method: 'DELETE' });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        let msg = `Album removed from library (${result.tracks_deleted || 0} tracks)`;
+        let toastType = 'success';
+        if (deleteFiles) {
+            if (result.files_deleted > 0) {
+                msg = `Album deleted — ${result.files_deleted} files removed from disk`;
+            }
+            if (result.files_failed > 0) {
+                msg += ` (${result.files_failed} files could not be deleted)`;
+                toastType = 'warning';
+            }
+        }
+        showToast(msg, toastType);
+
+        if (artistDetailPageState.enhancedData) {
+            const album = (artistDetailPageState.enhancedData.albums || []).find(a => a.id === albumId);
+            if (album && album.tracks) {
+                album.tracks.forEach(t => artistDetailPageState.selectedTracks.delete(String(t.id)));
+            }
+            artistDetailPageState.enhancedData.albums = (artistDetailPageState.enhancedData.albums || []).filter(a => a.id !== albumId);
+            _rebuildAlbumMap();
+        }
+        artistDetailPageState.expandedAlbums.delete(albumId);
+        delete artistDetailPageState.enhancedTrackSort[albumId];
+        renderEnhancedView();
+    } catch (error) {
+        showToast(`Delete failed: ${error.message}`, 'error');
+    }
+}
+
+function _showAlbumDeleteDialog() {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+        const close = (val) => { overlay.remove(); resolve(val); };
+        overlay.onclick = e => { if (e.target === overlay) close(null); };
+
+        overlay.innerHTML = `
+            <div class="smart-delete-modal">
+                <div class="smart-delete-header">
+                    <h3>Delete Album</h3>
+                    <button class="smart-delete-close">&times;</button>
+                </div>
+                <p class="smart-delete-desc">How should this album be deleted?</p>
+                <div class="smart-delete-options">
+                    <button class="smart-delete-option" data-choice="db_only">
+                        <div class="smart-delete-option-icon">📋</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title">Remove from Library</div>
+                            <div class="smart-delete-option-desc">Remove the album and all tracks from the database. Files on disk are not affected.</div>
+                        </div>
+                    </button>
+                    <button class="smart-delete-option destructive" data-choice="delete_files">
+                        <div class="smart-delete-option-icon">🗑️</div>
+                        <div class="smart-delete-option-info">
+                            <div class="smart-delete-option-title">Delete Files Too</div>
+                            <div class="smart-delete-option-desc">Remove from library and delete all audio files from disk. Empty album folder will be cleaned up.</div>
+                        </div>
+                    </button>
+                </div>
+            </div>
+        `;
+
+        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
+            btn.addEventListener('click', () => close(btn.dataset.choice));
+        });
+        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
+
+        const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
+        document.addEventListener('keydown', escHandler);
+
+        document.body.appendChild(overlay);
+    });
+}
+
+function extractFormat(filePath) {
+    if (!filePath) return '-';
+    const ext = filePath.split('.').pop().toLowerCase();
+    const formatMap = { mp3: 'MP3', flac: 'FLAC', m4a: 'AAC', ogg: 'OGG', opus: 'OPUS', wav: 'WAV', wma: 'WMA', aac: 'AAC' };
+    return formatMap[ext] || ext.toUpperCase();
+}
+
+function formatDurationMs(ms) {
+    if (!ms) return '-';
+    const totalSeconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+function getServiceUrl(service, entityType, id) {
+    if (!id) return null;
+    const urls = {
+        spotify: {
+            artist: `https://open.spotify.com/artist/${id}`,
+            album: `https://open.spotify.com/album/${id}`,
+            track: `https://open.spotify.com/track/${id}`,
+        },
+        musicbrainz: {
+            artist: `https://musicbrainz.org/artist/${id}`,
+            album: `https://musicbrainz.org/release/${id}`,
+            track: `https://musicbrainz.org/recording/${id}`,
+        },
+        deezer: {
+            artist: `https://www.deezer.com/artist/${id}`,
+            album: `https://www.deezer.com/album/${id}`,
+            track: `https://www.deezer.com/track/${id}`,
+        },
+        audiodb: {
+            artist: `https://www.theaudiodb.com/artist/${id}`,
+            album: `https://www.theaudiodb.com/album/${id}`,
+            track: `https://www.theaudiodb.com/track/${id}`,
+        },
+        itunes: {
+            artist: `https://music.apple.com/artist/${id}`,
+            album: `https://music.apple.com/album/${id}`,
+            track: `https://music.apple.com/song/${id}`,
+        },
+        lastfm: {
+            artist: id,  // lastfm_url is already a full URL
+            album: id,
+            track: id,
+        },
+        genius: {
+            artist: id,  // genius_url is already a full URL
+            track: id,   // genius_url on tracks is already a full URL
+        },
+        tidal: {
+            artist: `https://tidal.com/browse/artist/${id}`,
+            album: `https://tidal.com/browse/album/${id}`,
+            track: `https://tidal.com/browse/track/${id}`,
+        },
+        qobuz: {
+            artist: `https://www.qobuz.com/artist/${id}`,
+            album: `https://www.qobuz.com/album/${id}`,
+            track: `https://www.qobuz.com/track/${id}`,
+        },
+    };
+    return urls[service] && urls[service][entityType] || null;
+}
+
+function makeClickableBadge(service, entityType, id, label) {
+    const url = getServiceUrl(service, entityType, id);
+    if (url) {
+        const a = document.createElement('a');
+        a.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
+        a.href = url;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        a.textContent = label;
+        a.title = `${label}: ${id} (click to open)`;
+        a.onclick = (e) => e.stopPropagation();
+        return a;
+    }
+    const span = document.createElement('span');
+    span.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
+    span.textContent = label;
+    span.title = `${label}: ${id}`;
+    return span;
+}
+
+// ---- Inline Editing ----
+
+function startInlineEdit(cell, type, id, field, currentValue) {
+    if (cell.querySelector('.enhanced-inline-input')) return;
+    cancelInlineEdit();
+
+    const isNumeric = ['track_number', 'bpm'].includes(field);
+    const originalContent = cell.innerHTML;
+    cell.dataset.originalContent = originalContent;
+
+    const input = document.createElement('input');
+    input.type = isNumeric ? 'number' : 'text';
+    input.className = 'enhanced-inline-input' + (isNumeric ? ' num' : '');
+    input.value = currentValue || '';
+    if (field === 'bpm') input.step = '0.1';
+    if (field === 'track_number') { input.min = '1'; input.step = '1'; }
+
+    cell.innerHTML = '';
+    cell.appendChild(input);
+    input.focus();
+    input.select();
+
+    artistDetailPageState.editingCell = { cell, type, id, field, originalContent };
+
+    input.addEventListener('click', e => e.stopPropagation());
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            saveInlineEdit(type, id, field, input.value);
+        } else if (e.key === 'Escape') {
+            cancelInlineEdit();
+        }
+        e.stopPropagation();
+    });
+    input.addEventListener('blur', () => {
+        setTimeout(() => {
+            if (artistDetailPageState.editingCell && artistDetailPageState.editingCell.cell === cell) {
+                saveInlineEdit(type, id, field, input.value);
+            }
+        }, 150);
+    });
+}
+
+async function saveInlineEdit(type, id, field, newValue) {
+    const editInfo = artistDetailPageState.editingCell;
+    if (!editInfo) return;
+    artistDetailPageState.editingCell = null;
+
+    let parsedValue = newValue;
+    if (field === 'track_number') parsedValue = parseInt(newValue) || null;
+    else if (field === 'bpm') parsedValue = parseFloat(newValue) || null;
+    else if (field === 'explicit') parsedValue = parseInt(newValue) || 0;
+
+    const url = type === 'track' ? `/api/library/track/${id}` : `/api/library/album/${id}`;
+
+    try {
+        const response = await fetch(url, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ [field]: parsedValue })
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        const displayValue = parsedValue !== null && parsedValue !== '' ? String(parsedValue) : '-';
+        editInfo.cell.textContent = displayValue;
+        updateLocalEnhancedData(type, id, field, parsedValue);
+        showToast(`Updated ${field}`, 'success');
+    } catch (error) {
+        console.error('Failed to save inline edit:', error);
+        editInfo.cell.innerHTML = editInfo.originalContent;
+        showToast(`Failed to update: ${error.message}`, 'error');
+    }
+}
+
+function cancelInlineEdit() {
+    const editInfo = artistDetailPageState.editingCell;
+    if (!editInfo) return;
+    editInfo.cell.innerHTML = editInfo.originalContent;
+    artistDetailPageState.editingCell = null;
+}
+
+function updateLocalEnhancedData(type, id, field, value) {
+    const data = artistDetailPageState.enhancedData;
+    if (!data) return;
+
+    if (type === 'track') {
+        for (const album of data.albums) {
+            const track = (album.tracks || []).find(t => String(t.id) === String(id));
+            if (track) { track[field] = value; break; }
+        }
+    } else if (type === 'album') {
+        const album = data.albums.find(a => String(a.id) === String(id));
+        if (album) album[field] = value;
+    } else if (type === 'artist') {
+        data.artist[field] = value;
+    }
+}
+
+// ---- Track Selection & Bulk Operations ----
+
+function toggleTrackSelection(trackId) {
+    trackId = String(trackId);
+    if (artistDetailPageState.selectedTracks.has(trackId)) {
+        artistDetailPageState.selectedTracks.delete(trackId);
+    } else {
+        artistDetailPageState.selectedTracks.add(trackId);
+    }
+    const row = document.querySelector(`tr[data-track-id="${trackId}"]`);
+    if (row) row.classList.toggle('selected', artistDetailPageState.selectedTracks.has(trackId));
+    updateBulkBar();
+}
+
+function toggleSelectAllTracks(albumId, checked) {
+    const album = findEnhancedAlbum(albumId);
+    if (!album || !album.tracks) return;
+
+    // Batch update state
+    album.tracks.forEach(track => {
+        const tid = String(track.id);
+        if (checked) artistDetailPageState.selectedTracks.add(tid);
+        else artistDetailPageState.selectedTracks.delete(tid);
+    });
+
+    // Scoped DOM query — only search within this album's panel, not entire document
+    const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+    if (panel) {
+        panel.querySelectorAll('tr[data-track-id]').forEach(row => {
+            row.classList.toggle('selected', checked);
+            const cb = row.querySelector('.enhanced-track-checkbox');
+            if (cb) cb.checked = checked;
+        });
+    }
+    updateBulkBar();
+}
+
+function clearTrackSelection() {
+    // Scoped batch clear — query the container once instead of per-track
+    const container = document.getElementById('enhanced-view-container');
+    if (container) {
+        container.querySelectorAll('tr[data-track-id].selected').forEach(row => {
+            row.classList.remove('selected');
+            const cb = row.querySelector('.enhanced-track-checkbox');
+            if (cb) cb.checked = false;
+        });
+        container.querySelectorAll('.enhanced-track-table thead .enhanced-track-checkbox').forEach(cb => cb.checked = false);
+    }
+    artistDetailPageState.selectedTracks.clear();
+    updateBulkBar();
+}
+
+function updateBulkBar() {
+    const bar = document.getElementById('enhanced-bulk-bar');
+    const count = document.getElementById('enhanced-bulk-count');
+    if (!bar || !count) return;
+    if (!isEnhancedAdmin()) {
+        bar.classList.remove('visible');
+        return;
+    }
+    const n = artistDetailPageState.selectedTracks.size;
+    count.textContent = n;
+    bar.classList.toggle('visible', n > 0);
+}
+
+function showBulkEditModal() {
+    const overlay = document.getElementById('enhanced-bulk-edit-overlay');
+    const body = document.getElementById('enhanced-bulk-modal-body');
+    const title = document.getElementById('enhanced-bulk-modal-title');
+    if (!overlay || !body) return;
+
+    const count = artistDetailPageState.selectedTracks.size;
+    title.textContent = `Batch Edit ${count} Track${count !== 1 ? 's' : ''}`;
+
+    body.innerHTML = `
+        <div class="enhanced-bulk-modal-field">
+            <label>Track Number (leave blank to skip)</label>
+            <input type="number" id="bulk-edit-track-number" placeholder="Track number..." min="1">
+        </div>
+        <div class="enhanced-bulk-modal-field">
+            <label>BPM (leave blank to skip)</label>
+            <input type="number" id="bulk-edit-bpm" placeholder="BPM..." step="0.1">
+        </div>
+        <div class="enhanced-bulk-modal-field">
+            <label>Style (leave blank to skip)</label>
+            <input type="text" id="bulk-edit-style" placeholder="Style...">
+        </div>
+        <div class="enhanced-bulk-modal-field">
+            <label>Mood (leave blank to skip)</label>
+            <input type="text" id="bulk-edit-mood" placeholder="Mood...">
+        </div>
+        <div class="enhanced-bulk-modal-field">
+            <label>Explicit</label>
+            <select id="bulk-edit-explicit">
+                <option value="">-- No change --</option>
+                <option value="0">No</option>
+                <option value="1">Yes</option>
+            </select>
+        </div>
+    `;
+
+    overlay.classList.remove('hidden');
+}
+
+function closeBulkEditModal() {
+    const overlay = document.getElementById('enhanced-bulk-edit-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+async function executeBulkEdit() {
+    const trackIds = Array.from(artistDetailPageState.selectedTracks);
+    if (trackIds.length === 0) return;
+
+    const updates = {};
+    const trackNum = document.getElementById('bulk-edit-track-number');
+    const bpm = document.getElementById('bulk-edit-bpm');
+    const style = document.getElementById('bulk-edit-style');
+    const mood = document.getElementById('bulk-edit-mood');
+    const explicit = document.getElementById('bulk-edit-explicit');
+
+    if (trackNum && trackNum.value !== '') updates.track_number = parseInt(trackNum.value);
+    if (bpm && bpm.value !== '') updates.bpm = parseFloat(bpm.value);
+    if (style && style.value !== '') updates.style = style.value;
+    if (mood && mood.value !== '') updates.mood = mood.value;
+    if (explicit && explicit.value !== '') updates.explicit = parseInt(explicit.value);
+
+    if (Object.keys(updates).length === 0) {
+        showToast('No changes to apply', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/library/tracks/batch', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_ids: trackIds, updates })
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        showToast(`Updated ${result.updated_count} tracks`, 'success');
+        closeBulkEditModal();
+
+        for (const [field, val] of Object.entries(updates)) {
+            trackIds.forEach(tid => updateLocalEnhancedData('track', tid, field, val));
+        }
+
+        reRenderExpandedPanels();
+        clearTrackSelection();
+
+    } catch (error) {
+        console.error('Bulk edit failed:', error);
+        showToast(`Bulk edit failed: ${error.message}`, 'error');
+    }
+}
+
+// ---- Save Artist / Album Metadata ----
+
+async function saveArtistMetadata() {
+    const form = document.getElementById('enhanced-artist-meta-form');
+    if (!form) return;
+
+    const inputs = form.querySelectorAll('.enhanced-meta-field-input');
+    const updates = {};
+    const original = artistDetailPageState.enhancedData.artist;
+
+    inputs.forEach(input => {
+        const field = input.dataset.field;
+        if (!field) return;
+        let value = (input.tagName === 'TEXTAREA' ? input.value : input.value).trim();
+
+        let origVal = original[field];
+        if (field === 'genres') {
+            const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
+            const origGenres = Array.isArray(origVal) ? origVal : [];
+            if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
+        } else {
+            if ((value || '') !== (origVal || '')) updates[field] = value || null;
+        }
+    });
+
+    if (Object.keys(updates).length === 0) {
+        showToast('No changes to save', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/library/artist/${original.id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        for (const [field, value] of Object.entries(updates)) {
+            artistDetailPageState.enhancedData.artist[field] = value;
+        }
+
+        // Update the display name in the header
+        if (updates.name) {
+            const nameEl = document.querySelector('.enhanced-artist-meta-name');
+            if (nameEl) nameEl.textContent = updates.name;
+        }
+
+        showToast(`Artist metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
+    } catch (error) {
+        console.error('Failed to save artist metadata:', error);
+        showToast(`Failed to save: ${error.message}`, 'error');
+    }
+}
+
+function revertArtistMetadata() {
+    const data = artistDetailPageState.enhancedData;
+    if (!data) return;
+
+    const panel = document.getElementById('enhanced-artist-meta');
+    if (!panel) return;
+
+    const parent = panel.parentNode;
+    const newPanel = renderArtistMetaPanel(data.artist);
+    parent.replaceChild(newPanel, panel);
+    showToast('Reverted to saved values', 'success');
+}
+
+async function saveAlbumMetadata(albumId) {
+    const metaRow = document.getElementById(`enhanced-album-meta-${albumId}`);
+    if (!metaRow) return;
+
+    const album = findEnhancedAlbum(albumId);
+    if (!album) return;
+
+    const inputs = metaRow.querySelectorAll('.enhanced-album-meta-input');
+    const updates = {};
+
+    inputs.forEach(input => {
+        const field = input.dataset.field;
+        if (!field) return;
+        let value = input.value.trim();
+
+        if (field === 'genres') {
+            const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
+            const origGenres = Array.isArray(album.genres) ? album.genres : [];
+            if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
+        } else if (field === 'year' || field === 'explicit' || field === 'track_count') {
+            const numVal = value !== '' ? parseInt(value) : null;
+            if (numVal !== (album[field] || null)) updates[field] = numVal;
+        } else {
+            if ((value || '') !== (album[field] || '')) updates[field] = value || null;
+        }
+    });
+
+    if (Object.keys(updates).length === 0) {
+        showToast('No album changes to save', 'error');
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/library/album/${albumId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(updates)
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        for (const [field, value] of Object.entries(updates)) {
+            album[field] = value;
+        }
+
+        // Update album row display
+        const albumRow = document.getElementById(`enhanced-album-row-${albumId}`);
+        if (albumRow) {
+            if (updates.title) {
+                const titleEl = albumRow.querySelector('.enhanced-album-title');
+                if (titleEl) { titleEl.textContent = updates.title; titleEl.title = updates.title; }
+            }
+            if (updates.year !== undefined) {
+                const yearEl = albumRow.querySelector('.enhanced-album-year');
+                if (yearEl) yearEl.textContent = updates.year || '-';
+            }
+        }
+
+        showToast(`Album metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
+    } catch (error) {
+        console.error('Failed to save album metadata:', error);
+        showToast(`Failed to save: ${error.message}`, 'error');
+    }
+}
+
+function reRenderExpandedPanels() {
+    artistDetailPageState.expandedAlbums.forEach(albumId => {
+        const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
+        if (!panel) return;
+        const inner = panel.querySelector('.enhanced-tracks-panel-inner');
+        if (!inner) return;
+
+        const album = findEnhancedAlbum(albumId);
+        if (album) {
+            inner.innerHTML = '';
+            inner.appendChild(renderExpandedAlbumHeader(album));
+            inner.appendChild(renderAlbumMetaRow(album));
+            inner.appendChild(renderTrackTable(album));
+        }
+    });
+}
+
+// ---- Manual Match Modal ----
+
+function openManualMatchModal(entityType, entityId, service, defaultQuery, artistId) {
+    // Remove existing modal if any
+    const existing = document.getElementById('enhanced-manual-match-overlay');
+    if (existing) existing.remove();
+
+    const serviceLabels = {
+        spotify: 'Spotify', musicbrainz: 'MusicBrainz', deezer: 'Deezer',
+        audiodb: 'AudioDB', itunes: 'iTunes', lastfm: 'Last.fm', genius: 'Genius'
+    };
+
+    const overlay = document.createElement('div');
+    overlay.id = 'enhanced-manual-match-overlay';
+    overlay.className = 'modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
+
+    const modal = document.createElement('div');
+    modal.className = 'enhanced-manual-match-modal';
+
+    // Header
+    const header = document.createElement('div');
+    header.className = 'enhanced-bulk-modal-header';
+    const title = document.createElement('h3');
+    title.textContent = `Match ${entityType} on ${serviceLabels[service] || service}`;
+    header.appendChild(title);
+    const closeBtn = document.createElement('button');
+    closeBtn.className = 'enhanced-bulk-modal-close';
+    closeBtn.innerHTML = '&times;';
+    closeBtn.onclick = () => overlay.remove();
+    header.appendChild(closeBtn);
+    modal.appendChild(header);
+
+    // Search bar
+    const searchRow = document.createElement('div');
+    searchRow.className = 'enhanced-match-search-row';
+    const searchInput = document.createElement('input');
+    searchInput.type = 'text';
+    searchInput.className = 'enhanced-match-search-input';
+    searchInput.placeholder = `Search ${serviceLabels[service] || service}...`;
+    searchInput.value = defaultQuery;
+    searchRow.appendChild(searchInput);
+    const searchBtn = document.createElement('button');
+    searchBtn.className = 'enhanced-enrich-btn';
+    searchBtn.textContent = 'Search';
+    searchBtn.onclick = () => doManualMatchSearch(service, entityType, searchInput.value, resultsContainer, entityId, artistId);
+    searchRow.appendChild(searchBtn);
+
+    // Clear Match button — lets user revert a wrong match to not_found
+    const clearBtn = document.createElement('button');
+    clearBtn.className = 'enhanced-enrich-btn';
+    clearBtn.style.cssText = 'background:rgba(255,80,80,0.12);color:#ff6b6b;margin-left:6px';
+    clearBtn.textContent = 'Clear Match';
+    clearBtn.title = 'Remove the current match — reverts to Not Found';
+    clearBtn.onclick = async () => {
+        if (!confirm(`Clear ${serviceLabels[service] || service} match for this ${entityType}? It will revert to "Not Found".`)) return;
+        try {
+            const res = await fetch('/api/library/clear-match', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ entity_type: entityType, entity_id: entityId, service, artist_id: artistId })
+            });
+            const data = await res.json();
+            if (data.success) {
+                showToast(`Cleared ${serviceLabels[service] || service} match`, 'success');
+                overlay.remove();
+                if (data.updated_data) {
+                    artistDetailPageState.enhancedData = data.updated_data;
+                    renderEnhancedArtistView(data.updated_data, true);
+                }
+            } else {
+                showToast(data.error || 'Failed to clear match', 'error');
+            }
+        } catch (e) {
+            showToast('Error clearing match', 'error');
+        }
+    };
+    searchRow.appendChild(clearBtn);
+
+    modal.appendChild(searchRow);
+
+    // Handle Enter key
+    searchInput.onkeydown = (e) => {
+        if (e.key === 'Enter') searchBtn.click();
+    };
+
+    // Results container
+    const resultsContainer = document.createElement('div');
+    resultsContainer.className = 'enhanced-match-results';
+    resultsContainer.innerHTML = '<div class="enhanced-match-results-hint">Press Search or Enter to find matches</div>';
+    modal.appendChild(resultsContainer);
+
+    overlay.appendChild(modal);
+    document.body.appendChild(overlay);
+
+    // Auto-search on open
+    searchInput.focus();
+    searchBtn.click();
+}
+
+async function doManualMatchSearch(service, entityType, query, container, entityId, artistId) {
+    if (!query.trim()) {
+        container.innerHTML = '<div class="enhanced-match-results-hint">Enter a search term</div>';
+        return;
+    }
+
+    container.innerHTML = '<div class="enhanced-loading">Searching...</div>';
+
+    try {
+        const response = await fetch('/api/library/search-service', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ service, entity_type: entityType, query: query.trim() })
+        });
+
+        const data = await response.json();
+        if (!data.success) throw new Error(data.error);
+
+        const results = data.results || [];
+        container.innerHTML = '';
+
+        if (results.length === 0) {
+            container.innerHTML = '<div class="enhanced-match-results-hint">No results found. Try a different search.</div>';
+            return;
+        }
+
+        results.forEach(result => {
+            const row = document.createElement('div');
+            row.className = 'enhanced-match-result-row';
+
+            if (result.image) {
+                const img = document.createElement('img');
+                img.className = 'enhanced-match-result-img';
+                img.src = result.image;
+                img.alt = '';
+                img.onerror = function () { this.style.display = 'none'; };
+                row.appendChild(img);
+            } else {
+                const placeholder = document.createElement('div');
+                placeholder.className = 'enhanced-match-result-img-placeholder';
+                placeholder.innerHTML = '&#127925;';
+                row.appendChild(placeholder);
+            }
+
+            const info = document.createElement('div');
+            info.className = 'enhanced-match-result-info';
+            const name = document.createElement('div');
+            name.className = 'enhanced-match-result-name';
+            name.textContent = result.name || 'Unknown';
+            info.appendChild(name);
+            if (result.extra) {
+                const extra = document.createElement('div');
+                extra.className = 'enhanced-match-result-extra';
+                extra.textContent = result.extra;
+                info.appendChild(extra);
+            }
+            const idLine = document.createElement('div');
+            idLine.className = 'enhanced-match-result-id';
+            const providerLabel = result.provider && result.provider !== service ? ` (${result.provider})` : '';
+            idLine.textContent = `ID: ${result.id}${providerLabel}`;
+            info.appendChild(idLine);
+            row.appendChild(info);
+
+            const matchBtn = document.createElement('button');
+            matchBtn.className = 'enhanced-meta-save-btn';
+            matchBtn.textContent = 'Match';
+            matchBtn.onclick = () => applyManualMatch(entityType, entityId, result.provider || service, result.id, artistId);
+            row.appendChild(matchBtn);
+
+            container.appendChild(row);
+        });
+
+    } catch (error) {
+        container.innerHTML = `<div class="enhanced-match-results-hint" style="color:#ff6b6b;">Error: ${escapeHtml(error.message)}</div>`;
+    }
+}
+
+async function applyManualMatch(entityType, entityId, service, serviceId, artistId) {
+    try {
+        showToast(`Matching ${entityType} to ${service}...`, 'info');
+
+        const response = await fetch('/api/library/manual-match', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                entity_type: entityType,
+                entity_id: entityId,
+                service: service,
+                service_id: serviceId,
+                artist_id: artistId
+            })
+        });
+
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        showToast(`Manually matched to ${service} ID: ${serviceId}`, 'success');
+
+        // Close modal
+        const overlay = document.getElementById('enhanced-manual-match-overlay');
+        if (overlay) overlay.remove();
+
+        // Update view with fresh data
+        if (result.updated_data && result.updated_data.success) {
+            artistDetailPageState.enhancedData = result.updated_data;
+            _rebuildAlbumMap();
+            renderEnhancedView();
+        } else if (artistDetailPageState.currentArtistId) {
+            await loadEnhancedViewData(artistDetailPageState.currentArtistId);
+        }
+
+    } catch (error) {
+        showToast(`Match failed: ${error.message}`, 'error');
+    }
+}
+
+// ---- Enrichment ----
+
+let _enrichmentInFlight = false;
+
+async function runEnrichment(entityType, entityId, service, name, artistName, artistId) {
+    if (_enrichmentInFlight) {
+        showToast('An enrichment is already in progress', 'error');
+        return;
+    }
+
+    _enrichmentInFlight = true;
+
+    // Add loading class to all match chips for this service
+    const chipPrefixes = {
+        'spotify': ['spotify', 'sp'],
+        'musicbrainz': ['musicbrainz', 'mb'],
+        'deezer': ['deezer', 'dz'],
+        'audiodb': ['audiodb', 'adb'],
+        'itunes': ['itunes', 'it'],
+        'lastfm': ['last.fm', 'lfm'],
+        'genius': ['genius', 'gen'],
+    };
+    const prefixes = chipPrefixes[service] || [service];
+    document.querySelectorAll('.enhanced-match-chip').forEach(chip => {
+        const chipText = chip.textContent.toLowerCase();
+        if (prefixes.some(p => chipText.startsWith(p))) {
+            chip.classList.add('loading');
+        }
+    });
+
+    showToast(`Enriching ${entityType} from ${service}...`, 'info');
+
+    try {
+        const response = await fetch('/api/library/enrich', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                entity_type: entityType,
+                entity_id: entityId,
+                service: service,
+                name: name,
+                artist_name: artistName,
+                artist_id: artistId
+            })
+        });
+
+        const result = await response.json();
+
+        if (response.status === 429) {
+            showToast(result.error || 'Another enrichment is in progress', 'error');
+            return;
+        }
+
+        if (!result.success) {
+            throw new Error(result.error || 'Enrichment failed');
+        }
+
+        // Show per-service results
+        const results = result.results || {};
+        const successes = Object.entries(results).filter(([, r]) => r.success).map(([s]) => s);
+        const failures = Object.entries(results).filter(([, r]) => !r.success).map(([s, r]) => `${s}: ${r.error}`);
+
+        if (successes.length > 0) {
+            showToast(`Enriched from: ${successes.join(', ')}`, 'success');
+        }
+        if (failures.length > 0) {
+            showToast(`Failed: ${failures.join('; ')}`, 'error');
+        }
+
+        // Update local data with fresh response and re-render (preserves expanded state)
+        if (result.updated_data && result.updated_data.success) {
+            artistDetailPageState.enhancedData = result.updated_data;
+            _rebuildAlbumMap();
+            renderEnhancedView();
+        } else if (artistDetailPageState.currentArtistId) {
+            await loadEnhancedViewData(artistDetailPageState.currentArtistId);
+        }
+
+    } catch (error) {
+        console.error('Enrichment error:', error);
+        showToast(`Enrichment error: ${error.message}`, 'error');
+    } finally {
+        _enrichmentInFlight = false;
+        document.querySelectorAll('.enhanced-match-chip.loading').forEach(c => c.classList.remove('loading'));
+    }
+}
+
+// Close enrich dropdowns when clicking outside (early bail when enhanced view isn't active)
+document.addEventListener('click', (e) => {
+    if (!artistDetailPageState.enhancedView) return;
+    if (!e.target.closest('.enhanced-enrich-wrap')) {
+        document.querySelectorAll('.enhanced-enrich-menu.visible').forEach(m => m.classList.remove('visible'));
+    }
+});
+
+// ---- Write Tags to File ----
+
+let _tagPreviewTrackId = null;
+let _tagPreviewServerType = null;
+
+async function showTagPreview(trackId) {
+    _tagPreviewTrackId = trackId;
+    _tagPreviewServerType = null;
+    const overlay = document.getElementById('tag-preview-overlay');
+    const body = document.getElementById('tag-preview-body');
+    const title = document.getElementById('tag-preview-title');
+    if (!overlay || !body) return;
+
+    title.textContent = 'Write Tags to File';
+    body.innerHTML = '<div class="tag-preview-loading">Loading tag comparison...</div>';
+    overlay.classList.remove('hidden');
+
+    // Hide sync checkbox until we know server type
+    const syncLabel = document.getElementById('tag-preview-sync-label');
+    if (syncLabel) syncLabel.classList.add('hidden');
+
+    try {
+        const response = await fetch(`/api/library/track/${trackId}/tag-preview`);
+        const result = await response.json();
+        if (!result.success) {
+            body.innerHTML = `<div class="tag-preview-error">${escapeHtml(result.error)}</div>`;
+            return;
+        }
+
+        const diff = result.diff || [];
+        const hasChanges = result.has_changes;
+
+        // Show server sync checkbox if a server is connected (not navidrome — it auto-detects)
+        _tagPreviewServerType = result.server_type || null;
+        if (syncLabel && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome') {
+            const syncText = document.getElementById('tag-preview-sync-text');
+            if (syncText) syncText.textContent = `Sync to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+            syncLabel.classList.remove('hidden');
+        }
+
+        let html = '<table class="tag-preview-table"><thead><tr>';
+        html += '<th>Field</th><th>Current File Tag</th><th></th><th>DB Value</th>';
+        html += '</tr></thead><tbody>';
+
+        diff.forEach(d => {
+            const rowClass = d.changed ? 'tag-diff-changed' : 'tag-diff-same';
+            const arrow = d.changed ? '<span class="tag-diff-arrow">&rarr;</span>' : '<span class="tag-diff-check">&#10003;</span>';
+            html += `<tr class="${rowClass}">`;
+            html += `<td class="tag-field-name">${d.field}</td>`;
+            html += `<td class="tag-file-value">${escapeHtml(d.file_value) || '<span class="tag-empty">empty</span>'}</td>`;
+            html += `<td class="tag-diff-indicator">${arrow}</td>`;
+            html += `<td class="tag-db-value">${escapeHtml(d.db_value) || '<span class="tag-empty">empty</span>'}</td>`;
+            html += '</tr>';
+        });
+
+        html += '</tbody></table>';
+
+        if (!hasChanges) {
+            html += '<div class="tag-preview-no-changes">File tags already match DB metadata</div>';
+        }
+
+        body.innerHTML = html;
+
+        const writeBtn = document.getElementById('tag-preview-write-btn');
+        if (writeBtn) {
+            writeBtn.disabled = !hasChanges && !document.getElementById('tag-preview-embed-cover')?.checked;
+        }
+
+    } catch (error) {
+        body.innerHTML = `<div class="tag-preview-error">Failed to load preview: ${escapeHtml(error.message)}</div>`;
+    }
+}
+
+function closeTagPreviewModal() {
+    const overlay = document.getElementById('tag-preview-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    _tagPreviewTrackId = null;
+}
+
+async function executeWriteTags() {
+    if (!_tagPreviewTrackId) return;
+
+    const writeBtn = document.getElementById('tag-preview-write-btn');
+    if (writeBtn) {
+        writeBtn.disabled = true;
+        writeBtn.textContent = 'Writing...';
+    }
+
+    const embedCover = document.getElementById('tag-preview-embed-cover')?.checked ?? true;
+    const syncToServer = document.getElementById('tag-preview-sync-server')?.checked && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome';
+
+    try {
+        const response = await fetch(`/api/library/track/${_tagPreviewTrackId}/write-tags`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ embed_cover: embedCover, sync_to_server: syncToServer })
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        const fieldCount = (result.written_fields || []).length;
+        let msg = `Tags written successfully (${fieldCount} fields)`;
+        if (result.server_sync) {
+            const ss = result.server_sync;
+            if (ss.synced > 0) msg += ` — synced to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+            else if (ss.failed > 0) msg += ` — server sync failed`;
+        }
+        showToast(msg, 'success');
+        closeTagPreviewModal();
+
+    } catch (error) {
+        showToast(`Failed to write tags: ${error.message}`, 'error');
+    } finally {
+        if (writeBtn) {
+            writeBtn.disabled = false;
+            writeBtn.textContent = 'Write Tags';
+        }
+    }
+}
+
+async function writeAlbumTags(albumId) {
+    const album = findEnhancedAlbum(albumId);
+    if (!album) return;
+
+    const tracks = (album.tracks || []).filter(t => t.file_path);
+    if (tracks.length === 0) {
+        showToast('No tracks with files in this album', 'error');
+        return;
+    }
+
+    await showBatchTagPreview(tracks.map(t => t.id), album.title);
+}
+
+async function batchWriteTagsSelected() {
+    const trackIds = Array.from(artistDetailPageState.selectedTracks);
+    if (trackIds.length === 0) return;
+
+    await showBatchTagPreview(trackIds, null);
+}
+
+async function showBatchTagPreview(trackIds, albumTitle) {
+    const overlay = document.getElementById('batch-tag-preview-overlay');
+    const body = document.getElementById('batch-tag-preview-body');
+    const titleEl = document.getElementById('batch-tag-preview-title');
+    const summary = document.getElementById('batch-tag-preview-summary');
+    const writeBtn = document.getElementById('batch-tag-preview-write-btn');
+    if (!overlay || !body) return;
+
+    titleEl.textContent = albumTitle ? `Write Tags — ${albumTitle}` : `Write Tags — ${trackIds.length} Tracks`;
+    body.innerHTML = '<div class="tag-preview-loading">Loading tag previews...</div>';
+    summary.innerHTML = '';
+    writeBtn.disabled = true;
+    overlay.classList.remove('hidden');
+
+    // Hide sync checkbox until we know server type
+    const syncLabel = document.getElementById('batch-tag-preview-sync-label');
+    if (syncLabel) syncLabel.classList.add('hidden');
+
+    try {
+        const response = await fetch('/api/library/tracks/tag-preview-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_ids: trackIds })
+        });
+        const result = await response.json();
+        if (!result.success) {
+            body.innerHTML = `<div class="tag-preview-error">${escapeHtml(result.error)}</div>`;
+            return;
+        }
+
+        const tracks = result.tracks || [];
+        const serverType = result.server_type || null;
+
+        // Show sync checkbox if server connected
+        if (syncLabel && serverType && serverType !== 'navidrome') {
+            const syncText = document.getElementById('batch-tag-preview-sync-text');
+            if (syncText) syncText.textContent = `Sync to ${serverType === 'plex' ? 'Plex' : 'Jellyfin'}`;
+            syncLabel.classList.remove('hidden');
+        }
+
+        // Categorize tracks
+        const withChanges = tracks.filter(t => t.has_changes);
+        const noChanges = tracks.filter(t => !t.error && !t.has_changes);
+        const errors = tracks.filter(t => t.error);
+
+        // Summary bar
+        let summaryHtml = '<div class="batch-tag-summary">';
+        if (withChanges.length > 0) summaryHtml += `<span class="batch-tag-stat changed">${withChanges.length} with changes</span>`;
+        if (noChanges.length > 0) summaryHtml += `<span class="batch-tag-stat unchanged">${noChanges.length} unchanged</span>`;
+        if (errors.length > 0) summaryHtml += `<span class="batch-tag-stat errored">${errors.length} unavailable</span>`;
+        summaryHtml += '</div>';
+        summary.innerHTML = summaryHtml;
+
+        // Build track accordion
+        let html = '';
+
+        // Tracks with changes (expanded by default)
+        withChanges.forEach(track => {
+            html += _renderBatchTrackDiff(track, true);
+        });
+
+        // Errors
+        errors.forEach(track => {
+            html += `<div class="batch-tag-track error">`;
+            html += `<div class="batch-tag-track-header">`;
+            html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
+            html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
+            html += `<span class="batch-tag-track-status error">${escapeHtml(track.error)}</span>`;
+            html += `</div></div>`;
+        });
+
+        // Unchanged tracks (collapsed)
+        if (noChanges.length > 0) {
+            html += `<div class="batch-tag-unchanged-group">`;
+            html += `<div class="batch-tag-unchanged-header" onclick="this.parentElement.classList.toggle('expanded')">`;
+            html += `<span>${noChanges.length} track${noChanges.length !== 1 ? 's' : ''} already up to date</span>`;
+            html += `<span class="batch-tag-chevron">&#9662;</span>`;
+            html += `</div>`;
+            html += `<div class="batch-tag-unchanged-list">`;
+            noChanges.forEach(track => {
+                html += `<div class="batch-tag-track-row unchanged">`;
+                html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
+                html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
+                html += `<span class="batch-tag-track-status ok">✓ Tags match</span>`;
+                html += `</div>`;
+            });
+            html += `</div></div>`;
+        }
+
+        if (withChanges.length === 0 && errors.length === 0) {
+            html += '<div class="tag-preview-no-changes">All file tags already match DB metadata</div>';
+        }
+
+        body.innerHTML = html;
+
+        // Store state for write action
+        overlay._batchTrackIds = trackIds;
+        overlay._batchServerType = serverType;
+        writeBtn.disabled = withChanges.length === 0;
+
+    } catch (error) {
+        body.innerHTML = `<div class="tag-preview-error">Failed to load previews: ${escapeHtml(error.message)}</div>`;
+    }
+}
+
+function _renderBatchTrackDiff(track, expanded) {
+    let html = `<div class="batch-tag-track${expanded ? ' expanded' : ''}">`;
+    html += `<div class="batch-tag-track-header" onclick="this.parentElement.classList.toggle('expanded')">`;
+    html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
+    html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
+    html += `<span class="batch-tag-track-status changed">${track.changed_count} field${track.changed_count !== 1 ? 's' : ''} changed</span>`;
+    html += `<span class="batch-tag-chevron">&#9662;</span>`;
+    html += `</div>`;
+    html += `<div class="batch-tag-track-diff">`;
+    html += '<table class="tag-preview-table"><thead><tr>';
+    html += '<th>Field</th><th>Current File</th><th></th><th>New Value</th>';
+    html += '</tr></thead><tbody>';
+
+    (track.diff || []).forEach(d => {
+        if (!d.changed) return; // Only show changed fields in batch view
+        html += `<tr class="tag-diff-changed">`;
+        html += `<td class="tag-field-name">${d.field}</td>`;
+        html += `<td class="tag-file-value">${escapeHtml(d.file_value) || '<span class="tag-empty">empty</span>'}</td>`;
+        html += `<td class="tag-diff-indicator"><span class="tag-diff-arrow">&rarr;</span></td>`;
+        html += `<td class="tag-db-value">${escapeHtml(d.db_value) || '<span class="tag-empty">empty</span>'}</td>`;
+        html += '</tr>';
+    });
+
+    html += '</tbody></table></div></div>';
+    return html;
+}
+
+function closeBatchTagPreviewModal() {
+    const overlay = document.getElementById('batch-tag-preview-overlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+        overlay._batchTrackIds = null;
+        overlay._batchServerType = null;
+    }
+}
+
+async function executeBatchWriteTags() {
+    const overlay = document.getElementById('batch-tag-preview-overlay');
+    const trackIds = overlay?._batchTrackIds;
+    if (!trackIds || trackIds.length === 0) return;
+
+    const writeBtn = document.getElementById('batch-tag-preview-write-btn');
+    if (writeBtn) {
+        writeBtn.disabled = true;
+        writeBtn.textContent = 'Writing...';
+    }
+
+    const embedCover = document.getElementById('batch-tag-preview-embed-cover')?.checked ?? true;
+    const serverType = overlay._batchServerType;
+    const syncToServer = document.getElementById('batch-tag-preview-sync-server')?.checked && serverType && serverType !== 'navidrome';
+
+    closeBatchTagPreviewModal();
+    await _startBatchWriteTags(trackIds, embedCover, syncToServer);
+
+    if (writeBtn) {
+        writeBtn.disabled = false;
+        writeBtn.textContent = 'Write Tags';
+    }
+}
+
+async function _startBatchWriteTags(trackIds, embedCover, syncToServer = false) {
+    try {
+        const response = await fetch('/api/library/tracks/write-tags-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_ids: trackIds, embed_cover: embedCover, sync_to_server: syncToServer })
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        showToast(`Writing tags for ${trackIds.length} tracks...`, 'info');
+        _pollBatchWriteTagsStatus();
+
+    } catch (error) {
+        showToast(`Failed to start tag write: ${error.message}`, 'error');
+    }
+}
+
+let _batchWriteTagsPollTimer = null;
+
+function _pollBatchWriteTagsStatus() {
+    if (_batchWriteTagsPollTimer) clearTimeout(_batchWriteTagsPollTimer);
+
+    async function poll() {
+        try {
+            const response = await fetch('/api/library/tracks/write-tags-batch/status');
+            const state = await response.json();
+
+            if (state.status === 'running') {
+                if (state.sync_phase === 'syncing') {
+                    const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
+                    showToast(`Syncing to ${serverName}...`, 'info');
+                } else {
+                    const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+                    showToast(`Writing tags: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+                }
+                _batchWriteTagsPollTimer = setTimeout(poll, 1000);
+            } else if (state.status === 'done') {
+                let msg = `Tags written: ${state.written} succeeded, ${state.failed} failed`;
+                if (state.sync_phase === 'done') {
+                    const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
+                    if (state.sync_synced > 0 && state.sync_failed === 0) {
+                        msg += ` — synced to ${serverName}`;
+                    } else if (state.sync_failed > 0) {
+                        msg += ` — ${serverName} sync: ${state.sync_synced} synced, ${state.sync_failed} failed`;
+                    }
+                }
+                // Surface the first error reason so users can diagnose (e.g. "File not found")
+                if (state.failed > 0 && state.errors && state.errors.length > 0) {
+                    const firstErr = state.errors[0].error || 'Unknown error';
+                    msg += ` (${firstErr})`;
+                }
+                showToast(msg, state.failed > 0 || state.sync_failed > 0 ? 'warning' : 'success');
+                _batchWriteTagsPollTimer = null;
+            }
+        } catch (error) {
+            console.error('Poll write-tags status failed:', error);
+            _batchWriteTagsPollTimer = null;
+        }
+    }
+
+    _batchWriteTagsPollTimer = setTimeout(poll, 800);
+}
+
+// ── ReplayGain Analysis ──
+
+let _rgBatchPollTimer = null;
+let _rgAlbumPollTimer = null;
+
+/**
+ * Analyze a single track and write track-level ReplayGain tags.
+ * Synchronous on the server side (~1–3 s). Shows spinner on the button.
+ */
+async function analyzeTrackReplayGain(trackId, btn) {
+    if (btn) {
+        btn.disabled = true;
+        btn.textContent = '…';
+    }
+    try {
+        const res = await fetch(`/api/library/track/${trackId}/analyze-replaygain`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`ReplayGain written: ${data.track_gain} (${data.lufs} LUFS)`, 'success');
+        } else {
+            showToast(`ReplayGain failed: ${data.error}`, 'error');
+        }
+    } catch (err) {
+        showToast('ReplayGain analysis failed', 'error');
+    } finally {
+        if (btn) {
+            btn.disabled = false;
+            btn.textContent = 'RG';
+        }
+    }
+}
+
+/**
+ * Analyze all tracks in an album and write track + album ReplayGain tags.
+ * Kicks off a background job; polls for progress.
+ */
+async function analyzeAlbumReplayGain(albumId, btn) {
+    if (btn) {
+        btn.disabled = true;
+        btn.innerHTML = '&#9835; Analyzing…';
+    }
+    try {
+        const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain`, { method: 'POST' });
+        const data = await res.json();
+        if (!data.success) {
+            showToast(`ReplayGain: ${data.error}`, 'error');
+            if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
+            return;
+        }
+        showToast('Album ReplayGain analysis started…', 'info');
+        _pollAlbumRgStatus(albumId, btn);
+    } catch (err) {
+        showToast('Failed to start album ReplayGain analysis', 'error');
+        if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
+    }
+}
+
+function _pollAlbumRgStatus(albumId, btn) {
+    if (_rgAlbumPollTimer) clearTimeout(_rgAlbumPollTimer);
+
+    async function poll() {
+        try {
+            const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain/status`);
+            const state = await res.json();
+
+            if (state.status === 'running') {
+                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+                showToast(`ReplayGain: ${state.processed}/${state.total} tracks (${pct}%)`, 'info');
+                _rgAlbumPollTimer = setTimeout(poll, 1200);
+            } else if (state.status === 'done') {
+                const msg = `ReplayGain done: ${state.analyzed} analyzed, ${state.failed} failed`;
+                showToast(msg, state.failed > 0 ? 'warning' : 'success');
+                if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
+                _rgAlbumPollTimer = null;
+            }
+        } catch (err) {
+            console.error('ReplayGain album poll failed:', err);
+            if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
+            _rgAlbumPollTimer = null;
+        }
+    }
+
+    _rgAlbumPollTimer = setTimeout(poll, 1000);
+}
+
+/**
+ * Analyze selected tracks (track gain only — they may span albums).
+ */
+async function batchAnalyzeReplayGainSelected() {
+    const trackIds = Array.from(artistDetailPageState.selectedTracks);
+    if (trackIds.length === 0) return;
+
+    try {
+        const res = await fetch('/api/library/tracks/analyze-replaygain-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_ids: trackIds }),
+        });
+        const data = await res.json();
+        if (!data.success) {
+            showToast(`ReplayGain: ${data.error}`, 'error');
+            return;
+        }
+        showToast(`ReplayGain analysis started for ${trackIds.length} tracks…`, 'info');
+        _pollBatchRgStatus();
+    } catch (err) {
+        showToast('Failed to start batch ReplayGain analysis', 'error');
+    }
+}
+
+function _pollBatchRgStatus() {
+    if (_rgBatchPollTimer) clearTimeout(_rgBatchPollTimer);
+
+    async function poll() {
+        try {
+            const res = await fetch('/api/library/tracks/analyze-replaygain-batch/status');
+            const state = await res.json();
+
+            if (state.status === 'running') {
+                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+                showToast(`ReplayGain: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+                _rgBatchPollTimer = setTimeout(poll, 1000);
+            } else if (state.status === 'done') {
+                const msg = `ReplayGain done: ${state.analyzed} written, ${state.failed} failed`;
+                showToast(msg, state.failed > 0 ? 'warning' : 'success');
+                _rgBatchPollTimer = null;
+            }
+        } catch (err) {
+            console.error('ReplayGain batch poll failed:', err);
+            _rgBatchPollTimer = null;
+        }
+    }
+
+    _rgBatchPollTimer = setTimeout(poll, 800);
+}
+
+// ── Reorganize Album Files ──
+
+let _reorganizeAlbumId = null;
+let _reorganizePollTimer = null;
+
+async function showReorganizeModal(albumId) {
+    _reorganizeAlbumId = albumId;
+    const overlay = document.getElementById('reorganize-overlay');
+    const body = document.getElementById('reorganize-modal-body');
+    const title = document.getElementById('reorganize-modal-title');
+    const applyBtn = document.getElementById('reorganize-apply-btn');
+    if (!overlay || !body) return;
+
+    // Find album data from enhanced view state
+    let albumData = null;
+    let artistName = '';
+    if (artistDetailPageState.enhancedData) {
+        artistName = artistDetailPageState.enhancedData.artist.name || '';
+        const allAlbums = artistDetailPageState.enhancedData.albums || [];
+        albumData = allAlbums.find(a => String(a.id) === String(albumId));
+    }
+
+    title.textContent = `Reorganize: ${albumData ? albumData.title : 'Album'}`;
+    if (applyBtn) {
+        applyBtn.disabled = true;
+        applyBtn.textContent = 'Apply';
+        applyBtn.onclick = () => executeReorganize();
+    }
+
+    // Build modal content
+    const variables = [
+        { var: '$artist', desc: 'Track artist', example: artistName || 'Artist' },
+        { var: '$albumartist', desc: 'Album artist', example: artistName || 'Album Artist' },
+        { var: '$artistletter', desc: 'First letter of artist', example: (artistName || 'A')[0].toUpperCase() },
+        { var: '$album', desc: 'Album title', example: albumData ? albumData.title : 'Album' },
+        { var: '$albumtype', desc: 'Album/EP/Single', example: 'Album' },
+        { var: '$title', desc: 'Track title', example: 'Track Name' },
+        { var: '$track', desc: 'Track number (zero-padded)', example: '01' },
+        { var: '$disc', desc: 'Disc number (filename only)', example: '01' },
+        { var: '$cdnum', desc: 'CD label — "CD01" on multi-disc, empty otherwise', example: 'CD01' },
+        { var: '$year', desc: 'Release year', example: albumData && albumData.year ? String(albumData.year) : '2024' },
+        { var: '$quality', desc: 'Audio quality (filename only)', example: 'FLAC 16bit/44kHz' },
+    ];
+
+    let html = '<div class="reorganize-content">';
+
+    // Template input
+    html += '<div class="reorganize-template-section">';
+    html += '<label class="reorganize-label">Path Template</label>';
+    html += '<div class="reorganize-template-hint">Use <code>/</code> to separate folders. The last segment becomes the filename.</div>';
+    // Load saved template from settings, fall back to default
+    let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
+    try {
+        const settingsResp = await fetch('/api/settings');
+        if (settingsResp.ok) {
+            const settings = await settingsResp.json();
+            savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
+        }
+    } catch (_) { }
+    html += '<input type="text" id="reorganize-template-input" class="reorganize-template-input" ';
+    html += `value="${savedTemplate.replace(/"/g, '&quot;')}" `;
+    html += 'placeholder="$albumartist/$album/$track - $title" spellcheck="false">';
+    html += '</div>';
+
+    // Variables reference
+    html += '<div class="reorganize-variables">';
+    html += '<label class="reorganize-label">Available Variables</label>';
+    html += '<div class="reorganize-var-grid">';
+    variables.forEach(v => {
+        html += `<div class="reorganize-var-chip" onclick="insertReorganizeVar('${v.var}')" title="${escapeHtml(v.desc)} — e.g. ${escapeHtml(v.example)}">`;
+        html += `<code>${v.var}</code><span class="reorganize-var-desc">${v.desc}</span>`;
+        html += '</div>';
+    });
+    html += '</div></div>';
+
+    // Preview area
+    html += '<div class="reorganize-preview-section">';
+    html += '<div class="reorganize-preview-header">';
+    html += '<label class="reorganize-label">Preview</label>';
+    html += '<button class="reorganize-preview-btn" onclick="loadReorganizePreview()">Generate Preview</button>';
+    html += '</div>';
+    html += '<div id="reorganize-preview-body" class="reorganize-preview-body">';
+    html += '<div class="reorganize-preview-hint">Click "Generate Preview" to see how files will be reorganized.</div>';
+    html += '</div></div>';
+
+    html += '</div>';
+    body.innerHTML = html;
+    overlay.classList.remove('hidden');
+
+    // Wire up live preview on enter key
+    setTimeout(() => {
+        const input = document.getElementById('reorganize-template-input');
+        if (input) {
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    loadReorganizePreview();
+                }
+            });
+            input.focus();
+        }
+    }, 50);
+}
+
+function insertReorganizeVar(varName) {
+    const input = document.getElementById('reorganize-template-input');
+    if (!input) return;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    const val = input.value;
+    input.value = val.substring(0, start) + varName + val.substring(end);
+    input.focus();
+    const newPos = start + varName.length;
+    input.setSelectionRange(newPos, newPos);
+}
+
+function closeReorganizeModal() {
+    const overlay = document.getElementById('reorganize-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    _reorganizeAlbumId = null;
+}
+
+async function loadReorganizePreview() {
+    const template = document.getElementById('reorganize-template-input')?.value?.trim();
+    const previewBody = document.getElementById('reorganize-preview-body');
+    const applyBtn = document.getElementById('reorganize-apply-btn');
+    if (!template || !previewBody || !_reorganizeAlbumId) return;
+
+    if (applyBtn) applyBtn.disabled = true;
+    previewBody.innerHTML = '<div class="reorganize-preview-loading">Loading preview...</div>';
+
+    try {
+        const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize/preview`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ template })
+        });
+        const result = await response.json();
+        if (!result.success) {
+            previewBody.innerHTML = `<div class="reorganize-preview-error">${escapeHtml(result.error || 'Preview failed')}</div>`;
+            return;
+        }
+
+        const tracks = result.tracks || [];
+        if (tracks.length === 0) {
+            previewBody.innerHTML = '<div class="reorganize-preview-hint">No tracks found.</div>';
+            return;
+        }
+
+        let hasChanges = false;
+        let hasCollisions = false;
+        let html = '<table class="reorganize-preview-table"><thead><tr>';
+        html += '<th>#</th><th>Title</th><th>Current Path</th><th></th><th>New Path</th>';
+        html += '</tr></thead><tbody>';
+
+        tracks.forEach(t => {
+            const unchanged = t.unchanged;
+            const noFile = !t.file_exists;
+            const collision = t.collision;
+            if (!unchanged && t.file_exists) hasChanges = true;
+            if (collision) hasCollisions = true;
+
+            const rowClass = collision ? 'reorganize-row-collision' : noFile ? 'reorganize-row-missing' : unchanged ? 'reorganize-row-unchanged' : 'reorganize-row-changed';
+            html += `<tr class="${rowClass}">`;
+            html += `<td>${t.track_number || ''}</td>`;
+            html += `<td>${escapeHtml(t.title)}</td>`;
+            html += `<td class="reorganize-path">${noFile ? '<em>File not found</em>' : escapeHtml(t.current_path)}</td>`;
+            html += `<td class="reorganize-arrow">${collision ? '!!' : unchanged ? '=' : noFile ? '' : '→'}</td>`;
+            html += `<td class="reorganize-path">${noFile ? '' : escapeHtml(t.new_path)}${collision ? ' <em>(collision)</em>' : ''}</td>`;
+            html += '</tr>';
+        });
+
+        html += '</tbody></table>';
+
+        const changedCount = tracks.filter(t => !t.unchanged && t.file_exists && !t.collision).length;
+        const skippedCount = tracks.filter(t => t.unchanged).length;
+        const missingCount = tracks.filter(t => !t.file_exists).length;
+        const collisionCount = tracks.filter(t => t.collision).length;
+
+        let summary = `<div class="reorganize-preview-summary">`;
+        if (changedCount > 0) summary += `<span class="reorganize-stat changed">${changedCount} will move</span>`;
+        if (skippedCount > 0) summary += `<span class="reorganize-stat unchanged">${skippedCount} unchanged</span>`;
+        if (missingCount > 0) summary += `<span class="reorganize-stat missing">${missingCount} missing</span>`;
+        if (collisionCount > 0) summary += `<span class="reorganize-stat collision">${collisionCount} collision${collisionCount !== 1 ? 's' : ''} — add $track or $disc to fix</span>`;
+        summary += '</div>';
+
+        previewBody.innerHTML = summary + html;
+
+        // Block apply if collisions exist
+        if (applyBtn) applyBtn.disabled = !hasChanges || hasCollisions;
+
+    } catch (error) {
+        previewBody.innerHTML = `<div class="reorganize-preview-error">Error: ${escapeHtml(error.message)}</div>`;
+    }
+}
+
+async function executeReorganize() {
+    const template = document.getElementById('reorganize-template-input')?.value?.trim();
+    if (!template || !_reorganizeAlbumId) return;
+
+    const applyBtn = document.getElementById('reorganize-apply-btn');
+    if (applyBtn) {
+        applyBtn.disabled = true;
+        applyBtn.textContent = 'Reorganizing...';
+    }
+
+    try {
+        const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ template })
+        });
+        const result = await response.json();
+        if (!result.success) throw new Error(result.error);
+
+        closeReorganizeModal();
+        showToast(`Reorganizing ${result.total} tracks...`, 'info');
+        _pollReorganizeStatus();
+
+    } catch (error) {
+        showToast(`Reorganize failed: ${error.message}`, 'error');
+        if (applyBtn) {
+            applyBtn.disabled = false;
+            applyBtn.textContent = 'Apply';
+        }
+    }
+}
+
+function _pollReorganizeStatus() {
+    if (_reorganizePollTimer) clearTimeout(_reorganizePollTimer);
+
+    async function poll() {
+        try {
+            const response = await fetch('/api/library/album/reorganize/status');
+            const state = await response.json();
+
+            if (state.status === 'running') {
+                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
+                showToast(`Reorganizing: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
+                _reorganizePollTimer = setTimeout(poll, 800);
+            } else if (state.status === 'done') {
+                let msg = `Reorganized: ${state.moved} moved`;
+                if (state.skipped > 0) msg += `, ${state.skipped} skipped`;
+                if (state.failed > 0) msg += `, ${state.failed} failed`;
+                if (state.failed > 0 && state.errors && state.errors.length > 0) {
+                    msg += ` (${state.errors[0].error})`;
+                }
+                showToast(msg, state.failed > 0 ? 'warning' : 'success');
+                _reorganizePollTimer = null;
+
+                // Refresh the enhanced view to show updated paths
+                if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
+                    loadEnhancedViewData(artistDetailPageState.currentArtistId);
+                }
+            }
+        } catch (error) {
+            console.error('Poll reorganize status failed:', error);
+            _reorganizePollTimer = null;
+        }
+    }
+
+    _reorganizePollTimer = setTimeout(poll, 600);
+}
+
+// ── Reorganize All Albums for Artist ──
+
+let _reorganizeAllRunning = false;
+
+async function _showReorganizeAllModal() {
+    if (!artistDetailPageState.enhancedData) {
+        showToast('No album data loaded', 'error');
+        return;
+    }
+    const albums = artistDetailPageState.enhancedData.albums || [];
+    const artistName = artistDetailPageState.enhancedData.artist.name || 'Artist';
+
+    if (albums.length === 0) {
+        showToast('No albums to reorganize', 'error');
+        return;
+    }
+
+    const overlay = document.getElementById('reorganize-overlay');
+    const body = document.getElementById('reorganize-modal-body');
+    const title = document.getElementById('reorganize-modal-title');
+    const applyBtn = document.getElementById('reorganize-apply-btn');
+    if (!overlay || !body) return;
+
+    title.textContent = `Reorganize All Albums — ${artistName}`;
+
+    // Load saved template
+    let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
+    try {
+        const settingsResp = await fetch('/api/settings');
+        if (settingsResp.ok) {
+            const settings = await settingsResp.json();
+            savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
+        }
+    } catch (_) { }
+
+    let html = '<div class="reorganize-content">';
+
+    // Template input
+    html += '<div class="reorganize-template-section">';
+    html += '<label class="reorganize-label">Path Template</label>';
+    html += '<div class="reorganize-template-hint">This template will be applied to all albums below. Use <code>/</code> to separate folders.</div>';
+    html += `<input type="text" id="reorganize-template-input" class="reorganize-template-input" value="${savedTemplate.replace(/"/g, '&quot;')}" placeholder="$albumartist/$album/$track - $title" spellcheck="false">`;
+    html += '</div>';
+
+    // Album list
+    html += '<div style="margin-top:14px;">';
+    html += `<label class="reorganize-label">${albums.length} album${albums.length !== 1 ? 's' : ''} will be reorganized:</label>`;
+    html += '<div style="max-height:200px;overflow-y:auto;margin-top:6px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:6px 10px;">';
+    albums.forEach((a, i) => {
+        const trackCount = a.tracks ? a.tracks.length : '?';
+        html += `<div style="padding:4px 0;font-size:0.88em;color:rgba(255,255,255,0.7);border-bottom:${i < albums.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none'};">`;
+        html += `${escapeHtml(a.title)} <span style="color:rgba(255,255,255,0.3);">(${trackCount} tracks)</span>`;
+        html += '</div>';
+    });
+    html += '</div></div>';
+
+    html += '</div>';
+    body.innerHTML = html;
+
+    // Wire apply button for bulk mode
+    if (applyBtn) {
+        applyBtn.disabled = false;
+        applyBtn.textContent = 'Reorganize All';
+        applyBtn.onclick = () => _executeReorganizeAll();
+    }
+
+    overlay.classList.remove('hidden');
+}
+
+async function _executeReorganizeAll() {
+    if (_reorganizeAllRunning) return;
+
+    const templateInput = document.getElementById('reorganize-template-input');
+    const template = templateInput ? templateInput.value.trim() : '';
+    if (!template) {
+        showToast('Template cannot be empty', 'error');
+        return;
+    }
+
+    const albums = artistDetailPageState.enhancedData.albums || [];
+    const total = albums.length;
+    const artistName = artistDetailPageState.enhancedData.artist?.name || 'this artist';
+
+    const confirmed = await showConfirmDialog({
+        title: 'Reorganize All Albums',
+        message: `This will reorganize ${total} album${total !== 1 ? 's' : ''} for ${artistName} using the template:\n\n${template}\n\nFiles will be moved and renamed. This cannot be undone.`,
+        confirmText: 'Reorganize All',
+        destructive: false,
+    });
+    if (!confirmed) return;
+
+    _reorganizeAllRunning = true;
+    const applyBtn = document.getElementById('reorganize-apply-btn');
+    if (applyBtn) { applyBtn.disabled = true; applyBtn.textContent = 'Working...'; }
+
+    // Close modal
+    const overlay = document.getElementById('reorganize-overlay');
+    if (overlay) overlay.classList.add('hidden');
+
+    let succeeded = 0, failed = 0;
+
+    for (let i = 0; i < total; i++) {
+        const album = albums[i];
+        showToast(`Reorganizing album ${i + 1}/${total}: ${album.title}`, 'info');
+
+        try {
+            const resp = await fetch(`/api/library/album/${album.id}/reorganize`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ template }),
+            });
+            const result = await resp.json();
+            if (!result.success) {
+                showToast(`Failed: ${album.title} — ${result.error || 'unknown error'}`, 'error');
+                failed++;
+                continue;
+            }
+
+            // Wait for this album to finish
+            await _waitForReorganizeComplete();
+            succeeded++;
+        } catch (err) {
+            showToast(`Error: ${album.title} — ${err.message}`, 'error');
+            failed++;
+        }
+    }
+
+    let msg = `Reorganized ${succeeded} of ${total} album${total !== 1 ? 's' : ''}`;
+    if (failed > 0) msg += ` (${failed} failed)`;
+    showToast(msg, failed > 0 ? 'warning' : 'success');
+
+    _reorganizeAllRunning = false;
+    if (applyBtn) { applyBtn.disabled = false; applyBtn.textContent = 'Reorganize All'; }
+
+    // Refresh enhanced view
+    if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
+        loadEnhancedViewData(artistDetailPageState.currentArtistId);
+    }
+}
+
+function _waitForReorganizeComplete() {
+    return new Promise(resolve => {
+        const poll = setInterval(async () => {
+            try {
+                const resp = await fetch('/api/library/album/reorganize/status');
+                const state = await resp.json();
+                if (state.status === 'done' || state.status === 'idle') {
+                    clearInterval(poll);
+                    resolve();
+                }
+            } catch {
+                clearInterval(poll);
+                resolve();
+            }
+        }, 800);
+    });
+}
+
+async function playLibraryTrack(track, albumTitle, artistName) {
+    if (!track.file_path) {
+        showToast('No file available for this track', 'error');
+        return;
+    }
+
+    try {
+        // Stop any current playback first
+        if (audioPlayer && !audioPlayer.paused) {
+            audioPlayer.pause();
+        }
+
+        // Get album art from enhanced data if available
+        let albumArt = null;
+        if (artistDetailPageState.enhancedData) {
+            const albums = artistDetailPageState.enhancedData.albums || [];
+            for (const a of albums) {
+                if ((a.tracks || []).some(t => t.id === track.id)) {
+                    albumArt = a.thumb_url;
+                    break;
+                }
+            }
+            if (!albumArt) albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
+        }
+        if (!albumArt && track._stats_image) albumArt = track._stats_image;
+
+        // Set track info in the media player UI
+        setTrackInfo({
+            title: track.title || 'Unknown Track',
+            artist: artistName || 'Unknown Artist',
+            album: albumTitle || 'Unknown Album',
+            filename: track.file_path,
+            is_library: true,
+            image_url: albumArt,
+            id: track.id,
+            artist_id: track.artist_id,
+            album_id: track.album_id,
+            bitrate: track.bitrate,
+            sample_rate: track.sample_rate
+        });
+
+        // Show loading state
+        showLoadingAnimation();
+        const loadingText = document.querySelector('.loading-text');
+        if (loadingText) {
+            loadingText.textContent = 'Loading library track...';
+        }
+
+        // POST to library play endpoint
+        const response = await fetch('/api/library/play', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                file_path: track.file_path,
+                title: track.title || '',
+                artist: artistName || '',
+                album: albumTitle || ''
+            })
+        });
+
+        const result = await response.json();
+        if (!result.success) {
+            // File not on disk — fall back to streaming from configured source
+            console.warn('Library file not found, falling back to stream source');
+            hideLoadingAnimation();
+            const streamRes = await fetch('/api/enhanced-search/stream-track', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    track_name: track.title || '',
+                    artist_name: artistName || '',
+                    album_name: albumTitle || '',
+                })
+            });
+            const streamData = await streamRes.json();
+            if (streamData.success && streamData.result) {
+                streamData.result.artist = artistName;
+                streamData.result.title = track.title;
+                streamData.result.album = albumTitle;
+                streamData.result.image_url = track._stats_image || null;
+                startStream(streamData.result);
+                return;
+            }
+            throw new Error(result.error || 'Failed to start library playback');
+        }
+
+        // Re-apply repeat-one loop property
+        if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
+        // Stream state is already "ready" — start audio playback directly
+        await startAudioPlayback();
+
+    } catch (error) {
+        console.error('Library playback error:', error);
+        showToast(`Playback error: ${error.message}`, 'error');
+        hideLoadingAnimation();
+        clearTrack();
+    }
+}
+
+// ==================== End Enhanced Library Management View ====================
+
+// UI state management functions
+function showArtistDetailLoading(show) {
+    const loadingElement = document.getElementById("artist-detail-loading");
+    if (loadingElement) {
+        if (show) {
+            loadingElement.classList.remove("hidden");
+        } else {
+            loadingElement.classList.add("hidden");
+        }
+    }
+}
+
+function showArtistDetailError(show, message = "") {
+    const errorElement = document.getElementById("artist-detail-error");
+    const errorMessageElement = document.getElementById("artist-detail-error-message");
+
+    if (errorElement) {
+        if (show) {
+            errorElement.classList.remove("hidden");
+            if (errorMessageElement && message) {
+                errorMessageElement.textContent = message;
+            }
+        } else {
+            errorElement.classList.add("hidden");
+        }
+    }
+}
+
+function showArtistDetailMain(show) {
+    const mainElement = document.getElementById("artist-detail-main");
+    if (mainElement) {
+        if (show) {
+            mainElement.classList.remove("hidden");
+        } else {
+            mainElement.classList.add("hidden");
+        }
+    }
+}
+
+function showArtistDetailHero(show) {
+    const heroElement = document.getElementById("artist-hero-section");
+    if (heroElement) {
+        if (show) {
+            heroElement.classList.remove("hidden");
+        } else {
+            heroElement.classList.add("hidden");
+        }
+    }
+}
+
+/**
+ * Initialize the library page watchlist button
+ */
+async function initializeLibraryWatchlistButton(artistId, artistName) {
+    const button = document.getElementById('library-artist-watchlist-btn');
+    if (!button) return;
+
+    console.log(`🔧 Initializing library watchlist button for: ${artistName} (${artistId})`);
+
+    // Reset button state
+    button.disabled = false;
+    button.classList.remove('watching');
+
+    // Set up click handler
+    button.onclick = (e) => toggleLibraryWatchlist(e, artistId, artistName);
+
+    // Check and update current status
+    await updateLibraryWatchlistButtonStatus(artistId);
+}
+
+/**
+ * Toggle watchlist status for library page
+ */
+async function toggleLibraryWatchlist(event, artistId, artistName) {
+    event.preventDefault();
+
+    const button = document.getElementById('library-artist-watchlist-btn');
+    const icon = button.querySelector('.watchlist-icon');
+    const text = button.querySelector('.watchlist-text');
+
+    // Show loading state
+    const originalText = text.textContent;
+    text.textContent = 'Loading...';
+    button.disabled = true;
+
+    try {
+        // Check current status
+        const checkResponse = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const checkData = await checkResponse.json();
+        if (!checkData.success) {
+            throw new Error(checkData.error || 'Failed to check watchlist status');
+        }
+
+        const isWatching = checkData.is_watching;
+
+        // Toggle watchlist status
+        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
+        const payload = isWatching ?
+            { artist_id: artistId } :
+            { artist_id: artistId, artist_name: artistName };
+
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+        });
+
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to update watchlist');
+        }
+
+        // Update button state based on new status
+        if (isWatching) {
+            // Was watching, now removed
+            icon.textContent = '👁️';
+            text.textContent = 'Add to Watchlist';
+            button.classList.remove('watching');
+            console.log(`❌ Removed ${artistName} from watchlist`);
+        } else {
+            // Was not watching, now added
+            icon.textContent = '👁️';
+            text.textContent = 'Watching...';
+            button.classList.add('watching');
+            console.log(`✅ Added ${artistName} to watchlist`);
+        }
+
+        // Update dashboard watchlist count if function exists
+        if (typeof updateWatchlistCount === 'function') {
+            updateWatchlistCount();
+        }
+
+        showToast(data.message, 'success');
+
+    } catch (error) {
+        console.error('Error toggling library watchlist:', error);
+
+        // Restore button state
+        text.textContent = originalText;
+        showToast(`Error: ${error.message}`, 'error');
+
+    } finally {
+        button.disabled = false;
+    }
+}
+
+/**
+ * Update library watchlist button status based on current state
+ */
+async function updateLibraryWatchlistButtonStatus(artistId) {
+    const button = document.getElementById('library-artist-watchlist-btn');
+    if (!button) return;
+
+    try {
+        const response = await fetch('/api/watchlist/check', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ artist_id: artistId })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            const icon = button.querySelector('.watchlist-icon');
+            const text = button.querySelector('.watchlist-text');
+
+            if (data.is_watching) {
+                icon.textContent = '👁️';
+                text.textContent = 'Watching...';
+                button.classList.add('watching');
+            } else {
+                icon.textContent = '👁️';
+                text.textContent = 'Add to Watchlist';
+                button.classList.remove('watching');
+            }
+        }
+    } catch (error) {
+        console.warn('Failed to check library watchlist status:', error);
+    }
+}
+
+// =================================
+
diff --git a/webui/static/media-player.js b/webui/static/media-player.js
new file mode 100644
index 00000000..85f25796
--- /dev/null
+++ b/webui/static/media-player.js
@@ -0,0 +1,2399 @@
+// MEDIA PLAYER FUNCTIONALITY
+// ===============================
+
+function initializeMediaPlayer() {
+    const trackTitle = document.getElementById('track-title');
+    const playButton = document.getElementById('play-button');
+    const stopButton = document.getElementById('stop-button');
+    const volumeSlider = document.getElementById('volume-slider');
+
+    // Start in idle state (no track playing)
+    const player = document.getElementById('media-player');
+    if (player && !currentTrack) player.classList.add('idle');
+
+    // Initialize HTML5 audio player
+    audioPlayer = document.getElementById('audio-player');
+    if (audioPlayer) {
+        // Set up audio event listeners
+        audioPlayer.addEventListener('timeupdate', updateAudioProgress);
+        audioPlayer.addEventListener('ended', onAudioEnded);
+        audioPlayer.addEventListener('error', onAudioError);
+        audioPlayer.addEventListener('loadstart', onAudioLoadStart);
+        audioPlayer.addEventListener('canplay', onAudioCanPlay);
+
+        // Set initial volume
+        audioPlayer.volume = 0.7; // 70%
+        if (volumeSlider) volumeSlider.value = 70;
+    }
+
+    // Track title click handled by initExpandedPlayer's media-player click handler
+
+    // Media controls
+    playButton.addEventListener('click', handlePlayPause);
+    stopButton.addEventListener('click', handleStop);
+    if (volumeSlider) volumeSlider.addEventListener('input', handleVolumeChange);
+
+    // Progress bar controls
+    const progressBar = document.getElementById('progress-bar');
+    if (progressBar) {
+        // Handle seeking
+        progressBar.addEventListener('input', handleProgressBarChange);
+        progressBar.addEventListener('mousedown', () => {
+            progressBar.dataset.seeking = 'true';
+        });
+        progressBar.addEventListener('mouseup', () => {
+            delete progressBar.dataset.seeking;
+        });
+    }
+
+    // Update volume slider styling
+    if (volumeSlider) volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
+
+    // Mini player prev / next buttons
+    const miniPrevBtn = document.getElementById('mini-prev-btn');
+    const miniNextBtn = document.getElementById('mini-next-btn');
+    if (miniPrevBtn) miniPrevBtn.addEventListener('click', (e) => { e.stopPropagation(); playPreviousInQueue(); });
+    if (miniNextBtn) miniNextBtn.addEventListener('click', (e) => { e.stopPropagation(); playNextInQueue(); });
+}
+
+function toggleMediaPlayerExpansion() {
+    // No-op: controls are always visible in the new layout.
+    // Kept for backward compatibility with any callers.
+}
+
+function extractTrackTitle(filename) {
+    if (!filename) return null;
+
+    // Remove file extension
+    let title = filename.replace(/\.[^/.]+$/, '');
+
+    // Remove path components, keep only the filename
+    title = title.split('/').pop().split('\\').pop();
+
+    // Clean up common filename patterns
+    title = title
+        .replace(/^\d+\.?\s*/, '') // Remove track numbers at start
+        .replace(/^\d+\s*-\s*/, '') // Remove "01 - " patterns
+        .replace(/\s*-\s*\d{4}\s*$/, '') // Remove years at end
+        .replace(/\s*\[\d+kbps\].*$/, '') // Remove bitrate info
+        .replace(/\s*\(.*?\)\s*$/, '') // Remove parenthetical info at end
+        .trim();
+
+    return title || null;
+}
+
+function setTrackInfo(track) {
+    currentTrack = track;
+
+    const trackTitleElement = document.getElementById('track-title');
+    const trackTitle = track.title || 'Unknown Track';
+
+    // Set up the HTML structure for scrolling
+    trackTitleElement.innerHTML = `<span class="title-text">${escapeHtml(trackTitle)}</span>`;
+
+    document.getElementById('artist-name').textContent = track.artist || 'Unknown Artist';
+    document.getElementById('album-name').textContent = track.album || 'Unknown Album';
+
+    // Check if title needs scrolling (similar to GUI app)
+    setTimeout(() => {
+        checkAndEnableScrolling(trackTitleElement, trackTitle);
+    }, 100); // Allow DOM to settle
+
+    // Enable controls
+    document.getElementById('play-button').disabled = false;
+    document.getElementById('stop-button').disabled = false;
+
+    // Hide no track message and expand player
+    document.getElementById('no-track-message').classList.add('hidden');
+    document.getElementById('media-player').classList.remove('idle');
+
+    // Sync expanded player and media session
+    updateNpTrackInfo();
+    updateMediaSessionMetadata();
+    updateMediaSessionPlaybackState();
+}
+
+function checkAndEnableScrolling(element, text) {
+    // Remove any existing scrolling class and reset styles
+    element.classList.remove('scrolling');
+    element.style.removeProperty('--scroll-distance');
+
+    // Force a layout to get accurate measurements
+    element.offsetWidth;
+
+    // Get the inner text element
+    const titleTextElement = element.querySelector('.title-text');
+    if (!titleTextElement) return;
+
+    // Check if text is wider than container
+    const containerWidth = element.offsetWidth;
+    const textWidth = titleTextElement.scrollWidth;
+
+    // Enable scrolling if text is significantly wider than container
+    if (textWidth > containerWidth + 15) {
+        const scrollDistance = containerWidth - textWidth;
+        element.style.setProperty('--scroll-distance', `${scrollDistance}px`);
+        element.classList.add('scrolling');
+        console.log(`📜 Enabled scrolling for title: "${text}"`);
+        console.log(`📜 Container: ${containerWidth}px, Text: ${textWidth}px, Scroll: ${scrollDistance}px`);
+    }
+}
+
+
+function clearTrack() {
+    // Clear track state
+    currentTrack = null;
+    isPlaying = false;
+
+    const trackTitleElement = document.getElementById('track-title');
+    trackTitleElement.innerHTML = '<span class="title-text">No track</span>';
+    trackTitleElement.classList.remove('scrolling'); // Remove scrolling animation
+    trackTitleElement.style.removeProperty('--scroll-distance'); // Clear CSS variable
+
+    document.getElementById('artist-name').textContent = 'Unknown Artist';
+    document.getElementById('album-name').textContent = 'Unknown Album';
+    // Reset play button SVGs (don't use textContent — it destroys SVG children)
+    const clearPlayBtn = document.getElementById('play-button');
+    const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
+    const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
+    if (clearPlayIcon) clearPlayIcon.style.display = '';
+    if (clearPauseIcon) clearPauseIcon.style.display = 'none';
+    clearPlayBtn.disabled = true;
+    document.getElementById('stop-button').disabled = true;
+
+    // Reset progress bar and time displays
+    const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
+    if (progressBar) {
+        progressBar.value = 0;
+        delete progressBar.dataset.seeking;
+    }
+    if (progressFill) {
+        progressFill.style.width = '0%';
+    }
+
+    const currentTimeElement = document.getElementById('current-time');
+    const totalTimeElement = document.getElementById('total-time');
+    if (currentTimeElement) currentTimeElement.textContent = '0:00';
+    if (totalTimeElement) totalTimeElement.textContent = '0:00';
+
+    // Hide loading animation
+    hideLoadingAnimation();
+
+    // Show no track message and collapse player
+    document.getElementById('no-track-message').classList.remove('hidden');
+    document.getElementById('media-player').classList.add('idle');
+
+    // Reset queue state
+    npQueue = [];
+    npQueueIndex = -1;
+
+    // Sync expanded player and media session
+    updateNpTrackInfo();
+    updateNpPlayButton();
+    updateNpProgress();
+    renderNpQueue();
+    updateNpPrevNextButtons();
+    updateMediaSessionPlaybackState();
+    stopSidebarVisualizer();
+    if (npModalOpen) closeNowPlayingModal();
+
+    console.log('🧹 Track cleared and media player reset');
+}
+
+function setPlayingState(playing) {
+    isPlaying = playing;
+    const playButton = document.getElementById('play-button');
+    // Toggle SVG icons (don't use textContent — it destroys SVG children)
+    const playIcon = playButton.querySelector('.play-icon');
+    const pauseIcon = playButton.querySelector('.pause-icon');
+    if (playIcon) playIcon.style.display = playing ? 'none' : '';
+    if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
+    updateNpPlayButton();
+    updateMediaSessionPlaybackState();
+
+    // Sidebar audio visualizer
+    if (playing) {
+        npInitVisualizer();
+        startSidebarVisualizer();
+    } else {
+        stopSidebarVisualizer();
+    }
+}
+
+async function handlePlayPause() {
+    // Use new streaming system toggle function
+    togglePlayback();
+}
+
+async function handleStop() {
+    // Use new streaming system stop function
+    await stopStream();
+    clearTrack();
+}
+
+function handleVolumeChange(event) {
+    const volume = event.target.value;
+    updateVolumeSliderAppearance();
+
+    // Update HTML5 audio player volume
+    if (audioPlayer) {
+        audioPlayer.volume = volume / 100;
+    }
+
+    // Sync modal volume and clear mute state
+    npMuted = false;
+    const npVol = document.getElementById('np-volume-slider');
+    const npFill = document.getElementById('np-volume-fill');
+    if (npVol) npVol.value = volume;
+    if (npFill) npFill.style.width = volume + '%';
+    updateNpMuteIcon();
+}
+
+function handleProgressBarChange(event) {
+    // Handle seeking in the audio track
+    if (!audioPlayer || !audioPlayer.duration) return;
+
+    const progress = parseFloat(event.target.value);
+    const newTime = (progress / 100) * audioPlayer.duration;
+
+    console.log(`🎯 Seeking to ${formatTime(newTime)} (${progress.toFixed(1)}%)`);
+
+    try {
+        audioPlayer.currentTime = newTime;
+
+        // Update visual progress immediately
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            progressFill.style.width = `${progress}%`;
+        }
+
+        // Update time displays immediately
+        const currentTimeElement = document.getElementById('current-time');
+        if (currentTimeElement) {
+            currentTimeElement.textContent = formatTime(newTime);
+        }
+
+        // Sync modal progress
+        const npBar = document.getElementById('np-progress-bar');
+        const npFill = document.getElementById('np-progress-fill');
+        const npTime = document.getElementById('np-current-time');
+        if (npBar) npBar.value = progress;
+        if (npFill) npFill.style.width = progress + '%';
+        if (npTime) npTime.textContent = formatTime(newTime);
+    } catch (error) {
+        console.warn('⚠️ Seek failed:', error.message);
+        // Reset progress bar to current position
+        const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+        event.target.value = actualProgress;
+        const progressFill = document.getElementById('progress-fill');
+        if (progressFill) {
+            progressFill.style.width = `${actualProgress}%`;
+        }
+    }
+}
+
+function updateVolumeSliderAppearance() {
+    const slider = document.getElementById('volume-slider');
+    if (!slider) return;
+    const value = slider.value;
+    slider.style.setProperty('--volume-percent', `${value}%`);
+}
+
+function showLoadingAnimation() {
+    document.getElementById('loading-animation').classList.remove('hidden');
+}
+
+function hideLoadingAnimation() {
+    document.getElementById('loading-animation').classList.add('hidden');
+}
+
+function setLoadingProgress(percentage) {
+    const loadingAnimation = document.getElementById('loading-animation');
+    const progressBar = loadingAnimation.querySelector('.loading-progress');
+    const loadingText = loadingAnimation.querySelector('.loading-text');
+
+    loadingAnimation.classList.remove('hidden');
+    progressBar.style.width = `${percentage}%`;
+    loadingText.textContent = `${Math.round(percentage)}%`;
+}
+
+// ===============================
+// STREAMING FUNCTIONALITY
+// ===============================
+
+let _streamLock = false;
+
+async function startStream(searchResult) {
+    // Start streaming a track - handles same track toggle and new track streaming
+    try {
+        // Prevent multiple concurrent stream starts (rapid clicking)
+        if (_streamLock) {
+            console.log('⏳ Stream already starting, ignoring duplicate click');
+            return;
+        }
+
+        console.log(`🎮 startStream() called with data:`, searchResult);
+
+        // Check if this is the same track that's currently playing/loading
+        const currentTrackId = currentTrack ? `${currentTrack.username}:${currentTrack.filename}` : null;
+        const newTrackId = `${searchResult.username}:${searchResult.filename}`;
+
+        console.log(`🎮 startStream() called for: ${searchResult.filename}`);
+        console.log(`🎮 Current track ID: ${currentTrackId}`);
+        console.log(`🎮 New track ID: ${newTrackId}`);
+
+        if (currentTrackId === newTrackId && audioPlayer && !audioPlayer.paused) {
+            // Same track clicked while playing - toggle pause
+            console.log("🔄 Toggling playback for same track");
+            togglePlayback();
+            return;
+        }
+
+        // Lock to prevent duplicate stream starts
+        _streamLock = true;
+
+        // Different track or no current track - start new stream
+        console.log("🎵 Starting new stream");
+
+        // Stop current streaming/playback if any
+        await stopStream();
+
+        // Set track info and show loading state
+        setTrackInfo({
+            title: extractTrackTitle(searchResult.filename) || searchResult.title || 'Unknown Track',
+            artist: searchResult.artist || searchResult.username || 'Unknown Artist',
+            album: searchResult.album || 'Unknown Album',
+            username: searchResult.username,
+            filename: searchResult.filename,
+            image_url: searchResult.image_url || searchResult.album_cover_url || null
+        });
+
+        showLoadingAnimation();
+        setLoadingProgress(0);
+
+        // Start streaming request
+        const response = await fetch(API.stream.start, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(searchResult)
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        if (!data.success) {
+            throw new Error(data.error || 'Failed to start streaming');
+        }
+
+        console.log("✅ Stream started successfully");
+
+        // Start status polling
+        startStreamStatusPolling();
+
+    } catch (error) {
+        console.error('Error starting stream:', error);
+        showToast(`Failed to start stream: ${error.message}`, 'error');
+        hideLoadingAnimation();
+        clearTrack();
+    } finally {
+        _streamLock = false;
+    }
+}
+
+function startStreamStatusPolling() {
+    // Start polling for stream status updates with retry logic
+    if (streamStatusPoller) {
+        clearInterval(streamStatusPoller);
+    }
+
+    // Reset polling state
+    streamPollingRetries = 0;
+    streamPollingInterval = 1000; // Reset to 1-second interval
+
+    console.log('🔄 Starting enhanced stream status polling');
+    updateStreamStatus(); // Initial check
+    streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
+}
+
+function stopStreamStatusPolling() {
+    // Stop polling for stream status updates
+    if (streamStatusPoller) {
+        clearInterval(streamStatusPoller);
+        streamStatusPoller = null;
+        streamPollingRetries = 0;
+        streamPollingInterval = 1000; // Reset interval
+        console.log('⏹️ Stopped stream status polling');
+    }
+}
+
+// Phase 4: Track last known tool statuses to prevent repeated toasts on terminal states
+let _lastToolStatus = {};
+
+// Phase 5: Sync/Discovery/Scan WebSocket router functions
+function updateSyncProgressFromData(data) {
+    const pid = data.playlist_id;
+    const callback = _syncProgressCallbacks[pid];
+    if (callback) callback(data);
+}
+
+function updateDiscoveryProgressFromData(data) {
+    const id = data.id;
+    const callback = _discoveryProgressCallbacks[id];
+    if (callback) callback(data);
+}
+
+function updateWatchlistScanFromData(data) {
+    if (!data.success) return;
+    if (_lastWatchlistScanStatus === data.status && data.status !== 'scanning') return;
+    _lastWatchlistScanStatus = data.status;
+    handleWatchlistScanData(data);
+}
+
+function updateMediaScanFromData(data) {
+    if (!data.success || !data.status) return;
+    const status = data.status;
+    const statusKey = status.is_scanning ? 'scanning' : (status.status || 'unknown');
+    if (_lastMediaScanStatus === statusKey && statusKey !== 'scanning') return;
+    _lastMediaScanStatus = statusKey;
+
+    const phaseLabel = document.getElementById('media-scan-phase-label');
+    const progressLabel = document.getElementById('media-scan-progress-label');
+    const button = document.getElementById('media-scan-btn');
+    const progressBar = document.getElementById('media-scan-progress-bar');
+    const statusValue = document.getElementById('media-scan-status');
+
+    if (status.is_scanning) {
+        if (phaseLabel) phaseLabel.textContent = 'Media server scanning...';
+        if (progressLabel) progressLabel.textContent = status.progress_message || 'Scan in progress';
+    } else if (status.status === 'idle') {
+        if (button) button.disabled = false;
+        if (phaseLabel) phaseLabel.textContent = 'Scan completed successfully';
+        if (progressBar) progressBar.style.width = '0%';
+        if (progressLabel) progressLabel.textContent = 'Ready for next scan';
+        if (statusValue) {
+            statusValue.textContent = 'Idle';
+            statusValue.style.color = '#b3b3b3';
+        }
+        showToast('✅ Media scan completed', 'success', 3000);
+    }
+}
+
+let _wishlistAutoProcessingNotified = false;
+function updateWishlistStatsFromData(data) {
+    // Auto-processing detection: close modal and notify (once only)
+    if (data.is_auto_processing) {
+        if (!_wishlistAutoProcessingNotified) {
+            if (currentPage === 'wishlist') navigateToPage('active-downloads');
+            showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
+            _wishlistAutoProcessingNotified = true;
+        }
+        return;
+    }
+    // Reset flag when auto-processing ends
+    _wishlistAutoProcessingNotified = false;
+    // Store latest stats for countdown timer refresh
+    _lastWishlistStats = data;
+}
+
+async function updateStreamStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    // Poll server for streaming progress and handle state changes with enhanced error recovery
+    try {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
+
+        const response = await fetch(API.stream.status, {
+            signal: controller.signal
+        });
+
+        clearTimeout(timeoutId);
+
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        const data = await response.json();
+
+        // Reset retry count on successful response
+        streamPollingRetries = 0;
+        streamPollingInterval = 1000; // Reset to normal interval
+
+        // Update current stream state
+        currentStream.status = data.status;
+        currentStream.progress = data.progress;
+
+        switch (data.status) {
+            case 'loading':
+                setLoadingProgress(data.progress);
+                // Update loading text with progress
+                const loadingText = document.querySelector('.loading-text');
+                if (loadingText && data.progress > 0) {
+                    loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
+                }
+                break;
+
+            case 'queued':
+                // Show queue status with better messaging
+                const queueText = document.querySelector('.loading-text');
+                if (queueText) {
+                    queueText.textContent = 'Queuing with uploader...';
+                }
+                setLoadingProgress(0); // Reset progress for queue state
+                break;
+
+            case 'ready':
+                // Stream is ready - start audio playback
+                console.log('🎵 Stream ready, starting audio playback');
+                stopStreamStatusPolling();
+                // Restore player UI if JS state was wiped (e.g. page refresh)
+                if (!currentTrack && data.track_info) {
+                    const ti = data.track_info;
+                    setTrackInfo({
+                        title: ti.name || ti.title || 'Unknown Track',
+                        artist: ti.artist || 'Unknown Artist',
+                        album: ti.album || 'Unknown Album',
+                        filename: ti.filename || '',
+                        is_library: !!ti.is_library,
+                        image_url: ti.image_url || null,
+                        id: ti.id || null,
+                        artist_id: ti.artist_id || null,
+                        album_id: ti.album_id || null,
+                    });
+                }
+                await startAudioPlayback();
+                break;
+
+            case 'error':
+                console.error('❌ Streaming error:', data.error_message);
+                stopStreamStatusPolling();
+                hideLoadingAnimation();
+                showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
+                clearTrack();
+                break;
+
+            case 'stopped':
+                // Handle stopped state — do NOT clear track here; explicit stop (handleStop)
+                // calls clearTrack() directly. Clearing here collapses the player mid-playback
+                // when the backend transitions to 'stopped' after audio naturally ends or during
+                // queue track transitions.
+                console.log('🛑 Stream stopped');
+                stopStreamStatusPolling();
+                hideLoadingAnimation();
+                break;
+        }
+
+    } catch (error) {
+        streamPollingRetries++;
+        console.warn(`Stream status polling error (attempt ${streamPollingRetries}):`, error.message);
+
+        if (streamPollingRetries >= maxStreamPollingRetries) {
+            // Too many consecutive failures - give up
+            console.error('❌ Stream status polling failed after maximum retries');
+            stopStreamStatusPolling();
+            hideLoadingAnimation();
+            showToast('Lost connection to streaming server', 'error');
+            clearTrack();
+        } else {
+            // Implement exponential backoff for retries
+            const backoffMultiplier = Math.min(streamPollingRetries, 5); // Max 5x backoff
+            streamPollingInterval = 1000 * backoffMultiplier;
+
+            // Restart polling with new interval
+            if (streamStatusPoller) {
+                clearInterval(streamStatusPoller);
+                streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
+                console.log(`🔄 Retrying stream status polling with ${streamPollingInterval}ms interval`);
+            }
+        }
+    }
+}
+
+function updateStreamStatusFromData(data) {
+    const prev = _lastToolStatus['stream'];
+    _lastToolStatus['stream'] = data.status;
+    // Skip repeated terminal states to avoid duplicate toasts/actions
+    if (prev !== undefined && data.status === prev && data.status !== 'loading' && data.status !== 'queued') return;
+
+    currentStream.status = data.status;
+    currentStream.progress = data.progress;
+
+    switch (data.status) {
+        case 'loading':
+            setLoadingProgress(data.progress);
+            const loadingText = document.querySelector('.loading-text');
+            if (loadingText && data.progress > 0) {
+                loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
+            }
+            break;
+        case 'queued':
+            const queueText = document.querySelector('.loading-text');
+            if (queueText) {
+                queueText.textContent = 'Queuing with uploader...';
+            }
+            setLoadingProgress(0);
+            break;
+        case 'ready':
+            console.log('🎵 Stream ready, starting audio playback');
+            stopStreamStatusPolling();
+            // Restore player UI if JS state was wiped (e.g. page refresh)
+            if (!currentTrack && data.track_info) {
+                const ti = data.track_info;
+                setTrackInfo({
+                    title: ti.name || ti.title || 'Unknown Track',
+                    artist: ti.artist || 'Unknown Artist',
+                    album: ti.album || 'Unknown Album',
+                    filename: ti.filename || '',
+                    is_library: !!ti.is_library,
+                    image_url: ti.image_url || null,
+                    id: ti.id || null,
+                    artist_id: ti.artist_id || null,
+                    album_id: ti.album_id || null,
+                });
+            }
+            startAudioPlayback();
+            break;
+        case 'error':
+            console.error('❌ Streaming error:', data.error_message);
+            stopStreamStatusPolling();
+            hideLoadingAnimation();
+            showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
+            clearTrack();
+            break;
+        case 'stopped':
+            // Do NOT clear track here — explicit stop (handleStop) calls clearTrack() directly.
+            // Clearing here collapses the player after audio naturally ends or during queue transitions.
+            console.log('🛑 Stream stopped');
+            stopStreamStatusPolling();
+            hideLoadingAnimation();
+            break;
+    }
+}
+
+async function startAudioPlayback() {
+    // Start HTML5 audio playback of the streamed file with enhanced state management
+    try {
+        if (!audioPlayer) {
+            throw new Error('Audio player not initialized');
+        }
+
+        // Show loading state while preparing audio
+        const loadingText = document.querySelector('.loading-text');
+        if (loadingText) {
+            loadingText.textContent = 'Preparing playback...';
+        }
+
+        // Set audio source with cache-busting timestamp
+        const audioUrl = `/stream/audio?t=${new Date().getTime()}`;
+        console.log(`🎵 Loading audio from: ${audioUrl}`);
+
+        // Clear any existing source first
+        audioPlayer.pause();
+        audioPlayer.currentTime = 0;
+        audioPlayer.src = '';
+
+        // Set new source
+        audioPlayer.src = audioUrl;
+        audioPlayer.load(); // Force reload
+
+        // Wait for audio to be ready with promise-based approach
+        await new Promise((resolve, reject) => {
+            const timeout = setTimeout(() => {
+                reject(new Error('Audio loading timeout'));
+            }, 15000); // 15-second timeout
+
+            const onCanPlay = () => {
+                clearTimeout(timeout);
+                audioPlayer.removeEventListener('canplay', onCanPlay);
+                audioPlayer.removeEventListener('error', onError);
+                resolve();
+            };
+
+            const onError = (event) => {
+                clearTimeout(timeout);
+                audioPlayer.removeEventListener('canplay', onCanPlay);
+                audioPlayer.removeEventListener('error', onError);
+                const error = event.target.error || new Error('Audio loading failed');
+                reject(error);
+            };
+
+            audioPlayer.addEventListener('canplay', onCanPlay);
+            audioPlayer.addEventListener('error', onError);
+
+            // If already ready, resolve immediately
+            if (audioPlayer.readyState >= 3) { // HAVE_FUTURE_DATA
+                onCanPlay();
+            }
+        });
+
+        console.log('✅ Audio loaded and ready for playback');
+
+        // Try to start playback with retry logic
+        let retryCount = 0;
+        const maxRetries = 3;
+
+        while (retryCount < maxRetries) {
+            try {
+                await audioPlayer.play();
+                console.log('✅ Audio playback started successfully');
+
+                // Update UI to playing state
+                hideLoadingAnimation();
+                setPlayingState(true);
+
+                // Show media player if hidden
+                const noTrackMessage = document.getElementById('no-track-message');
+                if (noTrackMessage) {
+                    noTrackMessage.classList.add('hidden');
+                }
+
+                // Update volume to current slider value
+                const volumeSlider = document.getElementById('volume-slider');
+                if (volumeSlider) {
+                    audioPlayer.volume = volumeSlider.value / 100;
+                }
+
+                // Enable play/stop buttons
+                const playButton = document.getElementById('play-button');
+                const stopButton = document.getElementById('stop-button');
+                if (playButton) playButton.disabled = false;
+                if (stopButton) stopButton.disabled = false;
+
+                return; // Success!
+
+            } catch (playError) {
+                retryCount++;
+                console.warn(`⚠️ Audio play attempt ${retryCount} failed:`, playError.message);
+
+                if (retryCount >= maxRetries) {
+                    throw playError; // Re-throw after max retries
+                }
+
+                // Wait before retry with exponential backoff
+                await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
+            }
+        }
+
+    } catch (error) {
+        console.error('❌ Error starting audio playback:', error);
+        hideLoadingAnimation();
+
+        // Provide user-friendly error messages
+        let userMessage = 'Playback failed';
+
+        if (error.message.includes('no supported source') ||
+            error.message.includes('Not supported') ||
+            error.message.includes('MEDIA_ELEMENT_ERROR')) {
+            userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+        } else if (error.message.includes('network') || error.message.includes('fetch')) {
+            userMessage = 'Network error - please check your connection';
+        } else if (error.message.includes('decode')) {
+            userMessage = 'Audio file is corrupted or incompatible';
+        } else if (error.message.includes('timeout')) {
+            userMessage = 'Audio loading timeout - file may be too large';
+        } else if (error.message.includes('AbortError')) {
+            userMessage = 'Playback was interrupted';
+        }
+
+        showToast(userMessage, 'error');
+        // Only clear track if not in queue playback mode — queue handles its own error recovery
+        if (npQueue.length === 0) {
+            clearTrack();
+        }
+    }
+}
+
+async function stopStream() {
+    // Stop streaming and clean up all state
+    try {
+        // Stop status polling
+        stopStreamStatusPolling();
+
+        // Stop audio playback
+        if (audioPlayer) {
+            audioPlayer.pause();
+            audioPlayer.src = '';
+        }
+
+        // Call backend stop endpoint
+        const response = await fetch(API.stream.stop, { method: 'POST' });
+        if (response.ok) {
+            const data = await response.json();
+            console.log('🛑 Stream stopped:', data.message);
+        }
+
+        // Reset UI state
+        hideLoadingAnimation();
+        setPlayingState(false);
+
+        // Reset stream state
+        currentStream = {
+            status: 'stopped',
+            progress: 0,
+            track: null
+        };
+
+    } catch (error) {
+        console.error('Error stopping stream:', error);
+    }
+}
+
+function togglePlayback() {
+    // Toggle play/pause for currently loaded audio
+    if (!audioPlayer || !currentTrack) {
+        console.log('⚠️ No audio player or track to toggle');
+        return;
+    }
+
+    if (audioPlayer.paused) {
+        audioPlayer.play()
+            .then(() => {
+                setPlayingState(true);
+                console.log('▶️ Resumed playback');
+            })
+            .catch(error => {
+                console.error('Error resuming playback:', error);
+                showToast('Failed to resume playback', 'error');
+            });
+    } else {
+        audioPlayer.pause();
+        setPlayingState(false);
+        console.log('⏸️ Paused playback');
+    }
+}
+
+// ===============================
+// AUDIO EVENT HANDLERS
+// ===============================
+
+function updateAudioProgress() {
+    // Update progress bar based on audio playback time
+    if (!audioPlayer || !audioPlayer.duration) return;
+
+    const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+
+    // Update progress bar
+    const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
+    if (progressBar && !progressBar.dataset.seeking) {
+        progressBar.value = progress;
+        // Update visual progress fill
+        if (progressFill) {
+            progressFill.style.width = `${progress}%`;
+        }
+    }
+
+    // Update time display
+    const currentTimeElement = document.getElementById('current-time');
+    const totalTimeElement = document.getElementById('total-time');
+
+    if (currentTimeElement) {
+        currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
+    }
+    if (totalTimeElement) {
+        totalTimeElement.textContent = formatTime(audioPlayer.duration);
+    }
+
+    // Sync expanded player modal
+    if (npModalOpen) updateNpProgress();
+}
+
+function onAudioEnded() {
+    // Handle audio playback completion
+    console.log('🏁 Audio playback ended');
+    setPlayingState(false);
+
+    // Reset progress to beginning
+    const progressBar = document.getElementById('progress-bar');
+    const progressFill = document.getElementById('progress-fill');
+    if (progressBar) {
+        progressBar.value = 0;
+    }
+    if (progressFill) {
+        progressFill.style.width = '0%';
+    }
+
+    const currentTimeElement = document.getElementById('current-time');
+    if (currentTimeElement) {
+        currentTimeElement.textContent = '0:00';
+    }
+
+    // Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
+    // Auto-advance to next track if queue has a next item (guard against race conditions)
+    if (npQueue.length > 0 && !npLoadingQueueItem) {
+        const hasNext = npShuffleOn
+            ? npQueue.length > 1
+            : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
+        if (hasNext) { playNextInQueue(); return; }
+    }
+
+    // Radio mode: auto-fetch similar tracks when queue is exhausted
+    if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
+        npFetchRadioTracks();
+    }
+}
+
+function onAudioError(event) {
+    // Handle audio playback errors
+    const error = event.target.error;
+    console.error('❌ Audio error:', error);
+
+    // Don't show error toast if it's just a format/codec issue and retrying
+    if (error && error.code) {
+        console.error(`Audio error code: ${error.code}, message: ${error.message || 'Unknown error'}`);
+
+        // Only show user-facing errors for serious issues
+        if (error.code === 4) { // MEDIA_ELEMENT_ERROR: Media not supported
+            console.warn('⚠️ Media format not supported by browser, but streaming may still work');
+            // Don't clear track or show error - let retry logic handle it
+            return;
+        }
+    }
+
+    hideLoadingAnimation();
+
+    // Only clear track after a short delay to allow for recovery
+    setTimeout(() => {
+        if (audioPlayer && audioPlayer.error) {
+            let userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+
+            if (error && error.code) {
+                switch (error.code) {
+                    case 1: // MEDIA_ERR_ABORTED
+                        userMessage = 'Playback was stopped';
+                        break;
+                    case 2: // MEDIA_ERR_NETWORK
+                        userMessage = 'Network error - please try again';
+                        break;
+                    case 3: // MEDIA_ERR_DECODE
+                        userMessage = 'Audio file is corrupted or incompatible';
+                        break;
+                    case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
+                        userMessage = 'Audio format not supported by your browser. Try downloading instead.';
+                        break;
+                }
+            }
+
+            showToast(userMessage, 'error');
+            // Only clear track if not in queue playback — queue handles its own recovery
+            if (npQueue.length === 0) {
+                clearTrack();
+            }
+        }
+    }, 2000);
+}
+
+function onAudioLoadStart() {
+    // Handle audio load start
+    console.log('🔄 Audio loading started');
+}
+
+function onAudioCanPlay() {
+    // Handle when audio can start playing
+    console.log('✅ Audio ready to play');
+}
+
+function formatTime(seconds) {
+    // Format seconds as MM:SS
+    if (!seconds || !isFinite(seconds)) return '0:00';
+
+    const minutes = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+}
+
+function formatCountdownTime(seconds) {
+    // Format seconds as countdown timer (e.g., "24m 13s", "2h 15m", "23h 59m")
+    if (seconds === null || seconds === undefined || seconds < 0) return '';
+    if (seconds === 0) return '0s';  // Show "0s" instead of hiding timer
+
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = Math.floor(seconds % 60);
+
+    if (hours > 0) {
+        return `${hours}h ${minutes}m`;
+    } else if (minutes > 0) {
+        return `${minutes}m ${secs}s`;
+    } else {
+        return `${secs}s`;
+    }
+}
+
+// ===============================
+// AUDIO FORMAT SUPPORT DETECTION
+// ===============================
+
+function getFileExtension(filename) {
+    if (!filename) return '';
+    const ext = filename.toLowerCase().match(/\.([^.]+)$/);
+    return ext ? ext[1] : '';
+}
+
+function isAudioFormatSupported(filename) {
+    const ext = getFileExtension(filename);
+    const supportedFormats = ['mp3', 'ogg', 'wav'];  // Most reliable formats
+    const partialSupport = ['flac', 'aac', 'm4a', 'opus', 'webm'];  // Test browser support
+    const unsupported = ['wma', 'ape', 'aiff'];  // Generally problematic
+
+    if (supportedFormats.includes(ext)) {
+        return true;
+    }
+
+    if (partialSupport.includes(ext)) {
+        // Test if browser can actually play this format
+        return canPlayAudioFormat(ext);
+    }
+
+    return false;  // Unsupported formats
+}
+
+function canPlayAudioFormat(extension) {
+    const audio = document.createElement('audio');
+
+    const mimeTypes = {
+        'mp3': 'audio/mpeg',
+        'ogg': 'audio/ogg; codecs="vorbis"',
+        'wav': 'audio/wav',
+        'flac': 'audio/flac',
+        'aac': 'audio/aac',
+        'm4a': 'audio/mp4; codecs="mp4a.40.2"',  // More specific M4A MIME type
+        'opus': 'audio/ogg; codecs="opus"',
+        'webm': 'audio/webm; codecs="opus"',
+        'wma': 'audio/x-ms-wma'
+    };
+
+    const mimeType = mimeTypes[extension];
+    if (!mimeType) {
+        console.warn(`🎵 [FORMAT CHECK] No MIME type found for extension: ${extension}`);
+        return false;
+    }
+
+    const canPlay = audio.canPlayType(mimeType);
+    console.log(`🎵 [FORMAT CHECK] ${extension} (${mimeType}): ${canPlay}`);
+
+    let isSupported = canPlay === 'probably' || canPlay === 'maybe';
+
+    // Special handling for M4A - try fallback MIME types if first one fails
+    if (!isSupported && extension === 'm4a') {
+        const fallbackMimeTypes = ['audio/mp4', 'audio/x-m4a', 'audio/aac'];
+        console.log(`🎵 [FORMAT CHECK] M4A failed with primary MIME type, trying fallbacks...`);
+
+        for (const fallbackMime of fallbackMimeTypes) {
+            const fallbackResult = audio.canPlayType(fallbackMime);
+            console.log(`🎵 [FORMAT CHECK] M4A fallback (${fallbackMime}): ${fallbackResult}`);
+            if (fallbackResult === 'probably' || fallbackResult === 'maybe') {
+                isSupported = true;
+                console.log(`🎵 [FORMAT CHECK] M4A supported with fallback MIME type: ${fallbackMime}`);
+                break;
+            }
+        }
+    }
+
+    console.log(`🎵 [FORMAT CHECK] ${extension} final support result: ${isSupported}`);
+    return isSupported;
+}
+
+// ===============================
+// EXPANDED NOW PLAYING MODAL
+// ===============================
+
+let npModalOpen = false;
+let npRepeatMode = 'off';     // 'off' | 'all' | 'one'
+let npShuffleOn = false;
+let npQueue = [];
+let npQueueIndex = -1;
+let npMuted = false;
+let npPreMuteVolume = 70;
+let npMediaSessionThrottle = 0;
+let npLoadingQueueItem = false;
+let npRadioMode = false;
+let npRecentlyPlayedIds = [];
+let npAudioContext = null;
+let npAnalyser = null;
+let npMediaSource = null;
+let npVizAnimFrame = null;
+let npVizInitialized = false;
+
+function initExpandedPlayer() {
+    const closeBtn = document.getElementById('np-close-btn');
+    const overlay = document.getElementById('np-modal-overlay');
+    const playBtn = document.getElementById('np-play-btn');
+    const stopBtn = document.getElementById('np-stop-btn');
+    const shuffleBtn = document.getElementById('np-shuffle-btn');
+    const repeatBtn = document.getElementById('np-repeat-btn');
+    const muteBtn = document.getElementById('np-mute-btn');
+    const npProgressBar = document.getElementById('np-progress-bar');
+    const npVolumeSlider = document.getElementById('np-volume-slider');
+
+    if (!overlay) return;
+
+    // Close handlers
+    closeBtn.addEventListener('click', closeNowPlayingModal);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
+
+    // Control handlers
+    playBtn.addEventListener('click', () => { togglePlayback(); });
+    stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
+    shuffleBtn.addEventListener('click', handleNpShuffle);
+    repeatBtn.addEventListener('click', handleNpRepeat);
+    muteBtn.addEventListener('click', handleNpMuteToggle);
+
+    // Progress bar (mouse)
+    npProgressBar.addEventListener('input', handleNpProgressBarChange);
+    npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
+    npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
+
+    // Progress bar (touch)
+    npProgressBar.addEventListener('touchstart', () => { npProgressBar.dataset.seeking = 'true'; }, { passive: true });
+    npProgressBar.addEventListener('touchmove', (e) => {
+        const touch = e.touches[0];
+        const rect = npProgressBar.getBoundingClientRect();
+        const pct = Math.max(0, Math.min(100, ((touch.clientX - rect.left) / rect.width) * 100));
+        npProgressBar.value = pct;
+        npProgressBar.dispatchEvent(new Event('input'));
+    }, { passive: true });
+    npProgressBar.addEventListener('touchend', () => { delete npProgressBar.dataset.seeking; }, { passive: true });
+
+    // Volume slider
+    npVolumeSlider.addEventListener('input', handleNpVolumeChange);
+
+    // Keyboard shortcuts (global)
+    document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
+
+    // Make sidebar media player clickable to open modal
+    const mediaPlayer = document.getElementById('media-player');
+    if (mediaPlayer) {
+        mediaPlayer.style.cursor = 'pointer';
+        mediaPlayer.addEventListener('click', (e) => {
+            // Don't open modal when clicking controls (let expand-hint through)
+            if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon, .mini-nav-btn') && !e.target.closest('.expand-hint')) return;
+            if (currentTrack) openNowPlayingModal();
+        });
+    }
+
+    // Prev / Next buttons
+    const prevBtn = document.getElementById('np-prev-btn');
+    const nextBtn = document.getElementById('np-next-btn');
+    if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
+    if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
+
+    // Queue panel toggle + clear
+    const queueToggle = document.getElementById('np-queue-toggle');
+    if (queueToggle) {
+        queueToggle.addEventListener('click', () => {
+            const body = document.getElementById('np-queue-body');
+            if (body) body.classList.toggle('hidden');
+            queueToggle.classList.toggle('active');
+        });
+    }
+    const queueClearBtn = document.getElementById('np-queue-clear');
+    if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
+
+    // Radio mode button
+    const radioBtn = document.getElementById('np-radio-btn');
+    if (radioBtn) {
+        radioBtn.addEventListener('click', () => {
+            npRadioMode = !npRadioMode;
+            radioBtn.classList.toggle('active', npRadioMode);
+            showToast(npRadioMode ? 'Radio mode on — similar tracks will auto-queue' : 'Radio mode off', 'success');
+            // Immediately fetch radio tracks if turned on while playing with empty/exhausted queue
+            if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
+                const hasNext = npQueue.length > 0 && (npShuffleOn
+                    ? npQueue.length > 1
+                    : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
+                if (!hasNext) {
+                    // Add current track to queue first so it appears as "now playing" in context
+                    if (npQueue.length === 0 && currentTrack.is_library) {
+                        npQueue.push({
+                            title: currentTrack.title,
+                            artist: currentTrack.artist,
+                            album: currentTrack.album,
+                            file_path: currentTrack.filename || currentTrack.file_path,
+                            filename: currentTrack.filename || currentTrack.file_path,
+                            is_library: true,
+                            image_url: currentTrack.image_url,
+                            id: currentTrack.id,
+                            artist_id: currentTrack.artist_id,
+                            album_id: currentTrack.album_id,
+                            bitrate: currentTrack.bitrate
+                        });
+                        npQueueIndex = 0;
+                        renderNpQueue();
+                        updateNpPrevNextButtons();
+                    }
+                    npFetchRadioTracks();
+                }
+            }
+        });
+    }
+
+    // Action button (Go to Artist)
+    const gotoArtistBtn = document.getElementById('np-goto-artist');
+    if (gotoArtistBtn) {
+        gotoArtistBtn.addEventListener('click', () => {
+            if (currentTrack && currentTrack.artist_id) {
+                closeNowPlayingModal();
+                navigateToArtistDetail(currentTrack.artist_id, currentTrack.artist || '');
+            }
+        });
+    }
+    // Buffering state listeners on audioPlayer
+    if (audioPlayer) {
+        audioPlayer.addEventListener('waiting', () => {
+            const ring = document.getElementById('np-buffering-ring');
+            if (ring) ring.classList.remove('hidden');
+        });
+        audioPlayer.addEventListener('canplay', () => {
+            const ring = document.getElementById('np-buffering-ring');
+            if (ring) ring.classList.add('hidden');
+        });
+        audioPlayer.addEventListener('playing', () => {
+            const ring = document.getElementById('np-buffering-ring');
+            if (ring) ring.classList.add('hidden');
+        });
+    }
+
+    // Init Media Session API
+    initMediaSession();
+}
+
+function openNowPlayingModal() {
+    const overlay = document.getElementById('np-modal-overlay');
+    if (!overlay) return;
+    npModalOpen = true;
+    overlay.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+    syncExpandedPlayerUI();
+    // Start visualizer if already playing
+    if (isPlaying) { npInitVisualizer(); npStartVisualizerLoop(); }
+}
+
+function closeNowPlayingModal() {
+    const overlay = document.getElementById('np-modal-overlay');
+    if (!overlay) return;
+    npModalOpen = false;
+    overlay.classList.add('hidden');
+    document.body.style.overflow = '';
+    npStopVisualizerLoop();
+}
+
+function syncExpandedPlayerUI() {
+    if (!npModalOpen) return;
+
+    // Track info
+    updateNpTrackInfo();
+
+    // Play state
+    updateNpPlayButton();
+
+    // Progress
+    updateNpProgress();
+
+    // Volume
+    const sidebarVol = document.getElementById('volume-slider');
+    const npVol = document.getElementById('np-volume-slider');
+    const npVolFill = document.getElementById('np-volume-fill');
+    if (sidebarVol && npVol) {
+        npVol.value = sidebarVol.value;
+        if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
+    }
+
+    // Visualizer
+    const viz = document.getElementById('np-visualizer');
+    if (viz) viz.classList.toggle('playing', isPlaying);
+
+    // Queue
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function updateNpTrackInfo() {
+    const titleEl = document.getElementById('np-track-title');
+    const artistEl = document.getElementById('np-artist-name');
+    const albumEl = document.getElementById('np-album-name');
+    const artImg = document.getElementById('np-album-art');
+    const artPlaceholder = document.getElementById('np-album-art-placeholder');
+    const badgesEl = document.getElementById('np-format-badges');
+    const actionBtns = document.getElementById('np-action-buttons');
+
+    if (!titleEl) return;
+
+    // Sidebar album art
+    const sidebarArt = document.getElementById('sidebar-album-art');
+
+    if (currentTrack) {
+        // Track text transition animation
+        const textEls = [titleEl, artistEl, albumEl];
+        const oldTitle = titleEl.textContent;
+        const newTitle = currentTrack.title || 'Unknown Track';
+        const trackChanged = oldTitle !== newTitle && oldTitle !== 'No track';
+
+        titleEl.textContent = newTitle;
+        artistEl.textContent = currentTrack.artist || 'Unknown Artist';
+        albumEl.textContent = currentTrack.album || 'Unknown Album';
+
+        if (trackChanged) {
+            textEls.forEach(el => {
+                el.classList.remove('np-text-transition');
+                void el.offsetWidth; // force reflow
+                el.classList.add('np-text-transition');
+            });
+        }
+
+        // Album art (modal + sidebar) + ambient glow extraction
+        const artUrl = getNpAlbumArtUrl();
+        if (artUrl && artImg) {
+            // Only set crossOrigin for external URLs — local paths break with CORS headers
+            if (artUrl.startsWith('http')) {
+                artImg.crossOrigin = 'anonymous';
+            } else {
+                artImg.removeAttribute('crossOrigin');
+            }
+            artImg.src = artUrl;
+            artImg.classList.remove('hidden');
+            artImg.onerror = () => { artImg.classList.add('hidden'); npResetAmbientGlow(); };
+            artImg.onload = () => { npExtractAmbientColor(artImg); };
+        } else if (artImg) {
+            artImg.classList.add('hidden');
+            npResetAmbientGlow();
+        }
+        if (sidebarArt) {
+            if (artUrl) {
+                sidebarArt.src = artUrl;
+                sidebarArt.style.display = '';
+                sidebarArt.onerror = () => { sidebarArt.src = '/static/trans2.png'; };
+            } else {
+                sidebarArt.src = '/static/trans2.png';
+            }
+        }
+
+        // Format badges (richer: include bitrate/sample_rate)
+        if (badgesEl) {
+            badgesEl.innerHTML = '';
+            const filename = currentTrack.filename || '';
+            if (filename) {
+                const ext = getFileExtension(filename);
+                if (ext) {
+                    let label = ext.toUpperCase();
+                    if (currentTrack.sample_rate) {
+                        const khz = (currentTrack.sample_rate / 1000);
+                        label += ' ' + (khz % 1 === 0 ? khz.toFixed(0) : khz.toFixed(1)) + 'kHz';
+                    }
+                    const badge = document.createElement('span');
+                    badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
+                    badge.textContent = label;
+                    badgesEl.appendChild(badge);
+                }
+                if (currentTrack.bitrate) {
+                    const brBadge = document.createElement('span');
+                    brBadge.className = 'np-format-badge';
+                    brBadge.textContent = currentTrack.bitrate + 'k';
+                    badgesEl.appendChild(brBadge);
+                }
+            }
+        }
+
+        // Action buttons visibility
+        if (actionBtns) {
+            const hasArtist = currentTrack.artist_id;
+            actionBtns.classList.toggle('hidden', !hasArtist);
+        }
+
+        // Track recently played for radio mode
+        if (currentTrack.id && !npRecentlyPlayedIds.includes(currentTrack.id)) {
+            npRecentlyPlayedIds.push(currentTrack.id);
+            if (npRecentlyPlayedIds.length > 50) npRecentlyPlayedIds.shift();
+        }
+    } else {
+        titleEl.textContent = 'No track';
+        artistEl.textContent = 'Unknown Artist';
+        albumEl.textContent = 'Unknown Album';
+        if (artImg) artImg.classList.add('hidden');
+        if (sidebarArt) sidebarArt.src = '/static/trans2.png';
+        if (badgesEl) badgesEl.innerHTML = '';
+        if (actionBtns) actionBtns.classList.add('hidden');
+        npResetAmbientGlow();
+    }
+}
+
+function npExtractAmbientColor(imgEl) {
+    try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = 50;
+        canvas.height = 50;
+        ctx.drawImage(imgEl, 0, 0, 50, 50);
+        const data = ctx.getImageData(0, 0, 50, 50).data;
+        let rSum = 0, gSum = 0, bSum = 0, count = 0;
+        for (let i = 0; i < data.length; i += 16) { // sample every 4th pixel
+            const r = data[i], g = data[i + 1], b = data[i + 2];
+            const brightness = (r + g + b) / 3;
+            if (brightness > 20 && brightness < 230) {
+                rSum += r; gSum += g; bSum += b; count++;
+            }
+        }
+        if (count > 0) {
+            const modal = document.querySelector('.np-modal');
+            if (modal) {
+                modal.style.setProperty('--np-ambient-r', Math.round(rSum / count));
+                modal.style.setProperty('--np-ambient-g', Math.round(gSum / count));
+                modal.style.setProperty('--np-ambient-b', Math.round(bSum / count));
+            }
+        }
+    } catch (e) {
+        // Cross-origin or canvas error — ignore silently
+    }
+}
+
+function npResetAmbientGlow() {
+    const modal = document.querySelector('.np-modal');
+    if (modal) {
+        modal.style.setProperty('--np-ambient-r', '29');
+        modal.style.setProperty('--np-ambient-g', '185');
+        modal.style.setProperty('--np-ambient-b', '84');
+    }
+}
+
+function updateNpPlayButton() {
+    const playIcon = document.querySelector('.np-icon-play');
+    const pauseIcon = document.querySelector('.np-icon-pause');
+    if (playIcon && pauseIcon) {
+        playIcon.classList.toggle('hidden', isPlaying);
+        pauseIcon.classList.toggle('hidden', !isPlaying);
+    }
+
+    const viz = document.getElementById('np-visualizer');
+    if (viz) viz.classList.toggle('playing', isPlaying);
+
+    // Drive Web Audio visualizer (only when modal is open to save CPU)
+    if (isPlaying && npModalOpen) {
+        npInitVisualizer();
+        npStartVisualizerLoop();
+    } else {
+        npStopVisualizerLoop();
+    }
+}
+
+function updateNpProgress() {
+    if (!npModalOpen || !audioPlayer) return;
+
+    const npProgressBar = document.getElementById('np-progress-bar');
+    const npProgressFill = document.getElementById('np-progress-fill');
+    const npCurrentTime = document.getElementById('np-current-time');
+    const npTotalTime = document.getElementById('np-total-time');
+
+    if (audioPlayer.duration) {
+        const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+        if (npProgressBar && !npProgressBar.dataset.seeking) {
+            npProgressBar.value = progress;
+        }
+        if (npProgressFill) npProgressFill.style.width = progress + '%';
+        if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
+        if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
+    } else {
+        if (npProgressBar) npProgressBar.value = 0;
+        if (npProgressFill) npProgressFill.style.width = '0%';
+        if (npCurrentTime) npCurrentTime.textContent = '0:00';
+        if (npTotalTime) npTotalTime.textContent = '0:00';
+    }
+}
+
+function handleNpProgressBarChange(event) {
+    if (!audioPlayer || !audioPlayer.duration) return;
+    const progress = parseFloat(event.target.value);
+    const newTime = (progress / 100) * audioPlayer.duration;
+
+    try {
+        audioPlayer.currentTime = newTime;
+
+        // Sync sidebar progress
+        const sidebarBar = document.getElementById('progress-bar');
+        const sidebarFill = document.getElementById('progress-fill');
+        if (sidebarBar) sidebarBar.value = progress;
+        if (sidebarFill) sidebarFill.style.width = progress + '%';
+
+        // Sync modal progress fill
+        const npFill = document.getElementById('np-progress-fill');
+        if (npFill) npFill.style.width = progress + '%';
+
+        // Update time displays
+        const sidebarTime = document.getElementById('current-time');
+        const npTime = document.getElementById('np-current-time');
+        if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
+        if (npTime) npTime.textContent = formatTime(newTime);
+    } catch (error) {
+        console.warn('Seek failed:', error.message);
+    }
+}
+
+function handleNpVolumeChange(event) {
+    const volume = parseInt(event.target.value);
+    if (audioPlayer) audioPlayer.volume = volume / 100;
+
+    // Sync sidebar volume slider
+    const sidebarVol = document.getElementById('volume-slider');
+    if (sidebarVol) {
+        sidebarVol.value = volume;
+        sidebarVol.style.setProperty('--volume-percent', volume + '%');
+    }
+
+    // Update modal volume fill
+    const npFill = document.getElementById('np-volume-fill');
+    if (npFill) npFill.style.width = volume + '%';
+
+    // Update mute state
+    npMuted = volume === 0;
+    updateNpMuteIcon();
+}
+
+function handleNpMuteToggle() {
+    const npVol = document.getElementById('np-volume-slider');
+    if (!npVol) return;
+
+    if (npMuted) {
+        // Unmute — restore previous volume
+        npVol.value = npPreMuteVolume;
+        npVol.dispatchEvent(new Event('input'));
+        npMuted = false;
+    } else {
+        // Mute — save current volume, set to 0
+        npPreMuteVolume = parseInt(npVol.value) || 70;
+        npVol.value = 0;
+        npVol.dispatchEvent(new Event('input'));
+        npMuted = true;
+    }
+    updateNpMuteIcon();
+}
+
+function updateNpMuteIcon() {
+    const muteBtn = document.getElementById('np-mute-btn');
+    const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
+    const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
+    if (volIcon && mutedIcon) {
+        volIcon.classList.toggle('hidden', npMuted);
+        mutedIcon.classList.toggle('hidden', !npMuted);
+    }
+    if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
+}
+
+function handleNpShuffle() {
+    npShuffleOn = !npShuffleOn;
+    const btn = document.getElementById('np-shuffle-btn');
+    if (btn) btn.classList.toggle('active', npShuffleOn);
+    updateNpPrevNextButtons();
+}
+
+function handleNpRepeat() {
+    const badge = document.getElementById('np-repeat-one-badge');
+    if (npRepeatMode === 'off') {
+        npRepeatMode = 'all';
+        if (audioPlayer) audioPlayer.loop = false;
+    } else if (npRepeatMode === 'all') {
+        npRepeatMode = 'one';
+        if (audioPlayer) audioPlayer.loop = true;
+    } else {
+        npRepeatMode = 'off';
+        if (audioPlayer) audioPlayer.loop = false;
+    }
+    const btn = document.getElementById('np-repeat-btn');
+    if (btn) btn.classList.toggle('active', npRepeatMode !== 'off');
+    if (badge) badge.classList.toggle('hidden', npRepeatMode !== 'one');
+    updateNpPrevNextButtons();
+}
+
+// ===============================
+// QUEUE MANAGEMENT
+// ===============================
+
+function addToQueue(track) {
+    npQueue.push(track);
+    showToast('Added to queue', 'success');
+    renderNpQueue();
+    updateNpPrevNextButtons();
+    // If nothing is currently playing, auto-play the first queued track
+    if (!currentTrack) {
+        playQueueItem(npQueue.length - 1);
+    }
+}
+
+function removeFromQueue(index) {
+    if (index < 0 || index >= npQueue.length) return;
+    const wasCurrentTrack = (index === npQueueIndex);
+    npQueue.splice(index, 1);
+    // Adjust current index
+    if (npQueue.length === 0) {
+        npQueueIndex = -1;
+        // Current track keeps playing but queue is now empty — that's OK
+    } else if (index < npQueueIndex) {
+        npQueueIndex--;
+    } else if (wasCurrentTrack) {
+        // Removed the currently playing item
+        if (npQueueIndex >= npQueue.length) {
+            npQueueIndex = npQueue.length - 1;
+        }
+        // Play the next track at the adjusted index
+        playQueueItem(npQueueIndex);
+    }
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function clearQueue() {
+    npQueue = [];
+    npQueueIndex = -1;
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function playNextInQueue() {
+    if (npQueue.length === 0) return;
+    if (npShuffleOn) {
+        // Pick a random index that is not the current one
+        const candidates = [];
+        for (let i = 0; i < npQueue.length; i++) {
+            if (i !== npQueueIndex) candidates.push(i);
+        }
+        if (candidates.length === 0) return;
+        const next = candidates[Math.floor(Math.random() * candidates.length)];
+        playQueueItem(next);
+    } else {
+        const next = npQueueIndex + 1;
+        if (next >= npQueue.length) {
+            // End of queue — repeat-all wraps to start
+            if (npRepeatMode === 'all') {
+                playQueueItem(0);
+            }
+            return;
+        }
+        playQueueItem(next);
+    }
+}
+
+function playPreviousInQueue() {
+    // If more than 3 seconds in, restart current track
+    if (audioPlayer && audioPlayer.currentTime > 3) {
+        audioPlayer.currentTime = 0;
+        if (audioPlayer.paused) audioPlayer.play();
+        return;
+    }
+    if (npQueue.length === 0) return;
+    const prev = npQueueIndex - 1;
+    if (prev < 0) {
+        // At start — restart current track
+        if (audioPlayer) {
+            audioPlayer.currentTime = 0;
+            if (audioPlayer.paused) audioPlayer.play();
+        }
+        return;
+    }
+    playQueueItem(prev);
+}
+
+async function playQueueItem(index) {
+    if (index < 0 || index >= npQueue.length) return;
+    if (npLoadingQueueItem) return; // Prevent race condition from double-advance
+    npLoadingQueueItem = true;
+    npQueueIndex = index;
+    const track = npQueue[index];
+
+    try {
+        if (track.is_library) {
+            // Library track playback flow
+            await stopStream();
+            setTrackInfo({
+                title: track.title,
+                artist: track.artist,
+                album: track.album,
+                filename: track.file_path,
+                is_library: true,
+                image_url: track.image_url,
+                id: track.id,
+                artist_id: track.artist_id,
+                album_id: track.album_id,
+                bitrate: track.bitrate,
+                sample_rate: track.sample_rate
+            });
+            showLoadingAnimation();
+
+            const response = await fetch('/api/library/play', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file_path: track.file_path,
+                    title: track.title || '',
+                    artist: track.artist || '',
+                    album: track.album || ''
+                })
+            });
+            const result = await response.json();
+            if (!result.success) throw new Error(result.error || 'Failed to start playback');
+            // Re-apply repeat-one loop property
+            if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
+            await startAudioPlayback();
+        } else {
+            // Non-library (stream) tracks cannot be queued for auto-advance
+            // Just show track info — the stream flow handles its own playback
+            setTrackInfo({
+                title: track.title,
+                artist: track.artist,
+                album: track.album,
+                filename: track.filename || track.file_path,
+                is_library: false,
+                image_url: track.image_url,
+                id: track.id,
+                artist_id: track.artist_id,
+                album_id: track.album_id,
+                bitrate: track.bitrate,
+                sample_rate: track.sample_rate
+            });
+        }
+    } catch (error) {
+        console.error('Queue playback error:', error);
+        showToast(`Skipping track: ${error.message}`, 'error');
+        hideLoadingAnimation();
+        // Auto-skip to next track on failure instead of stopping the queue
+        npLoadingQueueItem = false;
+        const nextIdx = npQueueIndex + 1;
+        if (nextIdx < npQueue.length) {
+            setTimeout(() => playQueueItem(nextIdx), 500);
+        }
+        return;
+    } finally {
+        npLoadingQueueItem = false;
+    }
+
+    renderNpQueue();
+    updateNpPrevNextButtons();
+}
+
+function renderNpQueue() {
+    const listEl = document.getElementById('np-queue-list');
+    const emptyEl = document.getElementById('np-queue-empty');
+    const countEl = document.getElementById('np-queue-count');
+    if (!listEl) return;
+
+    if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
+
+    if (npQueue.length === 0) {
+        listEl.innerHTML = '';
+        if (emptyEl) emptyEl.classList.remove('hidden');
+        return;
+    }
+
+    if (emptyEl) emptyEl.classList.add('hidden');
+    listEl.innerHTML = '';
+
+    npQueue.forEach((track, i) => {
+        const item = document.createElement('div');
+        item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
+        item.onclick = () => playQueueItem(i);
+
+        const info = document.createElement('div');
+        info.className = 'np-queue-item-info';
+
+        const title = document.createElement('div');
+        title.className = 'np-queue-item-title';
+        title.textContent = track.title || 'Unknown Track';
+
+        const artist = document.createElement('div');
+        artist.className = 'np-queue-item-artist';
+        artist.textContent = track.artist || 'Unknown Artist';
+
+        info.appendChild(title);
+        info.appendChild(artist);
+        item.appendChild(info);
+
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'np-queue-item-remove';
+        removeBtn.innerHTML = '&#10005;';
+        removeBtn.title = 'Remove from queue';
+        removeBtn.onclick = (e) => {
+            e.stopPropagation();
+            removeFromQueue(i);
+        };
+        item.appendChild(removeBtn);
+
+        listEl.appendChild(item);
+    });
+}
+
+function updateNpPrevNextButtons() {
+    const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
+    const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
+
+    // Full Now Playing modal buttons
+    const prevBtn = document.getElementById('np-prev-btn');
+    const nextBtn = document.getElementById('np-next-btn');
+    if (prevBtn) prevBtn.disabled = !canPrev;
+    if (nextBtn) nextBtn.disabled = !canNext;
+
+    // Mini player buttons
+    const miniPrevBtn = document.getElementById('mini-prev-btn');
+    const miniNextBtn = document.getElementById('mini-next-btn');
+    if (miniPrevBtn) miniPrevBtn.disabled = !canPrev;
+    if (miniNextBtn) miniNextBtn.disabled = !canNext;
+}
+
+function handlePlayerKeyboardShortcuts(event) {
+    // Don't intercept when typing in inputs or when non-player modals are open
+    const tag = document.activeElement.tagName.toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
+
+    // Only handle when player modal is open OR when no other modal is visible
+    const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
+    if (otherModals.length > 0 && !npModalOpen) return;
+
+    switch (event.key) {
+        case ' ':
+            if (!currentTrack) return;
+            event.preventDefault();
+            togglePlayback();
+            break;
+        case 'ArrowLeft':
+            if (!audioPlayer || !audioPlayer.duration) return;
+            event.preventDefault();
+            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
+            break;
+        case 'ArrowRight':
+            if (!audioPlayer || !audioPlayer.duration) return;
+            event.preventDefault();
+            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
+            break;
+        case 'ArrowUp':
+            event.preventDefault();
+            if (audioPlayer) {
+                const newVol = Math.min(1, audioPlayer.volume + 0.05);
+                audioPlayer.volume = newVol;
+                syncVolumeUI(Math.round(newVol * 100));
+            }
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            if (audioPlayer) {
+                const newVol = Math.max(0, audioPlayer.volume - 0.05);
+                audioPlayer.volume = newVol;
+                syncVolumeUI(Math.round(newVol * 100));
+            }
+            break;
+        case 'm':
+        case 'M':
+            if (npModalOpen) handleNpMuteToggle();
+            break;
+        case 'Escape':
+            if (npModalOpen) closeNowPlayingModal();
+            break;
+        default:
+            return; // Don't prevent default for unhandled keys
+    }
+}
+
+function syncVolumeUI(volumePercent) {
+    // Sync both sidebar and modal volume UIs
+    const sidebarVol = document.getElementById('volume-slider');
+    const npVol = document.getElementById('np-volume-slider');
+    const npFill = document.getElementById('np-volume-fill');
+
+    if (sidebarVol) {
+        sidebarVol.value = volumePercent;
+        sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
+    }
+    if (npVol) npVol.value = volumePercent;
+    if (npFill) npFill.style.width = volumePercent + '%';
+}
+
+function getNpAlbumArtUrl() {
+    if (!currentTrack) return null;
+    return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
+}
+
+// ===============================
+// WEB AUDIO VISUALIZER
+// ===============================
+
+function npInitVisualizer() {
+    if (npVizInitialized || !audioPlayer) return;
+    try {
+        if (!npAudioContext) {
+            npAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+        }
+        if (!npMediaSource) {
+            npMediaSource = npAudioContext.createMediaElementSource(audioPlayer);
+            npAnalyser = npAudioContext.createAnalyser();
+            npAnalyser.fftSize = 64;
+            npAnalyser.smoothingTimeConstant = 0.8;
+            npMediaSource.connect(npAnalyser);
+            npAnalyser.connect(npAudioContext.destination);
+        }
+        npVizInitialized = true;
+    } catch (e) {
+        console.warn('Web Audio visualizer init failed, using CSS fallback:', e.message);
+        // Mark as CSS fallback
+        const viz = document.getElementById('np-visualizer');
+        if (viz) viz.classList.add('np-viz-css-fallback');
+        npVizInitialized = true; // don't retry
+    }
+}
+
+function npStartVisualizerLoop() {
+    if (npVizAnimFrame) return; // Already running
+    if (!npAnalyser) return; // No analyser — CSS fallback handles it
+
+    if (npAudioContext && npAudioContext.state === 'suspended') {
+        npAudioContext.resume();
+    }
+
+    const bars = document.querySelectorAll('.np-viz-bar');
+    if (bars.length === 0) return;
+    const bufferLength = npAnalyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+
+    function draw() {
+        npVizAnimFrame = requestAnimationFrame(draw);
+        npAnalyser.getByteFrequencyData(dataArray);
+
+        // Map 7 bars to frequency bins (skip bin 0 which is DC offset)
+        const binCount = Math.min(bufferLength - 1, 7);
+        for (let i = 0; i < bars.length; i++) {
+            const binIndex = Math.min(i + 1, bufferLength - 1);
+            const value = dataArray[binIndex] / 255; // 0..1
+            const scale = Math.max(0.08, value); // minimum visible height
+            bars[i].style.transform = `scaleY(${scale})`;
+        }
+    }
+    draw();
+}
+
+function npStopVisualizerLoop() {
+    if (npVizAnimFrame) {
+        cancelAnimationFrame(npVizAnimFrame);
+        npVizAnimFrame = null;
+    }
+    // Reset bars to min
+    const bars = document.querySelectorAll('.np-viz-bar');
+    bars.forEach(bar => { bar.style.transform = 'scaleY(0.125)'; });
+}
+
+// ===============================
+// SIDEBAR AUDIO VISUALIZER
+// ===============================
+
+let sidebarVizAnimFrame = null;
+let sidebarVisualizerType = 'bars'; // bars | wave | spectrum | mirror | equalizer | none
+const SIDEBAR_VIZ_BAR_COUNT = 32;
+
+let _sidebarVizBuiltType = null;
+
+function buildSidebarVizElements(type) {
+    const container = document.getElementById('sidebar-visualizer');
+    if (!container) return;
+    if (_sidebarVizBuiltType === type && container.children.length > 0) return;
+    _sidebarVizBuiltType = type;
+    container.innerHTML = '';
+    container.className = 'sidebar-visualizer';
+
+    if (type === 'bars') {
+        container.classList.add('viz-bars');
+        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'sidebar-viz-bar';
+            container.appendChild(bar);
+        }
+    } else if (type === 'wave' || type === 'spectrum') {
+        container.classList.add('viz-canvas');
+        const canvas = document.createElement('canvas');
+        canvas.className = 'sidebar-viz-canvas';
+        canvas.width = 10;
+        canvas.height = 600;
+        container.appendChild(canvas);
+    } else if (type === 'mirror') {
+        container.classList.add('viz-mirror');
+        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'sidebar-viz-mirror-bar';
+            container.appendChild(bar);
+        }
+    } else if (type === 'equalizer') {
+        container.classList.add('viz-equalizer');
+        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
+            const wrap = document.createElement('div');
+            wrap.className = 'sidebar-viz-eq-wrap';
+            const bar = document.createElement('div');
+            bar.className = 'sidebar-viz-eq-bar';
+            const peak = document.createElement('div');
+            peak.className = 'sidebar-viz-eq-peak';
+            wrap.appendChild(bar);
+            wrap.appendChild(peak);
+            container.appendChild(wrap);
+        }
+    }
+}
+
+function startSidebarVisualizer() {
+    const type = sidebarVisualizerType;
+    if (type === 'none') return;
+
+    const container = document.getElementById('sidebar-visualizer');
+    if (!container) return;
+
+    buildSidebarVizElements(type);
+    container.classList.add('active');
+
+    if (sidebarVizAnimFrame) return;
+    if (!npAnalyser) return;
+
+    const bufferLength = npAnalyser.frequencyBinCount;
+    const dataArray = new Uint8Array(bufferLength);
+    const hueStart = 200, hueRange = 160;
+
+    // Helper: average frequency bins for a given segment index
+    function getBinValue(i, count) {
+        const binsPerSeg = Math.max(1, Math.floor((bufferLength - 1) / count));
+        let sum = 0;
+        const start = i * binsPerSeg + 1;
+        for (let b = 0; b < binsPerSeg; b++) sum += dataArray[Math.min(start + b, bufferLength - 1)];
+        return (sum / binsPerSeg) / 255;
+    }
+
+    // ── Bars ──
+    if (type === 'bars') {
+        const bars = container.querySelectorAll('.sidebar-viz-bar');
+        if (bars.length === 0) return;
+        function drawBars() {
+            sidebarVizAnimFrame = requestAnimationFrame(drawBars);
+            npAnalyser.getByteFrequencyData(dataArray);
+            for (let i = 0; i < bars.length; i++) {
+                const value = getBinValue(i, bars.length);
+                const scale = Math.max(0.08, value);
+                const hue = (hueStart + (i / bars.length) * hueRange + value * 30) % 360;
+                bars[i].style.transform = `scaleX(${scale})`;
+                bars[i].style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+            }
+        }
+        drawBars();
+
+        // ── Wave ──
+    } else if (type === 'wave') {
+        const canvas = container.querySelector('.sidebar-viz-canvas');
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        let hueOffset = 0;
+        function drawWave() {
+            sidebarVizAnimFrame = requestAnimationFrame(drawWave);
+            const ch = container.clientHeight;
+            if (ch > 0 && canvas.height !== ch) canvas.height = ch;
+            npAnalyser.getByteFrequencyData(dataArray);
+            const w = canvas.width, h = canvas.height;
+            if (h === 0) return;
+            ctx.clearRect(0, 0, w, h);
+
+            let totalEnergy = 0;
+            for (let i = 1; i < bufferLength; i++) totalEnergy += dataArray[i];
+            const avgEnergy = totalEnergy / (bufferLength - 1) / 255;
+            hueOffset = (hueOffset + 0.5) % 360;
+
+            const segments = 64;
+            ctx.lineWidth = 3;
+            ctx.lineCap = 'round';
+            ctx.beginPath();
+            for (let i = 0; i <= segments; i++) {
+                const y = (i / segments) * h;
+                const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
+                const value = dataArray[binIdx] / 255;
+                const x = (w / 2) + Math.sin((i / segments) * Math.PI * 4 + Date.now() * 0.003) * value * (w - 2) * 0.4;
+                if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
+            }
+            const grad = ctx.createLinearGradient(0, 0, 0, h);
+            grad.addColorStop(0, `hsla(${hueOffset + 200}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
+            grad.addColorStop(0.5, `hsla(${hueOffset + 280}, 80%, 55%, ${0.3 + avgEnergy * 0.7})`);
+            grad.addColorStop(1, `hsla(${hueOffset + 360}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
+            ctx.strokeStyle = grad;
+            ctx.stroke();
+            ctx.lineWidth = 6;
+            ctx.globalAlpha = 0.15 + avgEnergy * 0.2;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+        }
+        drawWave();
+
+        // ── Spectrum (mountain/terrain fill) ──
+    } else if (type === 'spectrum') {
+        const canvas = container.querySelector('.sidebar-viz-canvas');
+        if (!canvas) return;
+        const ctx = canvas.getContext('2d');
+        let hueOffset = 0;
+        // Smoothed values for fluid motion
+        const smoothed = new Float32Array(64);
+
+        function drawSpectrum() {
+            sidebarVizAnimFrame = requestAnimationFrame(drawSpectrum);
+            const ch = container.clientHeight;
+            if (ch > 0 && canvas.height !== ch) canvas.height = ch;
+            npAnalyser.getByteFrequencyData(dataArray);
+            const w = canvas.width, h = canvas.height;
+            if (h === 0) return;
+            ctx.clearRect(0, 0, w, h);
+
+            hueOffset = (hueOffset + 0.3) % 360;
+            const segments = smoothed.length;
+
+            // Smooth the frequency data
+            for (let i = 0; i < segments; i++) {
+                const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
+                const target = dataArray[binIdx] / 255;
+                smoothed[i] += (target - smoothed[i]) * 0.25;
+            }
+
+            // Draw filled mountain shape from left edge
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            for (let i = 0; i <= segments; i++) {
+                const y = (i / segments) * h;
+                const value = i < segments ? smoothed[i] : smoothed[segments - 1];
+                const x = value * w * 0.95;
+                ctx.lineTo(x, y);
+            }
+            ctx.lineTo(0, h);
+            ctx.closePath();
+
+            // Gradient fill
+            const fillGrad = ctx.createLinearGradient(0, 0, 0, h);
+            fillGrad.addColorStop(0, `hsla(${hueOffset + 200}, 85%, 55%, 0.7)`);
+            fillGrad.addColorStop(0.25, `hsla(${hueOffset + 240}, 80%, 50%, 0.6)`);
+            fillGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 85%, 50%, 0.65)`);
+            fillGrad.addColorStop(0.75, `hsla(${hueOffset + 330}, 80%, 50%, 0.6)`);
+            fillGrad.addColorStop(1, `hsla(${hueOffset + 360}, 85%, 55%, 0.7)`);
+            ctx.fillStyle = fillGrad;
+            ctx.fill();
+
+            // Bright edge line
+            ctx.beginPath();
+            ctx.moveTo(0, 0);
+            for (let i = 0; i <= segments; i++) {
+                const y = (i / segments) * h;
+                const value = i < segments ? smoothed[i] : smoothed[segments - 1];
+                ctx.lineTo(value * w * 0.95, y);
+            }
+            const lineGrad = ctx.createLinearGradient(0, 0, 0, h);
+            lineGrad.addColorStop(0, `hsla(${hueOffset + 200}, 90%, 70%, 0.9)`);
+            lineGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 90%, 65%, 0.9)`);
+            lineGrad.addColorStop(1, `hsla(${hueOffset + 360}, 90%, 70%, 0.9)`);
+            ctx.strokeStyle = lineGrad;
+            ctx.lineWidth = 1.5;
+            ctx.stroke();
+
+            // Outer glow
+            ctx.lineWidth = 4;
+            ctx.globalAlpha = 0.2;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+        }
+        drawSpectrum();
+
+        // ── Mirror (bars from center outward) ──
+    } else if (type === 'mirror') {
+        const bars = container.querySelectorAll('.sidebar-viz-mirror-bar');
+        if (bars.length === 0) return;
+        function drawMirror() {
+            sidebarVizAnimFrame = requestAnimationFrame(drawMirror);
+            npAnalyser.getByteFrequencyData(dataArray);
+            const half = Math.floor(bars.length / 2);
+            for (let i = 0; i < half; i++) {
+                const value = getBinValue(i, half);
+                const scale = Math.max(0.06, value);
+                const hue = (hueStart + (i / half) * hueRange + value * 30) % 360;
+                const color = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+                // Top half — mirror index from center
+                const topIdx = half - 1 - i;
+                const bottomIdx = half + i;
+                bars[topIdx].style.transform = `scaleX(${scale})`;
+                bars[topIdx].style.backgroundColor = color;
+                if (bottomIdx < bars.length) {
+                    bars[bottomIdx].style.transform = `scaleX(${scale})`;
+                    bars[bottomIdx].style.backgroundColor = color;
+                }
+            }
+        }
+        drawMirror();
+
+        // ── Equalizer (bars with falling peak indicators) ──
+    } else if (type === 'equalizer') {
+        const wraps = container.querySelectorAll('.sidebar-viz-eq-wrap');
+        if (wraps.length === 0) return;
+        const peaks = new Float32Array(wraps.length);
+        const peakVelocity = new Float32Array(wraps.length);
+
+        function drawEqualizer() {
+            sidebarVizAnimFrame = requestAnimationFrame(drawEqualizer);
+            npAnalyser.getByteFrequencyData(dataArray);
+            for (let i = 0; i < wraps.length; i++) {
+                const value = getBinValue(i, wraps.length);
+                const scale = Math.max(0.06, value);
+                const hue = (hueStart + (i / wraps.length) * hueRange + value * 30) % 360;
+                const barEl = wraps[i].querySelector('.sidebar-viz-eq-bar');
+                const peakEl = wraps[i].querySelector('.sidebar-viz-eq-peak');
+
+                barEl.style.transform = `scaleX(${scale})`;
+                barEl.style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
+
+                // Peak hold with gravity
+                if (value > peaks[i]) {
+                    peaks[i] = value;
+                    peakVelocity[i] = 0;
+                } else {
+                    peakVelocity[i] += 0.002; // gravity
+                    peaks[i] = Math.max(0, peaks[i] - peakVelocity[i]);
+                }
+                const peakPos = Math.max(0.06, peaks[i]);
+                peakEl.style.left = `${peakPos * 100}%`;
+                peakEl.style.backgroundColor = `hsla(${hue}, 90%, 75%, ${0.6 + peaks[i] * 0.4})`;
+                peakEl.style.boxShadow = `0 0 4px hsla(${hue}, 90%, 70%, ${peaks[i] * 0.5})`;
+            }
+        }
+        drawEqualizer();
+    }
+}
+
+function stopSidebarVisualizer() {
+    if (sidebarVizAnimFrame) {
+        cancelAnimationFrame(sidebarVizAnimFrame);
+        sidebarVizAnimFrame = null;
+    }
+    const container = document.getElementById('sidebar-visualizer');
+    if (container) {
+        container.classList.remove('active');
+    }
+}
+
+// Listen for visualizer type changes in settings — use isPlaying (not wasRunning)
+// so switching from 'none' to a real type while music plays starts the visualizer
+document.addEventListener('change', (e) => {
+    if (e.target.id === 'sidebar-visualizer-type') {
+        const newType = e.target.value;
+        stopSidebarVisualizer();
+        _sidebarVizBuiltType = null; // force rebuild for new type
+        sidebarVisualizerType = newType;
+        if (isPlaying && newType !== 'none') {
+            npInitVisualizer();
+            startSidebarVisualizer();
+        }
+    }
+});
+
+// ===============================
+// RADIO MODE
+// ===============================
+
+async function npFetchRadioTracks() {
+    if (!currentTrack || !currentTrack.id) return;
+    try {
+        npLoadingQueueItem = true;
+        const excludeIds = npRecentlyPlayedIds.join(',');
+        const resp = await fetch(`/api/library/radio?track_id=${currentTrack.id}&limit=50&exclude=${encodeURIComponent(excludeIds)}`);
+        if (!resp.ok) {
+            console.warn('Radio endpoint returned', resp.status);
+            npLoadingQueueItem = false;
+            return;
+        }
+        const data = await resp.json();
+        // Bail if radio was toggled off during the fetch
+        if (!npRadioMode) { npLoadingQueueItem = false; return; }
+        if (data.tracks && data.tracks.length > 0) {
+            data.tracks.forEach(t => {
+                npQueue.push({
+                    title: t.title || 'Unknown Track',
+                    artist: t.artist || 'Unknown Artist',
+                    album: t.album || 'Unknown Album',
+                    file_path: t.file_path,
+                    filename: t.file_path,
+                    is_library: true,
+                    image_url: t.image_url || null,
+                    id: t.id,
+                    artist_id: t.artist_id,
+                    album_id: t.album_id,
+                    bitrate: t.bitrate,
+                    sample_rate: t.sample_rate
+                });
+            });
+            showToast(`Radio: Added ${data.tracks.length} similar tracks`, 'success');
+            renderNpQueue();
+            updateNpPrevNextButtons();
+            npLoadingQueueItem = false;
+            // Only auto-advance if nothing is currently playing (triggered by onAudioEnded)
+            if (!isPlaying) {
+                playNextInQueue();
+            }
+        } else {
+            showToast('Radio: No similar tracks found', 'info');
+            npLoadingQueueItem = false;
+        }
+    } catch (e) {
+        console.warn('Radio fetch error:', e);
+        npLoadingQueueItem = false;
+    }
+}
+
+// Media Session API
+function initMediaSession() {
+    if (!('mediaSession' in navigator)) return;
+
+    navigator.mediaSession.setActionHandler('play', () => {
+        if (audioPlayer && currentTrack) {
+            audioPlayer.play().then(() => setPlayingState(true));
+        }
+    });
+    navigator.mediaSession.setActionHandler('pause', () => {
+        if (audioPlayer) {
+            audioPlayer.pause();
+            setPlayingState(false);
+        }
+    });
+    navigator.mediaSession.setActionHandler('stop', () => {
+        handleStop();
+    });
+    navigator.mediaSession.setActionHandler('seekbackward', () => {
+        if (audioPlayer && audioPlayer.duration) {
+            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
+        }
+    });
+    navigator.mediaSession.setActionHandler('seekforward', () => {
+        if (audioPlayer && audioPlayer.duration) {
+            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
+        }
+    });
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+        if (npQueue.length > 0) playPreviousInQueue();
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+        if (npQueue.length > 0) playNextInQueue();
+    });
+}
+
+function updateMediaSessionMetadata() {
+    if (!('mediaSession' in navigator) || !currentTrack) return;
+    const artwork = [];
+    const artUrl = getNpAlbumArtUrl();
+    if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+        title: currentTrack.title || 'Unknown Track',
+        artist: currentTrack.artist || 'Unknown Artist',
+        album: currentTrack.album || 'Unknown Album',
+        artwork: artwork
+    });
+}
+
+function updateMediaSessionPlaybackState() {
+    if (!('mediaSession' in navigator)) return;
+    if (!currentTrack) {
+        navigator.mediaSession.playbackState = 'none';
+    } else {
+        navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
+    }
+}
+
+// ===============================
+
diff --git a/webui/static/pages-extra.js b/webui/static/pages-extra.js
new file mode 100644
index 00000000..333b1de6
--- /dev/null
+++ b/webui/static/pages-extra.js
@@ -0,0 +1,2875 @@
+
+// ==================================================================================
+// PLAYLIST EXPLORER — Visual Discovery Tree
+// ==================================================================================
+
+const _explorer = {
+    initialized: false,
+    mode: 'albums',
+    artists: [],
+    selectedAlbums: new Set(),
+    expandedArtists: new Set(),
+    building: false,
+    playlistId: null,
+    meta: null,
+    _resizeTimer: null,
+};
+
+function initExplorer() {
+    if (_explorer.initialized) return;
+    _explorer.initialized = true;
+    _explorer._playlists = [];
+    _explorer._activeSource = null;
+
+    _explorerLoadPlaylists();
+
+    // Listen for discovery completion to auto-refresh playlist cards
+    if (typeof socket !== 'undefined') {
+        socket.on('discovery:progress', (data) => {
+            if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) return;
+            // Match mirrored playlist discovery events
+            if (data.phase === 'discovered' || data.phase === 'sync_complete' || data.complete) {
+                // Discovery finished — refresh playlists after brief delay for DB commit
+                setTimeout(() => _explorerLoadPlaylists(), 1500);
+            }
+            // Live progress update on cards during discovery
+            if (data.id && data.id.startsWith('mirrored_')) {
+                const plId = parseInt(data.id.replace('mirrored_', ''));
+                const card = document.querySelector(`.explorer-picker-card[data-id="${plId}"]`);
+                if (card) {
+                    const meta = card.querySelector('.explorer-picker-card-meta');
+                    if (meta && data.progress != null) {
+                        meta.innerHTML = `<span class="explorer-discovering-live">Discovering... ${Math.round(data.progress)}%</span>`;
+                    }
+                }
+            }
+        });
+    }
+}
+
+function _explorerLoadPlaylists() {
+    fetch('/api/mirrored-playlists')
+        .then(r => r.json())
+        .then(data => {
+            const playlists = Array.isArray(data) ? data : (data.playlists || []);
+            _explorer._playlists = playlists;
+
+            if (playlists.length === 0) {
+                const scroll = document.getElementById('explorer-picker-scroll');
+                if (scroll) scroll.innerHTML = '<div class="explorer-picker-empty">No mirrored playlists found. Sync a playlist first.</div>';
+                return;
+            }
+
+            // Group by source
+            const groups = {};
+            playlists.forEach(p => {
+                const src = (p.source || 'other').toLowerCase();
+                if (!groups[src]) groups[src] = [];
+                groups[src].push(p);
+            });
+
+            // Render source tabs
+            const tabsEl = document.getElementById('explorer-picker-tabs');
+            if (tabsEl) {
+                const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', file: 'File', other: 'Other' };
+                const sources = Object.keys(groups);
+                if (sources.length <= 1) {
+                    tabsEl.style.display = 'none';
+                } else {
+                    tabsEl.innerHTML = sources.map((src, i) => {
+                        const label = sourceNames[src] || src.charAt(0).toUpperCase() + src.slice(1);
+                        const count = groups[src].length;
+                        const isActive = _explorer._activeSource === src || (!_explorer._activeSource && i === 0);
+                        return `<button class="explorer-picker-tab ${isActive ? 'active' : ''}" data-source="${src}" onclick="explorerSwitchPickerTab('${src}')">${label} <span class="explorer-picker-tab-count">${count}</span></button>`;
+                    }).join('');
+                }
+
+                // Show active or first source
+                const activeSource = _explorer._activeSource || sources[0];
+                _explorer._activeSource = activeSource;
+                explorerRenderPickerCards(activeSource);
+            }
+        })
+        .catch(() => { });
+}
+
+function explorerSwitchPickerTab(source) {
+    _explorer._activeSource = source;
+    document.querySelectorAll('.explorer-picker-tab').forEach(t => t.classList.toggle('active', t.dataset.source === source));
+    explorerRenderPickerCards(source);
+}
+
+function explorerRenderPickerCards(source) {
+    const scroll = document.getElementById('explorer-picker-scroll');
+    if (!scroll) return;
+
+    const filtered = _explorer._playlists.filter(p => (p.source || 'other').toLowerCase() === source);
+    scroll.innerHTML = filtered.map(p => {
+        const img = p.image_url || '';
+        const total = p.total_count || p.track_count || 0;
+        const discovered = p.discovered_count || 0;
+        const pct = total > 0 ? Math.round((discovered / total) * 100) : 0;
+        const isReady = pct >= 50;
+        const isActive = _explorer.playlistId === p.id;
+        const isFullyDiscovered = pct === 100;
+        const wasExplored = !!(p.explored_at || p.explored);
+        const wishlisted = p.wishlisted_count || 0;
+        const inLibrary = p.in_library_count || 0;
+
+        // Status badge: checkmark if explored/in-library, star if ready, % if needs discovery
+        let statusBadge = '';
+        if (inLibrary > 0 && inLibrary >= total * 0.8) {
+            statusBadge = '<div class="explorer-picker-card-badge downloaded" title="Most tracks in library">&#10003;</div>';
+        } else if (wasExplored) {
+            statusBadge = '<div class="explorer-picker-card-badge explored" title="Already explored">&#10003;</div>';
+        } else if (wishlisted > 0) {
+            statusBadge = '<div class="explorer-picker-card-badge wishlisted" title="Tracks wishlisted">&#9829;</div>';
+        } else if (isFullyDiscovered) {
+            statusBadge = '<div class="explorer-picker-card-badge ready" title="Ready to explore">&#9733;</div>';
+        } else if (!isReady) {
+            statusBadge = `<div class="explorer-picker-card-badge needs-discovery" title="Needs discovery (${pct}%)">${pct}%</div>`;
+        }
+
+        // Meta line with status indicators
+        let metaHTML;
+        const statusParts = [];
+        if (inLibrary > 0) statusParts.push(`<span class="explorer-picker-in-library">${inLibrary} in library</span>`);
+        if (wishlisted > 0) statusParts.push(`<span class="explorer-picker-wishlisted">${wishlisted} wishlisted</span>`);
+
+        if (isFullyDiscovered) {
+            metaHTML = `${total} tracks &middot; <span class="explorer-picker-discovered">Fully discovered</span>`;
+        } else if (isReady) {
+            metaHTML = `${total} tracks &middot; ${pct}% discovered`;
+        } else {
+            metaHTML = `${total} tracks &middot; <span class="explorer-picker-not-ready">${pct}% discovered</span>`;
+        }
+        if (statusParts.length > 0) {
+            metaHTML += `<br>${statusParts.join(' &middot; ')}`;
+        }
+
+        // Discover button for undiscovered playlists (replaces redirect to Sync)
+        const discoverBtn = !isReady ? `<button class="explorer-picker-discover-btn" onclick="event.stopPropagation(); explorerStartDiscovery(${p.id})" title="Start discovery">Discover</button>` : '';
+
+        return `
+            <div class="explorer-picker-card ${isActive ? 'active' : ''} ${!isReady ? 'not-ready' : ''} ${wasExplored ? 'explored' : ''}"
+                 data-id="${p.id}"
+                 onclick="${isReady ? `explorerSelectPlaylist(${p.id}, this)` : ''}">
+                <div class="explorer-picker-card-art">
+                    ${img ? `<img src="${img}" alt="" loading="lazy">` : '<div class="explorer-picker-card-art-placeholder">&#9835;</div>'}
+                </div>
+                <div class="explorer-picker-card-info">
+                    <div class="explorer-picker-card-name-row">
+                        <div class="explorer-picker-card-name">${p.name || 'Untitled'}</div>
+                        ${statusBadge}
+                    </div>
+                    <div class="explorer-picker-card-meta">${metaHTML}</div>
+                    ${discoverBtn ? `<div class="explorer-picker-card-actions">${discoverBtn}</div>` : ''}
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function explorerSelectPlaylist(id, el) {
+    _explorer.playlistId = id;
+    document.querySelectorAll('.explorer-picker-card').forEach(c => c.classList.remove('active'));
+    if (el) el.classList.add('active');
+    // Update hint text
+    const hint = document.getElementById('explorer-build-hint');
+    const pl = _explorer._playlists.find(p => p.id === id);
+    if (hint && pl) hint.textContent = `Ready: ${pl.name}`;
+    else if (hint) hint.textContent = '';
+}
+
+function explorerRedirectToDiscover(playlistId) {
+    showToast('This playlist needs more tracks discovered before exploring. Redirecting to Sync...', 'info');
+    navigateToPage('sync');
+    setTimeout(() => {
+        const mirroredBtn = document.querySelector('.sync-tab-button[data-tab="mirrored"]');
+        if (mirroredBtn) mirroredBtn.click();
+    }, 200);
+}
+
+async function explorerStartDiscovery(playlistId) {
+    const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
+    const btn = card?.querySelector('.explorer-picker-discover-btn');
+    if (btn) { btn.disabled = true; btn.textContent = 'Starting...'; }
+
+    try {
+        if (typeof discoverMirroredPlaylist === 'function') {
+            await discoverMirroredPlaylist(playlistId);
+            if (btn) { btn.disabled = false; btn.textContent = 'Open'; btn.title = 'Reopen discovery modal'; }
+
+            // Poll for card updates while discovery is in progress
+            _explorerStartDiscoveryPoller(playlistId);
+        } else {
+            explorerRedirectToDiscover(playlistId);
+        }
+    } catch (err) {
+        showToast(`Discovery failed: ${err.message}`, 'error');
+        if (btn) { btn.disabled = false; btn.textContent = 'Discover'; }
+    }
+}
+
+function _explorerStartDiscoveryPoller(playlistId) {
+    // Poll every 5s to refresh playlist cards until this playlist is ready
+    if (_explorer._discoveryPoller) clearInterval(_explorer._discoveryPoller);
+    _explorer._discoveryPoller = setInterval(async () => {
+        // Stop polling if Explorer page isn't active
+        if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) {
+            clearInterval(_explorer._discoveryPoller);
+            _explorer._discoveryPoller = null;
+            return;
+        }
+        // Check if the mirrored playlist state shows discovery is done
+        const tempHash = `mirrored_${playlistId}`;
+        const state = youtubePlaylistStates[tempHash];
+        const isDone = state && (state.phase === 'discovered' || state.phase === 'sync_complete');
+
+        // Refresh cards from API
+        await _explorerLoadPlaylists();
+
+        // Stop polling once discovery is complete
+        if (isDone) {
+            clearInterval(_explorer._discoveryPoller);
+            _explorer._discoveryPoller = null;
+        }
+    }, 5000);
+}
+
+function explorerSetMode(mode) {
+    _explorer.mode = mode;
+    document.querySelectorAll('.explorer-mode-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.mode === mode);
+    });
+}
+
+async function explorerBuildTree() {
+    const playlistId = _explorer.playlistId;
+    if (!playlistId) {
+        showToast('Select a playlist first', 'error');
+        return;
+    }
+    if (_explorer.building) return;
+
+    _explorer.building = true;
+    _explorer.artists = [];
+    _explorer.selectedAlbums.clear();
+    _explorer.expandedArtists.clear();
+    _explorer.playlistId = playlistId;
+
+    const tree = document.getElementById('explorer-tree');
+    const svg = document.getElementById('explorer-svg');
+    const progress = document.getElementById('explorer-progress');
+    const actionBar = document.getElementById('explorer-action-bar');
+    const empty = document.getElementById('explorer-empty');
+    const buildBtn = document.getElementById('explorer-build-btn');
+
+    if (empty) empty.style.display = 'none';
+    if (actionBar) actionBar.style.display = 'none';
+    if (progress) progress.style.display = 'flex';
+    if (buildBtn) { buildBtn.disabled = true; buildBtn.textContent = 'Building...'; }
+    // Clear tree but preserve the SVG element (it lives inside the tree)
+    tree.innerHTML = '<svg class="explorer-svg" id="explorer-svg"></svg>';
+    _explorer._zoom = 1;
+    tree.style.transform = '';
+
+    try {
+        const response = await fetch('/api/playlist-explorer/build-tree', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ playlist_id: parseInt(playlistId), mode: _explorer.mode })
+        });
+
+        if (!response.ok) {
+            const err = await response.json();
+            throw new Error(err.error || 'Failed to build tree');
+        }
+
+        // Stream NDJSON
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let artistCount = 0;
+        let totalArtists = 0;
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop();
+
+            for (const line of lines) {
+                if (!line.trim()) continue;
+                try {
+                    const data = JSON.parse(line);
+
+                    if (data.type === 'meta') {
+                        _explorer.meta = data;
+                        totalArtists = data.total_artists;
+                        _explorerRenderRoot(data);
+                    } else if (data.type === 'artist') {
+                        artistCount++;
+                        _explorer.artists.push(data);
+                        _explorerRenderArtistNode(data, artistCount);
+
+                        // Lines drawn after streaming completes (not during — flex reflow drifts positions)
+
+                        // Update progress
+                        const pct = Math.round((artistCount / totalArtists) * 100);
+                        const fill = document.getElementById('explorer-progress-fill');
+                        const text = document.getElementById('explorer-progress-text');
+                        if (fill) fill.style.width = pct + '%';
+                        if (text) text.textContent = `Discovering artists... ${artistCount} of ${totalArtists}`;
+                    } else if (data.type === 'complete') {
+                        // Done
+                    }
+                } catch (e) {
+                    console.warn('Explorer: failed to parse NDJSON line', e);
+                }
+            }
+        }
+
+        // Tree built — show action bar, hide progress
+        if (actionBar) actionBar.style.display = 'flex';
+        if (progress) progress.style.display = 'none';
+        _explorerUpdateCount();
+
+        // Mark playlist as explored (server persists via explored_at; update local copy too)
+        const exploredPl = _explorer._playlists.find(p => p.id === playlistId);
+        if (exploredPl) {
+            exploredPl.explored_at = new Date().toISOString();
+            // Update card badge without full re-render
+            const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
+            if (card) {
+                card.classList.add('explored');
+                const oldBadge = card.querySelector('.explorer-picker-card-badge');
+                const badgeHTML = '<div class="explorer-picker-card-badge explored" title="Already explored">&#10003;</div>';
+                if (oldBadge) {
+                    oldBadge.outerHTML = badgeHTML;
+                } else {
+                    // Insert badge into the name row
+                    const nameRow = card.querySelector('.explorer-picker-card-name-row');
+                    if (nameRow) {
+                        nameRow.insertAdjacentHTML('beforeend', badgeHTML);
+                    }
+                }
+                // Remove discover button if present (no longer needed)
+                const discoverBtn = card.querySelector('.explorer-picker-card-actions');
+                if (discoverBtn) discoverBtn.remove();
+            }
+        }
+
+        // Draw all connections now that the tree is stable
+        setTimeout(() => _explorerRedrawAllConnections(true), 100);
+
+    } catch (err) {
+        showToast('Explorer: ' + err.message, 'error');
+        if (empty) { empty.style.display = 'flex'; }
+        if (progress) progress.style.display = 'none';
+    } finally {
+        _explorer.building = false;
+        if (buildBtn) { buildBtn.disabled = false; buildBtn.textContent = 'Explore'; }
+    }
+}
+
+function _explorerRenderRoot(meta) {
+    const tree = document.getElementById('explorer-tree');
+    const rootHtml = `
+        <div class="explorer-tier explorer-tier-root">
+            <div class="explorer-node explorer-node-root" id="explorer-root">
+                <div class="explorer-node-glow"></div>
+                ${meta.playlist_image
+            ? `<img class="explorer-node-img" src="${meta.playlist_image}" alt="">`
+            : '<div class="explorer-node-img-placeholder">&#9835;</div>'
+        }
+                <div class="explorer-node-label">
+                    <div class="explorer-node-label-sub">SOURCE</div>
+                    <div class="explorer-node-label-main">${meta.playlist_name}</div>
+                    <div class="explorer-node-label-meta">${meta.total_tracks} tracks &middot; ${meta.total_artists} artists</div>
+                </div>
+            </div>
+        </div>
+        <div class="explorer-artist-tiers" id="explorer-artist-tiers"></div>
+    `;
+    tree.insertAdjacentHTML('afterbegin', rootHtml);
+    _explorer._artistRowSizes = []; // Track row capacities: [2, 3, 4, ...]
+    _explorer._artistCount = 0;
+    _explorer._currentRowIndex = 0;
+}
+
+function _explorerGetOrCreateRow() {
+    const container = document.getElementById('explorer-artist-tiers');
+    if (!container) return null;
+
+    // Determine row sizes: 2, 3, 4, 5... (tree shape)
+    const rowCapacity = _explorer._currentRowIndex + 2;
+    const existingRows = container.querySelectorAll('.explorer-tier-artists');
+    let currentRow = existingRows[existingRows.length - 1];
+
+    if (!currentRow || currentRow.children.length >= (_explorer._currentRowIndex + 2)) {
+        // Need a new row
+        _explorer._currentRowIndex = existingRows.length;
+        const newRow = document.createElement('div');
+        newRow.className = 'explorer-tier explorer-tier-artists';
+        container.appendChild(newRow);
+        return newRow;
+    }
+    return currentRow;
+}
+
+function _explorerRenderArtistNode(artist, index) {
+    const row = _explorerGetOrCreateRow();
+    if (!row) return;
+
+    _explorer._artistCount++;
+    const albumCount = artist.albums ? artist.albums.length : 0;
+    const safeKey = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
+    const hasError = !!artist.error;
+
+    const html = `
+        <div class="explorer-branch" id="explorer-branch-${safeKey}" style="--enter-delay: ${(index % 5) * 0.1}s">
+            <div class="explorer-node explorer-node-artist ${hasError ? 'error' : ''}"
+                 id="explorer-node-${safeKey}" data-key="${safeKey}"
+                 onclick="${hasError || albumCount === 0 ? '' : `explorerToggleArtist('${safeKey}')`}">
+                ${artist.image_url
+            ? `<img class="explorer-node-img" src="${artist.image_url}" alt="" loading="lazy">`
+            : ''
+        }
+                <div class="explorer-node-label">
+                    <div class="explorer-node-label-main">${artist.name || 'Unknown'}</div>
+                    <div class="explorer-node-label-meta">${hasError ? 'Not found' : albumCount + ' album' + (albumCount !== 1 ? 's' : '')}</div>
+                </div>
+                ${!hasError && albumCount > 0 ? '<div class="explorer-node-expand-hint">&#9662;</div>' : ''}
+                ${hasError ? '<div class="explorer-node-error-ring"></div>' : ''}
+            </div>
+            <div class="explorer-children" id="explorer-children-${safeKey}"></div>
+        </div>
+    `;
+    row.insertAdjacentHTML('beforeend', html);
+}
+
+function explorerToggleArtist(key) {
+    const children = document.getElementById(`explorer-children-${key}`);
+    const node = document.getElementById(`explorer-node-${key}`);
+    if (!children || !node) return;
+
+    const isExpanded = _explorer.expandedArtists.has(key);
+    if (isExpanded) {
+        _explorer.expandedArtists.delete(key);
+        children.innerHTML = '';
+        node.classList.remove('expanded');
+    } else {
+        _explorer.expandedArtists.add(key);
+        node.classList.add('expanded');
+
+        const artist = _explorer.artists.find(a => (a.name || '').replace(/[^a-zA-Z0-9]/g, '_') === key);
+        if (artist && artist.albums) {
+            const albumsHtml = artist.albums.map((album, i) => {
+                const id = album.spotify_id || `${key}_${i}`;
+                const selected = _explorer.selectedAlbums.has(id);
+                const owned = album.owned;
+                const inPlaylist = album.in_playlist;
+
+                const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
+                return `
+                    <div class="explorer-branch" style="--enter-delay: ${i * 0.06}s">
+                        <div class="explorer-node explorer-node-album ${selected ? 'selected' : ''} ${owned ? 'owned' : ''} ${inPlaylist ? 'in-playlist' : ''}"
+                             data-id="${id}" data-key="${id}"
+                             onclick="explorerToggleAlbum('${id}'); event.stopPropagation();"
+                             title="${(album.title || '').replace(/"/g, '&quot;')}\n${album.year || ''} · ${typeLabel} · ${album.track_count || '?'} tracks${owned ? '\n✓ Already in library' : ''}${inPlaylist ? '\n♫ Track from this playlist' : ''}\nClick to select · Double-click for tracklist">
+                            ${album.image_url
+                        ? `<img class="explorer-node-img" src="${album.image_url}" alt="" loading="lazy">`
+                        : ''
+                    }
+                            <div class="explorer-node-label">
+                                <div class="explorer-node-label-main">${album.title || 'Unknown'}</div>
+                                <div class="explorer-node-label-meta">${album.year || ''} &middot; ${album.track_count || '?'} tracks</div>
+                            </div>
+                            <div class="explorer-node-select ${selected ? 'active' : ''}">
+                                <svg viewBox="0 0 20 20"><polyline points="4 10 8 14 16 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                            </div>
+                            ${owned ? '<div class="explorer-node-badge-float owned">Owned</div>' : ''}
+                            ${inPlaylist ? '<div class="explorer-node-badge-float playlist">♫</div>' : ''}
+                        </div>
+                        <div class="explorer-children" id="explorer-tracks-${id}"></div>
+                    </div>
+                `;
+            }).join('');
+            children.innerHTML = albumsHtml;
+        }
+    }
+
+    // Redraw SVG after DOM settles
+    requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+}
+
+async function explorerExpandAlbumTracks(spotifyAlbumId, nodeKey) {
+    if (!spotifyAlbumId) return;
+    const tracksContainer = document.getElementById(`explorer-tracks-${nodeKey}`);
+    if (!tracksContainer) return;
+
+    // Toggle: if already has content, collapse
+    if (tracksContainer.innerHTML) {
+        tracksContainer.innerHTML = '';
+        requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/playlist-explorer/album-tracks/${spotifyAlbumId}`);
+        const data = await response.json();
+        if (!data.success || !data.tracks) return;
+
+        const tracksHtml = data.tracks.map((t, i) => `
+            <div class="explorer-branch" style="--enter-delay: ${i * 0.03}s">
+                <div class="explorer-node explorer-node-track">
+                    <div class="explorer-node-label">
+                        <div class="explorer-node-label-main">${t.track_number}. ${t.name}</div>
+                        <div class="explorer-node-label-meta">${_formatDuration(t.duration_ms)}</div>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+        tracksContainer.innerHTML = tracksHtml;
+        requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
+    } catch (e) {
+        console.error('Failed to load album tracks:', e);
+    }
+}
+
+function _formatDuration(ms) {
+    if (!ms) return '';
+    const m = Math.floor(ms / 60000);
+    const s = Math.floor((ms % 60000) / 1000);
+    return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+// Track double-click vs single-click on album nodes
+let _explorerClickTimer = null;
+let _explorerLastClickId = null;
+
+function explorerToggleAlbum(id) {
+    // Double-click detection: expand tracks
+    if (_explorerLastClickId === id && _explorerClickTimer) {
+        clearTimeout(_explorerClickTimer);
+        _explorerClickTimer = null;
+        _explorerLastClickId = null;
+        // Double-click — expand tracks
+        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+        const spotifyId = id.includes('_') ? '' : id; // Only real IDs, not fallback keys
+        explorerExpandAlbumTracks(spotifyId, id);
+        return;
+    }
+
+    _explorerLastClickId = id;
+    _explorerClickTimer = setTimeout(() => {
+        _explorerClickTimer = null;
+        _explorerLastClickId = null;
+
+        // Single click — toggle selection
+        if (_explorer.selectedAlbums.has(id)) {
+            _explorer.selectedAlbums.delete(id);
+        } else {
+            _explorer.selectedAlbums.add(id);
+        }
+
+        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+        if (node) {
+            const isSelected = _explorer.selectedAlbums.has(id);
+            node.classList.toggle('selected', isSelected);
+            const check = node.querySelector('.explorer-node-select');
+            if (check) check.classList.toggle('active', isSelected);
+        }
+
+        _explorerUpdateCount();
+    }, 250);
+
+    _explorerUpdateCount();
+}
+
+function explorerSelectAll() {
+    _explorer.artists.forEach(a => {
+        (a.albums || []).forEach(album => {
+            if (album.spotify_id && !album.owned) _explorer.selectedAlbums.add(album.spotify_id);
+        });
+    });
+    _explorerRefreshAllCards();
+    _explorerUpdateCount();
+}
+
+function explorerDeselectAll() {
+    _explorer.selectedAlbums.clear();
+    _explorerRefreshAllCards();
+    _explorerUpdateCount();
+}
+
+function _explorerRefreshAllCards() {
+    document.querySelectorAll('.explorer-node-album').forEach(node => {
+        const id = node.dataset.id;
+        const selected = _explorer.selectedAlbums.has(id);
+        node.classList.toggle('selected', selected);
+        const check = node.querySelector('.explorer-node-select');
+        if (check) check.classList.toggle('active', selected);
+    });
+}
+
+function _explorerUpdateCount() {
+    const el = document.getElementById('explorer-selection-count');
+    const count = _explorer.selectedAlbums.size;
+    if (el) el.textContent = `${count} album${count !== 1 ? 's' : ''} selected`;
+    _explorerRefreshArtistIndicators();
+}
+
+function _explorerRefreshArtistIndicators() {
+    // For each artist, check if any of their albums are selected — add visual indicator
+    _explorer.artists.forEach(artist => {
+        const key = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
+        const node = document.getElementById(`explorer-node-${key}`);
+        if (!node) return;
+        const hasSelected = (artist.albums || []).some(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
+        node.classList.toggle('has-selection', hasSelected);
+    });
+}
+
+function explorerAddToWishlist() {
+    if (_explorer.selectedAlbums.size === 0) {
+        showToast('No albums selected', 'error');
+        return;
+    }
+
+    // Group selected albums by artist with full metadata
+    const artistSections = [];
+    for (const artist of _explorer.artists) {
+        const artistId = artist.artist_id || artist.spotify_id;
+        if (!artist.albums) continue;
+        const selected = artist.albums.filter(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
+        if (selected.length === 0) continue;
+        artistSections.push({ artistId, name: artist.name, image: artist.image_url, albums: selected });
+    }
+
+    if (artistSections.length === 0) { showToast('No valid albums selected', 'error'); return; }
+
+    // Build confirmation modal (mirrors discog-modal pattern)
+    const overlay = document.createElement('div');
+    overlay.className = 'discog-modal-overlay';
+    overlay.id = 'explorer-wishlist-overlay';
+
+    const totalAlbums = artistSections.reduce((s, a) => s + a.albums.length, 0);
+    const totalTracks = artistSections.reduce((s, a) => s + a.albums.reduce((t, al) => t + (al.track_count || 0), 0), 0);
+
+    let cardsHtml = '';
+    artistSections.forEach(section => {
+        cardsHtml += `<div class="discog-section-header">${_esc(section.name)}</div>`;
+        section.albums.forEach((album, i) => {
+            const year = album.year || '';
+            const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
+            cardsHtml += `
+                <label class="discog-card ${album.owned ? 'owned' : ''}" data-type="${album.album_type || 'album'}" data-artist-id="${section.artistId}" style="animation-delay:${i * 0.03}s">
+                    <input type="checkbox" class="discog-card-cb" data-album-id="${album.spotify_id}" data-tracks="${album.track_count || 0}" ${!album.owned ? 'checked' : ''} onchange="_explorerWishlistUpdateCount()">
+                    <div class="discog-card-art">
+                        ${album.image_url ? `<img src="${album.image_url}" alt="" loading="lazy">` : '<div class="discog-card-art-placeholder">&#9835;</div>'}
+                        ${album.owned ? '<span class="discog-card-status">&#10003;</span>' : ''}
+                    </div>
+                    <div class="discog-card-info">
+                        <div class="discog-card-title">${_esc(album.title || 'Unknown')}</div>
+                        <div class="discog-card-meta">${year}${year ? ' · ' : ''}${typeLabel} · ${album.track_count || '?'} tracks</div>
+                    </div>
+                    <div class="discog-card-check"></div>
+                </label>
+            `;
+        });
+    });
+
+    overlay.innerHTML = `
+        <div class="discog-modal">
+            <div class="discog-modal-hero" style="background-image:url('${artistSections[0]?.image || ''}')">
+                <div class="discog-modal-hero-overlay"></div>
+                <div class="discog-modal-hero-content">
+                    <h2 class="discog-modal-title">Add to Wishlist</h2>
+                    <p class="discog-modal-artist">${artistSections.length} artist${artistSections.length !== 1 ? 's' : ''} · ${totalAlbums} releases</p>
+                </div>
+                <button class="discog-modal-close" onclick="document.getElementById('explorer-wishlist-overlay')?.remove()">&times;</button>
+            </div>
+            <div class="discog-filter-bar">
+                <div class="discog-filters">
+                    <button class="discog-filter active" data-type="album" onclick="_explorerWishlistToggleFilter(this)">Albums</button>
+                    <button class="discog-filter active" data-type="ep" onclick="_explorerWishlistToggleFilter(this)">EPs</button>
+                    <button class="discog-filter active" data-type="single" onclick="_explorerWishlistToggleFilter(this)">Singles</button>
+                </div>
+                <div class="discog-select-actions">
+                    <button class="discog-select-btn" onclick="document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb').forEach(c=>{c.checked=true}); _explorerWishlistUpdateCount()">Select All</button>
+                    <button class="discog-select-btn" onclick="document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb').forEach(c=>{c.checked=false}); _explorerWishlistUpdateCount()">Deselect</button>
+                </div>
+            </div>
+            <div class="discog-grid" id="explorer-wishlist-grid">${cardsHtml}</div>
+            <div class="discog-progress" id="explorer-wishlist-progress" style="display:none;"></div>
+            <div class="discog-footer" id="explorer-wishlist-footer">
+                <div class="discog-footer-info" id="explorer-wishlist-info"></div>
+                <div class="discog-footer-actions">
+                    <button class="discog-cancel-btn" onclick="document.getElementById('explorer-wishlist-overlay')?.remove()">Cancel</button>
+                    <button class="discog-submit-btn" id="explorer-wishlist-submit">
+                        <span class="discog-submit-icon">&#11015;</span>
+                        <span id="explorer-wishlist-submit-text">Add to Wishlist</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+    _explorerWishlistUpdateCount();
+
+    document.getElementById('explorer-wishlist-submit')?.addEventListener('click', () => _explorerWishlistSubmit(artistSections));
+}
+
+function _explorerWishlistToggleFilter(btn) {
+    btn.classList.toggle('active');
+    const type = btn.dataset.type;
+    // Scoped to explorer wishlist modal only
+    document.querySelectorAll(`#explorer-wishlist-overlay .discog-card[data-type="${type}"]`).forEach(card => {
+        card.style.display = btn.classList.contains('active') ? '' : 'none';
+    });
+    _explorerWishlistUpdateCount();
+}
+
+function _explorerWishlistUpdateCount() {
+    const checked = document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked');
+    let releases = 0, tracks = 0;
+    checked.forEach(cb => {
+        if (cb.closest('.discog-card').style.display !== 'none') {
+            releases++;
+            tracks += parseInt(cb.dataset.tracks) || 0;
+        }
+    });
+    const info = document.getElementById('explorer-wishlist-info');
+    const btn = document.getElementById('explorer-wishlist-submit-text');
+    if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
+    if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
+    const submitBtn = document.getElementById('explorer-wishlist-submit');
+    if (submitBtn) submitBtn.disabled = releases === 0;
+}
+
+async function _explorerWishlistSubmit(artistSections) {
+    const grid = document.getElementById('explorer-wishlist-grid');
+    const progress = document.getElementById('explorer-wishlist-progress');
+    const filterBar = document.querySelector('#explorer-wishlist-overlay .discog-filter-bar');
+    const submitBtn = document.getElementById('explorer-wishlist-submit');
+
+    // Collect checked albums grouped by artist
+    const byArtist = {};
+    document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked').forEach(cb => {
+        if (cb.closest('.discog-card').style.display === 'none') return;
+        const card = cb.closest('.discog-card');
+        const artistId = card.dataset.artistId;
+        const albumId = cb.dataset.albumId;
+        const title = card.querySelector('.discog-card-title')?.textContent || '';
+        const img = card.querySelector('.discog-card-art img')?.src || '';
+        if (!byArtist[artistId]) byArtist[artistId] = { albums: [], name: '' };
+        byArtist[artistId].albums.push({ id: albumId, title, img, tracks: parseInt(cb.dataset.tracks) || 0 });
+    });
+
+    // Fill in artist names
+    artistSections.forEach(s => { if (byArtist[s.artistId]) byArtist[s.artistId].name = s.name; });
+
+    // Switch to progress view
+    if (grid) grid.style.display = 'none';
+    if (filterBar) filterBar.style.display = 'none';
+    if (submitBtn) submitBtn.style.display = 'none';
+    if (progress) {
+        progress.style.display = '';
+        progress.innerHTML = '';
+        for (const [artistId, data] of Object.entries(byArtist)) {
+            data.albums.forEach(album => {
+                const item = document.createElement('div');
+                item.className = 'discog-progress-item active';
+                item.id = `explorer-prog-${album.id}`;
+                item.innerHTML = `
+                    <div class="discog-prog-art">${album.img ? `<img src="${album.img}">` : '&#9835;'}</div>
+                    <div class="discog-prog-info">
+                        <div class="discog-prog-title">${_esc(album.title)}</div>
+                        <div class="discog-prog-status">Waiting...</div>
+                    </div>
+                    <div class="discog-prog-icon"><div class="discog-spinner"></div></div>
+                `;
+                progress.appendChild(item);
+            });
+        }
+    }
+
+    const info = document.getElementById('explorer-wishlist-info');
+    if (info) info.textContent = 'Processing...';
+
+    let totalAdded = 0;
+
+    for (const [artistId, data] of Object.entries(byArtist)) {
+        // Sort by track count descending (deluxe editions first) BEFORE extracting IDs
+        data.albums.sort((a, b) => b.tracks - a.tracks);
+        const albumIds = data.albums.map(a => a.id);
+
+        try {
+            const response = await fetch(`/api/artist/${artistId}/download-discography`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ album_ids: albumIds, artist_name: data.name })
+            });
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+                const lines = buffer.split('\n');
+                buffer = lines.pop();
+                for (const line of lines) {
+                    if (!line.trim()) continue;
+                    try {
+                        const result = JSON.parse(line);
+                        if (result.status === 'complete') continue; // Summary line, skip
+                        const item = document.getElementById(`explorer-prog-${result.album_id}`);
+                        if (item) {
+                            const statusEl = item.querySelector('.discog-prog-status');
+                            const iconEl = item.querySelector('.discog-prog-icon');
+                            if (result.status === 'done') {
+                                const added = result.tracks_added || 0;
+                                const skipped = result.tracks_skipped || 0;
+                                totalAdded += added;
+                                if (statusEl) statusEl.textContent = `Added ${added} track${added !== 1 ? 's' : ''}${skipped > 0 ? `, ${skipped} skipped` : ''}`;
+                                if (iconEl) iconEl.innerHTML = '<span style="color:#4CAF50">&#10003;</span>';
+                                item.classList.remove('active');
+                                item.classList.add('done');
+                            } else if (result.status === 'error') {
+                                if (statusEl) statusEl.textContent = result.message || 'Error';
+                                if (iconEl) iconEl.innerHTML = '<span style="color:#ff4757">&#10007;</span>';
+                                item.classList.remove('active');
+                                item.classList.add('error');
+                            }
+                        }
+                    } catch (e) { }
+                }
+            }
+        } catch (e) {
+            console.error(`Explorer wishlist: failed for ${data.name}:`, e);
+        }
+    }
+
+    if (info) info.textContent = `Done — ${totalAdded} tracks added to wishlist`;
+    // Change cancel button label to "Close"
+    const cancelBtn = document.querySelector('#explorer-wishlist-overlay .discog-cancel-btn');
+    if (cancelBtn) cancelBtn.textContent = 'Close';
+    showToast(`Added ${totalAdded} tracks to wishlist`, 'success');
+
+    // Mark albums as added on the tree
+    _explorer.selectedAlbums.forEach(id => {
+        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
+        if (node) { node.classList.add('added'); node.classList.remove('selected'); }
+    });
+    _explorer.selectedAlbums.clear();
+    _explorerUpdateCount();
+    _explorerRefreshArtistIndicators();
+}
+
+function _explorerEnsureDefs() {
+    const svg = document.getElementById('explorer-svg');
+    if (!svg || svg.querySelector('defs')) return;
+    // Read accent color from CSS custom property
+    const accentRgb = getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '100,200,255';
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    defs.innerHTML = `
+        <linearGradient id="explorer-grad-root" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="rgba(${accentRgb}, 0.25)"/>
+            <stop offset="100%" stop-color="rgba(${accentRgb}, 0.06)"/>
+        </linearGradient>
+        <linearGradient id="explorer-grad-album" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="rgba(${accentRgb}, 0.15)"/>
+            <stop offset="100%" stop-color="rgba(${accentRgb}, 0.04)"/>
+        </linearGradient>
+    `;
+    svg.appendChild(defs);
+}
+
+function _explorerDrawConnectionToArtist(artistIndex) {
+    // Incremental: draw ONLY this artist's connection. Don't clear existing.
+    // Flex reflow within the current row may shift siblings, but the visual drift
+    // is minor and gets corrected by the final redraw after streaming completes.
+    const svg = document.getElementById('explorer-svg');
+    const root = document.getElementById('explorer-root');
+    if (!svg || !root) return;
+
+    _explorerEnsureDefs();
+    _explorerSizeSvg();
+
+    const artistNodes = document.querySelectorAll('.explorer-node-artist');
+    const artistNode = artistNodes[artistIndex];
+    if (!artistNode) return;
+
+    const rc = _explorerGetPos(root);
+    const ac = _explorerGetPos(artistNode);
+    _explorerDrawCurve(svg, rc.cx, rc.bottom, ac.cx, ac.top, 'root', true);
+}
+
+function _explorerRedrawAllConnections(animate = false) {
+    const svg = document.getElementById('explorer-svg');
+    const root = document.getElementById('explorer-root');
+    if (!svg || !root) return;
+
+    _explorerEnsureDefs();
+    _explorerSizeSvg();
+
+    // Clear existing lines but keep defs
+    svg.querySelectorAll('path').forEach(p => p.remove());
+
+    const rc = _explorerGetPos(root);
+
+    document.querySelectorAll('.explorer-node-artist').forEach(artistNode => {
+        const ac = _explorerGetPos(artistNode);
+        _explorerDrawCurve(svg, rc.cx, rc.bottom, ac.cx, ac.top, 'root', animate);
+
+        if (artistNode.classList.contains('expanded')) {
+            const branch = artistNode.closest('.explorer-branch');
+            if (!branch) return;
+            branch.querySelectorAll(':scope > .explorer-children > .explorer-branch > .explorer-node-album').forEach(albumNode => {
+                const alc = _explorerGetPos(albumNode);
+                _explorerDrawCurve(svg, ac.cx, ac.bottom, alc.cx, alc.top, 'album', animate);
+
+                const albumBranch = albumNode.closest('.explorer-branch');
+                if (albumBranch) {
+                    albumBranch.querySelectorAll(':scope > .explorer-children > .explorer-branch > .explorer-node-track').forEach(trackNode => {
+                        const tc = _explorerGetPos(trackNode);
+                        _explorerDrawCurve(svg, alc.cx, alc.bottom, tc.cx, tc.top, 'track', animate);
+                    });
+                }
+            });
+        }
+    });
+}
+
+function _explorerSizeSvg() {
+    const svg = document.getElementById('explorer-svg');
+    const tree = document.getElementById('explorer-tree');
+    if (!svg || !tree) return;
+    // SVG is inside the tree. Use scrollWidth/scrollHeight which are unscaled.
+    // Add padding to ensure lines near edges aren't clipped.
+    const w = Math.max(tree.scrollWidth, tree.offsetWidth) + 40;
+    const h = Math.max(tree.scrollHeight, tree.offsetHeight) + 40;
+    svg.setAttribute('width', w);
+    svg.setAttribute('height', h);
+    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
+}
+
+function _explorerGetPos(el) {
+    // SVG is inside the tree — positions are relative to tree, unscaled
+    const tree = document.getElementById('explorer-tree');
+    if (!tree) return { cx: 0, top: 0, bottom: 0 };
+    const tRect = tree.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
+    const scale = _explorer._zoom || 1;
+    // getBoundingClientRect returns scaled coords; divide by scale to get unscaled tree-space coords
+    return {
+        cx: (r.left + r.width / 2 - tRect.left) / scale,
+        top: (r.top - tRect.top) / scale,
+        bottom: (r.bottom - tRect.top) / scale,
+    };
+}
+
+function _explorerDrawCurve(svg, x1, y1, x2, y2, type, animate) {
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    const midY = y1 + (y2 - y1) * 0.45;
+    path.setAttribute('d', `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`);
+
+    if (type === 'root') {
+        path.setAttribute('stroke', 'url(#explorer-grad-root)');
+        path.setAttribute('stroke-width', '1.5');
+    } else if (type === 'album') {
+        path.setAttribute('stroke', 'url(#explorer-grad-album)');
+        path.setAttribute('stroke-width', '1');
+    } else {
+        path.setAttribute('stroke', 'rgba(255,255,255,0.05)');
+        path.setAttribute('stroke-width', '0.8');
+    }
+    path.setAttribute('fill', 'none');
+
+    svg.appendChild(path);
+
+    if (animate) {
+        const len = path.getTotalLength();
+        path.setAttribute('class', 'explorer-line explorer-line-animated');
+        path.style.strokeDasharray = len;
+        path.style.strokeDashoffset = len;
+    } else {
+        path.setAttribute('class', 'explorer-line');
+    }
+}
+
+// ── Zoom & Pan ──
+_explorer._zoom = 1;
+_explorer._panX = 0;
+_explorer._panY = 0;
+_explorer._isPanning = false;
+_explorer._panStartX = 0;
+_explorer._panStartY = 0;
+_explorer._panStartScrollX = 0;
+_explorer._panStartScrollY = 0;
+
+function _explorerApplyTransform() {
+    const tree = document.getElementById('explorer-tree');
+    if (tree) {
+        tree.style.transform = `scale(${_explorer._zoom})`;
+        tree.style.transformOrigin = 'top center';
+    }
+    _explorerSizeSvg();
+    requestAnimationFrame(() => _explorerRedrawAllConnections());
+}
+
+function explorerZoom(delta) {
+    _explorer._zoom = Math.max(0.2, Math.min(3, _explorer._zoom + delta));
+    _explorerApplyTransform();
+}
+
+function explorerFitToView() {
+    const viewport = document.getElementById('explorer-viewport');
+    const tree = document.getElementById('explorer-tree');
+    if (!viewport || !tree) return;
+
+    // Reset zoom to measure natural size
+    _explorer._zoom = 1;
+    tree.style.transform = 'scale(1)';
+
+    requestAnimationFrame(() => {
+        const treeW = tree.scrollWidth;
+        const treeH = tree.scrollHeight;
+        const vpW = viewport.clientWidth - 40;
+        const vpH = viewport.clientHeight - 40;
+
+        if (treeW > 0 && treeH > 0) {
+            _explorer._zoom = Math.min(vpW / treeW, vpH / treeH, 1.5);
+            _explorer._zoom = Math.max(0.2, Math.min(3, _explorer._zoom));
+        }
+
+        _explorerApplyTransform();
+        viewport.scrollTop = 0;
+        viewport.scrollLeft = Math.max(0, (tree.scrollWidth * _explorer._zoom - vpW) / 2);
+    });
+}
+
+// Scroll wheel zoom (no modifier needed inside viewport)
+document.addEventListener('wheel', (e) => {
+    const viewport = document.getElementById('explorer-viewport');
+    if (!viewport || !viewport.contains(e.target)) return;
+    // Check if we're on the explorer page
+    const page = document.getElementById('playlist-explorer-page');
+    if (!page || !page.classList.contains('active')) return;
+
+    e.preventDefault();
+    const step = e.deltaY > 0 ? -0.08 : 0.08;
+    explorerZoom(step);
+}, { passive: false });
+
+// Middle-click / right-click drag to pan
+document.addEventListener('mousedown', (e) => {
+    const viewport = document.getElementById('explorer-viewport');
+    if (!viewport || !viewport.contains(e.target)) return;
+    // Middle click (button 1) or right click (button 2)
+    if (e.button !== 1 && e.button !== 2) return;
+
+    e.preventDefault();
+    _explorer._isPanning = true;
+    _explorer._panStartX = e.clientX;
+    _explorer._panStartY = e.clientY;
+    _explorer._panStartScrollX = viewport.scrollLeft;
+    _explorer._panStartScrollY = viewport.scrollTop;
+    viewport.style.cursor = 'grabbing';
+});
+
+document.addEventListener('mousemove', (e) => {
+    if (!_explorer._isPanning) return;
+    const viewport = document.getElementById('explorer-viewport');
+    if (!viewport) return;
+    const dx = e.clientX - _explorer._panStartX;
+    const dy = e.clientY - _explorer._panStartY;
+    viewport.scrollLeft = _explorer._panStartScrollX - dx;
+    viewport.scrollTop = _explorer._panStartScrollY - dy;
+});
+
+document.addEventListener('mouseup', (e) => {
+    if (!_explorer._isPanning) return;
+    _explorer._isPanning = false;
+    const viewport = document.getElementById('explorer-viewport');
+    if (viewport) viewport.style.cursor = '';
+});
+
+// Suppress context menu on right-click inside viewport (for panning)
+document.addEventListener('contextmenu', (e) => {
+    const viewport = document.getElementById('explorer-viewport');
+    if (viewport && viewport.contains(e.target)) {
+        e.preventDefault();
+    }
+});
+
+// Debounced redraw on resize
+window.addEventListener('resize', () => {
+    if (_explorer.artists.length === 0) return;
+    clearTimeout(_explorer._resizeTimer);
+    _explorer._resizeTimer = setTimeout(() => _explorerRedrawAllConnections(), 150);
+});
+
+
+// ==================================================================================
+// DASHBOARD — Recent Syncs Section
+// ==================================================================================
+
+// ==================================================================================
+// SERVER PLAYLIST MANAGER — Sync Page Server Tab
+// ==================================================================================
+
+let _serverPlaylists = [];
+let _serverEditorState = { playlistId: null, playlistName: '', tracks: [] };
+
+async function loadServerPlaylists() {
+    const container = document.getElementById('server-playlist-container');
+    const editor = document.getElementById('server-editor');
+    const btn = document.getElementById('server-refresh-btn');
+
+    if (editor) editor.style.display = 'none';
+    if (container) container.style.display = '';
+    if (btn) { btn.disabled = true; btn.textContent = '🔄 Loading...'; }
+
+    // Show skeleton loader
+    if (container) {
+        container.innerHTML = `<div class="server-pl-grid">${Array.from({ length: 6 }, (_, i) => `
+            <div class="server-pl-card server-pl-skeleton" style="animation-delay: ${i * 0.06}s">
+                <div class="server-pl-card-top">
+                    <div class="skeleton-box" style="width:44px;height:44px;border-radius:12px"></div>
+                    <div class="skeleton-box" style="width:28px;height:28px;border-radius:8px"></div>
+                </div>
+                <div class="server-pl-card-body">
+                    <div class="skeleton-box" style="width:${60 + Math.random() * 30}%;height:14px;border-radius:4px;margin-bottom:8px"></div>
+                    <div class="skeleton-box" style="width:40%;height:11px;border-radius:4px"></div>
+                </div>
+                <div class="server-pl-card-footer" style="border-top:1px solid rgba(255,255,255,0.05);padding-top:12px">
+                    <div class="skeleton-box" style="width:60px;height:10px;border-radius:3px"></div>
+                </div>
+            </div>`).join('')}</div>`;
+    }
+
+    try {
+        // Fetch server playlists, mirrored playlists, and sync history names in parallel
+        const [serverRes, mirroredRes, historyNamesRes] = await Promise.all([
+            fetch('/api/server/playlists'),
+            fetch('/api/mirrored-playlists'),
+            fetch('/api/sync/history/names'),
+        ]);
+        const data = await serverRes.json();
+        let mirroredAll = [];
+        try { mirroredAll = await mirroredRes.json(); } catch (_) { }
+        if (!Array.isArray(mirroredAll)) mirroredAll = [];
+        let historyNames = [];
+        try { historyNames = await historyNamesRes.json(); } catch (_) { }
+        if (!Array.isArray(historyNames)) historyNames = [];
+
+        if (!data.success || !data.playlists) {
+            if (container) container.innerHTML = `<div class="playlist-placeholder">${data.error || 'Could not load server playlists'}</div>`;
+            return;
+        }
+
+        // Separate synced vs non-synced playlists
+        const mirroredNames = new Set(mirroredAll.map(p => p.name.trim().toLowerCase()));
+        const syncedNames = new Set(historyNames.map(n => n.trim().toLowerCase()));
+        const synced = [];
+        const unsynced = [];
+        for (const pl of data.playlists) {
+            const key = pl.name.trim().toLowerCase();
+            if (mirroredNames.has(key) || syncedNames.has(key)) {
+                pl._synced = true;
+                synced.push(pl);
+            } else {
+                pl._synced = false;
+                unsynced.push(pl);
+            }
+        }
+
+        _serverPlaylists = [...synced, ...unsynced];
+        const title = document.getElementById('server-tab-title');
+        const serverName = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : '';
+        if (title) title.textContent = `Server Playlists (${serverName})`;
+
+        if (synced.length === 0 && unsynced.length === 0) {
+            if (container) container.innerHTML = '<div class="playlist-placeholder">No playlists found on your media server.</div>';
+            return;
+        }
+
+        // Server type icon SVG
+        const serverIcons = {
+            plex: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M11.643 0H4.68l7.679 12L4.68 24h6.963L19.32 12z"/></svg>',
+            jellyfin: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2C8.5 2 6 5.1 6 9c0 2.4 1.2 5.5 3.3 8.7.7 1 1.5 2 2.2 2.9.2.3.4.3.5.4.1 0 .3-.1.5-.4.7-.9 1.5-1.9 2.2-2.9C16.8 14.5 18 11.4 18 9c0-3.9-2.5-7-6-7z"/></svg>',
+            navidrome: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>'
+        };
+        const sIcon = serverIcons[data.server_type] || serverIcons.plex;
+
+        function _renderPlCard(pl, i, isSynced) {
+            const hue = (i * 37 + 200) % 360;
+            const safeName = _esc(pl.name).replace(/'/g, "\\'");
+            const cardClass = isSynced ? 'server-pl-card' : 'server-pl-card server-pl-unsynced';
+            const action = isSynced ? 'Open Editor' : 'View Tracks';
+            return `
+            <div class="${cardClass}" onclick="openServerPlaylistEditor('${pl.id}', '${safeName}')" style="animation-delay: ${i * 0.04}s; --card-hue: ${hue}">
+                <div class="server-pl-card-glow"></div>
+                <div class="server-pl-card-top">
+                    <div class="server-pl-card-icon-wrap">
+                        <div class="server-pl-card-bars">
+                            <span></span><span></span><span></span><span></span>
+                        </div>
+                    </div>
+                    <div class="server-pl-card-badge">${sIcon}</div>
+                </div>
+                <div class="server-pl-card-body">
+                    <div class="server-pl-card-name">${_esc(pl.name)}</div>
+                    <div class="server-pl-card-meta">
+                        <span class="server-pl-track-count">${pl.track_count}</span> tracks
+                        ${isSynced ? '<span class="server-pl-synced-badge">Synced</span>' : ''}
+                    </div>
+                </div>
+                <div class="server-pl-card-footer">
+                    <span class="server-pl-card-action">${action}</span>
+                    <span class="server-pl-card-arrow">
+                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+                    </span>
+                </div>
+            </div>`;
+        }
+
+        let html = '';
+
+        if (synced.length > 0) {
+            html += `<div class="server-pl-section">
+                <div class="server-pl-section-header">
+                    <span class="server-pl-section-icon">&#128279;</span>
+                    <span class="server-pl-section-title">Synced Playlists</span>
+                    <span class="server-pl-section-count">${synced.length}</span>
+                </div>
+                <div class="server-pl-grid">${synced.map((pl, i) => _renderPlCard(pl, i, true)).join('')}</div>
+            </div>`;
+        }
+
+        if (unsynced.length > 0) {
+            html += `<div class="server-pl-section server-pl-section-unsynced">
+                <div class="server-pl-section-header">
+                    <span class="server-pl-section-icon">&#127925;</span>
+                    <span class="server-pl-section-title">Other Server Playlists</span>
+                    <span class="server-pl-section-count">${unsynced.length}</span>
+                </div>
+                <div class="server-pl-grid">${unsynced.map((pl, i) => _renderPlCard(pl, i + synced.length, false)).join('')}</div>
+            </div>`;
+        }
+
+        container.innerHTML = html;
+
+    } catch (e) {
+        if (container) container.innerHTML = `<div class="playlist-placeholder">Error: ${e.message}</div>`;
+    } finally {
+        if (btn) { btn.disabled = false; btn.textContent = '🔄 Refresh'; }
+    }
+}
+
+async function openServerPlaylistEditor(playlistId, playlistName) {
+    // Step 1: Look up mirrored playlists by name
+    let mirroredPlaylists = [];
+    try {
+        const res = await fetch('/api/mirrored-playlists');
+        const all = await res.json();
+        mirroredPlaylists = (Array.isArray(all) ? all : []).filter(p =>
+            p.name.trim().toLowerCase() === playlistName.trim().toLowerCase()
+        );
+    } catch (e) {
+        console.error('Failed to fetch mirrored playlists:', e);
+    }
+
+    if (mirroredPlaylists.length === 1) {
+        // Single match — go straight to compare
+        _openServerCompareView(playlistId, playlistName, mirroredPlaylists[0]);
+    } else if (mirroredPlaylists.length === 0) {
+        // No match — server-only view
+        _openServerCompareView(playlistId, playlistName, null);
+    } else {
+        // Multiple — disambiguation
+        _showServerDisambig(playlistId, playlistName, mirroredPlaylists);
+    }
+}
+
+// ── Disambiguation ──
+
+function _showServerDisambig(playlistId, playlistName, candidates) {
+    const overlay = document.getElementById('server-disambig-overlay');
+    const list = document.getElementById('server-disambig-list');
+    const subtitle = document.getElementById('server-disambig-subtitle');
+    if (!overlay || !list) return;
+
+    if (subtitle) subtitle.textContent = `"${playlistName}" was found on ${candidates.length} sources. Which one do you want to compare against?`;
+
+    const sourceIcons = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
+
+    list.innerHTML = candidates.map((p, i) => {
+        const icon = sourceIcons[p.source] || '📋';
+        const ago = timeAgo(p.mirrored_at || p.updated_at);
+        return `
+        <div class="server-disambig-card" onclick="selectDisambigPlaylist('${playlistId}', '${_esc(playlistName).replace(/'/g, "\\'")}', ${p.id})" style="animation-delay: ${i * 0.06}s">
+            <div class="server-disambig-icon">${icon}</div>
+            <div class="server-disambig-info">
+                <div class="server-disambig-name">${_esc(p.name)}</div>
+                <div class="server-disambig-details">
+                    <span class="source-badge">${_esc(p.source)}</span>
+                    <span>${p.track_count || 0} tracks</span>
+                    ${p.owner ? `<span>by ${_esc(p.owner)}</span>` : ''}
+                    <span>Mirrored ${ago}</span>
+                </div>
+            </div>
+            <div class="server-disambig-arrow">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+            </div>
+        </div>`;
+    }).join('');
+
+    overlay.classList.remove('hidden');
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+
+    // Escape key + click backdrop to close
+    overlay.onclick = e => { if (e.target === overlay) closeServerDisambig(); };
+    window._disambigEsc = e => { if (e.key === 'Escape') closeServerDisambig(); };
+    document.addEventListener('keydown', window._disambigEsc);
+}
+
+function closeServerDisambig() {
+    const overlay = document.getElementById('server-disambig-overlay');
+    if (overlay) {
+        overlay.classList.remove('visible');
+        setTimeout(() => overlay.classList.add('hidden'), 250);
+    }
+    if (window._disambigEsc) { document.removeEventListener('keydown', window._disambigEsc); window._disambigEsc = null; }
+}
+
+async function selectDisambigPlaylist(playlistId, playlistName, mirroredId) {
+    closeServerDisambig();
+    try {
+        const res = await fetch(`/api/mirrored-playlists/${mirroredId}`);
+        const mirrored = await res.json();
+        _openServerCompareView(playlistId, playlistName, mirrored);
+    } catch (e) {
+        showToast('Failed to load mirrored playlist: ' + e.message, 'error');
+    }
+}
+
+// ── Compare View ──
+
+async function _openServerCompareView(playlistId, playlistName, mirroredPlaylist) {
+    const container = document.getElementById('server-playlist-container');
+    const editor = document.getElementById('server-editor');
+    if (!editor) return;
+
+    if (container) container.style.display = 'none';
+    editor.style.display = '';
+
+    const nameEl = document.getElementById('server-editor-name');
+    const metaEl = document.getElementById('server-editor-meta');
+    const banner = document.getElementById('server-no-source-banner');
+    const sourceScroll = document.getElementById('server-col-source-scroll');
+    const serverScroll = document.getElementById('server-col-server-scroll');
+
+    if (nameEl) nameEl.textContent = playlistName;
+    if (metaEl) metaEl.textContent = 'Loading comparison...';
+    if (banner) banner.style.display = 'none';
+    if (sourceScroll) sourceScroll.innerHTML = '<div style="text-align:center;padding:30px;color:rgba(255,255,255,0.2);font-size:12px">Loading...</div>';
+    if (serverScroll) serverScroll.innerHTML = '<div style="text-align:center;padding:30px;color:rgba(255,255,255,0.2);font-size:12px">Loading...</div>';
+
+    // Store state
+    _serverEditorState = {
+        playlistId,
+        playlistName,
+        mirroredPlaylist,
+        tracks: [],
+    };
+
+    // Build API URL
+    let url = `/api/server/playlist/${playlistId}/tracks?name=${encodeURIComponent(playlistName)}`;
+    if (mirroredPlaylist && mirroredPlaylist.id) {
+        url += `&mirrored_playlist_id=${mirroredPlaylist.id}`;
+    }
+
+    try {
+        const response = await fetch(url);
+        const data = await response.json();
+        if (!data.success) {
+            if (metaEl) metaEl.textContent = data.error || 'Failed to load';
+            return;
+        }
+
+        _serverEditorState.tracks = data.tracks || [];
+        _serverEditorState.serverType = data.server_type;
+
+        const tracks = _serverEditorState.tracks;
+        const serverLabel = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : 'Server';
+
+        // Header metadata
+        if (metaEl) metaEl.textContent = `${serverLabel} · ${data.server_track_count || 0} server tracks · ${data.source_track_count || 0} source tracks`;
+
+        // Show no-source banner if needed
+        if (!mirroredPlaylist && banner) {
+            banner.style.display = '';
+        }
+
+        // Stats, filter counts, footer
+        _updateCompareStats(tracks);
+
+        // Column headers
+        const sourceLabel = mirroredPlaylist ? (mirroredPlaylist.source || 'source').charAt(0).toUpperCase() + (mirroredPlaylist.source || 'source').slice(1) : 'Source';
+        const sourceIconMap = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
+        const serverIconMap = { plex: '🟠', jellyfin: '🟣', navidrome: '🔵' };
+
+        const srcIconEl = document.getElementById('server-col-source-icon');
+        const srcLabelEl = document.getElementById('server-col-source-label');
+        const srcCountEl = document.getElementById('server-col-source-count');
+        const svrIconEl = document.getElementById('server-col-server-icon');
+        const svrLabelEl = document.getElementById('server-col-server-label');
+        const svrCountEl = document.getElementById('server-col-server-count');
+
+        if (srcIconEl) srcIconEl.textContent = mirroredPlaylist ? (sourceIconMap[mirroredPlaylist.source] || '📋') : '📋';
+        if (srcLabelEl) srcLabelEl.textContent = sourceLabel;
+        if (srcCountEl) srcCountEl.textContent = `${data.source_track_count || 0} tracks`;
+        if (svrIconEl) svrIconEl.textContent = serverIconMap[data.server_type] || '💻';
+        if (svrLabelEl) svrLabelEl.textContent = serverLabel;
+        if (svrCountEl) svrCountEl.textContent = `${data.server_track_count || 0} tracks`;
+
+        // Render columns
+        _renderCompareColumns(tracks);
+
+        // Scroll linking
+        _setupScrollLinking();
+
+    } catch (e) {
+        if (metaEl) metaEl.textContent = 'Error: ' + e.message;
+    }
+}
+
+function _updateCompareStats(tracks) {
+    const matched = tracks.filter(t => t.match_status === 'matched').length;
+    const missing = tracks.filter(t => t.match_status === 'missing').length;
+    const extra = tracks.filter(t => t.match_status === 'extra').length;
+
+    const statsEl = document.getElementById('server-editor-stats');
+    if (statsEl) {
+        statsEl.innerHTML = `
+            <div class="server-editor-stat"><div class="server-editor-stat-num matched">${matched}</div><div class="server-editor-stat-label">Matched</div></div>
+            <div class="server-editor-stat"><div class="server-editor-stat-num missing">${missing}</div><div class="server-editor-stat-label">Missing</div></div>
+            ${extra > 0 ? `<div class="server-editor-stat"><div class="server-editor-stat-num extra">${extra}</div><div class="server-editor-stat-label">Extra</div></div>` : ''}
+        `;
+    }
+
+    const editor = document.getElementById('server-editor');
+    if (editor) {
+        editor.querySelectorAll('.discog-filter').forEach(btn => {
+            const f = btn.dataset.filter;
+            if (f === 'all') btn.textContent = `All (${tracks.length})`;
+            else if (f === 'matched') btn.textContent = `Matched (${matched})`;
+            else if (f === 'missing') btn.textContent = `Missing (${missing})`;
+            else if (f === 'extra') btn.textContent = `Extra (${extra})`;
+        });
+    }
+
+    const footer = document.getElementById('server-editor-footer');
+    if (footer) footer.textContent = `${matched}/${matched + missing} matched${extra > 0 ? ` · ${extra} extra on server` : ''}`;
+}
+
+function _formatDurationMs(ms) {
+    if (!ms) return '';
+    const s = Math.round(ms / 1000);
+    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
+}
+
+function _renderCompareColumns(tracks) {
+    const sourceScroll = document.getElementById('server-col-source-scroll');
+    const serverScroll = document.getElementById('server-col-server-scroll');
+    if (!sourceScroll || !serverScroll) return;
+
+    let sourceHTML = '';
+    let serverHTML = '';
+
+    tracks.forEach((t, i) => {
+        const src = t.source_track;
+        const svr = t.server_track;
+        const status = t.match_status;
+        const pairId = `pair-${i}`;
+
+        // ── Source (left) column ──
+        if (src) {
+            const dur = _formatDurationMs(src.duration_ms);
+            sourceHTML += `
+            <div class="server-track-item ${status}" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
+                 onclick="_compareTrackClick('source', ${i})">
+                <div class="server-track-num">${src.position != null ? src.position : i + 1}</div>
+                <div class="server-track-art">
+                    ${src.image_url ? `<img src="${src.image_url}" alt="" loading="lazy">` : '<div class="server-track-art-empty"></div>'}
+                </div>
+                <div class="server-track-info">
+                    <div class="server-track-title">${_esc(src.name)}</div>
+                    <div class="server-track-artist">${_esc(src.artist || '')}</div>
+                </div>
+                <div class="server-track-duration">${dur}</div>
+                <div class="server-track-status-dot"></div>
+            </div>`;
+        } else {
+            // Extra track — no source
+            sourceHTML += `
+            <div class="server-track-item extra-gap" data-pair-id="${pairId}" data-index="${i}" data-status="${status}">
+                <div class="server-track-empty-slot extra">
+                    <span class="empty-slot-label">No source track</span>
+                </div>
+            </div>`;
+        }
+
+        // ── Server (right) column ──
+        if (svr) {
+            const dur = _formatDurationMs(svr.duration);
+            const conf = t.confidence != null ? t.confidence : null;
+            let confBadge = '';
+            if (status === 'matched' && conf != null) {
+                const pct = Math.round(conf * 100);
+                const cls = pct >= 100 ? 'exact' : pct >= 90 ? 'high' : 'fuzzy';
+                confBadge = `<span class="server-track-conf ${cls}" title="Title similarity">${pct}%</span>`;
+            }
+            serverHTML += `
+            <div class="server-track-item ${status}" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
+                 onclick="_compareTrackClick('server', ${i})">
+                <div class="server-track-num">${i + 1}</div>
+                <div class="server-track-art">
+                    ${svr.thumb ? `<img src="${svr.thumb}" alt="" loading="lazy">` : '<div class="server-track-art-empty"></div>'}
+                </div>
+                <div class="server-track-info">
+                    <div class="server-track-title">${_esc(svr.title)}</div>
+                    <div class="server-track-artist">${_esc(svr.artist || '')}</div>
+                </div>
+                ${confBadge}
+                <div class="server-track-duration">${dur}</div>
+                <div class="server-track-actions">
+                    ${status === 'matched' ? `<button class="server-track-swap-btn" onclick="event.stopPropagation(); serverSearchReplace(${i}, 'replace')" title="Swap for different version">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
+                    </button>` : ''}
+                    <button class="server-track-remove-btn" onclick="event.stopPropagation(); _serverRemoveTrack(${i}, '${svr.id}')" title="Remove from playlist">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                    </button>
+                </div>
+                <div class="server-track-status-dot"></div>
+            </div>`;
+        } else {
+            // Missing on server — clickable empty slot
+            const hint = src ? `${src.artist || ''} — ${src.name}` : '';
+            serverHTML += `
+            <div class="server-track-item empty-slot-wrap" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
+                 onclick="serverSearchReplace(${i}, 'add')">
+                <div class="server-track-empty-slot missing">
+                    <div class="empty-slot-icon">
+                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+                    </div>
+                    <span class="empty-slot-label">Find &amp; add</span>
+                    <span class="empty-slot-hint">${_esc(hint)}</span>
+                </div>
+            </div>`;
+        }
+    });
+
+    sourceScroll.innerHTML = sourceHTML;
+    serverScroll.innerHTML = serverHTML;
+}
+
+function _setupScrollLinking() {
+    const sourceScroll = document.getElementById('server-col-source-scroll');
+    const serverScroll = document.getElementById('server-col-server-scroll');
+    if (!sourceScroll || !serverScroll) return;
+
+    // Remove old listeners to prevent accumulation on refresh
+    if (window._serverScrollAC) window._serverScrollAC.abort();
+    window._serverScrollAC = new AbortController();
+    const signal = window._serverScrollAC.signal;
+
+    let syncing = false;
+
+    const syncScroll = (from, to) => {
+        if (syncing) return;
+        syncing = true;
+        const maxFrom = from.scrollHeight - from.clientHeight;
+        const maxTo = to.scrollHeight - to.clientHeight;
+        if (maxFrom > 0 && maxTo > 0) {
+            to.scrollTop = (from.scrollTop / maxFrom) * maxTo;
+        }
+        requestAnimationFrame(() => { syncing = false; });
+    };
+
+    sourceScroll.addEventListener('scroll', () => syncScroll(sourceScroll, serverScroll), { signal });
+    serverScroll.addEventListener('scroll', () => syncScroll(serverScroll, sourceScroll), { signal });
+}
+
+function _compareTrackClick(side, index) {
+    const otherSide = side === 'source' ? 'server' : 'source';
+    const otherScroll = document.getElementById(`server-col-${otherSide}-scroll`);
+    const pairId = `pair-${index}`;
+
+    // Clear previous highlights
+    document.querySelectorAll('.server-track-item.highlighted').forEach(el => el.classList.remove('highlighted'));
+
+    // Highlight both paired items
+    document.querySelectorAll(`[data-pair-id="${pairId}"]`).forEach(el => el.classList.add('highlighted'));
+
+    // Scroll the OTHER column to show the paired item
+    const target = otherScroll?.querySelector(`[data-pair-id="${pairId}"]`);
+    if (target) {
+        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+}
+
+function _serverEditorRefresh() {
+    _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+}
+
+function serverEditorBack() {
+    const container = document.getElementById('server-playlist-container');
+    const editor = document.getElementById('server-editor');
+    if (editor) editor.style.display = 'none';
+    if (container) container.style.display = '';
+}
+
+function _serverEditorFilter(btn, filter) {
+    btn.closest('.server-editor-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+
+    // Filter both columns simultaneously
+    ['server-col-source-scroll', 'server-col-server-scroll'].forEach(colId => {
+        document.querySelectorAll(`#${colId} .server-track-item`).forEach(item => {
+            const status = item.dataset.status;
+            item.style.display = (filter === 'all' || status === filter) ? '' : 'none';
+        });
+    });
+}
+
+// ── Track Search / Replace ──
+
+async function serverSearchReplace(trackIndex, mode) {
+    const track = _serverEditorState.tracks[trackIndex];
+    if (!track) return;
+
+    const src = track.source_track || {};
+    const svr = track.server_track || {};
+    // Search by track name only first (more reliable than "artist trackname" blob)
+    const searchQuery = src.name ? src.name.trim() : (svr.title || '').trim();
+    const contextArtist = src.artist || svr.artist || '';
+    const contextName = src.name || svr.title || '';
+
+    const existing = document.getElementById('server-search-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'server-search-overlay';
+    overlay.className = 'server-search-overlay';
+    overlay.innerHTML = `
+        <div class="server-search-popover" id="server-search-popover">
+            <div class="server-search-header">
+                <div>
+                    <div class="server-search-title">${mode === 'replace' ? 'Swap Track' : 'Add Track to Server'}</div>
+                    ${contextName ? `<div class="server-search-context">
+                        <span class="server-search-context-label">Source:</span>
+                        <span class="server-search-context-artist">${_esc(contextArtist)}</span>
+                        <span class="server-search-context-sep">—</span>
+                        <span class="server-search-context-name">${_esc(contextName)}</span>
+                    </div>` : ''}
+                </div>
+                <button class="server-search-close" onclick="document.getElementById('server-search-overlay')?.remove()">&times;</button>
+            </div>
+            <div class="server-search-input-wrap">
+                <div class="server-search-input-icon">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+                </div>
+                <input type="text" class="server-search-input" id="server-search-input" value="${_esc(searchQuery)}" placeholder="Search by track name, artist, or album..." onkeydown="if(event.key==='Enter') _serverSearchExecute()">
+            </div>
+            <div class="server-search-results-header" id="server-search-results-header"></div>
+            <div class="server-search-results" id="server-search-results">
+                <div class="server-search-hint">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="margin-bottom:6px;opacity:0.4"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+                    <br>Searching...
+                </div>
+            </div>
+        </div>
+    `;
+    // Click overlay background or press Escape to close
+    overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
+    overlay._escHandler = e => { if (e.key === 'Escape') overlay.remove(); };
+    document.addEventListener('keydown', overlay._escHandler);
+    // Clean up Escape listener when overlay is removed
+    const obs = new MutationObserver(() => {
+        if (!document.body.contains(overlay)) { document.removeEventListener('keydown', overlay._escHandler); obs.disconnect(); }
+    });
+    obs.observe(document.body, { childList: true });
+
+    const popover = overlay.querySelector('.server-search-popover');
+    popover.dataset.trackIndex = trackIndex;
+    popover.dataset.mode = mode;
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+    document.getElementById('server-search-input')?.focus();
+    document.getElementById('server-search-input')?.select();
+
+    _serverSearchExecute();
+}
+
+async function _serverSearchExecute() {
+    const input = document.getElementById('server-search-input');
+    const results = document.getElementById('server-search-results');
+    const resultsHeader = document.getElementById('server-search-results-header');
+    const popover = document.getElementById('server-search-popover');
+    if (!input || !results || !popover) return;
+
+    const query = input.value.trim();
+    if (!query) {
+        results.innerHTML = '<div class="server-search-hint">Type a search query</div>';
+        if (resultsHeader) resultsHeader.textContent = '';
+        return;
+    }
+
+    results.innerHTML = '<div class="server-search-hint"><div class="server-search-spinner"></div>Searching library...</div>';
+    if (resultsHeader) resultsHeader.textContent = '';
+
+    try {
+        const response = await fetch(`/api/library/search-tracks?q=${encodeURIComponent(query)}&limit=20`);
+        const data = await response.json();
+
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            results.innerHTML = `<div class="server-search-hint">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="margin-bottom:6px;opacity:0.3"><path d="M9.172 14.828a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+                <br>No results found<br><span style="font-size:10px;opacity:0.5">Try different keywords or a shorter query</span>
+            </div>`;
+            return;
+        }
+
+        const trackIndex = parseInt(popover.dataset.trackIndex);
+        const mode = popover.dataset.mode;
+
+        if (resultsHeader) resultsHeader.textContent = `${data.tracks.length} result${data.tracks.length !== 1 ? 's' : ''}`;
+
+        results.innerHTML = data.tracks.map((t, i) => {
+            const ext = (t.file_path || '').split('.').pop().toUpperCase();
+            const format = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'AAC', 'WAV'].includes(ext) ? (ext === 'M4A' ? 'AAC' : ext) : '';
+            const dur = _formatDurationMs(t.duration);
+            const bitrateStr = t.bitrate ? `${t.bitrate}k` : '';
+            return `
+                <div class="server-search-result" onclick="_serverSelectTrack(${trackIndex}, '${mode}', '${t.id}', this)" style="animation-delay:${i * 0.03}s">
+                    <div class="server-search-result-art">
+                        ${t.album_thumb_url ? `<img src="${t.album_thumb_url}" alt="" loading="lazy">` : '<div class="server-search-result-art-empty"></div>'}
+                    </div>
+                    <div class="server-search-result-info">
+                        <div class="server-search-result-title">${_esc(t.title)}</div>
+                        <div class="server-search-result-meta">${_esc(t.artist_name)}${t.album_title ? ` · ${_esc(t.album_title)}` : ''}</div>
+                    </div>
+                    <div class="server-search-result-details">
+                        ${format ? `<span class="server-search-format">${format}</span>` : ''}
+                        ${bitrateStr ? `<span class="server-search-bitrate">${bitrateStr}</span>` : ''}
+                        ${dur ? `<span class="server-search-dur">${dur}</span>` : ''}
+                    </div>
+                    <button class="server-search-select-btn">Select</button>
+                </div>
+            `;
+        }).join('');
+
+    } catch (e) {
+        results.innerHTML = `<div class="server-search-hint">Error: ${e.message}</div>`;
+    }
+}
+
+async function _serverSelectTrack(trackIndex, mode, newTrackId, el) {
+    const track = _serverEditorState.tracks[trackIndex];
+    if (!track) return;
+
+    const btn = el.querySelector('.server-search-select-btn');
+    if (btn) { btn.disabled = true; btn.textContent = '...'; }
+
+    try {
+        let response;
+        if (mode === 'replace') {
+            response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/replace-track`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    old_track_id: track.server_track?.id,
+                    new_track_id: newTrackId,
+                    playlist_name: _serverEditorState.playlistName,
+                })
+            });
+        } else {
+            // Calculate the server-side position for this track
+            // Count how many server tracks exist before this index
+            let serverPos = 0;
+            for (let k = 0; k < trackIndex; k++) {
+                if (_serverEditorState.tracks[k]?.server_track) serverPos++;
+            }
+            response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/add-track`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    track_id: newTrackId,
+                    playlist_name: _serverEditorState.playlistName,
+                    position: serverPos,
+                })
+            });
+        }
+
+        const data = await response.json();
+        if (data.success) {
+            showToast(data.message || 'Track updated', 'success');
+            document.getElementById('server-search-overlay')?.remove();
+            // Update playlist ID if server recreated it (Plex deletes+recreates)
+            if (data.new_playlist_id) _serverEditorState.playlistId = data.new_playlist_id;
+
+            // Re-fetch from server so the compare view reflects the actual server state
+            // and the matching algorithm can correctly wire up the newly added/replaced track
+            _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+        } else {
+            showToast(data.error || 'Failed to update track', 'error');
+            if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
+        }
+    } catch (e) {
+        showToast('Error: ' + e.message, 'error');
+        if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
+    }
+}
+
+async function _serverRemoveTrack(trackIndex, serverTrackId) {
+    if (!serverTrackId) return;
+
+    const track = _serverEditorState.tracks[trackIndex];
+    const trackTitle = track?.server_track?.title || 'this track';
+
+    if (!await showConfirmDialog({ title: 'Remove Track', message: `Remove "${trackTitle}" from this playlist?`, confirmText: 'Remove', destructive: true })) return;
+
+    try {
+        const response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/remove-track`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                track_id: serverTrackId,
+                playlist_name: _serverEditorState.playlistName,
+            })
+        });
+
+        const data = await response.json();
+        if (data.success) {
+            showToast(data.message || 'Track removed', 'success');
+            const pid = data.new_playlist_id || _serverEditorState.playlistId;
+            _serverEditorState.playlistId = pid;
+            _openServerCompareView(pid, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
+        } else {
+            showToast(data.error || 'Failed to remove track', 'error');
+        }
+    } catch (e) {
+        showToast('Error: ' + e.message, 'error');
+    }
+}
+
+
+// Auto-refresh sync cards every 30 seconds when on dashboard
+setInterval(() => {
+    if (typeof currentPage !== 'undefined' && currentPage === 'dashboard') {
+        loadDashboardSyncHistory();
+    }
+}, 30000);
+
+async function loadDashboardSyncHistory() {
+    const container = document.getElementById('sync-history-cards');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/sync/history?limit=10');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        // Filter to only show playlist syncs — not album downloads or wishlist processing
+        const entries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
+
+        if (entries.length === 0) {
+            container.innerHTML = '<div class="sync-history-empty">No syncs yet</div>';
+            return;
+        }
+
+        container.innerHTML = entries.map((entry, cardIndex) => {
+            const found = entry.tracks_found || 0;
+            const total = entry.total_tracks || 0;
+            const downloaded = entry.tracks_downloaded || 0;
+            const failed = entry.tracks_failed || 0;
+            const pct = total > 0 ? Math.round((found / total) * 100) : 0;
+
+            // Health color
+            let healthClass = 'health-good';
+            if (pct < 50) healthClass = 'health-bad';
+            else if (pct < 80) healthClass = 'health-warn';
+
+            // Source badge
+            const sourceLabels = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', wishlist: 'Wishlist' };
+            const sourceLabel = sourceLabels[entry.source] || entry.source || 'Unknown';
+
+            // Time
+            const timeStr = entry.started_at ? _relativeTime(entry.started_at) : '';
+
+            // Name
+            const name = entry.artist_name
+                ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
+                : entry.playlist_name || 'Unknown';
+
+            return `
+                <div class="sync-history-card ${healthClass}" onclick="openSyncDetailModal(${entry.id})" style="animation-delay: ${cardIndex * 0.05}s">
+                    <button class="sync-card-delete" onclick="event.stopPropagation(); deleteSyncHistoryCard(${entry.id}, this)" title="Remove">&times;</button>
+                    <div class="sync-card-thumb">
+                        ${entry.thumb_url ? `<img src="${entry.thumb_url}" alt="" loading="lazy">` : '<div class="sync-card-thumb-placeholder">&#9835;</div>'}
+                    </div>
+                    <div class="sync-card-info">
+                        <div class="sync-card-name">${typeof _esc === 'function' ? _esc(name) : name}</div>
+                        <div class="sync-card-meta">
+                            <span class="sync-card-source">${sourceLabel}</span>
+                            <span class="sync-card-time">${timeStr}</span>
+                        </div>
+                    </div>
+                    <div class="sync-card-stats">
+                        <div class="sync-card-pct">${pct}%</div>
+                        <div class="sync-card-bar">
+                            <div class="sync-card-bar-fill" style="width: ${pct}%"></div>
+                        </div>
+                        <div class="sync-card-counts">${found}/${total} matched${downloaded > 0 ? ` · ${downloaded} ⬇` : ''}${failed > 0 ? ` · ${failed} ✗` : ''}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+    } catch (e) {
+        console.warn('Failed to load sync history for dashboard:', e);
+    }
+}
+
+function _relativeTime(dateStr) {
+    try {
+        const d = new Date(dateStr);
+        const now = new Date();
+        const diffMs = now - d;
+        const mins = Math.floor(diffMs / 60000);
+        if (mins < 1) return 'just now';
+        if (mins < 60) return `${mins}m ago`;
+        const hrs = Math.floor(mins / 60);
+        if (hrs < 24) return `${hrs}h ago`;
+        const days = Math.floor(hrs / 24);
+        if (days < 7) return `${days}d ago`;
+        return d.toLocaleDateString();
+    } catch (e) { return ''; }
+}
+
+async function openSyncDetailModal(entryId) {
+    try {
+        showLoadingOverlay('Loading sync details...');
+        const response = await fetch(`/api/sync/history/${entryId}`);
+        const data = await response.json();
+        hideLoadingOverlay();
+
+        if (!data.success || !data.entry) {
+            showToast('Could not load sync details', 'error');
+            return;
+        }
+
+        const entry = data.entry;
+        const trackResults = entry.track_results || [];
+        const name = entry.artist_name
+            ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
+            : entry.playlist_name || 'Unknown';
+
+        // Build modal
+        const overlay = document.createElement('div');
+        overlay.className = 'discog-modal-overlay';
+        overlay.id = 'sync-detail-overlay';
+
+        const found = entry.tracks_found || 0;
+        const total = entry.total_tracks || 0;
+        const downloaded = entry.tracks_downloaded || 0;
+
+        let trackRowsHtml = '';
+        if (trackResults.length > 0) {
+            trackRowsHtml = trackResults.map((t, i) => {
+                const statusIcon = t.status === 'found' ? '✅' : '❌';
+                const statusClass = t.status === 'found' ? 'matched' : 'unmatched';
+                const confPct = Math.round((t.confidence || 0) * 100);
+                const confClass = confPct >= 80 ? 'conf-high' : confPct >= 50 ? 'conf-mid' : 'conf-low';
+                let dlIcon = '';
+                if (t.download_status === 'completed') dlIcon = '✅';
+                else if (t.download_status === 'failed') dlIcon = '❌';
+                else if (t.download_status === 'not_found') dlIcon = '🔇';
+                else if (t.download_status === 'cancelled') dlIcon = '🚫';
+
+                let dlDisplay = dlIcon;
+                if (!dlDisplay && t.download_status === 'wishlist') dlDisplay = '<span class="sync-dl-wishlist">→ Wishlist</span>';
+
+                return `
+                    <tr class="sync-detail-row ${statusClass}">
+                        <td class="sync-detail-num">${i + 1}</td>
+                        <td class="sync-detail-art">
+                            ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy">` : '<div class="sync-detail-art-empty"></div>'}
+                        </td>
+                        <td class="sync-detail-track">${_esc(t.name || '')}</td>
+                        <td class="sync-detail-artist">${_esc(t.artist || '')}</td>
+                        <td class="sync-detail-album">${_esc(t.album || '')}</td>
+                        <td class="sync-detail-status">${statusIcon}</td>
+                        <td class="sync-detail-conf"><span class="conf-badge ${confClass}">${confPct}%</span></td>
+                        <td class="sync-detail-dl">${dlDisplay}</td>
+                    </tr>
+                `;
+            }).join('');
+        } else {
+            // Fallback to tracks_json if no track_results (old syncs before data caching)
+            const tracks = entry.tracks || [];
+            const esc = typeof _esc === 'function' ? _esc : s => s;
+            trackRowsHtml = `
+                <tr><td colspan="8" class="sync-detail-notice">
+                    <div class="sync-detail-notice-text">Per-track match data not available for this sync.<br>Re-sync this playlist to see detailed match results.</div>
+                </td></tr>
+            ` + tracks.map((t, i) => {
+                const artists = t.artists || [];
+                const artistName = artists.length > 0 ? (typeof artists[0] === 'string' ? artists[0] : artists[0]?.name || '') : '';
+                const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
+                return `
+                    <tr class="sync-detail-row no-data">
+                        <td class="sync-detail-num">${i + 1}</td>
+                        <td class="sync-detail-art"></td>
+                        <td class="sync-detail-track">${esc(t.name || '')}</td>
+                        <td class="sync-detail-artist">${esc(artistName)}</td>
+                        <td class="sync-detail-album">${esc(albumName)}</td>
+                        <td class="sync-detail-status" colspan="3"></td>
+                    </tr>
+                `;
+            }).join('');
+        }
+
+        // Count stats for filter bar
+        const matchedCount = trackResults.filter(t => t.status === 'found').length;
+        const unmatchedCount = trackResults.filter(t => t.status !== 'found').length;
+        const downloadedCount = trackResults.filter(t => t.download_status === 'completed').length;
+
+        overlay.innerHTML = `
+            <div class="discog-modal">
+                <div class="discog-modal-hero" ${entry.thumb_url ? `style="background-image:url('${entry.thumb_url}')"` : ''}>
+                    <div class="discog-modal-hero-overlay"></div>
+                    <div class="discog-modal-hero-content">
+                        <h2 class="discog-modal-title">Sync Details</h2>
+                        <p class="discog-modal-artist">${_esc(name)}</p>
+                    </div>
+                    <button class="discog-modal-close" onclick="document.getElementById('sync-detail-overlay')?.remove()">&times;</button>
+                </div>
+                <div class="discog-filter-bar">
+                    <div class="discog-filters">
+                        <button class="discog-filter active" data-filter="all" onclick="_syncDetailFilter(this, 'all')">All (${total})</button>
+                        <button class="discog-filter" data-filter="matched" onclick="_syncDetailFilter(this, 'matched')">Matched (${matchedCount})</button>
+                        <button class="discog-filter" data-filter="unmatched" onclick="_syncDetailFilter(this, 'unmatched')">Unmatched (${unmatchedCount})</button>
+                        ${downloadedCount > 0 ? `<button class="discog-filter" data-filter="downloaded" onclick="_syncDetailFilter(this, 'downloaded')">Downloaded (${downloadedCount})</button>` : ''}
+                    </div>
+                </div>
+                <div class="sync-detail-table-wrap">
+                    <table class="sync-detail-table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th></th>
+                                <th>Track</th>
+                                <th>Artist</th>
+                                <th>Album</th>
+                                <th>Match</th>
+                                <th>Conf.</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="sync-detail-tbody">
+                            ${trackRowsHtml}
+                        </tbody>
+                    </table>
+                </div>
+                <div class="discog-footer">
+                    <div class="discog-footer-info">${found} matched · ${downloaded} downloaded · ${total} total</div>
+                    <div class="discog-footer-actions">
+                        <button class="discog-cancel-btn" onclick="document.getElementById('sync-detail-overlay')?.remove()">Close</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+        requestAnimationFrame(() => overlay.classList.add('visible'));
+
+    } catch (e) {
+        hideLoadingOverlay();
+        showToast('Failed to load sync details', 'error');
+    }
+}
+
+async function deleteSyncHistoryCard(entryId, btnEl) {
+    try {
+        const card = btnEl.closest('.sync-history-card');
+        if (card) {
+            card.style.opacity = '0';
+            card.style.transform = 'scale(0.9)';
+        }
+        const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
+        if (resp.ok) {
+            setTimeout(() => { if (card) card.remove(); }, 200);
+        }
+    } catch (e) {
+        console.warn('Failed to delete sync entry:', e);
+    }
+}
+
+function _syncDetailFilter(btn, filter) {
+    // Update active button
+    btn.closest('.discog-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+
+    // Filter rows
+    document.querySelectorAll('#sync-detail-tbody .sync-detail-row').forEach(row => {
+        if (filter === 'all') {
+            row.style.display = '';
+        } else if (filter === 'matched') {
+            row.style.display = row.classList.contains('matched') ? '' : 'none';
+        } else if (filter === 'unmatched') {
+            row.style.display = row.classList.contains('unmatched') ? '' : 'none';
+        } else if (filter === 'downloaded') {
+            const dlCell = row.querySelector('.sync-detail-dl');
+            row.style.display = dlCell && dlCell.textContent.trim() === '✅' ? '' : 'none';
+        }
+    });
+}
+
+
+// ============================================
+// ACTIVE DOWNLOADS PAGE — Centralized Live View
+// ============================================
+
+let _adlPoller = null;
+let _adlFilter = 'all';
+let _adlData = [];
+let _adlBatches = [];
+let _adlBatchHistory = [];
+let _adlExpandedBatches = new Set();
+let _adlBatchHistoryPoller = null;
+let _adlFilterBatchId = null; // When set, main list shows only this batch
+const _batchColorMap = {};
+const _batchCompletedAt = {}; // batch_id -> timestamp when first seen as complete
+let _batchColorNext = 0;
+
+function _getBatchColor(batchId) {
+    if (!batchId) return -1;
+    if (_batchColorMap[batchId] === undefined) {
+        // Deterministic color from batch_id hash for consistency across reloads
+        let hash = 0;
+        for (let i = 0; i < batchId.length; i++) hash = ((hash << 5) - hash + batchId.charCodeAt(i)) | 0;
+        _batchColorMap[batchId] = Math.abs(hash) % 8;
+    }
+    return _batchColorMap[batchId];
+}
+
+function loadActiveDownloadsPage() {
+    _adlFetch();
+    _adlFetchBatchHistory();
+    // Poll downloads every 2 seconds, history every 60 seconds
+    if (_adlPoller) clearInterval(_adlPoller);
+    _adlPoller = setInterval(() => {
+        if (currentPage === 'active-downloads') _adlFetch();
+        else { clearInterval(_adlPoller); _adlPoller = null; }
+    }, 2000);
+    if (_adlBatchHistoryPoller) clearInterval(_adlBatchHistoryPoller);
+    _adlBatchHistoryPoller = setInterval(() => {
+        if (currentPage === 'active-downloads') _adlFetchBatchHistory();
+        else { clearInterval(_adlBatchHistoryPoller); _adlBatchHistoryPoller = null; }
+    }, 60000);
+}
+
+function adlSetFilter(filter) {
+    _adlFilter = filter;
+    document.querySelectorAll('#adl-filter-pills .adl-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === filter));
+    _adlRender();
+}
+
+async function _adlFetch() {
+    try {
+        const resp = await fetch('/api/downloads/all?limit=300');
+        const data = await resp.json();
+        if (data.success) {
+            _adlData = data.downloads || [];
+            _adlBatches = data.batches || [];
+            _adlRender();
+            _adlRenderBatchPanel();
+            // Don't call _adlUpdateBadge() here — it counts the truncated
+            // 300-item local array. The WebSocket status push already
+            // maintains the badge with the real server-side active count.
+        }
+    } catch (e) {
+        console.error('Downloads page fetch error:', e);
+    }
+}
+
+function _adlUpdateBadge() {
+    const activeCount = _adlData.filter(d => ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(d.status)).length;
+    _updateDlNavBadge(activeCount);
+}
+
+function _updateDlNavBadge(count) {
+    const badge = document.getElementById('dl-nav-badge');
+    if (badge) {
+        if (count > 0) {
+            badge.textContent = count;
+            badge.classList.remove('hidden');
+        } else {
+            badge.classList.add('hidden');
+        }
+    }
+}
+
+function _adlRender() {
+    const list = document.getElementById('adl-list');
+    const empty = document.getElementById('adl-empty');
+    const countEl = document.getElementById('adl-count');
+    if (!list) return;
+
+    // Apply filter
+    const activeStatuses = ['downloading', 'searching', 'post_processing'];
+    const queuedStatuses = ['queued'];
+    const completedStatuses = ['completed', 'skipped', 'already_owned'];
+    const failedStatuses = ['failed', 'not_found', 'cancelled'];
+
+    let filtered = _adlData;
+
+    // Batch filter: if a batch card is selected, narrow to that batch first
+    if (_adlFilterBatchId) {
+        filtered = filtered.filter(d => d.batch_id === _adlFilterBatchId);
+    }
+
+    if (_adlFilter === 'active') filtered = filtered.filter(d => activeStatuses.includes(d.status));
+    else if (_adlFilter === 'queued') filtered = filtered.filter(d => queuedStatuses.includes(d.status));
+    else if (_adlFilter === 'completed') filtered = filtered.filter(d => completedStatuses.includes(d.status));
+    else if (_adlFilter === 'failed') filtered = filtered.filter(d => failedStatuses.includes(d.status));
+
+    const completedN = _adlData.filter(d => [...completedStatuses, ...failedStatuses].includes(d.status)).length;
+
+    if (countEl) {
+        const activeN = _adlData.filter(d => activeStatuses.includes(d.status)).length;
+        const queuedN = _adlData.filter(d => queuedStatuses.includes(d.status)).length;
+        const total = _adlData.length;
+        const parts = [];
+        if (activeN > 0) parts.push(`${activeN} active`);
+        if (queuedN > 0) parts.push(`${queuedN} queued`);
+        parts.push(`${total} total`);
+        countEl.textContent = parts.join(' / ');
+    }
+
+    // Show/hide clear button
+    const clearBtn = document.getElementById('adl-clear-btn');
+    if (clearBtn) clearBtn.style.display = completedN > 0 ? '' : 'none';
+
+    // Show/hide cancel-all button — only visible when there's something to cancel
+    const cancelAllBtn = document.getElementById('adl-cancel-all-btn');
+    if (cancelAllBtn) {
+        const hasRunningWork = _adlData.some(d =>
+            [...activeStatuses, ...queuedStatuses].includes(d.status)
+        );
+        cancelAllBtn.style.display = hasRunningWork ? '' : 'none';
+    }
+
+    // Batch filter indicator banner
+    let existingBanner = document.getElementById('adl-batch-filter-banner');
+    if (_adlFilterBatchId) {
+        const batchInfo = _adlBatches.find(b => b.batch_id === _adlFilterBatchId);
+        const batchName = batchInfo ? batchInfo.batch_name : 'Unknown batch';
+        const colorIdx = _getBatchColor(_adlFilterBatchId);
+        const colorDot = colorIdx >= 0 ? `<span class="adl-filter-banner-dot" style="background:rgba(var(--batch-color-${colorIdx}),0.7)"></span>` : '';
+        if (!existingBanner) {
+            existingBanner = document.createElement('div');
+            existingBanner.id = 'adl-batch-filter-banner';
+            existingBanner.className = 'adl-batch-filter-banner';
+            list.parentNode.insertBefore(existingBanner, list);
+        }
+        existingBanner.innerHTML = `${colorDot}Showing: <strong>${_adlEsc(batchName)}</strong> <button class="adl-filter-banner-clear" onclick="_adlFilterByBatch('${_adlFilterBatchId}')">Clear filter</button>`;
+        existingBanner.style.display = '';
+    } else if (existingBanner) {
+        existingBanner.style.display = 'none';
+    }
+
+    if (filtered.length === 0) {
+        if (empty) empty.style.display = '';
+        // Clear any existing rows but keep the empty message
+        list.querySelectorAll('.adl-row').forEach(r => r.remove());
+        return;
+    }
+
+    if (empty) empty.style.display = 'none';
+
+    // Group by status category for section headers
+    const groups = { active: [], queued: [], completed: [], failed: [] };
+    for (const dl of filtered) {
+        const cls = _adlStatusClass(dl.status);
+        if (cls === 'active') groups.active.push(dl);
+        else if (cls === 'queued') groups.queued.push(dl);
+        else if (cls === 'completed') groups.completed.push(dl);
+        else groups.failed.push(dl);
+    }
+
+    let html = '';
+    const sections = [
+        { key: 'active', label: 'Active', items: groups.active },
+        { key: 'queued', label: 'Queued', items: groups.queued },
+        { key: 'completed', label: 'Completed', items: groups.completed },
+        { key: 'failed', label: 'Failed', items: groups.failed },
+    ];
+
+    for (const section of sections) {
+        if (section.items.length === 0) continue;
+        // Only show section headers in "all" filter mode
+        if (_adlFilter === 'all') {
+            html += `<div class="adl-section-header">${section.label} (${section.items.length})</div>`;
+        }
+        for (const dl of section.items) {
+            const statusClass = _adlStatusClass(dl.status);
+            const statusLabel = _adlStatusLabel(dl.status);
+            const title = _adlEsc(dl.title || 'Unknown Track');
+            const artist = _adlEsc(dl.artist || '');
+            const album = _adlEsc(dl.album || '');
+            const batchName = _adlEsc(dl.batch_name || '');
+            const error = dl.error ? _adlEsc(dl.error) : '';
+
+            const meta = [artist, album].filter(Boolean).join(' \u00B7 ');
+            const artHtml = dl.artwork
+                ? `<img class="adl-row-art" src="${_adlEsc(dl.artwork)}" alt="" onerror="this.style.display='none'">`
+                : '<div class="adl-row-art adl-row-art-empty"></div>';
+
+            // Track position: "3 of 19"
+            const posText = dl.batch_total > 1 ? `${(dl.track_index || 0) + 1} of ${dl.batch_total}` : '';
+
+            const colorIdx = _getBatchColor(dl.batch_id);
+            const colorBar = colorIdx >= 0
+                ? `<div class="adl-row-batch-color" style="background:rgba(var(--batch-color-${colorIdx}),0.6)"></div>`
+                : '';
+
+            // Per-row cancel only makes sense for in-flight tasks. Terminal
+            // states (completed/failed/cancelled) have nothing to cancel.
+            const isCancellable = statusClass === 'active' || statusClass === 'queued';
+            const cancelBtnHtml = isCancellable && dl.playlist_id && dl.track_index !== undefined
+                ? `<button class="adl-row-cancel" onclick="event.stopPropagation(); adlCancelRow(this, '${_adlEsc(dl.playlist_id)}', ${dl.track_index})" title="Cancel this download" aria-label="Cancel download">
+                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                   </button>`
+                : '';
+
+            html += `<div class="adl-row adl-row-${statusClass}" data-task-id="${dl.task_id}" data-batch-id="${dl.batch_id || ''}">
+                ${colorBar}
+                ${artHtml}
+                <div class="adl-row-info">
+                    <div class="adl-row-title">${title}</div>
+                    ${meta ? `<div class="adl-row-meta">${meta}</div>` : ''}
+                    ${batchName ? `<div class="adl-row-batch">${batchName}${posText ? ' &middot; Track ' + posText : ''}</div>` : ''}
+                    ${error ? `<div class="adl-row-error">${error}</div>` : ''}
+                </div>
+                <div class="adl-row-status ${statusClass}">
+                    <span class="adl-status-dot ${statusClass}"></span>
+                    ${statusLabel}
+                </div>
+                ${cancelBtnHtml}
+            </div>`;
+        }
+    }
+
+    // Preserve empty element, inject rows
+    const emptyEl = document.getElementById('adl-empty');
+    const emptyHtml = emptyEl ? emptyEl.outerHTML : '';
+    list.innerHTML = emptyHtml + html;
+    const newEmpty = document.getElementById('adl-empty');
+    if (newEmpty) newEmpty.style.display = filtered.length > 0 ? 'none' : '';
+}
+
+function _adlStatusClass(status) {
+    switch (status) {
+        case 'downloading': case 'searching': case 'post_processing': return 'active';
+        case 'queued': case 'pending': return 'queued';
+        case 'completed': case 'skipped': case 'already_owned': return 'completed';
+        case 'failed': case 'not_found': return 'failed';
+        case 'cancelled': return 'cancelled';
+        default: return 'queued';
+    }
+}
+
+function _adlStatusLabel(status) {
+    switch (status) {
+        case 'downloading': return '<span class="adl-spinner"></span>Downloading';
+        case 'searching': return '<span class="adl-spinner"></span>Searching';
+        case 'post_processing': return '<span class="adl-spinner"></span>Processing';
+        case 'queued': case 'pending': return 'Queued';
+        case 'completed': return 'Completed';
+        case 'skipped': return 'Skipped';
+        case 'already_owned': return 'Owned';
+        case 'failed': return 'Failed';
+        case 'not_found': return 'Not Found';
+        case 'cancelled': return 'Cancelled';
+        default: return status;
+    }
+}
+
+function _adlEsc(str) {
+    if (!str) return '';
+    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+async function adlClearCompleted() {
+    try {
+        const resp = await fetch('/api/downloads/clear-completed', { method: 'POST' });
+        const data = await resp.json();
+        if (data.success) {
+            if (typeof showToast === 'function') showToast(`Cleared ${data.cleared} downloads`, 'success');
+            _adlFetch();
+        }
+    } catch (e) {
+        console.error('Error clearing completed downloads:', e);
+    }
+}
+
+// ---- Batch Context Panel ----
+
+const _BATCH_FADE_SECONDS = 15; // Remove completed batches after this many seconds
+
+function _adlRenderBatchPanel() {
+    const container = document.getElementById('adl-batch-active');
+    const headerTitle = document.querySelector('.adl-batch-panel-title');
+    if (!container) return;
+
+    const now = Date.now();
+
+    // Filter out batches that completed more than FADE seconds ago
+    const visibleBatches = _adlBatches.filter(batch => {
+        const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
+        if (!isTerminal) {
+            delete _batchCompletedAt[batch.batch_id]; // Reset if it came back to life
+            return true;
+        }
+        if (!_batchCompletedAt[batch.batch_id]) {
+            _batchCompletedAt[batch.batch_id] = now;
+        }
+        const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
+        return elapsed < _BATCH_FADE_SECONDS;
+    });
+
+    // Update header with count
+    if (headerTitle) {
+        const activeCount = visibleBatches.filter(b => b.phase !== 'complete' && b.phase !== 'cancelled' && b.phase !== 'error').length;
+        headerTitle.textContent = activeCount > 0 ? `Batches (${activeCount})` : 'Batches';
+    }
+
+    if (visibleBatches.length === 0) {
+        container.innerHTML = `<div class="adl-batch-empty">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" style="opacity:0.25;margin-bottom:6px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            <div>No active batches</div>
+            <div style="font-size:0.7rem;margin-top:2px;opacity:0.5">Start a download from Search, Sync, or Wishlist</div>
+        </div>`;
+        return;
+    }
+
+    let html = '';
+    for (const batch of visibleBatches) {
+        const colorIdx = _getBatchColor(batch.batch_id);
+        const colorStyle = colorIdx >= 0 ? `border-left-color: rgba(var(--batch-color-${colorIdx}), 0.6)` : '';
+        const isExpanded = _adlExpandedBatches.has(batch.batch_id);
+        const isFiltered = _adlFilterBatchId === batch.batch_id;
+        const total = batch.total || 1;
+        const done = batch.completed + batch.failed;
+        const pct = Math.round((done / total) * 100);
+        const hasFailed = batch.failed > 0;
+        const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
+        const isActive = batch.phase === 'downloading' && batch.active > 0;
+
+        // Fade progress for completing batches
+        let fadeStyle = '';
+        if (isTerminal && _batchCompletedAt[batch.batch_id]) {
+            const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
+            const fadeStart = _BATCH_FADE_SECONDS * 0.6;
+            if (elapsed > fadeStart) {
+                const fadeProgress = Math.min(1, (elapsed - fadeStart) / (_BATCH_FADE_SECONDS - fadeStart));
+                fadeStyle = `opacity: ${1 - fadeProgress};`;
+            }
+        }
+
+        const sourceBadge = batch.source_page
+            ? `<span class="adl-batch-card-source">${_adlEsc(batch.source_page)}</span>`
+            : '';
+
+        // Phase label with icon
+        let phaseText = '';
+        let phaseIcon = '';
+        if (batch.phase === 'analysis') {
+            phaseText = 'Analyzing...';
+            phaseIcon = '<span class="adl-spinner" style="margin-right:4px"></span>';
+        } else if (batch.phase === 'downloading') {
+            phaseText = `${batch.completed}/${total} tracks`;
+            if (batch.active > 0) phaseIcon = '<span class="adl-spinner" style="margin-right:4px"></span>';
+        } else if (batch.phase === 'complete') {
+            phaseText = `Done \u2014 ${batch.completed} tracks`;
+            phaseIcon = '<span style="color:#22c55e;margin-right:4px">\u2713</span>';
+        } else if (batch.phase === 'cancelled') {
+            phaseText = 'Cancelled';
+        } else if (batch.phase === 'error') {
+            phaseText = 'Error';
+        } else {
+            phaseText = batch.phase;
+        }
+
+        // Get first track artwork for batch thumbnail, fallback to initial
+        const batchTracks = _adlData.filter(d => d.batch_id === batch.batch_id);
+        const artworkTrack = batchTracks.find(t => t.artwork);
+        let thumbHtml;
+        if (artworkTrack) {
+            thumbHtml = `<img class="adl-batch-card-thumb" src="${_adlEsc(artworkTrack.artwork)}" alt="" onerror="this.outerHTML='<div class=\\'adl-batch-card-thumb adl-batch-card-thumb-fallback\\'>${_adlEsc((batch.batch_name || 'D')[0])}</div>'">`;
+        } else {
+            const initial = (batch.batch_name || 'D')[0].toUpperCase();
+            const bgColor = colorIdx >= 0 ? `rgba(var(--batch-color-${colorIdx}), 0.15)` : 'rgba(255,255,255,0.05)';
+            const fgColor = colorIdx >= 0 ? `rgba(var(--batch-color-${colorIdx}), 0.7)` : 'rgba(255,255,255,0.4)';
+            thumbHtml = `<div class="adl-batch-card-thumb adl-batch-card-thumb-fallback" style="background:${bgColor};color:${fgColor}">${initial}</div>`;
+        }
+
+        // Build expanded tracks list with per-track progress
+        let tracksHtml = '';
+        if (isExpanded) {
+            if (batchTracks.length > 0) {
+                tracksHtml = batchTracks.map(t => {
+                    const cls = _adlStatusClass(t.status);
+                    const progress = t.progress || 0;
+
+                    // Status indicator with detail
+                    let statusHtml = '';
+                    if (t.status === 'downloading' && progress > 0) {
+                        statusHtml = `<span class="adl-batch-track-status active">${Math.round(progress)}%</span>`;
+                    } else if (t.status === 'searching') {
+                        statusHtml = `<span class="adl-batch-track-status active"><span class="adl-spinner" style="width:8px;height:8px"></span></span>`;
+                    } else if (t.status === 'post_processing') {
+                        statusHtml = `<span class="adl-batch-track-status active" title="Processing">proc</span>`;
+                    } else if (cls === 'completed') {
+                        statusHtml = `<span class="adl-batch-track-status completed">\u2713</span>`;
+                    } else if (cls === 'failed') {
+                        statusHtml = `<span class="adl-batch-track-status failed">\u2717</span>`;
+                    } else {
+                        statusHtml = `<span class="adl-batch-track-status queued">\u00B7</span>`;
+                    }
+
+                    // Mini progress bar for downloading tracks
+                    const miniBar = t.status === 'downloading' && progress > 0
+                        ? `<div class="adl-batch-track-progress"><div class="adl-batch-track-progress-fill" style="width:${progress}%"></div></div>`
+                        : '';
+
+                    return `<div class="adl-batch-track-row">
+                        <span class="adl-batch-track-title">${_adlEsc(t.title || 'Unknown')}</span>
+                        ${statusHtml}
+                        ${miniBar}
+                    </div>`;
+                }).join('');
+            } else {
+                tracksHtml = '<div style="font-size:0.7rem;color:rgba(255,255,255,0.3);padding:4px 0">No tracks loaded</div>';
+            }
+        }
+
+        const cardClasses = ['adl-batch-card'];
+        if (isExpanded) cardClasses.push('expanded');
+        if (isActive) cardClasses.push('active-glow');
+        if (isFiltered) cardClasses.push('filtered');
+
+        const playlistId = _adlEsc(batch.playlist_id || '');
+
+        html += `<div class="${cardClasses.join(' ')}" style="${colorStyle}${fadeStyle}" data-batch-id="${batch.batch_id}" onclick="_adlToggleBatch('${batch.batch_id}')">
+            <div class="adl-batch-card-top">
+                ${thumbHtml}
+                <div class="adl-batch-card-info">
+                    <div class="adl-batch-card-name adl-batch-card-link" onclick="event.stopPropagation(); _adlOpenBatchModal('${batch.batch_id}', '${playlistId}', '${_adlEsc(batch.batch_name || 'Download')}')" title="Open download modal">${_adlEsc(batch.batch_name || 'Download')}</div>
+                    <div class="adl-batch-card-meta">${phaseIcon}${phaseText}</div>
+                </div>
+                ${sourceBadge}
+                <div class="adl-batch-card-actions">
+                    <button class="adl-batch-card-filter ${isFiltered ? 'active' : ''}" onclick="event.stopPropagation(); _adlFilterByBatch('${batch.batch_id}')" title="${isFiltered ? 'Show all downloads' : 'Filter to this batch'}">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
+                    </button>
+                    ${!isTerminal ? `<button class="adl-batch-card-cancel" onclick="event.stopPropagation(); _adlCancelBatch('${batch.batch_id}')" title="Cancel batch">
+                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                    </button>` : ''}
+                </div>
+            </div>
+            <div class="adl-batch-progress">
+                <div class="adl-batch-progress-fill${hasFailed ? ' has-failed' : ''}" style="width:${pct}%"></div>
+            </div>
+            <div class="adl-batch-tracks">${tracksHtml}</div>
+        </div>`;
+    }
+
+    container.innerHTML = html;
+}
+
+function _adlToggleBatch(batchId) {
+    if (_adlExpandedBatches.has(batchId)) {
+        _adlExpandedBatches.delete(batchId);
+    } else {
+        _adlExpandedBatches.add(batchId);
+    }
+    _adlRenderBatchPanel();
+}
+
+function _adlOpenBatchModal(batchId, playlistId, batchName) {
+    // For wishlist batches, navigate to wishlist and show modal
+    if (playlistId === 'wishlist') {
+        const clientProcess = activeDownloadProcesses['wishlist'];
+        if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
+            clientProcess.modalElement.style.display = 'flex';
+            if (typeof WishlistModalState !== 'undefined') WishlistModalState.setVisible();
+        } else {
+            rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
+        }
+        return;
+    }
+
+    // For other batches, try to show existing modal or rehydrate
+    for (const [pid, process] of Object.entries(activeDownloadProcesses)) {
+        if (process.batchId === batchId && process.modalElement && document.body.contains(process.modalElement)) {
+            process.modalElement.style.display = 'flex';
+            return;
+        }
+    }
+    // Rehydrate from server
+    rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
+}
+
+function _adlFilterByBatch(batchId) {
+    if (_adlFilterBatchId === batchId) {
+        _adlFilterBatchId = null; // Toggle off
+    } else {
+        _adlFilterBatchId = batchId;
+    }
+    _adlRender();
+    _adlRenderBatchPanel();
+}
+
+async function adlCancelRow(btnEl, playlistId, trackIndex) {
+    // Per-row cancel on the Downloads page. Uses the same atomic cancel
+    // endpoint the modal cancel buttons use, so worker slots free properly.
+    if (!playlistId || trackIndex === undefined || trackIndex === null) {
+        showToast('Cannot cancel — missing task coordinates', 'error');
+        return;
+    }
+    // Lock the button so rapid clicks don't fire duplicate requests
+    if (btnEl) {
+        if (btnEl.dataset.cancelling === '1') return;
+        btnEl.dataset.cancelling = '1';
+        btnEl.classList.add('adl-row-cancel-pending');
+    }
+    try {
+        const resp = await fetch('/api/downloads/cancel_task_v2', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_id: playlistId,
+                track_index: trackIndex
+            })
+        });
+        const data = await resp.json();
+        if (data.success) {
+            const name = data.task_info && data.task_info.track_name ? data.task_info.track_name : 'Track';
+            showToast(`Cancelled "${name}"`, 'info');
+            _adlFetch();
+        } else {
+            showToast(data.error || 'Cancel failed', 'error');
+            if (btnEl) {
+                btnEl.dataset.cancelling = '0';
+                btnEl.classList.remove('adl-row-cancel-pending');
+            }
+        }
+    } catch (e) {
+        console.error('ADL row cancel error:', e);
+        showToast('Cancel request failed', 'error');
+        if (btnEl) {
+            btnEl.dataset.cancelling = '0';
+            btnEl.classList.remove('adl-row-cancel-pending');
+        }
+    }
+}
+
+async function _adlCancelBatch(batchId) {
+    const batch = _adlBatches.find(b => b.batch_id === batchId);
+    const batchName = batch ? batch.batch_name : 'this batch';
+    const confirmed = await showConfirmDialog({
+        title: 'Cancel Batch',
+        message: `Cancel "${batchName}"? All active and queued downloads in this batch will be stopped.`,
+        confirmText: 'Cancel Batch',
+        destructive: true
+    });
+    if (!confirmed) return;
+    try {
+        const resp = await fetch(`/api/playlists/${batchId}/cancel_batch`, { method: 'POST' });
+        const data = await resp.json();
+        if (data.success) {
+            showToast(`Cancelled ${data.cancelled_tasks} downloads`, 'info');
+            _adlFetch();
+        } else {
+            showToast(data.error || 'Failed to cancel batch', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to cancel batch', 'error');
+    }
+}
+
+async function adlCancelAll() {
+    // Cancel every batch with active/queued work — equivalent to clicking
+    // "Cancel All" inside each running download modal. Uses the same
+    // /api/playlists/<batch_id>/cancel_batch endpoint the per-batch card
+    // cancel uses, so worker slots free atomically.
+    const runningBatches = _adlBatches.filter(b => (b.active || 0) > 0 || (b.queued || 0) > 0);
+    if (runningBatches.length === 0) {
+        showToast('No active batches to cancel', 'info');
+        return;
+    }
+
+    const totalTasks = runningBatches.reduce((sum, b) => sum + (b.active || 0) + (b.queued || 0), 0);
+    const batchWord = runningBatches.length === 1 ? 'batch' : 'batches';
+    const taskWord = totalTasks === 1 ? 'task' : 'tasks';
+    const confirmed = await showConfirmDialog({
+        title: 'Cancel All Downloads',
+        message: `Cancel ${totalTasks} ${taskWord} across ${runningBatches.length} ${batchWord}? Active and queued downloads will be stopped and added to the wishlist.`,
+        confirmText: 'Cancel All',
+        destructive: true
+    });
+    if (!confirmed) return;
+
+    const btn = document.getElementById('adl-cancel-all-btn');
+    if (btn) {
+        btn.disabled = true;
+        btn.classList.add('adl-cancel-all-pending');
+    }
+
+    let cancelled = 0;
+    let failed = 0;
+    // Sequential so we don't hammer the backend — cancel_batch takes a lock
+    // internally and parallel calls would mostly serialize anyway.
+    for (const batch of runningBatches) {
+        try {
+            const resp = await fetch(`/api/playlists/${batch.batch_id}/cancel_batch`, { method: 'POST' });
+            const data = await resp.json();
+            if (data.success) {
+                cancelled += (data.cancelled_tasks || 0);
+            } else {
+                failed += 1;
+                console.warn(`cancel_batch failed for ${batch.batch_id}:`, data.error);
+            }
+        } catch (e) {
+            failed += 1;
+            console.warn(`cancel_batch exception for ${batch.batch_id}:`, e);
+        }
+    }
+
+    if (btn) {
+        btn.disabled = false;
+        btn.classList.remove('adl-cancel-all-pending');
+    }
+
+    if (cancelled > 0 && failed === 0) {
+        showToast(`Cancelled ${cancelled} downloads`, 'success');
+    } else if (cancelled > 0 && failed > 0) {
+        showToast(`Cancelled ${cancelled} downloads (${failed} batches failed)`, 'info');
+    } else {
+        showToast('Failed to cancel any downloads', 'error');
+    }
+
+    _adlFetch();
+}
+
+// ---- Batch History ----
+
+async function _adlFetchBatchHistory() {
+    try {
+        const resp = await fetch('/api/downloads/batch-history?days=7&limit=50');
+        const data = await resp.json();
+        if (data.success) {
+            _adlBatchHistory = data.history || [];
+            _adlRenderBatchHistory();
+        }
+    } catch (e) {
+        console.debug('Batch history fetch error:', e);
+    }
+}
+
+function _adlRenderBatchHistory() {
+    const section = document.getElementById('adl-batch-history-section');
+    const list = document.getElementById('adl-batch-history-list');
+    if (!section || !list) return;
+
+    if (_adlBatchHistory.length === 0) {
+        section.style.display = 'none';
+        return;
+    }
+
+    section.style.display = '';
+
+    list.innerHTML = _adlBatchHistory.map(h => {
+        const name = _adlEsc(h.playlist_name || 'Unknown');
+        const downloaded = h.tracks_downloaded || 0;
+        const failed = h.tracks_failed || 0;
+        const total = h.total_tracks || 0;
+        const statsParts = [`${downloaded}/${total}`];
+        if (failed > 0) statsParts.push(`<span style="color:#ef4444">${failed} failed</span>`);
+
+        let dateText = '';
+        if (h.completed_at) {
+            try {
+                const d = new Date(h.completed_at);
+                const now = new Date();
+                const diffMs = now - d;
+                const diffH = Math.floor(diffMs / 3600000);
+                if (diffH < 1) dateText = 'just now';
+                else if (diffH < 24) dateText = `${diffH}h ago`;
+                else dateText = `${Math.floor(diffH / 24)}d ago`;
+            } catch (e) {
+                dateText = '';
+            }
+        }
+
+        const sourceLabel = h.source_page ? `<span class="adl-batch-card-source" style="font-size:0.6rem;padding:0 4px">${_adlEsc(h.source_page)}</span>` : '';
+
+        // Source type color dot
+        const sourceColors = { wishlist: '168, 85, 247', sync: '59, 130, 246', album: '16, 185, 129' };
+        const dotColor = sourceColors[h.source_page] || '255, 255, 255';
+        const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)"></span>`;
+
+        return `<div class="adl-batch-history-item">
+            ${histDot}
+            <div class="adl-batch-history-name">${name} ${sourceLabel}</div>
+            <div class="adl-batch-history-stats">${statsParts.join(' ')}</div>
+            <div class="adl-batch-history-date">${dateText}</div>
+        </div>`;
+    }).join('');
+}
+
+function adlToggleBatchHistory() {
+    const section = document.getElementById('adl-batch-history-section');
+    if (section) section.classList.toggle('expanded');
+}
+
+function adlToggleBatchPanel() {
+    const panel = document.getElementById('adl-batch-panel');
+    if (panel) panel.classList.toggle('collapsed');
+}
+
+window.adlSetFilter = adlSetFilter;
+window.adlClearCompleted = adlClearCompleted;
+window._adlToggleBatch = _adlToggleBatch;
+window._adlOpenBatchModal = _adlOpenBatchModal;
+window._adlFilterByBatch = _adlFilterByBatch;
+window._adlCancelBatch = _adlCancelBatch;
+window.adlCancelRow = adlCancelRow;
+window.adlCancelAll = adlCancelAll;
+window.adlToggleBatchHistory = adlToggleBatchHistory;
+window.adlToggleBatchPanel = adlToggleBatchPanel;
+
diff --git a/webui/static/script.js b/webui/static/script.js
deleted file mode 100644
index bac9417c..00000000
--- a/webui/static/script.js
+++ /dev/null
@@ -1,77957 +0,0 @@
-// SoulSync WebUI JavaScript - Replicating PyQt6 GUI Functionality
-
-// Global state management
-let currentPage = 'dashboard';
-let currentTrack = null;
-let isPlaying = false;
-let mediaPlayerExpanded = false;
-let searchResults = [];
-let currentStream = {
-    status: 'stopped',
-    progress: 0,
-    track: null
-};
-let currentMusicSourceName = 'Spotify'; // 'Spotify', 'iTunes', or 'Deezer' - updated from status endpoint
-
-// Streaming state management (enhanced functionality)
-let streamStatusPoller = null;
-let audioPlayer = null;
-let streamPollingRetries = 0;
-let streamPollingInterval = 1000; // Start with 1-second polling
-const maxStreamPollingRetries = 10;
-let allSearchResults = [];
-let currentFilterType = 'all';
-let currentFilterFormat = 'all';
-let currentSortBy = 'quality_score';
-let isSortReversed = false;
-let searchAbortController = null;
-let dbStatsInterval = null;
-let dbUpdateStatusInterval = null;
-let qualityScannerStatusInterval = null;
-let duplicateCleanerStatusInterval = null;
-let wishlistCountInterval = null;
-let wishlistCountdownInterval = null;  // Countdown timer for wishlist overview modal
-let watchlistCountdownInterval = null;  // Countdown timer for watchlist overview modal
-
-// Page state for Watchlist & Wishlist sidebar pages
-let watchlistPageState = { isInitialized: false, artists: [] };
-let wishlistPageState = { isInitialized: false };
-
-// --- Add these globals for the Sync Page ---
-let spotifyPlaylists = [];
-let selectedPlaylists = new Set();
-let activeSyncPollers = {}; // Key: playlist_id, Value: intervalId
-// Phase 5: WebSocket sync/discovery/scan state
-let _syncProgressCallbacks = {};
-let _discoveryProgressCallbacks = {};
-let _lastWatchlistScanStatus = null;
-let _lastMediaScanStatus = null;
-let _lastWishlistStats = null;
-let playlistTrackCache = {}; // Key: playlist_id, Value: tracks array
-let spotifyPlaylistsLoaded = false;
-let activeDownloadProcesses = {};
-let sequentialSyncManager = null;
-
-// --- YouTube Playlist State Management ---
-let youtubePlaylistStates = {}; // Key: url_hash, Value: playlist state
-let activeYouTubePollers = {}; // Key: url_hash, Value: intervalId
-
-// --- Tidal Playlist State Management (Similar to YouTube but loads from API like Spotify) ---
-let tidalPlaylists = [];
-let tidalPlaylistStates = {}; // Key: playlist_id, Value: playlist state with phases
-let tidalPlaylistsLoaded = false;
-let deezerPlaylists = [];
-let deezerPlaylistStates = {};
-let deezerArlPlaylists = [];
-let deezerArlPlaylistsLoaded = false;
-
-// --- Beatport Chart State Management (Similar to YouTube/Tidal) ---
-let beatportChartStates = {}; // Key: chart_hash, Value: chart state with phases
-let beatportContentState = {
-    loaded: false,
-    loadingPromise: null,
-    abortController: null
-};
-
-function getBeatportContentSignal() {
-    return beatportContentState.abortController ? beatportContentState.abortController.signal : null;
-}
-
-function throwIfBeatportLoadAborted() {
-    if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
-        throw new DOMException('Beatport load aborted', 'AbortError');
-    }
-}
-
-function stopBeatportDiscoveryAndSyncPolling() {
-    Object.entries(activeYouTubePollers).forEach(([identifier, poller]) => {
-        const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
-            !!beatportChartStates[identifier];
-        if (isBeatportChart) {
-            clearInterval(poller);
-            delete activeYouTubePollers[identifier];
-        }
-    });
-
-    Object.entries(_discoveryProgressCallbacks).forEach(([identifier]) => {
-        const isBeatportChart = !!youtubePlaylistStates[identifier]?.is_beatport_playlist ||
-            !!beatportChartStates[identifier];
-        if (isBeatportChart) {
-            if (socketConnected) socket.emit('discovery:unsubscribe', { ids: [identifier] });
-            delete _discoveryProgressCallbacks[identifier];
-        }
-    });
-
-    Object.entries(_syncProgressCallbacks).forEach(([syncPlaylistId]) => {
-        const beatportState = Object.values(youtubePlaylistStates).find(state =>
-            state && state.is_beatport_playlist && state.syncPlaylistId === syncPlaylistId
-        );
-        if (beatportState) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-            delete _syncProgressCallbacks[syncPlaylistId];
-        }
-    });
-}
-
-function resetBeatportSliderInitFlags() {
-    const rebuildSlider = document.getElementById('beatport-rebuild-slider');
-    if (rebuildSlider) rebuildSlider.dataset.initialized = 'false';
-
-    const releasesSlider = document.getElementById('beatport-releases-slider');
-    if (releasesSlider) releasesSlider.dataset.initialized = 'false';
-    beatportReleasesSliderState.isInitialized = false;
-
-    beatportHypePicksSliderState.isInitialized = false;
-
-    const chartsSlider = document.getElementById('beatport-charts-slider');
-    if (chartsSlider) chartsSlider.dataset.initialized = 'false';
-    beatportChartsSliderState.isInitialized = false;
-
-    const djSlider = document.getElementById('beatport-dj-slider');
-    if (djSlider) djSlider.dataset.initialized = 'false';
-    beatportDJSliderState.isInitialized = false;
-}
-
-function cleanupBeatportContent() {
-    const wasLoaded = beatportContentState.loaded || !!beatportContentState.loadingPromise;
-    if (!wasLoaded) return;
-
-    console.log('🧹 Cleaning up Beatport content...');
-
-    if (beatportContentState.abortController) {
-        beatportContentState.abortController.abort();
-        beatportContentState.abortController = null;
-    }
-
-    stopBeatportDiscoveryAndSyncPolling();
-    cleanupBeatportRebuildSlider();
-    cleanupBeatportReleasesSlider();
-    cleanupBeatportHypePicksSlider();
-    cleanupBeatportChartsSlider();
-    cleanupBeatportDJSlider();
-    resetBeatportSliderInitFlags();
-
-    beatportContentState.loadingPromise = null;
-    beatportContentState.loaded = false;
-
-    console.log('✅ Beatport content cleaned up');
-}
-
-// --- ListenBrainz Playlist State Management (Similar to YouTube/Tidal/Beatport) ---
-let listenbrainzPlaylistStates = {}; // Key: playlist_mbid, Value: playlist state with phases
-let listenbrainzPlaylistsLoaded = false;  // Track if playlists have been loaded from backend
-
-// --- Artists Page State Management ---
-let artistsPageState = {
-    currentView: 'search', // 'search', 'results', 'detail'
-    searchQuery: '',
-    searchResults: [],
-    selectedArtist: null,
-    sourceOverride: null, // Set when navigating from an alternate search tab
-    artistDiscography: {
-        albums: [],
-        singles: []
-    },
-    cache: {
-        searches: {}, // Cache search results by query
-        discography: {}, // Cache discography by artist ID
-        colors: {}, // Cache extracted colors by image URL
-        completionData: {} // Cache completion data by artist ID
-    },
-    isInitialized: false // Track if the page has been initialized
-};
-
-// --- Artist Downloads Management State ---
-let artistDownloadBubbles = {}; // Track artist download bubbles: artistId -> { artist, downloads: [], element }
-let artistDownloadModalOpen = false; // Track if artist download modal is open
-let downloadsUpdateTimeout = null; // Debounce downloads section updates
-
-// --- Search Downloads Management State ---
-let searchDownloadBubbles = {}; // Track search download bubbles: artistName -> { artist, downloads: [] }
-let searchDownloadModalOpen = false; // Track if search download modal is open
-
-// --- Beatport Downloads Management State ---
-let beatportDownloadBubbles = {}; // Track Beatport download bubbles: chartKey -> { chart: { name, image }, downloads: [] }
-let beatportDownloadsUpdateTimeout = null; // Debounce Beatport downloads section updates
-
-let artistsSearchTimeout = null;
-let artistsSearchController = null;
-let artistCompletionController = null; // Track ongoing completion check to cancel when navigating away
-let similarArtistsController = null; // Track ongoing similar artists stream to cancel when navigating away
-
-// --- Lazy Background Image Observer ---
-// Watches elements with data-bg-src, applies background-image when visible, unobserves after.
-const lazyBgObserver = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-        if (entry.isIntersecting) {
-            const el = entry.target;
-            const src = el.dataset.bgSrc;
-            if (src) {
-                el.style.backgroundImage = `url('${src}')`;
-                delete el.dataset.bgSrc;
-            }
-            lazyBgObserver.unobserve(el);
-        }
-    });
-}, { rootMargin: '200px' });
-
-/**
- * Observe all elements with data-bg-src within a container for lazy background loading.
- */
-function observeLazyBackgrounds(container) {
-    if (!container) return;
-    const elements = container.querySelectorAll('[data-bg-src]');
-    elements.forEach(el => lazyBgObserver.observe(el));
-}
-
-// ===============================
-// CONFIRM DIALOG (themed replacement for native confirm())
-// ===============================
-let _confirmResolver = null;
-
-function showConfirmDialog({ title = 'Confirm', message = '', confirmText = 'Confirm', cancelText = 'Cancel', destructive = false } = {}) {
-    // Resolve any pending dialog as cancelled before opening a new one
-    if (_confirmResolver) {
-        _confirmResolver(false);
-        _confirmResolver = null;
-    }
-
-    const overlay = document.getElementById('confirm-modal-overlay');
-    const titleEl = document.getElementById('confirm-modal-title');
-    const messageEl = document.getElementById('confirm-modal-message');
-    const confirmBtn = document.getElementById('confirm-modal-confirm');
-    const cancelBtn = document.getElementById('confirm-modal-cancel');
-
-    titleEl.textContent = title;
-    messageEl.textContent = message;
-    confirmBtn.textContent = confirmText;
-    cancelBtn.textContent = cancelText;
-
-    // Toggle destructive (red) vs primary (accent) confirm button
-    confirmBtn.className = destructive
-        ? 'modal-button modal-button--cancel'
-        : 'modal-button modal-button--primary';
-
-    overlay.classList.remove('hidden');
-
-    return new Promise(resolve => {
-        _confirmResolver = resolve;
-    });
-}
-
-function resolveConfirmDialog(result) {
-    const overlay = document.getElementById('confirm-modal-overlay');
-    overlay.classList.add('hidden');
-    if (_confirmResolver) {
-        _confirmResolver(result);
-        _confirmResolver = null;
-    }
-}
-
-/**
- * Nuclear confirmation dialog for mass-destructive operations.
- * User must type an exact phrase to proceed.
- */
-function showWitnessMeDialog(orphanCount) {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'confirm-modal-overlay';
-        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-
-        overlay.innerHTML = `
-            <div style="background:var(--bg-secondary, #1e1e2e);border:2px solid #e74c3c;border-radius:12px;padding:28px;max-width:480px;width:90%;color:var(--text-primary, #fff);font-family:inherit;">
-                <h3 style="margin:0 0 8px;color:#e74c3c;font-size:1.2em;">Mass Deletion Warning</h3>
-                <p style="margin:0 0 12px;font-size:0.95em;opacity:0.9;">
-                    You are about to <strong>permanently delete ${orphanCount.toLocaleString()} files</strong> from your disk.
-                </p>
-                <p style="margin:0 0 12px;font-size:0.9em;opacity:0.75;">
-                    This many orphans usually means a path mismatch between your database and filesystem
-                    — not actual orphan files. A previous user lost their entire library this way.
-                </p>
-                <p style="margin:0 0 6px;font-size:0.9em;opacity:0.9;">
-                    To confirm you understand the risk, type <strong style="color:#e74c3c;">witness me</strong> below:
-                </p>
-                <input type="text" id="witness-me-input" autocomplete="off" spellcheck="false"
-                       placeholder="Type the phrase here..."
-                       style="width:100%;padding:10px;border:1px solid #555;border-radius:6px;background:var(--bg-primary, #111);color:var(--text-primary, #fff);font-size:1em;margin:8px 0 16px;box-sizing:border-box;">
-                <div style="display:flex;gap:10px;justify-content:flex-end;">
-                    <button id="witness-cancel" style="padding:8px 20px;border:1px solid #555;border-radius:6px;background:transparent;color:var(--text-primary, #fff);cursor:pointer;font-size:0.9em;">
-                        Cancel
-                    </button>
-                    <button id="witness-confirm" disabled
-                            style="padding:8px 20px;border:none;border-radius:6px;background:#555;color:#888;cursor:not-allowed;font-size:0.9em;font-weight:600;transition:all 0.2s;">
-                        Delete Files
-                    </button>
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(overlay);
-
-        const input = overlay.querySelector('#witness-me-input');
-        const confirmBtn = overlay.querySelector('#witness-confirm');
-        const cancelBtn = overlay.querySelector('#witness-cancel');
-
-        input.addEventListener('input', () => {
-            const match = input.value.trim().toLowerCase() === 'witness me';
-            confirmBtn.disabled = !match;
-            confirmBtn.style.background = match ? '#e74c3c' : '#555';
-            confirmBtn.style.color = match ? '#fff' : '#888';
-            confirmBtn.style.cursor = match ? 'pointer' : 'not-allowed';
-        });
-
-        confirmBtn.addEventListener('click', () => {
-            document.body.removeChild(overlay);
-            resolve(true);
-        });
-
-        cancelBtn.addEventListener('click', () => {
-            document.body.removeChild(overlay);
-            resolve(false);
-        });
-
-        overlay.addEventListener('click', (e) => {
-            if (e.target === overlay) {
-                document.body.removeChild(overlay);
-                resolve(false);
-            }
-        });
-
-        setTimeout(() => input.focus(), 100);
-    });
-}
-
-const MASS_ORPHAN_THRESHOLD = 20;
-
-function _isMassOrphanFix(jobId, count) {
-    if (count <= MASS_ORPHAN_THRESHOLD) return false;
-    // Only trigger if mass_orphan flag is actually set on visible findings
-    // (flag is set by backend when >50% of files are orphans — likely path mismatch)
-    if (jobId === 'orphan_file_detector' || !jobId) {
-        const massCards = document.querySelectorAll('.repair-finding-card[data-mass-orphan="true"]');
-        if (massCards.length > 0) return true;
-    }
-    return false;
-}
-
-// ===============================
-// WEBSOCKET CONNECTION MANAGER
-// ===============================
-let socket = null;
-let socketConnected = false;
-
-function initializeWebSocket() {
-    if (typeof io === 'undefined') {
-        console.warn('Socket.IO client not loaded — falling back to HTTP polling');
-        return;
-    }
-
-    socket = io({
-        transports: ['polling', 'websocket'],
-        reconnection: true,
-        reconnectionAttempts: Infinity,
-        reconnectionDelay: 1000,
-        reconnectionDelayMax: 10000,
-        timeout: 20000
-    });
-
-    socket.on('connect', () => {
-        console.log('WebSocket connected');
-        socketConnected = true;
-        resubscribeDownloadBatches();
-        // Re-subscribe to any active sync/discovery rooms after reconnect
-        const activeSyncIds = Object.keys(_syncProgressCallbacks);
-        if (activeSyncIds.length > 0) {
-            socket.emit('sync:subscribe', { playlist_ids: activeSyncIds });
-            console.log('🔄 Re-subscribed to sync rooms:', activeSyncIds);
-        }
-        const activeDiscoveryIds = Object.keys(_discoveryProgressCallbacks);
-        if (activeDiscoveryIds.length > 0) {
-            socket.emit('discovery:subscribe', { ids: activeDiscoveryIds });
-            console.log('🔄 Re-subscribed to discovery rooms:', activeDiscoveryIds);
-        }
-        // Join profile room for scoped watchlist/wishlist count updates
-        if (currentProfile) {
-            socket.emit('profile:join', { profile_id: currentProfile.id });
-        }
-    });
-
-    socket.on('disconnect', (reason) => {
-        console.warn('WebSocket disconnected:', reason);
-        socketConnected = false;
-    });
-
-    socket.on('reconnect', (attemptNumber) => {
-        console.log(`WebSocket reconnected after ${attemptNumber} attempts`);
-        // Rejoin profile room for scoped WebSocket emits
-        if (currentProfile) {
-            socket.emit('profile:join', { profile_id: currentProfile.id });
-        }
-        // Phase 1: Full state refresh on reconnect
-        fetchAndUpdateServiceStatus();
-        updateWatchlistButtonCount();
-        resubscribeDownloadBatches();
-        // Phase 2: Refresh dashboard data if on dashboard page
-        if (currentPage === 'dashboard') {
-            fetchAndUpdateSystemStats();
-            fetchAndUpdateActivityFeed();
-            fetchAndUpdateDbStats();
-            updateWishlistCount();
-        }
-    });
-
-    // Phase 1 event listeners
-    socket.on('status:update', handleServiceStatusUpdate);
-    socket.on('watchlist:count', handleWatchlistCountUpdate);
-    socket.on('downloads:batch_update', handleDownloadBatchUpdate);
-
-    // Phase 2 event listeners (dashboard pollers)
-    socket.on('rate-monitor:update', _handleRateMonitorUpdate);
-    socket.on('dashboard:stats', handleDashboardStats);
-    socket.on('dashboard:activity', handleDashboardActivity);
-    socket.on('dashboard:toast', handleDashboardToast);
-    socket.on('dashboard:db_stats', handleDashboardDbStats);
-    socket.on('dashboard:wishlist_count', handleDashboardWishlistCount);
-
-    // Phase 3 event listeners (enrichment sidebar workers)
-    socket.on('enrichment:musicbrainz', (data) => updateMusicBrainzStatusFromData(data));
-    socket.on('enrichment:audiodb', (data) => updateAudioDBStatusFromData(data));
-    socket.on('enrichment:discogs', (data) => updateDiscogsStatusFromData(data));
-    socket.on('enrichment:deezer', (data) => updateDeezerStatusFromData(data));
-    socket.on('enrichment:spotify-enrichment', (data) => updateSpotifyEnrichmentStatusFromData(data));
-    socket.on('enrichment:itunes-enrichment', (data) => updateiTunesEnrichmentStatusFromData(data));
-    socket.on('enrichment:lastfm-enrichment', (data) => updateLastFMEnrichmentStatusFromData(data));
-    socket.on('enrichment:genius-enrichment', (data) => updateGeniusEnrichmentStatusFromData(data));
-    socket.on('enrichment:tidal-enrichment', (data) => updateTidalEnrichmentStatusFromData(data));
-    socket.on('enrichment:qobuz-enrichment', (data) => updateQobuzEnrichmentStatusFromData(data));
-    socket.on('enrichment:hydrabase', (data) => updateHydrabaseStatusFromData(data));
-    socket.on('enrichment:repair', (data) => updateRepairStatusFromData(data));
-    socket.on('enrichment:soulid', (data) => updateSoulIDStatusFromData(data));
-    socket.on('enrichment:listening-stats', () => { }); // Status only, no UI update needed
-    socket.on('repair:progress', (data) => updateRepairJobProgressFromData(data));
-
-    // Phase 4 event listeners (tool progress)
-    socket.on('tool:stream', (data) => updateStreamStatusFromData(data));
-    socket.on('tool:quality-scanner', (data) => updateQualityScanProgressFromData(data));
-    socket.on('tool:duplicate-cleaner', (data) => updateDuplicateCleanProgressFromData(data));
-    socket.on('tool:retag', (data) => updateRetagStatusFromData(data));
-    socket.on('tool:db-update', (data) => updateDbProgressFromData(data));
-    socket.on('tool:metadata', (data) => updateMetadataStatusFromData(data));
-    socket.on('tool:logs', (data) => updateLogsFromData(data));
-
-    // Phase 5 event listeners (sync/discovery progress + scans)
-    socket.on('sync:progress', (data) => updateSyncProgressFromData(data));
-    socket.on('discovery:progress', (data) => updateDiscoveryProgressFromData(data));
-    socket.on('scan:watchlist', (data) => updateWatchlistScanFromData(data));
-    socket.on('scan:media', (data) => updateMediaScanFromData(data));
-    socket.on('wishlist:stats', (data) => updateWishlistStatsFromData(data));
-    // Phase 6: Automation progress
-    socket.on('automation:progress', (data) => updateAutomationProgressFromData(data));
-}
-
-function handleServiceStatusUpdate(data) {
-    // Cache for library status card
-    _lastServiceStatus = data;
-
-    // Same logic as fetchAndUpdateServiceStatus response handler
-    updateServiceStatus('spotify', data.spotify);
-    updateServiceStatus('media-server', data.media_server);
-    updateServiceStatus('soulseek', data.soulseek);
-
-    updateSidebarServiceStatus('spotify', data.spotify);
-    updateSidebarServiceStatus('media-server', data.media_server);
-    updateSidebarServiceStatus('soulseek', data.soulseek);
-
-    // Update downloads nav badge from status push
-    if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
-
-    // Hide sync buttons (not the page) for standalone mode — playlists still browsable/downloadable
-    const isSoulsyncStandalone = data.media_server?.type === 'soulsync';
-    _isSoulsyncStandalone = isSoulsyncStandalone;
-    document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
-        if (isSoulsyncStandalone) {
-            btn.dataset.hiddenByStandalone = '1';
-            btn.style.display = 'none';
-        } else if (btn.dataset.hiddenByStandalone) {
-            delete btn.dataset.hiddenByStandalone;
-            btn.style.display = '';
-        }
-        // If not standalone and not previously hidden by standalone, leave display untouched
-        // (preserves display:none on undiscovered LB/Last.fm playlist sync buttons)
-    });
-
-    // Update enrichment service cards
-    if (data.enrichment) renderEnrichmentCards(data.enrichment);
-
-    // Spotify rate limit / cooldown / recovery
-    if (data.spotify?.rate_limited && data.spotify.rate_limit) {
-        handleSpotifyRateLimit(data.spotify.rate_limit);
-        _spotifyInCooldown = false;
-    } else if (data.spotify?.post_ban_cooldown > 0) {
-        if (_spotifyRateLimitShown && !_spotifyInCooldown) {
-            _spotifyRateLimitShown = false;
-            _spotifyInCooldown = true;
-            closeRateLimitModal();
-            showToast('Spotify ban expired \u2014 recovering shortly', 'info');
-        }
-    } else {
-        if (_spotifyInCooldown) {
-            _spotifyInCooldown = false;
-            showToast('Spotify access restored', 'success');
-            if (currentPage === 'discover') {
-                loadDiscoverPage();
-            }
-        } else if (_spotifyRateLimitShown) {
-            handleSpotifyRateLimit(null);
-        }
-    }
-}
-
-function _updateHeroBtnCount(buttonId, badgeId, count) {
-    const badge = document.getElementById(badgeId);
-    if (badge) {
-        badge.textContent = count;
-        badge.classList.toggle('has-items', count > 0);
-    }
-}
-
-function handleWatchlistCountUpdate(data) {
-    if (data.success) {
-        _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
-        // Update sidebar nav badge
-        const wlNavBadge = document.getElementById('watchlist-nav-badge');
-        if (wlNavBadge) {
-            wlNavBadge.textContent = data.count;
-            wlNavBadge.classList.toggle('hidden', data.count === 0);
-        }
-        const watchlistButton = document.getElementById('watchlist-button');
-        if (watchlistButton) {
-            const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
-            if (countdownText) {
-                watchlistButton.title = `Next auto-scan in ${countdownText}`;
-            }
-        }
-    }
-}
-
-function handleDownloadBatchUpdate(payload) {
-    const { batch_id, data } = payload;
-    // Find which playlistId maps to this batch_id
-    for (const [playlistId, process] of Object.entries(activeDownloadProcesses)) {
-        if (process.batchId === batch_id) {
-            processModalStatusUpdate(playlistId, data);
-            break;
-        }
-    }
-}
-
-function resubscribeDownloadBatches() {
-    if (!socket || !socketConnected) return;
-    const activeBatchIds = [];
-    Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
-        if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
-            activeBatchIds.push(process.batchId);
-        }
-    });
-    if (activeBatchIds.length > 0) {
-        socket.emit('downloads:subscribe', { batch_ids: activeBatchIds });
-        console.log(`WebSocket subscribed to ${activeBatchIds.length} download batches`);
-    }
-}
-
-function subscribeToDownloadBatch(batchId) {
-    if (socket && socketConnected && batchId) {
-        socket.emit('downloads:subscribe', { batch_ids: [batchId] });
-    }
-}
-
-function unsubscribeFromDownloadBatch(batchId) {
-    if (socket && socketConnected && batchId) {
-        socket.emit('downloads:unsubscribe', { batch_ids: [batchId] });
-    }
-}
-
-// --- Phase 2: Dashboard event handlers ---
-
-function handleDashboardStats(data) {
-    // Same logic as fetchAndUpdateSystemStats response handler
-    updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
-    updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
-    updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
-    updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
-    updateStatCard('uptime-card', data.uptime, 'Application runtime');
-    updateStatCard('memory-card', data.memory_usage, 'Current usage');
-}
-
-function handleDashboardActivity(data) {
-    // Same logic as fetchAndUpdateActivityFeed response handler
-    updateActivityFeed(data.activities || []);
-}
-
-function handleDashboardToast(activity) {
-    // Same logic as checkForActivityToasts response handler
-    let toastType = 'info';
-    if (activity.icon === '\u2705' || activity.title.includes('Complete')) {
-        toastType = 'success';
-    } else if (activity.icon === '\u274C' || activity.title.includes('Failed') || activity.title.includes('Error')) {
-        toastType = 'error';
-    } else if (activity.icon === '\uD83D\uDEAB' || activity.title.includes('Cancelled')) {
-        toastType = 'warning';
-    }
-    showToast(`${activity.title}: ${activity.subtitle}`, toastType);
-}
-
-function handleDashboardDbStats(stats) {
-    // Same logic as fetchAndUpdateDbStats response handler
-    updateDashboardStatCards(stats);
-    updateDbUpdaterCardInfo(stats);
-}
-
-function handleDashboardWishlistCount(data) {
-    const count = data.count || 0;
-    _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
-    // Update sidebar nav badge
-    const wlNavBadge = document.getElementById('wishlist-nav-badge');
-    if (wlNavBadge) {
-        wlNavBadge.textContent = count;
-        wlNavBadge.classList.toggle('hidden', count === 0);
-    }
-    const wishlistButton = document.getElementById('wishlist-button');
-    if (wishlistButton) {
-        if (count === 0) {
-            wishlistButton.classList.remove('wishlist-active');
-            wishlistButton.classList.add('wishlist-inactive');
-        } else {
-            wishlistButton.classList.remove('wishlist-inactive');
-            wishlistButton.classList.add('wishlist-active');
-        }
-    }
-    checkForAutoInitiatedWishlistProcess();
-}
-
-// ===============================
-// END WEBSOCKET CONNECTION MANAGER
-// ===============================
-
-// --- Service Integration Logo Constants ---
-const MUSICBRAINZ_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/MusicBrainz_Logo_%282016%29.svg/500px-MusicBrainz_Logo_%282016%29.svg.png';
-const DEEZER_LOGO_URL = 'https://cdn.brandfetch.io/idEUKgCNtu/theme/dark/symbol.svg?c=1bxid64Mup7aczewSAYMX&t=1758260798610';
-const SPOTIFY_LOGO_URL = 'https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png';
-const ITUNES_LOGO_URL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/ITunes_logo.svg/960px-ITunes_logo.svg.png';
-const LASTFM_LOGO_URL = 'https://www.last.fm/static/images/lastfm_avatar_twitter.52a5d69a85ac.png';
-const GENIUS_LOGO_URL = 'https://images.genius.com/8ed669cadd956443e29c70361ec4f372.1000x1000x1.png';
-const TIDAL_LOGO_URL = 'https://www.svgrepo.com/show/519734/tidal.svg';
-const QOBUZ_LOGO_URL = 'https://www.svgrepo.com/show/504778/qobuz.svg';
-const DISCOGS_LOGO_URL = 'https://www.svgrepo.com/show/305957/discogs.svg';
-function getAudioDBLogoURL() { const el = document.querySelector('img.audiodb-logo'); return el ? el.src : null; }
-
-// --- Wishlist Modal Persistence State Management ---
-const WishlistModalState = {
-    // Track if wishlist modal was visible before page refresh
-    setVisible: function () {
-        localStorage.setItem('wishlist_modal_visible', 'true');
-        console.log('📱 [Modal State] Wishlist modal marked as visible in localStorage');
-    },
-
-    setHidden: function () {
-        localStorage.setItem('wishlist_modal_visible', 'false');
-        console.log('📱 [Modal State] Wishlist modal marked as hidden in localStorage');
-    },
-
-    wasVisible: function () {
-        const visible = localStorage.getItem('wishlist_modal_visible') === 'true';
-        console.log(`📱 [Modal State] Checking if wishlist modal was visible: ${visible}`);
-        return visible;
-    },
-
-    clear: function () {
-        localStorage.removeItem('wishlist_modal_visible');
-        console.log('📱 [Modal State] Cleared wishlist modal visibility state');
-    },
-
-    // Track if user manually closed the modal during auto-processing
-    setUserClosed: function () {
-        localStorage.setItem('wishlist_modal_user_closed', 'true');
-        console.log('📱 [Modal State] User manually closed wishlist modal during auto-processing');
-    },
-
-    clearUserClosed: function () {
-        localStorage.removeItem('wishlist_modal_user_closed');
-        console.log('📱 [Modal State] Cleared user closed state');
-    },
-
-    wasUserClosed: function () {
-        const closed = localStorage.getItem('wishlist_modal_user_closed') === 'true';
-        console.log(`📱 [Modal State] Checking if user closed modal: ${closed}`);
-        return closed;
-    }
-};
-
-// Sequential Sync Manager Class
-class SequentialSyncManager {
-    constructor() {
-        this.queue = [];
-        this.currentIndex = 0;
-        this.isRunning = false;
-        this.startTime = null;
-    }
-
-    start(playlistIds) {
-        if (this.isRunning) {
-            console.warn('Sequential sync already running');
-            return;
-        }
-
-        // Convert playlist IDs to ordered array (maintain display order)
-        this.queue = Array.from(playlistIds);
-        this.currentIndex = 0;
-        this.isRunning = true;
-        this.startTime = Date.now();
-
-        console.log(`🚀 Starting sequential sync for ${this.queue.length} playlists:`, this.queue);
-        this.updateUI();
-        this.syncNext();
-    }
-
-    async syncNext() {
-        if (this.currentIndex >= this.queue.length) {
-            this.complete();
-            return;
-        }
-
-        const playlistId = this.queue[this.currentIndex];
-        const playlist = spotifyPlaylists.find(p => p.id === playlistId);
-        console.log(`🔄 Sequential sync: Processing playlist ${this.currentIndex + 1}/${this.queue.length}: ${playlist?.name || playlistId}`);
-
-        this.updateUI();
-
-        try {
-            // Use existing single sync function
-            await startPlaylistSync(playlistId);
-
-            // Wait for sync to complete by monitoring the poller
-            await this.waitForSyncCompletion(playlistId);
-
-        } catch (error) {
-            console.error(`❌ Sequential sync: Failed to sync playlist ${playlistId}:`, error);
-            showToast(`Failed to sync "${playlist?.name || playlistId}": ${error.message}`, 'error');
-        }
-
-        // Move to next playlist
-        this.currentIndex++;
-        setTimeout(() => this.syncNext(), 1000); // Small delay between syncs
-    }
-
-    async waitForSyncCompletion(playlistId) {
-        return new Promise((resolve) => {
-            // Monitor the existing sync poller for completion
-            const checkCompletion = () => {
-                if (!activeSyncPollers[playlistId]) {
-                    // Poller stopped = sync completed
-                    resolve();
-                    return;
-                }
-                // Check again in 1 second
-                setTimeout(checkCompletion, 1000);
-            };
-            checkCompletion();
-        });
-    }
-
-    complete() {
-        const duration = ((Date.now() - this.startTime) / 1000).toFixed(1);
-        const completedCount = this.queue.length;
-        console.log(`🏁 Sequential sync completed in ${duration}s`);
-
-        this.isRunning = false;
-        this.queue = [];
-        this.currentIndex = 0;
-        this.startTime = null;
-
-        // Re-enable playlist selection
-        disablePlaylistSelection(false);
-
-        this.updateUI();
-        updateRefreshButtonState(); // Refresh button state after completion
-        showToast(`Sequential sync completed for ${completedCount} playlists in ${duration}s`, 'success');
-
-        // Hide sidebar after completion
-        hideSyncSidebar();
-    }
-
-    cancel() {
-        if (!this.isRunning) return;
-
-        console.log('🛑 Cancelling sequential sync');
-        this.isRunning = false;
-        this.queue = [];
-        this.currentIndex = 0;
-        this.startTime = null;
-
-        // Re-enable playlist selection
-        disablePlaylistSelection(false);
-
-        this.updateUI();
-        updateRefreshButtonState(); // Refresh button state after cancellation
-        showToast('Sequential sync cancelled', 'info');
-
-        // Hide sidebar after cancellation
-        hideSyncSidebar();
-    }
-
-    updateUI() {
-        const startSyncBtn = document.getElementById('start-sync-btn');
-        const selectionInfo = document.getElementById('selection-info');
-
-        if (!this.isRunning) {
-            // Reset to normal state
-            if (startSyncBtn) {
-                startSyncBtn.textContent = 'Start Sync';
-                startSyncBtn.disabled = selectedPlaylists.size === 0;
-            }
-            if (selectionInfo) {
-                const count = selectedPlaylists.size;
-                selectionInfo.textContent = count === 0
-                    ? 'Select playlists to sync'
-                    : `${count} playlist${count > 1 ? 's' : ''} selected`;
-            }
-        } else {
-            // Show sequential sync status
-            if (startSyncBtn) {
-                startSyncBtn.textContent = 'Cancel Sequential Sync';
-                startSyncBtn.disabled = false;
-            }
-            if (selectionInfo) {
-                const current = this.currentIndex + 1;
-                const total = this.queue.length;
-                const currentPlaylist = spotifyPlaylists.find(p => p.id === this.queue[this.currentIndex]);
-                selectionInfo.textContent = `Syncing ${current}/${total}: ${currentPlaylist?.name || 'Unknown'}`;
-            }
-        }
-    }
-}
-
-// API endpoints
-const API = {
-    status: '/status',
-    config: '/config',
-    settings: '/api/settings',
-    testConnection: '/api/test-connection',
-    testDashboardConnection: '/api/test-dashboard-connection',
-    playlists: '/api/playlists',
-    sync: '/api/sync',
-    search: '/api/search',
-    artists: '/api/artists',
-    activity: '/api/activity',
-    stream: {
-        start: '/api/stream/start',
-        status: '/api/stream/status',
-        toggle: '/api/stream/toggle',
-        stop: '/api/stream/stop'
-    }
-};
-
-// ===============================
-// INITIALIZATION
-// ===============================
-
-// ---- Accent Color System ----
-
-function getAccentFallbackColors() {
-    let accent = localStorage.getItem('soulsync-accent') || '#1db954';
-    if (!/^#[0-9a-fA-F]{6}$/.test(accent)) accent = '#1db954';
-    // Compute a lighter variant for the second color
-    const r = parseInt(accent.slice(1, 3), 16), g = parseInt(accent.slice(3, 5), 16), b = parseInt(accent.slice(5, 7), 16);
-    const lighter = '#' + [Math.min(r + 20, 255), Math.min(g + 30, 255), Math.min(b + 12, 255)]
-        .map(v => v.toString(16).padStart(2, '0')).join('');
-    return [accent, lighter];
-}
-
-function applyAccentColor(hex) {
-    // Validate hex format — reject corrupt values
-    if (typeof hex !== 'string' || !/^#[0-9a-fA-F]{6}$/.test(hex)) {
-        hex = '#1db954'; // fallback to default
-    }
-    // Convert hex to RGB
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-
-    // Convert RGB to HSL
-    const rn = r / 255, gn = g / 255, bn = b / 255;
-    const max = Math.max(rn, gn, bn), min = Math.min(rn, gn, bn);
-    const l = (max + min) / 2;
-    let h = 0, s = 0;
-    if (max !== min) {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) / 6;
-        else if (max === gn) h = ((bn - rn) / d + 2) / 6;
-        else h = ((rn - gn) / d + 4) / 6;
-    }
-
-    // Compute light variant: +16% lightness
-    const lightL = Math.min(l + 0.16, 0.95);
-    // Compute neon variant: high lightness + boosted saturation
-    const neonL = Math.min(l + 0.30, 0.95);
-    const neonS = Math.min(s + 0.1, 1.0);
-
-    function hslToRgb(h, s, l) {
-        if (s === 0) { const v = Math.round(l * 255); return [v, v, v]; }
-        const hue2rgb = (p, q, t) => {
-            if (t < 0) t += 1; if (t > 1) t -= 1;
-            if (t < 1 / 6) return p + (q - p) * 6 * t;
-            if (t < 1 / 2) return q;
-            if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-            return p;
-        };
-        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-        const p = 2 * l - q;
-        return [Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
-        Math.round(hue2rgb(p, q, h) * 255),
-        Math.round(hue2rgb(p, q, h - 1 / 3) * 255)];
-    }
-
-    const light = hslToRgb(h, s, lightL);
-    const neon = hslToRgb(h, neonS, neonL);
-
-    const root = document.documentElement.style;
-    root.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
-    root.setProperty('--accent-light-rgb', `${light[0]}, ${light[1]}, ${light[2]}`);
-    root.setProperty('--accent-neon-rgb', `${neon[0]}, ${neon[1]}, ${neon[2]}`);
-
-    // Store for instant restore on next page load
-    localStorage.setItem('soulsync-accent', hex);
-
-    // Update preview swatch if it exists
-    const swatch = document.getElementById('accent-preview-swatch');
-    if (swatch) swatch.style.background = hex;
-}
-
-function applyParticlesSetting(enabled) {
-    const canvas = document.getElementById('page-particles-canvas');
-    if (canvas) canvas.style.display = enabled ? '' : 'none';
-    if (window.pageParticles) {
-        if (enabled) {
-            const activePage = document.querySelector('.page.active');
-            if (activePage) {
-                window.pageParticles.setPage(activePage.id.replace('-page', ''));
-            }
-        } else {
-            window.pageParticles.stop();
-        }
-    }
-    window._particlesEnabled = enabled;
-    localStorage.setItem('soulsync-particles', String(enabled));
-}
-
-function applyWorkerOrbsSetting(enabled) {
-    window._workerOrbsEnabled = enabled;
-    localStorage.setItem('soulsync-worker-orbs', String(enabled));
-    if (window.workerOrbs) {
-        if (enabled) {
-            const activePage = document.querySelector('.page.active');
-            if (activePage && activePage.id === 'dashboard-page') {
-                window.workerOrbs.setPage('dashboard');
-            }
-        } else {
-            window.workerOrbs.setPage('_disabled');
-        }
-    }
-}
-
-function initAccentColorListeners() {
-    const presetSelect = document.getElementById('accent-preset');
-    const customGroup = document.getElementById('custom-color-group');
-    const customPicker = document.getElementById('accent-custom-color');
-    if (!presetSelect) return;
-
-    presetSelect.addEventListener('change', () => {
-        const val = presetSelect.value;
-        if (val === 'custom') {
-            if (customGroup) customGroup.style.display = '';
-            if (customPicker) applyAccentColor(customPicker.value);
-        } else {
-            if (customGroup) customGroup.style.display = 'none';
-            applyAccentColor(val);
-        }
-    });
-
-    if (customPicker) {
-        customPicker.addEventListener('input', () => {
-            applyAccentColor(customPicker.value);
-        });
-    }
-
-    // Particles toggle — apply immediately on change
-    const particlesCheckbox = document.getElementById('particles-enabled');
-    if (particlesCheckbox) {
-        particlesCheckbox.addEventListener('change', () => {
-            applyParticlesSetting(particlesCheckbox.checked);
-        });
-    }
-
-    // Worker orbs toggle — apply immediately on change
-    const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
-    if (workerOrbsCheckbox) {
-        workerOrbsCheckbox.addEventListener('change', () => {
-            applyWorkerOrbsSetting(workerOrbsCheckbox.checked);
-        });
-    }
-
-    // Reduce effects toggle — apply immediately on change
-    const reduceEffectsCheckbox = document.getElementById('reduce-effects-enabled');
-    if (reduceEffectsCheckbox) {
-        reduceEffectsCheckbox.addEventListener('change', () => {
-            applyReduceEffects(reduceEffectsCheckbox.checked);
-        });
-    }
-}
-
-function applyReduceEffects(enabled) {
-    if (enabled) {
-        document.body.classList.add('reduce-effects');
-    } else {
-        document.body.classList.remove('reduce-effects');
-    }
-    localStorage.setItem('soulsync-reduce-effects', enabled ? '1' : '0');
-}
-
-// Bootstrap accent and reduce-effects from localStorage instantly (prevents flash)
-(function () {
-    if (localStorage.getItem('soulsync-reduce-effects') === '1') {
-        document.body.classList.add('reduce-effects');
-    }
-    const saved = localStorage.getItem('soulsync-accent');
-    if (saved) applyAccentColor(saved);
-    // Bootstrap particles setting from localStorage
-    const particlesSaved = localStorage.getItem('soulsync-particles');
-    if (particlesSaved === 'false') {
-        window._particlesEnabled = false;
-        const canvas = document.getElementById('page-particles-canvas');
-        if (canvas) canvas.style.display = 'none';
-    }
-    // Bootstrap worker orbs setting from localStorage
-    const workerOrbsSaved = localStorage.getItem('soulsync-worker-orbs');
-    if (workerOrbsSaved === 'false') {
-        window._workerOrbsEnabled = false;
-    }
-})();
-
-// ── Profile System ─────────────────────────────────────────────
-let currentProfile = null;
-
-function getProfileHomePage() {
-    if (!currentProfile) return 'dashboard';
-    if (currentProfile.home_page) return currentProfile.home_page;
-    return currentProfile.is_admin ? 'dashboard' : 'discover';
-}
-
-function isPageAllowed(pageId) {
-    if (!currentProfile) return true;
-    if (currentProfile.id === 1) return true;
-    if (pageId === 'help' || pageId === 'issues') return true;
-    if (pageId === 'artist-detail') {
-        // artist-detail requires library access
-        const ap = currentProfile.allowed_pages;
-        if (!ap) return true;
-        return ap.includes('library');
-    }
-    if (pageId === 'settings') return currentProfile.is_admin;
-    const ap = currentProfile.allowed_pages;
-    if (!ap) return true; // null = all pages
-    return ap.includes(pageId);
-}
-
-function canDownload() {
-    if (!currentProfile) return true;
-    if (currentProfile.id === 1) return true;
-    return currentProfile.can_download !== false && currentProfile.can_download !== 0;
-}
-
-function renderProfileAvatar(el, profile) {
-    // Renders avatar as image (if avatar_url set) or colored initial fallback
-    // Preserves existing classes, ensures 'profile-avatar' is present
-    if (!el.classList.contains('profile-avatar') && !el.classList.contains('profile-indicator-avatar') && !el.classList.contains('profile-pin-avatar')) {
-        el.className = 'profile-avatar';
-    }
-    el.style.background = profile.avatar_color || '#6366f1';
-    el.textContent = '';
-    if (profile.avatar_url) {
-        const img = document.createElement('img');
-        img.src = profile.avatar_url;
-        img.alt = profile.name;
-        img.className = 'profile-avatar-img';
-        img.onerror = () => {
-            img.remove();
-            el.textContent = profile.name.charAt(0).toUpperCase();
-        };
-        el.appendChild(img);
-    } else {
-        el.textContent = profile.name.charAt(0).toUpperCase();
-    }
-}
-
-async function initProfileSystem() {
-    try {
-        // Check if a session already has a profile selected
-        const currentRes = await fetch('/api/profiles/current');
-        const currentData = await currentRes.json();
-        if (currentData.success && currentData.profile) {
-            currentProfile = currentData.profile;
-            updateProfileIndicator();
-
-            // Check if launch PIN is required
-            if (currentData.launch_pin_required) {
-                showLaunchPinScreen();
-                return false; // Defer app init until PIN verified
-            }
-
-            return true; // Profile already selected, skip picker
-        }
-
-        // Fetch all profiles
-        const res = await fetch('/api/profiles');
-        const data = await res.json();
-        const profiles = data.profiles || [];
-
-        if (profiles.length === 0) {
-            // No profiles yet — auto-select admin profile 1
-            await selectProfile(1);
-            return true;
-        }
-
-        if (profiles.length === 1) {
-            // Only one profile — always auto-select (PIN only matters with multiple profiles)
-            await selectProfile(profiles[0].id);
-
-            // Re-check for launch PIN after auto-select
-            const recheck = await fetch('/api/profiles/current');
-            const recheckData = await recheck.json();
-            if (recheckData.launch_pin_required) {
-                showLaunchPinScreen();
-                return false;
-            }
-
-            return true;
-        }
-
-        // Multiple profiles or PIN required — show picker
-        showProfilePicker(profiles);
-        return false; // App init deferred until profile selected
-    } catch (e) {
-        console.error('Profile init error:', e);
-        return true; // Fall through to normal init
-    }
-}
-
-// ── Launch PIN Lock Screen ─────────────────────────────────────────────
-
-function showLaunchPinScreen() {
-    const overlay = document.getElementById('launch-pin-overlay');
-    if (!overlay) return;
-    overlay.style.display = 'flex';
-
-    const input = document.getElementById('launch-pin-input');
-    const submit = document.getElementById('launch-pin-submit');
-    const error = document.getElementById('launch-pin-error');
-
-    input.value = '';
-    error.style.display = 'none';
-    setTimeout(() => input.focus(), 100);
-
-    const doSubmit = async () => {
-        const pin = input.value.trim();
-        if (!pin) return;
-
-        submit.disabled = true;
-        submit.textContent = 'Verifying...';
-
-        try {
-            const res = await fetch('/api/profiles/verify-launch-pin', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ pin })
-            });
-            const data = await res.json();
-
-            if (data.success) {
-                // Server session flag set by verify endpoint — consumed on next /api/profiles/current call
-                overlay.style.display = 'none';
-                initApp(); // Now safe to load the full app
-            } else {
-                error.textContent = data.error || 'Invalid PIN';
-                error.style.display = 'block';
-                input.value = '';
-                input.focus();
-                // Shake animation
-                overlay.querySelector('.launch-pin-container').classList.add('shake');
-                setTimeout(() => overlay.querySelector('.launch-pin-container').classList.remove('shake'), 500);
-            }
-        } catch (e) {
-            error.textContent = 'Connection error';
-            error.style.display = 'block';
-        }
-
-        submit.disabled = false;
-        submit.textContent = 'Unlock';
-    };
-
-    // Remove old listeners to prevent stacking
-    const newSubmit = submit.cloneNode(true);
-    submit.parentNode.replaceChild(newSubmit, submit);
-    newSubmit.addEventListener('click', doSubmit);
-
-    input.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') doSubmit();
-    });
-}
-
-// ── Security Settings Helpers ──────────────────────────────────────────
-
-async function saveSecurityPin() {
-    const pin = document.getElementById('security-new-pin').value;
-    const confirm = document.getElementById('security-confirm-pin').value;
-    const msg = document.getElementById('security-pin-msg');
-
-    if (!pin || pin.length < 4) {
-        msg.textContent = 'PIN must be at least 4 characters';
-        msg.style.display = 'block';
-        msg.style.color = '#ff5252';
-        return;
-    }
-    if (pin !== confirm) {
-        msg.textContent = 'PINs do not match';
-        msg.style.display = 'block';
-        msg.style.color = '#ff5252';
-        return;
-    }
-
-    try {
-        const res = await fetch('/api/profiles/1/set-pin', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ pin })
-        });
-        const data = await res.json();
-
-        if (data.success) {
-            msg.textContent = 'PIN saved! You can now enable the lock screen.';
-            msg.style.color = '#4caf50';
-            msg.style.display = 'block';
-
-            // Update UI — hide setup, show change, enable toggle
-            document.getElementById('security-pin-setup').style.display = 'none';
-            document.getElementById('security-change-pin-section').style.display = 'block';
-            document.getElementById('security-require-pin').disabled = false;
-
-            // Clear inputs
-            document.getElementById('security-new-pin').value = '';
-            document.getElementById('security-confirm-pin').value = '';
-        } else {
-            msg.textContent = data.error || 'Failed to save PIN';
-            msg.style.color = '#ff5252';
-            msg.style.display = 'block';
-        }
-    } catch (e) {
-        msg.textContent = 'Connection error';
-        msg.style.color = '#ff5252';
-        msg.style.display = 'block';
-    }
-}
-
-function handleSecurityPinToggle(checkbox) {
-    // If trying to enable but no PIN, show the setup section
-    if (checkbox.checked) {
-        const setupSection = document.getElementById('security-pin-setup');
-        if (setupSection.style.display !== 'none' || checkbox.disabled) {
-            checkbox.checked = false;
-            setupSection.style.display = 'block';
-            document.getElementById('security-new-pin').focus();
-            return;
-        }
-    }
-    // Auto-save this setting
-    saveSettings(true);
-}
-
-function showChangeSecurityPin() {
-    document.getElementById('security-pin-setup').style.display = 'block';
-    document.getElementById('security-new-pin').focus();
-}
-
-// ── Forgot PIN Recovery ────────────────────────────────────────────────
-
-function showForgotPinView() {
-    document.getElementById('launch-pin-entry').style.display = 'none';
-    document.getElementById('launch-pin-recovery').style.display = 'block';
-    document.getElementById('launch-recovery-input').value = '';
-    document.getElementById('launch-recovery-error').style.display = 'none';
-    setTimeout(() => document.getElementById('launch-recovery-input').focus(), 100);
-}
-
-function showPinEntryView() {
-    document.getElementById('launch-pin-recovery').style.display = 'none';
-    document.getElementById('launch-pin-entry').style.display = 'block';
-    setTimeout(() => document.getElementById('launch-pin-input').focus(), 100);
-}
-
-async function submitRecoveryCredential() {
-    const input = document.getElementById('launch-recovery-input');
-    const error = document.getElementById('launch-recovery-error');
-    const btn = document.getElementById('launch-recovery-submit');
-    const credential = input.value.trim();
-
-    if (!credential) return;
-
-    btn.disabled = true;
-    btn.textContent = 'Verifying...';
-    error.style.display = 'none';
-
-    try {
-        const res = await fetch('/api/profiles/reset-pin-via-credential', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ credential })
-        });
-        const data = await res.json();
-
-        if (data.success) {
-            sessionStorage.setItem('soulsync_pin_ok', '1');
-            document.getElementById('launch-pin-overlay').style.display = 'none';
-            initApp();
-            setTimeout(() => showToast('PIN cleared. You can set a new one in Settings → Advanced.', 'success'), 1000);
-        } else {
-            error.textContent = data.error || 'Credential not recognized';
-            error.style.display = 'block';
-            input.value = '';
-            input.focus();
-            document.getElementById('launch-pin-container').classList.add('shake');
-            setTimeout(() => document.getElementById('launch-pin-container').classList.remove('shake'), 500);
-        }
-    } catch (e) {
-        error.textContent = 'Connection error';
-        error.style.display = 'block';
-    }
-
-    btn.disabled = false;
-    btn.textContent = 'Verify & Reset PIN';
-}
-
-// ── Profile PIN Forgot Recovery ────────────────────────────────────────
-function showProfileForgotPin() {
-    const dialog = document.getElementById('profile-pin-dialog');
-    const content = dialog.querySelector('.profile-pin-content');
-
-    // Store the profile ID we're recovering for
-    const profileName = document.getElementById('profile-pin-name').textContent;
-
-    // Replace dialog content with recovery form
-    content.dataset.prevHtml = content.innerHTML;
-    content.innerHTML = `
-        <p style="color:#fff;font-size:14px;font-weight:600;margin-bottom:4px">Reset PIN for ${profileName}</p>
-        <p style="color:rgba(255,255,255,0.5);font-size:12px;margin-bottom:12px">Enter any configured API credential<br>(Spotify secret, Plex token, etc.)</p>
-        <input type="password" id="profile-recovery-input" class="profile-pin-input" maxlength="200" placeholder="Paste API credential" autocomplete="off">
-        <div class="profile-pin-buttons">
-            <button id="profile-recovery-cancel" class="profile-pin-cancel">Back</button>
-            <button id="profile-recovery-submit" class="profile-pin-submit">Verify & Reset</button>
-        </div>
-        <p id="profile-recovery-error" class="profile-pin-error" style="display:none"></p>
-    `;
-    setTimeout(() => document.getElementById('profile-recovery-input').focus(), 100);
-
-    document.getElementById('profile-recovery-cancel').onclick = () => {
-        content.innerHTML = content.dataset.prevHtml;
-    };
-
-    document.getElementById('profile-recovery-submit').onclick = async () => {
-        const input = document.getElementById('profile-recovery-input');
-        const error = document.getElementById('profile-recovery-error');
-        const credential = input.value.trim();
-        if (!credential) return;
-
-        const btn = document.getElementById('profile-recovery-submit');
-        btn.disabled = true;
-        btn.textContent = 'Verifying...';
-        error.style.display = 'none';
-
-        try {
-            const res = await fetch('/api/profiles/reset-pin-via-credential', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ credential, profile_id: dialog._profileId || 1 })
-            });
-            const data = await res.json();
-            if (data.success) {
-                dialog.style.display = 'none';
-                content.innerHTML = content.dataset.prevHtml;
-                showToast('PIN cleared. You can set a new one in Settings.', 'success');
-                // Re-try selecting the profile (now PIN-free)
-                if (dialog._profileId) selectProfile(dialog._profileId);
-            } else {
-                error.textContent = data.error || 'Credential not recognized';
-                error.style.display = 'block';
-                input.value = '';
-                input.focus();
-            }
-        } catch (e) {
-            error.textContent = 'Connection error';
-            error.style.display = 'block';
-        }
-        btn.disabled = false;
-        btn.textContent = 'Verify & Reset';
-    };
-
-    document.getElementById('profile-recovery-input').onkeydown = (e) => {
-        if (e.key === 'Enter') document.getElementById('profile-recovery-submit').click();
-    };
-}
-
-function showProfilePicker(profiles, canCancel = false) {
-    const overlay = document.getElementById('profile-picker-overlay');
-    const grid = document.getElementById('profile-picker-grid');
-    const actions = document.getElementById('profile-picker-actions');
-
-    grid.innerHTML = '';
-    profiles.forEach(p => {
-        const card = document.createElement('div');
-        card.className = 'profile-picker-card';
-        const avatarEl = document.createElement('div');
-        renderProfileAvatar(avatarEl, p);
-        card.appendChild(avatarEl);
-        const nameEl = document.createElement('span');
-        nameEl.className = 'profile-name';
-        nameEl.textContent = p.name;
-        card.appendChild(nameEl);
-        if (p.is_admin) {
-            const badge = document.createElement('span');
-            badge.className = 'profile-badge';
-            badge.textContent = 'Admin';
-            card.appendChild(badge);
-        }
-        card.onclick = () => handleProfileClick(p);
-        grid.appendChild(card);
-    });
-
-    // Show actions: admin sees "Manage Profiles", non-admin sees "My Profile" (when they have a profile selected)
-    const isAdmin = currentProfile ? currentProfile.is_admin : false;
-    const manageBtn = document.getElementById('manage-profiles-btn');
-    if (isAdmin) {
-        actions.style.display = '';
-        if (manageBtn) {
-            manageBtn.textContent = 'Manage Profiles';
-            // Reset onclick to admin handler (initProfileManagement sets this, but re-affirm here)
-            manageBtn.onclick = () => {
-                document.getElementById('profile-manage-panel').style.display = 'flex';
-                loadProfileManageList();
-            };
-        }
-    } else if (currentProfile && canCancel) {
-        // Non-admin with an active profile: show "My Profile" to edit own settings
-        actions.style.display = '';
-        if (manageBtn) {
-            manageBtn.textContent = 'My Profile';
-            manageBtn.onclick = () => showSelfEditForm();
-        }
-    } else {
-        actions.style.display = 'none';
-    }
-
-    // Show/remove cancel button when opened from sidebar indicator
-    let cancelBtn = overlay.querySelector('.profile-picker-cancel');
-    if (cancelBtn) cancelBtn.remove();
-    if (canCancel) {
-        cancelBtn = document.createElement('button');
-        cancelBtn.className = 'profile-picker-cancel';
-        cancelBtn.textContent = 'Cancel';
-        cancelBtn.onclick = () => hideProfilePicker();
-        actions.parentElement.appendChild(cancelBtn);
-    }
-
-    overlay.style.display = 'flex';
-    document.querySelector('.main-container').style.display = 'none';
-}
-
-async function handleProfileClick(profile) {
-    // Fetch profile count — PIN only matters with multiple profiles
-    let profileCount = 1;
-    try {
-        const r = await fetch('/api/profiles');
-        const d = await r.json();
-        profileCount = (d.profiles || []).length;
-    } catch (e) { }
-
-    if (profile.has_pin && profileCount > 1) {
-        showPinDialog(profile);
-    } else {
-        const wasSwitching = !!currentProfile;
-        await selectProfile(profile.id);
-        if (wasSwitching) {
-            window.location.reload();
-            return;
-        }
-        hideProfilePicker();
-        initApp();
-    }
-}
-
-function showPinDialog(profile) {
-    const dialog = document.getElementById('profile-pin-dialog');
-    const avatar = document.getElementById('profile-pin-avatar');
-    const nameEl = document.getElementById('profile-pin-name');
-    const input = document.getElementById('profile-pin-input');
-    const errorEl = document.getElementById('profile-pin-error');
-
-    renderProfileAvatar(avatar, profile);
-    nameEl.textContent = profile.name;
-    input.value = '';
-    errorEl.style.display = 'none';
-    dialog._profileId = profile.id;
-    dialog.style.display = 'flex';
-    setTimeout(() => input.focus(), 100);
-
-    const submit = document.getElementById('profile-pin-submit');
-    const cancel = document.getElementById('profile-pin-cancel');
-
-    const wasSwitching = !!currentProfile;
-    const handleSubmit = async () => {
-        const pin = input.value;
-        if (!pin) return;
-        try {
-            const res = await fetch('/api/profiles/select', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ profile_id: profile.id, pin })
-            });
-            const data = await res.json();
-            if (data.success) {
-                cleanup();
-                if (wasSwitching) {
-                    window.location.reload();
-                    return;
-                }
-                currentProfile = data.profile;
-                dialog.style.display = 'none';
-                hideProfilePicker();
-                updateProfileIndicator();
-                initApp();
-                return;
-            } else {
-                errorEl.textContent = data.error || 'Invalid PIN';
-                errorEl.style.display = '';
-                input.value = '';
-                input.focus();
-            }
-        } catch (e) {
-            errorEl.textContent = 'Connection error';
-            errorEl.style.display = '';
-        }
-        cleanup();
-    };
-
-    const handleCancel = () => {
-        dialog.style.display = 'none';
-        cleanup();
-    };
-
-    const handleKeydown = (e) => {
-        if (e.key === 'Enter') handleSubmit();
-        if (e.key === 'Escape') handleCancel();
-    };
-
-    const cleanup = () => {
-        submit.removeEventListener('click', handleSubmit);
-        cancel.removeEventListener('click', handleCancel);
-        input.removeEventListener('keydown', handleKeydown);
-    };
-
-    submit.addEventListener('click', handleSubmit);
-    cancel.addEventListener('click', handleCancel);
-    input.addEventListener('keydown', handleKeydown);
-}
-
-async function selectProfile(profileId) {
-    try {
-        const oldProfileId = currentProfile ? currentProfile.id : null;
-        const res = await fetch('/api/profiles/select', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ profile_id: profileId })
-        });
-        const data = await res.json();
-        if (data.success) {
-            currentProfile = data.profile;
-            updateProfileIndicator();
-            // Join profile-scoped WebSocket room for watchlist/wishlist count updates
-            if (socket && socket.connected) {
-                socket.emit('profile:join', { profile_id: profileId, old_profile_id: oldProfileId });
-            }
-            // Invalidate ListenBrainz cache on profile switch (each profile has their own playlists)
-            _invalidateListenBrainzCache();
-        }
-        return data.success;
-    } catch (e) {
-        console.error('Error selecting profile:', e);
-        return false;
-    }
-}
-
-function hideProfilePicker() {
-    document.getElementById('profile-picker-overlay').style.display = 'none';
-    document.querySelector('.main-container').style.display = 'flex';
-}
-
-function updateProfileIndicator() {
-    const indicator = document.getElementById('profile-indicator');
-    if (!currentProfile || !indicator) return;
-
-    const avatar = document.getElementById('profile-indicator-avatar');
-    const name = document.getElementById('profile-indicator-name');
-
-    renderProfileAvatar(avatar, currentProfile);
-    name.textContent = currentProfile.name;
-    indicator.style.display = 'flex';
-
-    indicator.onclick = async () => {
-        const res = await fetch('/api/profiles');
-        const data = await res.json();
-        if (data.profiles && data.profiles.length > 0) {
-            showProfilePicker(data.profiles, true);
-        }
-    };
-
-    // Filter sidebar pages based on profile permissions
-    document.querySelectorAll('.nav-button[data-page]').forEach(btn => {
-        const page = btn.getAttribute('data-page');
-        if (page === 'hydrabase') return; // Managed by dev mode toggle
-        if (page === 'settings') {
-            // Settings always gated by is_admin
-            btn.style.display = currentProfile.is_admin ? '' : 'none';
-        } else if (page === 'help' || page === 'issues') {
-            btn.style.display = ''; // Always visible
-        } else if (currentProfile.id === 1) {
-            btn.style.display = ''; // Root admin sees all
-        } else {
-            const ap = currentProfile.allowed_pages;
-            btn.style.display = (!ap || ap.includes(page)) ? '' : 'none';
-        }
-    });
-
-    // Toggle download capability
-    if (canDownload()) {
-        document.body.classList.remove('downloads-disabled');
-    } else {
-        document.body.classList.add('downloads-disabled');
-    }
-}
-
-// =====================
-// PERSONAL SETTINGS MODAL
-// =====================
-
-async function openPersonalSettings() {
-    const overlay = document.getElementById('personal-settings-overlay');
-    if (!overlay) return;
-    overlay.style.display = 'flex';
-
-    const body = document.getElementById('personal-settings-body');
-    body.innerHTML = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.4);">Loading...</div>';
-
-    try {
-        // Load all per-profile service data in parallel
-        const [lbRes, spotifyRes] = await Promise.all([
-            fetch('/api/profiles/me/listenbrainz'),
-            fetch('/api/profiles/me/spotify'),
-        ]);
-        const lbData = await lbRes.json();
-        const spotifyData = await spotifyRes.json();
-
-        body.innerHTML = '';
-        const isNonAdmin = currentProfile && !currentProfile.is_admin;
-
-        if (isNonAdmin) {
-            // Tabbed layout for non-admin with multiple sections
-            const tabs = [
-                { id: 'music', label: 'Music Services' },
-                { id: 'server', label: 'Server' },
-                { id: 'scrobble', label: 'Scrobbling' },
-            ];
-            const tabBar = document.createElement('div');
-            tabBar.className = 'ps-tabbar';
-            tabs.forEach((t, i) => {
-                const btn = document.createElement('button');
-                btn.className = 'ps-tab' + (i === 0 ? ' active' : '');
-                btn.textContent = t.label;
-                btn.onclick = () => {
-                    tabBar.querySelectorAll('.ps-tab').forEach(b => b.classList.remove('active'));
-                    btn.classList.add('active');
-                    body.querySelectorAll('.ps-tab-content').forEach(c => c.classList.remove('active'));
-                    const target = document.getElementById(`ps-tab-${t.id}`);
-                    if (target) target.classList.add('active');
-                };
-                tabBar.appendChild(btn);
-            });
-            body.appendChild(tabBar);
-
-            // Music Services tab
-            const musicTab = document.createElement('div');
-            musicTab.id = 'ps-tab-music';
-            musicTab.className = 'ps-tab-content active';
-            renderPersonalSettingsSpotify(musicTab, spotifyData);
-            renderPersonalSettingsTidal(musicTab);
-            body.appendChild(musicTab);
-
-            // Server tab
-            const serverTab = document.createElement('div');
-            serverTab.id = 'ps-tab-server';
-            serverTab.className = 'ps-tab-content';
-            serverTab.innerHTML = '<div style="text-align:center;padding:20px;color:rgba(255,255,255,0.3);">Loading libraries...</div>';
-            body.appendChild(serverTab);
-            // Load server libraries async (don't block modal)
-            fetch('/api/profiles/me/server-library').then(r => r.json()).then(libData => {
-                serverTab.innerHTML = '';
-                renderPersonalSettingsServerLibrary(serverTab, libData);
-            }).catch(() => {
-                serverTab.innerHTML = '';
-                renderPersonalSettingsServerLibrary(serverTab, {});
-            });
-
-            // Scrobbling tab
-            const scrobbleTab = document.createElement('div');
-            scrobbleTab.id = 'ps-tab-scrobble';
-            scrobbleTab.className = 'ps-tab-content';
-            body.appendChild(scrobbleTab);
-            // Render LB into the scrobble tab
-            const origBody = body;
-            renderPersonalSettingsLB(lbData, scrobbleTab);
-        } else {
-            // Admin: just ListenBrainz, no tabs
-            const content = document.createElement('div');
-            content.style.padding = '18px 22px 22px';
-            body.appendChild(content);
-            renderPersonalSettingsLB(lbData, content);
-        }
-    } catch (e) {
-        body.innerHTML = '<div style="color:#ef4444;padding:16px;">Failed to load settings</div>';
-    }
-}
-
-function closePersonalSettings() {
-    const overlay = document.getElementById('personal-settings-overlay');
-    if (overlay) overlay.style.display = 'none';
-}
-
-function renderPersonalSettingsSpotify(body, data) {
-    const hasCreds = data.has_credentials;
-    const clientId = data.client_id || '';
-
-    let contentHtml;
-    if (hasCreds) {
-        contentHtml = `
-            <div class="ps-connected-info">
-                <div class="ps-connected-icon">🟢</div>
-                <div class="ps-connected-details">
-                    <div class="ps-connected-username">Credentials configured</div>
-                    <div class="ps-connected-server">Client ID: ${escapeHtml(clientId.substring(0, 8))}...</div>
-                    <div class="ps-connected-source">Personal Spotify app</div>
-                </div>
-            </div>
-            <div class="ps-actions">
-                <button class="ps-btn ps-btn-primary" onclick="authenticatePersonalSpotify()">🔐 Authenticate</button>
-                <button class="ps-btn ps-btn-danger" onclick="disconnectPersonalSpotify()">Remove</button>
-            </div>
-        `;
-    } else {
-        contentHtml = `
-            <div class="ps-form-group">
-                <label>Client ID</label>
-                <input type="text" id="ps-spotify-client-id" placeholder="Your Spotify Client ID">
-            </div>
-            <div class="ps-form-group">
-                <label>Client Secret</label>
-                <input type="password" id="ps-spotify-client-secret" placeholder="Your Spotify Client Secret">
-            </div>
-            <div class="ps-form-group">
-                <label>Redirect URI <span style="font-weight:400;color:rgba(255,255,255,0.3)">(optional)</span></label>
-                <input type="text" id="ps-spotify-redirect-uri" placeholder="http://127.0.0.1:8888/callback">
-                <div class="ps-help-text">
-                    Create an app at <a href="https://developer.spotify.com/dashboard" target="_blank">developer.spotify.com</a> and add the redirect URI
-                </div>
-            </div>
-            <div id="ps-spotify-result"></div>
-            <div class="ps-actions">
-                <button class="ps-btn ps-btn-primary" onclick="savePersonalSpotify()">Save Credentials</button>
-            </div>
-        `;
-    }
-
-    const section = document.createElement('div');
-    section.id = 'ps-spotify-section';
-    section.innerHTML = `
-        <div class="ps-section">
-            <div class="ps-section-header">
-                <h4 class="ps-section-title">Spotify</h4>
-                <span class="ps-connection-badge ${hasCreds ? 'connected' : 'disconnected'}">
-                    <span class="ps-connection-dot"></span>
-                    ${hasCreds ? 'Configured' : 'Not configured'}
-                </span>
-            </div>
-            <div class="ps-help-text" style="margin-bottom:12px;">
-                Connect your own Spotify account to see your playlists instead of the admin's.
-            </div>
-            ${contentHtml}
-        </div>
-    `;
-
-    const existing = document.getElementById('ps-spotify-section');
-    if (existing) existing.replaceWith(section);
-    else body.appendChild(section);
-}
-
-async function savePersonalSpotify() {
-    const clientId = document.getElementById('ps-spotify-client-id')?.value?.trim();
-    const clientSecret = document.getElementById('ps-spotify-client-secret')?.value?.trim();
-    const redirectUri = document.getElementById('ps-spotify-redirect-uri')?.value?.trim();
-    const resultEl = document.getElementById('ps-spotify-result');
-
-    if (!clientId || !clientSecret) {
-        if (resultEl) resultEl.innerHTML = '<div style="color:#ef4444;font-size:12px;margin-top:8px;">Client ID and Secret are required</div>';
-        return;
-    }
-
-    try {
-        const res = await fetch('/api/profiles/me/spotify', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Spotify credentials saved', 'success');
-            openPersonalSettings(); // Reload to show connected state
-        } else {
-            if (resultEl) resultEl.innerHTML = `<div style="color:#ef4444;font-size:12px;margin-top:8px;">${data.error || 'Failed to save'}</div>`;
-        }
-    } catch (e) {
-        if (resultEl) resultEl.innerHTML = '<div style="color:#ef4444;font-size:12px;margin-top:8px;">Network error</div>';
-    }
-}
-
-async function authenticatePersonalSpotify() {
-    // Trigger OAuth flow with profile_id in state so callback knows which profile
-    window.open('/auth/spotify?profile_id=' + (currentProfile?.id || ''), '_blank');
-}
-
-function renderPersonalSettingsTidal(body) {
-    const section = document.createElement('div');
-    section.id = 'ps-tidal-section';
-    section.innerHTML = `
-        <div class="ps-section">
-            <div class="ps-section-header">
-                <h4 class="ps-section-title">Tidal</h4>
-            </div>
-            <div class="ps-help-text" style="margin-bottom:12px;">
-                Connect your own Tidal account to see your playlists. Uses the admin's Tidal app credentials.
-            </div>
-            <div class="ps-actions">
-                <button class="ps-btn ps-btn-primary" onclick="authenticatePersonalTidal()">🔐 Authenticate Tidal</button>
-            </div>
-        </div>
-    `;
-    const existing = document.getElementById('ps-tidal-section');
-    if (existing) existing.replaceWith(section);
-    else body.appendChild(section);
-}
-
-function authenticatePersonalTidal() {
-    window.open('/auth/tidal?profile_id=' + (currentProfile?.id || ''), '_blank');
-}
-
-async function renderPersonalSettingsServerLibrary(container, profileData) {
-    const section = document.createElement('div');
-    section.id = 'ps-server-library-section';
-
-    // Detect which server is active
-    let serverType = 'none';
-    let libraries = [];
-    let users = [];
-    const currentLib = profileData || {};
-
-    try {
-        // Try each server type to find the active one
-        const plexRes = await fetch('/api/plex/music-libraries');
-        if (plexRes.ok) {
-            const plexData = await plexRes.json();
-            if (plexData.libraries && plexData.libraries.length > 0) {
-                serverType = 'plex';
-                libraries = plexData.libraries;
-            }
-        }
-    } catch (e) { }
-
-    if (serverType === 'none') {
-        try {
-            const jellyRes = await fetch('/api/jellyfin/music-libraries');
-            if (jellyRes.ok) {
-                const jellyData = await jellyRes.json();
-                if (jellyData.libraries && jellyData.libraries.length > 0) {
-                    serverType = 'jellyfin';
-                    libraries = jellyData.libraries;
-                    users = jellyData.users || [];
-                }
-            }
-        } catch (e) { }
-    }
-
-    if (serverType === 'none') {
-        section.innerHTML = `
-            <div class="ps-section">
-                <div class="ps-section-header">
-                    <h4 class="ps-section-title">Media Server</h4>
-                </div>
-                <div class="ps-help-text">No media server connected. Ask your admin to configure Plex, Jellyfin, or Navidrome in Settings.</div>
-            </div>
-        `;
-    } else if (serverType === 'plex') {
-        const selectedLib = currentLib.plex_library_id || '';
-        const optionsHtml = libraries.map(lib => {
-            const name = lib.name || lib.title || lib;
-            const val = typeof lib === 'string' ? lib : (lib.name || lib.title);
-            return `<option value="${escapeHtml(val)}" ${val === selectedLib ? 'selected' : ''}>${escapeHtml(val)}</option>`;
-        }).join('');
-
-        section.innerHTML = `
-            <div class="ps-section">
-                <div class="ps-section-header">
-                    <h4 class="ps-section-title">Plex Library</h4>
-                    <span class="ps-connection-badge ${selectedLib ? 'connected' : 'disconnected'}">
-                        <span class="ps-connection-dot"></span>
-                        ${selectedLib ? 'Custom' : 'Default'}
-                    </span>
-                </div>
-                <div class="ps-help-text" style="margin-bottom:12px;">Choose which Plex music library your playlists sync to.</div>
-                <div class="ps-form-group">
-                    <label>Music Library</label>
-                    <select id="ps-plex-library-select">
-                        <option value="">Use admin default</option>
-                        ${optionsHtml}
-                    </select>
-                </div>
-                <div class="ps-actions">
-                    <button class="ps-btn ps-btn-primary" onclick="savePersonalServerLibrary()">Save</button>
-                </div>
-            </div>
-        `;
-    } else if (serverType === 'jellyfin') {
-        const selectedUser = currentLib.jellyfin_user_id || '';
-        const selectedLib = currentLib.jellyfin_library_id || '';
-
-        const userOpts = users.map(u => {
-            const uid = u.id || u.Id;
-            const uname = u.name || u.Name;
-            return `<option value="${escapeHtml(uid)}" ${uid === selectedUser ? 'selected' : ''}>${escapeHtml(uname)}</option>`;
-        }).join('');
-
-        const libOpts = libraries.map(lib => {
-            const lid = lib.key || lib.id || lib.Id;
-            const lname = lib.name || lib.Name || lib.title;
-            return `<option value="${escapeHtml(lid)}" ${lid === selectedLib ? 'selected' : ''}>${escapeHtml(lname)}</option>`;
-        }).join('');
-
-        section.innerHTML = `
-            <div class="ps-section">
-                <div class="ps-section-header">
-                    <h4 class="ps-section-title">Jellyfin</h4>
-                    <span class="ps-connection-badge ${selectedUser || selectedLib ? 'connected' : 'disconnected'}">
-                        <span class="ps-connection-dot"></span>
-                        ${selectedUser || selectedLib ? 'Custom' : 'Default'}
-                    </span>
-                </div>
-                <div class="ps-help-text" style="margin-bottom:12px;">Choose which Jellyfin user and library your playlists sync to.</div>
-                ${users.length ? `<div class="ps-form-group"><label>User</label><select id="ps-jellyfin-user-select"><option value="">Use admin default</option>${userOpts}</select></div>` : ''}
-                <div class="ps-form-group">
-                    <label>Music Library</label>
-                    <select id="ps-jellyfin-library-select">
-                        <option value="">Use admin default</option>
-                        ${libOpts}
-                    </select>
-                </div>
-                <div class="ps-actions">
-                    <button class="ps-btn ps-btn-primary" onclick="savePersonalServerLibrary()">Save</button>
-                </div>
-            </div>
-        `;
-    }
-
-    const existing = document.getElementById('ps-server-library-section');
-    if (existing) existing.replaceWith(section);
-    else container.appendChild(section);
-}
-
-async function savePersonalServerLibrary() {
-    try {
-        const plexSelect = document.getElementById('ps-plex-library-select');
-        const jellyUserSelect = document.getElementById('ps-jellyfin-user-select');
-        const jellyLibSelect = document.getElementById('ps-jellyfin-library-select');
-
-        if (plexSelect) {
-            await fetch('/api/profiles/me/server-library', {
-                method: 'POST', headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ server_type: 'plex', library_id: plexSelect.value || null })
-            });
-        }
-        if (jellyUserSelect || jellyLibSelect) {
-            await fetch('/api/profiles/me/server-library', {
-                method: 'POST', headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    server_type: 'jellyfin',
-                    user_id: jellyUserSelect?.value || null,
-                    library_id: jellyLibSelect?.value || null
-                })
-            });
-        }
-
-        showToast('Server library settings saved', 'success');
-    } catch (e) {
-        showToast('Error saving settings', 'error');
-    }
-}
-
-async function disconnectPersonalSpotify() {
-    try {
-        const res = await fetch('/api/profiles/me/spotify', { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Spotify credentials removed — using shared config', 'info');
-            openPersonalSettings(); // Reload
-        }
-    } catch (e) {
-        showToast('Error removing credentials', 'error');
-    }
-}
-
-function renderPersonalSettingsLB(data, container) {
-    const body = container || document.getElementById('personal-settings-body');
-    const connected = data.connected;
-    const username = data.username || '';
-    const baseUrl = data.base_url || '';
-    const source = data.source || 'global';
-
-    const tokenFormHtml = `
-        <div class="ps-form-group">
-            <label>User Token</label>
-            <input type="password" id="ps-lb-token" placeholder="Paste your ListenBrainz token">
-        </div>
-        <div class="ps-form-group">
-            <label>Server URL <span style="font-weight:400;color:rgba(255,255,255,0.3)">(optional)</span></label>
-            <input type="text" id="ps-lb-base-url" placeholder="Leave empty for official (api.listenbrainz.org)">
-            <div class="ps-help-text">
-                Get your token from <a href="https://listenbrainz.org/profile/" target="_blank">listenbrainz.org/profile</a>
-            </div>
-        </div>
-        <div id="ps-lb-result"></div>
-        <div class="ps-actions">
-            <button class="ps-btn ps-btn-secondary" onclick="testPersonalListenBrainz()">Test</button>
-            <button class="ps-btn ps-btn-primary" onclick="connectPersonalListenBrainz()">Connect</button>
-        </div>
-    `;
-
-    let contentHtml;
-    if (connected && source === 'profile') {
-        // Personal token — show connected state with Disconnect
-        const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
-        contentHtml = `
-            <div class="ps-connected-info">
-                <div class="ps-connected-icon">&#129504;</div>
-                <div class="ps-connected-details">
-                    <div class="ps-connected-username">Connected as ${escapeHtml(username)}</div>
-                    <div class="ps-connected-server">${escapeHtml(serverDisplay)}</div>
-                    <div class="ps-connected-source">Personal token</div>
-                </div>
-            </div>
-            <div class="ps-actions">
-                <button class="ps-btn ps-btn-danger" onclick="disconnectPersonalListenBrainz()">Disconnect</button>
-            </div>
-        `;
-    } else if (connected && source === 'global') {
-        // Using admin's shared token — show status + option to set own token
-        const serverDisplay = baseUrl ? baseUrl.replace(/\/1$/, '').replace(/^https?:\/\//, '') : 'api.listenbrainz.org';
-        contentHtml = `
-            <div class="ps-connected-info">
-                <div class="ps-connected-icon">&#129504;</div>
-                <div class="ps-connected-details">
-                    <div class="ps-connected-username">Connected as ${escapeHtml(username)}</div>
-                    <div class="ps-connected-server">${escapeHtml(serverDisplay)}</div>
-                    <div class="ps-connected-source">Using shared token from Settings</div>
-                </div>
-            </div>
-            <div style="margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.06);">
-                <div style="font-size:11px;color:rgba(255,255,255,0.45);margin-bottom:10px;">Set your own token to use a different ListenBrainz account:</div>
-                ${tokenFormHtml}
-            </div>
-        `;
-    } else {
-        // Not connected at all
-        contentHtml = tokenFormHtml;
-    }
-
-    const section = document.createElement('div');
-    section.id = 'ps-listenbrainz-section';
-    section.innerHTML = `
-        <div class="ps-section">
-            <div class="ps-section-header">
-                <h4 class="ps-section-title">ListenBrainz</h4>
-                <span class="ps-connection-badge ${connected ? 'connected' : 'disconnected'}">
-                    <span class="ps-connection-dot"></span>
-                    ${connected ? 'Connected' : 'Not connected'}
-                </span>
-            </div>
-            ${contentHtml}
-        </div>
-    `;
-    // Replace existing or append
-    const existing = document.getElementById('ps-listenbrainz-section');
-    if (existing) existing.replaceWith(section);
-    else body.appendChild(section);
-}
-
-async function testPersonalListenBrainz() {
-    const token = document.getElementById('ps-lb-token')?.value?.trim();
-    const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
-    const resultEl = document.getElementById('ps-lb-result');
-    if (!token) {
-        if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result error">Please enter a token</div>';
-        return;
-    }
-    if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result" style="color:rgba(255,255,255,0.5);">Testing...</div>';
-    try {
-        const res = await fetch('/api/profiles/me/listenbrainz/test', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token, base_url: baseUrl })
-        });
-        const data = await res.json();
-        if (data.success) {
-            resultEl.innerHTML = `<div class="ps-inline-result success">Valid token — ${escapeHtml(data.username)}</div>`;
-        } else {
-            resultEl.innerHTML = `<div class="ps-inline-result error">${escapeHtml(data.error || 'Invalid token')}</div>`;
-        }
-    } catch (e) {
-        resultEl.innerHTML = '<div class="ps-inline-result error">Connection failed</div>';
-    }
-}
-
-async function connectPersonalListenBrainz() {
-    const token = document.getElementById('ps-lb-token')?.value?.trim();
-    const baseUrl = document.getElementById('ps-lb-base-url')?.value?.trim() || '';
-    const resultEl = document.getElementById('ps-lb-result');
-    if (!token) {
-        if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result error">Please enter a token</div>';
-        return;
-    }
-    // Disable buttons during connect
-    document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = true);
-    if (resultEl) resultEl.innerHTML = '<div class="ps-inline-result" style="color:rgba(255,255,255,0.5);">Connecting...</div>';
-    try {
-        const res = await fetch('/api/profiles/me/listenbrainz', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token, base_url: baseUrl })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Connected to ListenBrainz as ${data.username}`, 'success');
-            // Re-render as connected
-            renderPersonalSettingsLB({ connected: true, username: data.username, base_url: baseUrl, source: 'profile' });
-            // Refresh LB playlists on discover page
-            _invalidateListenBrainzCache();
-            if (typeof initializeListenBrainzTabs === 'function') {
-                initializeListenBrainzTabs();
-            }
-        } else {
-            resultEl.innerHTML = `<div class="ps-inline-result error">${escapeHtml(data.error || 'Connection failed')}</div>`;
-            document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
-        }
-    } catch (e) {
-        resultEl.innerHTML = '<div class="ps-inline-result error">Connection failed</div>';
-        document.querySelectorAll('.ps-actions .ps-btn').forEach(b => b.disabled = false);
-    }
-}
-
-async function disconnectPersonalListenBrainz() {
-    try {
-        await fetch('/api/profiles/me/listenbrainz', { method: 'DELETE' });
-        showToast('ListenBrainz disconnected', 'info');
-        // Re-render as disconnected — re-fetch to check if global fallback exists
-        const res = await fetch('/api/profiles/me/listenbrainz');
-        const data = await res.json();
-        renderPersonalSettingsLB(data);
-        // Refresh LB playlists on discover page
-        _invalidateListenBrainzCache();
-        if (typeof initializeListenBrainzTabs === 'function') {
-            initializeListenBrainzTabs();
-        }
-    } catch (e) {
-        showToast('Failed to disconnect', 'error');
-    }
-}
-
-function _invalidateListenBrainzCache() {
-    if (typeof listenbrainzPlaylistsLoaded !== 'undefined') listenbrainzPlaylistsLoaded = false;
-    if (typeof listenbrainzPlaylistsCache !== 'undefined') {
-        try { Object.keys(listenbrainzPlaylistsCache).forEach(k => delete listenbrainzPlaylistsCache[k]); } catch (e) { }
-    }
-    if (typeof listenbrainzTracksCache !== 'undefined') {
-        try { Object.keys(listenbrainzTracksCache).forEach(k => delete listenbrainzTracksCache[k]); } catch (e) { }
-    }
-}
-
-function initProfileManagement() {
-    const manageBtn = document.getElementById('manage-profiles-btn');
-    const closeBtn = document.getElementById('profile-manage-close');
-    const createBtn = document.getElementById('create-profile-btn');
-    const adminPinBtn = document.getElementById('set-admin-pin-btn');
-
-    if (manageBtn) {
-        manageBtn.onclick = () => {
-            document.getElementById('profile-manage-panel').style.display = 'flex';
-            loadProfileManageList();
-        };
-    }
-
-    if (closeBtn) {
-        closeBtn.onclick = () => {
-            document.getElementById('profile-manage-panel').style.display = 'none';
-            // Refresh picker — keep cancel button if user already has a profile selected
-            const hasCancel = !!currentProfile;
-            fetch('/api/profiles').then(r => r.json()).then(d => {
-                showProfilePicker(d.profiles || [], hasCancel);
-            });
-        };
-    }
-
-    // Color picker
-    let selectedColor = '#6366f1';
-    document.querySelectorAll('.profile-color-swatch').forEach(swatch => {
-        swatch.onclick = () => {
-            document.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
-            swatch.classList.add('selected');
-            selectedColor = swatch.dataset.color;
-        };
-    });
-    // Select first by default
-    const firstSwatch = document.querySelector('.profile-color-swatch');
-    if (firstSwatch) firstSwatch.classList.add('selected');
-
-    if (createBtn) {
-        createBtn.onclick = async () => {
-            const name = document.getElementById('new-profile-name').value.trim();
-            const avatarUrl = document.getElementById('new-profile-avatar-url').value.trim();
-            const pin = document.getElementById('new-profile-pin').value;
-            if (!name) return;
-
-            // Collect profile settings
-            const homePage = document.getElementById('new-profile-home-page').value || null;
-            const pageCheckboxes = document.querySelectorAll('#new-profile-allowed-pages input[type="checkbox"]:not(:disabled)');
-            const allChecked = Array.from(pageCheckboxes).every(cb => cb.checked);
-            const allowedPages = allChecked ? null : Array.from(pageCheckboxes).filter(cb => cb.checked).map(cb => cb.value);
-            const canDl = document.getElementById('new-profile-can-download').checked;
-
-            const res = await fetch('/api/profiles', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    name, avatar_color: selectedColor,
-                    avatar_url: avatarUrl || undefined,
-                    pin: pin || undefined,
-                    home_page: homePage,
-                    allowed_pages: allowedPages,
-                    can_download: canDl
-                })
-            });
-            const data = await res.json();
-            if (data.success) {
-                document.getElementById('new-profile-name').value = '';
-                document.getElementById('new-profile-avatar-url').value = '';
-                document.getElementById('new-profile-pin').value = '';
-                document.getElementById('new-profile-home-page').value = '';
-                pageCheckboxes.forEach(cb => cb.checked = true);
-                document.getElementById('new-profile-can-download').checked = true;
-                loadProfileManageList();
-                // Show admin PIN section if >1 profiles and admin has no PIN
-                checkAdminPinRequired();
-            } else {
-                alert(data.error || 'Failed to create profile');
-            }
-        };
-    }
-
-    if (adminPinBtn) {
-        adminPinBtn.onclick = async () => {
-            const pin = document.getElementById('admin-pin-input').value;
-            if (!pin || pin.length < 1) return;
-            // Find admin profile
-            const res = await fetch('/api/profiles');
-            const data = await res.json();
-            const admin = (data.profiles || []).find(p => p.is_admin);
-            if (!admin) return;
-
-            try {
-                const pinRes = await fetch(`/api/profiles/${admin.id}/set-pin`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ pin })
-                });
-                const pinData = await pinRes.json();
-                if (!pinData.success) {
-                    alert(pinData.error || 'Failed to set PIN');
-                    return;
-                }
-            } catch (e) {
-                alert('Connection error');
-                return;
-            }
-            document.getElementById('admin-pin-input').value = '';
-            document.getElementById('admin-pin-section').style.display = 'none';
-            loadProfileManageList();
-        };
-    }
-}
-
-async function loadProfileManageList() {
-    const list = document.getElementById('profile-manage-list');
-    const res = await fetch('/api/profiles');
-    const data = await res.json();
-    const profiles = data.profiles || [];
-
-    list.innerHTML = '';
-    profiles.forEach(p => {
-        const item = document.createElement('div');
-        item.className = 'profile-manage-item';
-
-        const av = document.createElement('div');
-        renderProfileAvatar(av, p);
-        item.appendChild(av);
-
-        const info = document.createElement('div');
-        info.className = 'profile-info';
-        const nameDiv = document.createElement('div');
-        nameDiv.className = 'name';
-        nameDiv.textContent = p.name + (p.has_pin ? ' 🔒' : '');
-        info.appendChild(nameDiv);
-        const roleTags = [];
-        if (p.is_admin) roleTags.push('Admin');
-        if (p.can_download === false) roleTags.push('No Downloads');
-        if (p.allowed_pages) roleTags.push(`${p.allowed_pages.length} pages`);
-        if (roleTags.length) {
-            const roleDiv = document.createElement('div');
-            roleDiv.className = 'role';
-            roleDiv.textContent = roleTags.join(' · ');
-            info.appendChild(roleDiv);
-        }
-        item.appendChild(info);
-
-        const actions = document.createElement('div');
-        actions.className = 'profile-manage-actions';
-
-        const editBtn = document.createElement('button');
-        editBtn.className = 'profile-edit-btn';
-        editBtn.dataset.id = p.id;
-        editBtn.dataset.name = p.name;
-        editBtn.dataset.color = p.avatar_color || '#6366f1';
-        editBtn.dataset.avatarUrl = p.avatar_url || '';
-        editBtn.dataset.homePage = p.home_page || '';
-        editBtn.dataset.allowedPages = p.allowed_pages ? JSON.stringify(p.allowed_pages) : '';
-        editBtn.dataset.canDownload = p.can_download !== false ? '1' : '0';
-        editBtn.dataset.isAdmin = p.is_admin ? '1' : '0';
-        editBtn.title = 'Edit profile';
-        editBtn.textContent = '✏️';
-        actions.appendChild(editBtn);
-
-        if (!p.is_admin) {
-            const delBtn = document.createElement('button');
-            delBtn.className = 'profile-delete-btn';
-            delBtn.dataset.id = p.id;
-            delBtn.title = 'Delete profile';
-            delBtn.textContent = '🗑️';
-            actions.appendChild(delBtn);
-        }
-
-        item.appendChild(actions);
-        list.appendChild(item);
-    });
-
-    // Bind edit buttons
-    list.querySelectorAll('.profile-edit-btn').forEach(btn => {
-        btn.onclick = () => {
-            showProfileEditForm(btn.dataset.id, btn.dataset.name, btn.dataset.color, btn.dataset.avatarUrl, {
-                home_page: btn.dataset.homePage || '',
-                allowed_pages: btn.dataset.allowedPages ? JSON.parse(btn.dataset.allowedPages) : null,
-                can_download: btn.dataset.canDownload !== '0',
-                is_admin: btn.dataset.isAdmin === '1'
-            });
-        };
-    });
-
-    // Bind delete buttons
-    list.querySelectorAll('.profile-delete-btn').forEach(btn => {
-        btn.onclick = async () => {
-            if (!await showConfirmDialog({ title: 'Delete Profile', message: 'Delete this profile and all its data?', confirmText: 'Delete', destructive: true })) return;
-            try {
-                const res = await fetch(`/api/profiles/${btn.dataset.id}`, { method: 'DELETE' });
-                const data = await res.json();
-                if (!data.success) {
-                    alert(data.error || 'Failed to delete profile');
-                }
-            } catch (e) {
-                alert('Connection error');
-            }
-            loadProfileManageList();
-        };
-    });
-
-    checkAdminPinRequired();
-}
-
-function showProfileEditForm(profileId, currentName, currentColor, currentAvatarUrl, profileSettings = {}) {
-    const list = document.getElementById('profile-manage-list');
-    // Remove any existing edit form
-    const existing = document.getElementById('profile-edit-form');
-    if (existing) existing.remove();
-
-    const isAdmin = currentProfile && currentProfile.is_admin;
-    const isEditingAdmin = profileSettings.is_admin;
-    const editColors = ['#6366f1', '#ec4899', '#10b981', '#f59e0b', '#3b82f6', '#ef4444', '#8b5cf6', '#14b8a6'];
-    const pageLabels = {
-        dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
-        artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
-        'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
-    };
-
-    const form = document.createElement('div');
-    form.id = 'profile-edit-form';
-    form.className = 'profile-edit-form';
-
-    const nameInput = document.createElement('input');
-    nameInput.type = 'text';
-    nameInput.className = 'profile-input';
-    nameInput.value = currentName;
-    nameInput.maxLength = 20;
-    nameInput.placeholder = 'Profile name';
-    form.appendChild(nameInput);
-
-    const urlInput = document.createElement('input');
-    urlInput.type = 'url';
-    urlInput.className = 'profile-input';
-    urlInput.value = currentAvatarUrl || '';
-    urlInput.placeholder = 'Avatar image URL (optional)';
-    form.appendChild(urlInput);
-
-    const colorRow = document.createElement('div');
-    colorRow.className = 'profile-color-picker';
-    let editColor = currentColor;
-    editColors.forEach(c => {
-        const swatch = document.createElement('span');
-        swatch.className = 'profile-color-swatch' + (c === currentColor ? ' selected' : '');
-        swatch.style.background = c;
-        swatch.dataset.color = c;
-        swatch.onclick = () => {
-            colorRow.querySelectorAll('.profile-color-swatch').forEach(s => s.classList.remove('selected'));
-            swatch.classList.add('selected');
-            editColor = c;
-        };
-        colorRow.appendChild(swatch);
-    });
-    form.appendChild(colorRow);
-
-    // Home page selector — visible to everyone (self-edit or admin editing others)
-    const homeLabel = document.createElement('label');
-    homeLabel.className = 'profile-settings-label';
-    homeLabel.textContent = 'Home Page';
-    form.appendChild(homeLabel);
-
-    const homeSelect = document.createElement('select');
-    homeSelect.className = 'profile-input';
-    const defaultOpt = document.createElement('option');
-    defaultOpt.value = '';
-    defaultOpt.textContent = isEditingAdmin ? 'Default (Dashboard)' : 'Default (Discover)';
-    homeSelect.appendChild(defaultOpt);
-    // Filter home page options to only allowed pages
-    const allowedSet = profileSettings.allowed_pages;
-    Object.entries(pageLabels).forEach(([id, label]) => {
-        if (allowedSet && !allowedSet.includes(id)) return; // Skip non-permitted
-        const opt = document.createElement('option');
-        opt.value = id;
-        opt.textContent = label;
-        if (id === profileSettings.home_page) opt.selected = true;
-        homeSelect.appendChild(opt);
-    });
-    form.appendChild(homeSelect);
-
-    // Admin-only settings: allowed pages & can_download
-    let pageCheckboxes = [];
-    let canDlCheckbox = null;
-    if (isAdmin && !isEditingAdmin) {
-        const apLabel = document.createElement('label');
-        apLabel.className = 'profile-settings-label';
-        apLabel.textContent = 'Page Access';
-        form.appendChild(apLabel);
-
-        const apContainer = document.createElement('div');
-        apContainer.className = 'profile-page-checkboxes';
-        Object.entries(pageLabels).forEach(([id, label]) => {
-            const lbl = document.createElement('label');
-            const cb = document.createElement('input');
-            cb.type = 'checkbox';
-            cb.value = id;
-            cb.checked = !allowedSet || allowedSet.includes(id);
-            lbl.appendChild(cb);
-            lbl.appendChild(document.createTextNode(' ' + label));
-            apContainer.appendChild(lbl);
-            pageCheckboxes.push(cb);
-        });
-        // Always-on help
-        const helpLbl = document.createElement('label');
-        const helpCb = document.createElement('input');
-        helpCb.type = 'checkbox';
-        helpCb.checked = true;
-        helpCb.disabled = true;
-        helpLbl.appendChild(helpCb);
-        helpLbl.appendChild(document.createTextNode(' Help & Docs'));
-        apContainer.appendChild(helpLbl);
-        form.appendChild(apContainer);
-
-        const dlLabel = document.createElement('label');
-        dlLabel.className = 'profile-checkbox-label';
-        canDlCheckbox = document.createElement('input');
-        canDlCheckbox.type = 'checkbox';
-        canDlCheckbox.checked = profileSettings.can_download !== false;
-        dlLabel.appendChild(canDlCheckbox);
-        dlLabel.appendChild(document.createTextNode(' Can download music'));
-        form.appendChild(dlLabel);
-    }
-
-    const btnRow = document.createElement('div');
-    btnRow.className = 'profile-edit-buttons';
-
-    const saveBtn = document.createElement('button');
-    saveBtn.className = 'profile-create-btn';
-    saveBtn.textContent = 'Save';
-    saveBtn.onclick = async () => {
-        const newName = nameInput.value.trim();
-        if (!newName) { alert('Name cannot be empty'); return; }
-        const newAvatarUrl = urlInput.value.trim() || null;
-        const payload = { name: newName, avatar_color: editColor, avatar_url: newAvatarUrl };
-
-        // Home page
-        payload.home_page = homeSelect.value || null;
-
-        // Admin-only fields
-        if (isAdmin && !isEditingAdmin && pageCheckboxes.length) {
-            const allChecked = pageCheckboxes.every(cb => cb.checked);
-            payload.allowed_pages = allChecked ? null : pageCheckboxes.filter(cb => cb.checked).map(cb => cb.value);
-            payload.can_download = canDlCheckbox ? canDlCheckbox.checked : true;
-        }
-
-        try {
-            const res = await fetch(`/api/profiles/${profileId}`, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            });
-            const data = await res.json();
-            if (data.success) {
-                // Update sidebar indicator if editing current profile
-                if (currentProfile && currentProfile.id == profileId) {
-                    currentProfile.name = newName;
-                    currentProfile.avatar_color = editColor;
-                    currentProfile.avatar_url = newAvatarUrl;
-                    if (payload.home_page !== undefined) currentProfile.home_page = payload.home_page;
-                    if (payload.allowed_pages !== undefined) currentProfile.allowed_pages = payload.allowed_pages;
-                    if (payload.can_download !== undefined) currentProfile.can_download = payload.can_download;
-                    updateProfileIndicator();
-                }
-                loadProfileManageList();
-            } else {
-                alert(data.error || 'Failed to update profile');
-            }
-        } catch (e) {
-            alert('Connection error');
-        }
-    };
-    btnRow.appendChild(saveBtn);
-
-    const cancelBtn = document.createElement('button');
-    cancelBtn.className = 'profile-picker-cancel';
-    cancelBtn.textContent = 'Cancel';
-    cancelBtn.onclick = () => form.remove();
-    btnRow.appendChild(cancelBtn);
-
-    form.appendChild(btnRow);
-    list.appendChild(form);
-    nameInput.focus();
-    nameInput.select();
-}
-
-function showSelfEditForm() {
-    if (!currentProfile) return;
-    const overlay = document.getElementById('profile-picker-overlay');
-    const container = overlay.querySelector('.profile-picker-container');
-
-    // Hide the picker grid and show self-edit form
-    const grid = document.getElementById('profile-picker-grid');
-    const actions = document.getElementById('profile-picker-actions');
-    grid.style.display = 'none';
-    actions.style.display = 'none';
-
-    // Remove any existing self-edit form
-    const existing = document.getElementById('self-edit-form');
-    if (existing) existing.remove();
-
-    const pageLabels = {
-        dashboard: 'Dashboard', sync: 'Sync', downloads: 'Search', discover: 'Discover',
-        artists: 'Artists', automations: 'Automations', library: 'Library', stats: 'Listening Stats',
-        'playlist-explorer': 'Playlist Explorer', import: 'Import', help: 'Help & Docs'
-    };
-
-    const form = document.createElement('div');
-    form.id = 'self-edit-form';
-    form.className = 'profile-edit-form';
-    form.style.marginTop = '16px';
-
-    const title = document.createElement('h3');
-    title.textContent = 'My Profile';
-    title.style.cssText = 'color: #fff; margin: 0 0 12px; font-size: 18px;';
-    form.appendChild(title);
-
-    // Name
-    const nameInput = document.createElement('input');
-    nameInput.type = 'text';
-    nameInput.className = 'profile-input';
-    nameInput.value = currentProfile.name;
-    nameInput.maxLength = 20;
-    nameInput.placeholder = 'Profile name';
-    form.appendChild(nameInput);
-
-    // Home page
-    const homeLabel = document.createElement('label');
-    homeLabel.className = 'profile-settings-label';
-    homeLabel.textContent = 'Home Page';
-    form.appendChild(homeLabel);
-
-    const homeSelect = document.createElement('select');
-    homeSelect.className = 'profile-input';
-    const defaultOpt = document.createElement('option');
-    defaultOpt.value = '';
-    defaultOpt.textContent = 'Default (Discover)';
-    homeSelect.appendChild(defaultOpt);
-    const ap = currentProfile.allowed_pages;
-    Object.entries(pageLabels).forEach(([id, label]) => {
-        if (ap && !ap.includes(id)) return;
-        const opt = document.createElement('option');
-        opt.value = id;
-        opt.textContent = label;
-        if (id === currentProfile.home_page) opt.selected = true;
-        homeSelect.appendChild(opt);
-    });
-    form.appendChild(homeSelect);
-
-    // Buttons
-    const btnRow = document.createElement('div');
-    btnRow.className = 'profile-edit-buttons';
-    btnRow.style.marginTop = '12px';
-
-    const saveBtn = document.createElement('button');
-    saveBtn.className = 'profile-create-btn';
-    saveBtn.textContent = 'Save';
-    saveBtn.onclick = async () => {
-        const newName = nameInput.value.trim();
-        if (!newName) { alert('Name cannot be empty'); return; }
-        try {
-            const res = await fetch(`/api/profiles/${currentProfile.id}`, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ name: newName, home_page: homeSelect.value || null })
-            });
-            const data = await res.json();
-            if (data.success) {
-                currentProfile.name = newName;
-                currentProfile.home_page = homeSelect.value || null;
-                updateProfileIndicator();
-                closeSelfEdit();
-                hideProfilePicker();
-            } else {
-                alert(data.error || 'Failed to update');
-            }
-        } catch (e) {
-            alert('Connection error');
-        }
-    };
-    btnRow.appendChild(saveBtn);
-
-    const cancelBtn = document.createElement('button');
-    cancelBtn.className = 'profile-picker-cancel';
-    cancelBtn.textContent = 'Cancel';
-    cancelBtn.onclick = () => closeSelfEdit();
-    btnRow.appendChild(cancelBtn);
-
-    form.appendChild(btnRow);
-    container.appendChild(form);
-
-    function closeSelfEdit() {
-        form.remove();
-        grid.style.display = '';
-        actions.style.display = '';
-    }
-}
-
-async function checkAdminPinRequired() {
-    const res = await fetch('/api/profiles');
-    const data = await res.json();
-    const profiles = data.profiles || [];
-    const admin = profiles.find(p => p.is_admin);
-    const section = document.getElementById('admin-pin-section');
-
-    if (profiles.length > 1 && admin && !admin.has_pin && section) {
-        section.style.display = '';
-    } else if (section) {
-        section.style.display = 'none';
-    }
-}
-
-document.addEventListener('DOMContentLoaded', async function () {
-    console.log('SoulSync WebUI initializing...');
-
-    // Check if first-run setup wizard should be shown
-    const params = new URLSearchParams(window.location.search);
-    const forceSetup = params.get('setup') === '1';
-    let showWizard = forceSetup;
-
-    if (!forceSetup) {
-        try {
-            const setupResp = await fetch('/api/setup/status');
-            const setupData = await setupResp.json();
-            if (!setupData.setup_complete) {
-                showWizard = true;
-                localStorage.removeItem('soulsync_setup_complete');
-            }
-        } catch (e) {
-            console.warn('Setup status check failed, continuing normal init:', e);
-        }
-    }
-
-    if (showWizard && typeof openSetupWizard === 'function') {
-        window._onSetupWizardComplete = function () {
-            _continueAppInit();
-        };
-        openSetupWizard();
-        return; // Defer init until wizard closes
-    }
-
-    _continueAppInit();
-});
-
-async function _continueAppInit() {
-    // Initialize profile management UI handlers
-    initProfileManagement();
-
-    // Check profiles first — may show picker instead of app
-    const profileReady = await initProfileSystem();
-    if (!profileReady) {
-        console.log('Waiting for profile selection...');
-        return; // App init deferred until profile is selected via picker
-    }
-
-    initApp();
-}
-
-function initApp() {
-    // Initialize components
-    initializeNavigation();
-    initializeMobileNavigation();
-    initializeMediaPlayer();
-    initExpandedPlayer();
-    initializeSyncPage();
-    initializeWatchlist();
-    initializeDownloadManagerToggle();
-
-
-    // Initialize WebSocket connection (falls back to HTTP polling if unavailable)
-    initializeWebSocket();
-
-    // Start global service status polling for sidebar (works on all pages)
-    // Initial fetch for immediate data, then setInterval as fallback when WebSocket is disconnected
-    fetchAndUpdateServiceStatus();
-    setInterval(fetchAndUpdateServiceStatus, 5000); // Every 5 seconds (no-op when WebSocket active)
-
-    // Check for updates on load and every hour
-    checkForUpdates();
-    setInterval(checkForUpdates, 3600000);
-
-    // Refresh key data immediately when user returns to this tab
-    document.addEventListener('visibilitychange', () => {
-        if (!document.hidden) {
-            fetchAndUpdateServiceStatus();
-            // Refresh dashboard-specific data if on dashboard
-            const dashboardPage = document.getElementById('dashboard-page');
-            if (dashboardPage && dashboardPage.classList.contains('active')) {
-                fetchAndUpdateSystemStats();
-                fetchAndUpdateActivityFeed();
-            }
-        }
-    });
-
-    // Start always-on download polling (batched, minimal overhead)
-    startGlobalDownloadPolling();
-
-    // Load issues badge count
-    loadIssuesBadge();
-
-    // Load initial data
-    loadInitialData();
-
-    // Handle window resize to re-check track title scrolling
-    window.addEventListener('resize', function () {
-        if (currentTrack) {
-            const trackTitleElement = document.getElementById('track-title');
-            const trackTitle = currentTrack.title || 'Unknown Track';
-            setTimeout(() => {
-                checkAndEnableScrolling(trackTitleElement, trackTitle);
-            }, 100); // Small delay to allow layout to settle
-        }
-    });
-
-    console.log('SoulSync WebUI initialized successfully!');
-}
-
-// ===============================
-// NAVIGATION SYSTEM
-// ===============================
-
-function initializeNavigation() {
-    const navButtons = document.querySelectorAll('.nav-button');
-
-    navButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const page = button.getAttribute('data-page');
-            navigateToPage(page);
-        });
-    });
-
-    window.addEventListener('popstate', (event) => {
-        const page = (event.state && event.state.page) || _getPageFromPath();
-        if (page && page !== currentPage) {
-            navigateToPage(page, { skipPushState: true });
-        }
-    });
-}
-
-const _DEEPLINK_VALID_PAGES = new Set([
-    'dashboard', 'sync', 'downloads', 'discover', 'artists', 'automations',
-    'library', 'import', 'settings', 'help', 'issues', 'stats', 'watchlist',
-    'wishlist', 'active-downloads', 'artist-detail', 'playlist-explorer',
-    'hydrabase', 'tools'
-]);
-
-function _getPageFromPath() {
-    const path = window.location.pathname.replace(/^\/+|\/+$/g, '');
-    if (!path) return 'dashboard';
-    const basePage = path.split('/')[0];
-    if (!_DEEPLINK_VALID_PAGES.has(basePage)) return 'dashboard';
-    // Context-dependent pages fall back to a sensible parent
-    if (basePage === 'artist-detail') return 'artists';
-    if (basePage === 'playlist-explorer') return 'library';
-    return basePage;
-}
-
-// ===============================
-// MOBILE NAVIGATION
-// ===============================
-
-function initializeMobileNavigation() {
-    const hamburgerBtn = document.getElementById('hamburger-btn');
-    const sidebar = document.querySelector('.sidebar');
-    const overlay = document.getElementById('mobile-overlay');
-
-    if (!hamburgerBtn || !sidebar || !overlay) return;
-
-    function openMobileNav() {
-        sidebar.classList.add('mobile-open');
-        hamburgerBtn.classList.add('active');
-        overlay.classList.add('active');
-        document.body.classList.add('mobile-nav-open');
-    }
-
-    function closeMobileNav() {
-        sidebar.classList.remove('mobile-open');
-        hamburgerBtn.classList.remove('active');
-        overlay.classList.remove('active');
-        document.body.classList.remove('mobile-nav-open');
-    }
-
-    hamburgerBtn.addEventListener('click', () => {
-        if (sidebar.classList.contains('mobile-open')) {
-            closeMobileNav();
-        } else {
-            openMobileNav();
-        }
-    });
-
-    overlay.addEventListener('click', closeMobileNav);
-
-    // Close sidebar on nav button click (mobile only)
-    document.querySelectorAll('.nav-button').forEach(btn => {
-        btn.addEventListener('click', () => {
-            if (window.innerWidth <= 768) {
-                closeMobileNav();
-            }
-        });
-    });
-}
-
-function initializeWatchlist() {
-    // Watchlist button navigates to watchlist page
-    const watchlistButton = document.getElementById('watchlist-button');
-    if (watchlistButton) {
-        watchlistButton.addEventListener('click', () => navigateToPage('watchlist'));
-    }
-
-    // Wishlist button: quick check for active download, otherwise navigate to page
-    const wishlistButton = document.getElementById('wishlist-button');
-    if (wishlistButton) {
-        wishlistButton.addEventListener('click', async () => {
-            // Fast path: check if we already know about an active wishlist process
-            const clientProcess = activeDownloadProcesses['wishlist'];
-            if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
-                clientProcess.modalElement.style.display = 'flex';
-                WishlistModalState.setVisible();
-                return;
-            }
-            // Slow path: ask the server (with timeout to prevent button feeling dead)
-            try {
-                const controller = new AbortController();
-                const timeout = setTimeout(() => controller.abort(), 2000);
-                const resp = await fetch('/api/active-processes', { signal: controller.signal });
-                clearTimeout(timeout);
-                if (resp.ok) {
-                    const data = await resp.json();
-                    const serverProcess = (data.active_processes || []).find(p => p.playlist_id === 'wishlist');
-                    if (serverProcess) {
-                        try {
-                            WishlistModalState.clearUserClosed();
-                            await rehydrateModal(serverProcess, true);
-                        } catch (e) {
-                            console.debug('Rehydration failed, navigating to page:', e);
-                            navigateToPage('wishlist');
-                        }
-                        return;
-                    }
-                }
-            } catch (e) {
-                // Timeout or network error — just navigate
-            }
-            navigateToPage('wishlist');
-        });
-    }
-
-    // Update watchlist count initially
-    updateWatchlistButtonCount();
-
-    // Update count every 10 seconds
-    setInterval(updateWatchlistButtonCount, 10000);
-
-    console.log('Watchlist system initialized');
-}
-
-function initializeDownloadManagerToggle() {
-    const toggleButton = document.getElementById('toggle-download-manager-btn');
-    const downloadsContent = document.querySelector('.downloads-content');
-
-    if (!toggleButton || !downloadsContent) {
-        console.log('Download manager toggle not found on this page');
-        return;
-    }
-
-    // Load saved state from localStorage (hidden by default for more search space)
-    const isHidden = localStorage.getItem('downloadManagerHidden') !== 'false';
-    if (isHidden) {
-        downloadsContent.classList.add('manager-hidden');
-    }
-
-    // Add click handler
-    toggleButton.addEventListener('click', () => {
-        const isCurrentlyHidden = downloadsContent.classList.contains('manager-hidden');
-
-        if (isCurrentlyHidden) {
-            downloadsContent.classList.remove('manager-hidden');
-            localStorage.setItem('downloadManagerHidden', 'false');
-        } else {
-            downloadsContent.classList.add('manager-hidden');
-            localStorage.setItem('downloadManagerHidden', 'true');
-        }
-    });
-
-    console.log('Download manager toggle initialized');
-}
-
-function navigateToPage(pageId, options = {}) {
-    if (pageId === currentPage) return;
-
-    // Permission guard — redirect to home page if not allowed
-    if (!isPageAllowed(pageId)) {
-        const home = getProfileHomePage();
-        if (home !== currentPage && isPageAllowed(home)) {
-            navigateToPage(home);
-        }
-        return;
-    }
-
-    // Update navigation buttons (only if there's a nav button for this page)
-    document.querySelectorAll('.nav-button').forEach(btn => {
-        btn.classList.remove('active');
-    });
-
-    // Handle artist-detail page specially - it should highlight the 'library' nav button
-    const navPageId = pageId === 'artist-detail' ? 'library' : pageId;
-    const navButton = document.querySelector(`[data-page="${navPageId}"]`);
-    if (navButton) {
-        navButton.classList.add('active');
-    }
-
-    // Update pages
-    document.querySelectorAll('.page').forEach(page => {
-        page.classList.remove('active');
-    });
-    document.getElementById(`${pageId}-page`).classList.add('active');
-
-    currentPage = pageId;
-
-    if (!options.skipPushState) {
-        const urlPath = pageId === 'dashboard' ? '/' : '/' + pageId;
-        if (window.location.pathname !== urlPath) {
-            history.pushState({ page: pageId }, '', urlPath);
-        }
-    }
-
-    // Show/hide global search bar (hide on downloads page where enhanced search exists)
-    if (typeof _gsUpdateVisibility === 'function') _gsUpdateVisibility();
-
-    // Show/hide discover download sidebar based on page
-    const downloadSidebar = document.getElementById('discover-download-sidebar');
-    if (downloadSidebar) {
-        if (pageId === 'discover') {
-            // Show sidebar on discover page if there are active downloads
-            const activeDownloads = Object.keys(discoverDownloads || {}).length;
-            console.log(`📊 [NAVIGATE] Discover page - ${activeDownloads} active downloads`);
-            if (activeDownloads > 0) {
-                // Update the sidebar UI to render the bubbles
-                console.log(`🔄 [NAVIGATE] Updating discover download bar UI`);
-                updateDiscoverDownloadBar();
-            }
-        } else {
-            // Always hide sidebar on other pages
-            downloadSidebar.classList.add('hidden');
-        }
-    }
-
-    // Load page-specific data
-    loadPageData(pageId);
-
-    // Update page background particles
-    if (window.pageParticles && window._particlesEnabled !== false) window.pageParticles.setPage(pageId);
-
-    // Update worker orbs
-    if (window.workerOrbs) window.workerOrbs.setPage(pageId);
-}
-
-// REPLACE your old loadPageData function with this one:
-// REPLACE your old loadPageData function with this corrected one
-
-async function loadPageData(pageId) {
-    try {
-        // Stop any active polling when navigating away
-        stopDbStatsPolling();
-        stopDbUpdatePolling();
-        stopWishlistCountPolling();
-        stopLogPolling();
-        // Stop watchlist/wishlist page timers when navigating away
-        if (watchlistCountdownInterval) { clearInterval(watchlistCountdownInterval); watchlistCountdownInterval = null; }
-        if (wishlistCountdownInterval) { clearInterval(wishlistCountdownInterval); wishlistCountdownInterval = null; }
-        if (typeof _stopNebulaLivePolling === 'function') _stopNebulaLivePolling();
-        if (pageId !== 'sync') {
-            cleanupBeatportContent();
-        }
-        switch (pageId) {
-            case 'dashboard':
-                await loadDashboardData();
-                loadDashboardSyncHistory();
-                break;
-            case 'sync':
-                initializeSyncPage();
-                await loadSyncData();
-                break;
-            case 'downloads':
-                initializeSearch();
-                initializeSearchModeToggle();
-                initializeFilters();
-                await loadDownloadsData();
-                break;
-            case 'artists':
-                // Only fully initialize if not already initialized
-                if (!artistsPageState.isInitialized) {
-                    initializeArtistsPage();
-                } else {
-                    // Just restore state if already initialized
-                    restoreArtistsPageState();
-                }
-                break;
-            case 'active-downloads':
-                loadActiveDownloadsPage();
-                break;
-            case 'library':
-                // Check if we should return to artist detail view instead of list
-                if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
-                    navigateToPage('artist-detail');
-                    if (!artistDetailPageState.isInitialized) {
-                        initializeArtistDetailPage();
-                        loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
-                    }
-                    // Already initialized — DOM content persists, no reload needed
-                } else {
-                    if (!libraryPageState.isInitialized) {
-                        initializeLibraryPage();
-                    }
-                    // Already initialized — DOM content persists, no reload needed
-                }
-                break;
-            case 'artist-detail':
-                // Artist detail page is handled separately by navigateToArtistDetail()
-                break;
-            case 'discover':
-                if (!discoverPageInitialized) {
-                    await loadDiscoverPage();
-                    discoverPageInitialized = true;
-                }
-                // Already initialized — DOM content persists, no reload needed
-                break;
-            case 'playlist-explorer':
-                initExplorer();
-                break;
-            case 'settings':
-                initializeSettings();
-                switchSettingsTab('connections');
-                await loadSettingsData();
-                await loadQualityProfile();
-                loadApiKeys();
-                loadBlacklistCount();
-                break;
-            case 'stats':
-                initializeStatsPage();
-                break;
-            case 'import':
-                initializeImportPage();
-                break;
-            case 'hydrabase':
-                // Check connection status and pre-fill saved credentials
-                try {
-                    const hsResp = await fetch('/api/hydrabase/status');
-                    const hsData = await hsResp.json();
-                    _hydrabaseConnected = hsData.connected;
-                    document.getElementById('hydra-connection-status').textContent = hsData.connected ? 'Connected' : 'Disconnected';
-                    document.getElementById('hydra-connection-status').style.color = hsData.connected ? 'rgb(var(--accent-light-rgb))' : '#888';
-                    document.getElementById('hydra-connect-btn').textContent = hsData.connected ? 'Disconnect' : 'Connect';
-                    // Pre-fill saved credentials
-                    if (hsData.saved_url) {
-                        document.getElementById('hydra-ws-url').value = hsData.saved_url;
-                    }
-                    if (hsData.saved_api_key) {
-                        document.getElementById('hydra-api-key').value = hsData.saved_api_key;
-                    }
-                    // Update peer count
-                    if (hsData.peer_count !== null && hsData.peer_count !== undefined) {
-                        document.getElementById('hydra-peer-count').textContent = `Peers: ${hsData.peer_count}`;
-                    }
-                } catch (e) { }
-                // Load comparisons
-                loadHydrabaseComparisons();
-                break;
-            case 'tools':
-                await initializeToolsPage();
-                break;
-            case 'watchlist':
-                await initializeWatchlistPage();
-                break;
-            case 'wishlist':
-                await initializeWishlistPage();
-                break;
-            case 'automations':
-                await loadAutomations();
-                break;
-            case 'issues':
-                await loadIssuesPage();
-                break;
-            case 'help':
-                initializeDocsPage();
-                break;
-        }
-    } catch (error) {
-        console.error(`Error loading ${pageId} data:`, error);
-        showToast(`Failed to load ${pageId} data`, 'error');
-    }
-}
-
-// ===============================
-// SERVICE STATUS MONITORING
-// ===============================
-
-// Legacy function - now handled by fetchAndUpdateServiceStatus
-// Keeping this for compatibility but it's no longer actively used
-
-// Old updateStatusIndicator function removed - replaced by updateSidebarServiceStatus
-
-// ===============================
-// MEDIA PLAYER FUNCTIONALITY
-// ===============================
-
-function initializeMediaPlayer() {
-    const trackTitle = document.getElementById('track-title');
-    const playButton = document.getElementById('play-button');
-    const stopButton = document.getElementById('stop-button');
-    const volumeSlider = document.getElementById('volume-slider');
-
-    // Start in idle state (no track playing)
-    const player = document.getElementById('media-player');
-    if (player && !currentTrack) player.classList.add('idle');
-
-    // Initialize HTML5 audio player
-    audioPlayer = document.getElementById('audio-player');
-    if (audioPlayer) {
-        // Set up audio event listeners
-        audioPlayer.addEventListener('timeupdate', updateAudioProgress);
-        audioPlayer.addEventListener('ended', onAudioEnded);
-        audioPlayer.addEventListener('error', onAudioError);
-        audioPlayer.addEventListener('loadstart', onAudioLoadStart);
-        audioPlayer.addEventListener('canplay', onAudioCanPlay);
-
-        // Set initial volume
-        audioPlayer.volume = 0.7; // 70%
-        if (volumeSlider) volumeSlider.value = 70;
-    }
-
-    // Track title click handled by initExpandedPlayer's media-player click handler
-
-    // Media controls
-    playButton.addEventListener('click', handlePlayPause);
-    stopButton.addEventListener('click', handleStop);
-    if (volumeSlider) volumeSlider.addEventListener('input', handleVolumeChange);
-
-    // Progress bar controls
-    const progressBar = document.getElementById('progress-bar');
-    if (progressBar) {
-        // Handle seeking
-        progressBar.addEventListener('input', handleProgressBarChange);
-        progressBar.addEventListener('mousedown', () => {
-            progressBar.dataset.seeking = 'true';
-        });
-        progressBar.addEventListener('mouseup', () => {
-            delete progressBar.dataset.seeking;
-        });
-    }
-
-    // Update volume slider styling
-    if (volumeSlider) volumeSlider.addEventListener('input', updateVolumeSliderAppearance);
-
-    // Mini player prev / next buttons
-    const miniPrevBtn = document.getElementById('mini-prev-btn');
-    const miniNextBtn = document.getElementById('mini-next-btn');
-    if (miniPrevBtn) miniPrevBtn.addEventListener('click', (e) => { e.stopPropagation(); playPreviousInQueue(); });
-    if (miniNextBtn) miniNextBtn.addEventListener('click', (e) => { e.stopPropagation(); playNextInQueue(); });
-}
-
-function toggleMediaPlayerExpansion() {
-    // No-op: controls are always visible in the new layout.
-    // Kept for backward compatibility with any callers.
-}
-
-function extractTrackTitle(filename) {
-    if (!filename) return null;
-
-    // Remove file extension
-    let title = filename.replace(/\.[^/.]+$/, '');
-
-    // Remove path components, keep only the filename
-    title = title.split('/').pop().split('\\').pop();
-
-    // Clean up common filename patterns
-    title = title
-        .replace(/^\d+\.?\s*/, '') // Remove track numbers at start
-        .replace(/^\d+\s*-\s*/, '') // Remove "01 - " patterns
-        .replace(/\s*-\s*\d{4}\s*$/, '') // Remove years at end
-        .replace(/\s*\[\d+kbps\].*$/, '') // Remove bitrate info
-        .replace(/\s*\(.*?\)\s*$/, '') // Remove parenthetical info at end
-        .trim();
-
-    return title || null;
-}
-
-function setTrackInfo(track) {
-    currentTrack = track;
-
-    const trackTitleElement = document.getElementById('track-title');
-    const trackTitle = track.title || 'Unknown Track';
-
-    // Set up the HTML structure for scrolling
-    trackTitleElement.innerHTML = `<span class="title-text">${escapeHtml(trackTitle)}</span>`;
-
-    document.getElementById('artist-name').textContent = track.artist || 'Unknown Artist';
-    document.getElementById('album-name').textContent = track.album || 'Unknown Album';
-
-    // Check if title needs scrolling (similar to GUI app)
-    setTimeout(() => {
-        checkAndEnableScrolling(trackTitleElement, trackTitle);
-    }, 100); // Allow DOM to settle
-
-    // Enable controls
-    document.getElementById('play-button').disabled = false;
-    document.getElementById('stop-button').disabled = false;
-
-    // Hide no track message and expand player
-    document.getElementById('no-track-message').classList.add('hidden');
-    document.getElementById('media-player').classList.remove('idle');
-
-    // Sync expanded player and media session
-    updateNpTrackInfo();
-    updateMediaSessionMetadata();
-    updateMediaSessionPlaybackState();
-}
-
-function checkAndEnableScrolling(element, text) {
-    // Remove any existing scrolling class and reset styles
-    element.classList.remove('scrolling');
-    element.style.removeProperty('--scroll-distance');
-
-    // Force a layout to get accurate measurements
-    element.offsetWidth;
-
-    // Get the inner text element
-    const titleTextElement = element.querySelector('.title-text');
-    if (!titleTextElement) return;
-
-    // Check if text is wider than container
-    const containerWidth = element.offsetWidth;
-    const textWidth = titleTextElement.scrollWidth;
-
-    // Enable scrolling if text is significantly wider than container
-    if (textWidth > containerWidth + 15) {
-        const scrollDistance = containerWidth - textWidth;
-        element.style.setProperty('--scroll-distance', `${scrollDistance}px`);
-        element.classList.add('scrolling');
-        console.log(`📜 Enabled scrolling for title: "${text}"`);
-        console.log(`📜 Container: ${containerWidth}px, Text: ${textWidth}px, Scroll: ${scrollDistance}px`);
-    }
-}
-
-
-function clearTrack() {
-    // Clear track state
-    currentTrack = null;
-    isPlaying = false;
-
-    const trackTitleElement = document.getElementById('track-title');
-    trackTitleElement.innerHTML = '<span class="title-text">No track</span>';
-    trackTitleElement.classList.remove('scrolling'); // Remove scrolling animation
-    trackTitleElement.style.removeProperty('--scroll-distance'); // Clear CSS variable
-
-    document.getElementById('artist-name').textContent = 'Unknown Artist';
-    document.getElementById('album-name').textContent = 'Unknown Album';
-    // Reset play button SVGs (don't use textContent — it destroys SVG children)
-    const clearPlayBtn = document.getElementById('play-button');
-    const clearPlayIcon = clearPlayBtn.querySelector('.play-icon');
-    const clearPauseIcon = clearPlayBtn.querySelector('.pause-icon');
-    if (clearPlayIcon) clearPlayIcon.style.display = '';
-    if (clearPauseIcon) clearPauseIcon.style.display = 'none';
-    clearPlayBtn.disabled = true;
-    document.getElementById('stop-button').disabled = true;
-
-    // Reset progress bar and time displays
-    const progressBar = document.getElementById('progress-bar');
-    const progressFill = document.getElementById('progress-fill');
-    if (progressBar) {
-        progressBar.value = 0;
-        delete progressBar.dataset.seeking;
-    }
-    if (progressFill) {
-        progressFill.style.width = '0%';
-    }
-
-    const currentTimeElement = document.getElementById('current-time');
-    const totalTimeElement = document.getElementById('total-time');
-    if (currentTimeElement) currentTimeElement.textContent = '0:00';
-    if (totalTimeElement) totalTimeElement.textContent = '0:00';
-
-    // Hide loading animation
-    hideLoadingAnimation();
-
-    // Show no track message and collapse player
-    document.getElementById('no-track-message').classList.remove('hidden');
-    document.getElementById('media-player').classList.add('idle');
-
-    // Reset queue state
-    npQueue = [];
-    npQueueIndex = -1;
-
-    // Sync expanded player and media session
-    updateNpTrackInfo();
-    updateNpPlayButton();
-    updateNpProgress();
-    renderNpQueue();
-    updateNpPrevNextButtons();
-    updateMediaSessionPlaybackState();
-    stopSidebarVisualizer();
-    if (npModalOpen) closeNowPlayingModal();
-
-    console.log('🧹 Track cleared and media player reset');
-}
-
-function setPlayingState(playing) {
-    isPlaying = playing;
-    const playButton = document.getElementById('play-button');
-    // Toggle SVG icons (don't use textContent — it destroys SVG children)
-    const playIcon = playButton.querySelector('.play-icon');
-    const pauseIcon = playButton.querySelector('.pause-icon');
-    if (playIcon) playIcon.style.display = playing ? 'none' : '';
-    if (pauseIcon) pauseIcon.style.display = playing ? '' : 'none';
-    updateNpPlayButton();
-    updateMediaSessionPlaybackState();
-
-    // Sidebar audio visualizer
-    if (playing) {
-        npInitVisualizer();
-        startSidebarVisualizer();
-    } else {
-        stopSidebarVisualizer();
-    }
-}
-
-async function handlePlayPause() {
-    // Use new streaming system toggle function
-    togglePlayback();
-}
-
-async function handleStop() {
-    // Use new streaming system stop function
-    await stopStream();
-    clearTrack();
-}
-
-function handleVolumeChange(event) {
-    const volume = event.target.value;
-    updateVolumeSliderAppearance();
-
-    // Update HTML5 audio player volume
-    if (audioPlayer) {
-        audioPlayer.volume = volume / 100;
-    }
-
-    // Sync modal volume and clear mute state
-    npMuted = false;
-    const npVol = document.getElementById('np-volume-slider');
-    const npFill = document.getElementById('np-volume-fill');
-    if (npVol) npVol.value = volume;
-    if (npFill) npFill.style.width = volume + '%';
-    updateNpMuteIcon();
-}
-
-function handleProgressBarChange(event) {
-    // Handle seeking in the audio track
-    if (!audioPlayer || !audioPlayer.duration) return;
-
-    const progress = parseFloat(event.target.value);
-    const newTime = (progress / 100) * audioPlayer.duration;
-
-    console.log(`🎯 Seeking to ${formatTime(newTime)} (${progress.toFixed(1)}%)`);
-
-    try {
-        audioPlayer.currentTime = newTime;
-
-        // Update visual progress immediately
-        const progressFill = document.getElementById('progress-fill');
-        if (progressFill) {
-            progressFill.style.width = `${progress}%`;
-        }
-
-        // Update time displays immediately
-        const currentTimeElement = document.getElementById('current-time');
-        if (currentTimeElement) {
-            currentTimeElement.textContent = formatTime(newTime);
-        }
-
-        // Sync modal progress
-        const npBar = document.getElementById('np-progress-bar');
-        const npFill = document.getElementById('np-progress-fill');
-        const npTime = document.getElementById('np-current-time');
-        if (npBar) npBar.value = progress;
-        if (npFill) npFill.style.width = progress + '%';
-        if (npTime) npTime.textContent = formatTime(newTime);
-    } catch (error) {
-        console.warn('⚠️ Seek failed:', error.message);
-        // Reset progress bar to current position
-        const actualProgress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-        event.target.value = actualProgress;
-        const progressFill = document.getElementById('progress-fill');
-        if (progressFill) {
-            progressFill.style.width = `${actualProgress}%`;
-        }
-    }
-}
-
-function updateVolumeSliderAppearance() {
-    const slider = document.getElementById('volume-slider');
-    if (!slider) return;
-    const value = slider.value;
-    slider.style.setProperty('--volume-percent', `${value}%`);
-}
-
-function showLoadingAnimation() {
-    document.getElementById('loading-animation').classList.remove('hidden');
-}
-
-function hideLoadingAnimation() {
-    document.getElementById('loading-animation').classList.add('hidden');
-}
-
-function setLoadingProgress(percentage) {
-    const loadingAnimation = document.getElementById('loading-animation');
-    const progressBar = loadingAnimation.querySelector('.loading-progress');
-    const loadingText = loadingAnimation.querySelector('.loading-text');
-
-    loadingAnimation.classList.remove('hidden');
-    progressBar.style.width = `${percentage}%`;
-    loadingText.textContent = `${Math.round(percentage)}%`;
-}
-
-// ===============================
-// STREAMING FUNCTIONALITY
-// ===============================
-
-let _streamLock = false;
-
-async function startStream(searchResult) {
-    // Start streaming a track - handles same track toggle and new track streaming
-    try {
-        // Prevent multiple concurrent stream starts (rapid clicking)
-        if (_streamLock) {
-            console.log('⏳ Stream already starting, ignoring duplicate click');
-            return;
-        }
-
-        console.log(`🎮 startStream() called with data:`, searchResult);
-
-        // Check if this is the same track that's currently playing/loading
-        const currentTrackId = currentTrack ? `${currentTrack.username}:${currentTrack.filename}` : null;
-        const newTrackId = `${searchResult.username}:${searchResult.filename}`;
-
-        console.log(`🎮 startStream() called for: ${searchResult.filename}`);
-        console.log(`🎮 Current track ID: ${currentTrackId}`);
-        console.log(`🎮 New track ID: ${newTrackId}`);
-
-        if (currentTrackId === newTrackId && audioPlayer && !audioPlayer.paused) {
-            // Same track clicked while playing - toggle pause
-            console.log("🔄 Toggling playback for same track");
-            togglePlayback();
-            return;
-        }
-
-        // Lock to prevent duplicate stream starts
-        _streamLock = true;
-
-        // Different track or no current track - start new stream
-        console.log("🎵 Starting new stream");
-
-        // Stop current streaming/playback if any
-        await stopStream();
-
-        // Set track info and show loading state
-        setTrackInfo({
-            title: extractTrackTitle(searchResult.filename) || searchResult.title || 'Unknown Track',
-            artist: searchResult.artist || searchResult.username || 'Unknown Artist',
-            album: searchResult.album || 'Unknown Album',
-            username: searchResult.username,
-            filename: searchResult.filename,
-            image_url: searchResult.image_url || searchResult.album_cover_url || null
-        });
-
-        showLoadingAnimation();
-        setLoadingProgress(0);
-
-        // Start streaming request
-        const response = await fetch(API.stream.start, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(searchResult)
-        });
-
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to start streaming');
-        }
-
-        console.log("✅ Stream started successfully");
-
-        // Start status polling
-        startStreamStatusPolling();
-
-    } catch (error) {
-        console.error('Error starting stream:', error);
-        showToast(`Failed to start stream: ${error.message}`, 'error');
-        hideLoadingAnimation();
-        clearTrack();
-    } finally {
-        _streamLock = false;
-    }
-}
-
-function startStreamStatusPolling() {
-    // Start polling for stream status updates with retry logic
-    if (streamStatusPoller) {
-        clearInterval(streamStatusPoller);
-    }
-
-    // Reset polling state
-    streamPollingRetries = 0;
-    streamPollingInterval = 1000; // Reset to 1-second interval
-
-    console.log('🔄 Starting enhanced stream status polling');
-    updateStreamStatus(); // Initial check
-    streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
-}
-
-function stopStreamStatusPolling() {
-    // Stop polling for stream status updates
-    if (streamStatusPoller) {
-        clearInterval(streamStatusPoller);
-        streamStatusPoller = null;
-        streamPollingRetries = 0;
-        streamPollingInterval = 1000; // Reset interval
-        console.log('⏹️ Stopped stream status polling');
-    }
-}
-
-// Phase 4: Track last known tool statuses to prevent repeated toasts on terminal states
-let _lastToolStatus = {};
-
-// Phase 5: Sync/Discovery/Scan WebSocket router functions
-function updateSyncProgressFromData(data) {
-    const pid = data.playlist_id;
-    const callback = _syncProgressCallbacks[pid];
-    if (callback) callback(data);
-}
-
-function updateDiscoveryProgressFromData(data) {
-    const id = data.id;
-    const callback = _discoveryProgressCallbacks[id];
-    if (callback) callback(data);
-}
-
-function updateWatchlistScanFromData(data) {
-    if (!data.success) return;
-    if (_lastWatchlistScanStatus === data.status && data.status !== 'scanning') return;
-    _lastWatchlistScanStatus = data.status;
-    handleWatchlistScanData(data);
-}
-
-function updateMediaScanFromData(data) {
-    if (!data.success || !data.status) return;
-    const status = data.status;
-    const statusKey = status.is_scanning ? 'scanning' : (status.status || 'unknown');
-    if (_lastMediaScanStatus === statusKey && statusKey !== 'scanning') return;
-    _lastMediaScanStatus = statusKey;
-
-    const phaseLabel = document.getElementById('media-scan-phase-label');
-    const progressLabel = document.getElementById('media-scan-progress-label');
-    const button = document.getElementById('media-scan-btn');
-    const progressBar = document.getElementById('media-scan-progress-bar');
-    const statusValue = document.getElementById('media-scan-status');
-
-    if (status.is_scanning) {
-        if (phaseLabel) phaseLabel.textContent = 'Media server scanning...';
-        if (progressLabel) progressLabel.textContent = status.progress_message || 'Scan in progress';
-    } else if (status.status === 'idle') {
-        if (button) button.disabled = false;
-        if (phaseLabel) phaseLabel.textContent = 'Scan completed successfully';
-        if (progressBar) progressBar.style.width = '0%';
-        if (progressLabel) progressLabel.textContent = 'Ready for next scan';
-        if (statusValue) {
-            statusValue.textContent = 'Idle';
-            statusValue.style.color = '#b3b3b3';
-        }
-        showToast('✅ Media scan completed', 'success', 3000);
-    }
-}
-
-let _wishlistAutoProcessingNotified = false;
-function updateWishlistStatsFromData(data) {
-    // Auto-processing detection: close modal and notify (once only)
-    if (data.is_auto_processing) {
-        if (!_wishlistAutoProcessingNotified) {
-            if (currentPage === 'wishlist') navigateToPage('active-downloads');
-            showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
-            _wishlistAutoProcessingNotified = true;
-        }
-        return;
-    }
-    // Reset flag when auto-processing ends
-    _wishlistAutoProcessingNotified = false;
-    // Store latest stats for countdown timer refresh
-    _lastWishlistStats = data;
-}
-
-async function updateStreamStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    // Poll server for streaming progress and handle state changes with enhanced error recovery
-    try {
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10-second timeout
-
-        const response = await fetch(API.stream.status, {
-            signal: controller.signal
-        });
-
-        clearTimeout(timeoutId);
-
-        if (!response.ok) {
-            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        // Reset retry count on successful response
-        streamPollingRetries = 0;
-        streamPollingInterval = 1000; // Reset to normal interval
-
-        // Update current stream state
-        currentStream.status = data.status;
-        currentStream.progress = data.progress;
-
-        switch (data.status) {
-            case 'loading':
-                setLoadingProgress(data.progress);
-                // Update loading text with progress
-                const loadingText = document.querySelector('.loading-text');
-                if (loadingText && data.progress > 0) {
-                    loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
-                }
-                break;
-
-            case 'queued':
-                // Show queue status with better messaging
-                const queueText = document.querySelector('.loading-text');
-                if (queueText) {
-                    queueText.textContent = 'Queuing with uploader...';
-                }
-                setLoadingProgress(0); // Reset progress for queue state
-                break;
-
-            case 'ready':
-                // Stream is ready - start audio playback
-                console.log('🎵 Stream ready, starting audio playback');
-                stopStreamStatusPolling();
-                // Restore player UI if JS state was wiped (e.g. page refresh)
-                if (!currentTrack && data.track_info) {
-                    const ti = data.track_info;
-                    setTrackInfo({
-                        title: ti.name || ti.title || 'Unknown Track',
-                        artist: ti.artist || 'Unknown Artist',
-                        album: ti.album || 'Unknown Album',
-                        filename: ti.filename || '',
-                        is_library: !!ti.is_library,
-                        image_url: ti.image_url || null,
-                        id: ti.id || null,
-                        artist_id: ti.artist_id || null,
-                        album_id: ti.album_id || null,
-                    });
-                }
-                await startAudioPlayback();
-                break;
-
-            case 'error':
-                console.error('❌ Streaming error:', data.error_message);
-                stopStreamStatusPolling();
-                hideLoadingAnimation();
-                showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
-                clearTrack();
-                break;
-
-            case 'stopped':
-                // Handle stopped state — do NOT clear track here; explicit stop (handleStop)
-                // calls clearTrack() directly. Clearing here collapses the player mid-playback
-                // when the backend transitions to 'stopped' after audio naturally ends or during
-                // queue track transitions.
-                console.log('🛑 Stream stopped');
-                stopStreamStatusPolling();
-                hideLoadingAnimation();
-                break;
-        }
-
-    } catch (error) {
-        streamPollingRetries++;
-        console.warn(`Stream status polling error (attempt ${streamPollingRetries}):`, error.message);
-
-        if (streamPollingRetries >= maxStreamPollingRetries) {
-            // Too many consecutive failures - give up
-            console.error('❌ Stream status polling failed after maximum retries');
-            stopStreamStatusPolling();
-            hideLoadingAnimation();
-            showToast('Lost connection to streaming server', 'error');
-            clearTrack();
-        } else {
-            // Implement exponential backoff for retries
-            const backoffMultiplier = Math.min(streamPollingRetries, 5); // Max 5x backoff
-            streamPollingInterval = 1000 * backoffMultiplier;
-
-            // Restart polling with new interval
-            if (streamStatusPoller) {
-                clearInterval(streamStatusPoller);
-                streamStatusPoller = setInterval(updateStreamStatus, streamPollingInterval);
-                console.log(`🔄 Retrying stream status polling with ${streamPollingInterval}ms interval`);
-            }
-        }
-    }
-}
-
-function updateStreamStatusFromData(data) {
-    const prev = _lastToolStatus['stream'];
-    _lastToolStatus['stream'] = data.status;
-    // Skip repeated terminal states to avoid duplicate toasts/actions
-    if (prev !== undefined && data.status === prev && data.status !== 'loading' && data.status !== 'queued') return;
-
-    currentStream.status = data.status;
-    currentStream.progress = data.progress;
-
-    switch (data.status) {
-        case 'loading':
-            setLoadingProgress(data.progress);
-            const loadingText = document.querySelector('.loading-text');
-            if (loadingText && data.progress > 0) {
-                loadingText.textContent = `Downloading... ${Math.round(data.progress)}%`;
-            }
-            break;
-        case 'queued':
-            const queueText = document.querySelector('.loading-text');
-            if (queueText) {
-                queueText.textContent = 'Queuing with uploader...';
-            }
-            setLoadingProgress(0);
-            break;
-        case 'ready':
-            console.log('🎵 Stream ready, starting audio playback');
-            stopStreamStatusPolling();
-            // Restore player UI if JS state was wiped (e.g. page refresh)
-            if (!currentTrack && data.track_info) {
-                const ti = data.track_info;
-                setTrackInfo({
-                    title: ti.name || ti.title || 'Unknown Track',
-                    artist: ti.artist || 'Unknown Artist',
-                    album: ti.album || 'Unknown Album',
-                    filename: ti.filename || '',
-                    is_library: !!ti.is_library,
-                    image_url: ti.image_url || null,
-                    id: ti.id || null,
-                    artist_id: ti.artist_id || null,
-                    album_id: ti.album_id || null,
-                });
-            }
-            startAudioPlayback();
-            break;
-        case 'error':
-            console.error('❌ Streaming error:', data.error_message);
-            stopStreamStatusPolling();
-            hideLoadingAnimation();
-            showToast(`Streaming error: ${data.error_message || 'Unknown error'}`, 'error');
-            clearTrack();
-            break;
-        case 'stopped':
-            // Do NOT clear track here — explicit stop (handleStop) calls clearTrack() directly.
-            // Clearing here collapses the player after audio naturally ends or during queue transitions.
-            console.log('🛑 Stream stopped');
-            stopStreamStatusPolling();
-            hideLoadingAnimation();
-            break;
-    }
-}
-
-async function startAudioPlayback() {
-    // Start HTML5 audio playback of the streamed file with enhanced state management
-    try {
-        if (!audioPlayer) {
-            throw new Error('Audio player not initialized');
-        }
-
-        // Show loading state while preparing audio
-        const loadingText = document.querySelector('.loading-text');
-        if (loadingText) {
-            loadingText.textContent = 'Preparing playback...';
-        }
-
-        // Set audio source with cache-busting timestamp
-        const audioUrl = `/stream/audio?t=${new Date().getTime()}`;
-        console.log(`🎵 Loading audio from: ${audioUrl}`);
-
-        // Clear any existing source first
-        audioPlayer.pause();
-        audioPlayer.currentTime = 0;
-        audioPlayer.src = '';
-
-        // Set new source
-        audioPlayer.src = audioUrl;
-        audioPlayer.load(); // Force reload
-
-        // Wait for audio to be ready with promise-based approach
-        await new Promise((resolve, reject) => {
-            const timeout = setTimeout(() => {
-                reject(new Error('Audio loading timeout'));
-            }, 15000); // 15-second timeout
-
-            const onCanPlay = () => {
-                clearTimeout(timeout);
-                audioPlayer.removeEventListener('canplay', onCanPlay);
-                audioPlayer.removeEventListener('error', onError);
-                resolve();
-            };
-
-            const onError = (event) => {
-                clearTimeout(timeout);
-                audioPlayer.removeEventListener('canplay', onCanPlay);
-                audioPlayer.removeEventListener('error', onError);
-                const error = event.target.error || new Error('Audio loading failed');
-                reject(error);
-            };
-
-            audioPlayer.addEventListener('canplay', onCanPlay);
-            audioPlayer.addEventListener('error', onError);
-
-            // If already ready, resolve immediately
-            if (audioPlayer.readyState >= 3) { // HAVE_FUTURE_DATA
-                onCanPlay();
-            }
-        });
-
-        console.log('✅ Audio loaded and ready for playback');
-
-        // Try to start playback with retry logic
-        let retryCount = 0;
-        const maxRetries = 3;
-
-        while (retryCount < maxRetries) {
-            try {
-                await audioPlayer.play();
-                console.log('✅ Audio playback started successfully');
-
-                // Update UI to playing state
-                hideLoadingAnimation();
-                setPlayingState(true);
-
-                // Show media player if hidden
-                const noTrackMessage = document.getElementById('no-track-message');
-                if (noTrackMessage) {
-                    noTrackMessage.classList.add('hidden');
-                }
-
-                // Update volume to current slider value
-                const volumeSlider = document.getElementById('volume-slider');
-                if (volumeSlider) {
-                    audioPlayer.volume = volumeSlider.value / 100;
-                }
-
-                // Enable play/stop buttons
-                const playButton = document.getElementById('play-button');
-                const stopButton = document.getElementById('stop-button');
-                if (playButton) playButton.disabled = false;
-                if (stopButton) stopButton.disabled = false;
-
-                return; // Success!
-
-            } catch (playError) {
-                retryCount++;
-                console.warn(`⚠️ Audio play attempt ${retryCount} failed:`, playError.message);
-
-                if (retryCount >= maxRetries) {
-                    throw playError; // Re-throw after max retries
-                }
-
-                // Wait before retry with exponential backoff
-                await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
-            }
-        }
-
-    } catch (error) {
-        console.error('❌ Error starting audio playback:', error);
-        hideLoadingAnimation();
-
-        // Provide user-friendly error messages
-        let userMessage = 'Playback failed';
-
-        if (error.message.includes('no supported source') ||
-            error.message.includes('Not supported') ||
-            error.message.includes('MEDIA_ELEMENT_ERROR')) {
-            userMessage = 'Audio format not supported by your browser. Try downloading instead.';
-        } else if (error.message.includes('network') || error.message.includes('fetch')) {
-            userMessage = 'Network error - please check your connection';
-        } else if (error.message.includes('decode')) {
-            userMessage = 'Audio file is corrupted or incompatible';
-        } else if (error.message.includes('timeout')) {
-            userMessage = 'Audio loading timeout - file may be too large';
-        } else if (error.message.includes('AbortError')) {
-            userMessage = 'Playback was interrupted';
-        }
-
-        showToast(userMessage, 'error');
-        // Only clear track if not in queue playback mode — queue handles its own error recovery
-        if (npQueue.length === 0) {
-            clearTrack();
-        }
-    }
-}
-
-async function stopStream() {
-    // Stop streaming and clean up all state
-    try {
-        // Stop status polling
-        stopStreamStatusPolling();
-
-        // Stop audio playback
-        if (audioPlayer) {
-            audioPlayer.pause();
-            audioPlayer.src = '';
-        }
-
-        // Call backend stop endpoint
-        const response = await fetch(API.stream.stop, { method: 'POST' });
-        if (response.ok) {
-            const data = await response.json();
-            console.log('🛑 Stream stopped:', data.message);
-        }
-
-        // Reset UI state
-        hideLoadingAnimation();
-        setPlayingState(false);
-
-        // Reset stream state
-        currentStream = {
-            status: 'stopped',
-            progress: 0,
-            track: null
-        };
-
-    } catch (error) {
-        console.error('Error stopping stream:', error);
-    }
-}
-
-function togglePlayback() {
-    // Toggle play/pause for currently loaded audio
-    if (!audioPlayer || !currentTrack) {
-        console.log('⚠️ No audio player or track to toggle');
-        return;
-    }
-
-    if (audioPlayer.paused) {
-        audioPlayer.play()
-            .then(() => {
-                setPlayingState(true);
-                console.log('▶️ Resumed playback');
-            })
-            .catch(error => {
-                console.error('Error resuming playback:', error);
-                showToast('Failed to resume playback', 'error');
-            });
-    } else {
-        audioPlayer.pause();
-        setPlayingState(false);
-        console.log('⏸️ Paused playback');
-    }
-}
-
-// ===============================
-// AUDIO EVENT HANDLERS
-// ===============================
-
-function updateAudioProgress() {
-    // Update progress bar based on audio playback time
-    if (!audioPlayer || !audioPlayer.duration) return;
-
-    const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-
-    // Update progress bar
-    const progressBar = document.getElementById('progress-bar');
-    const progressFill = document.getElementById('progress-fill');
-    if (progressBar && !progressBar.dataset.seeking) {
-        progressBar.value = progress;
-        // Update visual progress fill
-        if (progressFill) {
-            progressFill.style.width = `${progress}%`;
-        }
-    }
-
-    // Update time display
-    const currentTimeElement = document.getElementById('current-time');
-    const totalTimeElement = document.getElementById('total-time');
-
-    if (currentTimeElement) {
-        currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
-    }
-    if (totalTimeElement) {
-        totalTimeElement.textContent = formatTime(audioPlayer.duration);
-    }
-
-    // Sync expanded player modal
-    if (npModalOpen) updateNpProgress();
-}
-
-function onAudioEnded() {
-    // Handle audio playback completion
-    console.log('🏁 Audio playback ended');
-    setPlayingState(false);
-
-    // Reset progress to beginning
-    const progressBar = document.getElementById('progress-bar');
-    const progressFill = document.getElementById('progress-fill');
-    if (progressBar) {
-        progressBar.value = 0;
-    }
-    if (progressFill) {
-        progressFill.style.width = '0%';
-    }
-
-    const currentTimeElement = document.getElementById('current-time');
-    if (currentTimeElement) {
-        currentTimeElement.textContent = '0:00';
-    }
-
-    // Repeat-one is handled by audioPlayer.loop (set in handleNpRepeat)
-    // Auto-advance to next track if queue has a next item (guard against race conditions)
-    if (npQueue.length > 0 && !npLoadingQueueItem) {
-        const hasNext = npShuffleOn
-            ? npQueue.length > 1
-            : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all');
-        if (hasNext) { playNextInQueue(); return; }
-    }
-
-    // Radio mode: auto-fetch similar tracks when queue is exhausted
-    if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
-        npFetchRadioTracks();
-    }
-}
-
-function onAudioError(event) {
-    // Handle audio playback errors
-    const error = event.target.error;
-    console.error('❌ Audio error:', error);
-
-    // Don't show error toast if it's just a format/codec issue and retrying
-    if (error && error.code) {
-        console.error(`Audio error code: ${error.code}, message: ${error.message || 'Unknown error'}`);
-
-        // Only show user-facing errors for serious issues
-        if (error.code === 4) { // MEDIA_ELEMENT_ERROR: Media not supported
-            console.warn('⚠️ Media format not supported by browser, but streaming may still work');
-            // Don't clear track or show error - let retry logic handle it
-            return;
-        }
-    }
-
-    hideLoadingAnimation();
-
-    // Only clear track after a short delay to allow for recovery
-    setTimeout(() => {
-        if (audioPlayer && audioPlayer.error) {
-            let userMessage = 'Audio format not supported by your browser. Try downloading instead.';
-
-            if (error && error.code) {
-                switch (error.code) {
-                    case 1: // MEDIA_ERR_ABORTED
-                        userMessage = 'Playback was stopped';
-                        break;
-                    case 2: // MEDIA_ERR_NETWORK
-                        userMessage = 'Network error - please try again';
-                        break;
-                    case 3: // MEDIA_ERR_DECODE
-                        userMessage = 'Audio file is corrupted or incompatible';
-                        break;
-                    case 4: // MEDIA_ERR_SRC_NOT_SUPPORTED
-                        userMessage = 'Audio format not supported by your browser. Try downloading instead.';
-                        break;
-                }
-            }
-
-            showToast(userMessage, 'error');
-            // Only clear track if not in queue playback — queue handles its own recovery
-            if (npQueue.length === 0) {
-                clearTrack();
-            }
-        }
-    }, 2000);
-}
-
-function onAudioLoadStart() {
-    // Handle audio load start
-    console.log('🔄 Audio loading started');
-}
-
-function onAudioCanPlay() {
-    // Handle when audio can start playing
-    console.log('✅ Audio ready to play');
-}
-
-function formatTime(seconds) {
-    // Format seconds as MM:SS
-    if (!seconds || !isFinite(seconds)) return '0:00';
-
-    const minutes = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${minutes}:${secs.toString().padStart(2, '0')}`;
-}
-
-function formatCountdownTime(seconds) {
-    // Format seconds as countdown timer (e.g., "24m 13s", "2h 15m", "23h 59m")
-    if (seconds === null || seconds === undefined || seconds < 0) return '';
-    if (seconds === 0) return '0s';  // Show "0s" instead of hiding timer
-
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
-
-    if (hours > 0) {
-        return `${hours}h ${minutes}m`;
-    } else if (minutes > 0) {
-        return `${minutes}m ${secs}s`;
-    } else {
-        return `${secs}s`;
-    }
-}
-
-// ===============================
-// AUDIO FORMAT SUPPORT DETECTION
-// ===============================
-
-function getFileExtension(filename) {
-    if (!filename) return '';
-    const ext = filename.toLowerCase().match(/\.([^.]+)$/);
-    return ext ? ext[1] : '';
-}
-
-function isAudioFormatSupported(filename) {
-    const ext = getFileExtension(filename);
-    const supportedFormats = ['mp3', 'ogg', 'wav'];  // Most reliable formats
-    const partialSupport = ['flac', 'aac', 'm4a', 'opus', 'webm'];  // Test browser support
-    const unsupported = ['wma', 'ape', 'aiff'];  // Generally problematic
-
-    if (supportedFormats.includes(ext)) {
-        return true;
-    }
-
-    if (partialSupport.includes(ext)) {
-        // Test if browser can actually play this format
-        return canPlayAudioFormat(ext);
-    }
-
-    return false;  // Unsupported formats
-}
-
-function canPlayAudioFormat(extension) {
-    const audio = document.createElement('audio');
-
-    const mimeTypes = {
-        'mp3': 'audio/mpeg',
-        'ogg': 'audio/ogg; codecs="vorbis"',
-        'wav': 'audio/wav',
-        'flac': 'audio/flac',
-        'aac': 'audio/aac',
-        'm4a': 'audio/mp4; codecs="mp4a.40.2"',  // More specific M4A MIME type
-        'opus': 'audio/ogg; codecs="opus"',
-        'webm': 'audio/webm; codecs="opus"',
-        'wma': 'audio/x-ms-wma'
-    };
-
-    const mimeType = mimeTypes[extension];
-    if (!mimeType) {
-        console.warn(`🎵 [FORMAT CHECK] No MIME type found for extension: ${extension}`);
-        return false;
-    }
-
-    const canPlay = audio.canPlayType(mimeType);
-    console.log(`🎵 [FORMAT CHECK] ${extension} (${mimeType}): ${canPlay}`);
-
-    let isSupported = canPlay === 'probably' || canPlay === 'maybe';
-
-    // Special handling for M4A - try fallback MIME types if first one fails
-    if (!isSupported && extension === 'm4a') {
-        const fallbackMimeTypes = ['audio/mp4', 'audio/x-m4a', 'audio/aac'];
-        console.log(`🎵 [FORMAT CHECK] M4A failed with primary MIME type, trying fallbacks...`);
-
-        for (const fallbackMime of fallbackMimeTypes) {
-            const fallbackResult = audio.canPlayType(fallbackMime);
-            console.log(`🎵 [FORMAT CHECK] M4A fallback (${fallbackMime}): ${fallbackResult}`);
-            if (fallbackResult === 'probably' || fallbackResult === 'maybe') {
-                isSupported = true;
-                console.log(`🎵 [FORMAT CHECK] M4A supported with fallback MIME type: ${fallbackMime}`);
-                break;
-            }
-        }
-    }
-
-    console.log(`🎵 [FORMAT CHECK] ${extension} final support result: ${isSupported}`);
-    return isSupported;
-}
-
-// ===============================
-// EXPANDED NOW PLAYING MODAL
-// ===============================
-
-let npModalOpen = false;
-let npRepeatMode = 'off';     // 'off' | 'all' | 'one'
-let npShuffleOn = false;
-let npQueue = [];
-let npQueueIndex = -1;
-let npMuted = false;
-let npPreMuteVolume = 70;
-let npMediaSessionThrottle = 0;
-let npLoadingQueueItem = false;
-let npRadioMode = false;
-let npRecentlyPlayedIds = [];
-let npAudioContext = null;
-let npAnalyser = null;
-let npMediaSource = null;
-let npVizAnimFrame = null;
-let npVizInitialized = false;
-
-function initExpandedPlayer() {
-    const closeBtn = document.getElementById('np-close-btn');
-    const overlay = document.getElementById('np-modal-overlay');
-    const playBtn = document.getElementById('np-play-btn');
-    const stopBtn = document.getElementById('np-stop-btn');
-    const shuffleBtn = document.getElementById('np-shuffle-btn');
-    const repeatBtn = document.getElementById('np-repeat-btn');
-    const muteBtn = document.getElementById('np-mute-btn');
-    const npProgressBar = document.getElementById('np-progress-bar');
-    const npVolumeSlider = document.getElementById('np-volume-slider');
-
-    if (!overlay) return;
-
-    // Close handlers
-    closeBtn.addEventListener('click', closeNowPlayingModal);
-    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeNowPlayingModal(); });
-
-    // Control handlers
-    playBtn.addEventListener('click', () => { togglePlayback(); });
-    stopBtn.addEventListener('click', async () => { await handleStop(); closeNowPlayingModal(); });
-    shuffleBtn.addEventListener('click', handleNpShuffle);
-    repeatBtn.addEventListener('click', handleNpRepeat);
-    muteBtn.addEventListener('click', handleNpMuteToggle);
-
-    // Progress bar (mouse)
-    npProgressBar.addEventListener('input', handleNpProgressBarChange);
-    npProgressBar.addEventListener('mousedown', () => { npProgressBar.dataset.seeking = 'true'; });
-    npProgressBar.addEventListener('mouseup', () => { delete npProgressBar.dataset.seeking; });
-
-    // Progress bar (touch)
-    npProgressBar.addEventListener('touchstart', () => { npProgressBar.dataset.seeking = 'true'; }, { passive: true });
-    npProgressBar.addEventListener('touchmove', (e) => {
-        const touch = e.touches[0];
-        const rect = npProgressBar.getBoundingClientRect();
-        const pct = Math.max(0, Math.min(100, ((touch.clientX - rect.left) / rect.width) * 100));
-        npProgressBar.value = pct;
-        npProgressBar.dispatchEvent(new Event('input'));
-    }, { passive: true });
-    npProgressBar.addEventListener('touchend', () => { delete npProgressBar.dataset.seeking; }, { passive: true });
-
-    // Volume slider
-    npVolumeSlider.addEventListener('input', handleNpVolumeChange);
-
-    // Keyboard shortcuts (global)
-    document.addEventListener('keydown', handlePlayerKeyboardShortcuts);
-
-    // Make sidebar media player clickable to open modal
-    const mediaPlayer = document.getElementById('media-player');
-    if (mediaPlayer) {
-        mediaPlayer.style.cursor = 'pointer';
-        mediaPlayer.addEventListener('click', (e) => {
-            // Don't open modal when clicking controls (let expand-hint through)
-            if (e.target.closest('.play-button, .stop-button, .volume-slider, .volume-control, .progress-bar, .volume-icon, .mini-nav-btn') && !e.target.closest('.expand-hint')) return;
-            if (currentTrack) openNowPlayingModal();
-        });
-    }
-
-    // Prev / Next buttons
-    const prevBtn = document.getElementById('np-prev-btn');
-    const nextBtn = document.getElementById('np-next-btn');
-    if (prevBtn) prevBtn.addEventListener('click', () => { playPreviousInQueue(); });
-    if (nextBtn) nextBtn.addEventListener('click', () => { playNextInQueue(); });
-
-    // Queue panel toggle + clear
-    const queueToggle = document.getElementById('np-queue-toggle');
-    if (queueToggle) {
-        queueToggle.addEventListener('click', () => {
-            const body = document.getElementById('np-queue-body');
-            if (body) body.classList.toggle('hidden');
-            queueToggle.classList.toggle('active');
-        });
-    }
-    const queueClearBtn = document.getElementById('np-queue-clear');
-    if (queueClearBtn) queueClearBtn.addEventListener('click', () => { clearQueue(); });
-
-    // Radio mode button
-    const radioBtn = document.getElementById('np-radio-btn');
-    if (radioBtn) {
-        radioBtn.addEventListener('click', () => {
-            npRadioMode = !npRadioMode;
-            radioBtn.classList.toggle('active', npRadioMode);
-            showToast(npRadioMode ? 'Radio mode on — similar tracks will auto-queue' : 'Radio mode off', 'success');
-            // Immediately fetch radio tracks if turned on while playing with empty/exhausted queue
-            if (npRadioMode && currentTrack && currentTrack.id && !npLoadingQueueItem) {
-                const hasNext = npQueue.length > 0 && (npShuffleOn
-                    ? npQueue.length > 1
-                    : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
-                if (!hasNext) {
-                    // Add current track to queue first so it appears as "now playing" in context
-                    if (npQueue.length === 0 && currentTrack.is_library) {
-                        npQueue.push({
-                            title: currentTrack.title,
-                            artist: currentTrack.artist,
-                            album: currentTrack.album,
-                            file_path: currentTrack.filename || currentTrack.file_path,
-                            filename: currentTrack.filename || currentTrack.file_path,
-                            is_library: true,
-                            image_url: currentTrack.image_url,
-                            id: currentTrack.id,
-                            artist_id: currentTrack.artist_id,
-                            album_id: currentTrack.album_id,
-                            bitrate: currentTrack.bitrate
-                        });
-                        npQueueIndex = 0;
-                        renderNpQueue();
-                        updateNpPrevNextButtons();
-                    }
-                    npFetchRadioTracks();
-                }
-            }
-        });
-    }
-
-    // Action button (Go to Artist)
-    const gotoArtistBtn = document.getElementById('np-goto-artist');
-    if (gotoArtistBtn) {
-        gotoArtistBtn.addEventListener('click', () => {
-            if (currentTrack && currentTrack.artist_id) {
-                closeNowPlayingModal();
-                navigateToArtistDetail(currentTrack.artist_id, currentTrack.artist || '');
-            }
-        });
-    }
-    // Buffering state listeners on audioPlayer
-    if (audioPlayer) {
-        audioPlayer.addEventListener('waiting', () => {
-            const ring = document.getElementById('np-buffering-ring');
-            if (ring) ring.classList.remove('hidden');
-        });
-        audioPlayer.addEventListener('canplay', () => {
-            const ring = document.getElementById('np-buffering-ring');
-            if (ring) ring.classList.add('hidden');
-        });
-        audioPlayer.addEventListener('playing', () => {
-            const ring = document.getElementById('np-buffering-ring');
-            if (ring) ring.classList.add('hidden');
-        });
-    }
-
-    // Init Media Session API
-    initMediaSession();
-}
-
-function openNowPlayingModal() {
-    const overlay = document.getElementById('np-modal-overlay');
-    if (!overlay) return;
-    npModalOpen = true;
-    overlay.classList.remove('hidden');
-    document.body.style.overflow = 'hidden';
-    syncExpandedPlayerUI();
-    // Start visualizer if already playing
-    if (isPlaying) { npInitVisualizer(); npStartVisualizerLoop(); }
-}
-
-function closeNowPlayingModal() {
-    const overlay = document.getElementById('np-modal-overlay');
-    if (!overlay) return;
-    npModalOpen = false;
-    overlay.classList.add('hidden');
-    document.body.style.overflow = '';
-    npStopVisualizerLoop();
-}
-
-function syncExpandedPlayerUI() {
-    if (!npModalOpen) return;
-
-    // Track info
-    updateNpTrackInfo();
-
-    // Play state
-    updateNpPlayButton();
-
-    // Progress
-    updateNpProgress();
-
-    // Volume
-    const sidebarVol = document.getElementById('volume-slider');
-    const npVol = document.getElementById('np-volume-slider');
-    const npVolFill = document.getElementById('np-volume-fill');
-    if (sidebarVol && npVol) {
-        npVol.value = sidebarVol.value;
-        if (npVolFill) npVolFill.style.width = sidebarVol.value + '%';
-    }
-
-    // Visualizer
-    const viz = document.getElementById('np-visualizer');
-    if (viz) viz.classList.toggle('playing', isPlaying);
-
-    // Queue
-    renderNpQueue();
-    updateNpPrevNextButtons();
-}
-
-function updateNpTrackInfo() {
-    const titleEl = document.getElementById('np-track-title');
-    const artistEl = document.getElementById('np-artist-name');
-    const albumEl = document.getElementById('np-album-name');
-    const artImg = document.getElementById('np-album-art');
-    const artPlaceholder = document.getElementById('np-album-art-placeholder');
-    const badgesEl = document.getElementById('np-format-badges');
-    const actionBtns = document.getElementById('np-action-buttons');
-
-    if (!titleEl) return;
-
-    // Sidebar album art
-    const sidebarArt = document.getElementById('sidebar-album-art');
-
-    if (currentTrack) {
-        // Track text transition animation
-        const textEls = [titleEl, artistEl, albumEl];
-        const oldTitle = titleEl.textContent;
-        const newTitle = currentTrack.title || 'Unknown Track';
-        const trackChanged = oldTitle !== newTitle && oldTitle !== 'No track';
-
-        titleEl.textContent = newTitle;
-        artistEl.textContent = currentTrack.artist || 'Unknown Artist';
-        albumEl.textContent = currentTrack.album || 'Unknown Album';
-
-        if (trackChanged) {
-            textEls.forEach(el => {
-                el.classList.remove('np-text-transition');
-                void el.offsetWidth; // force reflow
-                el.classList.add('np-text-transition');
-            });
-        }
-
-        // Album art (modal + sidebar) + ambient glow extraction
-        const artUrl = getNpAlbumArtUrl();
-        if (artUrl && artImg) {
-            // Only set crossOrigin for external URLs — local paths break with CORS headers
-            if (artUrl.startsWith('http')) {
-                artImg.crossOrigin = 'anonymous';
-            } else {
-                artImg.removeAttribute('crossOrigin');
-            }
-            artImg.src = artUrl;
-            artImg.classList.remove('hidden');
-            artImg.onerror = () => { artImg.classList.add('hidden'); npResetAmbientGlow(); };
-            artImg.onload = () => { npExtractAmbientColor(artImg); };
-        } else if (artImg) {
-            artImg.classList.add('hidden');
-            npResetAmbientGlow();
-        }
-        if (sidebarArt) {
-            if (artUrl) {
-                sidebarArt.src = artUrl;
-                sidebarArt.style.display = '';
-                sidebarArt.onerror = () => { sidebarArt.src = '/static/trans2.png'; };
-            } else {
-                sidebarArt.src = '/static/trans2.png';
-            }
-        }
-
-        // Format badges (richer: include bitrate/sample_rate)
-        if (badgesEl) {
-            badgesEl.innerHTML = '';
-            const filename = currentTrack.filename || '';
-            if (filename) {
-                const ext = getFileExtension(filename);
-                if (ext) {
-                    let label = ext.toUpperCase();
-                    if (currentTrack.sample_rate) {
-                        const khz = (currentTrack.sample_rate / 1000);
-                        label += ' ' + (khz % 1 === 0 ? khz.toFixed(0) : khz.toFixed(1)) + 'kHz';
-                    }
-                    const badge = document.createElement('span');
-                    badge.className = 'np-format-badge' + (ext === 'flac' ? ' flac' : '');
-                    badge.textContent = label;
-                    badgesEl.appendChild(badge);
-                }
-                if (currentTrack.bitrate) {
-                    const brBadge = document.createElement('span');
-                    brBadge.className = 'np-format-badge';
-                    brBadge.textContent = currentTrack.bitrate + 'k';
-                    badgesEl.appendChild(brBadge);
-                }
-            }
-        }
-
-        // Action buttons visibility
-        if (actionBtns) {
-            const hasArtist = currentTrack.artist_id;
-            actionBtns.classList.toggle('hidden', !hasArtist);
-        }
-
-        // Track recently played for radio mode
-        if (currentTrack.id && !npRecentlyPlayedIds.includes(currentTrack.id)) {
-            npRecentlyPlayedIds.push(currentTrack.id);
-            if (npRecentlyPlayedIds.length > 50) npRecentlyPlayedIds.shift();
-        }
-    } else {
-        titleEl.textContent = 'No track';
-        artistEl.textContent = 'Unknown Artist';
-        albumEl.textContent = 'Unknown Album';
-        if (artImg) artImg.classList.add('hidden');
-        if (sidebarArt) sidebarArt.src = '/static/trans2.png';
-        if (badgesEl) badgesEl.innerHTML = '';
-        if (actionBtns) actionBtns.classList.add('hidden');
-        npResetAmbientGlow();
-    }
-}
-
-function npExtractAmbientColor(imgEl) {
-    try {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        canvas.width = 50;
-        canvas.height = 50;
-        ctx.drawImage(imgEl, 0, 0, 50, 50);
-        const data = ctx.getImageData(0, 0, 50, 50).data;
-        let rSum = 0, gSum = 0, bSum = 0, count = 0;
-        for (let i = 0; i < data.length; i += 16) { // sample every 4th pixel
-            const r = data[i], g = data[i + 1], b = data[i + 2];
-            const brightness = (r + g + b) / 3;
-            if (brightness > 20 && brightness < 230) {
-                rSum += r; gSum += g; bSum += b; count++;
-            }
-        }
-        if (count > 0) {
-            const modal = document.querySelector('.np-modal');
-            if (modal) {
-                modal.style.setProperty('--np-ambient-r', Math.round(rSum / count));
-                modal.style.setProperty('--np-ambient-g', Math.round(gSum / count));
-                modal.style.setProperty('--np-ambient-b', Math.round(bSum / count));
-            }
-        }
-    } catch (e) {
-        // Cross-origin or canvas error — ignore silently
-    }
-}
-
-function npResetAmbientGlow() {
-    const modal = document.querySelector('.np-modal');
-    if (modal) {
-        modal.style.setProperty('--np-ambient-r', '29');
-        modal.style.setProperty('--np-ambient-g', '185');
-        modal.style.setProperty('--np-ambient-b', '84');
-    }
-}
-
-function updateNpPlayButton() {
-    const playIcon = document.querySelector('.np-icon-play');
-    const pauseIcon = document.querySelector('.np-icon-pause');
-    if (playIcon && pauseIcon) {
-        playIcon.classList.toggle('hidden', isPlaying);
-        pauseIcon.classList.toggle('hidden', !isPlaying);
-    }
-
-    const viz = document.getElementById('np-visualizer');
-    if (viz) viz.classList.toggle('playing', isPlaying);
-
-    // Drive Web Audio visualizer (only when modal is open to save CPU)
-    if (isPlaying && npModalOpen) {
-        npInitVisualizer();
-        npStartVisualizerLoop();
-    } else {
-        npStopVisualizerLoop();
-    }
-}
-
-function updateNpProgress() {
-    if (!npModalOpen || !audioPlayer) return;
-
-    const npProgressBar = document.getElementById('np-progress-bar');
-    const npProgressFill = document.getElementById('np-progress-fill');
-    const npCurrentTime = document.getElementById('np-current-time');
-    const npTotalTime = document.getElementById('np-total-time');
-
-    if (audioPlayer.duration) {
-        const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-        if (npProgressBar && !npProgressBar.dataset.seeking) {
-            npProgressBar.value = progress;
-        }
-        if (npProgressFill) npProgressFill.style.width = progress + '%';
-        if (npCurrentTime) npCurrentTime.textContent = formatTime(audioPlayer.currentTime);
-        if (npTotalTime) npTotalTime.textContent = formatTime(audioPlayer.duration);
-    } else {
-        if (npProgressBar) npProgressBar.value = 0;
-        if (npProgressFill) npProgressFill.style.width = '0%';
-        if (npCurrentTime) npCurrentTime.textContent = '0:00';
-        if (npTotalTime) npTotalTime.textContent = '0:00';
-    }
-}
-
-function handleNpProgressBarChange(event) {
-    if (!audioPlayer || !audioPlayer.duration) return;
-    const progress = parseFloat(event.target.value);
-    const newTime = (progress / 100) * audioPlayer.duration;
-
-    try {
-        audioPlayer.currentTime = newTime;
-
-        // Sync sidebar progress
-        const sidebarBar = document.getElementById('progress-bar');
-        const sidebarFill = document.getElementById('progress-fill');
-        if (sidebarBar) sidebarBar.value = progress;
-        if (sidebarFill) sidebarFill.style.width = progress + '%';
-
-        // Sync modal progress fill
-        const npFill = document.getElementById('np-progress-fill');
-        if (npFill) npFill.style.width = progress + '%';
-
-        // Update time displays
-        const sidebarTime = document.getElementById('current-time');
-        const npTime = document.getElementById('np-current-time');
-        if (sidebarTime) sidebarTime.textContent = formatTime(newTime);
-        if (npTime) npTime.textContent = formatTime(newTime);
-    } catch (error) {
-        console.warn('Seek failed:', error.message);
-    }
-}
-
-function handleNpVolumeChange(event) {
-    const volume = parseInt(event.target.value);
-    if (audioPlayer) audioPlayer.volume = volume / 100;
-
-    // Sync sidebar volume slider
-    const sidebarVol = document.getElementById('volume-slider');
-    if (sidebarVol) {
-        sidebarVol.value = volume;
-        sidebarVol.style.setProperty('--volume-percent', volume + '%');
-    }
-
-    // Update modal volume fill
-    const npFill = document.getElementById('np-volume-fill');
-    if (npFill) npFill.style.width = volume + '%';
-
-    // Update mute state
-    npMuted = volume === 0;
-    updateNpMuteIcon();
-}
-
-function handleNpMuteToggle() {
-    const npVol = document.getElementById('np-volume-slider');
-    if (!npVol) return;
-
-    if (npMuted) {
-        // Unmute — restore previous volume
-        npVol.value = npPreMuteVolume;
-        npVol.dispatchEvent(new Event('input'));
-        npMuted = false;
-    } else {
-        // Mute — save current volume, set to 0
-        npPreMuteVolume = parseInt(npVol.value) || 70;
-        npVol.value = 0;
-        npVol.dispatchEvent(new Event('input'));
-        npMuted = true;
-    }
-    updateNpMuteIcon();
-}
-
-function updateNpMuteIcon() {
-    const muteBtn = document.getElementById('np-mute-btn');
-    const volIcon = muteBtn ? muteBtn.querySelector('.np-icon-vol') : null;
-    const mutedIcon = muteBtn ? muteBtn.querySelector('.np-icon-muted') : null;
-    if (volIcon && mutedIcon) {
-        volIcon.classList.toggle('hidden', npMuted);
-        mutedIcon.classList.toggle('hidden', !npMuted);
-    }
-    if (muteBtn) muteBtn.classList.toggle('muted', npMuted);
-}
-
-function handleNpShuffle() {
-    npShuffleOn = !npShuffleOn;
-    const btn = document.getElementById('np-shuffle-btn');
-    if (btn) btn.classList.toggle('active', npShuffleOn);
-    updateNpPrevNextButtons();
-}
-
-function handleNpRepeat() {
-    const badge = document.getElementById('np-repeat-one-badge');
-    if (npRepeatMode === 'off') {
-        npRepeatMode = 'all';
-        if (audioPlayer) audioPlayer.loop = false;
-    } else if (npRepeatMode === 'all') {
-        npRepeatMode = 'one';
-        if (audioPlayer) audioPlayer.loop = true;
-    } else {
-        npRepeatMode = 'off';
-        if (audioPlayer) audioPlayer.loop = false;
-    }
-    const btn = document.getElementById('np-repeat-btn');
-    if (btn) btn.classList.toggle('active', npRepeatMode !== 'off');
-    if (badge) badge.classList.toggle('hidden', npRepeatMode !== 'one');
-    updateNpPrevNextButtons();
-}
-
-// ===============================
-// QUEUE MANAGEMENT
-// ===============================
-
-function addToQueue(track) {
-    npQueue.push(track);
-    showToast('Added to queue', 'success');
-    renderNpQueue();
-    updateNpPrevNextButtons();
-    // If nothing is currently playing, auto-play the first queued track
-    if (!currentTrack) {
-        playQueueItem(npQueue.length - 1);
-    }
-}
-
-function removeFromQueue(index) {
-    if (index < 0 || index >= npQueue.length) return;
-    const wasCurrentTrack = (index === npQueueIndex);
-    npQueue.splice(index, 1);
-    // Adjust current index
-    if (npQueue.length === 0) {
-        npQueueIndex = -1;
-        // Current track keeps playing but queue is now empty — that's OK
-    } else if (index < npQueueIndex) {
-        npQueueIndex--;
-    } else if (wasCurrentTrack) {
-        // Removed the currently playing item
-        if (npQueueIndex >= npQueue.length) {
-            npQueueIndex = npQueue.length - 1;
-        }
-        // Play the next track at the adjusted index
-        playQueueItem(npQueueIndex);
-    }
-    renderNpQueue();
-    updateNpPrevNextButtons();
-}
-
-function clearQueue() {
-    npQueue = [];
-    npQueueIndex = -1;
-    renderNpQueue();
-    updateNpPrevNextButtons();
-}
-
-function playNextInQueue() {
-    if (npQueue.length === 0) return;
-    if (npShuffleOn) {
-        // Pick a random index that is not the current one
-        const candidates = [];
-        for (let i = 0; i < npQueue.length; i++) {
-            if (i !== npQueueIndex) candidates.push(i);
-        }
-        if (candidates.length === 0) return;
-        const next = candidates[Math.floor(Math.random() * candidates.length)];
-        playQueueItem(next);
-    } else {
-        const next = npQueueIndex + 1;
-        if (next >= npQueue.length) {
-            // End of queue — repeat-all wraps to start
-            if (npRepeatMode === 'all') {
-                playQueueItem(0);
-            }
-            return;
-        }
-        playQueueItem(next);
-    }
-}
-
-function playPreviousInQueue() {
-    // If more than 3 seconds in, restart current track
-    if (audioPlayer && audioPlayer.currentTime > 3) {
-        audioPlayer.currentTime = 0;
-        if (audioPlayer.paused) audioPlayer.play();
-        return;
-    }
-    if (npQueue.length === 0) return;
-    const prev = npQueueIndex - 1;
-    if (prev < 0) {
-        // At start — restart current track
-        if (audioPlayer) {
-            audioPlayer.currentTime = 0;
-            if (audioPlayer.paused) audioPlayer.play();
-        }
-        return;
-    }
-    playQueueItem(prev);
-}
-
-async function playQueueItem(index) {
-    if (index < 0 || index >= npQueue.length) return;
-    if (npLoadingQueueItem) return; // Prevent race condition from double-advance
-    npLoadingQueueItem = true;
-    npQueueIndex = index;
-    const track = npQueue[index];
-
-    try {
-        if (track.is_library) {
-            // Library track playback flow
-            await stopStream();
-            setTrackInfo({
-                title: track.title,
-                artist: track.artist,
-                album: track.album,
-                filename: track.file_path,
-                is_library: true,
-                image_url: track.image_url,
-                id: track.id,
-                artist_id: track.artist_id,
-                album_id: track.album_id,
-                bitrate: track.bitrate,
-                sample_rate: track.sample_rate
-            });
-            showLoadingAnimation();
-
-            const response = await fetch('/api/library/play', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    file_path: track.file_path,
-                    title: track.title || '',
-                    artist: track.artist || '',
-                    album: track.album || ''
-                })
-            });
-            const result = await response.json();
-            if (!result.success) throw new Error(result.error || 'Failed to start playback');
-            // Re-apply repeat-one loop property
-            if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
-            await startAudioPlayback();
-        } else {
-            // Non-library (stream) tracks cannot be queued for auto-advance
-            // Just show track info — the stream flow handles its own playback
-            setTrackInfo({
-                title: track.title,
-                artist: track.artist,
-                album: track.album,
-                filename: track.filename || track.file_path,
-                is_library: false,
-                image_url: track.image_url,
-                id: track.id,
-                artist_id: track.artist_id,
-                album_id: track.album_id,
-                bitrate: track.bitrate,
-                sample_rate: track.sample_rate
-            });
-        }
-    } catch (error) {
-        console.error('Queue playback error:', error);
-        showToast(`Skipping track: ${error.message}`, 'error');
-        hideLoadingAnimation();
-        // Auto-skip to next track on failure instead of stopping the queue
-        npLoadingQueueItem = false;
-        const nextIdx = npQueueIndex + 1;
-        if (nextIdx < npQueue.length) {
-            setTimeout(() => playQueueItem(nextIdx), 500);
-        }
-        return;
-    } finally {
-        npLoadingQueueItem = false;
-    }
-
-    renderNpQueue();
-    updateNpPrevNextButtons();
-}
-
-function renderNpQueue() {
-    const listEl = document.getElementById('np-queue-list');
-    const emptyEl = document.getElementById('np-queue-empty');
-    const countEl = document.getElementById('np-queue-count');
-    if (!listEl) return;
-
-    if (countEl) countEl.textContent = npQueue.length > 0 ? `(${npQueue.length})` : '';
-
-    if (npQueue.length === 0) {
-        listEl.innerHTML = '';
-        if (emptyEl) emptyEl.classList.remove('hidden');
-        return;
-    }
-
-    if (emptyEl) emptyEl.classList.add('hidden');
-    listEl.innerHTML = '';
-
-    npQueue.forEach((track, i) => {
-        const item = document.createElement('div');
-        item.className = 'np-queue-item' + (i === npQueueIndex ? ' active' : '');
-        item.onclick = () => playQueueItem(i);
-
-        const info = document.createElement('div');
-        info.className = 'np-queue-item-info';
-
-        const title = document.createElement('div');
-        title.className = 'np-queue-item-title';
-        title.textContent = track.title || 'Unknown Track';
-
-        const artist = document.createElement('div');
-        artist.className = 'np-queue-item-artist';
-        artist.textContent = track.artist || 'Unknown Artist';
-
-        info.appendChild(title);
-        info.appendChild(artist);
-        item.appendChild(info);
-
-        const removeBtn = document.createElement('button');
-        removeBtn.className = 'np-queue-item-remove';
-        removeBtn.innerHTML = '&#10005;';
-        removeBtn.title = 'Remove from queue';
-        removeBtn.onclick = (e) => {
-            e.stopPropagation();
-            removeFromQueue(i);
-        };
-        item.appendChild(removeBtn);
-
-        listEl.appendChild(item);
-    });
-}
-
-function updateNpPrevNextButtons() {
-    const canPrev = npQueueIndex > 0 || (audioPlayer && audioPlayer.currentTime > 3);
-    const canNext = npQueue.length > 0 && (npShuffleOn ? npQueue.length > 1 : (npQueueIndex < npQueue.length - 1 || npRepeatMode === 'all'));
-
-    // Full Now Playing modal buttons
-    const prevBtn = document.getElementById('np-prev-btn');
-    const nextBtn = document.getElementById('np-next-btn');
-    if (prevBtn) prevBtn.disabled = !canPrev;
-    if (nextBtn) nextBtn.disabled = !canNext;
-
-    // Mini player buttons
-    const miniPrevBtn = document.getElementById('mini-prev-btn');
-    const miniNextBtn = document.getElementById('mini-next-btn');
-    if (miniPrevBtn) miniPrevBtn.disabled = !canPrev;
-    if (miniNextBtn) miniNextBtn.disabled = !canNext;
-}
-
-function handlePlayerKeyboardShortcuts(event) {
-    // Don't intercept when typing in inputs or when non-player modals are open
-    const tag = document.activeElement.tagName.toLowerCase();
-    if (tag === 'input' || tag === 'textarea' || tag === 'select' || document.activeElement.isContentEditable) return;
-
-    // Only handle when player modal is open OR when no other modal is visible
-    const otherModals = document.querySelectorAll('.modal-overlay:not(.hidden):not(#np-modal-overlay)');
-    if (otherModals.length > 0 && !npModalOpen) return;
-
-    switch (event.key) {
-        case ' ':
-            if (!currentTrack) return;
-            event.preventDefault();
-            togglePlayback();
-            break;
-        case 'ArrowLeft':
-            if (!audioPlayer || !audioPlayer.duration) return;
-            event.preventDefault();
-            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 5);
-            break;
-        case 'ArrowRight':
-            if (!audioPlayer || !audioPlayer.duration) return;
-            event.preventDefault();
-            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 5);
-            break;
-        case 'ArrowUp':
-            event.preventDefault();
-            if (audioPlayer) {
-                const newVol = Math.min(1, audioPlayer.volume + 0.05);
-                audioPlayer.volume = newVol;
-                syncVolumeUI(Math.round(newVol * 100));
-            }
-            break;
-        case 'ArrowDown':
-            event.preventDefault();
-            if (audioPlayer) {
-                const newVol = Math.max(0, audioPlayer.volume - 0.05);
-                audioPlayer.volume = newVol;
-                syncVolumeUI(Math.round(newVol * 100));
-            }
-            break;
-        case 'm':
-        case 'M':
-            if (npModalOpen) handleNpMuteToggle();
-            break;
-        case 'Escape':
-            if (npModalOpen) closeNowPlayingModal();
-            break;
-        default:
-            return; // Don't prevent default for unhandled keys
-    }
-}
-
-function syncVolumeUI(volumePercent) {
-    // Sync both sidebar and modal volume UIs
-    const sidebarVol = document.getElementById('volume-slider');
-    const npVol = document.getElementById('np-volume-slider');
-    const npFill = document.getElementById('np-volume-fill');
-
-    if (sidebarVol) {
-        sidebarVol.value = volumePercent;
-        sidebarVol.style.setProperty('--volume-percent', volumePercent + '%');
-    }
-    if (npVol) npVol.value = volumePercent;
-    if (npFill) npFill.style.width = volumePercent + '%';
-}
-
-function getNpAlbumArtUrl() {
-    if (!currentTrack) return null;
-    return currentTrack.image_url || currentTrack.album_cover_url || currentTrack.thumb_url || null;
-}
-
-// ===============================
-// WEB AUDIO VISUALIZER
-// ===============================
-
-function npInitVisualizer() {
-    if (npVizInitialized || !audioPlayer) return;
-    try {
-        if (!npAudioContext) {
-            npAudioContext = new (window.AudioContext || window.webkitAudioContext)();
-        }
-        if (!npMediaSource) {
-            npMediaSource = npAudioContext.createMediaElementSource(audioPlayer);
-            npAnalyser = npAudioContext.createAnalyser();
-            npAnalyser.fftSize = 64;
-            npAnalyser.smoothingTimeConstant = 0.8;
-            npMediaSource.connect(npAnalyser);
-            npAnalyser.connect(npAudioContext.destination);
-        }
-        npVizInitialized = true;
-    } catch (e) {
-        console.warn('Web Audio visualizer init failed, using CSS fallback:', e.message);
-        // Mark as CSS fallback
-        const viz = document.getElementById('np-visualizer');
-        if (viz) viz.classList.add('np-viz-css-fallback');
-        npVizInitialized = true; // don't retry
-    }
-}
-
-function npStartVisualizerLoop() {
-    if (npVizAnimFrame) return; // Already running
-    if (!npAnalyser) return; // No analyser — CSS fallback handles it
-
-    if (npAudioContext && npAudioContext.state === 'suspended') {
-        npAudioContext.resume();
-    }
-
-    const bars = document.querySelectorAll('.np-viz-bar');
-    if (bars.length === 0) return;
-    const bufferLength = npAnalyser.frequencyBinCount;
-    const dataArray = new Uint8Array(bufferLength);
-
-    function draw() {
-        npVizAnimFrame = requestAnimationFrame(draw);
-        npAnalyser.getByteFrequencyData(dataArray);
-
-        // Map 7 bars to frequency bins (skip bin 0 which is DC offset)
-        const binCount = Math.min(bufferLength - 1, 7);
-        for (let i = 0; i < bars.length; i++) {
-            const binIndex = Math.min(i + 1, bufferLength - 1);
-            const value = dataArray[binIndex] / 255; // 0..1
-            const scale = Math.max(0.08, value); // minimum visible height
-            bars[i].style.transform = `scaleY(${scale})`;
-        }
-    }
-    draw();
-}
-
-function npStopVisualizerLoop() {
-    if (npVizAnimFrame) {
-        cancelAnimationFrame(npVizAnimFrame);
-        npVizAnimFrame = null;
-    }
-    // Reset bars to min
-    const bars = document.querySelectorAll('.np-viz-bar');
-    bars.forEach(bar => { bar.style.transform = 'scaleY(0.125)'; });
-}
-
-// ===============================
-// SIDEBAR AUDIO VISUALIZER
-// ===============================
-
-let sidebarVizAnimFrame = null;
-let sidebarVisualizerType = 'bars'; // bars | wave | spectrum | mirror | equalizer | none
-const SIDEBAR_VIZ_BAR_COUNT = 32;
-
-let _sidebarVizBuiltType = null;
-
-function buildSidebarVizElements(type) {
-    const container = document.getElementById('sidebar-visualizer');
-    if (!container) return;
-    if (_sidebarVizBuiltType === type && container.children.length > 0) return;
-    _sidebarVizBuiltType = type;
-    container.innerHTML = '';
-    container.className = 'sidebar-visualizer';
-
-    if (type === 'bars') {
-        container.classList.add('viz-bars');
-        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
-            const bar = document.createElement('div');
-            bar.className = 'sidebar-viz-bar';
-            container.appendChild(bar);
-        }
-    } else if (type === 'wave' || type === 'spectrum') {
-        container.classList.add('viz-canvas');
-        const canvas = document.createElement('canvas');
-        canvas.className = 'sidebar-viz-canvas';
-        canvas.width = 10;
-        canvas.height = 600;
-        container.appendChild(canvas);
-    } else if (type === 'mirror') {
-        container.classList.add('viz-mirror');
-        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
-            const bar = document.createElement('div');
-            bar.className = 'sidebar-viz-mirror-bar';
-            container.appendChild(bar);
-        }
-    } else if (type === 'equalizer') {
-        container.classList.add('viz-equalizer');
-        for (let i = 0; i < SIDEBAR_VIZ_BAR_COUNT; i++) {
-            const wrap = document.createElement('div');
-            wrap.className = 'sidebar-viz-eq-wrap';
-            const bar = document.createElement('div');
-            bar.className = 'sidebar-viz-eq-bar';
-            const peak = document.createElement('div');
-            peak.className = 'sidebar-viz-eq-peak';
-            wrap.appendChild(bar);
-            wrap.appendChild(peak);
-            container.appendChild(wrap);
-        }
-    }
-}
-
-function startSidebarVisualizer() {
-    const type = sidebarVisualizerType;
-    if (type === 'none') return;
-
-    const container = document.getElementById('sidebar-visualizer');
-    if (!container) return;
-
-    buildSidebarVizElements(type);
-    container.classList.add('active');
-
-    if (sidebarVizAnimFrame) return;
-    if (!npAnalyser) return;
-
-    const bufferLength = npAnalyser.frequencyBinCount;
-    const dataArray = new Uint8Array(bufferLength);
-    const hueStart = 200, hueRange = 160;
-
-    // Helper: average frequency bins for a given segment index
-    function getBinValue(i, count) {
-        const binsPerSeg = Math.max(1, Math.floor((bufferLength - 1) / count));
-        let sum = 0;
-        const start = i * binsPerSeg + 1;
-        for (let b = 0; b < binsPerSeg; b++) sum += dataArray[Math.min(start + b, bufferLength - 1)];
-        return (sum / binsPerSeg) / 255;
-    }
-
-    // ── Bars ──
-    if (type === 'bars') {
-        const bars = container.querySelectorAll('.sidebar-viz-bar');
-        if (bars.length === 0) return;
-        function drawBars() {
-            sidebarVizAnimFrame = requestAnimationFrame(drawBars);
-            npAnalyser.getByteFrequencyData(dataArray);
-            for (let i = 0; i < bars.length; i++) {
-                const value = getBinValue(i, bars.length);
-                const scale = Math.max(0.08, value);
-                const hue = (hueStart + (i / bars.length) * hueRange + value * 30) % 360;
-                bars[i].style.transform = `scaleX(${scale})`;
-                bars[i].style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
-            }
-        }
-        drawBars();
-
-        // ── Wave ──
-    } else if (type === 'wave') {
-        const canvas = container.querySelector('.sidebar-viz-canvas');
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
-        let hueOffset = 0;
-        function drawWave() {
-            sidebarVizAnimFrame = requestAnimationFrame(drawWave);
-            const ch = container.clientHeight;
-            if (ch > 0 && canvas.height !== ch) canvas.height = ch;
-            npAnalyser.getByteFrequencyData(dataArray);
-            const w = canvas.width, h = canvas.height;
-            if (h === 0) return;
-            ctx.clearRect(0, 0, w, h);
-
-            let totalEnergy = 0;
-            for (let i = 1; i < bufferLength; i++) totalEnergy += dataArray[i];
-            const avgEnergy = totalEnergy / (bufferLength - 1) / 255;
-            hueOffset = (hueOffset + 0.5) % 360;
-
-            const segments = 64;
-            ctx.lineWidth = 3;
-            ctx.lineCap = 'round';
-            ctx.beginPath();
-            for (let i = 0; i <= segments; i++) {
-                const y = (i / segments) * h;
-                const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
-                const value = dataArray[binIdx] / 255;
-                const x = (w / 2) + Math.sin((i / segments) * Math.PI * 4 + Date.now() * 0.003) * value * (w - 2) * 0.4;
-                if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
-            }
-            const grad = ctx.createLinearGradient(0, 0, 0, h);
-            grad.addColorStop(0, `hsla(${hueOffset + 200}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
-            grad.addColorStop(0.5, `hsla(${hueOffset + 280}, 80%, 55%, ${0.3 + avgEnergy * 0.7})`);
-            grad.addColorStop(1, `hsla(${hueOffset + 360}, 80%, 60%, ${0.3 + avgEnergy * 0.7})`);
-            ctx.strokeStyle = grad;
-            ctx.stroke();
-            ctx.lineWidth = 6;
-            ctx.globalAlpha = 0.15 + avgEnergy * 0.2;
-            ctx.stroke();
-            ctx.globalAlpha = 1;
-        }
-        drawWave();
-
-        // ── Spectrum (mountain/terrain fill) ──
-    } else if (type === 'spectrum') {
-        const canvas = container.querySelector('.sidebar-viz-canvas');
-        if (!canvas) return;
-        const ctx = canvas.getContext('2d');
-        let hueOffset = 0;
-        // Smoothed values for fluid motion
-        const smoothed = new Float32Array(64);
-
-        function drawSpectrum() {
-            sidebarVizAnimFrame = requestAnimationFrame(drawSpectrum);
-            const ch = container.clientHeight;
-            if (ch > 0 && canvas.height !== ch) canvas.height = ch;
-            npAnalyser.getByteFrequencyData(dataArray);
-            const w = canvas.width, h = canvas.height;
-            if (h === 0) return;
-            ctx.clearRect(0, 0, w, h);
-
-            hueOffset = (hueOffset + 0.3) % 360;
-            const segments = smoothed.length;
-
-            // Smooth the frequency data
-            for (let i = 0; i < segments; i++) {
-                const binIdx = Math.min(Math.floor((i / segments) * (bufferLength - 1)) + 1, bufferLength - 1);
-                const target = dataArray[binIdx] / 255;
-                smoothed[i] += (target - smoothed[i]) * 0.25;
-            }
-
-            // Draw filled mountain shape from left edge
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            for (let i = 0; i <= segments; i++) {
-                const y = (i / segments) * h;
-                const value = i < segments ? smoothed[i] : smoothed[segments - 1];
-                const x = value * w * 0.95;
-                ctx.lineTo(x, y);
-            }
-            ctx.lineTo(0, h);
-            ctx.closePath();
-
-            // Gradient fill
-            const fillGrad = ctx.createLinearGradient(0, 0, 0, h);
-            fillGrad.addColorStop(0, `hsla(${hueOffset + 200}, 85%, 55%, 0.7)`);
-            fillGrad.addColorStop(0.25, `hsla(${hueOffset + 240}, 80%, 50%, 0.6)`);
-            fillGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 85%, 50%, 0.65)`);
-            fillGrad.addColorStop(0.75, `hsla(${hueOffset + 330}, 80%, 50%, 0.6)`);
-            fillGrad.addColorStop(1, `hsla(${hueOffset + 360}, 85%, 55%, 0.7)`);
-            ctx.fillStyle = fillGrad;
-            ctx.fill();
-
-            // Bright edge line
-            ctx.beginPath();
-            ctx.moveTo(0, 0);
-            for (let i = 0; i <= segments; i++) {
-                const y = (i / segments) * h;
-                const value = i < segments ? smoothed[i] : smoothed[segments - 1];
-                ctx.lineTo(value * w * 0.95, y);
-            }
-            const lineGrad = ctx.createLinearGradient(0, 0, 0, h);
-            lineGrad.addColorStop(0, `hsla(${hueOffset + 200}, 90%, 70%, 0.9)`);
-            lineGrad.addColorStop(0.5, `hsla(${hueOffset + 290}, 90%, 65%, 0.9)`);
-            lineGrad.addColorStop(1, `hsla(${hueOffset + 360}, 90%, 70%, 0.9)`);
-            ctx.strokeStyle = lineGrad;
-            ctx.lineWidth = 1.5;
-            ctx.stroke();
-
-            // Outer glow
-            ctx.lineWidth = 4;
-            ctx.globalAlpha = 0.2;
-            ctx.stroke();
-            ctx.globalAlpha = 1;
-        }
-        drawSpectrum();
-
-        // ── Mirror (bars from center outward) ──
-    } else if (type === 'mirror') {
-        const bars = container.querySelectorAll('.sidebar-viz-mirror-bar');
-        if (bars.length === 0) return;
-        function drawMirror() {
-            sidebarVizAnimFrame = requestAnimationFrame(drawMirror);
-            npAnalyser.getByteFrequencyData(dataArray);
-            const half = Math.floor(bars.length / 2);
-            for (let i = 0; i < half; i++) {
-                const value = getBinValue(i, half);
-                const scale = Math.max(0.06, value);
-                const hue = (hueStart + (i / half) * hueRange + value * 30) % 360;
-                const color = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
-                // Top half — mirror index from center
-                const topIdx = half - 1 - i;
-                const bottomIdx = half + i;
-                bars[topIdx].style.transform = `scaleX(${scale})`;
-                bars[topIdx].style.backgroundColor = color;
-                if (bottomIdx < bars.length) {
-                    bars[bottomIdx].style.transform = `scaleX(${scale})`;
-                    bars[bottomIdx].style.backgroundColor = color;
-                }
-            }
-        }
-        drawMirror();
-
-        // ── Equalizer (bars with falling peak indicators) ──
-    } else if (type === 'equalizer') {
-        const wraps = container.querySelectorAll('.sidebar-viz-eq-wrap');
-        if (wraps.length === 0) return;
-        const peaks = new Float32Array(wraps.length);
-        const peakVelocity = new Float32Array(wraps.length);
-
-        function drawEqualizer() {
-            sidebarVizAnimFrame = requestAnimationFrame(drawEqualizer);
-            npAnalyser.getByteFrequencyData(dataArray);
-            for (let i = 0; i < wraps.length; i++) {
-                const value = getBinValue(i, wraps.length);
-                const scale = Math.max(0.06, value);
-                const hue = (hueStart + (i / wraps.length) * hueRange + value * 30) % 360;
-                const barEl = wraps[i].querySelector('.sidebar-viz-eq-bar');
-                const peakEl = wraps[i].querySelector('.sidebar-viz-eq-peak');
-
-                barEl.style.transform = `scaleX(${scale})`;
-                barEl.style.backgroundColor = `hsla(${hue}, 80%, ${50 + value * 15}%, ${0.5 + value * 0.5})`;
-
-                // Peak hold with gravity
-                if (value > peaks[i]) {
-                    peaks[i] = value;
-                    peakVelocity[i] = 0;
-                } else {
-                    peakVelocity[i] += 0.002; // gravity
-                    peaks[i] = Math.max(0, peaks[i] - peakVelocity[i]);
-                }
-                const peakPos = Math.max(0.06, peaks[i]);
-                peakEl.style.left = `${peakPos * 100}%`;
-                peakEl.style.backgroundColor = `hsla(${hue}, 90%, 75%, ${0.6 + peaks[i] * 0.4})`;
-                peakEl.style.boxShadow = `0 0 4px hsla(${hue}, 90%, 70%, ${peaks[i] * 0.5})`;
-            }
-        }
-        drawEqualizer();
-    }
-}
-
-function stopSidebarVisualizer() {
-    if (sidebarVizAnimFrame) {
-        cancelAnimationFrame(sidebarVizAnimFrame);
-        sidebarVizAnimFrame = null;
-    }
-    const container = document.getElementById('sidebar-visualizer');
-    if (container) {
-        container.classList.remove('active');
-    }
-}
-
-// Listen for visualizer type changes in settings — use isPlaying (not wasRunning)
-// so switching from 'none' to a real type while music plays starts the visualizer
-document.addEventListener('change', (e) => {
-    if (e.target.id === 'sidebar-visualizer-type') {
-        const newType = e.target.value;
-        stopSidebarVisualizer();
-        _sidebarVizBuiltType = null; // force rebuild for new type
-        sidebarVisualizerType = newType;
-        if (isPlaying && newType !== 'none') {
-            npInitVisualizer();
-            startSidebarVisualizer();
-        }
-    }
-});
-
-// ===============================
-// RADIO MODE
-// ===============================
-
-async function npFetchRadioTracks() {
-    if (!currentTrack || !currentTrack.id) return;
-    try {
-        npLoadingQueueItem = true;
-        const excludeIds = npRecentlyPlayedIds.join(',');
-        const resp = await fetch(`/api/library/radio?track_id=${currentTrack.id}&limit=50&exclude=${encodeURIComponent(excludeIds)}`);
-        if (!resp.ok) {
-            console.warn('Radio endpoint returned', resp.status);
-            npLoadingQueueItem = false;
-            return;
-        }
-        const data = await resp.json();
-        // Bail if radio was toggled off during the fetch
-        if (!npRadioMode) { npLoadingQueueItem = false; return; }
-        if (data.tracks && data.tracks.length > 0) {
-            data.tracks.forEach(t => {
-                npQueue.push({
-                    title: t.title || 'Unknown Track',
-                    artist: t.artist || 'Unknown Artist',
-                    album: t.album || 'Unknown Album',
-                    file_path: t.file_path,
-                    filename: t.file_path,
-                    is_library: true,
-                    image_url: t.image_url || null,
-                    id: t.id,
-                    artist_id: t.artist_id,
-                    album_id: t.album_id,
-                    bitrate: t.bitrate,
-                    sample_rate: t.sample_rate
-                });
-            });
-            showToast(`Radio: Added ${data.tracks.length} similar tracks`, 'success');
-            renderNpQueue();
-            updateNpPrevNextButtons();
-            npLoadingQueueItem = false;
-            // Only auto-advance if nothing is currently playing (triggered by onAudioEnded)
-            if (!isPlaying) {
-                playNextInQueue();
-            }
-        } else {
-            showToast('Radio: No similar tracks found', 'info');
-            npLoadingQueueItem = false;
-        }
-    } catch (e) {
-        console.warn('Radio fetch error:', e);
-        npLoadingQueueItem = false;
-    }
-}
-
-// Media Session API
-function initMediaSession() {
-    if (!('mediaSession' in navigator)) return;
-
-    navigator.mediaSession.setActionHandler('play', () => {
-        if (audioPlayer && currentTrack) {
-            audioPlayer.play().then(() => setPlayingState(true));
-        }
-    });
-    navigator.mediaSession.setActionHandler('pause', () => {
-        if (audioPlayer) {
-            audioPlayer.pause();
-            setPlayingState(false);
-        }
-    });
-    navigator.mediaSession.setActionHandler('stop', () => {
-        handleStop();
-    });
-    navigator.mediaSession.setActionHandler('seekbackward', () => {
-        if (audioPlayer && audioPlayer.duration) {
-            audioPlayer.currentTime = Math.max(0, audioPlayer.currentTime - 10);
-        }
-    });
-    navigator.mediaSession.setActionHandler('seekforward', () => {
-        if (audioPlayer && audioPlayer.duration) {
-            audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
-        }
-    });
-    navigator.mediaSession.setActionHandler('previoustrack', () => {
-        if (npQueue.length > 0) playPreviousInQueue();
-    });
-    navigator.mediaSession.setActionHandler('nexttrack', () => {
-        if (npQueue.length > 0) playNextInQueue();
-    });
-}
-
-function updateMediaSessionMetadata() {
-    if (!('mediaSession' in navigator) || !currentTrack) return;
-    const artwork = [];
-    const artUrl = getNpAlbumArtUrl();
-    if (artUrl) artwork.push({ src: artUrl, sizes: '512x512', type: 'image/jpeg' });
-
-    navigator.mediaSession.metadata = new MediaMetadata({
-        title: currentTrack.title || 'Unknown Track',
-        artist: currentTrack.artist || 'Unknown Artist',
-        album: currentTrack.album || 'Unknown Album',
-        artwork: artwork
-    });
-}
-
-function updateMediaSessionPlaybackState() {
-    if (!('mediaSession' in navigator)) return;
-    if (!currentTrack) {
-        navigator.mediaSession.playbackState = 'none';
-    } else {
-        navigator.mediaSession.playbackState = isPlaying ? 'playing' : 'paused';
-    }
-}
-
-// ===============================
-// SUPPORT MODAL
-// ===============================
-
-function showSupportModal() {
-    const overlay = document.getElementById('support-modal-overlay');
-    if (overlay) overlay.classList.remove('hidden');
-}
-
-function closeSupportModal() {
-    const overlay = document.getElementById('support-modal-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-async function copyAddress(address, cryptoName) {
-    try {
-        // navigator.clipboard requires HTTPS — use fallback for HTTP (Docker)
-        if (navigator.clipboard && window.isSecureContext) {
-            await navigator.clipboard.writeText(address);
-        } else {
-            const textarea = document.createElement('textarea');
-            textarea.value = address;
-            textarea.style.position = 'fixed';
-            textarea.style.opacity = '0';
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textarea);
-        }
-        showToast(`${cryptoName} address copied to clipboard`, 'success');
-    } catch (error) {
-        console.error('Failed to copy address:', error);
-        // Show the address so user can copy manually
-        showToast(`${cryptoName}: ${address}`, 'info');
-    }
-}
-
-// ===============================
-// SETTINGS FUNCTIONALITY
-// ===============================
-
-let settingsAutoSaveTimer = null;
-
-function debouncedAutoSaveSettings() {
-    if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
-    settingsAutoSaveTimer = setTimeout(() => saveSettings(true), 2000);
-}
-
-function handleManualSaveClick() {
-    if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
-    saveSettings(false);
-}
-
-function initializeSettings() {
-    // This function is called when the settings page is loaded.
-    // It attaches event listeners to all interactive elements on the page.
-
-    // Accent color listeners (live preview + custom picker toggle)
-    initAccentColorListeners();
-
-    // Main save button (manual save, non-quiet)
-    // Uses named function reference so addEventListener deduplicates across repeated calls
-    const saveButton = document.getElementById('save-settings');
-    if (saveButton) {
-        saveButton.addEventListener('click', handleManualSaveClick);
-    }
-
-    // Debounced auto-save on all settings inputs
-    // Uses named function reference (debouncedAutoSaveSettings) so addEventListener deduplicates
-    const settingsPage = document.getElementById('settings-page');
-    if (settingsPage) {
-        settingsPage.querySelectorAll('input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="range"]').forEach(input => {
-            input.addEventListener('input', debouncedAutoSaveSettings);
-        });
-        settingsPage.querySelectorAll('input[type="checkbox"], select').forEach(input => {
-            input.addEventListener('change', debouncedAutoSaveSettings);
-        });
-    }
-
-    // Server toggle buttons
-    const plexToggle = document.getElementById('plex-toggle');
-    if (plexToggle) {
-        plexToggle.addEventListener('click', () => toggleServer('plex'));
-    }
-    const jellyfinToggle = document.getElementById('jellyfin-toggle');
-    if (jellyfinToggle) {
-        jellyfinToggle.addEventListener('click', () => toggleServer('jellyfin'));
-    }
-
-    // Auto-detect buttons
-    const detectSlskdBtn = document.querySelector('#soulseek-url + .detect-button');
-    if (detectSlskdBtn) {
-        detectSlskdBtn.addEventListener('click', autoDetectSlskd);
-    }
-    const detectPlexBtn = document.querySelector('#plex-container .detect-button');
-    if (detectPlexBtn) {
-        detectPlexBtn.addEventListener('click', autoDetectPlex);
-    }
-    const detectJellyfinBtn = document.querySelector('#jellyfin-container .detect-button');
-    if (detectJellyfinBtn) {
-        detectJellyfinBtn.addEventListener('click', autoDetectJellyfin);
-    }
-
-    // Test connection buttons
-    // Test button event listeners removed - they use onclick attributes in HTML to avoid double firing
-}
-
-function resetFileOrganizationTemplates() {
-    // Reset templates to defaults
-    const defaults = {
-        album: '$albumartist/$albumartist - $album/$track - $title',
-        single: '$artist/$artist - $title/$title',
-        playlist: '$playlist/$artist - $title',
-        video: '$artist/$title-video'
-    };
-
-    document.getElementById('template-album-path').value = defaults.album;
-    document.getElementById('template-single-path').value = defaults.single;
-    document.getElementById('template-playlist-path').value = defaults.playlist;
-    document.getElementById('template-video-path').value = defaults.video;
-
-    debouncedAutoSaveSettings();
-}
-
-function validateFileOrganizationTemplates() {
-    const errors = [];
-
-    // Valid variables for each template type
-    const validVars = {
-        album: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$disc', '$discnum', '$cdnum', '$year', '$quality'],
-        single: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$year', '$quality'],
-        playlist: ['$artist', '$artistletter', '$playlist', '$title', '$year', '$quality'],
-        video: ['$artist', '$artistletter', '$title', '$year']
-    };
-
-    // Get template values
-    const albumPath = document.getElementById('template-album-path').value.trim();
-    const singlePath = document.getElementById('template-single-path').value.trim();
-    const playlistPath = document.getElementById('template-playlist-path').value.trim();
-
-    // Validate album template
-    if (albumPath) {
-        if (albumPath.endsWith('/')) {
-            errors.push('Album template cannot end with /');
-        }
-        if (albumPath.startsWith('/')) {
-            errors.push('Album template cannot start with /');
-        }
-        if (!albumPath.includes('/')) {
-            errors.push('Album template must include at least one folder (use / separator)');
-        }
-        if (albumPath.includes('//')) {
-            errors.push('Album template cannot have consecutive slashes //');
-        }
-        // Check for likely typos of valid variables (case-insensitive to catch $Album, $ARTIST, etc.)
-        const albumVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
-        const foundVars = albumPath.match(albumVarPattern) || [];
-        foundVars.forEach(v => {
-            // Normalize ${var} to $var for validation
-            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
-            const lowerVar = normalized.toLowerCase();
-            // Check if lowercase version exists in valid vars
-            const isValid = validVars.album.some(validVar => validVar.toLowerCase() === lowerVar);
-            if (!isValid) {
-                errors.push(`Invalid variable "${normalized}" in album template. Valid: ${validVars.album.join(', ')}`);
-            } else if (normalized !== lowerVar && validVars.album.includes(lowerVar)) {
-                // Variable is valid but has wrong case
-                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
-            }
-        });
-    }
-
-    // Validate single template
-    if (singlePath) {
-        if (singlePath.endsWith('/')) {
-            errors.push('Single template cannot end with /');
-        }
-        if (singlePath.startsWith('/')) {
-            errors.push('Single template cannot start with /');
-        }
-        // Note: single template is allowed to have no slash (flat file: "$artist - $title")
-        if (singlePath.includes('//')) {
-            errors.push('Single template cannot have consecutive slashes //');
-        }
-        const singleVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
-        const foundVars = singlePath.match(singleVarPattern) || [];
-        foundVars.forEach(v => {
-            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
-            const lowerVar = normalized.toLowerCase();
-            const isValid = validVars.single.some(validVar => validVar.toLowerCase() === lowerVar);
-            if (!isValid) {
-                errors.push(`Invalid variable "${normalized}" in single template. Valid: ${validVars.single.join(', ')}`);
-            } else if (normalized !== lowerVar && validVars.single.includes(lowerVar)) {
-                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
-            }
-        });
-    }
-
-    // Validate playlist template
-    if (playlistPath) {
-        if (playlistPath.endsWith('/')) {
-            errors.push('Playlist template cannot end with /');
-        }
-        if (playlistPath.startsWith('/')) {
-            errors.push('Playlist template cannot start with /');
-        }
-        if (!playlistPath.includes('/')) {
-            errors.push('Playlist template must include at least one folder (use / separator)');
-        }
-        if (playlistPath.includes('//')) {
-            errors.push('Playlist template cannot have consecutive slashes //');
-        }
-        const playlistVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
-        const foundVars = playlistPath.match(playlistVarPattern) || [];
-        foundVars.forEach(v => {
-            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
-            const lowerVar = normalized.toLowerCase();
-            const isValid = validVars.playlist.some(validVar => validVar.toLowerCase() === lowerVar);
-            if (!isValid) {
-                errors.push(`Invalid variable "${normalized}" in playlist template. Valid: ${validVars.playlist.join(', ')}`);
-            } else if (normalized !== lowerVar && validVars.playlist.includes(lowerVar)) {
-                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
-            }
-        });
-    }
-
-    return errors;
-}
-
-// Settings redesign — tab switching + service accordions
-function switchSettingsTab(tab) {
-    // Update tab bar
-    document.querySelectorAll('.stg-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
-    // Show/hide settings groups and section headers by data-stg attribute
-    document.querySelectorAll('#settings-page [data-stg]').forEach(g => {
-        g.style.display = g.dataset.stg === tab ? '' : 'none';
-    });
-    // Re-apply collapsed state on section bodies (tab switch resets inline display)
-    document.querySelectorAll('#settings-page .settings-section-body.collapsed').forEach(b => {
-        b.style.display = 'none';
-    });
-    // Also hide/show the column wrappers if they're empty in this tab
-    document.querySelectorAll('#settings-page .settings-left-column, #settings-page .settings-right-column, #settings-page .settings-third-column').forEach(col => {
-        const hasVisible = Array.from(col.querySelectorAll('.settings-group[data-stg]')).some(g => g.style.display !== 'none');
-        col.style.display = hasVisible ? '' : 'none';
-    });
-    // Re-apply conditional visibility (quality profile, source containers, etc.)
-    if (typeof updateDownloadSourceUI === 'function') {
-        try { updateDownloadSourceUI(); } catch (e) { }
-    }
-    // Load DB maintenance info when switching to Advanced tab
-    if (tab === 'advanced' && typeof loadDbMaintenanceInfo === 'function') {
-        try { loadDbMaintenanceInfo(); } catch (e) { }
-    }
-    // Initialize live log viewer when switching to Logs tab
-    if (tab === 'logs') {
-        _logViewerInit();
-    } else {
-        _logViewerStop();
-    }
-    // Refresh the green/yellow header gradient when arriving on Connections
-    if (tab === 'connections') {
-        try { applyServiceStatusGradients(); } catch (e) { }
-    }
-}
-
-// ── Settings → Connections: per-service status gradient + verify wiring ──
-// Gradient shows green when the user has filled in credentials, yellow when empty.
-// It's based purely on config presence (cheap, no API calls). The verify layer —
-// which runs on expand / Expand All — surfaces whether those credentials actually
-// work, via an inline warning bar inside the expanded panel.
-
-let _stgServiceStatusState = {};  // service -> {configured: bool}
-let _stgServiceVerifyInFlight = {};  // service -> true while a verify call is running
-
-async function applyServiceStatusGradients() {
-    try {
-        const resp = await fetch('/api/settings/config-status');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        _stgServiceStatusState = data || {};
-        document.querySelectorAll('#settings-page .stg-service[data-service]').forEach(card => {
-            const service = card.getAttribute('data-service');
-            const header = card.querySelector('.stg-service-header');
-            if (!service || !header) return;
-            const configured = !!(data[service] && data[service].configured);
-            header.classList.toggle('status-configured', configured);
-            header.classList.toggle('status-missing', !configured);
-            // Ensure the header has a spinner placeholder for the verify-checking state
-            if (!header.querySelector('.stg-service-verify-spinner')) {
-                const spinner = document.createElement('span');
-                spinner.className = 'stg-service-verify-spinner';
-                // Insert before the chevron on the right
-                const chevron = header.querySelector('.stg-service-chevron');
-                if (chevron) header.insertBefore(spinner, chevron);
-                else header.appendChild(spinner);
-            }
-        });
-    } catch (e) {
-        console.warn('[Settings Status] Failed to apply gradients:', e);
-    }
-}
-
-function _stgSetCheckingState(service, isChecking) {
-    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
-    if (!card) return;
-    const header = card.querySelector('.stg-service-header');
-    const body = card.querySelector('.stg-service-body');
-    if (header) {
-        header.classList.toggle('status-checking', !!isChecking);
-        // Lazy-create the spinner element so it's there even if
-        // applyServiceStatusGradients() hasn't run yet.
-        if (!header.querySelector('.stg-service-verify-spinner')) {
-            const spinner = document.createElement('span');
-            spinner.className = 'stg-service-verify-spinner';
-            const chevron = header.querySelector('.stg-service-chevron');
-            if (chevron) header.insertBefore(spinner, chevron);
-            else header.appendChild(spinner);
-        }
-    }
-    if (!body) return;
-    const existing = body.querySelector('.stg-service-verify-status');
-    if (isChecking) {
-        if (!existing) {
-            const status = document.createElement('div');
-            status.className = 'stg-service-verify-status';
-            status.textContent = 'Testing connection…';
-            body.insertBefore(status, body.firstChild);
-        }
-    } else if (existing) {
-        existing.remove();
-    }
-}
-
-function _stgShowVerifyWarning(service, message) {
-    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
-    if (!card) return;
-    const body = card.querySelector('.stg-service-body');
-    if (!body) return;
-    const existing = body.querySelector('.stg-service-warning');
-    if (existing) existing.remove();
-    const warning = document.createElement('div');
-    warning.className = 'stg-service-warning';
-    warning.innerHTML = `
-        <span class="stg-service-warning-icon">&#9888;</span>
-        <span class="stg-service-warning-text"></span>
-    `;
-    warning.querySelector('.stg-service-warning-text').textContent =
-        message || 'Connection test failed.';
-    body.insertBefore(warning, body.firstChild);
-}
-
-function _stgClearVerifyWarning(service) {
-    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
-    if (!card) return;
-    const existing = card.querySelector('.stg-service-warning');
-    if (existing) existing.remove();
-}
-
-async function _stgRefreshAfterSave() {
-    // Called after a successful settings save. Cheap gradient refresh always,
-    // plus re-verify any cards the user currently has expanded (so they see
-    // immediate feedback on credentials they just edited). Collapsed cards
-    // keep their cached verify result until the user expands them.
-    try {
-        await applyServiceStatusGradients();
-        const expandedServices = Array.from(
-            document.querySelectorAll('#settings-page .stg-service.expanded[data-service]')
-        )
-            .map(card => card.getAttribute('data-service'))
-            .filter(Boolean);
-        if (expandedServices.length > 0) {
-            _stgVerifyServices(expandedServices, { force: true });
-        }
-    } catch (e) {
-        console.warn('[Settings Status] Post-save refresh failed:', e);
-    }
-}
-
-async function _stgVerifyServices(services, { force = false } = {}) {
-    if (!services || !services.length) return {};
-    // Mark all as checking immediately so the user sees spinners/status lines
-    services.forEach(svc => {
-        _stgServiceVerifyInFlight[svc] = true;
-        _stgSetCheckingState(svc, true);
-        _stgClearVerifyWarning(svc);
-    });
-    try {
-        const url = '/api/settings/verify' + (force ? '?force=true' : '');
-        const resp = await fetch(url, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ services })
-        });
-        const data = await resp.json();
-        services.forEach(svc => {
-            _stgServiceVerifyInFlight[svc] = false;
-            _stgSetCheckingState(svc, false);
-            const result = data[svc];
-            if (result && result.success === false) {
-                _stgShowVerifyWarning(svc, result.error || result.message || '');
-            }
-        });
-        return data;
-    } catch (e) {
-        console.warn('[Settings Verify] Network error:', e);
-        services.forEach(svc => {
-            _stgServiceVerifyInFlight[svc] = false;
-            _stgSetCheckingState(svc, false);
-            _stgShowVerifyWarning(svc, 'Unable to reach the verification endpoint.');
-        });
-        return {};
-    }
-}
-
-function toggleStgService(el) {
-    const service = el.closest('.stg-service');
-    if (service) {
-        const wasExpanded = service.classList.contains('expanded');
-        service.classList.toggle('expanded');
-        // Fire verify when expanding a single card (not on collapse). The backend
-        // caches per service for 5 min, so rapid expand/collapse won't re-ping.
-        if (!wasExpanded) {
-            const serviceName = service.getAttribute('data-service');
-            if (serviceName && !_stgServiceVerifyInFlight[serviceName]) {
-                _stgVerifyServices([serviceName]);
-            }
-        }
-    }
-}
-function toggleAllServiceAccordions(btn) {
-    const services = document.querySelectorAll('#settings-page .stg-service');
-    const allExpanded = Array.from(services).every(s => s.classList.contains('expanded'));
-    const willExpand = !allExpanded;
-    services.forEach(s => s.classList.toggle('expanded', willExpand));
-    btn.textContent = allExpanded ? 'Expand All' : 'Collapse All';
-
-    // On Expand All, fire a single batched verify for every service that has a
-    // data-service attribute. Backend caps concurrency at 3 to avoid rate limits.
-    // Skipped on Collapse All.
-    if (willExpand) {
-        const serviceNames = Array.from(services)
-            .map(s => s.getAttribute('data-service'))
-            .filter(Boolean)
-            .filter(name => !_stgServiceVerifyInFlight[name]);
-        if (serviceNames.length > 0) {
-            _stgVerifyServices(serviceNames);
-        }
-    }
-}
-
-// ── Hybrid source priority list (drag-and-drop) ──
-const HYBRID_SOURCES = [
-    { id: 'soulseek', name: 'Soulseek', icon: 'https://raw.githubusercontent.com/slskd/slskd/master/docs/icon.png', emoji: '🎵' },
-    { id: 'youtube', name: 'YouTube', icon: 'https://www.svgrepo.com/show/13671/youtube.svg', emoji: '▶️' },
-    { id: 'tidal', name: 'Tidal', icon: 'https://www.svgrepo.com/show/519734/tidal.svg', emoji: '🌊' },
-    { id: 'qobuz', name: 'Qobuz', icon: 'https://www.svgrepo.com/show/504778/qobuz.svg', emoji: '🎧' },
-    { id: 'hifi', name: 'HiFi', icon: null, emoji: '🎶' },
-    { id: 'deezer_dl', name: 'Deezer', icon: 'https://www.svgrepo.com/show/519734/deezer.svg', emoji: '🎧' },
-    { id: 'lidarr', name: 'Lidarr', icon: null, emoji: '📦' },
-];
-
-let _hybridSourceOrder = ['soulseek', 'youtube'];
-let _hybridSourceEnabled = { soulseek: true, youtube: true, tidal: false, qobuz: false, hifi: false, deezer_dl: false, lidarr: false };
-let _hybridVisualOrder = null; // Full visual order including disabled sources
-
-function buildHybridSourceList() {
-    const container = document.getElementById('hybrid-source-list');
-    if (!container) return;
-
-    container.innerHTML = '';
-    // Build visual order: use persisted visual order, or enabled first + disabled at bottom
-    if (!_hybridVisualOrder) {
-        _hybridVisualOrder = [..._hybridSourceOrder];
-        for (const src of HYBRID_SOURCES) {
-            if (!_hybridVisualOrder.includes(src.id)) _hybridVisualOrder.push(src.id);
-        }
-    }
-    const allIds = _hybridVisualOrder;
-
-    allIds.forEach((srcId, idx) => {
-        const src = HYBRID_SOURCES.find(s => s.id === srcId);
-        if (!src) return;
-        const enabled = _hybridSourceEnabled[srcId] !== false;
-        const isInOrder = _hybridSourceOrder.includes(srcId);
-        const priorityNum = isInOrder && enabled ? _hybridSourceOrder.indexOf(srcId) + 1 : '';
-
-        const item = document.createElement('div');
-        item.className = `hybrid-source-item${enabled ? '' : ' disabled'}`;
-        item.draggable = true;
-        item.dataset.sourceId = srcId;
-
-        item.innerHTML = `
-            <span class="hybrid-source-arrows">
-                <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', -1)" title="Move up">▲</button>
-                <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', 1)" title="Move down">▼</button>
-            </span>
-            ${src.icon
-                ? `<img class="hybrid-source-icon" src="${src.icon}" alt="${src.name}" onerror="this.outerHTML='<span class=\\'hybrid-source-icon emoji-icon\\'>${src.emoji}</span>'">`
-                : `<span class="hybrid-source-icon emoji-icon">${src.emoji}</span>`
-            }
-            <span class="hybrid-source-name">${src.name}</span>
-            <span class="hybrid-source-priority">${priorityNum}</span>
-            <label class="hybrid-source-toggle">
-                <input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleHybridSource('${srcId}', this.checked)">
-                <span class="toggle-track"></span>
-            </label>
-        `;
-
-        container.appendChild(item);
-    });
-
-    // Sync hidden selects for backward compat
-    _syncHybridHiddenSelects();
-}
-
-function moveHybridSource(srcId, direction) {
-    if (!_hybridVisualOrder) return;
-    const idx = _hybridVisualOrder.indexOf(srcId);
-    if (idx < 0) return;
-    const newIdx = idx + direction;
-    if (newIdx < 0 || newIdx >= _hybridVisualOrder.length) return;
-
-    // Swap in visual order
-    [_hybridVisualOrder[idx], _hybridVisualOrder[newIdx]] = [_hybridVisualOrder[newIdx], _hybridVisualOrder[idx]];
-
-    // Rebuild enabled order from visual order
-    _hybridSourceOrder = _hybridVisualOrder.filter(id => _hybridSourceEnabled[id] !== false);
-    buildHybridSourceList();
-    updateDownloadSourceUI();
-    debouncedAutoSaveSettings();
-}
-
-function toggleHybridSource(srcId, enabled) {
-    _hybridSourceEnabled[srcId] = enabled;
-    // Rebuild enabled order from visual order so priority matches position
-    if (_hybridVisualOrder) {
-        _hybridSourceOrder = _hybridVisualOrder.filter(id => _hybridSourceEnabled[id] !== false);
-    }
-    buildHybridSourceList();
-    updateDownloadSourceUI();
-    debouncedAutoSaveSettings();
-}
-
-function _syncHybridOrderFromDOM() {
-    const container = document.getElementById('hybrid-source-list');
-    if (!container) return;
-    const items = container.querySelectorAll('.hybrid-source-item');
-    const newOrder = [];
-    items.forEach(item => {
-        const id = item.dataset.sourceId;
-        if (_hybridSourceEnabled[id] !== false) {
-            newOrder.push(id);
-        }
-    });
-    _hybridSourceOrder = newOrder;
-}
-
-function _syncHybridHiddenSelects() {
-    // Keep hidden selects in sync for backward compat with saveSettings
-    const primary = document.getElementById('hybrid-primary-source');
-    const secondary = document.getElementById('hybrid-secondary-source');
-    if (primary && _hybridSourceOrder.length > 0) primary.value = _hybridSourceOrder[0];
-    if (secondary && _hybridSourceOrder.length > 1) secondary.value = _hybridSourceOrder[1];
-}
-
-function getHybridOrder() {
-    return _hybridSourceOrder.filter(s => _hybridSourceEnabled[s] !== false);
-}
-
-function loadHybridSourceOrder(settings) {
-    const order = settings.download_source?.hybrid_order;
-    const sourceStatus = settings._source_status || {};
-
-    if (order && Array.isArray(order) && order.length > 0) {
-        _hybridSourceOrder = order;
-        _hybridSourceEnabled = {};
-        for (const src of HYBRID_SOURCES) {
-            _hybridSourceEnabled[src.id] = order.includes(src.id);
-        }
-    } else {
-        // Legacy: fall back to primary/secondary
-        const primary = settings.download_source?.hybrid_primary || 'soulseek';
-        const secondary = settings.download_source?.hybrid_secondary || 'youtube';
-        _hybridSourceOrder = [primary, secondary];
-        _hybridSourceEnabled = {};
-        for (const src of HYBRID_SOURCES) {
-            _hybridSourceEnabled[src.id] = src.id === primary || src.id === secondary;
-        }
-    }
-
-    // Auto-disable sources that aren't configured on the server
-    let changed = false;
-    for (const src of HYBRID_SOURCES) {
-        if (_hybridSourceEnabled[src.id] && sourceStatus[src.id] === false) {
-            _hybridSourceEnabled[src.id] = false;
-            changed = true;
-        }
-    }
-    if (changed) {
-        _hybridSourceOrder = _hybridSourceOrder.filter(id => _hybridSourceEnabled[id] !== false);
-    }
-
-    _hybridVisualOrder = null; // Reset so buildHybridSourceList rebuilds it
-    buildHybridSourceList();
-}
-
-function updateLossyBitrateOptions() {
-    const codec = document.getElementById('lossy-copy-codec')?.value || 'mp3';
-    const bitrateSelect = document.getElementById('lossy-copy-bitrate');
-    if (!bitrateSelect) return;
-    const opt320 = bitrateSelect.querySelector('option[value="320"]');
-    if (codec === 'opus') {
-        // Opus max is 256kbps per channel — hide 320 option
-        if (opt320) opt320.disabled = true;
-        if (bitrateSelect.value === '320') bitrateSelect.value = '256';
-    } else {
-        if (opt320) opt320.disabled = false;
-    }
-}
-
-function updatePlexConfigurationButtons() {
-    const plexUrl = document.getElementById('plex-url');
-    const plexToken = document.getElementById('plex-token');
-    const hasPlexConfig = Boolean((plexUrl?.value || '').trim() || (plexToken?.value || '').trim());
-    const plexViewConfigButton = document.getElementById('plex-view-config-button');
-    const plexLinkToPlexButton = document.getElementById('plex-link-to-plex-button');
-    const plexManualConfigButton = document.getElementById('plex-manual-config-button');
-    const plexUrlActions = document.getElementById('plex-url-actions');
-    const plexTokenActions = document.getElementById('plex-token-actions');
-    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
-
-    if (plexViewConfigButton) plexViewConfigButton.style.display = hasPlexConfig ? '' : 'none';
-    if (plexLinkToPlexButton) plexLinkToPlexButton.style.display = hasPlexConfig ? 'none' : '';
-    if (plexManualConfigButton) plexManualConfigButton.style.display = hasPlexConfig ? 'none' : '';
-    if (plexUrlActions) plexUrlActions.style.display = hasPlexConfig ? 'none' : 'flex';
-    if (plexTokenActions) plexTokenActions.style.display = hasPlexConfig ? 'none' : 'flex';
-    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
-}
-
-async function loadSettingsData() {
-    try {
-        const response = await fetch(API.settings);
-        const settings = await response.json();
-
-        // Populate Spotify settings
-        document.getElementById('spotify-client-id').value = settings.spotify?.client_id || '';
-        document.getElementById('spotify-client-secret').value = settings.spotify?.client_secret || '';
-        document.getElementById('spotify-redirect-uri').value = settings.spotify?.redirect_uri || 'http://127.0.0.1:8888/callback';
-        document.getElementById('spotify-callback-display').textContent = settings.spotify?.redirect_uri || 'http://127.0.0.1:8888/callback';
-
-        // Populate Tidal settings
-        document.getElementById('tidal-client-id').value = settings.tidal?.client_id || '';
-        document.getElementById('tidal-client-secret').value = settings.tidal?.client_secret || '';
-        document.getElementById('tidal-redirect-uri').value = settings.tidal?.redirect_uri || 'http://127.0.0.1:8889/tidal/callback';
-        document.getElementById('tidal-callback-display').textContent = settings.tidal?.redirect_uri || 'http://127.0.0.1:8889/tidal/callback';
-
-        // Populate Deezer OAuth settings
-        document.getElementById('deezer-app-id').value = settings.deezer?.app_id || '';
-        document.getElementById('deezer-app-secret').value = settings.deezer?.app_secret || '';
-        document.getElementById('deezer-redirect-uri').value = settings.deezer?.redirect_uri || 'http://127.0.0.1:8008/deezer/callback';
-        document.getElementById('deezer-callback-display').textContent = settings.deezer?.redirect_uri || 'http://127.0.0.1:8008/deezer/callback';
-
-        // Add event listeners to update display URLs when input changes
-        document.getElementById('spotify-redirect-uri').addEventListener('input', function () {
-            document.getElementById('spotify-callback-display').textContent = this.value || 'http://127.0.0.1:8888/callback';
-        });
-
-        document.getElementById('tidal-redirect-uri').addEventListener('input', function () {
-            document.getElementById('tidal-callback-display').textContent = this.value || 'http://127.0.0.1:8889/tidal/callback';
-        });
-
-        document.getElementById('deezer-redirect-uri').addEventListener('input', function () {
-            document.getElementById('deezer-callback-display').textContent = this.value || 'http://127.0.0.1:8008/deezer/callback';
-        });
-
-        // Populate Plex settings
-        const plexUrlInput = document.getElementById('plex-url');
-        const plexTokenInput = document.getElementById('plex-token');
-        if (plexUrlInput) plexUrlInput.value = settings.plex?.base_url || '';
-        if (plexTokenInput) plexTokenInput.value = settings.plex?.token || '';
-        if (plexUrlInput) plexUrlInput.addEventListener('input', updatePlexConfigurationButtons);
-        if (plexTokenInput) plexTokenInput.addEventListener('input', updatePlexConfigurationButtons);
-        updatePlexConfigurationButtons();
-
-        // Populate Jellyfin settings
-        document.getElementById('jellyfin-url').value = settings.jellyfin?.base_url || '';
-        document.getElementById('jellyfin-api-key').value = settings.jellyfin?.api_key || '';
-        document.getElementById('jellyfin-timeout').value = settings.jellyfin?.api_timeout || 120;
-
-        // Populate Navidrome settings
-        document.getElementById('navidrome-url').value = settings.navidrome?.base_url || '';
-        document.getElementById('navidrome-username').value = settings.navidrome?.username || '';
-        document.getElementById('navidrome-password').value = settings.navidrome?.password || '';
-
-        // Set active server and toggle visibility
-        const activeServer = settings.active_media_server || 'plex';
-        toggleServer(activeServer);
-
-        // Load Plex music libraries if Plex is the active server
-        if (activeServer === 'plex') {
-            loadPlexMusicLibraries();
-        }
-
-        // Load Jellyfin users and music libraries if Jellyfin is the active server
-        if (activeServer === 'jellyfin') {
-            loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
-        }
-
-        // Load Navidrome music folders if Navidrome is the active server
-        if (activeServer === 'navidrome') {
-            loadNavidromeMusicFolders();
-        }
-
-        // Populate Soulseek settings
-        document.getElementById('soulseek-url').value = settings.soulseek?.slskd_url || '';
-        document.getElementById('soulseek-api-key').value = settings.soulseek?.api_key || '';
-        document.getElementById('soulseek-search-timeout').value = settings.soulseek?.search_timeout || 60;
-        document.getElementById('soulseek-search-timeout-buffer').value = settings.soulseek?.search_timeout_buffer || 15;
-        document.getElementById('soulseek-min-peer-speed').value = settings.soulseek?.min_peer_upload_speed || 0;
-        document.getElementById('soulseek-max-peer-queue').value = settings.soulseek?.max_peer_queue || 0;
-        document.getElementById('soulseek-download-timeout').value = Math.round((settings.soulseek?.download_timeout || 600) / 60);
-        document.getElementById('soulseek-auto-clear-searches').checked = settings.soulseek?.auto_clear_searches !== false;
-
-        // Populate ListenBrainz settings
-        document.getElementById('listenbrainz-base-url').value = settings.listenbrainz?.base_url || '';
-        document.getElementById('listenbrainz-token').value = settings.listenbrainz?.token || '';
-
-        // Populate AcoustID settings
-        document.getElementById('acoustid-api-key').value = settings.acoustid?.api_key || '';
-        document.getElementById('acoustid-enabled').checked = settings.acoustid?.enabled || false;
-
-        // Populate Last.fm settings
-        document.getElementById('lastfm-api-key').value = settings.lastfm?.api_key || '';
-        document.getElementById('lastfm-api-secret').value = settings.lastfm?.api_secret || '';
-        document.getElementById('lastfm-scrobble-enabled').checked = settings.lastfm?.scrobble_enabled === true;
-        const lfmStatus = document.getElementById('lastfm-scrobble-status');
-        if (lfmStatus) {
-            lfmStatus.textContent = settings.lastfm?.session_key ? 'Authorized' : 'Not authorized';
-        }
-
-        // Populate ListenBrainz scrobble toggle
-        document.getElementById('listenbrainz-scrobble-enabled').checked = settings.listenbrainz?.scrobble_enabled === true;
-
-        // Populate Genius settings
-        document.getElementById('genius-access-token').value = settings.genius?.access_token || '';
-
-        // Populate iTunes settings
-        document.getElementById('itunes-country').value = settings.itunes?.country || 'US';
-
-        // Populate Discogs settings
-        document.getElementById('discogs-token').value = settings.discogs?.token || '';
-
-        // Populate Metadata source setting
-        document.getElementById('metadata-fallback-source').value = settings.metadata?.fallback_source || 'itunes';
-
-        // Populate Hydrabase settings
-        const hbConfig = settings.hydrabase || {};
-        document.getElementById('hydrabase-url').value = hbConfig.url || '';
-        document.getElementById('hydrabase-api-key').value = hbConfig.api_key || '';
-        document.getElementById('hydrabase-auto-connect').checked = hbConfig.auto_connect || false;
-        // Check live connection status + add Hydrabase to fallback dropdown if connected
-        fetch('/api/hydrabase/status').then(r => r.json()).then(s => {
-            const btn = document.getElementById('hydrabase-connect-btn');
-            const statusEl = document.getElementById('hydrabase-settings-status');
-            if (s.connected) {
-                if (btn) btn.textContent = 'Disconnect';
-                if (statusEl) { statusEl.textContent = 'Connected'; statusEl.style.color = '#4caf50'; }
-                // Add Hydrabase to fallback source dropdown
-                const fbSelect = document.getElementById('metadata-fallback-source');
-                if (fbSelect && !fbSelect.querySelector('option[value="hydrabase"]')) {
-                    const opt = document.createElement('option');
-                    opt.value = 'hydrabase';
-                    opt.textContent = 'Hydrabase (P2P)';
-                    fbSelect.appendChild(opt);
-                }
-                // Restore selection if it was hydrabase
-                if ((settings.metadata?.fallback_source) === 'hydrabase') {
-                    fbSelect.value = 'hydrabase';
-                }
-            }
-        }).catch(() => { });
-
-        // Populate Download settings (right column)
-        document.getElementById('download-path').value = settings.soulseek?.download_path || './downloads';
-        document.getElementById('transfer-path').value = settings.soulseek?.transfer_path || './Transfer';
-        document.getElementById('staging-path').value = settings.import?.staging_path || './Staging';
-        document.getElementById('music-videos-path').value = settings.library?.music_videos_path || './MusicVideos';
-
-        // Populate Download Source settings
-        document.getElementById('download-source-mode').value = settings.download_source?.mode || 'soulseek';
-        document.getElementById('stream-source').value = settings.download_source?.stream_source || 'youtube';
-        document.getElementById('max-concurrent-downloads').value = settings.download_source?.max_concurrent || '3';
-        loadHybridSourceOrder(settings);
-        document.getElementById('tidal-download-quality').value = settings.tidal_download?.quality || 'lossless';
-        document.getElementById('tidal-allow-fallback').checked = settings.tidal_download?.allow_fallback !== false;
-        document.getElementById('qobuz-quality').value = settings.qobuz?.quality || 'lossless';
-        document.getElementById('qobuz-allow-fallback').checked = settings.qobuz?.allow_fallback !== false;
-        document.getElementById('hifi-download-quality').value = settings.hifi_download?.quality || 'lossless';
-        document.getElementById('hifi-allow-fallback').checked = settings.hifi_download?.allow_fallback !== false;
-        document.getElementById('deezer-download-quality').value = settings.deezer_download?.quality || 'flac';
-        document.getElementById('deezer-allow-fallback').checked = settings.deezer_download?.allow_fallback !== false;
-        document.getElementById('deezer-download-arl').value = settings.deezer_download?.arl || '';
-        document.getElementById('lidarr-url').value = settings.lidarr_download?.url || '';
-        document.getElementById('lidarr-api-key').value = settings.lidarr_download?.api_key || '';
-        // Sync ARL to connections tab field + bidirectional listeners
-        const _connArl = document.getElementById('deezer-connection-arl');
-        const _dlArl = document.getElementById('deezer-download-arl');
-        if (_connArl) _connArl.value = settings.deezer_download?.arl || '';
-        if (_connArl && _dlArl) {
-            _connArl.addEventListener('input', () => { _dlArl.value = _connArl.value; });
-            _dlArl.addEventListener('input', () => { _connArl.value = _dlArl.value; });
-        }
-
-        // Populate YouTube settings
-        document.getElementById('youtube-cookies-browser').value = settings.youtube?.cookies_browser || '';
-        document.getElementById('youtube-download-delay').value = settings.youtube?.download_delay ?? 3;
-
-        // Update UI based on download source mode
-        updateDownloadSourceUI();
-
-        // Populate Database settings
-        document.getElementById('max-workers').value = settings.database?.max_workers || '5';
-
-        // Populate Post-Processing settings
-        document.getElementById('metadata-enabled').checked = settings.metadata_enhancement?.enabled !== false;
-        document.getElementById('embed-album-art').checked = settings.metadata_enhancement?.embed_album_art !== false;
-        document.getElementById('cover-art-download').checked = settings.metadata_enhancement?.cover_art_download !== false;
-        document.getElementById('prefer-caa-art').checked = settings.metadata_enhancement?.prefer_caa_art === true;
-        document.getElementById('lrclib-enabled').checked = settings.metadata_enhancement?.lrclib_enabled !== false;
-        document.getElementById('replaygain-enabled').checked = settings.post_processing?.replaygain_enabled === true;
-        // Load service master toggles
-        document.getElementById('embed-spotify').checked = settings.spotify?.embed_tags !== false;
-        document.getElementById('embed-itunes').checked = settings.itunes?.embed_tags !== false;
-        document.getElementById('embed-musicbrainz').checked = settings.musicbrainz?.embed_tags !== false;
-        document.getElementById('embed-deezer').checked = settings.deezer?.embed_tags !== false;
-        document.getElementById('embed-audiodb').checked = settings.audiodb?.embed_tags !== false;
-        document.getElementById('embed-tidal').checked = settings.tidal?.embed_tags !== false;
-        document.getElementById('embed-qobuz').checked = settings.qobuz?.embed_tags !== false;
-        document.getElementById('embed-lastfm').checked = settings.lastfm?.embed_tags !== false;
-        document.getElementById('embed-genius').checked = settings.genius?.embed_tags !== false;
-        // Load per-tag toggles from data-config attributes
-        document.querySelectorAll('[data-config]').forEach(cb => {
-            const path = cb.dataset.config.split('.');
-            let val = settings;
-            for (const key of path) { val = val?.[key]; }
-            cb.checked = val !== false;
-        });
-        // Apply service disabled state to child tags
-        ['spotify', 'itunes', 'musicbrainz', 'deezer', 'audiodb', 'tidal', 'qobuz', 'lastfm', 'genius'].forEach(svc => {
-            const master = document.getElementById('embed-' + svc);
-            if (master) toggleServiceTags(master, svc);
-        });
-        document.getElementById('post-processing-options').style.display = settings.metadata_enhancement?.enabled !== false ? 'block' : 'none';
-
-        // Populate File Organization settings
-        document.getElementById('file-organization-enabled').checked = settings.file_organization?.enabled !== false;
-        document.getElementById('template-album-path').value = settings.file_organization?.templates?.album_path || '$albumartist/$albumartist - $album/$track - $title';
-        document.getElementById('template-single-path').value = settings.file_organization?.templates?.single_path || '$artist/$artist - $title/$title';
-        document.getElementById('template-playlist-path').value = settings.file_organization?.templates?.playlist_path || '$playlist/$artist - $title';
-        document.getElementById('template-video-path').value = settings.file_organization?.templates?.video_path || '$artist/$title-video';
-        document.getElementById('disc-label').value = settings.file_organization?.disc_label || 'Disc';
-        document.getElementById('collab-artist-mode').value = settings.file_organization?.collab_artist_mode || 'first';
-        document.getElementById('artist-separator').value = settings.metadata_enhancement?.tags?.artist_separator || ', ';
-        document.getElementById('write-multi-artist').checked = settings.metadata_enhancement?.tags?.write_multi_artist || false;
-        document.getElementById('feat-in-title').checked = settings.metadata_enhancement?.tags?.feat_in_title || false;
-        document.getElementById('allow-duplicate-tracks').checked = settings.wishlist?.allow_duplicate_tracks !== false;
-
-        // Populate Playlist Sync settings
-        document.getElementById('create-backup').checked = settings.playlist_sync?.create_backup !== false;
-
-        // Populate Post-Download Conversion settings
-        document.getElementById('downsample-hires').checked = settings.lossy_copy?.downsample_hires === true;
-        document.getElementById('lossy-copy-enabled').checked = settings.lossy_copy?.enabled === true;
-        document.getElementById('lossy-copy-codec').value = settings.lossy_copy?.codec || 'mp3';
-        document.getElementById('lossy-copy-bitrate').value = settings.lossy_copy?.bitrate || '320';
-        updateLossyBitrateOptions();
-        document.getElementById('lossy-copy-delete-original').checked = settings.lossy_copy?.delete_original === true;
-
-        // Populate Listening Stats settings
-        document.getElementById('listening-stats-enabled').checked = settings.listening_stats?.enabled === true;
-        document.getElementById('listening-stats-interval').value = settings.listening_stats?.poll_interval || 30;
-        document.getElementById('lossy-copy-options').style.display =
-            settings.lossy_copy?.enabled ? 'block' : 'none';
-
-        // Populate Music Library Paths
-        const _musicPaths = settings.library?.music_paths || [];
-        renderMusicPaths(_musicPaths);
-
-        // Populate Content Filter settings
-        document.getElementById('allow-explicit').checked = settings.content_filter?.allow_explicit !== false;
-
-        // Populate Genre Whitelist
-        const gwEnabled = settings.genre_whitelist?.enabled === true;
-        document.getElementById('genre-whitelist-enabled').checked = gwEnabled;
-        const gwContainer = document.getElementById('genre-whitelist-container');
-        if (gwContainer) gwContainer.style.display = gwEnabled ? '' : 'none';
-        if (gwEnabled) {
-            _genreWhitelistRender(settings.genre_whitelist?.genres || []);
-        }
-
-        // Populate Import settings
-        document.getElementById('import-replace-lower-quality').checked = settings.import?.replace_lower_quality === true;
-
-        // Populate M3U Export settings
-        document.getElementById('m3u-export-enabled').checked = settings.m3u_export?.enabled === true;
-        document.getElementById('m3u-entry-base-path').value = settings.m3u_export?.entry_base_path || '';
-
-        // Populate UI Appearance settings
-        const accentPreset = settings.ui_appearance?.accent_preset || '#1db954';
-        const accentCustom = settings.ui_appearance?.accent_color || '#1db954';
-        const presetSelect = document.getElementById('accent-preset');
-        const customPicker = document.getElementById('accent-custom-color');
-        const customGroup = document.getElementById('custom-color-group');
-        if (presetSelect) {
-            // Check if the saved preset matches a dropdown option
-            const presetOptions = Array.from(presetSelect.options).map(o => o.value);
-            if (presetOptions.includes(accentPreset)) {
-                presetSelect.value = accentPreset;
-            } else {
-                presetSelect.value = 'custom';
-            }
-            if (presetSelect.value === 'custom') {
-                if (customGroup) customGroup.style.display = '';
-                if (customPicker) customPicker.value = accentCustom;
-                applyAccentColor(accentCustom);
-            } else {
-                if (customGroup) customGroup.style.display = 'none';
-                applyAccentColor(accentPreset);
-            }
-        }
-
-        // Sidebar visualizer type
-        const vizType = settings.ui_appearance?.sidebar_visualizer || 'bars';
-        const vizSelect = document.getElementById('sidebar-visualizer-type');
-        if (vizSelect) vizSelect.value = vizType;
-        sidebarVisualizerType = vizType;
-
-        // Background particles toggle
-        const particlesEnabled = settings.ui_appearance?.particles_enabled !== false; // default true
-        const particlesCheckbox = document.getElementById('particles-enabled');
-        if (particlesCheckbox) particlesCheckbox.checked = particlesEnabled;
-        applyParticlesSetting(particlesEnabled);
-
-        // Worker orbs toggle
-        const workerOrbsEnabled = settings.ui_appearance?.worker_orbs_enabled !== false; // default true
-        const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
-        if (workerOrbsCheckbox) workerOrbsCheckbox.checked = workerOrbsEnabled;
-        applyWorkerOrbsSetting(workerOrbsEnabled);
-
-        // Reduce effects toggle
-        const reduceEffects = settings.ui_appearance?.reduce_effects === true; // default false
-        const reduceCheckbox = document.getElementById('reduce-effects-enabled');
-        if (reduceCheckbox) reduceCheckbox.checked = reduceEffects;
-        applyReduceEffects(reduceEffects);
-
-        // Populate Logging information
-        const logLevelSelect = document.getElementById('log-level-select');
-        if (logLevelSelect) logLevelSelect.value = settings.logging?.level || 'INFO';
-        document.getElementById('log-path-display').textContent = settings.logging?.path || 'logs/app.log';
-
-        // Load Discovery Lookback Period setting
-        try {
-            const lookbackResponse = await fetch('/api/discovery/lookback-period');
-            const lookbackData = await lookbackResponse.json();
-            if (lookbackData.period) {
-                document.getElementById('discovery-lookback-period').value = lookbackData.period;
-            }
-        } catch (error) {
-            console.error('Error loading discovery lookback period:', error);
-        }
-
-        // Load Hemisphere setting
-        try {
-            const hemiResponse = await fetch('/api/discovery/hemisphere');
-            const hemiData = await hemiResponse.json();
-            if (hemiData.hemisphere) {
-                document.getElementById('discovery-hemisphere').value = hemiData.hemisphere;
-            }
-        } catch (error) {
-            console.error('Error loading hemisphere setting:', error);
-        }
-
-        // Load current log level
-        try {
-            const logLevelResponse = await fetch('/api/settings/log-level');
-            const logLevelData = await logLevelResponse.json();
-            if (logLevelData.success && logLevelData.level) {
-                document.getElementById('log-level-select').value = logLevelData.level;
-            }
-        } catch (error) {
-            console.error('Error loading log level:', error);
-        }
-
-        // Load security settings
-        try {
-            const requirePin = settings.security?.require_pin_on_launch || false;
-            document.getElementById('security-require-pin').checked = requirePin;
-
-            // Check if admin has a PIN set
-            const profilesRes = await fetch('/api/profiles');
-            const profilesData = await profilesRes.json();
-            const adminProfile = (profilesData.profiles || []).find(p => p.is_admin);
-            const adminHasPin = adminProfile?.has_pin || false;
-
-            // Show/hide PIN setup vs change sections
-            document.getElementById('security-pin-setup').style.display = adminHasPin ? 'none' : 'block';
-            document.getElementById('security-change-pin-section').style.display = adminHasPin ? 'block' : 'none';
-
-            // If no PIN, disable the toggle
-            if (!adminHasPin) {
-                document.getElementById('security-require-pin').checked = false;
-                document.getElementById('security-require-pin').disabled = true;
-            }
-        } catch (error) {
-            console.error('Error loading security settings:', error);
-        }
-
-        // Check dev mode status
-        try {
-            const devResponse = await fetch('/api/dev-mode');
-            const devData = await devResponse.json();
-            if (devData.enabled) {
-                document.getElementById('dev-mode-status').textContent = 'Active';
-                document.getElementById('dev-mode-status').style.color = 'rgb(var(--accent-light-rgb))';
-                document.getElementById('hydrabase-nav').style.display = '';
-                document.getElementById('hydrabase-button-container').style.display = '';
-            }
-        } catch (error) {
-            console.error('Error checking dev mode:', error);
-        }
-
-    } catch (error) {
-        console.error('Error loading settings:', error);
-        showToast('Failed to load settings', 'error');
-    }
-}
-
-async function changeLogLevel() {
-    const selector = document.getElementById('log-level-select');
-    const level = selector.value;
-
-    try {
-        const response = await fetch('/api/settings/log-level', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ level: level })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(`Log level changed to ${level}`, 'success');
-            console.log(`Log level changed to: ${level}`);
-        } else {
-            showToast(`Failed to change log level: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error changing log level:', error);
-        showToast('Failed to change log level', 'error');
-    }
-}
-
-function updateMediaServerFields() {
-    const serverType = document.getElementById('media-server-type').value;
-    const urlInput = document.getElementById('media-server-url');
-    const tokenInput = document.getElementById('media-server-token');
-
-    if (serverType === 'plex') {
-        urlInput.placeholder = 'http://localhost:32400';
-        tokenInput.placeholder = 'Plex Token';
-    } else {
-        urlInput.placeholder = 'http://localhost:8096';
-        tokenInput.placeholder = 'Jellyfin API Key';
-    }
-}
-
-let _plexPinAuthRequestId = null;
-let _plexPinAuthPollInterval = null;
-
-function showPlexConfiguration(disableFields = false, isManualConfig = false) {
-    stopPlexPinAuthPolling();
-    const plexConfig = document.getElementById('plex-configuration');
-    const plexSetup = document.getElementById('plex-setup');
-    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
-    const plexUrl = document.getElementById('plex-url');
-    const plexToken = document.getElementById('plex-token');
-    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
-
-    if (plexConfig) plexConfig.style.display = '';
-    if (plexSetup) plexSetup.style.display = 'none';
-    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
-    if (plexUrl) plexUrl.disabled = disableFields;
-    if (plexToken) plexToken.disabled = disableFields;
-    if (plexLibraryContainer && isManualConfig) {
-        plexLibraryContainer.style.display = 'none';
-    }
-    setPlexConfigActionButton(isManualConfig);
-    updatePlexConfigurationButtons();
-}
-
-function showPlexSetup() {
-    const plexConfig = document.getElementById('plex-configuration');
-    const plexSetup = document.getElementById('plex-setup');
-    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
-    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
-
-    if (plexConfig) plexConfig.style.display = 'none';
-    if (plexSetup) plexSetup.style.display = '';
-    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
-    if (plexLibraryContainer) plexLibraryContainer.style.display = 'none';
-    setPlexConfigActionButton(false);
-}
-
-function setPlexConfigActionButton(isManualConfig) {
-    const actionButton = document.getElementById('plex-config-action-button');
-    if (!actionButton) return;
-
-    if (isManualConfig) {
-        actionButton.textContent = 'Cancel';
-        actionButton.onclick = showPlexSetup;
-        actionButton.title = 'Cancel manual Plex configuration';
-    } else {
-        actionButton.textContent = 'Clear Configuration';
-        actionButton.onclick = clearPlexConfiguration;
-        actionButton.title = 'Clear saved Plex configuration';
-    }
-}
-
-async function startPlexPinAuth() {
-    const setupButtons = document.getElementById('plex-setup-buttons');
-    const authFlow = document.getElementById('plex-pin-auth-flow');
-    const statusEl = document.getElementById('plex-pin-status');
-    if (setupButtons) setupButtons.style.display = 'none';
-    if (authFlow) authFlow.style.display = '';
-    if (statusEl) statusEl.textContent = 'Starting Plex authorization...';
-
-    try {
-        showLoadingOverlay('Starting Plex authorization...');
-        const response = await fetch('/api/plex/pin/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error(result.error || 'Failed to start Plex PIN flow');
-        }
-
-        _plexPinAuthRequestId = result.request_id;
-        const pinCodeEl = document.getElementById('plex-pin-code');
-        if (pinCodeEl) pinCodeEl.textContent = result.code || '';
-        if (statusEl) {
-            statusEl.textContent = result.expires_in
-                ? `Enter this code at plex.tv/link. Code expires in ${result.expires_in} seconds.`
-                : 'Enter this code at plex.tv/link. Waiting for authorization...';
-        }
-
-        startPlexPinAuthPolling();
-    } catch (error) {
-        console.error('Plex PIN auth start failed:', error);
-        showToast(error.message || 'Failed to start Plex authorization', 'error');
-        cancelPlexPinAuth();
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function startPlexPinAuthPolling() {
-    stopPlexPinAuthPolling();
-    if (!_plexPinAuthRequestId) return;
-    _plexPinAuthPollInterval = setInterval(pollPlexPinAuthStatus, 5000);
-    pollPlexPinAuthStatus();
-}
-
-function stopPlexPinAuthPolling() {
-    if (_plexPinAuthPollInterval) {
-        clearInterval(_plexPinAuthPollInterval);
-        _plexPinAuthPollInterval = null;
-    }
-}
-
-async function pollPlexPinAuthStatus() {
-    if (!_plexPinAuthRequestId) return;
-    try {
-        const response = await fetch(`/api/plex/pin/status?request_id=${encodeURIComponent(_plexPinAuthRequestId)}`);
-        const result = await response.json();
-        const statusEl = document.getElementById('plex-pin-status');
-
-        if (!result.success && result.expired) {
-            if (statusEl) statusEl.textContent = 'PIN code expired. Generate a new code to continue.';
-            stopPlexPinAuthPolling();
-            return;
-        }
-
-        if (result.success) {
-            stopPlexPinAuthPolling();
-            if (statusEl) statusEl.textContent = 'Authorization complete! Saving Plex configuration...';
-            document.getElementById('plex-url').value = result.found_url || '';
-            document.getElementById('plex-token').value = result.token || '';
-            if (typeof saveSettings === 'function') {
-                await saveSettings(true);
-            }
-            showToast('Plex successfully linked', 'success');
-            showPlexConfiguration(true);
-            await testConnection('plex');
-            return;
-        }
-
-        if (result.status) {
-            if (statusEl) statusEl.textContent = result.status;
-            return;
-        }
-
-        if (result.error) {
-            if (statusEl) statusEl.textContent = result.error;
-            return;
-        }
-    } catch (error) {
-        console.error('Error polling Plex PIN status:', error);
-        const statusEl = document.getElementById('plex-pin-status');
-        if (statusEl) statusEl.textContent = 'Unable to contact Plex auth status. Retrying...';
-    }
-}
-
-function cancelPlexPinAuth() {
-    stopPlexPinAuthPolling();
-    _plexPinAuthRequestId = null;
-    const setupButtons = document.getElementById('plex-setup-buttons');
-    const authFlow = document.getElementById('plex-pin-auth-flow');
-    if (setupButtons) setupButtons.style.display = '';
-    if (authFlow) authFlow.style.display = 'none';
-}
-
-function restartPlexPinAuth() {
-    cancelPlexPinAuth();
-    startPlexPinAuth();
-}
-
-async function clearPlexConfiguration() {
-    cancelPlexPinAuth();
-    const plexUrl = document.getElementById('plex-url');
-    const plexToken = document.getElementById('plex-token');
-    const plexConfig = document.getElementById('plex-configuration');
-    const plexSetup = document.getElementById('plex-setup');
-    const plexSetupButtons = document.getElementById('plex-setup-buttons');
-    const plexViewConfigButton = document.getElementById('plex-view-config-button');
-    const plexLinkToPlexButton = document.getElementById('plex-link-to-plex-button');
-    const plexManualConfigButton = document.getElementById('plex-manual-config-button');
-
-    if (plexUrl) plexUrl.value = '';
-    if (plexToken) plexToken.value = '';
-    if (plexConfig) plexConfig.style.display = 'none';
-    if (plexSetup) plexSetup.style.display = '';
-    if (plexSetupButtons) plexSetupButtons.style.display = '';
-    if (plexViewConfigButton) plexViewConfigButton.style.display = 'none';
-    if (plexLinkToPlexButton) plexLinkToPlexButton.style.display = '';
-    if (plexManualConfigButton) plexManualConfigButton.style.display = '';
-
-    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
-    const plexLibrarySelect = document.getElementById('plex-music-library');
-    if (plexLibrarySelect) {
-        plexLibrarySelect.innerHTML = '<option value="">Select a music library</option>';
-    }
-    if (plexLibraryContainer) {
-        plexLibraryContainer.style.display = 'none';
-    }
-
-    updatePlexConfigurationButtons();
-
-    try {
-        await fetch('/api/plex/clear-library', { method: 'POST' });
-    } catch (e) {
-        console.warn('Failed to clear Plex library preference:', e);
-    }
-
-    if (typeof saveSettings === 'function') {
-        saveSettings(true);
-    }
-    if (typeof showToast === 'function') {
-        showToast('Plex configuration cleared', 'success');
-    }
-}
-
-function toggleServer(serverType) {
-    // Update toggle buttons
-    document.getElementById('plex-toggle').classList.remove('active');
-    document.getElementById('jellyfin-toggle').classList.remove('active');
-    document.getElementById('navidrome-toggle').classList.remove('active');
-    document.getElementById('soulsync-toggle')?.classList.remove('active');
-    document.getElementById(`${serverType}-toggle`)?.classList.add('active');
-
-    // Show/hide server containers
-    document.getElementById('plex-container').classList.toggle('hidden', serverType !== 'plex');
-    document.getElementById('jellyfin-container').classList.toggle('hidden', serverType !== 'jellyfin');
-    document.getElementById('navidrome-container').classList.toggle('hidden', serverType !== 'navidrome');
-    document.getElementById('soulsync-container')?.classList.toggle('hidden', serverType !== 'soulsync');
-
-    // Show Plex setup when Plex is selected; otherwise hide both Plex panels
-    const plexConfig = document.getElementById('plex-configuration');
-    const plexSetup = document.getElementById('plex-setup');
-    if (plexConfig) plexConfig.style.display = serverType === 'plex' ? 'none' : '';
-    if (plexSetup) plexSetup.style.display = serverType === 'plex' ? '' : 'none';
-
-    // Load Plex music libraries when switching to Plex
-    if (serverType === 'plex') {
-        loadPlexMusicLibraries();
-    }
-
-    // Load Jellyfin users and music libraries when switching to Jellyfin
-    if (serverType === 'jellyfin') {
-        loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
-    }
-
-    // Load Navidrome music folders when switching to Navidrome
-    if (serverType === 'navidrome') {
-        loadNavidromeMusicFolders();
-    }
-
-    // Auto-save after server toggle change
-    debouncedAutoSaveSettings();
-}
-
-function updateDownloadSourceUI() {
-    const mode = document.getElementById('download-source-mode').value;
-    const hybridContainer = document.getElementById('hybrid-settings-container');
-    const soulseekContainer = document.getElementById('soulseek-settings-container');
-    const tidalContainer = document.getElementById('tidal-download-settings-container');
-    const qobuzContainer = document.getElementById('qobuz-settings-container');
-    const youtubeContainer = document.getElementById('youtube-settings-container');
-    const hifiContainer = document.getElementById('hifi-download-settings-container');
-    const deezerDlContainer = document.getElementById('deezer-download-settings-container');
-    const lidarrContainer = document.getElementById('lidarr-download-settings-container');
-
-    hybridContainer.style.display = mode === 'hybrid' ? 'block' : 'none';
-
-    // Determine which sources are active
-    let activeSources = new Set();
-    if (mode === 'hybrid') {
-        const order = getHybridOrder();
-        for (const src of order) activeSources.add(src);
-        // Fallback: if no sources enabled, at least show soulseek
-        if (activeSources.size === 0) activeSources.add('soulseek');
-    } else {
-        activeSources.add(mode);
-    }
-
-    soulseekContainer.style.display = activeSources.has('soulseek') ? 'block' : 'none';
-    tidalContainer.style.display = activeSources.has('tidal') ? 'block' : 'none';
-    qobuzContainer.style.display = activeSources.has('qobuz') ? 'block' : 'none';
-    youtubeContainer.style.display = activeSources.has('youtube') ? 'block' : 'none';
-    hifiContainer.style.display = activeSources.has('hifi') ? 'block' : 'none';
-    if (deezerDlContainer) deezerDlContainer.style.display = activeSources.has('deezer_dl') ? 'block' : 'none';
-    if (lidarrContainer) lidarrContainer.style.display = activeSources.has('lidarr') ? 'block' : 'none';
-
-    // Quality profile is Soulseek-only and downloads-tab-only
-    const qualityProfileSection = document.getElementById('quality-profile-section');
-    if (qualityProfileSection) {
-        const activeTab = document.querySelector('.stg-tab.active');
-        const onDownloadsTab = activeTab && activeTab.dataset.tab === 'downloads';
-        qualityProfileSection.style.display = (activeSources.has('soulseek') && onDownloadsTab) ? '' : 'none';
-    }
-
-    if (activeSources.has('tidal')) {
-        checkTidalDownloadAuthStatus();
-    }
-    if (activeSources.has('qobuz')) {
-        checkQobuzAuthStatus();
-    }
-    if (activeSources.has('hifi')) {
-        testHiFiConnection();
-    }
-}
-
-function updateHybridSecondaryOptions() {
-    const primary = document.getElementById('hybrid-primary-source').value;
-    const secondary = document.getElementById('hybrid-secondary-source');
-    const currentValue = secondary.value;
-    const allSources = [
-        { value: 'soulseek', label: 'Soulseek' },
-        { value: 'youtube', label: 'YouTube' },
-        { value: 'tidal', label: 'Tidal' },
-        { value: 'qobuz', label: 'Qobuz' },
-        { value: 'hifi', label: 'HiFi' },
-    ];
-
-    secondary.innerHTML = '';
-    for (const source of allSources) {
-        if (source.value === primary) continue;
-        const opt = document.createElement('option');
-        opt.value = source.value;
-        opt.textContent = source.label;
-        secondary.appendChild(opt);
-    }
-
-    // Restore previous selection if still valid, otherwise pick first available
-    if (currentValue !== primary) {
-        secondary.value = currentValue;
-    }
-
-    // Refresh source-specific settings visibility based on new primary/secondary
-    updateDownloadSourceUI();
-}
-
-// ===============================
-// QUALITY PROFILE FUNCTIONS
-// ===============================
-
-let currentQualityProfile = null;
-
-async function loadQualityProfile() {
-    try {
-        const response = await fetch('/api/quality-profile');
-        const data = await response.json();
-
-        if (data.success) {
-            currentQualityProfile = data.profile;
-            populateQualityProfileUI(currentQualityProfile);
-        }
-    } catch (error) {
-        console.error('Error loading quality profile:', error);
-    }
-}
-
-function populateQualityProfileUI(profile) {
-    // Update preset buttons
-    document.querySelectorAll('.preset-button').forEach(btn => {
-        btn.classList.remove('active');
-    });
-    const activePresetBtn = document.querySelector(`.preset-button[onclick*="${profile.preset}"]`);
-    if (activePresetBtn) {
-        activePresetBtn.classList.add('active');
-    }
-
-    // Populate each quality tier
-    const qualities = ['flac', 'mp3_320', 'mp3_256', 'mp3_192'];
-    qualities.forEach(quality => {
-        const config = profile.qualities[quality];
-        if (config) {
-            // Set enabled checkbox
-            const enabledCheckbox = document.getElementById(`quality-${quality}-enabled`);
-            if (enabledCheckbox) {
-                enabledCheckbox.checked = config.enabled;
-            }
-
-            // Set min/max sliders
-            const minSlider = document.getElementById(`${quality}-min`);
-            const maxSlider = document.getElementById(`${quality}-max`);
-            if (minSlider && maxSlider) {
-                minSlider.value = config.min_kbps;
-                maxSlider.value = config.max_kbps;
-                updateQualityRange(quality);
-            }
-
-            // Set priority display
-            const prioritySpan = document.getElementById(`priority-${quality}`);
-            if (prioritySpan) {
-                prioritySpan.textContent = `Priority: ${config.priority}`;
-            }
-
-            // Toggle sliders visibility
-            const sliders = document.getElementById(`sliders-${quality}`);
-            if (sliders) {
-                if (config.enabled) {
-                    sliders.classList.remove('disabled');
-                } else {
-                    sliders.classList.add('disabled');
-                }
-            }
-
-            // FLAC-specific: restore bit depth selector and fallback toggle
-            if (quality === 'flac') {
-                const bitDepthValue = config.bit_depth || 'any';
-                document.querySelectorAll('.bit-depth-btn').forEach(btn => {
-                    btn.classList.toggle('active', btn.getAttribute('data-value') === bitDepthValue);
-                });
-                const bitDepthSelector = document.getElementById('flac-bit-depth-selector');
-                if (bitDepthSelector) {
-                    if (config.enabled) {
-                        bitDepthSelector.classList.remove('disabled');
-                    } else {
-                        bitDepthSelector.classList.add('disabled');
-                    }
-                }
-                // Show/hide and restore fallback toggle
-                const fallbackToggle = document.getElementById('flac-fallback-toggle');
-                if (fallbackToggle) {
-                    fallbackToggle.style.display = bitDepthValue === 'any' ? 'none' : 'block';
-                }
-                const fallbackCb = document.getElementById('flac-bit-depth-fallback');
-                if (fallbackCb) {
-                    fallbackCb.checked = config.bit_depth_fallback !== false;
-                }
-            }
-        }
-    });
-
-    // Set fallback checkbox
-    const fallbackCheckbox = document.getElementById('quality-fallback-enabled');
-    if (fallbackCheckbox) {
-        fallbackCheckbox.checked = profile.fallback_enabled;
-    }
-}
-
-function updateQualityRange(quality) {
-    const minSlider = document.getElementById(`${quality}-min`);
-    const maxSlider = document.getElementById(`${quality}-max`);
-    const minValue = document.getElementById(`${quality}-min-value`);
-    const maxValue = document.getElementById(`${quality}-max-value`);
-
-    if (!minSlider || !maxSlider || !minValue || !maxValue) return;
-
-    let min = parseInt(minSlider.value);
-    let max = parseInt(maxSlider.value);
-
-    // Ensure min doesn't exceed max
-    if (min > max) {
-        min = max;
-        minSlider.value = min;
-    }
-
-    // Ensure max doesn't go below min
-    if (max < min) {
-        max = min;
-        maxSlider.value = max;
-    }
-
-    minValue.textContent = `${min} kbps`;
-    maxValue.textContent = `${max} kbps`;
-}
-
-function toggleQuality(quality) {
-    const checkbox = document.getElementById(`quality-${quality}-enabled`);
-    const sliders = document.getElementById(`sliders-${quality}`);
-
-    if (checkbox && sliders) {
-        if (checkbox.checked) {
-            sliders.classList.remove('disabled');
-        } else {
-            sliders.classList.add('disabled');
-        }
-    }
-
-    // Also toggle FLAC bit depth selector
-    if (quality === 'flac') {
-        const bitDepthSelector = document.getElementById('flac-bit-depth-selector');
-        if (bitDepthSelector && checkbox) {
-            if (checkbox.checked) {
-                bitDepthSelector.classList.remove('disabled');
-            } else {
-                bitDepthSelector.classList.add('disabled');
-            }
-        }
-    }
-
-    // Mark preset as custom when manually changing
-    if (currentQualityProfile) {
-        currentQualityProfile.preset = 'custom';
-        document.querySelectorAll('.preset-button').forEach(btn => {
-            btn.classList.remove('active');
-        });
-    }
-}
-
-function setFlacBitDepth(value) {
-    document.querySelectorAll('.bit-depth-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.getAttribute('data-value') === value);
-    });
-
-    // Show/hide fallback toggle — only relevant when a specific bit depth is selected
-    const fallbackToggle = document.getElementById('flac-fallback-toggle');
-    if (fallbackToggle) {
-        fallbackToggle.style.display = value === 'any' ? 'none' : 'block';
-    }
-
-    // Mark preset as custom when manually changing
-    if (currentQualityProfile) {
-        currentQualityProfile.preset = 'custom';
-        document.querySelectorAll('.preset-button').forEach(btn => {
-            btn.classList.remove('active');
-        });
-    }
-
-    debouncedAutoSaveSettings();
-}
-
-function setFlacBitDepthFallback(enabled) {
-    if (currentQualityProfile) {
-        currentQualityProfile.preset = 'custom';
-        document.querySelectorAll('.preset-button').forEach(btn => {
-            btn.classList.remove('active');
-        });
-    }
-    debouncedAutoSaveSettings();
-}
-
-async function applyQualityPreset(presetName) {
-    try {
-        showLoadingOverlay(`Applying ${presetName} preset...`);
-
-        const response = await fetch(`/api/quality-profile/preset/${presetName}`, {
-            method: 'POST'
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            currentQualityProfile = data.profile;
-            populateQualityProfileUI(currentQualityProfile);
-            showToast(`Applied '${presetName}' preset`, 'success');
-        } else {
-            showToast(`Failed to apply preset: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error applying quality preset:', error);
-        showToast('Failed to apply preset', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function collectQualityProfileFromUI() {
-    const profile = {
-        version: 2,
-        preset: 'custom', // Will be overridden if a preset is active
-        qualities: {},
-        fallback_enabled: document.getElementById('quality-fallback-enabled')?.checked ?? true
-    };
-
-    const qualities = ['flac', 'mp3_320', 'mp3_256', 'mp3_192'];
-
-    qualities.forEach((quality, index) => {
-        const enabled = document.getElementById(`quality-${quality}-enabled`)?.checked || false;
-        const minSlider = document.getElementById(`${quality}-min`);
-        const maxSlider = document.getElementById(`${quality}-max`);
-
-        // Preserve priority from the currently loaded profile instead of using array order
-        const existingPriority = currentQualityProfile?.qualities?.[quality]?.priority ?? (index + 1);
-
-        profile.qualities[quality] = {
-            enabled: enabled,
-            min_kbps: parseInt(minSlider?.value || 0),
-            max_kbps: parseInt(maxSlider?.value || 99999),
-            priority: existingPriority
-        };
-
-        // Add FLAC-specific bit_depth and fallback settings
-        if (quality === 'flac') {
-            const activeBtn = document.querySelector('.bit-depth-btn.active');
-            profile.qualities[quality].bit_depth = activeBtn ? activeBtn.getAttribute('data-value') : 'any';
-            const fallbackCb = document.getElementById('flac-bit-depth-fallback');
-            profile.qualities[quality].bit_depth_fallback = fallbackCb ? fallbackCb.checked : true;
-        }
-    });
-
-    // Check if current profile matches a preset
-    if (currentQualityProfile && currentQualityProfile.preset !== 'custom') {
-        profile.preset = currentQualityProfile.preset;
-    }
-
-    return profile;
-}
-
-async function saveQualityProfile() {
-    try {
-        const profile = collectQualityProfileFromUI();
-
-        const response = await fetch('/api/quality-profile', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(profile)
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            currentQualityProfile = profile;
-            console.log('Quality profile saved successfully');
-            return true;
-        } else {
-            console.error('Failed to save quality profile:', data.error);
-            return false;
-        }
-    } catch (error) {
-        console.error('Error saving quality profile:', error);
-        return false;
-    }
-}
-
-// ===============================
-// END QUALITY PROFILE FUNCTIONS
-// ===============================
-
-async function toggleHydrabaseFromSettings() {
-    const statusEl = document.getElementById('hydrabase-settings-status');
-    const btn = document.getElementById('hydrabase-connect-btn');
-    const url = document.getElementById('hydrabase-url').value.trim();
-    const apiKey = document.getElementById('hydrabase-api-key').value.trim();
-
-    if (!url || !apiKey) {
-        if (statusEl) statusEl.textContent = 'URL and API Key required';
-        return;
-    }
-
-    // Save settings first
-    await saveSettings(true);
-
-    try {
-        // Check current status
-        const statusRes = await fetch('/api/hydrabase/status');
-        const statusData = await statusRes.json();
-
-        if (statusData.connected) {
-            // Disconnect
-            await fetch('/api/hydrabase/disconnect', { method: 'POST' });
-            if (btn) btn.textContent = 'Connect';
-            if (statusEl) { statusEl.textContent = 'Disconnected'; statusEl.style.color = 'rgba(255,255,255,0.4)'; }
-            // Remove from fallback dropdown + reset to iTunes if was selected
-            const fbSel2 = document.getElementById('metadata-fallback-source');
-            if (fbSel2) {
-                const hbOpt = fbSel2.querySelector('option[value="hydrabase"]');
-                if (hbOpt) {
-                    if (fbSel2.value === 'hydrabase') fbSel2.value = 'itunes';
-                    hbOpt.remove();
-                }
-            }
-            showToast('Hydrabase disconnected', 'info');
-        } else {
-            // Connect
-            const res = await fetch('/api/hydrabase/connect', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ url, api_key: apiKey })
-            });
-            const data = await res.json();
-            if (data.success) {
-                if (btn) btn.textContent = 'Disconnect';
-                if (statusEl) { statusEl.textContent = 'Connected'; statusEl.style.color = '#4caf50'; }
-                // Add to fallback dropdown
-                const fbSel = document.getElementById('metadata-fallback-source');
-                if (fbSel && !fbSel.querySelector('option[value="hydrabase"]')) {
-                    const opt = document.createElement('option');
-                    opt.value = 'hydrabase';
-                    opt.textContent = 'Hydrabase (P2P)';
-                    fbSel.appendChild(opt);
-                }
-                showToast('Hydrabase connected', 'success');
-            } else {
-                if (statusEl) statusEl.textContent = data.error || 'Connection failed';
-                showToast('Hydrabase connection failed', 'error');
-            }
-        }
-    } catch (e) {
-        if (statusEl) statusEl.textContent = 'Error';
-        showToast('Hydrabase connection error', 'error');
-    }
-}
-
-// ── Music Library Paths ──
-function renderMusicPaths(paths) {
-    const container = document.getElementById('music-paths-list');
-    if (!container) return;
-    if (!paths || paths.length === 0) {
-        container.innerHTML = '<div style="color: rgba(255,255,255,0.3); font-size: 0.85em; padding: 4px 0;">No paths configured. Click "Add Path" to add your music folder(s).</div>';
-        return;
-    }
-    container.innerHTML = paths.map((p, i) => `
-        <div class="form-group music-path-row" style="margin-bottom: 4px;">
-            <input type="text" class="music-path-input" value="${escapeHtml(p)}" placeholder="/music or C:\\Music" style="flex:1;">
-            <button class="test-button" onclick="_removeMusicPathRow(this)" style="padding: 8px 12px; color: #ef5350; border-color: rgba(239,83,80,0.3);">&times;</button>
-        </div>
-    `).join('');
-    // Attach auto-save to dynamically rendered inputs
-    container.querySelectorAll('.music-path-input').forEach(input => {
-        input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
-    });
-}
-
-function addMusicPathRow() {
-    const container = document.getElementById('music-paths-list');
-    if (!container) return;
-    // Clear the "no paths" message if present
-    const placeholder = container.querySelector('div[style*="color: rgba"]');
-    if (placeholder && !container.querySelector('.music-path-row')) placeholder.remove();
-    const row = document.createElement('div');
-    row.className = 'form-group music-path-row';
-    row.style.marginBottom = '4px';
-    row.innerHTML = `
-        <input type="text" class="music-path-input" value="" placeholder="/music or C:\\Music" style="flex:1;">
-        <button class="test-button" onclick="_removeMusicPathRow(this)" style="padding: 8px 12px; color: #ef5350; border-color: rgba(239,83,80,0.3);">&times;</button>
-    `;
-    container.appendChild(row);
-    const input = row.querySelector('input');
-    input.focus();
-    // Auto-save when the user finishes typing a path
-    input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
-}
-
-function _removeMusicPathRow(btn) {
-    btn.closest('.music-path-row').remove();
-    // Auto-save after removing a path
-    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-function collectMusicPaths() {
-    const inputs = document.querySelectorAll('.music-path-input');
-    const paths = [];
-    inputs.forEach(input => {
-        const val = input.value.trim();
-        if (val) paths.push(val);
-    });
-    return paths;
-}
-
-// ── Genre Whitelist ──
-let _genreWhitelistCache = [];
-
-function _genreWhitelistRender(genres) {
-    _genreWhitelistCache = genres && genres.length ? genres : [];
-    const container = document.getElementById('genre-whitelist-chips');
-    const countEl = document.getElementById('genre-whitelist-count');
-    if (!container) return;
-    if (!_genreWhitelistCache.length) {
-        container.innerHTML = '<div style="color:rgba(255,255,255,0.3);font-size:13px;padding:4px 0;">No genres configured. Click "Reset to Defaults" to load the default whitelist.</div>';
-        if (countEl) countEl.textContent = '';
-        return;
-    }
-    const searchVal = (document.getElementById('genre-whitelist-search')?.value || '').toLowerCase();
-    const filtered = searchVal ? _genreWhitelistCache.filter(g => g.toLowerCase().includes(searchVal)) : _genreWhitelistCache;
-    container.innerHTML = filtered.map(g =>
-        `<span class="genre-chip">${escapeHtml(g)}<button class="genre-chip-x" onclick="_genreWhitelistRemove('${escapeHtml(g.replace(/'/g, "\\'"))}')">&times;</button></span>`
-    ).join('');
-    if (countEl) countEl.textContent = `${_genreWhitelistCache.length} genres`;
-}
-
-function _genreWhitelistRemove(genre) {
-    _genreWhitelistCache = _genreWhitelistCache.filter(g => g !== genre);
-    _genreWhitelistRender(_genreWhitelistCache);
-    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-function _genreWhitelistAdd(genre) {
-    genre = genre.trim();
-    if (!genre) return;
-    if (_genreWhitelistCache.some(g => g.toLowerCase() === genre.toLowerCase())) return;
-    _genreWhitelistCache.push(genre);
-    _genreWhitelistCache.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-    _genreWhitelistRender(_genreWhitelistCache);
-    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-}
-
-async function _genreWhitelistReset() {
-    try {
-        const resp = await fetch('/api/genre-whitelist/defaults');
-        const data = await resp.json();
-        if (data.genres) {
-            _genreWhitelistCache = data.genres;
-            _genreWhitelistRender(_genreWhitelistCache);
-            if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
-            showToast(`Loaded ${data.genres.length} default genres`, 'success');
-        }
-    } catch (e) {
-        showToast('Failed to load defaults', 'error');
-    }
-}
-
-// Toggle whitelist container visibility + init
-document.addEventListener('change', (e) => {
-    if (e.target.id === 'genre-whitelist-enabled') {
-        const container = document.getElementById('genre-whitelist-container');
-        if (container) container.style.display = e.target.checked ? '' : 'none';
-        // Auto-populate with defaults on first enable if empty
-        if (e.target.checked && _genreWhitelistCache.length === 0) {
-            _genreWhitelistReset();
-        }
-    }
-});
-
-// Search/add handler
-document.addEventListener('keydown', (e) => {
-    if (e.target.id === 'genre-whitelist-search' && e.key === 'Enter') {
-        e.preventDefault();
-        _genreWhitelistAdd(e.target.value);
-        e.target.value = '';
-    }
-});
-document.addEventListener('input', (e) => {
-    if (e.target.id === 'genre-whitelist-search') {
-        _genreWhitelistRender(_genreWhitelistCache);
-    }
-});
-
-function _collectGenreWhitelist() {
-    return _genreWhitelistCache;
-}
-
-// ── Live Log Viewer ──
-let _logViewerActive = false;
-let _logViewerFilter = '';
-let _logViewerSource = 'app';
-let _logViewerSearch = '';
-const _LOG_MAX_LINES = 2000;
-
-function _logClassify(line) {
-    // Exact logger format first
-    if (line.includes(' - DEBUG - ')) return 'DEBUG';
-    if (line.includes(' - INFO - ')) return 'INFO';
-    if (line.includes(' - WARNING - ')) return 'WARNING';
-    if (line.includes(' - ERROR - ') || line.includes(' - CRITICAL - ')) return 'ERROR';
-    // Heuristic for print() output
-    const ll = line.toLowerCase();
-    if (ll.includes('error') || ll.includes('traceback') || ll.includes('exception') || ll.includes('failed')) return 'ERROR';
-    if (ll.includes('warning') || ll.includes('warn')) return 'WARNING';
-    if (ll.includes('debug')) return 'DEBUG';
-    return 'INFO';
-}
-
-function _logClassToCSS(level) {
-    return { DEBUG: 'log-debug', INFO: 'log-info', WARNING: 'log-warning', ERROR: 'log-error' }[level] || 'log-plain';
-}
-
-async function _logViewerInit() {
-    if (_logViewerActive) return;
-    _logViewerActive = true;
-    _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
-
-    // Fetch initial tail
-    try {
-        const params = new URLSearchParams({ source: _logViewerSource, lines: 300 });
-        if (_logViewerFilter) params.set('level', _logViewerFilter);
-        if (_logViewerSearch) params.set('search', _logViewerSearch);
-        const resp = await fetch(`/api/logs/tail?${params}`);
-        const data = await resp.json();
-        if (data.lines) {
-            const container = document.getElementById('log-viewer-lines');
-            if (container) {
-                container.innerHTML = '';
-                _logViewerAppendLines(data.lines);
-            }
-        }
-    } catch (e) {
-        console.warn('Failed to load initial logs:', e);
-    }
-
-    // Subscribe to live updates
-    if (typeof socket !== 'undefined' && socket && socket.connected) {
-        socket.emit('logs:subscribe', { source: _logViewerSource });
-        socket.on('logs:live', _logViewerOnLive);
-    }
-}
-
-function _logViewerStop() {
-    if (!_logViewerActive) return;
-    _logViewerActive = false;
-    if (typeof socket !== 'undefined' && socket) {
-        socket.off('logs:live', _logViewerOnLive);
-        socket.emit('logs:unsubscribe', {});
-    }
-}
-
-function _logViewerOnLive(data) {
-    if (!_logViewerActive || !data.lines) return;
-    if (data.source !== _logViewerSource) return;
-    let lines = data.lines;
-    // Apply level filter client-side for live lines
-    if (_logViewerFilter) {
-        lines = lines.filter(l => _logClassify(l) === _logViewerFilter);
-    }
-    // Apply search filter
-    if (_logViewerSearch) {
-        const s = _logViewerSearch.toLowerCase();
-        lines = lines.filter(l => l.toLowerCase().includes(s));
-    }
-    if (lines.length > 0) _logViewerAppendLines(lines);
-}
-
-function _logViewerAppendLines(lines) {
-    const container = document.getElementById('log-viewer-lines');
-    if (!container) return;
-    const autoScroll = document.getElementById('log-viewer-autoscroll')?.checked;
-    const terminal = document.getElementById('log-viewer-terminal');
-
-    const frag = document.createDocumentFragment();
-    for (const line of lines) {
-        const div = document.createElement('div');
-        div.className = 'log-line ' + _logClassToCSS(_logClassify(line));
-        div.textContent = line;
-        frag.appendChild(div);
-    }
-    container.appendChild(frag);
-
-    // Trim old lines
-    while (container.children.length > _LOG_MAX_LINES) {
-        container.removeChild(container.firstChild);
-    }
-
-    // Update count
-    const countEl = document.getElementById('log-viewer-line-count');
-    if (countEl) countEl.textContent = `${container.children.length} lines`;
-
-    // Auto-scroll
-    if (autoScroll && terminal) {
-        terminal.scrollTop = terminal.scrollHeight;
-    }
-}
-
-async function _logViewerChangeSource() {
-    _logViewerStop();
-    _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
-    const container = document.getElementById('log-viewer-lines');
-    if (container) container.innerHTML = '<div class="log-line log-info">Loading...</div>';
-    await _logViewerInit();
-}
-
-function _logViewerFilterLevel(btn) {
-    document.querySelectorAll('.log-filter-btn').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-    _logViewerFilter = btn.dataset.level || '';
-    _logViewerReload();
-}
-
-let _logSearchDebounce = null;
-function _logViewerOnSearch(input) {
-    clearTimeout(_logSearchDebounce);
-    _logSearchDebounce = setTimeout(() => {
-        _logViewerSearch = (input.value || '').trim();
-        _logViewerReload();
-    }, 300);
-}
-
-function _logViewerReload() {
-    _logViewerStop();
-    const container = document.getElementById('log-viewer-lines');
-    if (container) container.innerHTML = '<div class="log-line log-info">Loading...</div>';
-    _logViewerInit();
-}
-
-function _logViewerCopy() {
-    const container = document.getElementById('log-viewer-lines');
-    if (!container) return;
-    const text = Array.from(container.children).map(el => el.textContent).join('\n');
-    if (navigator.clipboard && window.isSecureContext) {
-        navigator.clipboard.writeText(text).then(() => showToast('Logs copied', 'success'));
-    } else {
-        const ta = document.createElement('textarea');
-        ta.value = text;
-        ta.style.cssText = 'position:fixed;left:-9999px';
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand('copy');
-        document.body.removeChild(ta);
-        showToast('Logs copied', 'success');
-    }
-}
-
-function _logViewerClear() {
-    const container = document.getElementById('log-viewer-lines');
-    if (container) container.innerHTML = '';
-    const countEl = document.getElementById('log-viewer-line-count');
-    if (countEl) countEl.textContent = '0 lines';
-}
-
-// ── Database Maintenance ──
-async function loadDbMaintenanceInfo() {
-    try {
-        const resp = await fetch('/api/database/maintenance/info');
-        const data = await resp.json();
-        if (!data.success) return;
-        const sizeEl = document.getElementById('db-size-display');
-        const freeEl = document.getElementById('db-freepages-display');
-        const vacEl = document.getElementById('db-autovacuum-display');
-        if (sizeEl) sizeEl.textContent = data.total_size_display;
-        if (freeEl) freeEl.textContent = data.free_pages > 0
-            ? `${data.free_pages.toLocaleString()} (${data.free_size_display} reclaimable)`
-            : 'None — database is fully compacted';
-        if (vacEl) vacEl.textContent = data.auto_vacuum_label;
-        // Hide enable button if already incremental
-        const incBtn = document.getElementById('db-incvacuum-btn');
-        if (incBtn && data.auto_vacuum === 2) {
-            incBtn.textContent = 'Incremental Vacuum Enabled';
-            incBtn.disabled = true;
-            incBtn.style.opacity = '0.5';
-        }
-    } catch (e) { console.error('Error loading DB maintenance info:', e); }
-}
-
-async function runDatabaseVacuum() {
-    const btn = document.getElementById('db-vacuum-btn');
-    const status = document.getElementById('db-vacuum-status');
-    if (!confirm('This will compact the database by rewriting it. The database will be locked during this operation. For large databases this may take over a minute. Continue?')) return;
-    btn.disabled = true;
-    btn.textContent = 'Compacting...';
-    if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Running VACUUM — this may take a while...'; }
-    try {
-        const resp = await fetch('/api/database/maintenance/vacuum', { method: 'POST' });
-        const data = await resp.json();
-        if (data.success) {
-            showToast(`Database compacted in ${data.elapsed_seconds}s — saved ${data.saved_display}`, 'success');
-            if (status) { status.style.color = '#4caf50'; status.textContent = `Done in ${data.elapsed_seconds}s. Saved ${data.saved_display}.`; }
-            loadDbMaintenanceInfo();
-        } else {
-            showToast('Vacuum failed: ' + (data.error || 'Unknown error'), 'error');
-            if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
-        }
-    } catch (e) {
-        showToast('Vacuum failed: ' + e.message, 'error');
-        if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Compact Database (VACUUM)';
-    }
-}
-
-async function enableIncrementalVacuum() {
-    const btn = document.getElementById('db-incvacuum-btn');
-    const status = document.getElementById('db-vacuum-status');
-    if (!confirm('This will enable incremental vacuum mode. It requires a one-time full VACUUM to activate, which locks the database and may take over a minute on large databases. Continue?')) return;
-    btn.disabled = true;
-    btn.textContent = 'Enabling...';
-    if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Enabling incremental vacuum — this may take a while...'; }
-    try {
-        const resp = await fetch('/api/database/maintenance/enable-incremental-vacuum', { method: 'POST' });
-        const data = await resp.json();
-        if (data.success) {
-            const msg = data.already_enabled ? 'Already enabled' : `Enabled in ${data.elapsed_seconds}s — saved ${data.saved_display}`;
-            showToast(msg, 'success');
-            if (status) { status.style.color = '#4caf50'; status.textContent = msg; }
-            loadDbMaintenanceInfo();
-        } else {
-            showToast('Failed: ' + (data.error || 'Unknown error'), 'error');
-            if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
-        }
-    } catch (e) {
-        showToast('Failed: ' + e.message, 'error');
-        if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Enable Incremental Vacuum';
-    }
-}
-
-async function activateDevMode() {
-    const password = document.getElementById('dev-mode-password').value;
-    try {
-        const response = await fetch('/api/dev-mode', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ password })
-        });
-        const data = await response.json();
-        if (data.success) {
-            document.getElementById('dev-mode-status').textContent = 'Active';
-            document.getElementById('dev-mode-status').style.color = 'rgb(var(--accent-light-rgb))';
-            document.getElementById('hydrabase-nav').style.display = '';
-            document.getElementById('hydrabase-button-container').style.display = '';
-            document.getElementById('dev-mode-password').value = '';
-            showToast('Dev mode activated', 'success');
-        } else {
-            showToast('Invalid password', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to activate dev mode', 'error');
-    }
-}
-
-// ── Hydrabase Functions ──
-
-let _hydrabaseConnected = false;
-
-async function hydrabaseToggleConnection() {
-    if (_hydrabaseConnected) {
-        await hydrabaseDisconnect();
-    } else {
-        await hydrabaseConnect();
-    }
-}
-
-async function hydrabaseConnect() {
-    const url = document.getElementById('hydra-ws-url').value.trim();
-    const apiKey = document.getElementById('hydra-api-key').value.trim();
-    if (!url || !apiKey) {
-        showToast('URL and API key required', 'error');
-        return;
-    }
-    const statusEl = document.getElementById('hydra-connection-status');
-    const btn = document.getElementById('hydra-connect-btn');
-    statusEl.textContent = 'Connecting...';
-    statusEl.style.color = '#f0ad4e';
-    try {
-        const response = await fetch('/api/hydrabase/connect', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url, api_key: apiKey })
-        });
-        const data = await response.json();
-        if (data.success) {
-            _hydrabaseConnected = true;
-            statusEl.textContent = 'Connected';
-            statusEl.style.color = 'rgb(var(--accent-light-rgb))';
-            btn.textContent = 'Disconnect';
-            showToast('Connected to Hydrabase', 'success');
-        } else {
-            statusEl.textContent = 'Failed';
-            statusEl.style.color = '#f44336';
-            showToast(data.error || 'Connection failed', 'error');
-        }
-    } catch (e) {
-        statusEl.textContent = 'Error';
-        statusEl.style.color = '#f44336';
-        showToast('Connection error', 'error');
-    }
-}
-
-async function hydrabaseDisconnect() {
-    try {
-        await fetch('/api/hydrabase/disconnect', { method: 'POST' });
-    } catch (e) { }
-    _hydrabaseConnected = false;
-    document.getElementById('hydra-connection-status').textContent = 'Disconnected';
-    document.getElementById('hydra-connection-status').style.color = '#888';
-    document.getElementById('hydra-connect-btn').textContent = 'Connect';
-    // Dev mode is disabled on disconnect — hide Hydrabase nav and update settings status
-    document.getElementById('hydrabase-nav').style.display = 'none';
-    document.getElementById('hydrabase-button-container').style.display = 'none';
-    const devStatus = document.getElementById('dev-mode-status');
-    if (devStatus) {
-        devStatus.textContent = 'Inactive';
-        devStatus.style.color = '#888';
-    }
-    showToast('Disconnected — dev mode disabled', 'success');
-    navigateToPage('settings');
-}
-
-async function loadHydrabaseComparisons() {
-    const container = document.getElementById('hydra-comparisons-container');
-    if (!container) return;
-    try {
-        const response = await fetch('/api/hydrabase/comparisons');
-        const data = await response.json();
-        if (!data.success || !data.comparisons?.length) {
-            container.innerHTML = '<p style="color: #666; font-size: 13px;">No comparisons yet. Search with Hydrabase active to generate comparisons.</p>';
-            return;
-        }
-        let html = '';
-        for (const comp of data.comparisons) {
-            const time = new Date(comp.timestamp * 1000).toLocaleTimeString();
-            html += `<div style="background: rgba(30, 30, 30, 0.6); border-radius: 8px; padding: 10px; margin-bottom: 8px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
-                    <strong style="color: #fff;">"${comp.query}"</strong>
-                    <span style="color: #666; font-size: 11px;">${time}</span>
-                </div>
-                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px;">
-                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3);">
-                        <div style="color: rgba(139, 92, 246, 1); font-weight: 600; margin-bottom: 2px;">Hydrabase</div>
-                        <div style="color: #aaa;">${comp.hydrabase?.tracks || 0}T / ${comp.hydrabase?.artists || 0}A / ${comp.hydrabase?.albums || 0}Al</div>
-                    </div>
-                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(29, 185, 84, 0.15); border: 1px solid rgba(29, 185, 84, 0.3);">
-                        <div style="color: rgb(var(--accent-light-rgb)); font-weight: 600; margin-bottom: 2px;">Spotify</div>
-                        <div style="color: #aaa;">${comp.spotify?.tracks || 0}T / ${comp.spotify?.artists || 0}A / ${comp.spotify?.albums || 0}Al</div>
-                    </div>
-                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(251, 93, 93, 0.15); border: 1px solid rgba(251, 93, 93, 0.3);">
-                        <div style="color: #fb5d5d; font-weight: 600; margin-bottom: 2px;">${comp.fallback_source === 'deezer' ? 'Deezer' : 'iTunes'}</div>
-                        <div style="color: #aaa;">${(comp.fallback || comp.itunes)?.tracks || 0}T / ${(comp.fallback || comp.itunes)?.artists || 0}A / ${(comp.fallback || comp.itunes)?.albums || 0}Al</div>
-                    </div>
-                </div>
-            </div>`;
-        }
-        container.innerHTML = html;
-    } catch (e) {
-        container.innerHTML = '<p style="color: #f44336; font-size: 13px;">Failed to load comparisons.</p>';
-    }
-}
-
-async function hydrabaseSendRaw(textareaId) {
-    const textarea = document.getElementById(textareaId);
-    const raw = textarea.value.trim();
-    if (!raw) {
-        showToast('Payload is empty', 'error');
-        return;
-    }
-    if (!_hydrabaseConnected) {
-        showToast('Not connected to Hydrabase', 'error');
-        return;
-    }
-    let payload;
-    try {
-        payload = JSON.parse(raw);
-    } catch (e) {
-        showToast('Invalid JSON payload', 'error');
-        return;
-    }
-    // Auto-inject a fresh nonce if not set or zero
-    if (!payload.nonce) {
-        payload.nonce = Date.now();
-    }
-    const responseArea = document.getElementById('hydra-response');
-    responseArea.textContent = 'Sending...';
-    try {
-        const response = await fetch('/api/hydrabase/send', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ payload })
-        });
-        const data = await response.json();
-        if (data.success) {
-            responseArea.textContent = JSON.stringify(data.data, null, 2);
-        } else {
-            responseArea.textContent = 'Error: ' + (data.error || 'Unknown error');
-            if (data.error && data.error.includes('Not connected')) {
-                _hydrabaseConnected = false;
-                document.getElementById('hydra-connection-status').textContent = 'Disconnected';
-                document.getElementById('hydra-connection-status').style.color = '#888';
-                document.getElementById('hydra-connect-btn').textContent = 'Connect';
-            }
-        }
-    } catch (e) {
-        responseArea.textContent = 'Error: ' + e.message;
-    }
-}
-
-// ── Tag embedding accordion helpers ──
-function toggleTagGroup(header) {
-    const body = header.nextElementSibling;
-    const arrow = header.querySelector('.tag-group-arrow');
-    if (body.style.display === 'none') {
-        body.style.display = 'block';
-        arrow.classList.add('open');
-    } else {
-        body.style.display = 'none';
-        arrow.classList.remove('open');
-    }
-}
-
-function toggleServiceTags(masterCheckbox, serviceName) {
-    const group = masterCheckbox.closest('.tag-service-group');
-    if (!group) return;
-    const body = group.querySelector('.tag-service-body');
-    if (!body) return;
-    const childCheckboxes = body.querySelectorAll('input[type="checkbox"]');
-    childCheckboxes.forEach(cb => {
-        const label = cb.closest('.checkbox-label');
-        if (masterCheckbox.checked) {
-            if (label) label.classList.remove('disabled-tag');
-            cb.disabled = false;
-        } else {
-            if (label) label.classList.add('disabled-tag');
-            cb.disabled = true;
-        }
-    });
-}
-
-function _collectServiceTags(serviceName) {
-    const tags = {};
-    document.querySelectorAll(`[data-config^="${serviceName}.tags."]`).forEach(cb => {
-        const key = cb.dataset.config.split('.').pop();
-        tags[key] = cb.checked;
-    });
-    return tags;
-}
-
-function _getTagConfig(path) {
-    const el = document.querySelector(`[data-config="${path}"]`);
-    return el ? el.checked : true;
-}
-
-async function saveSettings(quiet = false) {
-    // Validate file organization templates before saving
-    const validationErrors = validateFileOrganizationTemplates();
-    if (validationErrors.length > 0) {
-        if (!quiet) showToast('Template validation failed: ' + validationErrors.join(', '), 'error');
-        return;
-    }
-
-    // Determine active server from toggle buttons
-    let activeServer = 'plex';
-    if (document.getElementById('jellyfin-toggle').classList.contains('active')) {
-        activeServer = 'jellyfin';
-    } else if (document.getElementById('navidrome-toggle').classList.contains('active')) {
-        activeServer = 'navidrome';
-    } else if (document.getElementById('soulsync-toggle')?.classList.contains('active')) {
-        activeServer = 'soulsync';
-    }
-
-    const settings = {
-        active_media_server: activeServer,
-        spotify: {
-            client_id: document.getElementById('spotify-client-id').value,
-            client_secret: document.getElementById('spotify-client-secret').value,
-            redirect_uri: document.getElementById('spotify-redirect-uri').value,
-            embed_tags: document.getElementById('embed-spotify').checked,
-            tags: _collectServiceTags('spotify')
-        },
-        tidal: {
-            client_id: document.getElementById('tidal-client-id').value,
-            client_secret: document.getElementById('tidal-client-secret').value,
-            redirect_uri: document.getElementById('tidal-redirect-uri').value,
-            embed_tags: document.getElementById('embed-tidal').checked,
-            tags: _collectServiceTags('tidal')
-        },
-        plex: {
-            base_url: document.getElementById('plex-url').value,
-            token: document.getElementById('plex-token').value
-        },
-        jellyfin: {
-            base_url: document.getElementById('jellyfin-url').value,
-            api_key: document.getElementById('jellyfin-api-key').value,
-            api_timeout: parseInt(document.getElementById('jellyfin-timeout').value) || 30
-        },
-        navidrome: {
-            base_url: document.getElementById('navidrome-url').value,
-            username: document.getElementById('navidrome-username').value,
-            password: document.getElementById('navidrome-password').value
-        },
-        soulseek: {
-            slskd_url: document.getElementById('soulseek-url').value,
-            api_key: document.getElementById('soulseek-api-key').value,
-            download_path: document.getElementById('download-path').value,
-            transfer_path: document.getElementById('transfer-path').value,
-            search_timeout: parseInt(document.getElementById('soulseek-search-timeout').value) || 60,
-            search_timeout_buffer: parseInt(document.getElementById('soulseek-search-timeout-buffer').value) || 15,
-            min_peer_upload_speed: parseInt(document.getElementById('soulseek-min-peer-speed').value) || 0,
-            max_peer_queue: parseInt(document.getElementById('soulseek-max-peer-queue').value) || 0,
-            download_timeout: (parseInt(document.getElementById('soulseek-download-timeout').value) || 10) * 60,
-            auto_clear_searches: document.getElementById('soulseek-auto-clear-searches').checked
-        },
-        listenbrainz: {
-            base_url: document.getElementById('listenbrainz-base-url').value,
-            token: document.getElementById('listenbrainz-token').value,
-            scrobble_enabled: document.getElementById('listenbrainz-scrobble-enabled').checked,
-        },
-        acoustid: {
-            api_key: document.getElementById('acoustid-api-key').value,
-            enabled: document.getElementById('acoustid-enabled').checked
-        },
-        lastfm: {
-            api_key: document.getElementById('lastfm-api-key').value,
-            api_secret: document.getElementById('lastfm-api-secret').value,
-            scrobble_enabled: document.getElementById('lastfm-scrobble-enabled').checked,
-            embed_tags: document.getElementById('embed-lastfm').checked,
-            tags: _collectServiceTags('lastfm')
-        },
-        genius: {
-            access_token: document.getElementById('genius-access-token').value,
-            embed_tags: document.getElementById('embed-genius').checked,
-            tags: _collectServiceTags('genius')
-        },
-        itunes: {
-            country: document.getElementById('itunes-country').value || 'US',
-            embed_tags: document.getElementById('embed-itunes').checked,
-            tags: _collectServiceTags('itunes')
-        },
-        discogs: {
-            token: document.getElementById('discogs-token').value,
-        },
-        metadata: {
-            fallback_source: document.getElementById('metadata-fallback-source').value || 'itunes'
-        },
-        hydrabase: {
-            url: document.getElementById('hydrabase-url').value,
-            api_key: document.getElementById('hydrabase-api-key').value,
-            auto_connect: document.getElementById('hydrabase-auto-connect').checked
-        },
-        download_source: {
-            mode: document.getElementById('download-source-mode').value,
-            hybrid_primary: document.getElementById('hybrid-primary-source').value,
-            hybrid_secondary: document.getElementById('hybrid-secondary-source').value,
-            hybrid_order: getHybridOrder(),
-            stream_source: document.getElementById('stream-source').value,
-            max_concurrent: parseInt(document.getElementById('max-concurrent-downloads').value) || 3,
-        },
-        tidal_download: {
-            quality: document.getElementById('tidal-download-quality').value || 'lossless',
-            allow_fallback: document.getElementById('tidal-allow-fallback').checked,
-        },
-        hifi_download: {
-            quality: document.getElementById('hifi-download-quality').value || 'lossless',
-            allow_fallback: document.getElementById('hifi-allow-fallback').checked,
-        },
-        deezer_download: {
-            quality: document.getElementById('deezer-download-quality').value || 'flac',
-            arl: document.getElementById('deezer-download-arl').value || '',
-            allow_fallback: document.getElementById('deezer-allow-fallback').checked,
-        },
-        lidarr_download: {
-            url: document.getElementById('lidarr-url').value || '',
-            api_key: document.getElementById('lidarr-api-key').value || '',
-        },
-        qobuz: {
-            quality: document.getElementById('qobuz-quality').value || 'lossless',
-            embed_tags: document.getElementById('embed-qobuz').checked,
-            tags: _collectServiceTags('qobuz'),
-            allow_fallback: document.getElementById('qobuz-allow-fallback').checked,
-        },
-        database: {
-            max_workers: parseInt(document.getElementById('max-workers').value)
-        },
-        metadata_enhancement: {
-            enabled: document.getElementById('metadata-enabled').checked,
-            embed_album_art: document.getElementById('embed-album-art').checked,
-            cover_art_download: document.getElementById('cover-art-download').checked,
-            prefer_caa_art: document.getElementById('prefer-caa-art').checked,
-            lrclib_enabled: document.getElementById('lrclib-enabled').checked,
-            tags: {
-                quality_tag: _getTagConfig('metadata_enhancement.tags.quality_tag'),
-                genre_merge: _getTagConfig('metadata_enhancement.tags.genre_merge'),
-                artist_separator: document.getElementById('artist-separator').value,
-                write_multi_artist: document.getElementById('write-multi-artist').checked,
-                feat_in_title: document.getElementById('feat-in-title').checked
-            }
-        },
-        musicbrainz: {
-            embed_tags: document.getElementById('embed-musicbrainz').checked,
-            tags: _collectServiceTags('musicbrainz')
-        },
-        deezer: {
-            app_id: document.getElementById('deezer-app-id').value,
-            app_secret: document.getElementById('deezer-app-secret').value,
-            redirect_uri: document.getElementById('deezer-redirect-uri').value,
-            embed_tags: document.getElementById('embed-deezer').checked,
-            tags: _collectServiceTags('deezer')
-        },
-        audiodb: {
-            embed_tags: document.getElementById('embed-audiodb').checked,
-            tags: _collectServiceTags('audiodb')
-        },
-        file_organization: {
-            enabled: document.getElementById('file-organization-enabled').checked,
-            disc_label: document.getElementById('disc-label').value,
-            collab_artist_mode: document.getElementById('collab-artist-mode').value,
-            templates: {
-                album_path: document.getElementById('template-album-path').value,
-                single_path: document.getElementById('template-single-path').value,
-                playlist_path: document.getElementById('template-playlist-path').value,
-                video_path: document.getElementById('template-video-path').value
-            }
-        },
-        wishlist: {
-            allow_duplicate_tracks: document.getElementById('allow-duplicate-tracks').checked
-        },
-        playlist_sync: {
-            create_backup: document.getElementById('create-backup').checked
-        },
-        content_filter: {
-            allow_explicit: document.getElementById('allow-explicit').checked
-        },
-        genre_whitelist: {
-            enabled: document.getElementById('genre-whitelist-enabled').checked,
-            genres: _collectGenreWhitelist(),
-        },
-        post_processing: {
-            replaygain_enabled: document.getElementById('replaygain-enabled').checked,
-        },
-        library: {
-            music_paths: collectMusicPaths(),
-            music_videos_path: document.getElementById('music-videos-path').value || './MusicVideos'
-        },
-        import: {
-            replace_lower_quality: document.getElementById('import-replace-lower-quality').checked,
-            staging_path: document.getElementById('staging-path').value || './Staging'
-        },
-        lossy_copy: {
-            enabled: document.getElementById('lossy-copy-enabled').checked,
-            codec: document.getElementById('lossy-copy-codec').value,
-            bitrate: document.getElementById('lossy-copy-bitrate').value,
-            delete_original: document.getElementById('lossy-copy-delete-original').checked,
-            downsample_hires: document.getElementById('downsample-hires').checked
-        },
-        listening_stats: {
-            enabled: document.getElementById('listening-stats-enabled').checked,
-            poll_interval: parseInt(document.getElementById('listening-stats-interval').value) || 30,
-        },
-        m3u_export: {
-            enabled: document.getElementById('m3u-export-enabled').checked,
-            entry_base_path: document.getElementById('m3u-entry-base-path').value || ''
-        },
-        ui_appearance: {
-            accent_preset: document.getElementById('accent-preset')?.value || '#1db954',
-            accent_color: document.getElementById('accent-custom-color')?.value || '#1db954',
-            sidebar_visualizer: document.getElementById('sidebar-visualizer-type')?.value || 'bars',
-            particles_enabled: document.getElementById('particles-enabled')?.checked !== false,
-            worker_orbs_enabled: document.getElementById('worker-orbs-enabled')?.checked !== false,
-            reduce_effects: document.getElementById('reduce-effects-enabled')?.checked === true
-        },
-        youtube: {
-            cookies_browser: document.getElementById('youtube-cookies-browser').value,
-            download_delay: parseInt(document.getElementById('youtube-download-delay').value) || 3,
-        },
-        security: {
-            require_pin_on_launch: document.getElementById('security-require-pin')?.checked || false,
-        }
-    };
-
-    try {
-        if (!quiet) showLoadingOverlay('Saving settings...');
-
-        // Save main settings
-        const response = await fetch(API.settings, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(settings)
-        });
-
-        const result = await response.json();
-
-        // Save quality profile
-        const qualityProfileSaved = await saveQualityProfile();
-
-        // Save discovery lookback period
-        let lookbackSaved = true;
-        try {
-            const lookbackPeriod = document.getElementById('discovery-lookback-period').value;
-            const lookbackResponse = await fetch('/api/discovery/lookback-period', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ period: lookbackPeriod })
-            });
-            const lookbackResult = await lookbackResponse.json();
-            lookbackSaved = lookbackResult.success === true;
-        } catch (error) {
-            console.error('Error saving discovery lookback period:', error);
-            lookbackSaved = false;
-        }
-
-        // Save hemisphere setting
-        try {
-            const hemisphere = document.getElementById('discovery-hemisphere').value;
-            await fetch('/api/discovery/hemisphere', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ hemisphere })
-            });
-        } catch (error) {
-            console.error('Error saving hemisphere setting:', error);
-        }
-
-        if (result.success && qualityProfileSaved && lookbackSaved) {
-            showToast(quiet ? 'Settings auto-saved' : 'Settings saved successfully', 'success');
-            _forceServiceStatusRefresh();
-            _stgRefreshAfterSave();
-        } else if (result.success && qualityProfileSaved && !lookbackSaved) {
-            showToast('Settings saved, but discovery lookback period failed to save', 'warning');
-            _forceServiceStatusRefresh();
-            _stgRefreshAfterSave();
-        } else if (result.success && !qualityProfileSaved) {
-            showToast('Settings saved, but quality profile failed to save', 'warning');
-            _forceServiceStatusRefresh();
-            _stgRefreshAfterSave();
-        } else {
-            showToast(`Failed to save settings: ${result.error}`, 'error', 'set-services');
-        }
-    } catch (error) {
-        console.error('Error saving settings:', error);
-        showToast('Failed to save settings', 'error', 'set-services');
-    } finally {
-        if (!quiet) hideLoadingOverlay();
-    }
-}
-
-async function authorizeLastfmScrobbling() {
-    try {
-        // Save settings first so API secret is stored
-        await saveSettings();
-        const resp = await fetch('/api/lastfm/auth-url');
-        const data = await resp.json();
-        if (data.success && data.url) {
-            window.open(data.url, '_blank', 'width=600,height=500');
-            showToast('Authorize SoulSync in the Last.fm window that opened', 'info');
-        } else {
-            showToast(data.error || 'Could not generate auth URL', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to start Last.fm authorization', 'error');
-    }
-}
-
-async function testConnection(service) {
-    try {
-        showLoadingOverlay(`Testing ${service} connection...`);
-
-        const response = await fetch(API.testConnection, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ service })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            // Use backend's message which contains dynamic source name
-            showToast(result.message || `${service} connection successful`, 'success');
-
-            // Load music libraries after successful connection
-            if (service === 'plex') {
-                loadPlexMusicLibraries();
-            } else if (service === 'jellyfin') {
-                loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
-            } else if (service === 'navidrome') {
-                loadNavidromeMusicFolders();
-            }
-        } else {
-            showToast(`${service} connection failed: ${result.error}`, 'error', 'gs-connecting');
-        }
-    } catch (error) {
-        console.error(`Error testing ${service} connection:`, error);
-        showToast(`Failed to test ${service} connection`, 'error', 'gs-connecting');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function clearQuarantine() {
-    if (!await showConfirmDialog({ title: 'Clear Quarantine', message: 'Delete all files in the quarantine folder? This cannot be undone.', confirmText: 'Delete', destructive: true })) return;
-    try {
-        showLoadingOverlay('Clearing quarantine folder...');
-        const response = await fetch('/api/quarantine/clear', { method: 'POST' });
-        const result = await response.json();
-        if (result.success) {
-            showToast(result.message || 'Quarantine cleared', 'success');
-        } else {
-            showToast(`Failed to clear quarantine: ${result.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error clearing quarantine:', error);
-        showToast('Failed to clear quarantine', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-// ======================== API Key Management ========================
-
-async function loadApiKeys() {
-    const container = document.getElementById('api-keys-list');
-    if (!container) return;
-
-    try {
-        const response = await fetch('/api/v1/api-keys-internal');
-        if (response.ok) {
-            const data = await response.json();
-            renderApiKeys(data.data?.keys || []);
-        } else {
-            container.innerHTML = '<div style="color: #666; font-size: 13px;">No API keys configured.</div>';
-        }
-    } catch (e) {
-        container.innerHTML = '<div style="color: #666; font-size: 13px;">No API keys configured.</div>';
-    }
-}
-
-function renderApiKeys(keys) {
-    const container = document.getElementById('api-keys-list');
-    if (!container) return;
-
-    if (!keys || keys.length === 0) {
-        container.innerHTML = '<div style="color: #666; font-size: 13px; padding: 4px 0;">No API keys yet. Generate one below.</div>';
-        return;
-    }
-
-    container.innerHTML = keys.map(k => `
-        <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin-bottom: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;">
-            <div style="flex: 1; min-width: 0;">
-                <div style="font-size: 13px; color: #e0e0e0; font-weight: 500;">${k.label || 'Unnamed'}</div>
-                <div style="font-size: 11px; color: #666; margin-top: 2px;">
-                    <code>${k.key_prefix || 'sk_...'}...</code>
-                    &middot; Created ${k.created_at ? new Date(k.created_at).toLocaleDateString() : 'unknown'}
-                    ${k.last_used_at ? '&middot; Last used ' + new Date(k.last_used_at).toLocaleDateString() : ''}
-                </div>
-            </div>
-            <button onclick="revokeApiKey('${k.id}', '${(k.label || 'this key').replace(/'/g, "\\'")}')"
-                style="padding: 4px 10px; background: rgba(255,82,82,0.1); border: 1px solid rgba(255,82,82,0.2); color: #ff5252; border-radius: 4px; cursor: pointer; font-size: 11px; white-space: nowrap;">
-                Revoke
-            </button>
-        </div>
-    `).join('');
-}
-
-async function generateApiKey() {
-    const labelInput = document.getElementById('api-key-label');
-    const label = labelInput ? labelInput.value.trim() : '';
-
-    try {
-        const response = await fetch('/api/v1/api-keys-internal/generate', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ label: label || 'Default' })
-        });
-        const data = await response.json();
-
-        if (data.success && data.data?.key) {
-            const keyDisplay = document.getElementById('api-key-generated');
-            const keyValue = document.getElementById('api-key-value');
-            if (keyDisplay && keyValue) {
-                keyValue.textContent = data.data.key;
-                keyDisplay.style.display = 'block';
-            }
-            if (labelInput) labelInput.value = '';
-            showToast('API key generated! Copy it now.', 'success');
-            loadApiKeys();
-        } else {
-            showToast(data.error?.message || 'Failed to generate API key', 'error');
-        }
-    } catch (error) {
-        console.error('Error generating API key:', error);
-        showToast('Failed to generate API key', 'error');
-    }
-}
-
-function copyApiKey() {
-    const keyValue = document.getElementById('api-key-value');
-    if (keyValue) {
-        navigator.clipboard.writeText(keyValue.textContent).then(() => {
-            showToast('API key copied to clipboard', 'success');
-        }).catch(() => {
-            // Fallback for older browsers
-            const range = document.createRange();
-            range.selectNode(keyValue);
-            window.getSelection().removeAllRanges();
-            window.getSelection().addRange(range);
-            document.execCommand('copy');
-            showToast('API key copied', 'success');
-        });
-    }
-}
-
-async function revokeApiKey(keyId, label) {
-    if (!await showConfirmDialog({ title: 'Revoke API Key', message: `Revoke API key "${label}"? Any apps using this key will stop working.`, confirmText: 'Revoke', destructive: true })) return;
-
-    try {
-        const response = await fetch(`/api/v1/api-keys-internal/revoke/${keyId}`, { method: 'DELETE' });
-        const data = await response.json();
-        if (data.success) {
-            showToast('API key revoked', 'success');
-            loadApiKeys();
-        } else {
-            showToast(data.error?.message || 'Failed to revoke key', 'error');
-        }
-    } catch (error) {
-        console.error('Error revoking API key:', error);
-        showToast('Failed to revoke key', 'error');
-    }
-}
-
-// Dashboard-specific test functions that create activity items
-async function testDashboardConnection(service) {
-    try {
-        showLoadingOverlay(`Testing ${service} service...`);
-
-        const response = await fetch(API.testDashboardConnection, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ service })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            // Use backend's message which contains dynamic source name
-            showToast(result.message || `${service} service verified`, 'success');
-            // Refresh status indicators immediately so UI reflects the new state
-            fetchAndUpdateServiceStatus();
-        } else {
-            showToast(`${service} service check failed: ${result.error}`, 'error');
-        }
-    } catch (error) {
-        console.error(`Error testing ${service} service:`, error);
-        showToast(`Failed to test ${service} service`, 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-// Individual Auto-detect functions - same as GUI
-async function autoDetectPlex() {
-    try {
-        showLoadingOverlay('Auto-detecting Plex server...');
-
-        const response = await fetch('/api/detect-media-server', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ server_type: 'plex' })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            document.getElementById('plex-url').value = result.found_url;
-            showToast(`Plex server detected: ${result.found_url}`, 'success');
-        } else {
-            showToast(result.error, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error auto-detecting Plex:', error);
-        showToast('Failed to auto-detect Plex server', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function autoDetectJellyfin() {
-    try {
-        showLoadingOverlay('Auto-detecting Jellyfin server...');
-
-        const response = await fetch('/api/detect-media-server', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ server_type: 'jellyfin' })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            document.getElementById('jellyfin-url').value = result.found_url;
-            showToast(`Jellyfin server detected: ${result.found_url}`, 'success');
-        } else {
-            showToast(result.error, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error auto-detecting Jellyfin:', error);
-        showToast('Failed to auto-detect Jellyfin server', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function autoDetectNavidrome() {
-    try {
-        showLoadingOverlay('Auto-detecting Navidrome server...');
-
-        const response = await fetch('/api/detect-media-server', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ server_type: 'navidrome' })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            document.getElementById('navidrome-url').value = result.found_url;
-            showToast(`Navidrome server detected: ${result.found_url}`, 'success');
-        } else {
-            showToast(result.error, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error auto-detecting Navidrome:', error);
-        showToast('Failed to auto-detect Navidrome server', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function autoDetectSlskd() {
-    try {
-        showLoadingOverlay('Auto-detecting Soulseek (slskd) server...');
-
-        const response = await fetch('/api/detect-soulseek', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            document.getElementById('soulseek-url').value = result.found_url;
-            showToast(`Soulseek server detected: ${result.found_url}`, 'success');
-        } else {
-            showToast(result.error, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error auto-detecting Soulseek:', error);
-        showToast('Failed to auto-detect Soulseek server', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-
-function cancelDetection(service) {
-    const progressDiv = document.getElementById(`${service}-detection-progress`);
-    progressDiv.classList.add('hidden');
-    showToast(`${service} detection cancelled`, 'error');
-}
-
-function updateStatusDisplays() {
-    // Update status displays based on current service status
-    // This would be called after status updates
-    const services = ['spotify', 'media-server', 'soulseek'];
-    services.forEach(service => {
-        const display = document.getElementById(`${service}-status-display`);
-        if (display) {
-            // Status will be updated by the regular status monitoring
-        }
-    });
-}
-
-async function authenticateSpotify() {
-    try {
-        showLoadingOverlay('Saving credentials and starting Spotify authentication...');
-        // Save settings first to ensure client_id/client_secret are persisted
-        await saveSettings();
-        showToast('Spotify authentication started', 'success');
-        window.open('/auth/spotify', '_blank');
-    } catch (error) {
-        console.error('Error authenticating Spotify:', error);
-        showToast('Failed to start Spotify authentication', 'error', 'gs-connecting');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function disconnectSpotify() {
-    const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
-    if (!await showConfirmDialog({ title: 'Disconnect Spotify', message: `Disconnect Spotify? The app will switch to ${fallbackName} for metadata.` })) {
-        return;
-    }
-    try {
-        showLoadingOverlay('Disconnecting Spotify...');
-        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Spotify disconnected. Now using ${fallbackName}.`, 'success');
-            // Immediately refresh status to update UI
-            await fetchAndUpdateServiceStatus();
-        } else {
-            showToast(`Failed to disconnect: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error disconnecting Spotify:', error);
-        showToast('Failed to disconnect Spotify', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function clearSpotifyCacheAndFallback() {
-    const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
-    if (!await showConfirmDialog({
-        title: 'Clear Spotify Cache',
-        message: `This will clear the Spotify token cache and switch metadata to ${fallbackName}. You can re-authenticate later.`
-    })) return;
-    try {
-        showLoadingOverlay('Clearing Spotify cache...');
-        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
-        const data = await response.json();
-        if (data.success) {
-            showToast(data.message || `Switched to ${fallbackName}`, 'success');
-            await fetchAndUpdateServiceStatus();
-        } else {
-            showToast(`Failed: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        showToast('Failed to clear Spotify cache', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-// ── Spotify Rate Limit Handling ───────────────────────────────────────────
-let _spotifyRateLimitShown = false;
-let _spotifyInCooldown = false;
-let _rateLimitModalOpen = false;
-let _rateLimitCountdownInterval = null;
-let _rateLimitExpiresAt = 0;
-
-function handleSpotifyRateLimit(rateLimitInfo) {
-    if (!rateLimitInfo || !rateLimitInfo.active) {
-        if (_spotifyRateLimitShown) {
-            _spotifyRateLimitShown = false;
-            closeRateLimitModal();
-            showToast('Spotify access restored', 'success');
-            // Refresh discover page if user is on it — data source switched back to Spotify
-            if (currentPage === 'discover') {
-                console.log('Spotify restored — refreshing discover page data');
-                loadDiscoverPage();
-            }
-        }
-        return;
-    }
-    // Update countdown if modal is open (status pushes every 10s keep it accurate)
-    if (_rateLimitModalOpen && rateLimitInfo.remaining_seconds) {
-        _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
-    }
-    if (!_spotifyRateLimitShown) {
-        _spotifyRateLimitShown = true;
-        _spotifyInCooldown = false;
-        showRateLimitModal(rateLimitInfo);
-        // Refresh discover page if user is on it — data source switched to iTunes
-        if (currentPage === 'discover') {
-            console.log('Spotify rate limited — refreshing discover page with iTunes data');
-            loadDiscoverPage();
-        }
-    }
-}
-
-function showRateLimitModal(rateLimitInfo) {
-    const overlay = document.getElementById('rate-limit-modal-overlay');
-    if (!overlay) return;
-
-    // Populate details
-    const banDuration = document.getElementById('rate-limit-ban-duration');
-    const endpoint = document.getElementById('rate-limit-endpoint');
-    const countdown = document.getElementById('rate-limit-countdown');
-
-    banDuration.textContent = formatRateLimitDuration(rateLimitInfo.retry_after || rateLimitInfo.remaining_seconds);
-    endpoint.textContent = rateLimitInfo.endpoint || 'unknown';
-    countdown.textContent = formatRateLimitDuration(rateLimitInfo.remaining_seconds);
-
-    // Set expiry for live countdown
-    _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
-
-    // Start live countdown timer
-    if (_rateLimitCountdownInterval) clearInterval(_rateLimitCountdownInterval);
-    _rateLimitCountdownInterval = setInterval(() => {
-        const remaining = Math.max(0, Math.round((_rateLimitExpiresAt - Date.now()) / 1000));
-        countdown.textContent = formatRateLimitDuration(remaining);
-        if (remaining <= 0) {
-            clearInterval(_rateLimitCountdownInterval);
-            _rateLimitCountdownInterval = null;
-        }
-    }, 1000);
-
-    overlay.classList.remove('hidden');
-    _rateLimitModalOpen = true;
-}
-
-function closeRateLimitModal() {
-    const overlay = document.getElementById('rate-limit-modal-overlay');
-    if (overlay) overlay.classList.add('hidden');
-    if (_rateLimitCountdownInterval) {
-        clearInterval(_rateLimitCountdownInterval);
-        _rateLimitCountdownInterval = null;
-    }
-    _rateLimitModalOpen = false;
-}
-
-async function disconnectSpotifyFromRateLimit() {
-    closeRateLimitModal();
-    try {
-        showLoadingOverlay('Disconnecting Spotify...');
-        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
-        const data = await response.json();
-        if (data.success) {
-            _spotifyRateLimitShown = false;
-            showToast(`Spotify disconnected. Now using ${currentMusicSourceName}.`, 'success');
-            await fetchAndUpdateServiceStatus();
-            if (currentPage === 'discover') {
-                loadDiscoverPage();
-            }
-        } else {
-            showToast(`Failed to disconnect: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error disconnecting Spotify:', error);
-        showToast('Failed to disconnect Spotify', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function formatRateLimitDuration(seconds) {
-    if (!seconds || seconds <= 0) return '0s';
-    const h = Math.floor(seconds / 3600);
-    const m = Math.floor((seconds % 3600) / 60);
-    const s = seconds % 60;
-    if (h > 0) return `${h}h ${m}m`;
-    if (m > 0) return `${m}m ${s}s`;
-    return `${s}s`;
-}
-
-async function authenticateTidal() {
-    try {
-        showLoadingOverlay('Saving credentials and starting Tidal authentication...');
-        // Save settings first to ensure credentials are persisted
-        await saveSettings();
-        showToast('Tidal authentication started', 'success');
-        window.open('/auth/tidal', '_blank');
-    } catch (error) {
-        console.error('Error authenticating Tidal:', error);
-        showToast('Failed to start Tidal authentication', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function authenticateDeezer() {
-    try {
-        showLoadingOverlay('Saving credentials and starting Deezer authentication...');
-        await saveSettings();
-        showToast('Deezer authentication started', 'success');
-        window.open('/auth/deezer', '_blank');
-    } catch (error) {
-        console.error('Error authenticating Deezer:', error);
-        showToast('Failed to start Deezer authentication', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-// ===== Tidal Download Auth (Device Flow) =====
-
-async function testHiFiConnection() {
-    const statusEl = document.getElementById('hifi-connection-status');
-    const btn = document.getElementById('hifi-test-btn');
-    if (!statusEl) return;
-    statusEl.textContent = 'Checking...';
-    statusEl.style.color = '#aaa';
-    try {
-        const resp = await fetch('/api/hifi/status');
-        const data = await resp.json();
-        if (data.available) {
-            statusEl.textContent = `Connected (v${data.version || '?'})`;
-            statusEl.style.color = '#4caf50';
-        } else {
-            statusEl.textContent = 'No instances reachable';
-            statusEl.style.color = '#ff9800';
-        }
-    } catch (e) {
-        statusEl.textContent = 'Connection error';
-        statusEl.style.color = '#f44336';
-    }
-}
-
-async function testLidarrConnection() {
-    const statusEl = document.getElementById('lidarr-connection-status');
-    if (!statusEl) return;
-    statusEl.textContent = 'Checking...';
-    statusEl.style.color = '#aaa';
-    try {
-        // Save settings first so the backend has the URL/key
-        await saveSettings();
-        const resp = await fetch('/api/test-connection', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ service: 'lidarr' })
-        });
-        const data = await resp.json();
-        if (data.success) {
-            statusEl.textContent = 'Connected';
-            statusEl.style.color = '#4caf50';
-        } else {
-            statusEl.textContent = data.error || 'Connection failed';
-            statusEl.style.color = '#f44336';
-        }
-    } catch (e) {
-        statusEl.textContent = 'Connection error';
-        statusEl.style.color = '#f44336';
-    }
-}
-
-async function checkHiFiInstances() {
-    const panel = document.getElementById('hifi-instances-panel');
-    const btn = document.getElementById('hifi-instances-check-btn');
-    if (!panel) return;
-    panel.style.display = 'block';
-    panel.innerHTML = '<div style="color: rgba(255,255,255,0.4); font-size: 0.85em; padding: 8px 0;">Checking instances...</div>';
-    if (btn) { btn.disabled = true; btn.textContent = 'Checking...'; }
-    try {
-        const resp = await fetch('/api/hifi/instances');
-        const data = await resp.json();
-        if (!data.instances || data.instances.length === 0) {
-            panel.innerHTML = '<div style="color: #ff9800; font-size: 0.85em;">No instances configured.</div>';
-            return;
-        }
-        const _statusIcon = (inst) => {
-            if (inst.can_download) return '<span style="color:#4caf50">● Download</span>';
-            if (inst.can_search) return '<span style="color:#ff9800">● Search only</span>';
-            if (inst.status === 'online') return '<span style="color:#ff9800">● Online (limited)</span>';
-            if (inst.status === 'ssl_error') return '<span style="color:#f44336">● SSL error</span>';
-            if (inst.status === 'timeout') return '<span style="color:#f44336">● Timeout</span>';
-            if (inst.status === 'offline') return '<span style="color:#f44336">● Offline</span>';
-            return `<span style="color:#f44336">● ${escapeHtml(inst.status)}</span>`;
-        };
-        panel.innerHTML = data.instances.map(inst => {
-            const isActive = inst.url === data.active;
-            const ver = inst.version ? ` v${inst.version}` : '';
-            const activeTag = isActive ? ' <span style="color:rgb(var(--accent-rgb));font-weight:600;font-size:0.75em;">(ACTIVE)</span>' : '';
-            return `<div style="display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.82em;">
-                <span style="color:rgba(255,255,255,0.6);font-family:monospace;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(inst.url)}${ver}${activeTag}</span>
-                <span style="flex-shrink:0;margin-left:12px;">${_statusIcon(inst)}</span>
-            </div>`;
-        }).join('');
-    } catch (e) {
-        panel.innerHTML = `<div style="color:#f44336;font-size:0.85em;">Error checking instances: ${escapeHtml(e.message)}</div>`;
-    } finally {
-        if (btn) { btn.disabled = false; btn.textContent = 'Check All Instances'; }
-    }
-}
-
-async function testDeezerDownloadConnection() {
-    const statusEl = document.getElementById('deezer-download-status');
-    if (!statusEl) return;
-    statusEl.textContent = 'Checking...';
-    statusEl.style.color = '#aaa';
-    try {
-        // Save the ARL first so the backend can use it
-        const arl = document.getElementById('deezer-download-arl')?.value || '';
-        if (!arl) {
-            statusEl.textContent = 'No ARL token provided';
-            statusEl.style.color = '#ff9800';
-            return;
-        }
-        const resp = await fetch('/api/deezer-download/test', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ arl }),
-        });
-        const data = await resp.json();
-        if (data.success) {
-            statusEl.textContent = `Connected as ${data.user || 'Unknown'} (${data.tier || 'Free'})`;
-            statusEl.style.color = '#4caf50';
-        } else {
-            statusEl.textContent = data.error || 'Authentication failed';
-            statusEl.style.color = '#f44336';
-        }
-    } catch (e) {
-        statusEl.textContent = 'Connection error';
-        statusEl.style.color = '#f44336';
-    }
-}
-
-async function checkTidalDownloadAuthStatus() {
-    const statusEl = document.getElementById('tidal-download-auth-status');
-    const btn = document.getElementById('tidal-download-auth-btn');
-    try {
-        const resp = await fetch('/api/tidal/download/auth/status');
-        const data = await resp.json();
-        if (data.authenticated) {
-            statusEl.textContent = 'Authenticated';
-            statusEl.style.color = '#4caf50';
-            btn.textContent = 'Re-link Tidal Account';
-        } else {
-            statusEl.textContent = 'Not authenticated';
-            statusEl.style.color = '#ff9800';
-            btn.textContent = 'Link Tidal Account';
-        }
-    } catch (e) {
-        statusEl.textContent = '';
-    }
-}
-
-let _tidalAuthPollTimer = null;
-
-async function startTidalDownloadAuth() {
-    const btn = document.getElementById('tidal-download-auth-btn');
-    const statusEl = document.getElementById('tidal-download-auth-status');
-    const codeEl = document.getElementById('tidal-download-auth-code');
-
-    btn.disabled = true;
-    btn.textContent = 'Starting...';
-    statusEl.textContent = '';
-
-    try {
-        const resp = await fetch('/api/tidal/download/auth/start', { method: 'POST' });
-        const data = await resp.json();
-
-        if (!resp.ok || !data.success) {
-            throw new Error(data.error || 'Failed to start auth');
-        }
-
-        // Show the link/code to the user
-        const uri = data.verification_uri || '';
-        const code = data.user_code || '';
-        codeEl.style.display = 'block';
-        codeEl.innerHTML = `Go to <a href="${uri}" target="_blank" style="color:rgb(var(--accent-rgb));">${uri}</a> and enter code: <strong>${code}</strong>`;
-        btn.textContent = 'Waiting for approval...';
-        statusEl.textContent = 'Waiting...';
-        statusEl.style.color = '#ff9800';
-
-        // Poll for completion
-        if (_tidalAuthPollTimer) clearInterval(_tidalAuthPollTimer);
-        _tidalAuthPollTimer = setInterval(async () => {
-            try {
-                const checkResp = await fetch('/api/tidal/download/auth/check');
-                const checkData = await checkResp.json();
-
-                if (checkData.status === 'completed') {
-                    clearInterval(_tidalAuthPollTimer);
-                    _tidalAuthPollTimer = null;
-                    codeEl.style.display = 'none';
-                    statusEl.textContent = 'Authenticated';
-                    statusEl.style.color = '#4caf50';
-                    btn.disabled = false;
-                    btn.textContent = 'Re-link Tidal Account';
-                    showToast('Tidal download account linked successfully', 'success');
-                } else if (checkData.status === 'error') {
-                    clearInterval(_tidalAuthPollTimer);
-                    _tidalAuthPollTimer = null;
-                    codeEl.style.display = 'none';
-                    statusEl.textContent = 'Auth failed';
-                    statusEl.style.color = '#f44336';
-                    btn.disabled = false;
-                    btn.textContent = 'Link Tidal Account';
-                    showToast('Tidal auth failed: ' + (checkData.message || 'Unknown error'), 'error');
-                }
-                // status === 'pending' — keep polling
-            } catch (pollErr) {
-                console.error('Tidal auth poll error:', pollErr);
-            }
-        }, 3000);
-
-    } catch (error) {
-        console.error('Tidal download auth error:', error);
-        showToast('Failed to start Tidal auth: ' + error.message, 'error');
-        btn.disabled = false;
-        btn.textContent = 'Link Tidal Account';
-        codeEl.style.display = 'none';
-    }
-}
-
-// ===============================
-// QOBUZ AUTH FUNCTIONS
-// ===============================
-
-async function checkQobuzAuthStatus() {
-    try {
-        const resp = await fetch('/api/qobuz/auth/status');
-        const data = await resp.json();
-
-        // Update downloads tab section
-        const formEl = document.getElementById('qobuz-auth-form');
-        const loggedInEl = document.getElementById('qobuz-auth-logged-in');
-        const userInfoEl = document.getElementById('qobuz-auth-user-info');
-
-        // Update connections tab section
-        const connFormEl = document.getElementById('qobuz-connection-form');
-        const connLoggedInEl = document.getElementById('qobuz-connection-logged-in');
-        const connUserInfoEl = document.getElementById('qobuz-connection-user-info');
-
-        if (data.authenticated) {
-            const user = data.user || {};
-            const label = `Connected: ${user.display_name || 'Qobuz User'} (${user.subscription || 'Active'})`;
-
-            if (userInfoEl) { userInfoEl.textContent = label; }
-            if (loggedInEl) loggedInEl.style.display = 'flex';
-            if (formEl) formEl.style.display = 'none';
-
-            if (connUserInfoEl) { connUserInfoEl.textContent = label; }
-            if (connLoggedInEl) connLoggedInEl.style.display = 'flex';
-            if (connFormEl) connFormEl.style.display = 'none';
-        } else {
-            if (loggedInEl) loggedInEl.style.display = 'none';
-            if (formEl) formEl.style.display = 'block';
-
-            if (connLoggedInEl) connLoggedInEl.style.display = 'none';
-            if (connFormEl) connFormEl.style.display = 'block';
-        }
-    } catch (e) {
-        console.error('Qobuz auth status check failed:', e);
-    }
-}
-
-async function loginQobuzFromConnections() {
-    const btn = document.getElementById('qobuz-connection-login-btn');
-    const statusEl = document.getElementById('qobuz-connection-status');
-    const email = document.getElementById('qobuz-connection-email').value.trim();
-    const password = document.getElementById('qobuz-connection-password').value;
-
-    if (!email || !password) {
-        showToast('Please enter your Qobuz email and password', 'warning');
-        return;
-    }
-
-    btn.disabled = true;
-    btn.textContent = 'Connecting...';
-    statusEl.textContent = '';
-
-    try {
-        const resp = await fetch('/api/qobuz/auth/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email, password }),
-        });
-        const data = await resp.json();
-
-        if (data.success) {
-            showToast('Qobuz connected successfully!', 'success');
-            document.getElementById('qobuz-connection-password').value = '';
-            checkQobuzAuthStatus();
-        } else {
-            statusEl.textContent = data.error || 'Login failed';
-            statusEl.style.color = '#ff5555';
-            showToast(data.error || 'Qobuz login failed', 'error');
-        }
-    } catch (error) {
-        console.error('Qobuz login error:', error);
-        statusEl.textContent = 'Connection error';
-        statusEl.style.color = '#ff5555';
-        showToast('Failed to connect to Qobuz', 'error');
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Connect Qobuz';
-    }
-}
-
-async function loginQobuzWithToken() {
-    const btn = document.getElementById('qobuz-token-login-btn');
-    const statusEl = document.getElementById('qobuz-token-status');
-    const token = document.getElementById('qobuz-connection-token').value.trim();
-
-    if (!token) {
-        showToast('Please paste your Qobuz auth token', 'warning');
-        return;
-    }
-
-    btn.disabled = true;
-    btn.textContent = 'Connecting...';
-    if (statusEl) statusEl.textContent = '';
-
-    try {
-        const resp = await fetch('/api/qobuz/auth/token', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token }),
-        });
-        const data = await resp.json();
-
-        if (data.success) {
-            showToast('Qobuz connected via token!', 'success');
-            document.getElementById('qobuz-connection-token').value = '';
-            checkQobuzAuthStatus();
-        } else {
-            if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
-            showToast(data.error || 'Qobuz token login failed', 'error');
-        }
-    } catch (error) {
-        console.error('Qobuz token login error:', error);
-        if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
-        showToast('Failed to connect to Qobuz', 'error');
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Connect with Token';
-    }
-}
-
-async function loginQobuzWithTokenFromDownloads() {
-    const btn = document.getElementById('qobuz-download-token-btn');
-    const statusEl = document.getElementById('qobuz-download-token-status');
-    const token = document.getElementById('qobuz-download-token').value.trim();
-
-    if (!token) {
-        showToast('Please paste your Qobuz auth token', 'warning');
-        return;
-    }
-
-    btn.disabled = true;
-    btn.textContent = 'Connecting...';
-    if (statusEl) statusEl.textContent = '';
-
-    try {
-        const resp = await fetch('/api/qobuz/auth/token', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ token }),
-        });
-        const data = await resp.json();
-
-        if (data.success) {
-            showToast('Qobuz connected via token!', 'success');
-            document.getElementById('qobuz-download-token').value = '';
-            checkQobuzAuthStatus();
-        } else {
-            if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
-            showToast(data.error || 'Qobuz token login failed', 'error');
-        }
-    } catch (error) {
-        console.error('Qobuz token login error:', error);
-        if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
-        showToast('Failed to connect to Qobuz', 'error');
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Connect with Token';
-    }
-}
-
-async function loginQobuz() {
-    const btn = document.getElementById('qobuz-login-btn');
-    const statusEl = document.getElementById('qobuz-auth-status');
-    const email = document.getElementById('qobuz-email').value.trim();
-    const password = document.getElementById('qobuz-password').value;
-
-    if (!email || !password) {
-        showToast('Please enter your Qobuz email and password', 'warning');
-        return;
-    }
-
-    btn.disabled = true;
-    btn.textContent = 'Connecting...';
-    statusEl.textContent = '';
-
-    try {
-        const resp = await fetch('/api/qobuz/auth/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ email, password }),
-        });
-
-        const data = await resp.json();
-
-        if (data.success) {
-            showToast('Qobuz connected successfully!', 'success');
-            // Clear password field
-            document.getElementById('qobuz-password').value = '';
-            checkQobuzAuthStatus();
-        } else {
-            statusEl.textContent = data.error || 'Login failed';
-            statusEl.style.color = '#ff5555';
-            showToast(data.error || 'Qobuz login failed', 'error');
-        }
-    } catch (error) {
-        console.error('Qobuz login error:', error);
-        statusEl.textContent = 'Connection error';
-        statusEl.style.color = '#ff5555';
-        showToast('Failed to connect to Qobuz', 'error');
-    } finally {
-        btn.disabled = false;
-        btn.textContent = 'Connect Qobuz';
-    }
-}
-
-async function logoutQobuz() {
-    try {
-        await fetch('/api/qobuz/auth/logout', { method: 'POST' });
-        showToast('Qobuz disconnected', 'success');
-        checkQobuzAuthStatus();
-    } catch (e) {
-        console.error('Qobuz logout error:', e);
-    }
-}
-
-const PATH_INPUT_IDS = {
-    download: 'download-path',
-    transfer: 'transfer-path',
-    staging: 'staging-path',
-    'music-videos': 'music-videos-path',
-    'm3u-entry-base': 'm3u-entry-base-path'
-};
-
-function togglePathLock(pathType, btn) {
-    const input = document.getElementById(PATH_INPUT_IDS[pathType]);
-    if (!input) return;
-    const isLocked = input.hasAttribute('readonly');
-    if (isLocked) {
-        input.removeAttribute('readonly');
-        input.focus();
-        btn.textContent = 'Lock';
-        btn.classList.remove('locked');
-    } else {
-        input.setAttribute('readonly', '');
-        btn.textContent = 'Unlock';
-        btn.classList.add('locked');
-    }
-}
-
-
-// ===============================
-// SEARCH FUNCTIONALITY
-// ===============================
-
-function initializeSearch() {
-    // --- FIX: Corrected the element IDs to match the HTML ---
-    const searchInput = document.getElementById('downloads-search-input');
-    const searchButton = document.getElementById('downloads-search-btn');
-
-    // Add this line to get the cancel button
-    const cancelButton = document.getElementById('downloads-cancel-btn');
-
-    if (searchButton && searchInput) {
-        searchButton.addEventListener('click', performDownloadsSearch);
-        searchInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') performDownloadsSearch();
-        });
-    }
-
-    // Add this event listener for the cancel button
-    if (cancelButton) {
-        cancelButton.addEventListener('click', () => {
-            if (searchAbortController) {
-                searchAbortController.abort(); // This cancels the fetch request
-                console.log("Search cancelled by user.");
-            }
-        });
-    }
-}
-
-// ===============================
-// SEARCH MODE TOGGLE
-// ===============================
-
-let searchModeToggleInitialized = false;
-
-function initializeSearchModeToggle() {
-    // Only initialize once to prevent duplicate event listeners
-    if (searchModeToggleInitialized) {
-        console.log('Search mode toggle already initialized, skipping...');
-        return;
-    }
-
-    const toggleContainer = document.querySelector('.search-mode-toggle');
-    const modeBtns = document.querySelectorAll('.search-mode-btn');
-    const basicSection = document.getElementById('basic-search-section');
-    const enhancedSection = document.getElementById('enhanced-search-section');
-
-    if (!toggleContainer || !modeBtns.length || !basicSection || !enhancedSection) {
-        console.warn('Search mode toggle elements not found');
-        return;
-    }
-
-    searchModeToggleInitialized = true;
-    console.log('✅ Initializing search mode toggle (first time only)');
-
-    modeBtns.forEach(btn => {
-        btn.addEventListener('click', () => {
-            const mode = btn.dataset.mode;
-
-            // Update button active states
-            modeBtns.forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-
-            // Update toggle slider position
-            toggleContainer.setAttribute('data-active', mode);
-
-            // Toggle sections
-            if (mode === 'basic') {
-                basicSection.classList.add('active');
-                enhancedSection.classList.remove('active');
-                console.log('Switched to basic search mode');
-            } else {
-                basicSection.classList.remove('active');
-                enhancedSection.classList.add('active');
-                console.log('Switched to enhanced search mode');
-            }
-        });
-    });
-
-    // Initialize enhanced search
-    const enhancedInput = document.getElementById('enhanced-search-input');
-    const enhancedSearchBtn = document.getElementById('enhanced-search-btn');
-    const enhancedCancelBtn = document.getElementById('enhanced-cancel-btn');
-    const enhancedDropdown = document.getElementById('enhanced-dropdown');
-    const loadingState = document.getElementById('enhanced-loading');
-    const emptyState = document.getElementById('enhanced-empty');
-    const resultsContainer = document.getElementById('enhanced-results-container');
-
-    let debounceTimer = null;
-    let abortController = null;
-
-    // Multi-source search state
-    let _enhancedSearchData = null;   // Full response with all sources
-    let _activeSearchSource = null;   // Currently displayed source tab
-    let _altSourceController = null;  // AbortController for alternate source fetches
-
-    const SOURCE_LABELS = {
-        spotify: { text: 'Spotify', tabClass: 'enh-tab-spotify', badgeClass: 'enh-badge-spotify' },
-        itunes: { text: 'Apple Music', tabClass: 'enh-tab-itunes', badgeClass: 'enh-badge-itunes' },
-        deezer: { text: 'Deezer', tabClass: 'enh-tab-deezer', badgeClass: 'enh-badge-deezer' },
-        discogs: { text: 'Discogs', tabClass: 'enh-tab-discogs', badgeClass: 'enh-badge-discogs' },
-        hydrabase: { text: 'Hydrabase', tabClass: 'enh-tab-hydrabase', badgeClass: 'enh-badge-hydrabase' },
-        youtube_videos: { text: 'Music Videos', tabClass: 'enh-tab-youtube', badgeClass: 'enh-badge-youtube' },
-        musicbrainz: { text: 'MusicBrainz', tabClass: 'enh-tab-musicbrainz', badgeClass: 'enh-badge-musicbrainz' },
-    };
-
-    // Live search with debouncing
-    if (enhancedInput) {
-        enhancedInput.addEventListener('input', (e) => {
-            const query = e.target.value.trim();
-
-            // Show/hide cancel button
-            if (enhancedCancelBtn) {
-                enhancedCancelBtn.classList.toggle('hidden', query.length === 0);
-            }
-
-            // Clear debounce timer
-            clearTimeout(debounceTimer);
-
-            // Hide dropdown if query too short
-            if (query.length < 2) {
-                hideDropdown();
-                return;
-            }
-
-            // Debounce search
-            debounceTimer = setTimeout(() => {
-                performEnhancedSearch(query);
-            }, 300);
-        });
-
-        enhancedInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                const query = e.target.value.trim();
-                if (query.length >= 2) {
-                    clearTimeout(debounceTimer);
-                    performEnhancedSearch(query);
-                }
-            }
-        });
-    }
-
-    if (enhancedSearchBtn) {
-        enhancedSearchBtn.addEventListener('click', (e) => {
-            // Prevent click from bubbling to document (which would close the dropdown)
-            e.stopPropagation();
-
-            // Get fresh references (in case we navigated away and back)
-            const dropdown = document.getElementById('enhanced-dropdown');
-            const results = document.getElementById('enhanced-results-container');
-
-            if (!dropdown) return;
-
-            // Toggle the dropdown visibility to show/hide previous search results
-            if (dropdown.classList.contains('hidden')) {
-                // Check if there are results to show by looking for actual content
-                const hasResults = results &&
-                    !results.classList.contains('hidden') &&
-                    results.children.length > 0;
-
-                if (hasResults) {
-                    showDropdown();
-                } else {
-                    showToast('No previous results to show. Type to search!', 'info');
-                }
-            } else {
-                hideDropdown();
-            }
-        });
-    }
-
-    if (enhancedCancelBtn) {
-        enhancedCancelBtn.addEventListener('click', () => {
-            enhancedInput.value = '';
-            enhancedCancelBtn.classList.add('hidden');
-            hideDropdown();
-        });
-    }
-
-    // Close button inside dropdown (mobile)
-    const dropdownCloseBtn = document.getElementById('enhanced-dropdown-close');
-    if (dropdownCloseBtn) {
-        dropdownCloseBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            hideDropdown();
-        });
-    }
-
-    // Close dropdown when clicking outside
-    document.addEventListener('click', (e) => {
-        const dropdown = document.getElementById('enhanced-dropdown');
-        if (dropdown && !dropdown.classList.contains('hidden')) {
-            const isClickInside = e.target.closest('.enhanced-search-input-wrapper');
-            if (!isClickInside) {
-                hideDropdown();
-            }
-        }
-    });
-
-    async function performEnhancedSearch(query) {
-        console.log('Enhanced search:', query);
-        const searchId = Date.now() + Math.random();
-
-        // Show loading state with correct source name
-        showDropdown();
-        const loadingText = document.getElementById('enhanced-loading-text');
-        if (loadingText) {
-            loadingText.textContent = `Searching across ${currentMusicSourceName} and your library...`;
-        }
-        loadingState.classList.remove('hidden');
-        emptyState.classList.add('hidden');
-        resultsContainer.classList.add('hidden');
-
-        // Abort previous requests (primary + alternates)
-        if (abortController) {
-            abortController.abort();
-        }
-        if (_altSourceController) {
-            _altSourceController.abort();
-        }
-        abortController = new AbortController();
-        _altSourceController = new AbortController();
-
-        // Initialize multi-source state early so alternate fetches can write to it
-        _enhancedSearchData = { db_artists: [], primary_source: null, sources: {}, searchId, query };
-
-        try {
-            const response = await fetch('/api/enhanced-search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query }),
-                signal: abortController.signal
-            });
-
-            if (!response.ok) throw new Error('Search failed');
-
-            const data = await response.json();
-            console.log('Enhanced results:', data);
-
-            // Store multi-source state
-            const primarySource = data.primary_source || data.metadata_source || 'deezer';
-            _activeSearchSource = primarySource;
-            _enhancedSearchData = _enhancedSearchData || {};
-            _enhancedSearchData.db_artists = data.db_artists;
-            _enhancedSearchData.primary_source = primarySource;
-            if (!_enhancedSearchData.sources) _enhancedSearchData.sources = {};
-            _enhancedSearchData.sources[primarySource] = {
-                artists: data.spotify_artists || [],
-                albums: data.spotify_albums || [],
-                tracks: data.spotify_tracks || [],
-                available: true,
-            };
-
-            // Calculate total from primary source
-            const total = (data.db_artists?.length || 0) +
-                (data.spotify_artists?.length || 0) +
-                (data.spotify_albums?.length || 0) +
-                (data.spotify_tracks?.length || 0);
-
-            // Hide loading
-            loadingState.classList.add('hidden');
-
-            if (total === 0) {
-                emptyState.classList.remove('hidden');
-            } else {
-                renderSourceTabs(_enhancedSearchData);
-                renderDropdownResults(data);
-                resultsContainer.classList.remove('hidden');
-            }
-
-            // Alternate sources now start after the primary response has landed.
-            // This avoids speculative fan-out for short or aborted searches.
-            _queueAlternateSourceFetches(data.alternate_sources || [], query, searchId);
-
-        } catch (error) {
-            if (error.name !== 'AbortError') {
-                console.error('Enhanced search error:', error);
-                loadingState.classList.add('hidden');
-                emptyState.classList.remove('hidden');
-            }
-        }
-    }
-
-    function renderDropdownResults(data) {
-        // Music Videos tab — don't render regular sections
-        if (_activeSearchSource === 'youtube_videos') return;
-
-        // Determine source badge from active tab (not just primary)
-        const displaySource = _activeSearchSource || data.metadata_source || 'spotify';
-        const sourceInfo = SOURCE_LABELS[displaySource] || SOURCE_LABELS.spotify;
-        const sourceBadge = { text: sourceInfo.text, class: sourceInfo.badgeClass };
-
-        // Render DB Artists
-        renderCompactSection(
-            'enh-db-artists-section',
-            'enh-db-artists-list',
-            'enh-db-artists-count',
-            data.db_artists || [],
-            (artist) => ({
-                image: artist.image_url,
-                placeholder: '📚',
-                name: artist.name,
-                meta: 'In Your Library',
-                badge: { text: 'Library', class: 'enh-badge-library' },
-                onClick: () => {
-                    console.log(`🎵 Opening library artist detail: ${artist.name} (ID: ${artist.id})`);
-                    hideDropdown();
-                    navigateToArtistDetail(artist.id, artist.name);
-                }
-            })
-        );
-
-        // Render Artists (source-aware badge)
-        renderCompactSection(
-            'enh-spotify-artists-section',
-            'enh-spotify-artists-list',
-            'enh-spotify-artists-count',
-            data.spotify_artists || [],
-            (artist) => ({
-                image: artist.image_url,
-                placeholder: '🎤',
-                name: artist.name,
-                meta: 'Artist',
-                badge: sourceBadge,
-                onClick: async () => {
-                    const sourceOverride = _activeSearchSource;
-                    console.log(`🎵 Opening artist detail: ${artist.name} (ID: ${artist.id}, source: ${sourceOverride})`);
-                    hideDropdown();
-
-                    // Navigate to Artists page
-                    navigateToPage('artists');
-
-                    // Small delay to let the page load
-                    await new Promise(resolve => setTimeout(resolve, 100));
-
-                    // Load the artist details with source context
-                    await selectArtistForDetail(artist, {
-                        source: sourceOverride,
-                        plugin: artist.external_urls?.hydrabase_plugin,
-                    });
-                }
-            })
-        );
-
-        // Split albums from singles/EPs (albums is the catch-all for unknown types)
-        const allAlbums = data.spotify_albums || [];
-        const singlesAndEPs = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
-        const albums = allAlbums.filter(a => a.album_type !== 'single' && a.album_type !== 'ep');
-
-        // Render Albums
-        renderCompactSection(
-            'enh-albums-section',
-            'enh-albums-list',
-            'enh-albums-count',
-            albums,
-            (album) => ({
-                image: album.image_url,
-                placeholder: '💿',
-                name: album.name,
-                meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
-                onClick: () => handleEnhancedSearchAlbumClick(album)
-            })
-        );
-
-        // Render Singles & EPs
-        renderCompactSection(
-            'enh-singles-section',
-            'enh-singles-list',
-            'enh-singles-count',
-            singlesAndEPs,
-            (album) => ({
-                image: album.image_url,
-                placeholder: '🎶',
-                name: album.name,
-                meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
-                onClick: () => handleEnhancedSearchAlbumClick(album)
-            })
-        );
-
-        // Render Tracks
-        renderCompactSection(
-            'enh-tracks-section',
-            'enh-tracks-list',
-            'enh-tracks-count',
-            data.spotify_tracks || [],
-            (track) => {
-                const duration = formatDuration(track.duration_ms);
-                return {
-                    image: track.image_url,
-                    placeholder: '🎵',
-                    name: track.name,
-                    meta: `${track.artist} • ${track.album}`,
-                    duration: duration,
-                    onClick: () => handleEnhancedSearchTrackClick(track),
-                    onPlay: () => streamEnhancedSearchTrack(track)
-                };
-            }
-        );
-
-        // Lazy load artist images that are missing
-        lazyLoadEnhancedSearchArtistImages();
-
-        // Async library ownership check — doesn't block rendering
-        _checkSearchResultsLibraryOwnership(data);
-    }
-
-    async function _checkSearchResultsLibraryOwnership(data) {
-        try {
-            const allAlbums = data.spotify_albums || [];
-            const allTracks = data.spotify_tracks || [];
-            if (!allAlbums.length && !allTracks.length) return;
-
-            const resp = await fetch('/api/enhanced-search/library-check', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    albums: allAlbums.map(a => ({ name: a.name, artist: a.artist })),
-                    tracks: allTracks.map(t => ({ name: t.name, artist: t.artist })),
-                }),
-            });
-            const result = await resp.json();
-
-            // Tag album cards with staggered animation
-            const albumCards = document.querySelectorAll('#enh-albums-list .enh-compact-item, #enh-singles-list .enh-compact-item');
-            const albumResults = result.albums || [];
-            let delay = 0;
-            albumCards.forEach((card, i) => {
-                if (albumResults[i]) {
-                    setTimeout(() => {
-                        const badge = document.createElement('div');
-                        badge.className = 'enh-item-lib-badge';
-                        badge.textContent = 'In Library';
-                        card.appendChild(badge);
-                    }, delay);
-                    delay += 30;
-                }
-            });
-
-            // Tag track rows + wire up library playback
-            const trackCards = document.querySelectorAll('#enh-tracks-list .enh-compact-item');
-            const trackResults = result.tracks || [];
-            trackCards.forEach((card, i) => {
-                const tr = trackResults[i];
-                if (tr && tr.in_library) {
-                    setTimeout(() => {
-                        const badge = document.createElement('div');
-                        badge.className = 'enh-item-lib-badge';
-                        badge.textContent = 'In Library';
-                        card.appendChild(badge);
-
-                        // Replace stream button to play from library instead of searching
-                        if (tr.file_path) {
-                            const playBtn = card.querySelector('.enh-item-play-btn');
-                            if (playBtn) {
-                                const newBtn = playBtn.cloneNode(true);
-                                newBtn.title = 'Play from library';
-                                newBtn.textContent = '▶';
-                                const trackInfo = tr;
-                                newBtn.addEventListener('click', (e) => {
-                                    e.stopPropagation();
-                                    playLibraryTrack(
-                                        { id: trackInfo.track_id, title: trackInfo.title, file_path: trackInfo.file_path, _stats_image: trackInfo.album_thumb_url || null },
-                                        trackInfo.album_title || '',
-                                        trackInfo.artist_name || ''
-                                    );
-                                });
-                                playBtn.replaceWith(newBtn);
-                            }
-                        }
-                    }, delay);
-                    delay += 30;
-                } else if (tr && tr.in_wishlist) {
-                    setTimeout(() => {
-                        if (!card.querySelector('.enh-item-wishlist-badge')) {
-                            const badge = document.createElement('div');
-                            badge.className = 'enh-item-wishlist-badge';
-                            badge.textContent = 'In Wishlist';
-                            card.appendChild(badge);
-                        }
-                    }, delay);
-                    delay += 30;
-                }
-            });
-        } catch (e) {
-            console.debug('Library check failed:', e);
-        }
-    }
-
-    function _queueAlternateSourceFetches(alternateSources, query, searchId) {
-        if (!Array.isArray(alternateSources) || alternateSources.length === 0) return;
-
-        // Fetch metadata sources first, then YouTube last so it does not compete
-        // with the primary artist/album/track results for early attention.
-        const orderedSources = ['spotify', 'itunes', 'deezer', 'discogs', 'musicbrainz', 'hydrabase', 'youtube_videos']
-            .filter(src => alternateSources.includes(src) && src !== _activeSearchSource);
-
-        orderedSources.forEach((src, index) => {
-            setTimeout(() => {
-                if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-                _fetchAlternateSource(src, query, searchId);
-            }, index * 150);
-        });
-    }
-
-    async function _fetchAlternateSource(sourceName, query, searchId) {
-        try {
-            if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
-            const response = await fetch(`/api/enhanced-search/source/${sourceName}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query }),
-                signal: _altSourceController?.signal,
-            });
-            if (!response.ok) return;
-            if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
-            // Stream NDJSON — render each search type (artists, albums, tracks) as it arrives
-            if (!_enhancedSearchData.sources[sourceName]) {
-                const loadingSet = sourceName === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
-                _enhancedSearchData.sources[sourceName] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
-            }
-            const sourceData = _enhancedSearchData.sources[sourceName];
-
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let buffer = '';
-
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                buffer += decoder.decode(value, { stream: true });
-
-                let newlineIdx;
-                while ((newlineIdx = buffer.indexOf('\n')) !== -1) {
-                    const line = buffer.slice(0, newlineIdx).trim();
-                    buffer = buffer.slice(newlineIdx + 1);
-                    if (!line) continue;
-                    if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
-
-                    try {
-                        const chunk = JSON.parse(line);
-                        if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
-                        else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
-                        else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
-                        else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
-                        else if (chunk.type === 'done') { delete sourceData._loading; break; }
-
-                        // Re-render tabs + content if this is the active source
-                        if (_enhancedSearchData.primary_source) {
-                            renderSourceTabs(_enhancedSearchData);
-                            if (_activeSearchSource === sourceName) {
-                                window._switchEnhSourceTab(sourceName);
-                            }
-                        }
-                    } catch (parseErr) {
-                        console.debug(`NDJSON parse error for ${sourceName}:`, parseErr);
-                    }
-                }
-            }
-
-            // Final render
-            if (_enhancedSearchData && _enhancedSearchData.searchId === searchId && _enhancedSearchData.primary_source) {
-                renderSourceTabs(_enhancedSearchData);
-            }
-        } catch (e) {
-            if (e.name !== 'AbortError') {
-                console.debug(`Alternate source ${sourceName} failed:`, e);
-            }
-        }
-    }
-
-    function renderSourceTabs(data) {
-        const tabBar = document.getElementById('enh-source-tabs');
-        if (!tabBar) return;
-
-        const sources = data.sources || {};
-        const primary = data.primary_source || 'spotify';
-
-        // Build tab list: primary first, then alternates sorted alphabetically.
-        // Hide completed zero-result sources so the bar stays focused.
-        const sourceNames = Object.keys(sources).filter(s => sources[s].available);
-        const visibleSources = sourceNames.filter(name => {
-            const src = sources[name] || {};
-            const count = name === 'youtube_videos'
-                ? (src.videos?.length || 0)
-                : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
-            const isLoading = !!(src._loading && src._loading.size > 0);
-            return isLoading || count > 0 || name === _activeSearchSource;
-        });
-        if (visibleSources.length <= 1) {
-            tabBar.classList.add('hidden');
-            tabBar.innerHTML = '';
-            return;
-        }
-
-        // Primary tab first, then others
-        const ordered = [primary, ...visibleSources.filter(s => s !== primary).sort()];
-
-        tabBar.innerHTML = ordered.map(name => {
-            const info = SOURCE_LABELS[name] || { text: name, tabClass: '' };
-            const src = sources[name] || {};
-            const count = name === 'youtube_videos'
-                ? (src.videos?.length || 0)
-                : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
-            const isActive = name === _activeSearchSource;
-            return `<button class="enh-source-tab ${info.tabClass} ${isActive ? 'active' : ''}"
-                            onclick="window._switchEnhSourceTab('${name}')"
-                            data-source="${name}">
-                        ${info.text}<span class="enh-tab-count">(${count})</span>
-                    </button>`;
-        }).join('');
-
-        tabBar.classList.remove('hidden');
-    }
-
-    // Expose tab switch globally (onclick from HTML)
-    window._switchEnhSourceTab = function (sourceName) {
-        if (!_enhancedSearchData || !_enhancedSearchData.sources) return;
-        const src = _enhancedSearchData.sources[sourceName];
-        if (!src) return;
-
-        _activeSearchSource = sourceName;
-
-        // Update tab active states
-        document.querySelectorAll('.enh-source-tab').forEach(tab => {
-            tab.classList.toggle('active', tab.dataset.source === sourceName);
-        });
-
-        // Music Videos tab — render video cards instead of regular sections
-        if (sourceName === 'youtube_videos') {
-            // Hide ALL regular sections including wrappers
-            ['enh-db-artists-section', 'enh-spotify-artists-section', 'enh-albums-section', 'enh-singles-section', 'enh-tracks-section'].forEach(id => {
-                const el = document.getElementById(id);
-                if (el) el.classList.add('hidden');
-            });
-            // Hide the artists wrapper div too
-            const artistsWrapper = document.querySelector('.enh-artists-wrapper');
-            if (artistsWrapper) artistsWrapper.style.display = 'none';
-            _renderVideoResults(src.videos || []);
-            resultsContainer.classList.remove('hidden');
-            return;
-        }
-
-        // Hide videos section and restore regular layout when switching to a metadata tab
-        const videosSec = document.getElementById('enh-videos-section');
-        if (videosSec) videosSec.classList.add('hidden');
-        const artistsWrapper = document.querySelector('.enh-artists-wrapper');
-        if (artistsWrapper) artistsWrapper.style.display = '';
-
-        // Build data in the shape renderDropdownResults expects
-        const viewData = {
-            db_artists: _enhancedSearchData.db_artists,
-            spotify_artists: src.artists || [],
-            spotify_albums: src.albums || [],
-            spotify_tracks: src.tracks || [],
-            metadata_source: sourceName,
-        };
-
-        renderDropdownResults(viewData);
-        resultsContainer.classList.remove('hidden');
-
-        // Show loading spinners for categories still streaming
-        if (src._loading && src._loading.size > 0) {
-            const loadingHtml = '<div class="enh-section-loading"><div class="server-search-spinner" style="width:16px;height:16px"></div><span>Loading...</span></div>';
-            if (src._loading.has('artists')) {
-                const sec = document.getElementById('enh-spotify-artists-section');
-                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-spotify-artists-list').innerHTML = loadingHtml; }
-            }
-            if (src._loading.has('albums')) {
-                const sec = document.getElementById('enh-albums-section');
-                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-albums-list').innerHTML = loadingHtml; }
-                const sec2 = document.getElementById('enh-singles-section');
-                if (sec2) { sec2.classList.remove('hidden'); document.getElementById('enh-singles-list').innerHTML = loadingHtml; }
-            }
-            if (src._loading.has('tracks')) {
-                const sec = document.getElementById('enh-tracks-section');
-                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-tracks-list').innerHTML = loadingHtml; }
-            }
-        }
-    };
-
-    function _renderVideoResults(videos) {
-        let section = document.getElementById('enh-videos-section');
-        if (!section) {
-            // Create the section dynamically if it doesn't exist
-            const container = document.getElementById('enhanced-results-container');
-            if (!container) return;
-            section = document.createElement('div');
-            section.id = 'enh-videos-section';
-            section.className = 'enh-dropdown-section';
-            section.innerHTML = `
-                <div class="enh-section-header">
-                    <span class="enh-section-icon">🎬</span>
-                    <h4 class="enh-section-title">Music Videos</h4>
-                    <span class="enh-section-count" id="enh-videos-count">0</span>
-                </div>
-                <div class="enh-video-grid" id="enh-videos-list"></div>
-            `;
-            container.appendChild(section);
-        }
-
-        section.classList.remove('hidden');
-        const countEl = document.getElementById('enh-videos-count');
-        const listEl = document.getElementById('enh-videos-list');
-        if (countEl) countEl.textContent = videos.length;
-
-        if (!videos.length) {
-            listEl.innerHTML = '<div class="enh-empty-state">No music videos found</div>';
-            return;
-        }
-
-        listEl.innerHTML = videos.map(v => {
-            const duration = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
-            const views = v.view_count ? _formatViewCount(v.view_count) : '';
-            return `
-                <div class="enh-video-card" data-video-id="${v.video_id}" onclick="_downloadMusicVideo(this, ${JSON.stringify(v).replace(/"/g, '&quot;')})">
-                    <div class="enh-video-thumb">
-                        <img src="${v.thumbnail}" alt="" loading="lazy" onerror="this.style.display='none'">
-                        <div class="enh-video-play">▶</div>
-                        <div class="enh-video-progress-ring hidden">
-                            <svg viewBox="0 0 36 36">
-                                <circle class="enh-video-progress-bg" cx="18" cy="18" r="15.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3"/>
-                                <circle class="enh-video-progress-bar" cx="18" cy="18" r="15.5" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="3" stroke-dasharray="97.4" stroke-dashoffset="97.4" stroke-linecap="round" transform="rotate(-90 18 18)"/>
-                            </svg>
-                        </div>
-                        <div class="enh-video-done hidden">✓</div>
-                        <div class="enh-video-error hidden">✗</div>
-                        ${duration ? `<span class="enh-video-duration">${duration}</span>` : ''}
-                    </div>
-                    <div class="enh-video-info">
-                        <div class="enh-video-title" title="${v.title.replace(/"/g, '&quot;')}">${v.title}</div>
-                        <div class="enh-video-channel">${v.channel}${views ? ` · ${views} views` : ''}</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-    }
-
-    function _formatViewCount(count) {
-        if (count >= 1000000000) return `${(count / 1000000000).toFixed(1)}B`;
-        if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
-        if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
-        return String(count);
-    }
-
-    // Lazy load artist images for enhanced search results
-    async function lazyLoadEnhancedSearchArtistImages() {
-        const artistLists = [
-            document.getElementById('enh-db-artists-list'),
-            document.getElementById('enh-spotify-artists-list')
-        ];
-
-        for (const list of artistLists) {
-            if (!list) continue;
-
-            const cardsNeedingImages = list.querySelectorAll('[data-needs-image="true"]');
-            if (cardsNeedingImages.length === 0) continue;
-
-            console.log(`🖼️ Lazy loading ${cardsNeedingImages.length} artist images in enhanced search`);
-
-            for (const card of cardsNeedingImages) {
-                const artistId = card.dataset.artistId;
-                if (!artistId) continue;
-
-                try {
-                    const imgUrl = _activeSearchSource && _activeSearchSource !== 'spotify'
-                        ? `/api/artist/${artistId}/image?source=${_activeSearchSource}`
-                        : `/api/artist/${artistId}/image`;
-                    const response = await fetch(imgUrl);
-                    const data = await response.json();
-
-                    if (data.success && data.image_url) {
-                        // Find the placeholder and replace with image
-                        const placeholder = card.querySelector('.enh-item-image-placeholder');
-                        if (placeholder) {
-                            const img = document.createElement('img');
-                            img.src = data.image_url;
-                            img.className = 'enh-item-image artist-image';
-                            img.alt = card.querySelector('.enh-item-name')?.textContent || 'Artist';
-                            placeholder.replaceWith(img);
-
-                            // Apply dynamic glow
-                            extractImageColors(data.image_url, (colors) => {
-                                applyDynamicGlow(card, colors);
-                            });
-                        }
-                        card.dataset.needsImage = 'false';
-                        console.log(`✅ Loaded image for artist ${artistId}`);
-                    }
-                } catch (error) {
-                    console.warn(`⚠️ Failed to load image for artist ${artistId}:`, error);
-                }
-            }
-        }
-    }
-
-    function formatDuration(durationMs) {
-        if (!durationMs) return '';
-        const totalSeconds = Math.floor(durationMs / 1000);
-        const minutes = Math.floor(totalSeconds / 60);
-        const seconds = totalSeconds % 60;
-        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-    }
-
-    function renderCompactSection(sectionId, listId, countId, items, mapItem) {
-        const section = document.getElementById(sectionId);
-        const list = document.getElementById(listId);
-        const count = document.getElementById(countId);
-
-        if (!list) return;
-
-        list.innerHTML = '';
-
-        if (!items || items.length === 0) {
-            section.classList.add('hidden');
-            return;
-        }
-
-        section.classList.remove('hidden');
-        count.textContent = items.length;
-
-        // Determine type based on section ID
-        const isArtist = sectionId.includes('artists');
-        const isAlbum = sectionId.includes('albums') || sectionId.includes('singles');
-        const isTrack = sectionId.includes('tracks');
-
-        // Add appropriate grid class to list
-        if (isArtist) {
-            list.classList.add('enh-artists-grid');
-        } else if (isAlbum) {
-            list.classList.add('enh-albums-grid');
-        } else if (isTrack) {
-            list.classList.add('enh-tracks-list');
-        }
-
-        items.forEach(item => {
-            const config = mapItem(item);
-            const elem = document.createElement('div');
-
-            // Add appropriate card class
-            if (isArtist) {
-                elem.className = 'enh-compact-item artist-card';
-                // Add data attributes for lazy loading
-                if (item.id) {
-                    elem.dataset.artistId = item.id;
-                    elem.dataset.needsImage = config.image ? 'false' : 'true';
-                }
-            } else if (isAlbum) {
-                elem.className = 'enh-compact-item album-card';
-            } else if (isTrack) {
-                elem.className = 'enh-compact-item track-item';
-            }
-
-            // Build image HTML with type-specific classes
-            let imageClass = 'enh-item-image';
-            let placeholderClass = 'enh-item-image-placeholder';
-
-            if (isArtist) {
-                imageClass += ' artist-image';
-                placeholderClass += ' artist-placeholder';
-            } else if (isAlbum) {
-                imageClass += ' album-cover';
-                placeholderClass += ' album-placeholder';
-            } else if (isTrack) {
-                imageClass += ' track-cover';
-                placeholderClass += ' track-placeholder';
-            }
-
-            const imageHtml = config.image
-                ? `<img src="${escapeHtml(config.image)}" class="${imageClass}" alt="${escapeHtml(config.name)}">`
-                : `<div class="${placeholderClass}" data-lazy-image="true">${config.placeholder}</div>`;
-
-            const badgeHtml = config.badge
-                ? `<div class="enh-item-badge ${config.badge.class}">${config.badge.text}</div>`
-                : '';
-
-            const durationHtml = config.duration && isTrack
-                ? `<div class="enh-item-duration">
-                     ${escapeHtml(config.duration)}
-                     <button class="enh-item-play-btn" title="Stream this track">▶</button>
-                   </div>`
-                : '';
-
-            elem.innerHTML = `
-                ${imageHtml}
-                <div class="enh-item-info">
-                    <div class="enh-item-name">${escapeHtml(config.name)}</div>
-                    <div class="enh-item-meta">${escapeHtml(config.meta)}</div>
-                </div>
-                ${durationHtml}
-                ${badgeHtml}
-            `;
-
-            elem.addEventListener('click', config.onClick);
-
-            // Add play button handler for tracks
-            if (isTrack && config.onPlay) {
-                const playBtn = elem.querySelector('.enh-item-play-btn');
-                if (playBtn) {
-                    playBtn.addEventListener('click', (e) => {
-                        e.stopPropagation(); // Don't trigger main onClick
-                        config.onPlay();
-                    });
-                }
-            }
-
-            list.appendChild(elem);
-
-            // Extract colors from image for dynamic glow effect
-            if (config.image) {
-                extractImageColors(config.image, (colors) => {
-                    applyDynamicGlow(elem, colors);
-                });
-            }
-        });
-    }
-
-    async function handleEnhancedSearchAlbumClick(album) {
-        console.log(`💿 Enhanced search album clicked: ${album.name} by ${album.artist}`);
-
-        hideDropdown();
-        showLoadingOverlay('Loading album...');
-
-        try {
-            // Fetch full album data with tracks — pass source for correct routing
-            const albumParams = new URLSearchParams({ name: album.name || '', artist: album.artist || '' });
-            if (_activeSearchSource && _activeSearchSource !== 'spotify') {
-                albumParams.set('source', _activeSearchSource);
-            }
-            // Pass Hydrabase plugin origin so server routes to correct client
-            if (album.external_urls?.hydrabase_plugin) {
-                albumParams.set('plugin', album.external_urls.hydrabase_plugin);
-            }
-            const response = await fetch(`/api/spotify/album/${album.id}?${albumParams}`);
-
-            if (!response.ok) {
-                if (response.status === 401) {
-                    throw new Error('Spotify not authenticated. Please check your API settings.');
-                }
-                throw new Error(`Failed to load album: ${response.status}`);
-            }
-
-            const albumData = await response.json();
-
-            if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-                hideLoadingOverlay();
-                showToast(`No tracks available for "${album.name}". This release may have been delisted or is not available in your region.`, 'warning');
-                return;
-            }
-
-            console.log(`✅ Loaded ${albumData.tracks.length} tracks for ${albumData.name}`);
-
-            // Create virtual playlist ID for enhanced search albums
-            const virtualPlaylistId = `enhanced_search_album_${album.id}`;
-
-            // Check if modal already exists and show it
-            if (activeDownloadProcesses[virtualPlaylistId]) {
-                console.log(`📱 Reopening existing modal for ${album.name}`);
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process.modalElement) {
-                    if (process.status === 'complete') {
-                        showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-                    }
-                    process.modalElement.style.display = 'flex';
-                    hideLoadingOverlay();
-                    return;
-                }
-            }
-
-            // Enrich each track with full album object (needed for wishlist functionality)
-            const enrichedTracks = albumData.tracks.map(track => ({
-                ...track,
-                album: {
-                    name: albumData.name,
-                    id: albumData.id,
-                    album_type: albumData.album_type || 'album',
-                    images: albumData.images || [],
-                    release_date: albumData.release_date,
-                    total_tracks: albumData.total_tracks
-                }
-            }));
-
-            console.log(`📦 Enriched ${enrichedTracks.length} tracks with album metadata`);
-
-            // Format playlist name
-            const playlistName = `[${album.artist}] ${albumData.name}`;
-
-            // Create artist object for the modal — extract ID from album data
-            const firstArtist = (albumData.artists || [])[0] || {};
-            const artistObject = {
-                id: firstArtist.id || album.id?.split?.('_')?.[0] || '',
-                name: firstArtist.name || album.artist,
-                image_url: firstArtist.image_url || firstArtist.images?.[0]?.url || '',
-                source: _activeSearchSource || '',
-            };
-
-            // Prepare full album object for modal
-            const fullAlbumObject = {
-                name: albumData.name,
-                id: albumData.id,
-                album_type: albumData.album_type || 'album',
-                images: albumData.images || [],
-                release_date: albumData.release_date,
-                total_tracks: albumData.total_tracks,
-                artists: albumData.artists || [{ name: album.artist }]
-            };
-
-            // Open download missing tracks modal
-            await openDownloadMissingModalForArtistAlbum(
-                virtualPlaylistId,
-                playlistName,
-                enrichedTracks,
-                fullAlbumObject,
-                artistObject,
-                false // Don't show loading overlay, we already have one
-            );
-
-            // Register this download in search bubbles
-            registerSearchDownload(
-                {
-                    id: album.id,
-                    name: albumData.name,
-                    artist: album.artist,
-                    image_url: albumData.images?.[0]?.url || null,
-                    images: albumData.images || []
-                },
-                'album',
-                virtualPlaylistId,
-                album.artist // artistName for grouping
-            );
-
-            hideLoadingOverlay();
-
-        } catch (error) {
-            hideLoadingOverlay();
-            console.error('❌ Error handling enhanced search album click:', error);
-            showToast(`Error opening album: ${error.message}`, 'error');
-        }
-    }
-
-    async function streamEnhancedSearchTrack(track) {
-        console.log(`▶️ Stream enhanced search track: ${track.name} by ${track.artist}`);
-
-        hideDropdown();
-        showLoadingOverlay(`Searching for ${track.name}...`);
-
-        try {
-            // Send track metadata to backend for quick slskd search
-            const response = await fetch('/api/enhanced-search/stream-track', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    track_name: track.name,
-                    artist_name: track.artist,
-                    album_name: track.album,
-                    duration_ms: track.duration_ms
-                })
-            });
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || 'Failed to search for track');
-            }
-
-            const data = await response.json();
-
-            if (!data.success || !data.result) {
-                throw new Error('No suitable track found');
-            }
-
-            const slskdResult = data.result;
-
-            // Check if audio format is supported (YouTube/Tidal use encoded filenames, skip check)
-            const isStreamingSource = slskdResult.username === 'youtube' || slskdResult.username === 'tidal' || slskdResult.username === 'qobuz' || slskdResult.username === 'hifi';
-            if (!isStreamingSource && slskdResult.filename && !isAudioFormatSupported(slskdResult.filename)) {
-                const format = getFileExtension(slskdResult.filename);
-                hideLoadingOverlay();
-                showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
-                return;
-            }
-
-            console.log(`✅ Found track to stream:`, slskdResult);
-            console.log(`🎵 Track details - Username: ${slskdResult.username}, Filename: ${slskdResult.filename}`);
-
-            hideLoadingOverlay();
-
-            // Use existing startStream function to play the track
-            console.log(`📡 Calling startStream() with result...`);
-            await startStream(slskdResult);
-            console.log(`✅ startStream() completed`);
-
-        } catch (error) {
-            hideLoadingOverlay();
-            console.error('❌ Error streaming enhanced search track:', error);
-            showToast(`Failed to stream track: ${error.message}`, 'error');
-        }
-    }
-
-    async function handleEnhancedSearchTrackClick(track) {
-        console.log(`🎵 Enhanced search track clicked: ${track.name} by ${track.artist}`);
-
-        hideDropdown();
-        showLoadingOverlay('Loading track...');
-
-        try {
-            // Create virtual playlist ID for enhanced search tracks
-            const virtualPlaylistId = `enhanced_search_track_${track.id}`;
-
-            // Check if modal already exists and show it
-            if (activeDownloadProcesses[virtualPlaylistId]) {
-                console.log(`📱 Reopening existing modal for ${track.name}`);
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process.modalElement) {
-                    if (process.status === 'complete') {
-                        showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-                    }
-                    process.modalElement.style.display = 'flex';
-                    hideLoadingOverlay();
-                    return;
-                }
-            }
-
-            // Enrich track with album object (needed for wishlist functionality)
-            const enrichedTrack = {
-                id: track.id,
-                name: track.name,
-                artists: [track.artist], // Convert string to array for modal compatibility
-                album: {
-                    name: track.album,
-                    id: null,
-                    album_type: 'single',
-                    images: track.image_url ? [{ url: track.image_url }] : [],
-                    release_date: track.release_date || null,
-                    total_tracks: 1
-                },
-                duration_ms: track.duration_ms,
-                popularity: track.popularity || 0,
-                preview_url: track.preview_url || null,
-                external_urls: track.external_urls || null,
-                image_url: track.image_url
-            };
-
-            console.log(`📦 Enriched track with album metadata`);
-
-            // Format playlist name
-            const playlistName = `${track.artist} - ${track.name}`;
-
-            // Create minimal artist object for the modal
-            const artistObject = {
-                id: null,
-                name: track.artist
-            };
-
-            // Prepare album object for modal (single track)
-            const albumObject = {
-                name: track.album,
-                id: null,
-                album_type: 'single',
-                images: track.image_url ? [{ url: track.image_url }] : [],
-                release_date: track.release_date || null,
-                total_tracks: 1,
-                artists: [{ name: track.artist }]
-            };
-
-            // Open download missing tracks modal with single track
-            await openDownloadMissingModalForArtistAlbum(
-                virtualPlaylistId,
-                playlistName,
-                [enrichedTrack], // Array with single track
-                albumObject,
-                artistObject,
-                false
-            );
-
-            // Register this download in search bubbles
-            registerSearchDownload(
-                {
-                    id: track.id,
-                    name: track.name,
-                    artist: track.artist,
-                    image_url: track.image_url,
-                    images: track.image_url ? [{ url: track.image_url }] : []
-                },
-                'track',
-                virtualPlaylistId,
-                track.artist // artistName for grouping
-            );
-
-            hideLoadingOverlay();
-
-        } catch (error) {
-            hideLoadingOverlay();
-            console.error('❌ Error handling enhanced search track click:', error);
-            showToast(`Error opening track: ${error.message}`, 'error');
-        }
-    }
-
-    async function searchSlskdFor(type, item) {
-        const mainResultsArea = document.getElementById('enhanced-main-results-area');
-        if (!mainResultsArea) return;
-
-        // Show loading in main results area
-        mainResultsArea.innerHTML = `
-            <div style="text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.7);">
-                <div style="width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid rgba(138,43,226,0.2); border-top-color: rgba(138,43,226,0.8); border-radius: 50%; animation: spin 1s linear infinite;"></div>
-                <p>Searching for ${type === 'album' ? 'album' : 'track'}...</p>
-            </div>
-        `;
-
-        const query = `${item.artist} ${item.name}`;
-
-        try {
-            const response = await fetch('/api/search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query })
-            });
-
-            const data = await response.json();
-
-            if (data.error) {
-                showToast(`Search error: ${data.error}`, 'error');
-                return;
-            }
-
-            // Filter results
-            const filtered = data.results.filter(r => r.result_type === type);
-
-            // Render slskd results in main area
-            renderSlskdInMainArea(filtered, type, item);
-
-        } catch (error) {
-            console.error('Slskd search error:', error);
-            showToast('Search failed', 'error');
-            mainResultsArea.innerHTML = '<div class="search-results-placeholder"><p>Search failed. Please try again.</p></div>';
-        }
-    }
-
-    function renderSlskdInMainArea(results, type, originalItem) {
-        const mainResultsArea = document.getElementById('enhanced-main-results-area');
-        if (!mainResultsArea) return;
-
-        if (!results || results.length === 0) {
-            mainResultsArea.innerHTML = '<div class="search-results-placeholder"><p>No matches found for this ' + type + '.</p></div>';
-            return;
-        }
-
-        // Render results using same style as basic search
-        mainResultsArea.innerHTML = results.map(result => {
-            const title = type === 'album'
-                ? `${result.album_title} (${result.tracks ? result.tracks.length : 0} tracks)`
-                : result.title;
-
-            return `
-                <div class="result-card">
-                    <div class="result-card-header">
-                        <h4 class="result-title">${escapeHtml(title)}</h4>
-                        <button class="download-result-btn" data-result='${JSON.stringify(result).replace(/'/g, "&#39;")}' data-type="${type}">
-                            💾 Download
-                        </button>
-                    </div>
-                    <div class="result-meta">
-                        ${result.bitrate ? `<span class="meta-badge">${result.bitrate} kbps</span>` : ''}
-                        ${result.format ? `<span class="meta-badge">${result.format.toUpperCase()}</span>` : ''}
-                        ${result.size ? `<span class="meta-badge">${(result.size / 1024 / 1024).toFixed(1)} MB</span>` : ''}
-                        ${result.username ? `<span class="meta-badge">👤 ${escapeHtml(result.username)}</span>` : ''}
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        // Attach download handlers
-        mainResultsArea.querySelectorAll('.download-result-btn').forEach(btn => {
-            btn.addEventListener('click', async function () {
-                const result = JSON.parse(this.dataset.result);
-                const type = this.dataset.type;
-
-                this.disabled = true;
-                this.textContent = 'Downloading...';
-
-                try {
-                    const downloadData = type === 'album'
-                        ? { result_type: 'album', tracks: result.tracks || [] }
-                        : { result_type: 'track', username: result.username, filename: result.filename, size: result.size };
-
-                    const response = await fetch('/api/download', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify(downloadData)
-                    });
-
-                    const data = await response.json();
-
-                    if (data.error) {
-                        showToast(`Download error: ${data.error}`, 'error');
-                        this.disabled = false;
-                        this.innerHTML = '💾 Download';
-                    } else {
-                        showToast('Download started!', 'success');
-                        this.innerHTML = '✅ Added';
-                    }
-                } catch (error) {
-                    console.error('Download error:', error);
-                    showToast('Download failed', 'error');
-                    this.disabled = false;
-                    this.innerHTML = '💾 Download';
-                }
-            });
-        });
-    }
-
-    function showDropdown() {
-        const dropdown = document.getElementById('enhanced-dropdown');
-        if (dropdown) {
-            dropdown.classList.remove('hidden');
-            updateToggleButtonState();
-        }
-        // Hide the page header + search mode toggle to reclaim space
-        const header = document.querySelector('#downloads-page .downloads-header');
-        const modeToggle = document.querySelector('.search-mode-toggle-container');
-        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
-        if (header) header.classList.add('enh-results-active-hide');
-        if (modeToggle) modeToggle.classList.add('enh-results-active-hide');
-        if (slskdPlaceholder) slskdPlaceholder.classList.add('enh-results-active-hide');
-    }
-
-    function hideDropdown() {
-        const dropdown = document.getElementById('enhanced-dropdown');
-        if (dropdown) {
-            dropdown.classList.add('hidden');
-            updateToggleButtonState();
-        }
-        // Restore hidden elements
-        const header = document.querySelector('#downloads-page .downloads-header');
-        const modeToggle = document.querySelector('.search-mode-toggle-container');
-        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
-        if (header) header.classList.remove('enh-results-active-hide');
-        if (modeToggle) modeToggle.classList.remove('enh-results-active-hide');
-        if (slskdPlaceholder) slskdPlaceholder.classList.remove('enh-results-active-hide');
-    }
-
-    function updateToggleButtonState() {
-        // Get fresh references
-        const btn = document.getElementById('enhanced-search-btn');
-        const dropdown = document.getElementById('enhanced-dropdown');
-
-        if (!btn || !dropdown) return;
-
-        const btnIcon = btn.querySelector('.btn-icon');
-        const btnText = btn.querySelector('.btn-text');
-
-        if (dropdown.classList.contains('hidden')) {
-            // Dropdown is hidden - button should say "Show Results"
-            if (btnIcon) btnIcon.textContent = '👁️';
-            if (btnText) btnText.textContent = 'Show Results';
-        } else {
-            // Dropdown is visible - button should say "Hide Results"
-            if (btnIcon) btnIcon.textContent = '🙈';
-            if (btnText) btnText.textContent = 'Hide Results';
-        }
-    }
-}
-
-async function performSearch() {
-    const query = document.getElementById('search-input').value.trim();
-    if (!query) {
-        showToast('Please enter a search term', 'error');
-        return;
-    }
-
-    try {
-        showLoadingOverlay('Searching...');
-        displaySearchResults([]);  // Clear previous results
-
-        const response = await fetch(API.search, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query })
-        });
-
-        const data = await response.json();
-
-        if (data.error) {
-            showToast(`Search error: ${data.error}`, 'error');
-            return;
-        }
-
-        searchResults = data.results || [];
-        displaySearchResults(searchResults);
-
-        if (searchResults.length === 0) {
-            showToast('No results found', 'error');
-        } else {
-            showToast(`Found ${searchResults.length} results`, 'success');
-        }
-
-    } catch (error) {
-        console.error('Error performing search:', error);
-        showToast('Search failed', 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function displaySearchResults(results) {
-    const resultsContainer = document.getElementById('search-results');
-
-    if (!results.length) {
-        resultsContainer.innerHTML = '<div class="no-results">No search results</div>';
-        return;
-    }
-
-    resultsContainer.innerHTML = results.map((result, index) => {
-        const isAlbum = result.type === 'album';
-        const sizeText = isAlbum ?
-            `${result.track_count || 0} tracks, ${(result.size_mb || 0).toFixed(1)} MB` :
-            `${(result.file_size / 1024 / 1024).toFixed(1)} MB, ${result.bitrate || 0}kbps`;
-
-        return `
-            <div class="search-result-item" onclick="selectResult(${index})">
-                <div class="result-header">
-                    <div class="result-info">
-                        <div class="result-title">${escapeHtml(result.title)}</div>
-                        <div class="result-artist">${escapeHtml(result.artist)}</div>
-                        ${result.album ? `<div class="result-album">${escapeHtml(result.album)}</div>` : ''}
-                    </div>
-                    <div class="result-actions">
-                        <button class="stream-button" onclick="event.stopPropagation(); streamTrack(${index})">
-                            ▷ Stream
-                        </button>
-                        <button class="download-button" onclick="event.stopPropagation(); startDownload(${index})">
-                            ⬇ Download
-                        </button>
-                    </div>
-                </div>
-                <div class="result-details">
-                    <span class="result-size">${sizeText}</span>
-                    <span class="result-user">by ${escapeHtml(result.username)}</span>
-                    ${result.quality ? `<span class="result-quality">${escapeHtml(result.quality)}</span>` : ''}
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function selectResult(index) {
-    const result = searchResults[index];
-    if (!result) return;
-
-    console.log('Selected result:', result);
-    // Could show detailed view or additional actions here
-}
-
-
-async function startDownload(index) {
-    const result = searchResults[index];
-    if (!result) return;
-
-    try {
-        const response = await fetch('/api/downloads/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(result)
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast('Download started', 'success');
-        } else {
-            showToast(`Download failed: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error starting download:', error);
-        showToast('Failed to start download', 'error');
-    }
-}
-
-// ===============================
-// PAGE DATA LOADING
-// ===============================
-
-async function loadInitialData() {
-    try {
-        // Load artist bubble state first
-        await hydrateArtistBubblesFromSnapshot();
-
-        // Load search bubble state
-        await hydrateSearchBubblesFromSnapshot();
-
-        // Load discover download state
-        await hydrateDiscoverDownloadsFromSnapshot();
-
-        // Navigate to user's home page (or dashboard for admin)
-        const homePage = getProfileHomePage();
-        const urlPage = _getPageFromPath();
-        const targetPage = (urlPage && urlPage !== 'dashboard' && isPageAllowed(urlPage))
-            ? urlPage
-            : homePage;
-
-        history.replaceState({ page: targetPage }, '', (targetPage === 'dashboard' ? '/' : '/' + targetPage) + window.location.search + window.location.hash);
-
-        if (targetPage !== 'dashboard') {
-            navigateToPage(targetPage, { skipPushState: true });
-        } else {
-            await loadDashboardData();
-            loadDashboardSyncHistory();
-        }
-    } catch (error) {
-        console.error('Error loading initial data:', error);
-    }
-}
-
-async function loadDashboardData() {
-    try {
-        const response = await fetch(API.activity);
-        const data = await response.json();
-
-        const activityFeed = document.getElementById('activity-feed');
-        if (data.activities && data.activities.length) {
-            activityFeed.innerHTML = data.activities.map(activity => `
-                <div class="activity-item">
-                    <span class="activity-time">${activity.time}</span>
-                    <span class="activity-text">${escapeHtml(activity.text)}</span>
-                </div>
-            `).join('');
-        }
-
-        // Initialize wishlist count when dashboard loads
-        await updateWishlistCount();
-
-        // Start periodic refresh of wishlist count (every 30 seconds, matching GUI behavior)
-        stopWishlistCountPolling(); // Ensure no duplicates
-        wishlistCountInterval = setInterval(updateWishlistCount, 30000);
-
-    } catch (error) {
-        console.error('Error loading dashboard data:', error);
-    }
-}
-
-// ===========================================
-// == SYNC PAGE SPOTIFY FUNCTIONALITY       ==
-// ===========================================
-
-async function loadSyncData() {
-    // This is called when the sync page is navigated to.
-    // Load server playlists first (default active tab)
-    if (!window._serverPlaylistsLoaded) {
-        window._serverPlaylistsLoaded = true;
-        loadServerPlaylists(); // Don't await — load in background
-    }
-
-    if (!spotifyPlaylistsLoaded) {
-        await loadSpotifyPlaylists();
-    }
-
-    // Load YouTube playlists from backend (always refresh to get latest state)
-    await loadYouTubePlaylistsFromBackend();
-
-    // Render saved URL histories for YouTube, Deezer, Spotify Link tabs
-    initUrlHistories();
-}
-
-async function ensureBeatportContentLoaded() {
-    if (beatportContentState.loaded) {
-        showBeatportDownloadsSection();
-        return true;
-    }
-
-    if (beatportContentState.loadingPromise) {
-        return beatportContentState.loadingPromise;
-    }
-
-    beatportContentState.abortController = new AbortController();
-    beatportContentState.loadingPromise = (async () => {
-        try {
-            console.log('🎧 Lazy-loading Beatport content...');
-
-            await hydrateBeatportBubblesFromSnapshot();
-            throwIfBeatportLoadAborted();
-            await loadBeatportChartsFromBackend();
-            throwIfBeatportLoadAborted();
-
-            initializeBeatportRebuildSlider();
-            initializeBeatportReleasesSlider();
-            initializeBeatportHypePicksSlider();
-            initializeBeatportChartsSlider();
-            initializeBeatportDJSlider();
-            throwIfBeatportLoadAborted();
-            await Promise.all([
-                loadBeatportTop10Lists(),
-                loadBeatportTop10Releases()
-            ]);
-            throwIfBeatportLoadAborted();
-            showBeatportDownloadsSection();
-
-            beatportContentState.loaded = true;
-            console.log('✅ Beatport content loaded');
-            return true;
-        } catch (error) {
-            if (error && error.name === 'AbortError') {
-                console.log('⏹ Beatport content load aborted');
-                return false;
-            }
-            console.error('❌ Error loading Beatport content:', error);
-            return false;
-        } finally {
-            beatportContentState.loadingPromise = null;
-            if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
-                beatportContentState.abortController = null;
-            }
-        }
-    })();
-
-    return beatportContentState.loadingPromise;
-}
-
-async function checkForActiveProcesses() {
-    try {
-        const response = await fetch('/api/active-processes');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        const processes = data.active_processes || [];
-
-        if (processes.length > 0) {
-            console.log(`🔄 Found ${processes.length} active process(es) from backend. Rehydrating UI...`);
-
-            // Separate download batch processes from YouTube playlist processes
-            const downloadProcesses = processes.filter(p => p.type === 'batch');
-            const youtubeProcesses = processes.filter(p => p.type === 'youtube_playlist');
-
-            console.log(`📊 Process breakdown: ${downloadProcesses.length} download batches, ${youtubeProcesses.length} YouTube playlists`);
-
-            // Rehydrate download modal processes (existing Spotify system)
-            for (const processInfo of downloadProcesses) {
-                if (!activeDownloadProcesses[processInfo.playlist_id]) {
-                    rehydrateModal(processInfo);
-                }
-            }
-
-            // Note: YouTube playlists are handled by loadYouTubePlaylistsFromBackend() and rehydrateYouTubePlaylist()
-            // in loadSyncData(), which provides more complete data than active processes and handles download modal rehydration.
-            console.log(`ℹ️ Skipping ${youtubeProcesses.length} YouTube playlists - handled by full backend loading`);
-        }
-    } catch (error) {
-        console.error('Failed to check for active processes:', error);
-    }
-}
-
-async function rehydrateArtistAlbumModal(virtualPlaylistId, playlistName, batchId) {
-    /**
-     * Rehydrates an artist album download modal from backend process data.
-     * Extracts artist/album info from virtual playlist ID and recreates the modal.
-     */
-    try {
-        console.log(`💧 Rehydrating artist album modal: ${virtualPlaylistId} (${playlistName})`);
-
-        // Extract artist_id and album_id from virtualPlaylistId format: artist_album_[artist_id]_[album_id]
-        const parts = virtualPlaylistId.split('_');
-        if (parts.length < 4 || parts[0] !== 'artist' || parts[1] !== 'album') {
-            console.error(`❌ Invalid virtual playlist ID format: ${virtualPlaylistId}`);
-            return;
-        }
-
-        const artistId = parts[2];
-        const albumId = parts.slice(3).join('_'); // Handle album IDs that might contain underscores
-
-        console.log(`🔍 Extracted from virtual playlist: artistId=${artistId}, albumId=${albumId}`);
-
-        // Fetch the album tracks to get proper artist and album data
-        try {
-            const response = await fetch(`/api/album/${albumId}/tracks`);
-            const data = await response.json();
-
-            if (!data.success || !data.album || !data.tracks) {
-                console.error('❌ Failed to fetch album data for rehydration:', data.error);
-                return;
-            }
-
-            const album = data.album;
-            const tracks = data.tracks;
-
-            // Extract artist info from the first track (all tracks should have same artist)
-            const artist = {
-                id: artistId,
-                name: tracks[0].artists[0] // Use first artist name from first track
-            };
-
-            console.log(`✅ Retrieved album data: "${album.name}" by ${artist.name} (${tracks.length} tracks)`);
-
-            // Create the modal using the same function as normal artist album downloads
-            await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, tracks, album, artist);
-
-            // Update the rehydrated process with batch info and hide modal for background rehydration
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                process.status = 'running';
-                process.batchId = batchId;
-                subscribeToDownloadBatch(batchId);
-
-                // Update button states to reflect running status
-                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${virtualPlaylistId}`);
-                if (beginBtn) beginBtn.style.display = 'none';
-                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-                if (wishlistBtn) wishlistBtn.style.display = 'none';
-
-                // Hide the modal - this is background rehydration, not user-requested
-                if (process.modalElement) {
-                    process.modalElement.style.display = 'none';
-                    console.log(`🔍 Hiding rehydrated modal for background processing: ${album.name}`);
-                }
-
-                console.log(`✅ Rehydrated artist album modal: ${artist.name} - ${album.name}`);
-            } else {
-                console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
-            }
-
-        } catch (error) {
-            console.error(`❌ Error fetching album data for rehydration:`, error);
-        }
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating artist album modal:`, error);
-    }
-}
-
-async function rehydrateDiscoverPlaylistModal(virtualPlaylistId, playlistName, batchId) {
-    /**
-     * Rehydrates a discover playlist download modal from backend process data.
-     * Fetches tracks from the appropriate discover API endpoint and recreates the modal.
-     */
-    try {
-        console.log(`💧 Rehydrating discover playlist modal: ${virtualPlaylistId} (${playlistName})`);
-
-        // Handle album downloads from Recent Releases
-        if (virtualPlaylistId.startsWith('discover_album_')) {
-            const albumId = virtualPlaylistId.replace('discover_album_', '');
-            console.log(`💧 Album download - fetching album ${albumId}...`);
-
-            try {
-                const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
-                if (!albumResponse.ok) {
-                    console.error(`❌ Failed to fetch album: ${albumResponse.status}`);
-                    return;
-                }
-
-                const albumData = await albumResponse.json();
-                if (!albumData.tracks || albumData.tracks.length === 0) {
-                    console.error(`❌ No tracks in album`);
-                    return;
-                }
-
-                // Convert tracks to expected format
-                const spotifyTracks = albumData.tracks.map(track => {
-                    let artists = track.artists || [];
-                    if (Array.isArray(artists)) {
-                        artists = artists.map(a => a.name || a);
-                    }
-
-                    return {
-                        id: track.id,
-                        name: track.name,
-                        artists: artists,
-                        album: {
-                            name: albumData.name || playlistName.split(' - ')[0],
-                            images: albumData.images || []
-                        },
-                        duration_ms: track.duration_ms || 0
-                    };
-                });
-
-                console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
-
-                // Create modal
-                await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-                // Update process
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = batchId;
-                    subscribeToDownloadBatch(batchId);
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Hide modal for background rehydration
-                    if (process.modalElement) {
-                        process.modalElement.style.display = 'none';
-                        console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
-                    }
-
-                    console.log(`✅ Rehydrated album modal: ${playlistName}`);
-                }
-                return;
-
-            } catch (error) {
-                console.error(`❌ Error fetching album:`, error);
-                return;
-            }
-        }
-
-        // Determine API endpoint based on playlist ID
-        let apiEndpoint;
-        if (virtualPlaylistId === 'discover_release_radar') {
-            apiEndpoint = '/api/discover/release-radar';
-        } else if (virtualPlaylistId === 'discover_discovery_weekly') {
-            apiEndpoint = '/api/discover/discovery-weekly';
-        } else if (virtualPlaylistId === 'discover_seasonal_playlist') {
-            apiEndpoint = '/api/discover/seasonal-playlist';
-        } else if (virtualPlaylistId === 'discover_popular_picks') {
-            apiEndpoint = '/api/discover/popular-picks';
-        } else if (virtualPlaylistId === 'discover_hidden_gems') {
-            apiEndpoint = '/api/discover/hidden-gems';
-        } else if (virtualPlaylistId === 'discover_discovery_shuffle') {
-            apiEndpoint = '/api/discover/discovery-shuffle';
-        } else if (virtualPlaylistId === 'discover_familiar_favorites') {
-            apiEndpoint = '/api/discover/familiar-favorites';
-        } else if (virtualPlaylistId === 'build_playlist_custom') {
-            apiEndpoint = '/api/discover/build-playlist';
-        } else if (virtualPlaylistId.startsWith('discover_lb_')) {
-            console.log(`💧 ListenBrainz playlist - skipping (no automatic rehydration for ListenBrainz)`);
-            return;
-        } else {
-            console.error(`❌ Unknown discover playlist type: ${virtualPlaylistId}`);
-            return;
-        }
-
-        // Fetch tracks from API
-        console.log(`📡 Fetching tracks from ${apiEndpoint}...`);
-        const response = await fetch(apiEndpoint);
-        if (!response.ok) {
-            console.error(`❌ Failed to fetch discover playlist data: ${response.status}`);
-            return;
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks) {
-            console.error(`❌ Invalid discover playlist data:`, data);
-            return;
-        }
-
-        const tracks = data.tracks;
-        console.log(`✅ Retrieved ${tracks.length} tracks for ${playlistName}`);
-
-        // Transform tracks to format expected by download modal (same as openDownloadModalForDiscoverPlaylist)
-        const spotifyTracks = tracks.map(track => {
-            let spotifyTrack;
-
-            // Use track_data_json if available, otherwise construct from track data
-            if (track.track_data_json) {
-                spotifyTrack = track.track_data_json;
-            } else {
-                // Fallback: construct track object from available data
-                spotifyTrack = {
-                    id: track.spotify_track_id,
-                    name: track.track_name,
-                    artists: [{ name: track.artist_name }],
-                    album: {
-                        name: track.album_name,
-                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-                    },
-                    duration_ms: track.duration_ms || 0
-                };
-            }
-
-            // Normalize artists to array of strings for modal compatibility
-            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-            }
-
-            return spotifyTrack;
-        });
-
-        // Create the modal using the same function as normal discover downloads
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // Update the rehydrated process with batch info and hide modal for background rehydration
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process) {
-            process.status = 'running';
-            process.batchId = batchId;
-            subscribeToDownloadBatch(batchId);
-
-            // Update button states to reflect running status
-            const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-            const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-            if (beginBtn) beginBtn.style.display = 'none';
-            if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-            // Hide the modal - this is background rehydration, not user-requested
-            if (process.modalElement) {
-                process.modalElement.style.display = 'none';
-                console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
-            }
-
-            console.log(`✅ Rehydrated discover playlist modal: ${playlistName}`);
-        } else {
-            console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
-        }
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating discover playlist modal:`, error);
-    }
-}
-
-async function rehydrateEnhancedSearchModal(virtualPlaylistId, playlistName, batchId) {
-    /**
-     * Rehydrates an enhanced search download modal from backend process data.
-     * Fetches item data from searchDownloadBubbles and recreates the modal.
-     */
-    try {
-        console.log(`💧 Rehydrating enhanced search modal: ${virtualPlaylistId} (${playlistName})`);
-
-        // Find the download in searchDownloadBubbles
-        let downloadData = null;
-        for (const artistName in searchDownloadBubbles) {
-            const bubble = searchDownloadBubbles[artistName];
-            const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
-            if (download) {
-                downloadData = download;
-                break;
-            }
-        }
-
-        if (!downloadData) {
-            console.warn(`⚠️ No download data found in searchDownloadBubbles for ${virtualPlaylistId}`);
-            return;
-        }
-
-        const { item, type } = downloadData;
-
-        if (type === 'album') {
-            // For albums, fetch tracks (pass name/artist for Hydrabase support)
-            console.log(`💧 Album download - fetching album ${item.id}...`);
-
-            try {
-                const _sap1 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
-                const response = await fetch(`/api/spotify/album/${item.id}?${_sap1}`);
-                if (!response.ok) {
-                    console.error(`❌ Failed to fetch album: ${response.status}`);
-                    return;
-                }
-
-                const albumData = await response.json();
-                if (!albumData.tracks || albumData.tracks.length === 0) {
-                    console.error(`❌ No tracks in album`);
-                    return;
-                }
-
-                const spotifyTracks = albumData.tracks.map(track => ({
-                    id: track.id,
-                    name: track.name,
-                    artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
-                    album: {
-                        name: item.name,
-                        images: item.image_url ? [{ url: item.image_url }] : []
-                    },
-                    duration_ms: track.duration_ms || 0
-                }));
-
-                console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
-
-                // Create modal
-                await openDownloadMissingModalForArtistAlbum(
-                    virtualPlaylistId,
-                    item.name,
-                    spotifyTracks,
-                    item,
-                    { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
-                    false // Don't show loading overlay
-                );
-
-                // Update process
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = batchId;
-                    subscribeToDownloadBatch(batchId);
-
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Hide modal for background rehydration
-                    if (process.modalElement) {
-                        process.modalElement.style.display = 'none';
-                        console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
-                    }
-
-                    // Start polling for live updates
-                    startModalDownloadPolling(virtualPlaylistId);
-
-                    console.log(`✅ Rehydrated enhanced search album modal: ${playlistName}`);
-                } else {
-                    console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
-                }
-
-            } catch (error) {
-                console.error(`❌ Error fetching album:`, error);
-            }
-
-        } else {
-            // For tracks, create enriched track and open modal
-            console.log(`💧 Track download - creating modal for ${item.name}...`);
-
-            const enrichedTrack = {
-                id: item.id,
-                name: item.name,
-                artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
-                album: item.album || {
-                    name: item.album?.name || 'Unknown Album',
-                    images: item.image_url ? [{ url: item.image_url }] : []
-                },
-                duration_ms: item.duration_ms || 0
-            };
-
-            // Create modal
-            await openDownloadMissingModalForYouTube(
-                virtualPlaylistId,
-                `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
-                [enrichedTrack]
-            );
-
-            // Update process
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                process.status = 'running';
-                process.batchId = batchId;
-                subscribeToDownloadBatch(batchId);
-
-                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                if (beginBtn) beginBtn.style.display = 'none';
-                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                // Hide modal for background rehydration
-                if (process.modalElement) {
-                    process.modalElement.style.display = 'none';
-                    console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
-                }
-
-                // Start polling for live updates
-                startModalDownloadPolling(virtualPlaylistId);
-
-                console.log(`✅ Rehydrated enhanced search track modal: ${playlistName}`);
-            } else {
-                console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
-            }
-        }
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating enhanced search modal:`, error);
-    }
-}
-
-async function rehydrateModal(processInfo, userRequested = false) {
-    const { playlist_id, playlist_name, batch_id, current_cycle } = processInfo;
-    console.log(`💧 Rehydrating modal for "${playlist_name}" (batch: ${batch_id}) - User requested: ${userRequested}`);
-
-    // Handle YouTube virtual playlists - skip rehydration here, handled by YouTube system
-    if (playlist_id.startsWith('youtube_')) {
-        console.log(`⏭️ Skipping YouTube virtual playlist rehydration - handled by YouTube system`);
-        return;
-    }
-
-    // Handle Beatport virtual playlists - skip rehydration here, handled by Beatport system
-    if (playlist_id.startsWith('beatport_')) {
-        console.log(`⏭️ Skipping Beatport virtual playlist rehydration - handled by Beatport system`);
-        return;
-    }
-
-    // Handle artist album virtual playlists
-    if (playlist_id.startsWith('artist_album_')) {
-        console.log(`💧 Rehydrating artist album virtual playlist: ${playlist_id}`);
-        await rehydrateArtistAlbumModal(playlist_id, playlist_name, batch_id);
-        return;
-    }
-
-    // Handle discover virtual playlists (Fresh Tape, The Archives)
-    if (playlist_id.startsWith('discover_')) {
-        console.log(`💧 Rehydrating discover playlist: ${playlist_id}`);
-        await rehydrateDiscoverPlaylistModal(playlist_id, playlist_name, batch_id);
-        return;
-    }
-
-    // Handle enhanced search virtual playlists (albums and tracks)
-    if (playlist_id.startsWith('enhanced_search_album_') || playlist_id.startsWith('enhanced_search_track_')) {
-        console.log(`💧 Rehydrating enhanced search virtual playlist: ${playlist_id}`);
-        await rehydrateEnhancedSearchModal(playlist_id, playlist_name, batch_id);
-        return;
-    }
-
-    // Handle wishlist processes specially
-    if (playlist_id === "wishlist") {
-        console.log(`💧 [Rehydrate] Handling wishlist modal for active process: ${batch_id}`);
-
-        // Check if modal already exists and is visible
-        const existingProcess = activeDownloadProcesses[playlist_id];
-        const modalAlreadyOpen = existingProcess && existingProcess.modalElement &&
-            existingProcess.modalElement.style.display === 'flex';
-
-        if (modalAlreadyOpen) {
-            console.log(`💧 [Rehydrate] Wishlist modal already open - updating existing modal with auto-process state`);
-
-            // Update existing process with new batch info
-            existingProcess.status = 'running';
-            existingProcess.batchId = batch_id;
-
-            // Update UI to reflect running state
-            const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
-            const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
-            if (beginBtn) beginBtn.style.display = 'none';
-            if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-            // Ensure polling is active for live updates
-            if (!existingProcess.intervalId) {
-                console.log(`💧 [Rehydrate] Starting polling for existing modal`);
-                startModalDownloadPolling(playlist_id);
-            }
-
-            console.log(`✅ [Rehydrate] Successfully updated existing wishlist modal for auto-process`);
-        } else {
-            // Only create modal if user requested it - don't create for background auto-processing
-            if (userRequested) {
-                console.log(`💧 [Rehydrate] User requested - creating wishlist modal for active process: ${batch_id}`);
-
-                // Create the modal with current server state (pass category filter for auto-processing)
-                await openDownloadMissingWishlistModal(current_cycle);
-                const process = activeDownloadProcesses[playlist_id];
-                if (!process) {
-                    console.error('❌ [Rehydrate] Failed to create wishlist process in activeDownloadProcesses');
-                    return;
-                }
-
-                // Sync process state with server
-                console.log(`✅ [Rehydrate] Syncing wishlist process state - batchId: ${batch_id}, status: running`);
-                process.status = 'running';
-                process.batchId = batch_id;
-
-                // Update UI to reflect running state
-                const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
-                if (beginBtn) beginBtn.style.display = 'none';
-                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                // Start polling for live updates
-                startModalDownloadPolling(playlist_id);
-
-                // Show modal
-                console.log('👤 [Rehydrate] User requested - showing wishlist modal');
-                process.modalElement.style.display = 'flex';
-                WishlistModalState.setVisible();
-                WishlistModalState.clearUserClosed();
-            } else {
-                console.log('🔄 [Rehydrate] Background auto-processing detected - NOT creating modal (user must click wishlist button to see progress)');
-                // Don't create modal for background auto-processing
-                // User must click the wishlist button to see the modal
-            }
-        }
-        return;
-    }
-
-    // Handle Deezer ARL playlist processes — ensure playlist data is in spotifyPlaylists for modal reuse
-    if (playlist_id.startsWith('deezer_arl_') && !spotifyPlaylists.find(p => p.id === playlist_id)) {
-        const rawId = playlist_id.replace('deezer_arl_', '');
-        const deezerPlaylist = deezerArlPlaylists.find(p => String(p.id) === rawId);
-        if (deezerPlaylist) {
-            spotifyPlaylists.push({
-                id: playlist_id,
-                name: deezerPlaylist.name,
-                track_count: deezerPlaylist.track_count || 0,
-                image_url: deezerPlaylist.image_url || '',
-                owner: deezerPlaylist.owner || '',
-            });
-        } else {
-            // Playlists not loaded yet — use process info as fallback
-            spotifyPlaylists.push({
-                id: playlist_id,
-                name: playlist_name || 'Deezer Playlist',
-                track_count: 0,
-            });
-        }
-    }
-
-    // Handle regular Spotify / Deezer ARL playlist processes
-    let playlistData = spotifyPlaylists.find(p => p.id === playlist_id);
-    if (!playlistData) {
-        console.warn(`Cannot rehydrate modal: Playlist data for ${playlist_id} not loaded.`);
-        return;
-    }
-    await openDownloadMissingModal(playlist_id);
-    const process = activeDownloadProcesses[playlist_id];
-    if (!process) return;
-
-    process.status = 'running';
-    process.batchId = batch_id;
-    updatePlaylistCardUI(playlist_id);
-    updateRefreshButtonState();
-
-    document.getElementById(`begin-analysis-btn-${playlist_id}`).style.display = 'none';
-    document.getElementById(`cancel-all-btn-${playlist_id}`).style.display = 'inline-block';
-
-    // Hide wishlist button if it exists
-    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlist_id}`);
-    if (wishlistBtn) wishlistBtn.style.display = 'none';
-
-    startModalDownloadPolling(playlist_id);
-
-    process.modalElement.style.display = 'none';
-}
-
-// ===================================================================
-// YOUTUBE PLAYLIST BACKEND HYDRATION FUNCTIONS
-// ===================================================================
-
-async function loadYouTubePlaylistsFromBackend() {
-    // Load all stored YouTube playlists from backend and recreate cards (similar to Spotify hydration)
-    try {
-        console.log('📋 Loading YouTube playlists from backend...');
-
-        const response = await fetch('/api/youtube/playlists');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch YouTube playlists');
-        }
-
-        const data = await response.json();
-        const playlists = data.playlists || [];
-
-        console.log(`🎬 Found ${playlists.length} stored YouTube playlists in backend`);
-
-        if (playlists.length === 0) {
-            console.log('📋 No YouTube playlists to hydrate');
-            return;
-        }
-
-        const container = document.getElementById('youtube-playlist-container');
-
-        // Create cards for playlists that don't already exist (avoid duplicates)
-        for (const playlistInfo of playlists) {
-            const urlHash = playlistInfo.url_hash;
-
-            // Check if card already exists (from rehydration or previous loading)
-            if (youtubePlaylistStates[urlHash] && youtubePlaylistStates[urlHash].cardElement &&
-                document.body.contains(youtubePlaylistStates[urlHash].cardElement)) {
-                console.log(`⏭️ Skipping existing YouTube playlist card: ${playlistInfo.playlist.name}`);
-
-                // Update existing state with backend data
-                const state = youtubePlaylistStates[urlHash];
-                state.phase = playlistInfo.phase;
-                state.discoveryProgress = playlistInfo.discovery_progress;
-                state.spotifyMatches = playlistInfo.spotify_matches;
-                state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
-                // Fetch discovery results for existing cards too if they don't have them
-                if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering' &&
-                    (!state.discoveryResults || state.discoveryResults.length === 0)) {
-                    try {
-                        console.log(`🔍 Fetching missing discovery results for existing card: ${playlistInfo.playlist.name}`);
-                        const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
-                        if (stateResponse.ok) {
-                            const fullState = await stateResponse.json();
-                            if (fullState.discovery_results) {
-                                state.discoveryResults = fullState.discovery_results;
-                                state.syncPlaylistId = fullState.sync_playlist_id;
-                                state.syncProgress = fullState.sync_progress || {};
-                                console.log(`✅ Restored ${state.discoveryResults.length} discovery results for existing card`);
-                            }
-                        }
-                    } catch (error) {
-                        console.warn(`⚠️ Error fetching discovery results for existing card:`, error.message);
-                    }
-                }
-
-                continue;
-            }
-
-            console.log(`🎬 Creating YouTube playlist card: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase})`);
-            createYouTubeCardFromBackendState(playlistInfo);
-
-            // Fetch discovery results for non-fresh playlists (same logic as rehydrateYouTubePlaylist)
-            if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering') {
-                try {
-                    console.log(`🔍 Fetching discovery results for: ${playlistInfo.playlist.name}`);
-                    const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
-                    if (stateResponse.ok) {
-                        const fullState = await stateResponse.json();
-                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
-                        // Store discovery results in local state
-                        const state = youtubePlaylistStates[urlHash];
-                        if (fullState.discovery_results && state) {
-                            state.discoveryResults = fullState.discovery_results;
-                            state.syncPlaylistId = fullState.sync_playlist_id;
-                            state.syncProgress = fullState.sync_progress || {};
-                            console.log(`✅ Restored ${state.discoveryResults.length} discovery results for: ${playlistInfo.playlist.name}`);
-                        }
-                    } else {
-                        console.warn(`⚠️ Could not fetch discovery results for: ${playlistInfo.playlist.name}`);
-                    }
-                } catch (error) {
-                    console.warn(`⚠️ Error fetching discovery results for ${playlistInfo.playlist.name}:`, error.message);
-                }
-            }
-        }
-
-        // Rehydrate download modals for YouTube playlists in downloading/download_complete phases
-        for (const playlistInfo of playlists) {
-            if ((playlistInfo.phase === 'downloading' || playlistInfo.phase === 'download_complete') &&
-                playlistInfo.converted_spotify_playlist_id && playlistInfo.download_process_id) {
-
-                const convertedPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
-                if (!activeDownloadProcesses[convertedPlaylistId]) {
-                    console.log(`💧 Rehydrating download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
-                    try {
-                        // Create the download modal using the YouTube-specific function
-                        const spotifyTracks = youtubePlaylistStates[playlistInfo.url_hash]?.discoveryResults
-                            ?.filter(result => result.spotify_data)
-                            ?.map(result => result.spotify_data) || [];
-
-                        if (spotifyTracks.length > 0) {
-                            await openDownloadMissingModalForYouTube(
-                                convertedPlaylistId,
-                                playlistInfo.playlist.name,
-                                spotifyTracks
-                            );
-
-                            // Set the modal to running state with the correct batch ID
-                            const process = activeDownloadProcesses[convertedPlaylistId];
-                            if (process) {
-                                process.status = 'running';
-                                process.batchId = playlistInfo.download_process_id;
-
-                                // Update UI to running state
-                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                                if (beginBtn) beginBtn.style.display = 'none';
-                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                                // Start polling for this process
-                                startModalDownloadPolling(convertedPlaylistId);
-
-                                // Hide modal since this is background rehydration
-                                process.modalElement.style.display = 'none';
-                                console.log(`✅ Rehydrated download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
-                            }
-                        } else {
-                            console.warn(`⚠️ No Spotify tracks found for YouTube download modal: ${playlistInfo.playlist.name}`);
-                        }
-                    } catch (error) {
-                        console.error(`❌ Error rehydrating download modal for ${playlistInfo.playlist.name}:`, error);
-                    }
-                }
-            }
-        }
-
-        console.log(`✅ Successfully hydrated ${playlists.length} YouTube playlists from backend`);
-
-    } catch (error) {
-        console.error('❌ Error loading YouTube playlists from backend:', error);
-        showToast(`Error loading YouTube playlists: ${error.message}`, 'error');
-    }
-}
-
-async function loadBeatportChartsFromBackend() {
-    // Load all stored Beatport charts from backend and recreate cards (similar to YouTube hydration)
-    try {
-        console.log('📋 Loading Beatport charts from backend...');
-
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/charts', signal ? { signal } : undefined);
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Beatport charts');
-        }
-
-        const charts = await response.json();
-
-        console.log(`🎧 Found ${charts.length} stored Beatport charts in backend`);
-
-        if (charts.length === 0) {
-            console.log('📋 No Beatport charts to hydrate');
-            return;
-        }
-
-        const container = document.getElementById('beatport-playlist-container');
-
-        // Create cards for charts that don't already exist (avoid duplicates)
-        for (const chartInfo of charts) {
-            const chartHash = chartInfo.hash;
-
-            // Check if card already exists (from previous loading)
-            if (beatportChartStates[chartHash] && beatportChartStates[chartHash].cardElement &&
-                document.body.contains(beatportChartStates[chartHash].cardElement)) {
-                console.log(`⏭️ Skipping existing Beatport chart card: ${chartInfo.name}`);
-
-                // Update existing state with backend data
-                const state = beatportChartStates[chartHash];
-                state.phase = chartInfo.phase;
-
-                continue;
-            }
-
-            console.log(`🎧 Creating Beatport chart card: ${chartInfo.name} (Phase: ${chartInfo.phase})`);
-            createBeatportCardFromBackendState(chartInfo);
-
-            // Fetch full state for non-fresh charts to restore discovery results
-            if (chartInfo.phase !== 'fresh') {
-                try {
-                    console.log(`🔍 Fetching full state for: ${chartInfo.name}`);
-                    const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
-                    if (stateResponse.ok) {
-                        const fullState = await stateResponse.json();
-                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
-                        // Store in YouTube state system (since Beatport reuses it)
-                        if (fullState.discovery_results && fullState.discovery_results.length > 0) {
-                            // Transform backend results to frontend format (like Tidal does)
-                            const transformedResults = fullState.discovery_results.map((result, index) => ({
-                                index: result.index !== undefined ? result.index : index,
-                                yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
-                                yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
-                                status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                                status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
-                                spotify_track: result.spotify_data ? result.spotify_data.name : '-',
-                                spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                                    result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
-                                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
-                            }));
-
-                            // Create Beatport state in YouTube system for modal functionality
-                            youtubePlaylistStates[chartHash] = {
-                                phase: fullState.phase,
-                                playlist: {
-                                    name: chartInfo.name,
-                                    tracks: chartInfo.chart_data.tracks,
-                                    description: `${chartInfo.track_count} tracks from ${chartInfo.name}`,
-                                    source: 'beatport'
-                                },
-                                is_beatport_playlist: true,
-                                beatport_chart_type: chartInfo.chart_data.chart_type,
-                                beatport_chart_hash: chartHash,
-                                discovery_progress: fullState.discovery_progress,
-                                discoveryProgress: fullState.discovery_progress,
-                                spotify_matches: fullState.spotify_matches,
-                                spotifyMatches: fullState.spotify_matches,
-                                discovery_results: fullState.discovery_results,
-                                discoveryResults: transformedResults,
-                                convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
-                                download_process_id: fullState.download_process_id,
-                                syncPlaylistId: fullState.sync_playlist_id,
-                                syncProgress: fullState.sync_progress || {}
-                            };
-
-                            console.log(`✅ Restored ${transformedResults.length} discovery results for: ${chartInfo.name}`);
-                        }
-                    } else {
-                        console.warn(`⚠️ Could not fetch full state for: ${chartInfo.name}`);
-                    }
-                } catch (error) {
-                    if (error && error.name === 'AbortError') throw error;
-                    console.warn(`⚠️ Error fetching full state for ${chartInfo.name}:`, error.message);
-                }
-            }
-        }
-
-        // Rehydrate download modals for Beatport charts in downloading/download_complete phases
-        for (const chartInfo of charts) {
-            if ((chartInfo.phase === 'downloading' || chartInfo.phase === 'download_complete') &&
-                chartInfo.converted_spotify_playlist_id && chartInfo.download_process_id) {
-
-                const convertedPlaylistId = chartInfo.converted_spotify_playlist_id;
-                console.log(`📥 Rehydrating download modal for Beatport chart: ${chartInfo.name} (Playlist: ${convertedPlaylistId})`);
-
-                // Set up active download process for Beatport chart (like YouTube/Tidal)
-                try {
-                    // Rehydrate the chart state first to get discovery results
-                    await rehydrateBeatportChart(chartInfo, false);
-
-                    // Create the download modal using the Beatport-specific function (like YouTube)
-                    if (!activeDownloadProcesses[convertedPlaylistId]) {
-                        // Get tracks from the rehydrated state
-                        const ytState = youtubePlaylistStates[chartInfo.hash];
-                        let spotifyTracks = [];
-
-                        if (ytState && ytState.discovery_results) {
-                            spotifyTracks = ytState.discovery_results
-                                .filter(result => result.spotify_data)
-                                .map(result => {
-                                    const track = result.spotify_data;
-                                    // Ensure artists is an array of strings
-                                    if (track.artists && Array.isArray(track.artists)) {
-                                        track.artists = track.artists.map(artist =>
-                                            typeof artist === 'string' ? artist : (artist.name || artist)
-                                        );
-                                    } else if (track.artists && typeof track.artists === 'string') {
-                                        track.artists = [track.artists];
-                                    } else {
-                                        track.artists = ['Unknown Artist'];
-                                    }
-                                    return {
-                                        id: track.id,
-                                        name: track.name,
-                                        artists: track.artists,
-                                        album: track.album || 'Unknown Album',
-                                        duration_ms: track.duration_ms || 0,
-                                        external_urls: track.external_urls || {}
-                                    };
-                                });
-                        }
-
-                        if (spotifyTracks.length > 0) {
-                            await openDownloadMissingModalForYouTube(
-                                convertedPlaylistId,
-                                chartInfo.name,
-                                spotifyTracks
-                            );
-
-                            // Set the modal to running state with the correct batch ID
-                            const process = activeDownloadProcesses[convertedPlaylistId];
-                            if (process) {
-                                process.status = chartInfo.phase === 'download_complete' ? 'complete' : 'running';
-                                process.batchId = chartInfo.download_process_id;
-
-                                // Update UI to running state
-                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                                if (beginBtn) beginBtn.style.display = 'none';
-                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                                // Start polling for this process
-                                startModalDownloadPolling(convertedPlaylistId);
-
-                                // Hide modal since this is background rehydration
-                                process.modalElement.style.display = 'none';
-                                console.log(`✅ Rehydrated download modal for Beatport chart: ${chartInfo.name}`);
-                            }
-                        } else {
-                            console.warn(`⚠️ No Spotify tracks found for Beatport download modal: ${chartInfo.name}`);
-                        }
-                    }
-                } catch (error) {
-                    if (error && error.name === 'AbortError') throw error;
-                    console.warn(`⚠️ Error setting up download process for Beatport chart "${chartInfo.name}":`, error.message);
-                }
-            }
-        }
-
-        throwIfBeatportLoadAborted();
-        console.log(`✅ Successfully loaded and rehydrated ${charts.length} Beatport charts`);
-
-        // Start polling for any charts that are still in discovering phase
-        for (const chartInfo of charts) {
-            if (chartInfo.phase === 'discovering') {
-                console.log(`🔄 [Backend Loading] Auto-starting polling for discovering chart: ${chartInfo.name}`);
-                throwIfBeatportLoadAborted();
-                startBeatportDiscoveryPolling(chartInfo.hash);
-            }
-        }
-
-        // Update clear button state after loading charts
-        updateBeatportClearButtonState();
-
-    } catch (error) {
-        if (error && error.name === 'AbortError') {
-            console.log('⏹ Beatport chart hydration aborted');
-            return;
-        }
-        console.error('❌ Error loading Beatport charts from backend:', error);
-        showToast(`Error loading Beatport charts: ${error.message}`, 'error');
-    }
-}
-
-async function loadListenBrainzPlaylistsFromBackend() {
-    // Load all stored ListenBrainz playlist states from backend for persistence (similar to Beatport hydration)
-    try {
-        console.log('📋 Loading ListenBrainz playlists from backend...');
-
-        const response = await fetch('/api/listenbrainz/playlists');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch ListenBrainz playlists');
-        }
-
-        const data = await response.json();
-        const playlists = data.playlists || [];
-
-        console.log(`🎵 Found ${playlists.length} stored ListenBrainz playlists in backend`);
-
-        if (playlists.length === 0) {
-            console.log('📋 No ListenBrainz playlists to hydrate');
-            listenbrainzPlaylistsLoaded = true;
-            return;
-        }
-
-        // Restore state for each playlist
-        for (const playlistInfo of playlists) {
-            const playlistMbid = playlistInfo.playlist_mbid;
-
-            console.log(`🎵 Hydrating ListenBrainz playlist: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase}, MBID: ${playlistMbid})`);
-
-            // Fetch full state for non-fresh playlists to restore discovery results
-            if (playlistInfo.phase !== 'fresh') {
-                try {
-                    console.log(`🔍 Fetching full state for: ${playlistInfo.playlist.name}`);
-                    const stateResponse = await fetch(`/api/listenbrainz/state/${playlistMbid}`);
-                    if (stateResponse.ok) {
-                        const fullState = await stateResponse.json();
-                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-
-                        // Transform backend results to frontend format (like Beatport does)
-                        const transformedResults = (fullState.discovery_results || []).map((result, index) => ({
-                            index: result.index !== undefined ? result.index : index,
-                            yt_track: result.lb_track || result.track_name || 'Unknown',
-                            yt_artist: result.lb_artist || result.artist_name || 'Unknown',
-                            status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                            status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
-                            spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                            spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                                (Array.isArray(result.spotify_data.artists) ? (typeof result.spotify_data.artists[0] === 'object' ? result.spotify_data.artists[0].name : result.spotify_data.artists[0]) : result.spotify_data.artists) : (result.spotify_artist || '-'),
-                            spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                            spotify_data: result.spotify_data,
-                            duration: result.duration || '0:00'
-                        }));
-
-                        // Create ListenBrainz state with both naming conventions
-                        listenbrainzPlaylistStates[playlistMbid] = {
-                            phase: fullState.phase,
-                            playlist: fullState.playlist,
-                            is_listenbrainz_playlist: true,
-                            playlist_mbid: playlistMbid,
-                            // Store with both naming conventions
-                            discovery_results: fullState.discovery_results || [],
-                            discoveryResults: transformedResults,
-                            discovery_progress: fullState.discovery_progress || 0,
-                            discoveryProgress: fullState.discovery_progress || 0,
-                            spotify_matches: fullState.spotify_matches || 0,
-                            spotifyMatches: fullState.spotify_matches || 0,
-                            spotify_total: fullState.spotify_total || 0,
-                            spotifyTotal: fullState.spotify_total || 0,
-                            convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
-                            download_process_id: fullState.download_process_id
-                        };
-
-                        console.log(`✅ Restored ${transformedResults.length} discovery results for: ${playlistInfo.playlist.name}`);
-                    } else {
-                        console.warn(`⚠️ Could not fetch full state for: ${playlistInfo.playlist.name}`);
-                    }
-                } catch (error) {
-                    console.warn(`⚠️ Error fetching full state for ${playlistInfo.playlist.name}:`, error.message);
-                }
-            }
-        }
-
-        // Start polling for any playlists that are still in discovering phase
-        for (const playlistInfo of playlists) {
-            if (playlistInfo.phase === 'discovering') {
-                console.log(`🔄 [Backend Loading] Auto-starting polling for discovering playlist: ${playlistInfo.playlist.name}`);
-                startListenBrainzDiscoveryPolling(playlistInfo.playlist_mbid);
-            }
-            // Show sync button for discovered playlists (hidden by default)
-            else if (playlistInfo.phase === 'discovered' || playlistInfo.phase === 'syncing' || playlistInfo.phase === 'sync_complete') {
-                const playlistId = `discover-lb-playlist-${playlistInfo.playlist_mbid}`;
-                const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
-                if (syncBtn) {
-                    syncBtn.style.display = 'inline-block';
-                    console.log(`✅ Showing sync button for discovered playlist: ${playlistInfo.playlist.name}`);
-                }
-            }
-        }
-
-        listenbrainzPlaylistsLoaded = true;
-        console.log(`✅ Successfully loaded and rehydrated ${playlists.length} ListenBrainz playlists`);
-
-    } catch (error) {
-        console.error('❌ Error loading ListenBrainz playlists from backend:', error);
-        listenbrainzPlaylistsLoaded = true;  // Mark as loaded even on error to prevent retries
-    }
-}
-
-function createBeatportCardFromBackendState(chartInfo) {
-    // Create Beatport chart card from backend state data
-    const chartHash = chartInfo.hash;
-    const chartData = chartInfo.chart_data;
-    const phase = chartInfo.phase;
-
-    const container = document.getElementById('beatport-playlist-container');
-
-    // Remove placeholder if it exists
-    const placeholder = container.querySelector('.playlist-placeholder');
-    if (placeholder) {
-        placeholder.remove();
-    }
-
-    // Create card HTML using same structure as createBeatportCard
-    const cardHtml = `
-        <div class="youtube-playlist-card" id="beatport-card-${chartHash}">
-            <div class="playlist-card-icon">🎧</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(chartInfo.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">${chartInfo.track_count} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${getPhaseColor(phase)};">${getPhaseText(phase)}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                ♪ ${chartInfo.spotify_total} / ✓ ${chartInfo.spotify_matches} / ✗ ${chartInfo.spotify_total - chartInfo.spotify_matches} (${Math.round((chartInfo.spotify_matches / chartInfo.spotify_total) * 100) || 0}%)
-            </div>
-            <button class="playlist-card-action-btn">${getActionButtonText(phase)}</button>
-        </div>
-    `;
-
-    container.insertAdjacentHTML('beforeend', cardHtml);
-
-    // Initialize state
-    beatportChartStates[chartHash] = {
-        phase: phase,
-        chart: chartData,
-        cardElement: document.getElementById(`beatport-card-${chartHash}`)
-    };
-
-    // Add click handler
-    const card = document.getElementById(`beatport-card-${chartHash}`);
-    if (card) {
-        card.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
-    }
-
-    console.log(`🃏 Created Beatport card from backend state: ${chartInfo.name} (${phase})`);
-}
-
-async function rehydrateBeatportChart(chartInfo, userRequested = false) {
-    // Rehydrate Beatport chart state and optionally open modal (similar to rehydrateYouTubePlaylist)
-    const chartHash = chartInfo.hash;
-    const chartName = chartInfo.name;
-
-    try {
-        console.log(`🔄 [Rehydration] Starting rehydration for Beatport chart: ${chartName}`);
-
-        // Get full state from backend including discovery results
-        let fullState;
-        try {
-            const signal = getBeatportContentSignal();
-            const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
-            if (stateResponse.ok) {
-                fullState = await stateResponse.json();
-                console.log(`📋 [Rehydration] Retrieved full backend state with ${fullState.discovery_results?.length || 0} discovery results`);
-            } else {
-                console.warn(`⚠️ [Rehydration] Could not fetch full state, using basic info`);
-            }
-        } catch (error) {
-            if (error && error.name === 'AbortError') return;
-            console.warn(`⚠️ [Rehydration] Error fetching full state:`, error.message);
-        }
-
-        const phase = chartInfo.phase;
-
-        // Create or update Beatport chart state
-        if (!beatportChartStates[chartHash]) {
-            beatportChartStates[chartHash] = {
-                phase: 'fresh',
-                chart: chartInfo.chart_data,
-                cardElement: null
-            };
-        }
-
-        const state = beatportChartStates[chartHash];
-        state.phase = phase;
-
-        // Transform discovery results if available (like Tidal does)
-        let transformedResults = [];
-        if (fullState && fullState.discovery_results) {
-            transformedResults = fullState.discovery_results.map((result, index) => ({
-                index: result.index !== undefined ? result.index : index,
-                yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
-                yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
-                status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
-                spotify_track: result.spotify_data ? result.spotify_data.name : '-',
-                spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                    result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
-                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
-            }));
-        }
-
-        // Store in YouTube state system (since Beatport reuses it)
-        youtubePlaylistStates[chartHash] = {
-            phase: phase,
-            playlist: {
-                name: chartName,
-                tracks: chartInfo.chart_data.tracks,
-                description: `${chartInfo.track_count} tracks from ${chartName}`,
-                source: 'beatport'
-            },
-            is_beatport_playlist: true,
-            beatport_chart_type: chartInfo.chart_data.chart_type,
-            beatport_chart_hash: chartHash,
-            discovery_progress: fullState?.discovery_progress || chartInfo.discovery_progress,
-            discoveryProgress: fullState?.discovery_progress || chartInfo.discovery_progress,
-            spotify_matches: fullState?.spotify_matches || chartInfo.spotify_matches,
-            spotifyMatches: fullState?.spotify_matches || chartInfo.spotify_matches,
-            discovery_results: fullState?.discovery_results || [],
-            discoveryResults: transformedResults,
-            convertedSpotifyPlaylistId: fullState?.converted_spotify_playlist_id || chartInfo.converted_spotify_playlist_id,
-            download_process_id: fullState?.download_process_id || chartInfo.download_process_id,
-            syncPlaylistId: fullState?.sync_playlist_id,
-            syncProgress: fullState?.sync_progress || {}
-        };
-
-        // Restore discovery results if we have them
-        if (fullState && fullState.discovery_results) {
-            console.log(`✅ Restored ${fullState.discovery_results.length} discovery results from backend`);
-
-            // Update modal if it already exists
-            const existingModal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
-            if (existingModal && !existingModal.classList.contains('hidden')) {
-                console.log(`🔄 Refreshing existing modal with restored discovery results`);
-                refreshYouTubeDiscoveryModalTable(chartHash);
-            }
-        }
-
-        // Update card display
-        updateBeatportCardPhase(chartHash, phase);
-        updateBeatportCardProgress(chartHash, {
-            spotify_total: chartInfo.spotify_total,
-            spotify_matches: chartInfo.spotify_matches,
-            failed: chartInfo.spotify_total - chartInfo.spotify_matches
-        });
-
-        // Handle active polling resumption
-        if (phase === 'discovering') {
-            console.log(`🔍 Resuming discovery polling for: ${chartName}`);
-            startBeatportDiscoveryPolling(chartHash);
-        } else if (phase === 'syncing') {
-            console.log(`🔄 Resuming sync polling for: ${chartName}`);
-            startBeatportSyncPolling(chartHash);
-        }
-
-        // Open modal if user requested
-        if (userRequested) {
-            switch (phase) {
-                case 'discovering':
-                case 'discovered':
-                case 'syncing':
-                case 'sync_complete':
-                    openYouTubeDiscoveryModal(chartHash);
-                    break;
-                case 'downloading':
-                case 'download_complete':
-                    // Open download modal if we have the converted playlist ID
-                    if (chartInfo.converted_spotify_playlist_id) {
-                        await openDownloadMissingModal(chartInfo.converted_spotify_playlist_id);
-                    }
-                    break;
-            }
-        }
-
-        console.log(`✅ Successfully rehydrated Beatport chart: ${chartName}`);
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating Beatport chart "${chartName}":`, error);
-    }
-}
-
-function createYouTubeCardFromBackendState(playlistInfo) {
-    // Create YouTube playlist card from backend state data
-    const urlHash = playlistInfo.url_hash;
-    const playlist = playlistInfo.playlist;
-    const phase = playlistInfo.phase;
-
-    const container = document.getElementById('youtube-playlist-container');
-
-    // Remove placeholder if it exists
-    const placeholder = container.querySelector('.youtube-playlist-placeholder');
-    if (placeholder) {
-        placeholder.remove();
-    }
-
-    // Create card HTML (using EXACT same structure as createYouTubeCard)
-    const cardHtml = `
-        <div class="youtube-playlist-card" id="youtube-card-${urlHash}" data-url="${playlistInfo.url}" onclick="handleYouTubeCardClick('${urlHash}')">
-            <div class="playlist-card-icon youtube-icon">▶</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">${playlist.tracks.length} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${getPhaseColor(phase)};">${getPhaseText(phase)}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                ♪ ${playlistInfo.spotify_total} / ✓ ${playlistInfo.spotify_matches} / ✗ ${playlistInfo.spotify_total - playlistInfo.spotify_matches} / ${Math.round(getProgressWidth(playlistInfo))}%
-            </div>
-            <button class="playlist-card-action-btn">${getActionButtonText(phase)}</button>
-        </div>
-    `;
-
-    container.insertAdjacentHTML('beforeend', cardHtml);
-
-    // Store state for UI management (but backend remains source of truth)
-    youtubePlaylistStates[urlHash] = {
-        phase: phase,
-        url: playlistInfo.url,
-        playlist: playlist,
-        cardElement: document.getElementById(`youtube-card-${urlHash}`),
-        discoveryResults: [],
-        discoveryProgress: playlistInfo.discovery_progress,
-        spotifyMatches: playlistInfo.spotify_matches,
-        convertedSpotifyPlaylistId: playlistInfo.converted_spotify_playlist_id,
-        backendSynced: true  // Flag to indicate this came from backend
-    };
-
-    console.log(`🃏 Created YouTube card from backend state: ${playlist.name} (${phase})`);
-}
-
-function getActionButtonText(phase) {
-    switch (phase) {
-        case 'fresh': return 'Discover';
-        case 'discovering': return 'View Progress';
-        case 'discovered': return 'View Results';
-        case 'syncing': return 'View Sync';
-        case 'sync_complete': return 'Download';
-        case 'downloading': return 'View Downloads';
-        case 'download_complete': return 'Complete';
-        default: return 'Open';
-    }
-}
-
-function getPhaseText(phase) {
-    switch (phase) {
-        case 'fresh': return 'Ready to discover';
-        case 'discovering': return 'Discovering...';
-        case 'discovered': return 'Discovery Complete';
-        case 'syncing': return 'Syncing...';
-        case 'sync_complete': return 'Sync Complete';
-        case 'downloading': return 'Downloading...';
-        case 'download_complete': return 'Download Complete';
-        default: return phase;
-    }
-}
-
-function getPhaseColor(phase) {
-    switch (phase) {
-        case 'fresh': return '#999';
-        case 'discovering': case 'syncing': case 'downloading': return '#ffa500';
-        case 'discovered': case 'sync_complete': case 'download_complete': return 'rgb(var(--accent-rgb))';
-        default: return '#999';
-    }
-}
-
-function getProgressWidth(playlistInfo) {
-    if (playlistInfo.phase === 'fresh') return 0;
-    if (playlistInfo.spotify_total === 0) return 0;
-    return Math.round((playlistInfo.spotify_matches / playlistInfo.spotify_total) * 100);
-}
-
-async function rehydrateYouTubePlaylist(playlistInfo, userRequested = false) {
-    // Rehydrate a YouTube playlist's discovery modal state (similar to rehydrateModal)
-    const urlHash = playlistInfo.url_hash;
-    const playlistName = playlistInfo.playlist_name;
-    const phase = playlistInfo.phase;
-
-    console.log(`💧 Rehydrating YouTube playlist "${playlistName}" (Phase: ${phase}) - User requested: ${userRequested}`);
-
-    try {
-        // First, ensure the card exists (create from backend if needed)
-        if (!youtubePlaylistStates[urlHash] || !youtubePlaylistStates[urlHash].cardElement) {
-            console.log(`🃏 Creating missing YouTube card for rehydration: ${playlistName}`);
-
-            // Since playlistInfo from active processes doesn't have full playlist data,
-            // we need to fetch it from the backend first
-            try {
-                const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
-                if (stateResponse.ok) {
-                    const fullPlaylistState = await stateResponse.json();
-                    createYouTubeCardFromBackendState(fullPlaylistState);
-                } else {
-                    console.error(`❌ Could not fetch full playlist state for card creation: ${playlistName}`);
-                    return; // Can't create card without playlist data
-                }
-            } catch (error) {
-                console.error(`❌ Error fetching playlist state for card creation: ${error.message}`);
-                return;
-            }
-        }
-
-        // Fetch full state from backend to get discovery results
-        let fullState = null;
-        if (phase !== 'fresh' && phase !== 'discovering') {
-            try {
-                console.log(`🔍 Fetching full backend state for: ${playlistName}`);
-                const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
-                if (stateResponse.ok) {
-                    fullState = await stateResponse.json();
-                    console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
-                }
-            } catch (error) {
-                console.warn(`⚠️ Could not fetch full state for ${playlistName}:`, error.message);
-            }
-        }
-
-        // Update local state to match backend
-        const state = youtubePlaylistStates[urlHash];
-        state.phase = phase;
-        state.discoveryProgress = playlistInfo.discovery_progress;
-        state.spotifyMatches = playlistInfo.spotify_matches;
-        state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
-
-        // Restore discovery results if we have them
-        if (fullState && fullState.discovery_results) {
-            state.discoveryResults = fullState.discovery_results;
-            state.syncPlaylistId = fullState.sync_playlist_id;
-            state.syncProgress = fullState.sync_progress || {};
-            console.log(`✅ Restored ${state.discoveryResults.length} discovery results from backend`);
-
-            // Update modal if it already exists
-            const existingModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-            if (existingModal && !existingModal.classList.contains('hidden')) {
-                console.log(`🔄 Refreshing existing modal with restored discovery results`);
-                refreshYouTubeDiscoveryModalTable(urlHash);
-            }
-        }
-
-        // Update card display
-        updateYouTubeCardPhase(urlHash, phase);
-        updateYouTubeCardProgress(urlHash, playlistInfo);
-
-        // Handle active polling resumption
-        if (phase === 'discovering') {
-            console.log(`🔍 Resuming discovery polling for: ${playlistName}`);
-            startYouTubeDiscoveryPolling(urlHash);
-        } else if (phase === 'syncing') {
-            console.log(`🔄 Resuming sync polling for: ${playlistName}`);
-            startYouTubeSyncPolling(urlHash);
-        }
-
-        // Open modal if user requested
-        if (userRequested) {
-            switch (phase) {
-                case 'discovering':
-                case 'discovered':
-                case 'syncing':
-                case 'sync_complete':
-                    openYouTubeDiscoveryModal(urlHash);
-                    break;
-                case 'downloading':
-                case 'download_complete':
-                    // Open download modal if we have the converted playlist ID
-                    if (playlistInfo.converted_spotify_playlist_id) {
-                        await openDownloadMissingModal(playlistInfo.converted_spotify_playlist_id);
-                    }
-                    break;
-            }
-        }
-
-        console.log(`✅ Successfully rehydrated YouTube playlist: ${playlistName}`);
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating YouTube playlist "${playlistName}":`, error);
-    }
-}
-
-async function removeYouTubePlaylistFromBackend(event, urlHash) {
-    // Remove YouTube playlist from backend storage and update UI
-    event.stopPropagation(); // Prevent card click
-
-    const state = youtubePlaylistStates[urlHash];
-    if (!state) return;
-
-    const playlistName = state.playlist.name;
-
-    try {
-        console.log(`🗑️ Removing YouTube playlist from backend: ${playlistName}`);
-
-        const response = await fetch(`/api/youtube/delete/${urlHash}`, {
-            method: 'DELETE'
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to delete playlist');
-        }
-
-        // Remove card from UI
-        if (state.cardElement) {
-            state.cardElement.remove();
-        }
-
-        // Remove from client state
-        delete youtubePlaylistStates[urlHash];
-
-        // Stop any active polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Close discovery modal if open
-        const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (modal) {
-            modal.remove();
-        }
-
-        // Show placeholder if no cards left
-        const container = document.getElementById('youtube-playlist-container');
-        const cards = container.querySelectorAll('.youtube-playlist-card');
-        if (cards.length === 0) {
-            container.innerHTML = '<div class="youtube-playlist-placeholder">No YouTube playlists added yet. Parse a YouTube playlist URL above to get started!</div>';
-        }
-
-        showToast(`Removed "${playlistName}" from backend storage`, 'success');
-        console.log(`✅ Successfully removed YouTube playlist: ${playlistName}`);
-
-    } catch (error) {
-        console.error(`❌ Error removing YouTube playlist "${playlistName}":`, error);
-        showToast(`Error removing playlist: ${error.message}`, 'error');
-    }
-}
-
-async function loadSpotifyPlaylists() {
-    const container = document.getElementById('spotify-playlist-container');
-    const refreshBtn = document.getElementById('spotify-refresh-btn');
-
-    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading playlists...</div>`;
-    refreshBtn.disabled = true;
-    refreshBtn.textContent = '🔄 Loading...';
-
-    try {
-        const response = await fetch('/api/spotify/playlists');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch playlists');
-        }
-        spotifyPlaylists = await response.json();
-        renderSpotifyPlaylists();
-        spotifyPlaylistsLoaded = true;
-
-        await checkForActiveProcesses();
-
-    } catch (error) {
-        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
-        showToast(`Error loading playlists: ${error.message}`, 'error');
-    } finally {
-        refreshBtn.disabled = false;
-        refreshBtn.textContent = '🔄 Refresh';
-    }
-}
-
-function renderSpotifyPlaylists() {
-    const container = document.getElementById('spotify-playlist-container');
-    if (spotifyPlaylists.length === 0) {
-        container.innerHTML = `<div class="playlist-placeholder">No Spotify playlists found.</div>`;
-        return;
-    }
-
-    container.innerHTML = spotifyPlaylists.map(p => {
-        let statusClass = 'status-never-synced';
-        if (p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
-        if (p.sync_status === 'Needs Sync') statusClass = 'status-needs-sync';
-
-        // This HTML structure creates the interactive playlist cards
-        return `
-        <div class="playlist-card" data-playlist-id="${p.id}" onclick="togglePlaylistSelection(event)">
-            <div class="playlist-card-main">
-                <div class="playlist-card-content">
-                    <div class="playlist-card-name">${escapeHtml(p.name)}</div>
-                    <div class="playlist-card-info">
-                        <span>${p.track_count} tracks</span> • 
-                        <span class="playlist-card-status ${statusClass}">${p.sync_status}</span>
-                    </div>
-                    <div class="sync-progress-indicator" id="progress-${p.id}"></div>
-                </div>
-                <div class="playlist-card-actions">
-                    <button id="action-btn-${p.id}" onclick="openPlaylistDetailsModal(event, '${p.id}')">Sync / Download</button>
-                    <button id="progress-btn-${p.id}" class="view-progress-btn hidden" onclick="handleViewProgressClick(event, '${p.id}')">
-                        View Progress
-                    </button>
-                </div>
-            </div>
-        </div>
-        `;
-    }).join('');
-}
-
-function handleViewProgressClick(event, playlistId) {
-    event.stopPropagation(); // Prevent the card selection from toggling
-    const process = activeDownloadProcesses[playlistId];
-
-    if (process && process.modalElement) {
-        // If a process is active, just show its modal
-        console.log(`Re-opening active download modal for playlist ${playlistId}`);
-        process.modalElement.style.display = 'flex';
-    }
-}
-
-function updatePlaylistCardUI(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    const progressBtn = document.getElementById(`progress-btn-${playlistId}`);
-    const actionBtn = document.getElementById(`action-btn-${playlistId}`);
-    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
-
-    if (!progressBtn || !actionBtn) return;
-
-    if (process && process.status === 'running') {
-        // A process is running: show the progress button
-        progressBtn.classList.remove('hidden');
-        progressBtn.textContent = 'View Progress';
-        progressBtn.style.backgroundColor = '';  // Reset any custom styling
-        actionBtn.textContent = '📥 Downloading...';
-        actionBtn.disabled = true;
-
-        // Remove completion styling from card
-        if (card) card.classList.remove('download-complete');
-
-    } else if (process && process.status === 'complete') {
-        // Process completed: show "ready for review" indicator
-        progressBtn.classList.remove('hidden');
-        progressBtn.textContent = '📋 View Results';
-        progressBtn.style.backgroundColor = '#28a745'; // Green success color
-        progressBtn.style.color = 'white';
-        actionBtn.textContent = '✅ Ready for Review';
-        actionBtn.disabled = false; // Allow clicking to see results
-
-        // Add completion styling to card
-        if (card) card.classList.add('download-complete');
-
-    } else {
-        // No process or it's been cleaned up: normal state
-        progressBtn.classList.add('hidden');
-        progressBtn.style.backgroundColor = '';  // Reset styling
-        progressBtn.style.color = '';  // Reset styling
-        actionBtn.textContent = 'Sync / Download';
-        actionBtn.disabled = false;
-
-        // Remove completion styling from card
-        if (card) card.classList.remove('download-complete');
-    }
-}
-
-async function cleanupDownloadProcess(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    console.log(`🧹 Cleaning up download process for playlist ${playlistId}`);
-
-    // Stop any active polling first
-    if (process.poller) {
-        console.log(`🛑 Stopping individual polling for ${playlistId}`);
-        clearInterval(process.poller);
-        process.poller = null;
-    }
-
-    // Mark process as no longer running
-    if (process.status === 'running') {
-        process.status = 'complete';
-    }
-
-    // If the process has a batchId, tell the server to clean it up.
-    if (process.batchId) {
-        try {
-            console.log(`🚀 Sending cleanup request to server for batch: ${process.batchId}`);
-            const response = await fetch('/api/playlists/cleanup_batch', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ batch_id: process.batchId })
-            });
-
-            // Handle deferred cleanup (202 = wishlist processing in progress)
-            if (response.status === 202) {
-                console.log(`⏳ Wishlist processing in progress for batch ${process.batchId}, will retry cleanup in 2s...`);
-                // Retry cleanup after delay to allow wishlist processing to complete
-                setTimeout(async () => {
-                    try {
-                        await fetch('/api/playlists/cleanup_batch', {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ batch_id: process.batchId })
-                        });
-                        console.log(`✅ Delayed cleanup completed for batch: ${process.batchId}`);
-                    } catch (error) {
-                        console.warn(`⚠️ Delayed cleanup failed:`, error);
-                    }
-                }, 2000); // 2 second delay
-            } else {
-                console.log(`✅ Server cleanup completed for batch: ${process.batchId}`);
-            }
-        } catch (error) {
-            console.warn(`⚠️ Failed to send cleanup request to server:`, error);
-            // Don't show toast for cleanup failures - they're not user-facing
-        }
-    }
-
-    // Remove modal from DOM
-    if (process.modalElement && process.modalElement.parentElement) {
-        process.modalElement.parentElement.removeChild(process.modalElement);
-    }
-
-    // Remove from client-side global state
-    delete activeDownloadProcesses[playlistId];
-
-    // Check if global polling should be stopped
-    checkAndCleanupGlobalPolling();
-
-    // Restore card UI (only for non-wishlist playlists)
-    if (playlistId !== 'wishlist') {
-        updatePlaylistCardUI(playlistId);
-    }
-    updateRefreshButtonState(); // Now safe since hasActiveOperations() excludes wishlist
-}
-
-function togglePlaylistSelection(event) {
-    const card = event.currentTarget;
-    const playlistId = card.dataset.playlistId;
-
-    // Don't toggle if clicking the button
-    if (event.target.tagName === 'BUTTON') return;
-
-    const isSelected = !card.classList.contains('selected');
-    card.classList.toggle('selected', isSelected);
-
-    if (isSelected) {
-        selectedPlaylists.add(playlistId);
-    } else {
-        selectedPlaylists.delete(playlistId);
-    }
-    updateSyncActionsUI();
-}
-
-function updateSyncActionsUI() {
-    // If sequential sync is running, let the manager handle UI updates
-    if (sequentialSyncManager && sequentialSyncManager.isRunning) {
-        sequentialSyncManager.updateUI();
-        return;
-    }
-
-    const selectionInfo = document.getElementById('selection-info');
-    const startSyncBtn = document.getElementById('start-sync-btn');
-    const count = selectedPlaylists.size;
-
-    if (count === 0) {
-        if (selectionInfo) selectionInfo.textContent = 'Select playlists to sync';
-        if (startSyncBtn) startSyncBtn.disabled = true;
-    } else {
-        if (selectionInfo) selectionInfo.textContent = `${count} playlist${count > 1 ? 's' : ''} selected`;
-        if (startSyncBtn) startSyncBtn.disabled = false;
-    }
-}
-
-async function openPlaylistDetailsModal(event, playlistId) {
-    event.stopPropagation();
-
-    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
-    if (!playlist) return;
-
-    showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
-
-    try {
-        // --- CACHING LOGIC START ---
-        if (playlistTrackCache[playlistId]) {
-            console.log(`Cache HIT for playlist ${playlistId}. Using cached tracks.`);
-            // Use the cached tracks instead of fetching
-            const fullPlaylist = { ...playlist, tracks: playlistTrackCache[playlistId] };
-            showPlaylistDetailsModal(fullPlaylist);
-        } else {
-            console.log(`Cache MISS for playlist ${playlistId}. Fetching from server...`);
-            // Fetch from the server if not in cache
-            const response = await fetch(`/api/spotify/playlist/${playlistId}`);
-            const fullPlaylist = await response.json();
-            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-
-            // Store the fetched tracks in the cache
-            playlistTrackCache[playlistId] = fullPlaylist.tracks;
-            console.log(`Cached ${fullPlaylist.tracks.length} tracks for playlist ${playlistId}.`);
-
-            // Auto-mirror this Spotify playlist
-            mirrorPlaylist('spotify', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
-                track_name: t.name, artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
-                album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
-                duration_ms: t.duration_ms || 0,
-                image_url: t.album && typeof t.album === 'object' && t.album.images && t.album.images[0] ? t.album.images[0].url : null,
-                source_track_id: t.id || t.spotify_track_id || ''
-            })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
-
-            showPlaylistDetailsModal(fullPlaylist);
-        }
-        // --- CACHING LOGIC END ---
-
-    } catch (error) {
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function showPlaylistDetailsModal(playlist) {
-    // Create modal if it doesn't exist
-    let modal = document.getElementById('playlist-details-modal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'playlist-details-modal';
-        modal.className = 'modal-overlay';
-        document.body.appendChild(modal);
-    }
-
-    // Check if there's a completed download missing tracks process for this playlist
-    const activeProcess = activeDownloadProcesses[playlist.id];
-    const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
-
-    // Check if sync is currently running for this playlist
-    const isSyncing = !!activeSyncPollers[playlist.id];
-
-    modal.innerHTML = `
-        <div class="modal-container playlist-modal">
-            <div class="playlist-modal-header">
-                <div class="playlist-header-content">
-                    <h2>${escapeHtml(playlist.name)}</h2>
-                    <div class="playlist-quick-info">
-                        <span class="playlist-track-count">${playlist.track_count} tracks</span>
-                        <span class="playlist-owner">by ${escapeHtml(playlist.owner)}</span>
-                    </div>
-                    <!-- Sync status display (hidden by default, matches GUI) -->
-                    <div class="playlist-modal-sync-status" id="modal-sync-status-${playlist.id}" style="display: none;">
-                        <span class="sync-stat total-tracks">♪ <span id="modal-total-${playlist.id}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="modal-matched-${playlist.id}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="modal-failed-${playlist.id}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="modal-percentage-${playlist.id}">0</span>%)</span>
-                    </div>
-                </div>
-                <span class="playlist-modal-close" onclick="closePlaylistDetailsModal()">&times;</span>
-            </div>
-            
-            <div class="playlist-modal-body">
-                ${playlist.description ? `<div class="playlist-description">${escapeHtml(playlist.description)}</div>` : ''}
-                
-                <div class="playlist-tracks-container">
-                    <div class="playlist-tracks-list">
-                        ${playlist.tracks.map((track, index) => `
-                            <div class="playlist-track-item">
-                                <span class="playlist-track-number">${index + 1}</span>
-                                <div class="playlist-track-info">
-                                    <div class="playlist-track-name">${escapeHtml(track.name)}</div>
-                                    <div class="playlist-track-artists">${formatArtists(track.artists)}</div>
-                                </div>
-                                <div class="playlist-track-duration">${formatDuration(track.duration_ms)}</div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            </div>
-            
-            <div class="playlist-modal-footer">
-                <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closePlaylistDetailsModal()">Close</button>
-                <button class="playlist-modal-btn playlist-modal-btn-tertiary" onclick="openDownloadMissingModal('${playlist.id}')">
-                    ${hasCompletedProcess
-            ? '📊 View Download Results'
-            : '📥 Download Missing Tracks'}
-                </button>
-                <button id="sync-btn-${playlist.id}" class="playlist-modal-btn playlist-modal-btn-primary" onclick="startPlaylistSync('${playlist.id}')" ${isSyncing ? 'disabled' : ''} ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>${isSyncing ? '⏳ Syncing...' : 'Sync Playlist'}</button>
-            </div>
-        </div>
-    `;
-
-    modal.style.display = 'flex';
-}
-
-function closePlaylistDetailsModal() {
-    const modal = document.getElementById('playlist-details-modal');
-    if (modal) {
-        modal.style.display = 'none';
-    }
-}
-
-function formatDuration(ms) {
-    const minutes = Math.floor(ms / 60000);
-    const seconds = Math.floor((ms % 60000) / 1000);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-// ===============================
-// DOWNLOAD MISSING TRACKS MODAL
-// ===============================
-
-let activeAnalysisTaskId = null;
-let currentPlaylistTracks = [];
-let analysisResults = [];
-let missingTracks = [];
-
-// New variables for enhanced modal functionality
-let currentDownloadBatchId = null;
-
-// ===============================
-// HERO SECTION HELPER FUNCTIONS
-// ===============================
-
-/**
- * Generate hero section HTML for download missing tracks modal
- * Context-aware display based on available data
- */
-function generateDownloadModalHeroSection(context) {
-    const { type, playlist, artist, album, trackCount } = context;
-
-    let heroContent = '';
-    let heroBackgroundImage = '';
-
-    switch (type) {
-        case 'album':
-        case 'artist_album':
-            // Artist/album context - show artist + album images
-            const artistImage = artist?.image_url || artist?.images?.[0]?.url;
-            const albumImage = album?.image_url || album?.images?.[0]?.url;
-
-            // Use album image as background if available
-            if (albumImage) {
-                heroBackgroundImage = `<div class="download-missing-modal-hero-bg" style="background-image: url('${albumImage}');"></div>`;
-            }
-
-            heroContent = `
-                <div class="download-missing-modal-hero-content">
-                    <div class="download-missing-modal-hero-images">
-                        ${artistImage ? `<img class="download-missing-modal-hero-image artist" src="${artistImage}" alt="${escapeHtml(artist.name)}">` : ''}
-                        ${albumImage ? `<img class="download-missing-modal-hero-image album" src="${albumImage}" alt="${escapeHtml(album.name)}">` : ''}
-                    </div>
-                    <div class="download-missing-modal-hero-metadata">
-                        <h1 class="download-missing-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
-                        <div class="download-missing-modal-hero-subtitle">by <a href="#" class="hero-artist-link" onclick="event.preventDefault();_navigateToArtistFromModal('${escapeHtml(artist.id || '')}','${escapeForInlineJs(artist.name || '')}','${escapeHtml(artist.image_url || '')}','${escapeHtml(artist.source || '')}','${escapeHtml(context.playlistId || '')}')">${escapeHtml(artist.name || 'Unknown Artist')}</a></div>
-                        <div class="download-missing-modal-hero-details">
-                            <span class="download-missing-modal-hero-detail">${album.album_type || 'Album'}</span>
-                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
-                        </div>
-                    </div>
-                </div>
-            `;
-            break;
-
-        case 'playlist':
-            // Playlist context - show playlist info
-            heroContent = `
-                <div class="download-missing-modal-hero-content">
-                    <div class="download-missing-modal-hero-icon">🎵</div>
-                    <div class="download-missing-modal-hero-metadata">
-                        <h1 class="download-missing-modal-hero-title">${escapeHtml(playlist.name)}</h1>
-                        <div class="download-missing-modal-hero-subtitle">by ${escapeHtml(playlist.owner || 'Spotify')}</div>
-                        <div class="download-missing-modal-hero-details">
-                            <span class="download-missing-modal-hero-detail">Playlist</span>
-                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
-                        </div>
-                    </div>
-                </div>
-            `;
-            break;
-
-        case 'wishlist':
-            // Wishlist context - show wishlist icon
-            heroContent = `
-                <div class="download-missing-modal-hero-content">
-                    <div class="download-missing-modal-hero-icon">👁️</div>
-                    <div class="download-missing-modal-hero-metadata">
-                        <h1 class="download-missing-modal-hero-title">Wishlist</h1>
-                        <div class="download-missing-modal-hero-subtitle">From watched artists</div>
-                        <div class="download-missing-modal-hero-details">
-                            <span class="download-missing-modal-hero-detail">Wishlist</span>
-                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
-                        </div>
-                    </div>
-                </div>
-            `;
-            break;
-
-        default:
-            // Fallback - basic display
-            heroContent = `
-                <div class="download-missing-modal-hero-content">
-                    <div class="download-missing-modal-hero-icon">📥</div>
-                    <div class="download-missing-modal-hero-metadata">
-                        <h1 class="download-missing-modal-hero-title">Download Missing Tracks</h1>
-                        <div class="download-missing-modal-hero-subtitle">${trackCount} tracks</div>
-                    </div>
-                </div>
-            `;
-            break;
-    }
-
-    return `
-        <div class="download-missing-modal-hero">
-            ${heroBackgroundImage}
-            ${heroContent}
-            <div class="download-dashboard-stats">
-                <div class="dashboard-stat stat-total">
-                    <div class="dashboard-stat-number" id="stat-total-${context.playlistId}">${context.trackCount}</div>
-                    <div class="dashboard-stat-label">Total</div>
-                </div>
-                <div class="dashboard-stat stat-found">
-                    <div class="dashboard-stat-number" id="stat-found-${context.playlistId}">-</div>
-                    <div class="dashboard-stat-label">Found</div>
-                </div>
-                <div class="dashboard-stat stat-missing">
-                    <div class="dashboard-stat-number" id="stat-missing-${context.playlistId}">-</div>
-                    <div class="dashboard-stat-label">Missing</div>
-                </div>
-                <div class="dashboard-stat stat-downloaded">
-                    <div class="dashboard-stat-number" id="stat-downloaded-${context.playlistId}">0</div>
-                    <div class="dashboard-stat-label">Downloaded</div>
-                </div>
-            </div>
-        </div>
-        <div class="download-missing-modal-header-actions">
-            <span class="download-missing-modal-close" onclick="closeDownloadMissingModal('${context.playlistId || 'unknown'}')">&times;</span>
-        </div>
-    `;
-}
-let modalDownloadPoller = null;
-let currentModalPlaylistId = null;
-
-// PHASE 2: Local cancelled track management (GUI PARITY)
-let cancelledTracks = new Set(); // Track cancelled track indices like GUI's cancelled_tracks
-
-const TRACK_RENDER_BATCH_SIZE = 100;
-
-function applyProgressiveTrackRendering(playlistId, totalTrackCount) {
-    if (totalTrackCount <= TRACK_RENDER_BATCH_SIZE) return;
-
-    const modal = document.getElementById(`download-missing-modal-${playlistId}`);
-    if (!modal) return;
-
-    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
-    if (!tbody) return;
-
-    const rows = tbody.querySelectorAll('tr[data-track-index]');
-    if (rows.length <= TRACK_RENDER_BATCH_SIZE) return;
-
-    // Hide rows beyond first batch
-    for (let i = TRACK_RENDER_BATCH_SIZE; i < rows.length; i++) {
-        rows[i].classList.add('hidden');
-    }
-
-    let revealedCount = TRACK_RENDER_BATCH_SIZE;
-
-    // Append indicator into .download-tracks-title
-    const titleEl = modal.querySelector('.download-tracks-title');
-    if (titleEl) {
-        const indicator = document.createElement('span');
-        indicator.className = 'track-render-indicator';
-        indicator.id = `track-render-indicator-${playlistId}`;
-        indicator.textContent = `Showing ${revealedCount} of ${totalTrackCount} tracks`;
-        titleEl.appendChild(indicator);
-    }
-
-    // Scroll listener on table container
-    const container = modal.querySelector('.download-tracks-table-container');
-    if (!container) return;
-
-    container.addEventListener('scroll', function onScroll() {
-        const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
-        if (scrollBottom > 200) return;
-        if (revealedCount >= rows.length) return;
-
-        const nextEnd = Math.min(revealedCount + TRACK_RENDER_BATCH_SIZE, rows.length);
-        for (let i = revealedCount; i < nextEnd; i++) {
-            rows[i].classList.remove('hidden');
-        }
-        revealedCount = nextEnd;
-
-        const indicator = document.getElementById(`track-render-indicator-${playlistId}`);
-        if (indicator) {
-            indicator.textContent = revealedCount >= rows.length
-                ? `Showing all ${totalTrackCount} tracks`
-                : `Showing ${revealedCount} of ${totalTrackCount} tracks`;
-        }
-
-        if (revealedCount >= rows.length) {
-            container.removeEventListener('scroll', onScroll);
-        }
-    });
-}
-
-async function openDownloadMissingModal(playlistId) {
-    showLoadingOverlay('Loading playlist...');
-
-    // **NEW**: Check if a process is already active for this playlist
-    if (activeDownloadProcesses[playlistId]) {
-        console.log(`Modal for ${playlistId} already exists. Showing it.`);
-        closePlaylistDetailsModal(); // Close playlist details modal even when reusing existing modal
-        const process = activeDownloadProcesses[playlistId];
-        if (process.modalElement) {
-            // Show helpful message if it's a completed process
-            if (process.status === 'complete') {
-                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-            }
-            process.modalElement.style.display = 'flex';
-        }
-        hideLoadingOverlay();
-        return; // Don't create a new one
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for playlist: ${playlistId}`);
-
-    closePlaylistDetailsModal();
-    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
-    if (!playlist) {
-        showToast('Could not find playlist data.', 'error');
-        hideLoadingOverlay();
-        return;
-    }
-
-    let tracks = playlistTrackCache[playlistId];
-    if (!tracks) {
-        try {
-            const fetchUrl = playlistId.startsWith('deezer_arl_')
-                ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
-                : `/api/spotify/playlist/${playlistId}`;
-            const response = await fetch(fetchUrl);
-            const fullPlaylist = await response.json();
-            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-            tracks = fullPlaylist.tracks;
-            playlistTrackCache[playlistId] = tracks;
-        } catch (error) {
-            showToast(`Failed to fetch tracks: ${error.message}`, 'error');
-            hideLoadingOverlay();
-            return;
-        }
-    }
-
-    currentPlaylistTracks = tracks;
-    currentModalPlaylistId = playlistId;
-
-    let modal = document.createElement('div');
-    modal.id = `download-missing-modal-${playlistId}`; // **NEW**: Unique ID
-    modal.className = 'download-missing-modal'; // **NEW**: Use class for styling
-    modal.style.display = 'none'; // Start hidden
-    document.body.appendChild(modal);
-
-    // **NEW**: Register the new process in our global state tracker
-    activeDownloadProcesses[playlistId] = {
-        status: 'idle', // idle, running, complete, cancelled
-        modalElement: modal,
-        poller: null,
-        batchId: null,
-        playlist: playlist,
-        tracks: tracks
-    };
-
-    // Generate hero section for playlist context
-    const heroContext = {
-        type: 'playlist',
-        playlist: playlist,
-        trackCount: tracks.length,
-        playlistId: playlistId
-    };
-
-    modal.innerHTML = `
-        <div class="download-missing-modal-content" data-context="playlist">
-            <div class="download-missing-modal-header">
-                ${generateDownloadModalHeroSection(heroContext)}
-            </div>
-
-            <div class="download-missing-modal-body">
-                <div class="download-progress-section">
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            🔍 Library Analysis
-                            <span id="analysis-progress-text-${playlistId}">Ready to start</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill analysis" id="analysis-progress-fill-${playlistId}"></div>
-                        </div>
-                    </div>
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            ⏬ Downloads
-                            <span id="download-progress-text-${playlistId}">Waiting for analysis</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill download" id="download-progress-fill-${playlistId}"></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="download-tracks-section">
-                    <div class="download-tracks-header">
-                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
-                        <span class="track-selection-count" id="track-selection-count-${playlistId}">${tracks.length} / ${tracks.length} tracks selected</span>
-                    </div>
-                    <div class="download-tracks-table-container">
-                        <table class="download-tracks-table">
-                            <thead>
-                                <tr>
-                                    <th class="track-select-header">
-                                        <input type="checkbox" class="track-select-all"
-                                               id="select-all-${playlistId}" checked
-                                               onchange="toggleAllTrackSelections('${playlistId}', this.checked)">
-                                    </th>
-                                    <th>#</th>
-                                    <th>Track</th>
-                                    <th>Artist</th>
-                                    <th>Duration</th>
-                                    <th>Library Match</th>
-                                    <th>Download Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="download-tracks-tbody-${playlistId}">
-                                ${tracks.map((track, index) => `
-                                    <tr data-track-index="${index}">
-                                        <td class="track-select-cell">
-                                            <input type="checkbox" class="track-select-cb"
-                                                   data-track-index="${index}" checked
-                                                   onchange="updateTrackSelectionCount('${playlistId}')">
-                                        </td>
-                                        <td class="track-number">${index + 1}</td>
-                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
-                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
-                                        <td class="track-match-status match-checking" id="match-${playlistId}-${index}">🔍 Pending</td>
-                                        <td class="track-download-status" id="download-${playlistId}-${index}">-</td>
-                                        <td class="track-actions" id="actions-${playlistId}-${index}">-</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="download-missing-modal-footer">
-                <div class="download-phase-controls">
-                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="force-download-all-${playlistId}">
-                            <span>Force Download All</span>
-                        </label>
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="playlist-folder-mode-${playlistId}">
-                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
-                        </label>
-                    </div>
-                    <button class="download-control-btn primary" id="begin-analysis-btn-${playlistId}" onclick="startMissingTracksProcess('${playlistId}')">
-                        Begin Analysis
-                    </button>
-                    <button class="download-control-btn" id="add-to-wishlist-btn-${playlistId}" onclick="addModalTracksToWishlist('${playlistId}')" style="background-color: #9333ea; color: white;">
-                        Add to Wishlist
-                    </button>
-                    <button class="download-control-btn danger" id="cancel-all-btn-${playlistId}" onclick="cancelAllOperations('${playlistId}')" style="display: none;">
-                        Cancel All
-                    </button>
-                </div>
-                <div class="modal-close-section">
-                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${playlistId}')">
-                        📋 Export as M3U
-                    </button>
-                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${playlistId}')">Close</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    applyProgressiveTrackRendering(playlistId, tracks.length);
-    modal.style.display = 'flex';
-    hideLoadingOverlay();
-}
-
-async function autoSavePlaylistM3U(playlistId) {
-    /**
-     * Automatically save M3U file server-side for playlist modals only.
-     * Albums are skipped — they're already grouped by media servers.
-     * The server checks the m3u_export.enabled setting before writing.
-     * Uses real DB file paths via /api/generate-playlist-m3u.
-     */
-    const process = activeDownloadProcesses[playlistId];
-    if (!process || !process.tracks || process.tracks.length === 0) {
-        return;
-    }
-
-    const modal = document.getElementById(`download-missing-modal-${playlistId}`);
-    if (!modal) return;
-
-    // Skip M3U for non-playlist downloads — albums, singles, redownloads, etc.
-    const nonPlaylistPrefixes = [
-        'artist_album_', 'discover_album_', 'enhanced_search_album_', 'enhanced_search_track_',
-        'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_',
-        'issue_download_', 'library_redownload_', 'redownload_',
-    ];
-    if (nonPlaylistPrefixes.some(p => playlistId.startsWith(p))) return;
-
-    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
-    const artistName = process.artist?.name || '';
-    const albumName = process.album?.name || '';
-    const releaseDate = process.album?.release_date || '';
-    const year = releaseDate ? releaseDate.substring(0, 4) : '';
-
-    try {
-        const response = await fetch('/api/generate-playlist-m3u', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_name: playlistName,
-                tracks: _extractM3UTracks(process.tracks),
-                context_type: 'playlist',
-                artist_name: artistName,
-                album_name: albumName,
-                year: year,
-                save_to_disk: true
-            })
-        });
-
-        if (response.ok) {
-            console.log(`✅ Auto-saved M3U for playlist: ${playlistName}`);
-        } else {
-            console.warn(`⚠️ Failed to auto-save M3U for ${playlistName}`);
-        }
-    } catch (error) {
-        console.debug('Auto-save M3U error (non-critical):', error);
-    }
-}
-
-function generateM3UContent(playlistId) {
-    /**
-     * Generate M3U file content from modal data
-     * Shared between manual export and auto-save
-     */
-    const process = activeDownloadProcesses[playlistId];
-    if (!process || !process.tracks || process.tracks.length === 0) {
-        return null;
-    }
-
-    const tracks = process.tracks;
-    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
-
-    // Generate M3U8 content with status information
-    let m3uContent = '#EXTM3U\n';
-    m3uContent += `#PLAYLIST:${playlistName}\n`;
-    m3uContent += `#GENERATED:${new Date().toISOString()}\n\n`;
-
-    let foundCount = 0;
-    let downloadedCount = 0;
-    let missingCount = 0;
-
-    tracks.forEach((track, index) => {
-        const durationSeconds = track.duration_ms ? Math.floor(track.duration_ms / 1000) : -1;
-        let artists = 'Unknown Artist';
-        if (Array.isArray(track.artists)) {
-            artists = track.artists.map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : String(a)).filter(Boolean).join(', ') || 'Unknown Artist';
-        } else if (typeof track.artists === 'string') {
-            artists = track.artists;
-        } else if (track.artist) {
-            artists = typeof track.artist === 'object' ? (track.artist.name || 'Unknown Artist') : String(track.artist);
-        }
-
-        // Check library match status from the modal UI
-        const matchEl = document.getElementById(`match-${playlistId}-${index}`);
-        const downloadEl = document.getElementById(`download-${playlistId}-${index}`);
-
-        const isFoundInLibrary = matchEl && matchEl.textContent.includes('Found');
-        const isDownloaded = downloadEl && downloadEl.textContent.includes('Completed');
-        const isMissing = matchEl && matchEl.textContent.includes('Missing');
-
-        // Track status
-        let status = 'UNKNOWN';
-        if (isDownloaded) {
-            status = 'DOWNLOADED';
-            downloadedCount++;
-        } else if (isFoundInLibrary) {
-            status = 'FOUND_IN_LIBRARY';
-            foundCount++;
-        } else if (isMissing) {
-            status = 'MISSING';
-            missingCount++;
-        }
-
-        // Add track info
-        m3uContent += `#EXTINF:${durationSeconds},${artists} - ${track.name}\n`;
-        m3uContent += `#STATUS:${status}\n`;
-
-        // Generate file path
-        const sanitizedArtist = artists.replace(/[/\\?%*:|"<>]/g, '-');
-        const sanitizedTrack = track.name.replace(/[/\\?%*:|"<>]/g, '-');
-
-        if (isDownloaded || isFoundInLibrary) {
-            m3uContent += `${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
-        } else {
-            m3uContent += `# NOT AVAILABLE: ${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
-        }
-    });
-
-    // Add summary
-    m3uContent += `#SUMMARY\n`;
-    m3uContent += `#TOTAL_TRACKS:${tracks.length}\n`;
-    m3uContent += `#FOUND_IN_LIBRARY:${foundCount}\n`;
-    m3uContent += `#DOWNLOADED:${downloadedCount}\n`;
-    m3uContent += `#MISSING:${missingCount}\n`;
-
-    return m3uContent;
-}
-
-async function exportPlaylistAsM3U(playlistId) {
-    /**
-     * Export the tracks from the download missing tracks modal as an M3U playlist file.
-     * Downloads via browser AND saves server-side to the relevant folder (force=true).
-     * Uses real DB file paths via /api/generate-playlist-m3u.
-     */
-    console.log(`📋 Exporting playlist ${playlistId} as M3U`);
-
-    const process = activeDownloadProcesses[playlistId];
-    if (!process || !process.tracks || process.tracks.length === 0) {
-        showToast('No tracks available to export', 'warning');
-        return;
-    }
-
-    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
-    const albumPrefixes = ['artist_album_', 'discover_album_', 'enhanced_search_album_', 'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_'];
-    const isAlbumExport = albumPrefixes.some(p => playlistId.startsWith(p));
-    const releaseDate = process.album?.release_date || '';
-    const year = releaseDate ? releaseDate.substring(0, 4) : '';
-
-    let m3uContent, foundCount, missingCount;
-    try {
-        const response = await fetch('/api/generate-playlist-m3u', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_name: playlistName,
-                tracks: _extractM3UTracks(process.tracks),
-                context_type: isAlbumExport ? 'album' : 'playlist',
-                artist_name: process.artist?.name || '',
-                album_name: process.album?.name || '',
-                year: year,
-                save_to_disk: true,
-                force: true
-            })
-        });
-        const data = await response.json();
-        if (!data.success) throw new Error(data.error || 'Unknown error');
-        m3uContent = data.m3u_content;
-        foundCount = (data.stats?.found || 0) + (data.stats?.downloaded || 0);
-        missingCount = data.stats?.missing || 0;
-    } catch (error) {
-        showToast('Failed to generate M3U content', 'error');
-        console.error('M3U export error:', error);
-        return;
-    }
-
-    // Browser download
-    const blob = new Blob([m3uContent], { type: 'audio/x-mpegurl;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `${playlistName.replace(/[/\\?%*:|"<>]/g, '-')}.m3u`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-
-    showToast(`Exported M3U: ${foundCount} available, ${missingCount} missing`, 'success');
-    console.log(`✅ Exported M3U - Total: ${process.tracks.length}, Available: ${foundCount}, Missing: ${missingCount}`);
-}
-
-function _extractM3UTracks(tracks) {
-    /** Extract simplified track data for the /api/generate-playlist-m3u endpoint. */
-    return tracks.map(t => {
-        let artist = '';
-        if (Array.isArray(t.artists)) {
-            const first = t.artists[0];
-            artist = typeof first === 'object' ? (first.name || '') : String(first || '');
-        } else if (typeof t.artists === 'string') {
-            artist = t.artists;
-        } else if (t.artist) {
-            artist = typeof t.artist === 'object' ? (t.artist.name || '') : String(t.artist);
-        }
-        return { name: t.name || '', artist, duration_ms: t.duration_ms || 0 };
-    });
-}
-
-// ==================================================================================
-// WING IT — Download without metadata discovery
-// ==================================================================================
-
-function _toggleWingItDropdown(btn, urlHash) {
-    // Remove any existing dropdown
-    const existing = document.querySelector('.wing-it-dropdown.visible');
-    if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
-
-    const wrap = btn.closest('.wing-it-wrap');
-    if (!wrap) return;
-
-    const dropdown = document.createElement('div');
-    dropdown.className = 'wing-it-dropdown';
-    dropdown.innerHTML = `
-        <button class="wing-it-dropdown-item" data-action="download">
-            <span class="wing-it-dropdown-icon">⬇️</span>
-            <span class="wing-it-dropdown-label">Download</span>
-            <span class="wing-it-dropdown-hint">Raw names</span>
-        </button>
-        <button class="wing-it-dropdown-item" data-action="sync">
-            <span class="wing-it-dropdown-icon">🔄</span>
-            <span class="wing-it-dropdown-label">Sync to Server</span>
-            <span class="wing-it-dropdown-hint">Best-effort</span>
-        </button>
-    `;
-
-    dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
-        item.addEventListener('click', () => {
-            dropdown.classList.remove('visible');
-            setTimeout(() => dropdown.remove(), 150);
-            const action = item.dataset.action;
-            if (action === 'download') {
-                _wingItAction(urlHash, 'download');
-            } else {
-                _wingItAction(urlHash, 'sync');
-            }
-        });
-    });
-
-    // Flip dropdown direction if button is in the top portion of viewport
-    const btnRect = btn.getBoundingClientRect();
-    if (btnRect.top < 200) dropdown.classList.add('flip-down');
-
-    wrap.appendChild(dropdown);
-    requestAnimationFrame(() => dropdown.classList.add('visible'));
-
-    // Close on outside click
-    setTimeout(() => {
-        const closeHandler = e => {
-            if (!dropdown.contains(e.target) && e.target !== btn) {
-                dropdown.classList.remove('visible');
-                setTimeout(() => dropdown.remove(), 150);
-                document.removeEventListener('click', closeHandler);
-            }
-        };
-        document.addEventListener('click', closeHandler);
-    }, 50);
-}
-
-function _wingItAction(urlHash, action) {
-    if (urlHash) {
-        // Called from a modal — use _wingItFromModal logic
-        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
-        const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
-        const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
-        const isTidal = state.is_tidal_playlist;
-        const isLB = state.is_listenbrainz_playlist;
-        const isBeatport = state.is_beatport_playlist;
-        const isDeezer = state.is_deezer_playlist;
-        const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
-
-        if (!tracks.length) {
-            showToast('No tracks available for Wing It', 'error');
-            return;
-        }
-
-        if (action === 'sync') {
-            // Sync inline — keep modal open
-            _wingItSyncFromModal(urlHash, tracks, name, isLB);
-        } else {
-            // Download — close modal, open download modal
-            const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-            if (modal) modal.remove();
-            const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
-            if (overlay) overlay.remove();
-            wingItDownload(tracks, name, source, null, true);
-        }
-    }
-}
-
-async function _wingItSyncFromModal(urlHash, tracks, name, isLB) {
-    showToast('Starting Wing It sync...', 'info');
-    updateYouTubeModalButtons(urlHash, 'syncing');
-
-    try {
-        const syncTracks = tracks.map((t, i) => {
-            let artists = t.artists || [];
-            if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
-            return {
-                id: t.id || t.source_track_id || `wing_it_${i}`,
-                name: t.name || t.track_name || 'Unknown',
-                artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
-                album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
-                duration_ms: t.duration_ms || 0,
-            };
-        });
-
-        const res = await fetch('/api/wing-it/sync', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
-        });
-        const data = await res.json();
-
-        if (data.error) {
-            showToast(`Sync failed: ${data.error}`, 'error');
-            updateYouTubeModalButtons(urlHash, 'discovered');
-            return;
-        }
-
-        if (isLB) {
-            const state = listenbrainzPlaylistStates[urlHash];
-            if (state) state.syncPlaylistId = data.sync_playlist_id;
-            startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
-        } else {
-            startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
-        }
-    } catch (e) {
-        showToast('Sync failed: ' + e.message, 'error');
-        updateYouTubeModalButtons(urlHash, 'discovered');
-    }
-}
-
-async function wingItDownload(tracks, playlistName, source = 'playlist', cardIdentifier = null, skipConfirm = false) {
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks to download', 'error');
-        return;
-    }
-
-    if (!skipConfirm) {
-        // Show choice: Download or Sync (for LB card button which doesn't have dropdown)
-        const choice = await _showWingItChoiceDialog(tracks.length, source);
-        if (!choice) return;
-
-        if (choice === 'sync') {
-            await _wingItSync(tracks, playlistName, source, cardIdentifier);
-            return;
-        }
-    }
-
-    // Normalize tracks to Spotify-compatible format
-    const formattedTracks = tracks.map(t => {
-        // Handle various artist formats
-        let artists = [];
-        if (t.artists) {
-            if (Array.isArray(t.artists)) {
-                artists = t.artists.map(a => typeof a === 'string' ? { name: a } : a);
-            } else if (typeof t.artists === 'string') {
-                artists = [{ name: t.artists }];
-            }
-        } else if (t.artist_name) {
-            artists = [{ name: t.artist_name }];
-        } else if (t.artist) {
-            artists = [{ name: t.artist }];
-        }
-        if (artists.length === 0) artists = [{ name: 'Unknown' }];
-
-        // Handle album
-        let album = { name: '' };
-        if (t.album) {
-            album = typeof t.album === 'string' ? { name: t.album } : t.album;
-        } else if (t.album_name) {
-            album = { name: t.album_name };
-        }
-
-        return {
-            id: t.id || t.source_track_id || `wing_it_${Date.now()}_${Math.random()}`,
-            name: t.name || t.track_name || 'Unknown Track',
-            artists: artists,
-            duration_ms: t.duration_ms || 0,
-            album: album,
-        };
-    });
-
-    const virtualPlaylistId = `wing_it_${Date.now()}`;
-
-    // Store wing_it flag BEFORE opening the modal
-    youtubePlaylistStates[virtualPlaylistId] = {
-        wing_it: true,
-        tracks: formattedTracks,
-    };
-
-    await openDownloadMissingModalForYouTube(virtualPlaylistId, `⚡ ${playlistName}`, formattedTracks);
-
-    // Pre-check the Force Download toggle
-    setTimeout(() => {
-        const forceToggle = document.getElementById(`force-download-all-${virtualPlaylistId}`);
-        if (forceToggle && !forceToggle.checked) forceToggle.checked = true;
-    }, 800);
-}
-
-function _showWingItChoiceDialog(trackCount, source) {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-        const close = val => { overlay.remove(); resolve(val); };
-        overlay.onclick = e => { if (e.target === overlay) close(null); };
-
-        overlay.innerHTML = `
-            <div class="smart-delete-modal">
-                <div class="smart-delete-header">
-                    <h3>⚡ Wing It</h3>
-                    <button class="smart-delete-close">&times;</button>
-                </div>
-                <p class="smart-delete-desc">${trackCount} track${trackCount !== 1 ? 's' : ''} from ${source}. No metadata discovery — uses raw names. Failed tracks won't be added to wishlist.</p>
-                <div class="smart-delete-options">
-                    <button class="smart-delete-option" data-choice="download">
-                        <div class="smart-delete-option-icon">⬇️</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title" style="color:#4caf50">Download</div>
-                            <div class="smart-delete-option-desc">Search and download each track using raw names.</div>
-                        </div>
-                    </button>
-                    <button class="smart-delete-option" data-choice="sync">
-                        <div class="smart-delete-option-icon">🔄</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title" style="color:#64b5f6">Sync to Server</div>
-                            <div class="smart-delete-option-desc">Mirror playlist and sync to your media server. Best-effort matching.</div>
-                        </div>
-                    </button>
-                </div>
-            </div>
-        `;
-
-        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
-            btn.addEventListener('click', () => close(btn.dataset.choice));
-        });
-        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
-        const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); close(null); } };
-        document.addEventListener('keydown', escH);
-        document.body.appendChild(overlay);
-    });
-}
-
-async function _wingItSync(tracks, playlistName, source, cardIdentifier = null) {
-    try {
-        showToast('Syncing playlist to server...', 'info');
-
-        // Format tracks for the sync endpoint
-        const syncTracks = tracks.map((t, i) => {
-            let artists = t.artists || [];
-            if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
-            return {
-                id: t.id || t.source_track_id || `wing_it_${i}`,
-                name: t.name || t.track_name || 'Unknown',
-                artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
-                album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
-                duration_ms: t.duration_ms || 0,
-                artist_name: t.artist_name,
-            };
-        });
-
-        const res = await fetch('/api/wing-it/sync', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ tracks: syncTracks, playlist_name: playlistName })
-        });
-        const data = await res.json();
-
-        if (data.error) {
-            showToast(`Sync failed: ${data.error}`, 'error');
-            return;
-        }
-
-        // Show inline sync status on the card (same display as normal sync)
-        const playlistId = cardIdentifier ? `discover-lb-playlist-${cardIdentifier}` : null;
-        if (playlistId) {
-            const statusDisplay = document.getElementById(`${playlistId}-sync-status`);
-            if (statusDisplay) statusDisplay.style.display = 'block';
-            // Disable sync/wing-it buttons during sync
-            const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
-            if (syncBtn) { syncBtn.disabled = true; syncBtn.style.opacity = '0.5'; }
-        }
-
-        // Poll for sync progress — update inline display
-        if (data.sync_playlist_id) {
-            _pollWingItSyncProgress(data.sync_playlist_id, playlistName, playlistId);
-        }
-
-    } catch (e) {
-        showToast('Sync failed: ' + e.message, 'error');
-    }
-}
-
-function _pollWingItSyncProgress(syncPlaylistId, playlistName, cardPlaylistId) {
-    const poll = setInterval(async () => {
-        try {
-            const res = await fetch(`/api/sync/status/${syncPlaylistId}`);
-            const data = await res.json();
-
-            // Update inline status display if we have a card
-            if (cardPlaylistId && data.progress) {
-                const p = data.progress;
-                const total = p.total_tracks || p.total || 0;
-                const matched = p.matched_tracks || p.matched || 0;
-                const failed = p.failed_tracks || p.failed || 0;
-                const totalEl = document.getElementById(`${cardPlaylistId}-sync-total`);
-                const matchedEl = document.getElementById(`${cardPlaylistId}-sync-matched`);
-                const failedEl = document.getElementById(`${cardPlaylistId}-sync-failed`);
-                const pctEl = document.getElementById(`${cardPlaylistId}-sync-percentage`);
-                if (totalEl) totalEl.textContent = total;
-                if (matchedEl) matchedEl.textContent = matched;
-                if (failedEl) failedEl.textContent = failed;
-                if (pctEl) pctEl.textContent = total > 0 ? Math.round((matched / total) * 100) : 0;
-            }
-
-            if (data.status === 'finished' || data.status === 'complete' || data.status === 'error') {
-                clearInterval(poll);
-                const matched = data.progress?.matched_tracks || data.progress?.matched || 0;
-                const total = data.progress?.total_tracks || data.progress?.total || 0;
-
-                if (data.status === 'error') {
-                    showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-                } else {
-                    showToast(`⚡ Wing It sync complete — "${playlistName}" created on server (${matched}/${total} tracks matched)`, 'success');
-                }
-
-                // Update card status display to show completion
-                if (cardPlaylistId) {
-                    const statusLabel = document.querySelector(`#${cardPlaylistId}-sync-status .sync-status-label span:last-child`);
-                    if (statusLabel) statusLabel.textContent = `Sync complete — ${matched}/${total} matched`;
-                    const syncIcon = document.querySelector(`#${cardPlaylistId}-sync-status .sync-icon`);
-                    if (syncIcon) syncIcon.textContent = '✓';
-                }
-            }
-        } catch (e) { /* ignore poll errors */ }
-    }, 2000);
-
-    // Safety timeout
-    setTimeout(() => clearInterval(poll), 180000);
-}
-
-async function _wingItFromModal(urlHash) {
-    // Extract tracks from the discovery modal state — tracks can be in various locations
-    const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash] || {};
-    const tracks = state.tracks || state.rawTracks || state.playlist?.tracks || [];
-    const name = state.playlistName || state.name || state.playlist?.name || 'Playlist';
-    const isTidal = state.is_tidal_playlist;
-    const isLB = state.is_listenbrainz_playlist;
-    const isBeatport = state.is_beatport_playlist;
-    const isDeezer = state.is_deezer_playlist;
-    const source = isLB ? 'ListenBrainz' : isTidal ? 'Tidal' : isDeezer ? 'Deezer' : isBeatport ? 'Beatport' : 'YouTube';
-
-    if (!tracks.length) {
-        showToast('No tracks available for Wing It', 'error');
-        return;
-    }
-
-    const choice = await _showWingItChoiceDialog(tracks.length, source);
-    if (!choice) return;
-
-    if (choice === 'sync') {
-        // Sync inline — keep modal open, show progress in modal
-        showToast('Starting Wing It sync...', 'info');
-        updateYouTubeModalButtons(urlHash, 'syncing');
-
-        try {
-            // Format and send sync request
-            const syncTracks = tracks.map((t, i) => {
-                let artists = t.artists || [];
-                if (!Array.isArray(artists)) artists = [{ name: String(artists) }];
-                return {
-                    id: t.id || t.source_track_id || `wing_it_${i}`,
-                    name: t.name || t.track_name || 'Unknown',
-                    artists: artists.map(a => typeof a === 'string' ? { name: a } : a),
-                    album: typeof t.album === 'object' ? t.album : { name: t.album || t.album_name || '' },
-                    duration_ms: t.duration_ms || 0,
-                };
-            });
-
-            const res = await fetch('/api/wing-it/sync', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ tracks: syncTracks, playlist_name: name })
-            });
-            const data = await res.json();
-
-            if (data.error) {
-                showToast(`Sync failed: ${data.error}`, 'error');
-                updateYouTubeModalButtons(urlHash, 'discovered');
-                return;
-            }
-
-            // Use the same sync polling as normal sync — works for any source
-            if (isLB) {
-                if (state) state.syncPlaylistId = data.sync_playlist_id;
-                startListenBrainzSyncPolling(urlHash, data.sync_playlist_id);
-            } else {
-                startYouTubeSyncPolling(urlHash, data.sync_playlist_id);
-            }
-        } catch (e) {
-            showToast('Sync failed: ' + e.message, 'error');
-            updateYouTubeModalButtons(urlHash, 'discovered');
-        }
-        return;
-    }
-
-    // choice === 'download' — close modal and open download modal
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (modal) modal.remove();
-    const overlay = document.getElementById(`youtube-discovery-overlay-${urlHash}`);
-    if (overlay) overlay.remove();
-
-    wingItDownload(tracks, name, source);
-}
-
-async function openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks, artist = null, album = null) {
-    showLoadingOverlay('Loading YouTube playlist...');
-    // Check if a process is already active for this virtual playlist
-    if (activeDownloadProcesses[virtualPlaylistId]) {
-        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process.modalElement) {
-            if (process.status === 'complete') {
-                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-            }
-            process.modalElement.style.display = 'flex';
-        }
-        hideLoadingOverlay(); // Hide overlay when reopening existing modal
-        return;
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for YouTube playlist: ${virtualPlaylistId}`);
-
-    // Create virtual playlist object for compatibility with existing modal logic
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: playlistName,
-        track_count: spotifyTracks.length
-    };
-
-    // Store the tracks in the cache for the modal to use
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-    currentPlaylistTracks = spotifyTracks;
-    currentModalPlaylistId = virtualPlaylistId;
-
-    let modal = document.createElement('div');
-    modal.id = `download-missing-modal-${virtualPlaylistId}`;
-    modal.className = 'download-missing-modal';
-    modal.style.display = 'none';
-    document.body.appendChild(modal);
-
-    // Register the new process in our global state tracker using the same structure as Spotify
-    activeDownloadProcesses[virtualPlaylistId] = {
-        status: 'idle',
-        modalElement: modal,
-        poller: null,
-        batchId: null,
-        playlist: virtualPlaylist,
-        tracks: spotifyTracks,
-        artist: artist,  // ✅ Store artist context
-        album: album     // ✅ Store album context
-    };
-
-    // Generate hero section with dynamic source detection
-    const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
-        virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
-            virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
-                virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
-                    virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
-                        virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
-                            virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
-                                virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
-                                    virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
-                                        virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
-                                            virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
-                                                'YouTube';
-
-    // Store metadata for discover download sidebar (will be added when Begin Analysis is clicked)
-    if (source === 'SoulSync' || virtualPlaylistId.startsWith('discover_lb_') || virtualPlaylistId.startsWith('listenbrainz_') || virtualPlaylistId.startsWith('wing_it_')) {
-        // Extract image URL from album context or first track's album cover
-        let imageUrl = null;
-        if (album && album.images && album.images.length > 0) {
-            imageUrl = album.images[0].url;
-        } else if (spotifyTracks && spotifyTracks.length > 0) {
-            const firstTrack = spotifyTracks[0];
-            if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
-                imageUrl = firstTrack.album.images[0].url;
-            }
-        }
-        // Store in process for later use when Begin Analysis is clicked
-        activeDownloadProcesses[virtualPlaylistId].discoverMetadata = {
-            imageUrl: imageUrl,
-            type: album ? 'album' : 'playlist'  // ✅ Use 'album' if album context provided
-        };
-    }
-
-    // CRITICAL FIX: Use album context for discover_album playlists
-    const isDiscoverAlbum = virtualPlaylistId.startsWith('discover_album_') || virtualPlaylistId.startsWith('discover_cache_') || virtualPlaylistId.startsWith('seasonal_album_') || virtualPlaylistId.startsWith('spotify_library_');
-    const heroContext = isDiscoverAlbum && album && artist ? {
-        type: 'album',
-        artist: {
-            name: artist.name,
-            image_url: artist.image_url || null
-        },
-        album: {
-            name: album.name,
-            album_type: album.album_type || 'album',
-            images: album.images || []
-        },
-        trackCount: spotifyTracks.length,
-        playlistId: virtualPlaylistId
-    } : {
-        type: 'playlist',
-        playlist: { name: playlistName, owner: source },
-        trackCount: spotifyTracks.length,
-        playlistId: virtualPlaylistId
-    };
-
-    // Use the exact same modal HTML structure as the existing Spotify modal
-    modal.innerHTML = `
-        <div class="download-missing-modal-content" data-context="playlist">
-            <div class="download-missing-modal-header">
-                ${generateDownloadModalHeroSection(heroContext)}
-            </div>
-
-            <div class="download-missing-modal-body">
-                <div class="download-progress-section">
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            🔍 Library Analysis
-                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            ⏬ Downloads
-                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="download-tracks-section">
-                    <div class="download-tracks-header">
-                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
-                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
-                    </div>
-                    <div class="download-tracks-table-container">
-                        <table class="download-tracks-table">
-                            <thead>
-                                <tr>
-                                    <th class="track-select-header">
-                                        <input type="checkbox" class="track-select-all"
-                                               id="select-all-${virtualPlaylistId}" checked
-                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
-                                    </th>
-                                    <th>#</th>
-                                    <th>Track</th>
-                                    <th>Artist</th>
-                                    <th>Duration</th>
-                                    <th>Library Match</th>
-                                    <th>Download Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
-                                ${spotifyTracks.map((track, index) => `
-                                    <tr data-track-index="${index}">
-                                        <td class="track-select-cell">
-                                            <input type="checkbox" class="track-select-cb"
-                                                   data-track-index="${index}" checked
-                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
-                                        </td>
-                                        <td class="track-number">${index + 1}</td>
-                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
-                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
-                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
-                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
-                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="download-missing-modal-footer">
-                <div class="download-phase-controls">
-                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
-                            <span>Force Download All</span>
-                        </label>
-                        ${isDiscoverAlbum ? '' : `<label class="force-download-toggle">
-                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
-                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
-                        </label>`}
-                    </div>
-                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
-                        Begin Analysis
-                    </button>
-                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
-                        Add to Wishlist
-                    </button>
-                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
-                        Cancel All
-                    </button>
-                </div>
-                <div class="modal-close-section">
-                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${virtualPlaylistId}')">
-                        📋 Export as M3U
-                    </button>
-                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
-    modal.style.display = 'flex';
-    hideLoadingOverlay();
-}
-
-function _navigateToArtistFromModal(artistId, artistName, imageUrl, source, playlistId) {
-    if (!artistName) return;
-    // Close the download modal
-    if (playlistId) closeDownloadMissingModal(playlistId);
-    // Navigate to Artists page and load discography
-    navigateToPage('artists');
-    setTimeout(() => {
-        // If we have an artist ID, use it directly
-        // If not, search by name — selectArtistForDetail handles both
-        selectArtistForDetail(
-            { id: artistId || artistName, name: artistName, image_url: imageUrl || '' },
-            source ? { source: source } : undefined
-        );
-    }, 200);
-}
-
-async function closeDownloadMissingModal(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) {
-        // If somehow called without a process, try to find and remove the element
-        const modal = document.getElementById(`download-missing-modal-${playlistId}`);
-        if (modal && modal.parentElement) {
-            modal.parentElement.removeChild(modal);
-        }
-        return;
-    }
-
-    // If the process is running, just hide the modal.
-    // If it's idle, complete, or cancelled, perform a full cleanup.
-    if (process.status === 'running') {
-        console.log(`Hiding active download modal for playlist ${playlistId}.`);
-        process.modalElement.style.display = 'none';
-
-        // Track wishlist modal state changes
-        if (playlistId === 'wishlist') {
-            WishlistModalState.setUserClosed(); // User manually closed during processing
-            console.log('📱 [Modal State] User manually closed wishlist modal during processing');
-        }
-    } else {
-        console.log(`Closing and cleaning up download modal for playlist ${playlistId}.`);
-
-        // Reset YouTube playlist phase to 'discovered' when modal is closed after completion
-        if (playlistId.startsWith('youtube_')) {
-            const urlHash = playlistId.replace('youtube_', '');
-            updateYouTubeCardPhase(urlHash, 'discovered');
-            // Also update mirrored playlist card if applicable
-            if (urlHash.startsWith('mirrored_')) {
-                updateMirroredCardPhase(urlHash, 'discovered');
-            }
-
-            // Update backend state to prevent rehydration issues on page refresh (similar to Tidal fix)
-            try {
-                const response = await fetch(`/api/youtube/update_phase/${urlHash}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        phase: 'discovered'
-                    })
-                });
-
-                if (response.ok) {
-                    console.log(`✅ [Modal Close] Updated backend phase for YouTube playlist ${urlHash} to 'discovered'`);
-                } else {
-                    console.warn(`⚠️ [Modal Close] Failed to update backend phase for YouTube playlist ${urlHash}`);
-                }
-            } catch (error) {
-                console.error(`❌ [Modal Close] Error updating backend phase for YouTube playlist ${urlHash}:`, error);
-            }
-        }
-
-        // Reset Beatport chart phase to 'discovered' when modal is closed
-        if (playlistId.startsWith('beatport_')) {
-            const urlHash = playlistId.replace('beatport_', '');
-            const state = youtubePlaylistStates[urlHash];
-
-            if (state && state.is_beatport_playlist) {
-                console.log(`🧹 [Modal Close] Processing Beatport chart close: playlistId="${playlistId}", urlHash="${urlHash}"`);
-
-                const chartHash = state.beatport_chart_hash || urlHash;
-
-                // Reset to discovered phase (unless download actually started and completed)
-                if (state.phase !== 'download_complete') {
-                    updateBeatportCardPhase(chartHash, 'discovered');
-                    state.phase = 'discovered';
-
-                    // Update Beatport chart state
-                    if (beatportChartStates[chartHash]) {
-                        beatportChartStates[chartHash].phase = 'discovered';
-                    }
-
-                    // Update backend state
-                    try {
-                        await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                        console.log(`✅ [Modal Close] Updated backend phase for Beatport chart ${chartHash} to 'discovered'`);
-                    } catch (error) {
-                        console.error(`❌ [Modal Close] Error updating backend phase for Beatport chart ${chartHash}:`, error);
-                    }
-                }
-            }
-        }
-
-        // Enhanced Tidal playlist state management (based on GUI sync.py patterns)
-        if (playlistId.startsWith('tidal_')) {
-            const tidalPlaylistId = playlistId.replace('tidal_', '');
-
-            console.log(`🧹 [Modal Close] Processing Tidal playlist close: playlistId="${playlistId}", tidalPlaylistId="${tidalPlaylistId}"`);
-            console.log(`🧹 [Modal Close] Current Tidal state:`, tidalPlaylistStates[tidalPlaylistId]);
-
-            // Clear download-specific state but preserve discovery results (like GUI closeEvent)
-            if (tidalPlaylistStates[tidalPlaylistId]) {
-                const currentPhase = tidalPlaylistStates[tidalPlaylistId].phase;
-                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
-                // Preserve discovery data for future use (like GUI modal behavior)
-                const preservedData = {
-                    playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
-                    discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
-                    spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
-                    discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
-                    convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
-                };
-
-                // Clear download-specific state 
-                delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
-                delete tidalPlaylistStates[tidalPlaylistId].phase;
-
-                // Restore preserved data and set to discovered phase
-                Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
-                tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
-
-                console.log(`🧹 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} - cleared download state, preserved discovery data`);
-                console.log(`🧹 [Modal Close] New phase after reset: ${tidalPlaylistStates[tidalPlaylistId].phase}`);
-            } else {
-                console.error(`❌ [Modal Close] No Tidal state found for playlistId: ${tidalPlaylistId}`);
-            }
-
-            updateTidalCardPhase(tidalPlaylistId, 'discovered');
-            console.log(`🔄 [Modal Close] Reset Tidal playlist ${tidalPlaylistId} to discovered phase`);
-            console.log(`📝 [Modal Close] Expected button text for discovered phase: "${getActionButtonText('discovered')}"`);
-
-            // Update backend state to prevent rehydration issues on page refresh
-            try {
-                const response = await fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        phase: 'discovered'
-                    })
-                });
-
-                if (response.ok) {
-                    console.log(`✅ [Modal Close] Updated backend phase for Tidal playlist ${tidalPlaylistId} to 'discovered'`);
-                } else {
-                    console.warn(`⚠️ [Modal Close] Failed to update backend phase for Tidal playlist ${tidalPlaylistId}`);
-                }
-            } catch (error) {
-                console.error(`❌ [Modal Close] Error updating backend phase for Tidal playlist ${tidalPlaylistId}:`, error);
-            }
-        }
-
-        // Reset ListenBrainz playlist phase to 'discovered' when modal is closed
-        if (playlistId.startsWith('listenbrainz_')) {
-            const playlistMbid = playlistId.replace('listenbrainz_', '');
-
-            console.log(`🧹 [Modal Close] Processing ListenBrainz playlist close: playlistId="${playlistId}", mbid="${playlistMbid}"`);
-
-            // Clear download-specific state but preserve discovery results
-            if (listenbrainzPlaylistStates[playlistMbid]) {
-                const currentPhase = listenbrainzPlaylistStates[playlistMbid].phase;
-                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
-                // Reset to discovered phase (unless download actually completed successfully)
-                if (currentPhase !== 'download_complete') {
-                    // Clear download-specific fields
-                    delete listenbrainzPlaylistStates[playlistMbid].download_process_id;
-                    delete listenbrainzPlaylistStates[playlistMbid].convertedSpotifyPlaylistId;
-
-                    // Set back to discovered
-                    listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
-
-                    // Update backend state
-                    try {
-                        await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                        console.log(`✅ [Modal Close] Updated backend phase for ListenBrainz playlist ${playlistMbid} to 'discovered'`);
-                    } catch (error) {
-                        console.error(`❌ [Modal Close] Error updating backend phase for ListenBrainz playlist ${playlistMbid}:`, error);
-                    }
-
-                    console.log(`🔄 [Modal Close] Reset ListenBrainz playlist ${playlistMbid} to discovered phase`);
-                }
-            } else {
-                console.error(`❌ [Modal Close] No ListenBrainz state found for mbid: ${playlistMbid}`);
-            }
-        }
-
-        // Reset Spotify Public playlist phase to 'discovered' when modal is closed
-        if (playlistId.startsWith('spotify_public_')) {
-            const spUrlHash = playlistId.replace('spotify_public_', '');
-
-            console.log(`🧹 [Modal Close] Processing Spotify Public playlist close: playlistId="${playlistId}", urlHash="${spUrlHash}"`);
-
-            if (spotifyPublicPlaylistStates[spUrlHash]) {
-                const currentPhase = spotifyPublicPlaylistStates[spUrlHash].phase;
-                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
-                const preservedData = {
-                    playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
-                    discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
-                    spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
-                    discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
-                    convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
-                };
-
-                delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
-                delete spotifyPublicPlaylistStates[spUrlHash].phase;
-
-                Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
-                spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
-
-                console.log(`🧹 [Modal Close] Reset Spotify Public playlist ${spUrlHash} - cleared download state, preserved discovery data`);
-            }
-
-            updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
-
-            try {
-                await fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ phase: 'discovered' })
-                });
-                console.log(`✅ [Modal Close] Updated backend phase for Spotify Public playlist ${spUrlHash} to 'discovered'`);
-            } catch (error) {
-                console.error(`❌ [Modal Close] Error updating backend phase for Spotify Public playlist ${spUrlHash}:`, error);
-            }
-        }
-
-        // Reset Deezer playlist phase to 'discovered' when modal is closed
-        if (playlistId.startsWith('deezer_')) {
-            const deezerPlaylistId = playlistId.replace('deezer_', '');
-
-            console.log(`🧹 [Modal Close] Processing Deezer playlist close: playlistId="${playlistId}", deezerPlaylistId="${deezerPlaylistId}"`);
-
-            if (deezerPlaylistStates[deezerPlaylistId]) {
-                const currentPhase = deezerPlaylistStates[deezerPlaylistId].phase;
-                console.log(`🧹 [Modal Close] Current phase before reset: ${currentPhase}`);
-
-                const preservedData = {
-                    playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
-                    discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
-                    spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
-                    discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
-                    convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
-                };
-
-                delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
-                delete deezerPlaylistStates[deezerPlaylistId].phase;
-
-                Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
-                deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
-
-                console.log(`🧹 [Modal Close] Reset Deezer playlist ${deezerPlaylistId} - cleared download state, preserved discovery data`);
-            }
-
-            updateDeezerCardPhase(deezerPlaylistId, 'discovered');
-
-            try {
-                await fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ phase: 'discovered' })
-                });
-                console.log(`✅ [Modal Close] Updated backend phase for Deezer playlist ${deezerPlaylistId} to 'discovered'`);
-            } catch (error) {
-                console.error(`❌ [Modal Close] Error updating backend phase for Deezer playlist ${deezerPlaylistId}:`, error);
-            }
-        }
-
-        // Clear wishlist modal state when modal is fully closed
-        if (playlistId === 'wishlist') {
-            WishlistModalState.clear(); // Clear all tracking since modal is fully closed
-            console.log('📱 [Modal State] Cleared wishlist modal state on full close');
-        }
-
-        // Clean up artist download if this is an artist album playlist
-        if (playlistId.startsWith('artist_album_')) {
-            console.log(`🧹 [MODAL CLOSE] Cleaning up artist download for completed modal: ${playlistId}`);
-            cleanupArtistDownload(playlistId);
-            console.log(`✅ [MODAL CLOSE] Artist download cleanup completed for: ${playlistId}`);
-        }
-
-        // Clean up search download if this is an enhanced search playlist
-        if (playlistId.startsWith('enhanced_search_')) {
-            console.log(`🧹 [MODAL CLOSE] Cleaning up search download for completed modal: ${playlistId}`);
-            cleanupSearchDownload(playlistId);
-            console.log(`✅ [MODAL CLOSE] Search download cleanup completed for: ${playlistId}`);
-        }
-
-        // Clean up Beatport download if this is a beatport chart or release playlist
-        if (playlistId.startsWith('beatport_chart_') || playlistId.startsWith('beatport_release_')) {
-            console.log(`🧹 [MODAL CLOSE] Cleaning up Beatport download for completed modal: ${playlistId}`);
-            cleanupBeatportDownload(playlistId);
-            console.log(`✅ [MODAL CLOSE] Beatport download cleanup completed for: ${playlistId}`);
-        }
-
-        // Remove from discover download sidebar if this is a discover page download
-        if (discoverDownloads && discoverDownloads[playlistId]) {
-            console.log(`🧹 [MODAL CLOSE] Removing discover download bubble: ${playlistId}`);
-            removeDiscoverDownload(playlistId);
-            console.log(`✅ [MODAL CLOSE] Discover download bubble removed for: ${playlistId}`);
-        }
-
-        // Automatic cleanup and server operations after successful downloads
-        await handlePostDownloadAutomation(playlistId, process);
-
-        cleanupDownloadProcess(playlistId);
-    }
-}
-
-/**
- * Extract unique album cover images from tracks
- */
-function extractUniqueCoverImages(tracks, maxCovers = 20) {
-    const uniqueCovers = new Set();
-    const covers = [];
-
-    for (const track of tracks) {
-        if (covers.length >= maxCovers) break;
-
-        let coverUrl = null;
-        let spotifyData = track.spotify_data;
-
-        // Parse spotify_data if it's a string
-        if (typeof spotifyData === 'string') {
-            try {
-                spotifyData = JSON.parse(spotifyData);
-            } catch (e) {
-                continue;
-            }
-        }
-
-        // Extract cover URL
-        coverUrl = spotifyData?.album?.images?.[0]?.url;
-
-        // Add to list if unique and valid
-        if (coverUrl && !uniqueCovers.has(coverUrl)) {
-            uniqueCovers.add(coverUrl);
-            covers.push(coverUrl);
-        }
-    }
-
-    return covers;
-}
-
-/**
- * Shuffle array using Fisher-Yates algorithm
- */
-function shuffleArray(array) {
-    const shuffled = [...array];
-    for (let i = shuffled.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
-    }
-    return shuffled;
-}
-
-/**
- * Generate mosaic grid background HTML with continuous scrolling rows
- */
-function generateMosaicBackground(coverUrls) {
-    // If less than 3 covers, use gradient fallback
-    if (!coverUrls || coverUrls.length < 3) {
-        return `
-            <div class="wishlist-mosaic-fallback"></div>
-            <div class="wishlist-mosaic-overlay"></div>
-        `;
-    }
-
-    // Cap covers per row to 15 for GPU performance (avoids hundreds of tiles)
-    if (coverUrls.length > 15) {
-        coverUrls = coverUrls.slice(0, 15);
-    }
-
-    const rows = 4;
-    let mosaicHTML = '<div class="wishlist-mosaic-background">';
-
-    // Calculate scroll speed based on number of images
-    // More images = longer duration to maintain consistent visual speed
-    // Minimum 40s to prevent scrolling too fast
-    const scrollSpeed = Math.max(40, coverUrls.length * 2);
-
-    for (let row = 0; row < rows; row++) {
-        const isEvenRow = row % 2 === 0;
-        const direction = isEvenRow ? 'left' : 'right';
-
-        // Randomize order for each row
-        const shuffledCovers = shuffleArray(coverUrls);
-
-        // Create row wrapper
-        mosaicHTML += `<div class="wishlist-mosaic-row-wrapper">`;
-        mosaicHTML += `<div class="wishlist-mosaic-row scroll-${direction}" style="--speed: ${scrollSpeed}s;">`;
-
-        // Generate tiles - duplicate 2 times for smooth infinite scroll
-        for (let duplicate = 0; duplicate < 2; duplicate++) {
-            for (let i = 0; i < shuffledCovers.length; i++) {
-                const coverUrl = shuffledCovers[i];
-                mosaicHTML += `
-                    <div class="wishlist-mosaic-tile">
-                        <div class="wishlist-mosaic-image" style="background-image: url('${coverUrl}');"></div>
-                    </div>
-                `;
-            }
-        }
-
-        mosaicHTML += '</div>'; // Close row
-        mosaicHTML += '</div>'; // Close wrapper
-    }
-
-    mosaicHTML += '</div>';
-    mosaicHTML += '<div class="wishlist-mosaic-overlay"></div>'; // Dark overlay for readability
-
-    return mosaicHTML;
-}
-
-/**
- * Open wishlist overview modal showing category breakdown
- * This is the NEW entry point for wishlist from dashboard
- */
-async function openWishlistOverviewModal() {
-    try {
-        showLoadingOverlay('Loading wishlist...');
-
-        // Fetch wishlist stats
-        const statsResponse = await fetch('/api/wishlist/stats');
-        const statsData = await statsResponse.json();
-
-        if (!statsResponse.ok) {
-            throw new Error(statsData.error || 'Failed to fetch wishlist stats');
-        }
-
-        const { singles, albums, total } = statsData;
-
-        if (total === 0) {
-            hideLoadingOverlay();
-            showToast('Wishlist is empty. No tracks to process.', 'info');
-            return;
-        }
-
-        // Fetch album covers for mosaic backgrounds
-        // Limit to 50 tracks per category (enough to get 20 unique covers while being efficient)
-        const albumCoversPromise = fetch('/api/wishlist/tracks?category=albums&limit=50').then(r => r.json());
-        const singleCoversPromise = fetch('/api/wishlist/tracks?category=singles&limit=50').then(r => r.json());
-
-        const [albumTracksData, singleTracksData] = await Promise.all([albumCoversPromise, singleCoversPromise]);
-
-        // Extract unique album covers (max 20 per category)
-        const albumCovers = extractUniqueCoverImages(albumTracksData.tracks || [], 20);
-        const singleCovers = extractUniqueCoverImages(singleTracksData.tracks || [], 20);
-
-        // Create modal if it doesn't exist
-        let modal = document.getElementById('wishlist-overview-modal');
-        if (!modal) {
-            modal = document.createElement('div');
-            modal.id = 'wishlist-overview-modal';
-            modal.className = 'modal-overlay';
-            document.body.appendChild(modal);
-        }
-
-        // Fetch current cycle
-        const cycleResponse = await fetch('/api/wishlist/cycle');
-        const cycleData = await cycleResponse.json();
-        const currentCycle = cycleData.cycle || 'albums';
-
-        // Format countdown timer
-        const nextRunSeconds = statsData.next_run_in_seconds || 0;
-        const countdownText = formatCountdownTime(nextRunSeconds);
-        const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
-        modal.innerHTML = `
-            <div class="modal-container playlist-modal">
-                <div class="playlist-modal-header">
-                    <div class="playlist-header-content">
-                        <h2>🎵 Wishlist Overview</h2>
-                        <div class="playlist-quick-info">
-                            <span class="playlist-track-count">${total} Total Tracks</span>
-                            <span class="playlist-owner" id="wishlist-next-auto-timer">Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}</span>
-                        </div>
-                    </div>
-                    <span class="playlist-modal-close" onclick="closeWishlistOverviewModal()">×</span>
-                </div>
-
-                <div class="playlist-modal-body">
-                    <div class="wishlist-category-grid">
-                        <!-- Albums/EPs Category -->
-                        <div class="wishlist-category-card ${currentCycle === 'albums' ? 'next-in-queue' : ''}" data-category="albums" onclick="selectWishlistCategory('albums')">
-                            ${generateMosaicBackground(albumCovers)}
-                            <div class="wishlist-category-content">
-                                <div class="wishlist-category-icon">💿</div>
-                                <div class="wishlist-category-title">Albums / EPs</div>
-                                <div class="wishlist-category-count">${albums} tracks</div>
-                                ${currentCycle === 'albums' ? '<div class="wishlist-category-badge">Next in Queue</div>' : ''}
-                            </div>
-                        </div>
-
-                        <!-- Singles Category -->
-                        <div class="wishlist-category-card ${currentCycle === 'singles' ? 'next-in-queue' : ''}" data-category="singles" onclick="selectWishlistCategory('singles')">
-                            ${generateMosaicBackground(singleCovers)}
-                            <div class="wishlist-category-content">
-                                <div class="wishlist-category-icon">🎵</div>
-                                <div class="wishlist-category-title">Singles</div>
-                                <div class="wishlist-category-count">${singles} tracks</div>
-                                ${currentCycle === 'singles' ? '<div class="wishlist-category-badge">Next in Queue</div>' : ''}
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Selected Category Track List (initially hidden) -->
-                    <div id="wishlist-category-tracks" class="wishlist-category-tracks" style="display: none;">
-                        <div class="wishlist-category-header">
-                            <button class="wishlist-back-btn" onclick="backToCategories()">← Back</button>
-                            <span id="wishlist-category-name" class="wishlist-category-name"></span>
-                            <button class="wishlist-select-all-btn" id="wishlist-select-all-btn" onclick="toggleWishlistSelectAll()">Select All</button>
-                        </div>
-                        <div class="wishlist-batch-bar" id="wishlist-batch-bar" style="display: none;">
-                            <span class="wishlist-batch-count" id="wishlist-batch-count">0 selected</span>
-                            <button class="playlist-modal-btn playlist-modal-btn-secondary wishlist-batch-remove-btn"
-                                    onclick="batchRemoveFromWishlist()">
-                                Remove Selected
-                            </button>
-                        </div>
-                        <div id="wishlist-tracks-list" class="playlist-tracks-scroll">
-                            <div class="loading-indicator">Loading tracks...</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="playlist-modal-footer">
-                    <div class="playlist-modal-footer-left">
-                        <button class="playlist-modal-btn playlist-modal-btn-danger" onclick="clearEntireWishlist()">
-                            🗑️ Clear Wishlist
-                        </button>
-                        <button class="playlist-modal-btn playlist-modal-btn-warning" onclick="cleanupWishlistOverview()">
-                            🧹 Cleanup Wishlist
-                        </button>
-                    </div>
-                    <div class="playlist-modal-footer-right">
-                        <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeWishlistOverviewModal()">Close</button>
-                        <button id="wishlist-download-btn" class="playlist-modal-btn playlist-modal-btn-primary" style="display: none;" onclick="downloadSelectedCategory()">
-                            Download Selection
-                        </button>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        modal.style.display = 'flex';
-        hideLoadingOverlay();
-
-        // Start countdown timer update interval
-        startWishlistCountdownTimer(currentCycle, nextRunSeconds);
-
-    } catch (error) {
-        console.error('Error opening wishlist overview:', error);
-        showToast(`Failed to load wishlist: ${error.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-function startWishlistCountdownTimer(currentCycle, initialSeconds) {
-    // Clear any existing interval
-    if (wishlistCountdownInterval) {
-        clearInterval(wishlistCountdownInterval);
-    }
-
-    let remainingSeconds = initialSeconds;
-    const nextCycleText = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
-    wishlistCountdownInterval = setInterval(async () => {
-        remainingSeconds--;
-
-        // Check if auto-processing has started (every 2 seconds to avoid overwhelming backend)
-        if (remainingSeconds % 2 === 0 || remainingSeconds <= 0) {
-            // Use WebSocket data if available, otherwise fall back to HTTP
-            if (socketConnected && _lastWishlistStats) {
-                const data = _lastWishlistStats;
-                if (data.is_auto_processing) {
-                    if (!_wishlistAutoProcessingNotified) {
-                        navigateToPage('active-downloads');
-                        showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
-                        _wishlistAutoProcessingNotified = true;
-                    }
-                    return;
-                }
-                if (remainingSeconds <= 0) {
-                    remainingSeconds = data.next_run_in_seconds || 0;
-                    const timerElement = document.getElementById('wishlist-next-auto-timer');
-                    if (timerElement) {
-                        const countdownText = formatCountdownTime(remainingSeconds);
-                        timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
-                    }
-                }
-            } else {
-                try {
-                    const response = await fetch('/api/wishlist/stats');
-                    const data = await response.json();
-
-                    // AUTO-CLOSE DETECTION: If auto-processing started, close modal and notify user (once)
-                    if (data.is_auto_processing) {
-                        if (!_wishlistAutoProcessingNotified) {
-                            console.log('🤖 [Wishlist] Auto-processing detected, closing overview modal');
-                            closeWishlistOverviewModal();
-                            showToast('Wishlist auto-processing started. View progress in Download Manager.', 'info');
-                            _wishlistAutoProcessingNotified = true;
-                        }
-                        return; // Exit interval
-                    }
-
-                    // Update remaining seconds if timer expired
-                    if (remainingSeconds <= 0) {
-                        remainingSeconds = data.next_run_in_seconds || 0;
-
-                        // Also update cycle in case it changed
-                        const newCycle = data.current_cycle || 'albums';
-                        const newCycleText = newCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
-                        const timerElement = document.getElementById('wishlist-next-auto-timer');
-                        if (timerElement) {
-                            const countdownText = formatCountdownTime(remainingSeconds);
-                            timerElement.textContent = `Next Auto: ${newCycleText}${countdownText ? ' in ' + countdownText : ''}`;
-                        }
-                    }
-                } catch (error) {
-                    console.debug('Error updating wishlist countdown:', error);
-                }
-            } // end else (HTTP fallback)
-        }
-
-        // Always update the display countdown
-        const timerElement = document.getElementById('wishlist-next-auto-timer');
-        if (timerElement) {
-            const countdownText = formatCountdownTime(remainingSeconds);
-            timerElement.textContent = `Next Auto: ${nextCycleText}${countdownText ? ' in ' + countdownText : ''}`;
-        }
-    }, 1000); // Update every second
-}
-
-function closeWishlistOverviewModal() {
-    console.log('🚪 closeWishlistOverviewModal() called');
-
-    // Stop countdown timer
-    if (wishlistCountdownInterval) {
-        clearInterval(wishlistCountdownInterval);
-        wishlistCountdownInterval = null;
-    }
-
-    const modal = document.getElementById('wishlist-overview-modal');
-    console.log('Modal element:', modal);
-    if (modal) {
-        modal.style.display = 'none';
-        console.log('Modal display set to none');
-        // Also remove from DOM to ensure clean state
-        modal.remove();
-        console.log('Modal removed from DOM');
-    } else {
-        console.warn('Modal element not found');
-    }
-    window.selectedWishlistCategory = null;
-    console.log('✅ Modal closed');
-}
-
-async function cleanupWishlistOverview() {
-    console.log('🧹 cleanupWishlistOverview() called');
-
-    if (!await showConfirmDialog({ title: 'Cleanup Wishlist', message: 'This will remove all tracks from the wishlist that already exist in your library. Continue?' })) {
-        return;
-    }
-
-    try {
-        showLoadingOverlay('Cleaning up wishlist...');
-
-        const response = await fetch('/api/wishlist/cleanup', {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            const removedCount = result.removed_count || 0;
-
-            if (removedCount > 0) {
-                showToast(`Cleanup complete! Removed ${removedCount} tracks that already exist in your library`, 'success');
-            } else {
-                showToast('No tracks needed to be removed', 'info');
-            }
-
-            // Check if wishlist is now empty
-            const statsResponse = await fetch('/api/wishlist/stats');
-            const statsData = await statsResponse.json();
-
-            if (statsData.total === 0) {
-                // Wishlist is empty, refresh the page to show empty state
-                wishlistPageState.isInitialized = false;
-                await initializeWishlistPage();
-                await updateWishlistCount();
-            } else {
-                // Wishlist still has items, refresh the page to show updated counts
-                wishlistPageState.isInitialized = false;
-                await initializeWishlistPage();
-            }
-        } else {
-            showToast(`Failed to cleanup wishlist: ${result.error || 'Unknown error'}`, 'error');
-        }
-
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error('Error cleaning up wishlist:', error);
-        showToast(`Failed to cleanup wishlist: ${error.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-async function clearEntireWishlist() {
-    console.log('🗑️ clearEntireWishlist() called');
-
-    if (!await showConfirmDialog({ title: 'Clear Wishlist', message: 'WARNING: This will permanently delete ALL tracks from your wishlist.\n\nThis action cannot be undone.\n\nAre you sure you want to continue?', confirmText: 'Clear All', destructive: true })) {
-        console.log('User cancelled confirmation');
-        return;
-    }
-
-    console.log('User confirmed, proceeding with clear...');
-
-    try {
-        showLoadingOverlay('Clearing wishlist...');
-        console.log('Loading overlay shown');
-
-        const response = await fetch('/api/wishlist/clear', {
-            method: 'POST'
-        });
-        console.log('API response received:', response.status);
-
-        const result = await response.json();
-        console.log('Clear wishlist response:', result);
-
-        hideLoadingOverlay();
-        console.log('Loading overlay hidden');
-
-        if (result.success) {
-            console.log('Clear was successful, showing toast...');
-            showToast('Wishlist cleared successfully', 'success');
-
-            console.log('Updating wishlist button count...');
-            await updateWishlistCount();
-
-            console.log('Refreshing wishlist page...');
-            wishlistPageState.isInitialized = false;
-            await initializeWishlistPage();
-        } else {
-            console.error('Clear failed:', result.error);
-            showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error clearing wishlist:', error);
-        hideLoadingOverlay();
-        showToast(`Failed to clear wishlist: ${error.message}`, 'error');
-    }
-}
-
-async function selectWishlistCategory(category) {
-    try {
-        window.selectedWishlistCategory = category;
-
-        const tracksList = document.getElementById('wishlist-tracks-list');
-        const categoryTracksSection = document.getElementById('wishlist-category-tracks');
-        const nebulaEl = document.getElementById('wishlist-nebula');
-        const downloadBtn = document.getElementById('wishlist-download-btn');
-        const categoryName = document.getElementById('wishlist-category-name');
-
-        if (nebulaEl) nebulaEl.style.display = 'none';
-        categoryTracksSection.style.display = 'block';
-        downloadBtn.style.display = 'inline-block';
-        categoryName.textContent = category === 'albums' ? 'Albums / EPs' : 'Singles';
-
-        tracksList.innerHTML = '<div class="loading-indicator">Loading tracks...</div>';
-
-        const _wlPageSize = window._wlNextLimit || 200;
-        window._wlNextLimit = null;
-        const response = await fetch(`/api/wishlist/tracks?category=${category}&limit=${_wlPageSize}`);
-        const data = await response.json();
-
-        if (!response.ok) throw new Error(data.error || 'Failed to fetch tracks');
-
-        const tracks = data.tracks || [];
-        const totalAvailable = data.total || tracks.length;
-        window._wlCategory = category;
-        window._wlOffset = tracks.length;
-        window._wlTotal = totalAvailable;
-
-        if (tracks.length === 0) {
-            tracksList.innerHTML = '<div class="empty-state">No tracks in this category</div>';
-            return;
-        }
-
-        // For Albums/EPs, group by album
-        if (category === 'albums') {
-            const albumGroups = {};
-
-            tracks.forEach(track => {
-                let spotifyData = track.spotify_data;
-                if (typeof spotifyData === 'string') {
-                    try {
-                        spotifyData = JSON.parse(spotifyData);
-                    } catch (e) {
-                        spotifyData = null;
-                    }
-                }
-
-                const rawAlbum = spotifyData?.album;
-                const albumName = (typeof rawAlbum === 'string' ? rawAlbum : rawAlbum?.name) || 'Unknown Album';
-
-                // Handle both object format {name: '...'} and sanitized string format
-                let artistName = 'Unknown Artist';
-                let artistId = null;
-                if (spotifyData?.artists?.[0]?.name) {
-                    // Object format from Spotify API
-                    artistName = spotifyData.artists[0].name;
-                    artistId = spotifyData.artists[0].id;
-                } else if (spotifyData?.artists?.[0] && typeof spotifyData.artists[0] === 'string') {
-                    // Sanitized string format
-                    artistName = spotifyData.artists[0];
-                } else if (Array.isArray(track.artists) && track.artists.length > 0) {
-                    // Fallback to track.artists
-                    if (typeof track.artists[0] === 'string') {
-                        artistName = track.artists[0];
-                    } else if (track.artists[0]?.name) {
-                        artistName = track.artists[0].name;
-                        artistId = track.artists[0].id;
-                    }
-                }
-
-                const albumImage = spotifyData?.album?.images?.[0]?.url || '';
-
-                // Use album ID if available, otherwise create unique key from album + artist
-                // Sanitize the ID to remove all special characters that could break DOM IDs or CSS selectors
-                const albumId = spotifyData?.album?.id || `${albumName}_${artistName}`
-                    .replace(/[^a-zA-Z0-9\s_-]/g, '')  // Remove all special chars except spaces, underscores, hyphens
-                    .replace(/\s+/g, '_')               // Replace spaces with underscores
-                    .toLowerCase();
-
-                if (!albumGroups[albumId]) {
-                    albumGroups[albumId] = {
-                        albumName,
-                        artistName,
-                        artistId,
-                        albumImage,
-                        tracks: []
-                    };
-                }
-
-                const spotifyTrackId = track.spotify_track_id || track.id || '';
-
-                albumGroups[albumId].tracks.push({
-                    name: track.name || 'Unknown Track',
-                    artistName,
-                    trackNumber: spotifyData?.track_number || 0,
-                    spotifyTrackId
-                });
-            });
-
-            // Render album cards
-            let albumsHTML = '<div class="wishlist-album-grid">';
-            Object.entries(albumGroups).forEach(([albumId, albumData]) => {
-                // Sort tracks by track number
-                albumData.tracks.sort((a, b) => a.trackNumber - b.trackNumber);
-
-                const tracksListHTML = albumData.tracks.map(track => `
-                    <div class="wishlist-album-track wishlist-track-item">
-                        <label class="wishlist-checkbox-wrapper">
-                            <input type="checkbox" class="wishlist-select-cb"
-                                   data-track-id="${track.spotifyTrackId}">
-                            <span class="wishlist-checkbox-custom"></span>
-                        </label>
-                        <span class="wishlist-album-track-name">${track.name}</span>
-                        <button class="wishlist-delete-btn wishlist-delete-btn-small" data-track-id="${track.spotifyTrackId}" title="Remove from wishlist">
-                            🗑️
-                        </button>
-                    </div>
-                `).join('');
-
-                // Handle missing album images with a placeholder
-                const albumImageStyle = albumData.albumImage
-                    ? `background-image: url('${albumData.albumImage}')`
-                    : `background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%); display: flex; align-items: center; justify-content: center; font-size: 40px;`;
-                const albumImageContent = albumData.albumImage ? '' : '<span style="opacity: 0.3;">💿</span>';
-
-                albumsHTML += `
-                    <div class="wishlist-album-card">
-                        <div class="wishlist-album-header" data-album-id="${albumId}">
-                            <label class="wishlist-checkbox-wrapper">
-                                <input type="checkbox" class="wishlist-album-select-all-cb"
-                                       data-album-id="${albumId}">
-                                <span class="wishlist-checkbox-custom"></span>
-                            </label>
-                            <div class="wishlist-album-image" style="${albumImageStyle}">${albumImageContent}</div>
-                            <div class="wishlist-album-info">
-                                <div class="wishlist-album-name">${albumData.albumName}</div>
-                                <div class="wishlist-album-artist">${albumData.artistName}</div>
-                                <div class="wishlist-album-track-count">${albumData.tracks.length} track${albumData.tracks.length !== 1 ? 's' : ''}</div>
-                            </div>
-                            <button class="wishlist-delete-btn wishlist-delete-album-btn" data-album-id="${albumId}" title="Remove all tracks from album">
-                                🗑️
-                            </button>
-                            <div class="wishlist-album-expand-icon" id="expand-icon-${albumId}">▼</div>
-                        </div>
-                        <div class="wishlist-album-tracks" id="tracks-${albumId}" style="display: none;">
-                            ${tracksListHTML}
-                        </div>
-                    </div>
-                `;
-            });
-            albumsHTML += '</div>';
-
-            tracksList.innerHTML = albumsHTML;
-            if (totalAvailable > tracks.length) {
-                tracksList.insertAdjacentHTML('beforeend',
-                    `<button class="wishlist-load-more-btn" onclick="loadMoreWishlistTracks()">Load More (${tracks.length} of ${totalAvailable})</button>`);
-            }
-            _attachWishlistDelegation(tracksList);
-
-        } else {
-            // For Singles, show list with album images
-            let tracksHTML = '';
-            tracks.forEach((track, index) => {
-                const trackName = track.name || 'Unknown Track';
-
-                let spotifyData = track.spotify_data;
-                if (typeof spotifyData === 'string') {
-                    try {
-                        spotifyData = JSON.parse(spotifyData);
-                    } catch (e) {
-                        spotifyData = null;
-                    }
-                }
-
-                let artistName = 'Unknown Artist';
-                if (spotifyData?.artists?.[0]?.name) {
-                    artistName = spotifyData.artists[0].name;
-                } else if (Array.isArray(track.artists) && track.artists.length > 0) {
-                    if (typeof track.artists[0] === 'string') {
-                        artistName = track.artists[0];
-                    } else if (track.artists[0]?.name) {
-                        artistName = track.artists[0].name;
-                    }
-                }
-
-                let albumName = 'Unknown Album';
-                if (spotifyData?.album?.name) {
-                    albumName = spotifyData.album.name;
-                } else if (typeof track.album === 'string') {
-                    albumName = track.album;
-                } else if (track.album?.name) {
-                    albumName = track.album.name;
-                }
-
-                const albumImage = spotifyData?.album?.images?.[0]?.url || '';
-                const spotifyTrackId = track.spotify_track_id || track.id || '';
-
-                tracksHTML += `
-                    <div class="playlist-track-item-with-image wishlist-track-item">
-                        <label class="wishlist-checkbox-wrapper">
-                            <input type="checkbox" class="wishlist-select-cb"
-                                   data-track-id="${spotifyTrackId}">
-                            <span class="wishlist-checkbox-custom"></span>
-                        </label>
-                        <div class="playlist-track-image" style="background-image: url('${albumImage}')"></div>
-                        <div class="playlist-track-info">
-                            <div class="playlist-track-name">${trackName}</div>
-                            <div class="playlist-track-artist">${artistName} • ${albumName}</div>
-                        </div>
-                        <button class="wishlist-delete-btn" data-track-id="${spotifyTrackId}" title="Remove from wishlist">
-                            🗑️
-                        </button>
-                    </div>
-                `;
-            });
-
-            tracksList.innerHTML = tracksHTML;
-            if (totalAvailable > tracks.length) {
-                tracksList.insertAdjacentHTML('beforeend',
-                    `<button class="wishlist-load-more-btn" onclick="loadMoreWishlistTracks()">Load More (${tracks.length} of ${totalAvailable})</button>`);
-            }
-            _attachWishlistDelegation(tracksList);
-        }
-
-    } catch (error) {
-        console.error('Error loading category tracks:', error);
-        showToast(`Failed to load tracks: ${error.message}`, 'error');
-    }
-}
-
-async function loadMoreWishlistTracks() {
-    const btn = document.querySelector('.wishlist-load-more-btn');
-    if (btn) { btn.textContent = 'Loading...'; btn.disabled = true; }
-    // Increase page size and reload
-    window._wlOffset = (window._wlOffset || 200) + 200;
-    // Override the page size for this reload
-    window._wlNextLimit = window._wlOffset;
-    selectWishlistCategory(window._wlCategory);
-}
-
-function _attachWishlistDelegation(container) {
-    // Single click handler for all wishlist album/track interactions
-    container.addEventListener('click', (e) => {
-        const target = e.target;
-
-        // Skip checkbox wrapper clicks — handled by change listener
-        if (target.closest('.wishlist-checkbox-wrapper')) return;
-
-        // Album header click (expand/collapse)
-        const header = target.closest('.wishlist-album-header');
-        if (header && !target.closest('.wishlist-delete-album-btn')) {
-            toggleAlbumTracks(header.dataset.albumId);
-            return;
-        }
-
-        // Album delete button
-        const albumDelBtn = target.closest('.wishlist-delete-album-btn');
-        if (albumDelBtn) {
-            e.stopPropagation();
-            removeAlbumFromWishlist(albumDelBtn.dataset.albumId, e);
-            return;
-        }
-
-        // Track delete button
-        const trackDelBtn = target.closest('.wishlist-delete-btn');
-        if (trackDelBtn && trackDelBtn.dataset.trackId) {
-            e.stopPropagation();
-            removeTrackFromWishlist(trackDelBtn.dataset.trackId, e);
-            return;
-        }
-    });
-
-    // Separate change handler for checkboxes (more reliable than click for inputs)
-    container.addEventListener('change', (e) => {
-        const target = e.target;
-        if (target.classList.contains('wishlist-album-select-all-cb')) {
-            toggleWishlistAlbumSelection(target.dataset.albumId, target.checked);
-        } else if (target.classList.contains('wishlist-select-cb')) {
-            updateWishlistBatchBar();
-        }
-    });
-}
-
-function backToCategories() {
-    _nebulaBack();
-}
-
-function toggleAlbumTracks(albumId) {
-    const tracksElement = document.getElementById(`tracks-${albumId}`);
-    const expandIcon = document.getElementById(`expand-icon-${albumId}`);
-
-    if (tracksElement.style.display === 'none') {
-        tracksElement.style.display = 'block';
-        expandIcon.textContent = '▲';
-    } else {
-        tracksElement.style.display = 'none';
-        expandIcon.textContent = '▼';
-    }
-}
-
-/**
- * Get all checked wishlist track checkboxes
- */
-function getCheckedWishlistTracks() {
-    return Array.from(document.querySelectorAll('.wishlist-select-cb:checked'));
-}
-
-/**
- * Toggle select all / deselect all tracks in the current wishlist category
- */
-function toggleWishlistSelectAll() {
-    const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
-    const albumCheckboxes = document.querySelectorAll('.wishlist-album-select-all-cb');
-    const btn = document.getElementById('wishlist-select-all-btn');
-    const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
-
-    const newState = !allChecked;
-
-    allCheckboxes.forEach(cb => { cb.checked = newState; });
-    albumCheckboxes.forEach(cb => { cb.checked = newState; });
-
-    // Expand all albums when selecting all
-    if (newState) {
-        document.querySelectorAll('.wishlist-album-tracks').forEach(el => {
-            el.style.display = 'block';
-        });
-        document.querySelectorAll('[id^="expand-icon-"]').forEach(icon => {
-            icon.textContent = '▲';
-        });
-    }
-
-    if (btn) btn.textContent = newState ? 'Deselect All' : 'Select All';
-    updateWishlistBatchBar();
-}
-
-/**
- * Update the wishlist batch action bar based on checkbox selection
- */
-function updateWishlistBatchBar() {
-    const checked = getCheckedWishlistTracks();
-    const bar = document.getElementById('wishlist-batch-bar');
-    const countEl = document.getElementById('wishlist-batch-count');
-
-    if (!bar || !countEl) return;
-
-    if (checked.length > 0) {
-        bar.style.display = 'flex';
-        countEl.textContent = `${checked.length} selected`;
-    } else {
-        bar.style.display = 'none';
-    }
-
-    // Sync the Select All button text
-    const btn = document.getElementById('wishlist-select-all-btn');
-    if (btn) {
-        const allCheckboxes = document.querySelectorAll('.wishlist-select-cb');
-        const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
-        btn.textContent = allChecked ? 'Deselect All' : 'Select All';
-    }
-}
-
-/**
- * Toggle all track checkboxes within an album when album header checkbox is clicked
- */
-function toggleWishlistAlbumSelection(albumId, checked) {
-    const tracksContainer = document.getElementById(`tracks-${albumId}`);
-    if (tracksContainer) {
-        // Expand the album tracks if selecting
-        if (checked) {
-            tracksContainer.style.display = 'block';
-            const expandIcon = document.getElementById(`expand-icon-${albumId}`);
-            if (expandIcon) expandIcon.textContent = '▲';
-        }
-        tracksContainer.querySelectorAll('.wishlist-select-cb').forEach(cb => {
-            cb.checked = checked;
-        });
-    }
-    updateWishlistBatchBar();
-}
-
-/**
- * Batch remove selected tracks from wishlist
- */
-async function batchRemoveFromWishlist() {
-    const checked = getCheckedWishlistTracks();
-    if (checked.length === 0) return;
-
-    const count = checked.length;
-    const confirmed = await showConfirmationModal(
-        'Remove Tracks',
-        `Remove ${count} track${count !== 1 ? 's' : ''} from your wishlist?`,
-        '🗑️'
-    );
-
-    if (!confirmed) return;
-
-    const trackIds = checked.map(cb => cb.getAttribute('data-track-id'));
-
-    try {
-        const response = await fetch('/api/wishlist/remove-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ spotify_track_ids: trackIds })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(`Removed ${data.removed} track(s) from wishlist`, 'success');
-
-            // Reload the current category to refresh the list
-            if (window.selectedWishlistCategory) {
-                await selectWishlistCategory(window.selectedWishlistCategory);
-            }
-
-            // Update wishlist count in sidebar
-            await updateWishlistCount();
-        } else {
-            showToast(`Failed to remove tracks: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error batch removing from wishlist:', error);
-        showToast('Failed to remove tracks from wishlist', 'error');
-    }
-}
-
-function showConfirmationModal(title, message, icon = '⚠️') {
-    return new Promise((resolve) => {
-        // Create modal if it doesn't exist
-        let modal = document.getElementById('confirmation-modal-overlay');
-        if (!modal) {
-            modal = document.createElement('div');
-            modal.id = 'confirmation-modal-overlay';
-            modal.className = 'confirmation-modal-overlay';
-            document.body.appendChild(modal);
-        }
-
-        // Set modal content
-        modal.innerHTML = `
-            <div class="confirmation-modal">
-                <div class="confirmation-modal-icon">${icon}</div>
-                <div class="confirmation-modal-title">${title}</div>
-                <div class="confirmation-modal-message">${message}</div>
-                <div class="confirmation-modal-buttons">
-                    <button class="confirmation-modal-btn confirmation-modal-btn-cancel" id="confirm-cancel">Cancel</button>
-                    <button class="confirmation-modal-btn confirmation-modal-btn-confirm" id="confirm-yes">Yes, Remove</button>
-                </div>
-            </div>
-        `;
-
-        // Show modal with animation
-        setTimeout(() => {
-            modal.classList.add('show');
-        }, 10);
-
-        // Escape key handler - defined outside so we can remove it
-        const handleEscape = (e) => {
-            if (e.key === 'Escape') {
-                handleCancel();
-            }
-        };
-
-        // Handle button clicks
-        const handleCancel = () => {
-            document.removeEventListener('keydown', handleEscape);
-            modal.classList.remove('show');
-            setTimeout(() => {
-                modal.remove();
-            }, 200);
-            resolve(false);
-        };
-
-        const handleConfirm = () => {
-            document.removeEventListener('keydown', handleEscape);
-            modal.classList.remove('show');
-            setTimeout(() => {
-                modal.remove();
-            }, 200);
-            resolve(true);
-        };
-
-        document.getElementById('confirm-cancel').addEventListener('click', handleCancel);
-        document.getElementById('confirm-yes').addEventListener('click', handleConfirm);
-
-        // Close on overlay click
-        modal.addEventListener('click', (e) => {
-            if (e.target === modal) {
-                handleCancel();
-            }
-        });
-
-        // Add Escape key listener
-        document.addEventListener('keydown', handleEscape);
-    });
-}
-
-async function removeTrackFromWishlist(spotifyTrackId, event) {
-    // Stop event propagation to prevent triggering parent click handlers
-    if (event) {
-        event.stopPropagation();
-    }
-
-    const confirmed = await showConfirmationModal(
-        'Remove Track',
-        'Are you sure you want to remove this track from your wishlist?',
-        '🗑️'
-    );
-
-    if (!confirmed) {
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/wishlist/remove-track', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ spotify_track_id: spotifyTrackId })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast('Track removed from wishlist', 'success');
-
-            // Reload the current category to refresh the list
-            if (window.selectedWishlistCategory) {
-                await selectWishlistCategory(window.selectedWishlistCategory);
-            }
-
-            // Update wishlist count in sidebar
-            await updateWishlistCount();
-        } else {
-            showToast(`Failed to remove track: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error removing track from wishlist:', error);
-        showToast('Failed to remove track from wishlist', 'error');
-    }
-}
-
-async function removeAlbumFromWishlist(albumId, event) {
-    // Stop event propagation to prevent triggering parent click handlers
-    if (event) {
-        event.stopPropagation();
-    }
-
-    const confirmed = await showConfirmationModal(
-        'Remove Album',
-        'Are you sure you want to remove all tracks from this album from your wishlist?',
-        '💿'
-    );
-
-    if (!confirmed) {
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/wishlist/remove-album', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ album_id: albumId })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(`Removed ${data.removed_count} track(s) from wishlist`, 'success');
-
-            // Reload the current category to refresh the list
-            if (window.selectedWishlistCategory) {
-                await selectWishlistCategory(window.selectedWishlistCategory);
-            }
-
-            // Update wishlist count in sidebar
-            await updateWishlistCount();
-        } else {
-            showToast(`Failed to remove album: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error removing album from wishlist:', error);
-        showToast('Failed to remove album from wishlist', 'error');
-    }
-}
-
-async function downloadSelectedCategory() {
-    const category = window.selectedWishlistCategory;
-    if (!category) {
-        showToast('No category selected', 'error');
-        return;
-    }
-
-    // Collect checked track IDs
-    const checkedBoxes = document.querySelectorAll('.wishlist-select-cb:checked');
-    const selectedTrackIds = new Set(Array.from(checkedBoxes).map(cb => cb.dataset.trackId).filter(Boolean));
-
-    await openDownloadMissingWishlistModal(category, selectedTrackIds.size > 0 ? selectedTrackIds : null);
-}
-
-async function openDownloadMissingWishlistModal(category = null, selectedTrackIds = null) {
-    showLoadingOverlay('Loading wishlist...');
-    const playlistId = "wishlist"; // Use a consistent ID for wishlist
-
-    // Check if a process is already active for the wishlist
-    if (activeDownloadProcesses[playlistId]) {
-        console.log(`Modal for wishlist already exists. Showing it.`);
-        const process = activeDownloadProcesses[playlistId];
-        if (process.modalElement) {
-            // Show helpful message if it's a completed process
-            if (process.status === 'complete') {
-                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-            }
-            process.modalElement.style.display = 'flex';
-            WishlistModalState.setVisible(); // Track that modal is now visible
-        }
-        hideLoadingOverlay(); // Always hide overlay before returning
-        return; // Don't create a new one
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for wishlist${category ? ' (' + category + ')' : ''}`);
-
-    // Store category in global state for when process starts
-    window.currentWishlistCategory = category;
-
-    // Fetch actual wishlist tracks from the server
-    let tracks;
-    try {
-        // Build API URL with optional category filter
-        const apiUrl = category ? `/api/wishlist/tracks?category=${category}` : '/api/wishlist/tracks';
-
-        const response = await fetch('/api/wishlist/count');
-        const countData = await response.json();
-        if (countData.count === 0) {
-            showToast('Wishlist is empty. No tracks to download.', 'info');
-            hideLoadingOverlay();
-            return;
-        }
-
-        // Fetch the actual wishlist tracks for display (filtered by category if specified)
-        const tracksResponse = await fetch(apiUrl);
-        if (!tracksResponse.ok) {
-            throw new Error('Failed to fetch wishlist tracks');
-        }
-        const tracksData = await tracksResponse.json();
-        tracks = tracksData.tracks || [];
-
-        // Filter to only selected tracks if user made a selection
-        if (selectedTrackIds && selectedTrackIds.size > 0) {
-            tracks = tracks.filter(t => selectedTrackIds.has(t.id) || selectedTrackIds.has(t.spotify_track_id));
-            console.log(`📥 Filtered to ${tracks.length} selected tracks (from ${tracksData.tracks?.length || 0} total)`);
-        }
-
-    } catch (error) {
-        showToast(`Failed to fetch wishlist data: ${error.message}`, 'error');
-        hideLoadingOverlay();
-        return;
-    }
-
-    currentPlaylistTracks = tracks;
-    currentModalPlaylistId = playlistId;
-
-    let modal = document.createElement('div');
-    modal.id = `download-missing-modal-${playlistId}`; // Unique ID
-    modal.className = 'download-missing-modal'; // Use class for styling
-    modal.style.display = 'none'; // Start hidden
-    document.body.appendChild(modal);
-
-    // Register the new process in our global state tracker
-    activeDownloadProcesses[playlistId] = {
-        status: 'idle', // idle, running, complete, cancelled
-        modalElement: modal,
-        poller: null,
-        batchId: null,
-        playlist: { id: playlistId, name: "Wishlist" }, // Create a pseudo-playlist object
-        tracks: tracks
-    };
-
-    // Generate hero section for wishlist context
-    const heroContext = {
-        type: 'wishlist',
-        trackCount: tracks.length,
-        playlistId: playlistId
-    };
-
-    modal.innerHTML = `
-        <div class="download-missing-modal-content" data-context="wishlist">
-            <div class="download-missing-modal-header">
-                ${generateDownloadModalHeroSection(heroContext)}
-            </div>
-
-            <div class="download-missing-modal-body">
-                <div class="download-progress-section">
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            🔍 Library Analysis
-                            <span id="analysis-progress-text-${playlistId}">Ready to start</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill analysis" id="analysis-progress-fill-${playlistId}"></div>
-                        </div>
-                    </div>
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            ⏬ Downloads
-                            <span id="download-progress-text-${playlistId}">Waiting for analysis</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill download" id="download-progress-fill-${playlistId}"></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="download-tracks-section">
-                    <div class="download-tracks-header">
-                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
-                    </div>
-                    <div class="download-tracks-table-container">
-                        <table class="download-tracks-table">
-                            <thead>
-                                <tr>
-                                    <th>#</th>
-                                    <th>Track</th>
-                                    <th>Artist</th>
-                                    <th>Library Match</th>
-                                    <th>Download Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="download-tracks-tbody-${playlistId}">
-                                ${tracks.map((track, index) => `
-                                    <tr data-track-index="${index}">
-                                        <td class="track-number">${index + 1}</td>
-                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
-                                        <td class="track-match-status match-checking" id="match-${playlistId}-${index}">🔍 Pending</td>
-                                        <td class="track-download-status" id="download-${playlistId}-${index}">-</td>
-                                        <td class="track-actions" id="actions-${playlistId}-${index}">-</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="download-missing-modal-footer">
-                <div class="download-phase-controls">
-                    <div class="force-download-toggle-container" style="margin-bottom: 0px;">
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="force-download-all-${playlistId}">
-                            <span>Force Download All</span>
-                        </label>
-                    </div>
-                    <button class="download-control-btn primary" id="begin-analysis-btn-${playlistId}" onclick="startWishlistMissingTracksProcess('${playlistId}')">
-                        Begin Analysis
-                    </button>
-                    <button class="download-control-btn danger" id="cancel-all-btn-${playlistId}" onclick="cancelAllOperations('${playlistId}')" style="display: none;">
-                        Cancel All
-                    </button>
-                    <button class="download-control-btn secondary" id="cleanup-wishlist-btn-${playlistId}" onclick="cleanupWishlist('${playlistId}')" style="margin-left: 10px;">
-                        🧹 Cleanup Wishlist
-                    </button>
-                    <button class="download-control-btn danger" id="clear-wishlist-btn-${playlistId}" onclick="clearWishlist('${playlistId}')" style="margin-left: 10px;">
-                        🗑️ Clear Wishlist
-                    </button>
-                </div>
-                <div class="modal-close-section">
-                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${playlistId}')">Close</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    applyProgressiveTrackRendering(playlistId, tracks.length);
-    modal.style.display = 'flex';
-    hideLoadingOverlay();
-    WishlistModalState.setVisible(); // Track that new wishlist modal is now visible
-}
-
-async function startWishlistMissingTracksProcess(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    console.log(`🚀 Kicking off wishlist missing tracks process`);
-    try {
-        process.status = 'running';
-        // Note: Wishlist processes don't affect sync page refresh button state
-        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
-        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
-
-        // Check if force download toggle is enabled
-        const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
-        const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
-
-        // Hide the force download toggle during processing
-        const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
-        if (forceToggleContainer) {
-            forceToggleContainer.style.display = 'none';
-        }
-
-        // Extract track IDs from what the user is currently seeing in the modal
-        // This prevents race conditions where wishlist changes between modal open and analysis start
-        const trackIds = process.tracks ? process.tracks.map(t => t.spotify_track_id || t.id).filter(id => id) : null;
-        console.log(`🎯 [Wishlist] Sending ${trackIds ? trackIds.length : 'all'} specific track IDs to prevent race condition`);
-
-        const response = await fetch('/api/wishlist/download_missing', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                force_download_all: forceDownloadAll,
-                category: window.currentWishlistCategory,  // Keep for backward compat
-                track_ids: trackIds  // NEW: Send exact tracks to process
-            })
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            // Special handling for auto-processing conflict
-            if (response.status === 409) {
-                console.log('🤖 [Wishlist] Auto-processing is running, redirecting to download manager');
-                showToast('Wishlist auto-processing is already running. Opening Download Manager...', 'info');
-
-                // Close wishlist modal and show download manager
-                const wishlistModal = document.getElementById('download-modal-wishlist');
-                if (wishlistModal) {
-                    wishlistModal.remove();
-                }
-                delete activeDownloadProcesses[playlistId];
-
-                // Open download manager to show active batch
-                setTimeout(() => {
-                    const downloadManager = document.getElementById('download-manager-modal');
-                    if (downloadManager) {
-                        downloadManager.style.display = 'flex';
-                    } else {
-                        openDownloadManagerModal();
-                    }
-                }, 300);
-                return;
-            }
-            // Special handling for rate limit
-            if (response.status === 429) {
-                throw new Error(`${data.error} Try closing some other download processes first.`);
-            }
-            throw new Error(data.error);
-        }
-
-        process.batchId = data.batch_id;
-        console.log(`✅ Wishlist process started successfully. Batch ID: ${data.batch_id}`);
-
-        // Start polling for updates
-        startModalDownloadPolling(playlistId);
-
-    } catch (error) {
-        console.error('Error starting wishlist missing tracks process:', error);
-        showToast(`Error: ${error.message}`, 'error');
-
-        // Reset UI state on error
-        process.status = 'idle';
-        // Note: Wishlist processes don't affect sync page refresh button state
-        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'inline-block';
-        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
-
-        // Show the force download toggle again
-        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
-        if (forceToggleContainer) {
-            forceToggleContainer.style.display = 'flex';
-        }
-    }
-}
-
-async function startMissingTracksProcess(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    console.log(`🚀 Kicking off unified missing tracks process for playlist: ${playlistId}`);
-    try {
-        process.status = 'running';
-        updatePlaylistCardUI(playlistId);
-        updateRefreshButtonState();
-
-        // Set album to downloading status if this is an artist album
-        if (playlistId.startsWith('artist_album_')) {
-            // Format: artist_album_{artist.id}_{album.id}
-            const parts = playlistId.split('_');
-            if (parts.length >= 4) {
-                const albumId = parts.slice(3).join('_'); // In case album ID has underscores
-                const totalTracks = process.tracks ? process.tracks.length : 0;
-                setAlbumDownloadingStatus(albumId, 0, totalTracks);
-                console.log(`🔄 Set album ${albumId} to downloading status (0/${totalTracks} tracks)`);
-                console.log(`🔍 Virtual playlist ID: ${playlistId} → Album ID: ${albumId}`);
-            }
-        }
-
-        // Update YouTube playlist phase to 'downloading' if this is a YouTube playlist
-        if (playlistId.startsWith('youtube_')) {
-            const urlHash = playlistId.replace('youtube_', '');
-            updateYouTubeCardPhase(urlHash, 'downloading');
-            // Also update mirrored playlist card if applicable
-            if (urlHash.startsWith('mirrored_')) {
-                updateMirroredCardPhase(urlHash, 'downloading');
-            }
-        }
-
-        // Update Tidal playlist phase to 'downloading' if this is a Tidal playlist
-        if (playlistId.startsWith('tidal_')) {
-            const tidalPlaylistId = playlistId.replace('tidal_', '');
-            if (tidalPlaylistStates[tidalPlaylistId]) {
-                tidalPlaylistStates[tidalPlaylistId].phase = 'downloading';
-                updateTidalCardPhase(tidalPlaylistId, 'downloading');
-                console.log(`🔄 Updated Tidal playlist ${tidalPlaylistId} to downloading phase`);
-            }
-        }
-
-        // Update Beatport chart phase to 'downloading' if this is a Beatport chart
-        if (playlistId.startsWith('beatport_')) {
-            const urlHash = playlistId.replace('beatport_', '');
-            const state = youtubePlaylistStates[urlHash];
-
-            if (state && state.is_beatport_playlist) {
-                const chartHash = state.beatport_chart_hash || urlHash;
-
-                // Update frontend states
-                state.phase = 'downloading';
-                if (beatportChartStates[chartHash]) {
-                    beatportChartStates[chartHash].phase = 'downloading';
-                }
-
-                // Update card UI
-                updateBeatportCardPhase(chartHash, 'downloading');
-
-                // Update backend state
-                try {
-                    fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'downloading' })
-                    });
-                } catch (error) {
-                    console.warn('⚠️ Error updating backend Beatport phase to downloading:', error);
-                }
-
-                console.log(`🔄 Updated Beatport chart ${chartHash} to downloading phase`);
-            }
-        }
-
-        // Update Spotify Public playlist phase to 'downloading' if this is a Spotify Public playlist
-        if (playlistId.startsWith('spotify_public_')) {
-            const urlHash = playlistId.replace('spotify_public_', '');
-            if (spotifyPublicPlaylistStates[urlHash]) {
-                spotifyPublicPlaylistStates[urlHash].phase = 'downloading';
-                spotifyPublicPlaylistStates[urlHash].convertedSpotifyPlaylistId = playlistId;
-                updateSpotifyPublicCardPhase(urlHash, 'downloading');
-
-                try {
-                    fetch(`/api/spotify-public/update_phase/${urlHash}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
-                    });
-                } catch (error) {
-                    console.warn('Error updating backend Spotify Public phase to downloading:', error);
-                }
-
-                console.log(`🔄 Updated Spotify Public playlist ${urlHash} to downloading phase`);
-            }
-        }
-
-        // Update Deezer playlist phase to 'downloading' if this is a Deezer playlist
-        if (playlistId.startsWith('deezer_')) {
-            const deezerPlaylistId = playlistId.replace('deezer_', '');
-            if (deezerPlaylistStates[deezerPlaylistId]) {
-                deezerPlaylistStates[deezerPlaylistId].phase = 'downloading';
-                deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId = playlistId;
-                updateDeezerCardPhase(deezerPlaylistId, 'downloading');
-
-                try {
-                    fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'downloading', converted_spotify_playlist_id: playlistId })
-                    });
-                } catch (error) {
-                    console.warn('Error updating backend Deezer phase to downloading:', error);
-                }
-
-                console.log(`🔄 Updated Deezer playlist ${deezerPlaylistId} to downloading phase`);
-            }
-        }
-
-        // Update ListenBrainz playlist phase to 'downloading' if this is a ListenBrainz playlist
-        if (playlistId.startsWith('listenbrainz_')) {
-            const playlistMbid = playlistId.replace('listenbrainz_', '');
-            const state = listenbrainzPlaylistStates[playlistMbid];
-
-            if (state) {
-                // Update frontend state
-                state.phase = 'downloading';
-
-                // Update backend state
-                try {
-                    fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'downloading' })
-                    });
-                } catch (error) {
-                    console.warn('⚠️ Error updating backend ListenBrainz phase to downloading:', error);
-                }
-
-                console.log(`🔄 Updated ListenBrainz playlist ${playlistMbid} to downloading phase`);
-            }
-        }
-        document.getElementById(`begin-analysis-btn-${playlistId}`).style.display = 'none';
-        document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'inline-block';
-
-        // Hide wishlist button if it exists (only for non-wishlist modals)
-        const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
-        if (wishlistBtn) {
-            wishlistBtn.style.display = 'none';
-        }
-
-        // Add to discover download sidebar if this is a discover page download
-        if (process.discoverMetadata) {
-            const playlistName = process.playlist.name;
-            const imageUrl = process.discoverMetadata.imageUrl;
-            const type = process.discoverMetadata.type;
-            addDiscoverDownload(playlistId, playlistName, type, imageUrl);
-            console.log(`📥 [BEGIN ANALYSIS] Added discover download: ${playlistName}`);
-        }
-
-        // Check if force download toggle is enabled
-        const forceDownloadCheckbox = document.getElementById(`force-download-all-${playlistId}`);
-        const forceDownloadAll = forceDownloadCheckbox ? forceDownloadCheckbox.checked : false;
-
-        // Check if playlist folder mode toggle is enabled (only for sync page playlists)
-        const playlistFolderModeCheckbox = document.getElementById(`playlist-folder-mode-${playlistId}`);
-        const playlistFolderMode = playlistFolderModeCheckbox ? playlistFolderModeCheckbox.checked : false;
-
-        // Hide the force download toggle during processing
-        const forceToggleContainer = forceDownloadCheckbox ? forceDownloadCheckbox.closest('.force-download-toggle-container') : null;
-        if (forceToggleContainer) {
-            forceToggleContainer.style.display = 'none';
-        }
-
-        // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
-        const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
-        let selectedTracks = process.tracks;
-        if (tbody) {
-            const allCbs = tbody.querySelectorAll('.track-select-cb');
-            if (allCbs.length > 0) {
-                // Checkboxes exist — filter to only checked tracks
-                const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
-                const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
-                console.log(`🔲 [Track Selection] Total checkboxes: ${allCbs.length}, Checked: ${checkedCbs.length}`);
-                console.log(`🔲 [Track Selection] Checked indices:`, [...selectedIndices]);
-                console.log(`🔲 [Track Selection] process.tracks has ${process.tracks.length} items, first: "${process.tracks[0]?.name}", last: "${process.tracks[process.tracks.length - 1]?.name}"`);
-                // Stamp each selected track with its original table index so the backend
-                // maps status updates back to the correct modal row
-                selectedTracks = process.tracks
-                    .map((track, i) => ({ ...track, _original_index: i }))
-                    .filter(track => selectedIndices.has(track._original_index));
-                console.log(`🔲 [Track Selection] Filtered to ${selectedTracks.length} tracks:`, selectedTracks.map(t => `[${t._original_index}] ${t.name}`));
-                // Disable checkboxes once analysis starts
-                allCbs.forEach(cb => { cb.disabled = true; });
-            }
-        }
-        const selectAllCb = document.getElementById(`select-all-${playlistId}`);
-        if (selectAllCb) selectAllCb.disabled = true;
-
-        // Prepare request body - add album/artist context for artist album downloads
-        const wingItState = youtubePlaylistStates[playlistId] || {};
-        const isWingIt = wingItState.wing_it || false;
-        const requestBody = {
-            tracks: selectedTracks,
-            force_download_all: forceDownloadAll || isWingIt,
-            wing_it: isWingIt,
-        };
-
-        // If this is an artist album download, use album name and include full context
-        // Match 'artist_album_', 'enhanced_search_album_', 'discover_album_', and 'seasonal_album_' prefixes
-        // Note: 'enhanced_search_track_' is excluded — single track search results use singles context
-        const _isAlbumContext = playlistId.startsWith('artist_album_') || playlistId.startsWith('enhanced_search_album_') || playlistId.startsWith('discover_album_') || playlistId.startsWith('seasonal_album_') || playlistId.startsWith('spotify_library_') || playlistId.startsWith('issue_download_') || playlistId.startsWith('library_redownload_') || playlistId.startsWith('beatport_release_');
-        const _isSearchTrack = playlistId.startsWith('enhanced_search_track_') || playlistId.startsWith('gsearch_track_');
-        if (_isAlbumContext || _isSearchTrack) {
-            requestBody.playlist_name = process.album?.name || process.playlist.name;
-            requestBody.is_album_download = _isAlbumContext; // false for single track search results
-            requestBody.album_context = process.album;   // Full Spotify album object
-            requestBody.artist_context = process.artist; // Full Spotify artist object
-            console.log(`🎵 [${_isAlbumContext ? 'Album' : 'Single Track'}] Sending context: ${process.album?.name} by ${process.artist?.name}`);
-        } else {
-            // For playlists/wishlists, use the virtual playlist name
-            requestBody.playlist_name = process.playlist.name;
-            // Add playlist folder mode flag for sync page playlists
-            requestBody.playlist_folder_mode = playlistFolderMode;
-            if (playlistFolderMode) {
-                console.log(`📁 [Playlist Folder] Enabled for playlist: ${process.playlist.name}`);
-            }
-        }
-
-        const response = await fetch(`/api/playlists/${playlistId}/start-missing-process`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(requestBody)
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            // Special handling for rate limit
-            if (response.status === 429) {
-                throw new Error(`${data.error} Try closing some other download processes first.`);
-            }
-            throw new Error(data.error);
-        }
-
-        process.batchId = data.batch_id;
-
-        // Update Beatport backend state with download_process_id now that we have the batchId
-        if (playlistId.startsWith('beatport_')) {
-            const urlHash = playlistId.replace('beatport_', '');
-            const state = youtubePlaylistStates[urlHash];
-            if (state && state.is_beatport_playlist) {
-                const chartHash = state.beatport_chart_hash || urlHash;
-                try {
-                    fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            phase: 'downloading',
-                            download_process_id: data.batch_id
-                        })
-                    });
-                    console.log(`🔄 Updated Beatport backend with download_process_id: ${data.batch_id}`);
-                } catch (error) {
-                    console.warn('⚠️ Error updating Beatport backend with download_process_id:', error);
-                }
-            }
-        }
-
-        // Update ListenBrainz backend state with download_process_id and convertedSpotifyPlaylistId
-        if (playlistId.startsWith('listenbrainz_')) {
-            const playlistMbid = playlistId.replace('listenbrainz_', '');
-            const state = listenbrainzPlaylistStates[playlistMbid];
-            if (state) {
-                // Store in frontend state
-                state.download_process_id = data.batch_id;
-                state.convertedSpotifyPlaylistId = playlistId;
-
-                // Update backend state
-                try {
-                    fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            phase: 'downloading',
-                            download_process_id: data.batch_id,
-                            converted_spotify_playlist_id: playlistId
-                        })
-                    });
-                    console.log(`🔄 Updated ListenBrainz backend with download_process_id: ${data.batch_id}`);
-                } catch (error) {
-                    console.warn('⚠️ Error updating ListenBrainz backend with download_process_id:', error);
-                }
-            }
-        }
-
-        startModalDownloadPolling(playlistId);
-    } catch (error) {
-        showToast(`Failed to start process: ${error.message}`, 'error');
-        process.status = 'cancelled';
-
-        // Reset button states on error
-        const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-        const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-        const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
-        if (beginBtn) beginBtn.style.display = 'inline-block';
-        if (cancelBtn) cancelBtn.style.display = 'none';
-        if (wishlistBtn) wishlistBtn.style.display = 'inline-block';
-
-        // Show the force download toggle again
-        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
-        if (forceToggleContainer) {
-            forceToggleContainer.style.display = 'flex';
-        }
-
-        cleanupDownloadProcess(playlistId);
-    }
-}
-
-
-function updateTrackAnalysisResults(playlistId, results) {
-    // Update match results for all rows (tracks are now pre-populated)
-    for (const result of results) {
-        const matchElement = document.getElementById(`match-${playlistId}-${result.track_index}`);
-        if (matchElement) {
-            matchElement.textContent = result.found ? '✅ Found' : '❌ Missing';
-            matchElement.className = `track-match-status ${result.found ? 'match-found' : 'match-missing'}`;
-        }
-    }
-}
-
-
-
-// ============================================================================
-// GLOBAL BATCHED POLLING SYSTEM - Optimized for multiple concurrent modals
-// ============================================================================
-
-let globalDownloadStatusPoller = null;
-let globalPollingFailureCount = 0; // Track consecutive failures for exponential backoff
-let globalPollingBaseInterval = 2000; // Base polling interval in ms - MATCHES sync.py exactly
-
-function startGlobalDownloadPolling() {
-    // Always run HTTP polling as a fallback — WebSocket connections can silently
-    // stop delivering messages (room subscription lost, server emit error, proxy
-    // timeout) without triggering a disconnect event. The 2-second poll is cheap
-    // (single batched request) and ensures modals never go stale.
-    if (globalDownloadStatusPoller) {
-        console.debug('🔄 [Global Polling] Already running, skipping start');
-        return; // Prevent duplicate pollers
-    }
-
-    console.log('🔄 [Global Polling] Starting batched download status polling');
-
-    globalDownloadStatusPoller = setInterval(async () => {
-        if (document.hidden) return; // Skip polling when tab is not visible
-        // Get all active processes that need polling
-        const activeBatchIds = [];
-        const batchToPlaylistMap = {};
-        let hasOpenWishlistModal = false;
-
-        Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
-            // Include running AND recently-completed batches — ensures late task
-            // status updates still reach the modal so rows don't freeze mid-download
-            if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
-                activeBatchIds.push(process.batchId);
-                batchToPlaylistMap[process.batchId] = playlistId;
-            }
-
-            // Check if there's an open wishlist modal (visible and idle/waiting)
-            if (playlistId === 'wishlist' && process.modalElement &&
-                process.modalElement.style.display === 'flex' &&
-                (!process.batchId || process.status !== 'running')) {
-                hasOpenWishlistModal = true;
-            }
-        });
-
-        // Special handling for open wishlist modal - check for new auto-processing
-        if (hasOpenWishlistModal) {
-            try {
-                const response = await fetch('/api/active-processes');
-                if (response.ok) {
-                    const data = await response.json();
-                    const processes = data.active_processes || [];
-                    const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
-
-                    if (serverWishlistProcess) {
-                        console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
-                        await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
-                    }
-                }
-            } catch (error) {
-                console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
-            }
-        }
-
-        if (activeBatchIds.length === 0) {
-            console.debug('📊 [Global Polling] No active processes, continuing polling');
-            return;
-        }
-
-        try {
-            // Single batched API call for all active processes
-            const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
-            const response = await fetch(`/api/download_status/batch?${queryParams}`);
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-
-            const data = await response.json();
-            console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
-
-            // Process each batch's status data using existing logic
-            Object.entries(data.batches).forEach(([batchId, statusData]) => {
-                const playlistId = batchToPlaylistMap[batchId];
-                if (!playlistId || statusData.error) {
-                    if (statusData.error) {
-                        console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
-                    }
-                    return;
-                }
-
-                // Use existing modal update logic - zero changes needed!
-                processModalStatusUpdate(playlistId, statusData);
-            });
-
-            // ENHANCED: Reset failure count on successful polling
-            globalPollingFailureCount = 0;
-
-        } catch (error) {
-            console.error('❌ [Global Polling] Batched request failed:', error);
-
-            // ENHANCED: Implement exponential backoff on failure
-            globalPollingFailureCount++;
-
-            if (globalPollingFailureCount >= 5) {
-                console.error(`🚨 [Global Polling] ${globalPollingFailureCount} consecutive failures, continuing with backoff`);
-                // Don't stop polling - just continue with exponential backoff
-            }
-
-            // Exponential backoff: increase interval temporarily
-            const backoffInterval = Math.min(globalPollingBaseInterval * Math.pow(2, globalPollingFailureCount - 1), 8000);
-            console.warn(`⚠️ [Global Polling] Failure ${globalPollingFailureCount}/5, backing off to ${backoffInterval}ms`);
-
-            // Temporarily adjust the polling interval
-            if (globalDownloadStatusPoller) {
-                clearInterval(globalDownloadStatusPoller);
-                globalDownloadStatusPoller = null;
-
-                // Restart with backoff interval
-                setTimeout(() => {
-                    if (Object.keys(activeDownloadProcesses).length > 0) {
-                        startGlobalDownloadPollingWithInterval(backoffInterval);
-                    }
-                }, backoffInterval);
-            }
-        }
-    }, globalPollingBaseInterval); // Use base interval initially
-}
-
-function startGlobalDownloadPollingWithInterval(interval) {
-    if (globalDownloadStatusPoller) {
-        console.debug('🔄 [Global Polling] Already running, skipping start with interval');
-        return;
-    }
-
-    console.log(`🔄 [Global Polling] Starting with interval ${interval}ms`);
-
-    // Use the exact same logic as startGlobalDownloadPolling but with custom interval
-    globalDownloadStatusPoller = setInterval(async () => {
-        const activeBatchIds = [];
-        const batchToPlaylistMap = {};
-        let hasOpenWishlistModal = false;
-
-        Object.entries(activeDownloadProcesses).forEach(([playlistId, process]) => {
-            if (process.batchId && (process.status === 'running' || process.status === 'complete')) {
-                activeBatchIds.push(process.batchId);
-                batchToPlaylistMap[process.batchId] = playlistId;
-            }
-
-            // Check if there's an open wishlist modal (visible and idle/waiting)
-            if (playlistId === 'wishlist' && process.modalElement &&
-                process.modalElement.style.display === 'flex' &&
-                (!process.batchId || process.status !== 'running')) {
-                hasOpenWishlistModal = true;
-            }
-        });
-
-        // Special handling for open wishlist modal - check for new auto-processing
-        if (hasOpenWishlistModal) {
-            try {
-                const response = await fetch('/api/active-processes');
-                if (response.ok) {
-                    const data = await response.json();
-                    const processes = data.active_processes || [];
-                    const serverWishlistProcess = processes.find(p => p.playlist_id === 'wishlist');
-
-                    if (serverWishlistProcess) {
-                        console.log('🔄 [Global Polling] Detected auto-processing for open wishlist modal - rehydrating');
-                        await rehydrateModal(serverWishlistProcess, false); // false = not user-requested
-                    }
-                }
-            } catch (error) {
-                console.debug('⚠️ [Global Polling] Failed to check for wishlist auto-processing:', error);
-            }
-        }
-
-        if (activeBatchIds.length === 0) {
-            console.debug('📊 [Global Polling] No active processes, continuing polling');
-            return;
-        }
-
-        try {
-            const queryParams = activeBatchIds.map(id => `batch_ids=${id}`).join('&');
-            const response = await fetch(`/api/download_status/batch?${queryParams}`);
-
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-            }
-
-            const data = await response.json();
-            console.debug(`📊 [Global Polling] Received batched update for ${Object.keys(data.batches).length} processes`);
-
-            Object.entries(data.batches).forEach(([batchId, statusData]) => {
-                const playlistId = batchToPlaylistMap[batchId];
-                if (!playlistId || statusData.error) {
-                    if (statusData.error) {
-                        console.error(`❌ [Global Polling] Error for batch ${batchId}:`, statusData.error);
-                    }
-                    return;
-                }
-                processModalStatusUpdate(playlistId, statusData);
-            });
-
-            // Success - reset to normal interval if we were backing off
-            globalPollingFailureCount = 0;
-            if (interval !== globalPollingBaseInterval) {
-                console.log('✅ [Global Polling] Recovered from backoff, returning to normal interval');
-                clearInterval(globalDownloadStatusPoller);
-                globalDownloadStatusPoller = null;
-                startGlobalDownloadPolling(); // Restart with normal interval
-            }
-
-        } catch (error) {
-            console.error('❌ [Global Polling] Request failed:', error);
-            globalPollingFailureCount++;
-
-            if (globalPollingFailureCount >= 5) {
-                console.error(`🚨 [Global Polling] Too many failures, continuing with backoff`);
-                // Don't stop polling - just continue with exponential backoff
-            }
-        }
-    }, interval);
-}
-
-function stopGlobalDownloadPolling() {
-    if (globalDownloadStatusPoller) {
-        console.log('🛑 [Global Polling] Stopping batched download status polling');
-        clearInterval(globalDownloadStatusPoller);
-        globalDownloadStatusPoller = null;
-    }
-}
-
-// --- Error tooltip for failed/cancelled downloads (fixed-position, escapes overflow) ---
-function _getErrorTooltipPopup() {
-    let el = document.getElementById('error-tooltip-popup');
-    if (!el) {
-        el = document.createElement('div');
-        el.id = 'error-tooltip-popup';
-        document.body.appendChild(el);
-    }
-    return el;
-}
-
-function _hideErrorTooltip() {
-    const popup = document.getElementById('error-tooltip-popup');
-    if (popup) popup.classList.remove('visible');
-}
-
-function _ensureErrorTooltipListeners(statusEl) {
-    if (statusEl._errorTooltipBound) return;
-    statusEl._errorTooltipBound = true;
-    statusEl.addEventListener('mouseenter', function () {
-        const msg = this.dataset.errorMsg;
-        if (!msg || !this.offsetParent) return; // skip if element is hidden
-        const popup = _getErrorTooltipPopup();
-        popup.textContent = msg;
-        popup.classList.add('visible');
-        const rect = this.getBoundingClientRect();
-        const popupRect = popup.getBoundingClientRect();
-        let left = rect.left + rect.width / 2 - popupRect.width / 2;
-        let top = rect.top - popupRect.height - 10;
-        // Keep within viewport
-        if (left < 8) left = 8;
-        if (left + popupRect.width > window.innerWidth - 8) left = window.innerWidth - 8 - popupRect.width;
-        if (top < 8) { top = rect.bottom + 10; } // flip below if no room above
-        popup.style.left = left + 'px';
-        popup.style.top = top + 'px';
-    });
-    statusEl.addEventListener('mouseleave', _hideErrorTooltip);
-
-    // Dismiss tooltip when the scrollable modal body scrolls
-    const scrollParent = statusEl.closest('.download-missing-modal-body');
-    if (scrollParent && !scrollParent._errorTooltipScrollBound) {
-        scrollParent._errorTooltipScrollBound = true;
-        scrollParent.addEventListener('scroll', _hideErrorTooltip, { passive: true });
-    }
-}
-
-function _ensureCandidatesClickListener(statusEl) {
-    if (statusEl._candidatesClickBound) return;
-    statusEl._candidatesClickBound = true;
-    statusEl.addEventListener('click', function (e) {
-        e.stopPropagation();
-        _hideErrorTooltip();
-        const taskId = this.dataset.taskId;
-        if (taskId) showCandidatesModal(taskId);
-    });
-}
-
-async function showCandidatesModal(taskId) {
-    try {
-        const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/candidates`);
-        if (!resp.ok) { console.error('Failed to fetch candidates:', resp.status); return; }
-        const data = await resp.json();
-        _renderCandidatesModal(data);
-    } catch (err) {
-        console.error('Error fetching candidates:', err);
-    }
-}
-
-function _renderCandidatesModal(data) {
-    let overlay = document.getElementById('candidates-modal-overlay');
-    if (overlay) overlay.remove();
-
-    const trackName = data.track_info?.name || 'Unknown Track';
-    const trackArtist = data.track_info?.artist || 'Unknown Artist';
-    const candidates = data.candidates || [];
-    const errorMsg = data.error_message || '';
-
-    const fmtSize = (bytes) => {
-        if (!bytes) return '-';
-        const units = ['B', 'KB', 'MB', 'GB'];
-        let s = bytes, u = 0;
-        while (s >= 1024 && u < units.length - 1) { s /= 1024; u++; }
-        return `${s.toFixed(1)} ${units[u]}`;
-    };
-    const fmtDur = (ms) => {
-        if (!ms) return '-';
-        const sec = Math.floor(ms / 1000);
-        return `${Math.floor(sec / 60)}:${(sec % 60).toString().padStart(2, '0')}`;
-    };
-
-    let tableRows = '';
-    if (candidates.length === 0) {
-        tableRows = `<tr><td colspan="7" style="text-align:center; color: rgba(255,255,255,0.5); padding: 30px;">
-            No candidates were found during search.</td></tr>`;
-    } else {
-        candidates.forEach((c, i) => {
-            const shortFile = c.filename ? c.filename.split(/[/\\]/).pop() : '-';
-            const qBadge = c.quality
-                ? `<span class="candidates-quality-badge candidates-quality-${c.quality.toLowerCase()}">${c.quality.toUpperCase()}</span>`
-                : '';
-            tableRows += `<tr>
-                <td class="candidates-col-index">${i + 1}</td>
-                <td class="candidates-col-file" title="${escapeHtml(c.filename || '')}">${escapeHtml(shortFile)}</td>
-                <td class="candidates-col-quality">${qBadge}${c.bitrate ? ` ${c.bitrate}kbps` : ''}</td>
-                <td class="candidates-col-size">${fmtSize(c.size)}</td>
-                <td class="candidates-col-duration">${fmtDur(c.duration)}</td>
-                <td class="candidates-col-user" title="Queue: ${c.queue_length || 0} | Slots: ${c.free_upload_slots || 0}">${escapeHtml(c.username || '-')}</td>
-                <td class="candidates-col-action"><button class="candidates-download-btn" data-index="${i}" title="Download this file">⬇</button></td>
-            </tr>`;
-        });
-    }
-
-    overlay = document.createElement('div');
-    overlay.id = 'candidates-modal-overlay';
-    overlay.className = 'candidates-modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) closeCandidatesModal(); };
-    overlay.innerHTML = `
-        <div class="candidates-modal">
-            <div class="candidates-modal-header">
-                <div>
-                    <h2 class="candidates-modal-title">Search Results</h2>
-                    <div class="candidates-modal-subtitle">${escapeHtml(trackName)} — ${escapeHtml(trackArtist)}</div>
-                </div>
-                <button class="candidates-modal-close" onclick="closeCandidatesModal()">&#x2715;</button>
-            </div>
-            <div class="candidates-modal-body">
-                ${errorMsg ? `<div class="candidates-error-summary">${escapeHtml(errorMsg)}</div>` : ''}
-                <div class="candidates-count">${candidates.length} candidate${candidates.length !== 1 ? 's' : ''} found${candidates.length > 0 ? ' but none passed filters' : ''}</div>
-                <div class="candidates-table-wrapper">
-                    <table class="candidates-table">
-                        <thead><tr>
-                            <th>#</th><th>File</th><th>Quality</th><th>Size</th><th>Duration</th><th>User</th><th></th>
-                        </tr></thead>
-                        <tbody>${tableRows}</tbody>
-                    </table>
-                </div>
-            </div>
-        </div>`;
-
-    document.body.appendChild(overlay);
-    requestAnimationFrame(() => overlay.classList.add('visible'));
-
-    // Bind download buttons
-    overlay.querySelectorAll('.candidates-download-btn').forEach(btn => {
-        btn.addEventListener('click', () => {
-            const idx = parseInt(btn.dataset.index);
-            const c = candidates[idx];
-            if (c) downloadCandidate(data.task_id, c, trackName);
-        });
-    });
-}
-
-async function downloadCandidate(taskId, candidate, trackName) {
-    if (!await showConfirmDialog({ title: 'Download File', message: `Download this file as "${trackName}"?\n\n${candidate.filename?.split(/[/\\]/).pop() || 'Unknown file'}\nfrom ${candidate.username || 'Unknown user'}`, confirmText: 'Download' })) return;
-    try {
-        const resp = await fetch(`/api/downloads/task/${encodeURIComponent(taskId)}/download-candidate`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(candidate)
-        });
-        const result = await resp.json();
-        if (result.success) {
-            closeCandidatesModal();
-            showToast(result.message || 'Download initiated', 'success');
-        } else {
-            showToast(`Failed: ${result.error}`, 'error');
-        }
-    } catch (err) {
-        console.error('Error initiating manual download:', err);
-        showToast('Failed to initiate download', 'error');
-    }
-}
-
-function closeCandidatesModal() {
-    const overlay = document.getElementById('candidates-modal-overlay');
-    if (overlay) {
-        overlay.classList.remove('visible');
-        setTimeout(() => overlay.remove(), 300);
-    }
-}
-
-function processModalStatusUpdate(playlistId, data) {
-    // This function contains ALL the existing polling logic from startModalDownloadPolling
-    // Extracted so it can be called from both individual and batched polling
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) {
-        console.debug(`⚠️ [Status Update] No process found for ${playlistId}, skipping update`);
-        return;
-    }
-
-    if (data.error) {
-        console.error(`❌ [Status Update] Error for ${playlistId}: ${data.error}`);
-        return;
-    }
-
-    // ENHANCED: Validate response data to prevent UI corruption
-    if (!data || typeof data !== 'object') {
-        console.error(`❌ [Status Update] Invalid data for ${playlistId}:`, data);
-        return;
-    }
-
-    // ENHANCED: Validate task data structure
-    if (data.tasks && !Array.isArray(data.tasks)) {
-        console.error(`❌ [Status Update] Invalid tasks data for ${playlistId} - not an array:`, data.tasks);
-        return;
-    }
-
-    console.debug(`📊 [Status Update] Processing update for ${playlistId}: phase=${data.phase}, tasks=${(data.tasks || []).length}`);
-
-    // Note: Wishlist modal visibility is now managed by handleWishlistButtonClick() only
-    // Auto-show logic has been simplified to prevent conflicts
-
-    if (data.phase === 'analysis') {
-        const progress = data.analysis_progress;
-        const percent = progress.total > 0 ? (progress.processed / progress.total) * 100 : 0;
-        document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = `${percent}%`;
-        document.getElementById(`analysis-progress-text-${playlistId}`).textContent =
-            `${progress.processed}/${progress.total} tracks analyzed`;
-        if (data.analysis_results) {
-            updateTrackAnalysisResults(playlistId, data.analysis_results);
-            // Update stats when we first get analysis results
-            const foundCount = data.analysis_results.filter(r => r.found).length;
-            const missingCount = data.analysis_results.filter(r => !r.found).length;
-            document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
-            document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
-
-            // Auto-save M3U file for playlists after analysis
-            autoSavePlaylistM3U(playlistId);
-        }
-    } else if (data.phase === 'downloading' || data.phase === 'complete' || data.phase === 'error') {
-        console.debug(`📊 [Status Update] Processing ${data.phase} phase for playlistId: ${playlistId}, tasks: ${(data.tasks || []).length}`);
-
-        if (document.getElementById(`analysis-progress-fill-${playlistId}`).style.width !== '100%') {
-            document.getElementById(`analysis-progress-fill-${playlistId}`).style.width = '100%';
-            document.getElementById(`analysis-progress-text-${playlistId}`).textContent = 'Analysis complete!';
-            if (data.analysis_results) {
-                updateTrackAnalysisResults(playlistId, data.analysis_results);
-                const foundCount = data.analysis_results.filter(r => r.found).length;
-                const missingCount = data.analysis_results.filter(r => !r.found).length;
-                document.getElementById(`stat-found-${playlistId}`).textContent = foundCount;
-                document.getElementById(`stat-missing-${playlistId}`).textContent = missingCount;
-            }
-        }
-        const missingTracks = (data.analysis_results || []).filter(r => !r.found);
-        const missingCount = missingTracks.length;
-        let completedCount = 0;
-        let failedOrCancelledCount = 0;
-        let notFoundCount = 0;
-
-        // Verify modal exists before processing tasks
-        const modal = document.getElementById(`download-missing-modal-${playlistId}`);
-        if (!modal) {
-            console.error(`❌ [Status Update] Modal not found: download-missing-modal-${playlistId}`);
-            return;
-        }
-
-        // Update download progress text immediately when entering downloading phase
-        // This handles the case where tasks array is empty or still being populated
-        const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
-        if (data.phase === 'downloading' && missingCount > 0 && (!data.tasks || data.tasks.length === 0)) {
-            // No tasks yet, but we're in downloading phase with missing tracks
-            if (downloadProgressText) {
-                downloadProgressText.textContent = 'Preparing downloads...';
-                console.log(`📥 [Download Phase] Preparing ${missingCount} downloads...`);
-            }
-        }
-
-        (data.tasks || []).forEach(task => {
-            const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
-            if (!row) {
-                console.debug(`❌ [Status Update] Row not found for playlistId: ${playlistId}, track_index: ${task.track_index}`);
-                return;
-            }
-
-            // V2 SYSTEM: Check for persistent cancel state from backend
-            const isV2Task = task.playlist_id !== undefined; // V2 tasks have playlist_id
-            const cancelRequested = task.cancel_requested || false;
-            const uiState = task.ui_state || 'normal';
-
-            // Legacy protection for old system compatibility
-            if (row.dataset.locallyCancelled === 'true' && !isV2Task) {
-                failedOrCancelledCount++;
-                return; // Only skip for legacy system tasks
-            }
-
-            // Mark row with V2 system info
-            if (isV2Task) {
-                row.dataset.useV2System = 'true';
-                row.dataset.cancelRequested = cancelRequested.toString();
-                row.dataset.uiState = uiState;
-            }
-
-            row.dataset.taskId = task.task_id;
-            const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
-            const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
-
-            let statusText = '';
-            // V2 SYSTEM: Handle UI state override for cancelling tasks
-            if (isV2Task && uiState === 'cancelling' && task.status !== 'cancelled') {
-                statusText = '🔄 Cancelling...';
-            } else {
-                switch (task.status) {
-                    case 'pending': statusText = '⏸️ Pending'; break;
-                    case 'searching': statusText = '🔍 Searching...'; break;
-                    case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
-                    case 'post_processing': statusText = '⌛ Processing...'; break;
-                    case 'completed': statusText = '✅ Completed'; completedCount++; break;
-                    case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
-                    case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
-                    case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
-                    default: statusText = `⚪ ${task.status}`; break;
-                }
-            }
-
-            if (statusEl) {
-                statusEl.classList.remove('has-error-tooltip');
-                statusEl.removeAttribute('title');
-                statusEl.removeAttribute('data-error-msg');
-                statusEl.textContent = statusText;
-
-                if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
-                    statusEl.classList.add('has-error-tooltip');
-                    statusEl.dataset.errorMsg = task.error_message;
-                    _ensureErrorTooltipListeners(statusEl);
-                }
-                // Make not_found and failed cells clickable to review search candidates
-                if ((task.status === 'not_found' || task.status === 'failed') && task.has_candidates) {
-                    statusEl.classList.add('has-candidates');
-                    statusEl.dataset.taskId = task.task_id;
-                    _ensureCandidatesClickListener(statusEl);
-                }
-                console.debug(`✅ [Status Update] Updated track ${task.track_index} to: ${statusText}${isV2Task ? ' (V2)' : ''}`);
-            } else {
-                console.warn(`❌ [Status Update] Status element not found: download-${playlistId}-${task.track_index}`);
-            }
-
-            // V2 SYSTEM: Smart button management with persistent state awareness
-            if (actionsEl && !['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
-                // Check if we're in a cancelling state
-                if (isV2Task && uiState === 'cancelling') {
-                    actionsEl.innerHTML = '<span style="color: #666;">Cancelling...</span>';
-                } else {
-                    // Create V2 cancel button for all active tasks
-                    const onclickHandler = isV2Task ? 'cancelTrackDownloadV2' : 'cancelTrackDownload';
-                    actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="${onclickHandler}('${playlistId}', ${task.track_index})">×</button>`;
-                }
-            } else if (actionsEl && ['completed', 'failed', 'cancelled', 'not_found', 'post_processing'].includes(task.status)) {
-                actionsEl.innerHTML = '-'; // No actions available for terminal or processing states
-            }
-        });
-
-        // ENHANCED: Validate worker counts from server data
-        const serverActiveWorkers = data.active_count || 0;
-        const maxWorkers = data.max_concurrent || 3;
-
-        // V2 SYSTEM: Simplified worker counting - backend is authoritative
-        // Count active tasks, excluding locally cancelled legacy tasks only
-        const clientActiveWorkers = (data.tasks || []).filter(task => {
-            const row = document.querySelector(`tr[data-track-index="${task.track_index}"]`);
-            const isLegacyCancelled = row && row.dataset.locallyCancelled === 'true' && !row.dataset.useV2System;
-            return ['searching', 'downloading', 'queued'].includes(task.status) && !isLegacyCancelled;
-        }).length;
-
-        // Log discrepancies for debugging
-        if (serverActiveWorkers !== clientActiveWorkers) {
-            console.warn(`🔍 [Worker Validation] ${playlistId}: server reports ${serverActiveWorkers} active, client sees ${clientActiveWorkers} active tasks`);
-
-            // If server reports 0 but client sees active tasks, this might indicate ghost workers were fixed
-            if (serverActiveWorkers === 0 && clientActiveWorkers > 0) {
-                console.warn(`🚨 [Worker Validation] Server reports 0 workers but client sees ${clientActiveWorkers} active tasks - potential UI desync`);
-            }
-        }
-
-        console.debug(`📊 [Worker Status] ${playlistId}: ${serverActiveWorkers}/${maxWorkers} active workers, ${clientActiveWorkers} client-side active tasks`);
-
-        const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
-        const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 0;
-        document.getElementById(`download-progress-fill-${playlistId}`).style.width = `${progressPercent}%`;
-        document.getElementById(`download-progress-text-${playlistId}`).textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
-        document.getElementById(`stat-downloaded-${playlistId}`).textContent = completedCount;
-
-        // Auto-save M3U file once when all downloads finish (not on every poll cycle).
-        // Previously this fired on EVERY 2-second poll when completedCount > 0, flooding
-        // the server with heavyweight M3U generation requests that exhausted Flask threads
-        // and caused the batch status endpoint to hang — killing the poller.
-
-        // CLIENT-SIDE COMPLETION: Only complete when ALL task rows in the UI reflect a terminal state.
-        // Using totalFinished (derived from DOM updates in THIS render pass) prevents premature
-        // completion when the server sends phase='complete' before all rows have been updated.
-        const allTracksFinished = totalFinished >= missingCount && missingCount > 0 && totalFinished > 0;
-        // Extra guard: require the server to also report no active tasks
-        const serverHasActiveWork = (data.tasks || []).some(t =>
-            ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(t.status));
-        if (allTracksFinished && !serverHasActiveWork && process.status !== 'complete') {
-            console.log(`🎯 [Client Completion] All ${totalFinished}/${missingCount} tracks finished - completing modal locally`);
-
-            // Hide cancel button and mark as complete
-            document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
-            process.status = 'complete';
-            updatePlaylistCardUI(playlistId);
-
-            // Save M3U once on completion (not during progress polling)
-            if (completedCount > 0) {
-                autoSavePlaylistM3U(playlistId);
-            }
-
-            // Show the force download toggle again
-            const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
-            if (forceToggleContainer) {
-                forceToggleContainer.style.display = 'flex';
-            }
-
-            // Set album to downloaded status if this is an artist album
-            if (playlistId.startsWith('artist_album_')) {
-                const parts = playlistId.split('_');
-                if (parts.length >= 4) {
-                    const albumId = parts.slice(3).join('_');
-                    setTimeout(() => setAlbumDownloadedStatus(albumId), 500); // Small delay to ensure UI updates
-                }
-            }
-
-            // Update mirrored playlist card phase on client-side completion
-            if (playlistId.startsWith('youtube_')) {
-                const urlHash = playlistId.replace('youtube_', '');
-                if (urlHash.startsWith('mirrored_')) {
-                    updateMirroredCardPhase(urlHash, 'download_complete');
-                }
-            }
-
-            // Auto-save final M3U file for playlists
-            autoSavePlaylistM3U(playlistId);
-
-            // Show completion message
-            let completionParts = [`${completedCount} downloaded`];
-            if (notFoundCount > 0) completionParts.push(`${notFoundCount} not found`);
-            if (failedOrCancelledCount > 0) completionParts.push(`${failedOrCancelledCount} failed`);
-            const completionMessage = `Download complete! ${completionParts.join(', ')}.`;
-            showToast(completionMessage, 'success');
-
-            // Refresh server playlists tab so it reflects newly synced tracks
-            if (typeof loadServerPlaylists === 'function') {
-                setTimeout(() => loadServerPlaylists(), 2000);
-            }
-
-            // Auto-close wishlist modal when completed (for auto-processing)
-            if (playlistId === 'wishlist') {
-                console.log('🔄 [Auto-Wishlist] Auto-closing completed wishlist modal to enable next cycle');
-                setTimeout(() => {
-                    closeDownloadMissingModal(playlistId);
-                }, 3000); // 3-second delay to show completion message
-            }
-
-            // Check if any other processes still need polling
-            checkAndCleanupGlobalPolling();
-
-            return; // Skip waiting for backend signal
-        }
-
-        // FIXED: Only trigger completion logic when backend actually reports batch as complete
-        // Don't assume completion based on task counts - let backend determine when truly complete
-        if (data.phase === 'complete' || data.phase === 'error') {
-            // Enhanced check for background auto-processing for wishlist
-            const isWishlist = (playlistId === 'wishlist');
-            const isModalHidden = (process.modalElement && process.modalElement.style.display === 'none');
-            const isAutoInitiated = data.auto_initiated || false; // Server indicates if batch was auto-started
-            const isBackgroundWishlist = isWishlist && (isModalHidden || isAutoInitiated);
-
-            // Note: Auto-show logic removed - wishlist modal visibility managed by user interaction only
-
-            if (data.phase === 'cancelled') {
-                process.status = 'cancelled';
-
-                // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on cancel
-                if (playlistId.startsWith('youtube_')) {
-                    const urlHash = playlistId.replace('youtube_', '');
-                    updateYouTubeCardPhase(urlHash, 'discovered');
-                    if (urlHash.startsWith('mirrored_')) {
-                        updateMirroredCardPhase(urlHash, 'discovered');
-                    }
-                }
-
-                showToast(`Process cancelled for ${process.playlist.name}.`, 'info');
-            } else if (data.phase === 'error') {
-                process.status = 'complete'; // Treat as complete to allow cleanup
-                updatePlaylistCardUI(playlistId); // Update card to show ready for review
-
-                // Reset YouTube playlist phase to 'discovered' if this is a YouTube playlist on error
-                if (playlistId.startsWith('youtube_')) {
-                    const urlHash = playlistId.replace('youtube_', '');
-                    updateYouTubeCardPhase(urlHash, 'discovered');
-                    if (urlHash.startsWith('mirrored_')) {
-                        updateMirroredCardPhase(urlHash, 'discovered');
-                    }
-                }
-
-                showToast(`Process for ${process.playlist.name} failed!`, 'error');
-            } else {
-                process.status = 'complete';
-                updatePlaylistCardUI(playlistId); // Update card to show ready for review
-
-                // Update YouTube playlist phase to 'download_complete' if this is a YouTube playlist
-                if (playlistId.startsWith('youtube_')) {
-                    const urlHash = playlistId.replace('youtube_', '');
-                    updateYouTubeCardPhase(urlHash, 'download_complete');
-                    if (urlHash.startsWith('mirrored_')) {
-                        updateMirroredCardPhase(urlHash, 'download_complete');
-                    }
-                }
-
-                // Update Tidal playlist phase to 'download_complete' if this is a Tidal playlist
-                if (playlistId.startsWith('tidal_')) {
-                    const tidalPlaylistId = playlistId.replace('tidal_', '');
-                    if (tidalPlaylistStates[tidalPlaylistId]) {
-                        tidalPlaylistStates[tidalPlaylistId].phase = 'download_complete';
-                        // Store the download process ID for potential modal rehydration
-                        tidalPlaylistStates[tidalPlaylistId].download_process_id = process.batchId;
-                        updateTidalCardPhase(tidalPlaylistId, 'download_complete');
-                        console.log(`✅ [Status Complete] Updated Tidal playlist ${tidalPlaylistId} to download_complete phase`);
-                    }
-                }
-
-                // Update Beatport chart phase to 'download_complete' if this is a Beatport chart
-                if (playlistId.startsWith('beatport_')) {
-                    const urlHash = playlistId.replace('beatport_', '');
-                    const state = youtubePlaylistStates[urlHash];
-
-                    if (state && state.is_beatport_playlist) {
-                        const chartHash = state.beatport_chart_hash || urlHash;
-
-                        // Update frontend states
-                        state.phase = 'download_complete';
-                        state.download_process_id = process.batchId;
-                        if (beatportChartStates[chartHash]) {
-                            beatportChartStates[chartHash].phase = 'download_complete';
-                        }
-
-                        // Update card UI
-                        updateBeatportCardPhase(chartHash, 'download_complete');
-
-                        // Update backend state
-                        try {
-                            fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                                method: 'POST',
-                                headers: { 'Content-Type': 'application/json' },
-                                body: JSON.stringify({
-                                    phase: 'download_complete',
-                                    download_process_id: process.batchId
-                                })
-                            });
-                        } catch (error) {
-                            console.warn('⚠️ Error updating backend Beatport phase to download_complete:', error);
-                        }
-
-                        console.log(`✅ [Status Complete] Updated Beatport chart ${chartHash} to download_complete phase`);
-                    }
-                }
-
-                // Handle background wishlist processing completion specially
-                if (isBackgroundWishlist) {
-                    console.log(`🎉 Background wishlist processing complete: ${completedCount} downloaded, ${notFoundCount} not found, ${failedOrCancelledCount} failed`);
-
-                    // Reset modal to idle state to prevent "complete" phase disruption
-                    setTimeout(() => {
-                        resetWishlistModalToIdleState();
-                        // Server-side auto-processing will handle next cycle automatically
-                    }, 500);
-
-                    return; // Skip normal completion handling
-                }
-
-                // Show completion summary with wishlist stats (matching sync.py behavior)
-                let completionMessage = `Process complete for ${process.playlist.name}!`;
-                let messageType = 'success';
-
-                // Check for wishlist summary from backend (added when failed/cancelled tracks are processed)
-                if (data.wishlist_summary) {
-                    const summary = data.wishlist_summary;
-                    let summaryParts = [`Downloaded: ${completedCount}`];
-                    if (notFoundCount > 0) summaryParts.push(`Not Found: ${notFoundCount}`);
-                    if (failedOrCancelledCount > 0) summaryParts.push(`Failed: ${failedOrCancelledCount}`);
-                    completionMessage = `Download process complete! ${summaryParts.join(', ')}.`;
-
-                    if (summary.tracks_added > 0) {
-                        completionMessage += ` Added ${summary.tracks_added} failed track${summary.tracks_added !== 1 ? 's' : ''} to wishlist for automatic retry.`;
-                    } else if (summary.total_failed > 0) {
-                        completionMessage += ` ${summary.total_failed} track${summary.total_failed !== 1 ? 's' : ''} could not be added to wishlist.`;
-                        messageType = 'warning';
-                    }
-                }
-
-                showToast(completionMessage, messageType);
-            }
-
-            document.getElementById(`cancel-all-btn-${playlistId}`).style.display = 'none';
-
-            // Mark process as complete and trigger cleanup check
-            process.status = 'complete';
-            updatePlaylistCardUI(playlistId);
-
-            // Check if any other processes still need polling
-            checkAndCleanupGlobalPolling();
-        }
-    }
-}
-
-function checkAndCleanupGlobalPolling() {
-    // Check if any processes still need polling
-    const hasActivePolling = Object.values(activeDownloadProcesses)
-        .some(p => p.batchId && p.status === 'running');
-
-    if (!hasActivePolling) {
-        console.debug('🧹 [Cleanup] No more active processes, continuing polling');
-        // Keep polling active - no need to stop
-    }
-}
-
-// LEGACY FUNCTION: Keep for backward compatibility, but now uses global polling
-function startModalDownloadPolling(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process || !process.batchId) return;
-
-    console.log(`🔄 [Legacy Polling] Starting polling for ${playlistId}, delegating to global poller`);
-
-    // Clear any existing individual poller (cleanup)
-    if (process.poller) {
-        clearInterval(process.poller);
-        process.poller = null;
-    }
-
-    // Mark process as running to be picked up by global poller
-    process.status = 'running';
-
-    // Start global polling if not already running
-    startGlobalDownloadPolling();
-
-    // Create dummy poller for backward compatibility with cleanup functions
-    ensureLegacyCompatibility(playlistId);
-}
-
-// For backward compatibility with cleanup functions that expect process.poller
-// Creates a dummy poller that will be cleaned up by the existing cleanup logic
-function createLegacyPoller(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    // Create a dummy interval that just checks if the process is still active
-    // This ensures existing cleanup logic that calls clearInterval(process.poller) works
-    process.poller = setInterval(() => {
-        // This dummy poller doesn't do anything - global poller handles updates
-        if (!activeDownloadProcesses[playlistId] || process.status === 'complete') {
-            clearInterval(process.poller);
-            process.poller = null;
-            return;
-        }
-    }, 5000); // Very infrequent check, just for cleanup compatibility
-}
-
-// Call this to create the legacy poller after starting global polling
-function ensureLegacyCompatibility(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (process && !process.poller) {
-        createLegacyPoller(playlistId);
-    }
-}
-async function updateModalWithLiveDownloadProgress() {
-    try {
-        if (!currentDownloadBatchId) return;
-
-        // Fetch live download data from the downloads API
-        const response = await fetch('/api/downloads/status');
-        const downloadData = await response.json();
-
-        if (downloadData.error) return;
-
-        // Get all active and finished downloads
-        const allDownloads = { ...(downloadData.active || {}), ...(downloadData.finished || {}) };
-
-        // Update modal tracks that have active downloads
-        const modalRows = document.querySelectorAll('.download-missing-modal tr[data-track-index]');
-
-        for (const row of modalRows) {
-            const taskId = row.dataset.taskId;
-            if (!taskId) continue;
-
-            // Find corresponding download by checking if filename/title matches
-            const trackName = row.querySelector('.track-name')?.textContent?.trim();
-            if (!trackName) continue;
-
-            // Search for matching download
-            for (const [downloadId, downloadInfo] of Object.entries(allDownloads)) {
-                // Extract display title from filename (handle YouTube encoding)
-                let downloadTitle = '';
-                if (downloadInfo.filename) {
-                    if ((downloadInfo.username === 'youtube' || downloadInfo.username === 'tidal' || downloadInfo.username === 'qobuz' || downloadInfo.username === 'hifi') && downloadInfo.filename.includes('||')) {
-                        const parts = downloadInfo.filename.split('||');
-                        downloadTitle = parts[1] || parts[0];
-                    } else {
-                        downloadTitle = downloadInfo.filename.split(/[\\/]/).pop();
-                    }
-                }
-
-                // Simple matching - could be improved with better logic
-                if (downloadTitle && trackName && (
-                    downloadTitle.toLowerCase().includes(trackName.toLowerCase()) ||
-                    trackName.toLowerCase().includes(downloadTitle.toLowerCase())
-                )) {
-                    // Update the track with live download progress
-                    const statusElement = row.querySelector('.track-download-status');
-                    const progress = downloadInfo.percentComplete || 0;
-                    const state = downloadInfo.state || '';
-
-                    if (statusElement && state.includes('InProgress') && progress > 0) {
-                        statusElement.textContent = `⏬ Downloading... ${Math.round(progress)}%`;
-                        statusElement.className = 'track-download-status download-downloading';
-                    } else if (statusElement && (state.includes('Completed') || state.includes('Succeeded'))) {
-                        statusElement.textContent = '✅ Completed';
-                        statusElement.className = 'track-download-status download-complete';
-                    }
-
-                    break; // Found a match, stop searching
-                }
-            }
-        }
-
-    } catch (error) {
-        // Silent fail - don't spam console during normal operation
-    }
-}
-
-function toggleAllTrackSelections(playlistId, checked) {
-    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
-    if (!tbody) return;
-    const checkboxes = tbody.querySelectorAll('.track-select-cb');
-    checkboxes.forEach(cb => { cb.checked = checked; });
-    updateTrackSelectionCount(playlistId);
-}
-
-function updateTrackSelectionCount(playlistId) {
-    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
-    if (!tbody) return;
-    const allCbs = tbody.querySelectorAll('.track-select-cb');
-    const checkedCbs = tbody.querySelectorAll('.track-select-cb:checked');
-    const total = allCbs.length;
-    const selected = checkedCbs.length;
-
-    // Update selection count label
-    const countLabel = document.getElementById(`track-selection-count-${playlistId}`);
-    if (countLabel) {
-        countLabel.textContent = `${selected} / ${total} tracks selected`;
-    }
-
-    // Update select-all checkbox state
-    const selectAll = document.getElementById(`select-all-${playlistId}`);
-    if (selectAll) {
-        selectAll.checked = selected === total;
-        selectAll.indeterminate = selected > 0 && selected < total;
-    }
-
-    // Update row dimming
-    allCbs.forEach(cb => {
-        const row = cb.closest('tr');
-        if (row) row.classList.toggle('track-deselected', !cb.checked);
-    });
-
-    // Disable Begin Analysis and Add to Wishlist buttons when 0 selected
-    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-    if (beginBtn) {
-        beginBtn.disabled = selected === 0;
-    }
-    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
-    if (wishlistBtn) {
-        wishlistBtn.disabled = selected === 0;
-    }
-}
-
-async function cancelAllOperations(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    // Prevent multiple cancel all operations
-    if (process.cancellingAll) {
-        console.log(`⚠️ Cancel All already in progress for ${playlistId}`);
-        return;
-    }
-    process.cancellingAll = true;
-
-    console.log(`🚫 Cancel All clicked for playlist ${playlistId} - closing modal and cleaning up server`);
-
-    showToast('Cancelling all operations and closing modal...', 'info');
-
-    // Mark process as complete immediately so polling stops
-    process.status = 'complete';
-
-    // Stop any active polling
-    if (process.poller) {
-        clearInterval(process.poller);
-        process.poller = null;
-    }
-
-    // Tell server to stop starting new downloads and clean up the batch
-    if (process.batchId) {
-        try {
-            // Cancel the batch (stops new downloads from starting)
-            const cancelResponse = await fetch(`/api/playlists/${process.batchId}/cancel_batch`, {
-                method: 'POST'
-            });
-            if (cancelResponse.ok) {
-                const cancelData = await cancelResponse.json();
-                console.log(`✅ Server stopped new downloads for batch ${process.batchId}`);
-            }
-        } catch (error) {
-            console.warn('Error during server batch cancel:', error);
-        }
-    }
-
-    // Close the modal immediately - this will handle cleanup
-    closeDownloadMissingModal(playlistId);
-
-    showToast('Modal closed. Active downloads will finish in background.', 'success');
-}
-
-function resetToInitialState() {
-    // Reset UI
-    document.getElementById('begin-analysis-btn').style.display = 'inline-block';
-    document.getElementById('start-downloads-btn').style.display = 'none';
-    document.getElementById('cancel-all-btn').style.display = 'none';
-
-    // Reset progress bars
-    document.getElementById('analysis-progress-fill').style.width = '0%';
-    document.getElementById('download-progress-fill').style.width = '0%';
-    document.getElementById('analysis-progress-text').textContent = 'Ready to start';
-    document.getElementById('download-progress-text').textContent = 'Waiting for analysis';
-
-    // Reset stats
-    document.getElementById('stat-found').textContent = '-';
-    document.getElementById('stat-missing').textContent = '-';
-    document.getElementById('stat-downloaded').textContent = '0';
-
-    // Reset track table
-    const tbody = document.getElementById('download-tracks-tbody');
-    if (tbody) {
-        const rows = tbody.querySelectorAll('tr');
-        rows.forEach((row, index) => {
-            const matchElement = row.querySelector('.track-match-status');
-            const downloadElement = row.querySelector('.track-download-status');
-            const actionsElement = row.querySelector('.track-actions');
-
-            if (matchElement) {
-                matchElement.textContent = '🔍 Pending';
-                matchElement.className = 'track-match-status match-checking';
-            }
-            if (downloadElement) {
-                downloadElement.textContent = '-';
-                downloadElement.className = 'track-download-status';
-            }
-            if (actionsElement) {
-                actionsElement.textContent = '-';
-            }
-        });
-    }
-
-    // Reset state
-    activeAnalysisTaskId = null;
-    analysisResults = [];
-    missingTracks = [];
-}
-
-// ===============================
-// NEW ATOMIC CANCEL SYSTEM V2
-// ===============================
-
-async function cancelTrackDownloadV2(playlistId, trackIndex) {
-    /**
-     * NEW ATOMIC CANCEL SYSTEM V2
-     * 
-     * - No optimistic UI updates
-     * - Single API call handles everything atomically
-     * - Backend is single source of truth for all state
-     * - No race conditions or dual state management
-     */
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) {
-        console.warn(`❌ [Cancel V2] No process found for playlist: ${playlistId}`);
-        return;
-    }
-
-    const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
-    if (!row) {
-        console.warn(`❌ [Cancel V2] No row found for track index: ${trackIndex}`);
-        return;
-    }
-
-    // Check if already in cancelling state
-    const statusEl = document.getElementById(`download-${playlistId}-${trackIndex}`);
-    const currentStatus = statusEl ? statusEl.textContent : '';
-
-    if (currentStatus.includes('Cancelling') || currentStatus.includes('Cancelled')) {
-        console.log(`⚠️ [Cancel V2] Task already being cancelled or cancelled: ${currentStatus}`);
-        return;
-    }
-
-    console.log(`🎯 [Cancel V2] Starting atomic cancel: playlist=${playlistId}, track=${trackIndex}`);
-
-    // V2 SYSTEM: Set temporary UI state - will be confirmed by server
-    row.dataset.uiState = 'cancelling';
-
-    // Show loading state only - no optimistic "cancelled" state
-    if (statusEl) {
-        statusEl.textContent = '🔄 Cancelling...';
-    }
-
-    // Disable the cancel button to prevent double-clicks
-    const actionsEl = document.getElementById(`actions-${playlistId}-${trackIndex}`);
-    if (actionsEl) {
-        actionsEl.innerHTML = '<span style="color: #666;">Cancelling...</span>';
-    }
-
-    try {
-        const response = await fetch('/api/downloads/cancel_task_v2', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_id: playlistId,
-                track_index: trackIndex
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`✅ [Cancel V2] Successfully cancelled: ${data.task_info.track_name}`);
-            showToast(`Cancelled "${data.task_info.track_name}" and added to wishlist.`, 'success');
-
-            // Let the status polling system update the UI with server truth
-            // No manual UI updates - backend is authoritative
-
-        } else {
-            console.error(`❌ [Cancel V2] Cancel failed: ${data.error}`);
-            showToast(`Cancel failed: ${data.error}`, 'error');
-
-            // Reset UI to previous state on failure
-            row.dataset.uiState = 'normal'; // Reset UI state
-            if (statusEl) {
-                statusEl.textContent = '❌ Cancel Failed';
-            }
-            if (actionsEl) {
-                actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="cancelTrackDownloadV2('${playlistId}', ${trackIndex})">×</button>`;
-            }
-        }
-
-    } catch (error) {
-        console.error(`❌ [Cancel V2] Network/API error:`, error);
-        showToast(`Cancel request failed: ${error.message}`, 'error');
-
-        // Reset UI on network error
-        row.dataset.uiState = 'normal'; // Reset UI state
-        if (statusEl) {
-            statusEl.textContent = '❌ Cancel Failed';
-        }
-        if (actionsEl) {
-            actionsEl.innerHTML = `<button class="cancel-track-btn" title="Cancel this download" onclick="cancelTrackDownloadV2('${playlistId}', ${trackIndex})">×</button>`;
-        }
-    }
-}
-
-// ===============================
-// LEGACY CANCEL SYSTEM (OLD)
-// ===============================
-
-async function cancelTrackDownload(playlistId, trackIndex) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) return;
-
-    const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${trackIndex}"]`);
-    if (!row) return;
-
-    // Prevent double cancellation
-    if (row.dataset.locallyCancelled === 'true') {
-        return; // Already cancelled locally
-    }
-
-    const taskId = row.dataset.taskId;
-    if (!taskId) {
-        showToast('Task not started yet, cannot cancel.', 'warning');
-        return;
-    }
-
-    // UI update for immediate feedback - mark as cancelled FIRST to prevent race conditions
-    row.dataset.locallyCancelled = 'true';
-    document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelling...';
-    document.getElementById(`actions-${playlistId}-${trackIndex}`).innerHTML = '-';
-
-    try {
-        const response = await fetch('/api/downloads/cancel_task', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ task_id: taskId })
-        });
-        const data = await response.json();
-        if (data.success) {
-            // Update final UI state after successful cancellation
-            document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '🚫 Cancelled';
-            showToast('Download cancelled and added to wishlist.', 'info');
-        } else {
-            throw new Error(data.error);
-        }
-    } catch (error) {
-        // Reset UI state if cancellation failed
-        row.dataset.locallyCancelled = 'false';
-        document.getElementById(`download-${playlistId}-${trackIndex}`).textContent = '❌ Cancel Failed';
-        showToast(`Could not cancel task: ${error.message}`, 'error');
-    }
-}
-
-// Find and REPLACE the old startPlaylistSyncFromModal function
-async function startPlaylistSync(playlistId) {
-    const startTime = Date.now();
-    console.log(`🚀 [${new Date().toTimeString().split(' ')[0]}] Starting sync for playlist: ${playlistId}`);
-    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
-    if (!playlist) {
-        console.error(`❌ Could not find playlist data for ID: ${playlistId}`);
-        showToast('Could not find playlist data.', 'error');
-        return;
-    }
-    console.log(`✅ Found playlist: ${playlist.name} with ${playlist.track_count || 'unknown'} tracks`);
-
-    // Check if already syncing to prevent duplicate syncs
-    if (activeSyncPollers[playlistId]) {
-        showToast('Sync already in progress for this playlist', 'warning');
-        return;
-    }
-
-    // Update button state immediately for user feedback
-    const syncBtn = document.getElementById(`sync-btn-${playlistId}`);
-    if (syncBtn) {
-        syncBtn.disabled = true;
-        syncBtn.textContent = '⏳ Syncing...';
-    }
-
-    // Ensure we have the full track list before starting
-    let tracks = playlistTrackCache[playlistId];
-    if (!tracks) {
-        const trackFetchStart = Date.now();
-        console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Cache miss - fetching tracks for playlist ${playlistId}`);
-        try {
-            // Use the right endpoint based on playlist source
-            const fetchUrl = playlistId.startsWith('deezer_arl_')
-                ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
-                : `/api/spotify/playlist/${playlistId}`;
-            const response = await fetch(fetchUrl);
-            const fullPlaylist = await response.json();
-            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-            tracks = fullPlaylist.tracks;
-            playlistTrackCache[playlistId] = tracks; // Cache it
-            const trackFetchTime = Date.now() - trackFetchStart;
-            console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Fetched and cached ${tracks.length} tracks (took ${trackFetchTime}ms)`);
-        } catch (error) {
-            console.error(`❌ Failed to fetch tracks:`, error);
-            showToast(`Failed to fetch tracks for sync: ${error.message}`, 'error');
-            return;
-        }
-    } else {
-        console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Using cached tracks: ${tracks.length} tracks`);
-    }
-
-    // DON'T close the modal - let it show live progress like the GUI
-
-    try {
-        const syncStartTime = Date.now();
-        console.log(`🔄 [${new Date().toTimeString().split(' ')[0]}] Making API call to /api/sync/start with ${tracks.length} tracks`);
-        const response = await fetch('/api/sync/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_id: playlist.id,
-                playlist_name: playlist.name,
-                tracks: tracks, // Send the full track list
-                image_url: playlist.image_url || ''
-            })
-        });
-
-        const syncRequestTime = Date.now() - syncStartTime;
-        console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response status: ${response.status} (took ${syncRequestTime}ms)`);
-        const data = await response.json();
-        console.log(`📡 [${new Date().toTimeString().split(' ')[0]}] API response data:`, data);
-
-        if (!data.success) throw new Error(data.error);
-
-        const totalTime = Date.now() - startTime;
-        console.log(`✅ [${new Date().toTimeString().split(' ')[0]}] Sync started successfully for "${playlist.name}" (total time: ${totalTime}ms)`);
-        showToast(`Sync started for "${playlist.name}"`, 'success');
-
-        // Show initial sync state in modal if open
-        const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
-        if (modal && modal.style.display !== 'none') {
-            const statusDisplay = document.getElementById(`modal-sync-status-${playlist.id}`);
-            if (statusDisplay) {
-                statusDisplay.style.display = 'flex';
-                console.log(`📊 [${new Date().toTimeString().split(' ')[0]}] Showing modal sync status for ${playlist.id}`);
-            }
-        }
-
-        updateCardToSyncing(playlist.id, 0); // Initial state
-        startSyncPolling(playlist.id);
-
-    } catch (error) {
-        console.error(`❌ Failed to start sync:`, error);
-        showToast(`Failed to start sync: ${error.message}`, 'error');
-        updateCardToDefault(playlist.id);
-    }
-}
-
-// Add these new helper functions to script.js
-
-function startSyncPolling(playlistId) {
-    // Clear any existing poller for this playlist
-    if (activeSyncPollers[playlistId]) {
-        clearInterval(activeSyncPollers[playlistId]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
-        _syncProgressCallbacks[playlistId] = (data) => {
-            if (data.status === 'syncing') {
-                const progress = data.progress;
-                updateCardToSyncing(playlistId, progress.progress, progress);
-                updateModalSyncProgress(playlistId, progress);
-            } else if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
-                stopSyncPolling(playlistId);
-                updateCardToDefault(playlistId, data);
-                closePlaylistDetailsModal();
-            }
-        };
-    }
-
-    // Start a new poller that checks every 2 seconds
-    console.log(`🔄 Starting sync polling for playlist: ${playlistId}`);
-    activeSyncPollers[playlistId] = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            console.log(`📊 Polling sync status for: ${playlistId}`);
-            const response = await fetch(`/api/sync/status/${playlistId}`);
-            const state = await response.json();
-            console.log(`📊 Poll response:`, state);
-
-            if (state.status === 'syncing') {
-                const progress = state.progress;
-                console.log(`📊 Sync progress:`, progress);
-                console.log(`   📊 Progress values: ${progress.progress}% | Total: ${progress.total_tracks} | Matched: ${progress.matched_tracks} | Failed: ${progress.failed_tracks}`);
-                console.log(`   📊 Current step: "${progress.current_step}" | Current track: "${progress.current_track}"`);
-
-                // Use the actual progress percentage from the sync service
-                updateCardToSyncing(playlistId, progress.progress, progress);
-                // Also update the modal if it's open
-                updateModalSyncProgress(playlistId, progress);
-            } else if (state.status === 'finished' || state.status === 'error' || state.status === 'cancelled') {
-                console.log(`🏁 Sync completed with status: ${state.status}`);
-                stopSyncPolling(playlistId);
-                updateCardToDefault(playlistId, state);
-                // Also update the modal if it's open
-                closePlaylistDetailsModal(); closeDeezerArlPlaylistDetailsModal(); // Close modal on completion/error
-            }
-        } catch (error) {
-            console.error(`❌ Error polling sync status for ${playlistId}:`, error);
-            stopSyncPolling(playlistId);
-            updateCardToDefault(playlistId, { status: 'error', error: 'Polling failed' });
-        }
-    }, 2000); // Poll every 2 seconds
-    updateRefreshButtonState();
-}
-
-function stopSyncPolling(playlistId) {
-    if (activeSyncPollers[playlistId]) {
-        clearInterval(activeSyncPollers[playlistId]);
-        delete activeSyncPollers[playlistId];
-    }
-    // Phase 5: Unsubscribe and clean up callback
-    if (_syncProgressCallbacks[playlistId]) {
-        if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
-        delete _syncProgressCallbacks[playlistId];
-    }
-    updateRefreshButtonState();
-}
-
-// Sync sidebar visibility helpers
-function showSyncSidebar() {
-    const sidebar = document.querySelector('.sync-sidebar');
-    const contentArea = document.querySelector('.sync-content-area');
-    if (sidebar && contentArea && window.innerWidth > 1300) {
-        sidebar.style.display = '';
-        contentArea.style.gridTemplateColumns = '2.5fr 0.75fr';
-    }
-}
-
-function hideSyncSidebar() {
-    const sidebar = document.querySelector('.sync-sidebar');
-    const contentArea = document.querySelector('.sync-content-area');
-    if (sidebar && contentArea) {
-        sidebar.style.display = 'none';
-        contentArea.style.gridTemplateColumns = '1fr';
-    }
-}
-
-// Sequential Sync Functions
-function startSequentialSync() {
-    // Initialize manager if needed
-    if (!sequentialSyncManager) {
-        sequentialSyncManager = new SequentialSyncManager();
-    }
-
-    // Check if already running - if so, cancel
-    if (sequentialSyncManager.isRunning) {
-        sequentialSyncManager.cancel();
-        return;
-    }
-
-    // Validate selection
-    if (selectedPlaylists.size === 0) {
-        showToast('No playlists selected for sync', 'error');
-        return;
-    }
-
-    // Get playlist order from DOM to maintain display order
-    const playlistCards = document.querySelectorAll('.playlist-card');
-    const orderedPlaylistIds = [];
-
-    playlistCards.forEach(card => {
-        const playlistId = card.dataset.playlistId;
-        if (selectedPlaylists.has(playlistId)) {
-            orderedPlaylistIds.push(playlistId);
-        }
-    });
-
-    console.log(`🚀 Starting sequential sync for ${orderedPlaylistIds.length} playlists`);
-
-    // Show sidebar for sync progress
-    showSyncSidebar();
-
-    // Start sequential sync
-    sequentialSyncManager.start(orderedPlaylistIds);
-
-    // Disable playlist selection during sync
-    disablePlaylistSelection(true);
-}
-
-function disablePlaylistSelection(disabled) {
-    const checkboxes = document.querySelectorAll('.playlist-checkbox');
-    checkboxes.forEach(checkbox => {
-        checkbox.disabled = disabled;
-    });
-}
-
-function hasActiveOperations() {
-    const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
-    // Only check non-wishlist download processes for sync page refresh button
-    const hasActiveDownloads = Object.entries(activeDownloadProcesses)
-        .filter(([playlistId, process]) => playlistId !== 'wishlist') // Exclude wishlist
-        .some(([_, process]) => process.status === 'running');
-    const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
-    return hasActiveSyncs || hasActiveDownloads || hasSequentialSync;
-}
-
-
-function updateRefreshButtonState() {
-    const refreshBtn = document.getElementById('spotify-refresh-btn');
-    if (!refreshBtn) return;
-
-    if (hasActiveOperations()) {
-        refreshBtn.disabled = true;
-        // Provide context-specific text
-        const hasActiveSyncs = Object.keys(activeSyncPollers).length > 0;
-        const hasSequentialSync = sequentialSyncManager && sequentialSyncManager.isRunning;
-        if (hasActiveSyncs || hasSequentialSync) {
-            refreshBtn.textContent = '🔄 Syncing...';
-        } else {
-            refreshBtn.textContent = '📥 Downloading...';
-        }
-    } else {
-        refreshBtn.disabled = false;
-        refreshBtn.textContent = '🔄 Refresh';
-    }
-}
-
-function updateCardToSyncing(playlistId, percent, progress = null) {
-    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
-    if (!card) return;
-
-    const progressBar = card.querySelector('.sync-progress-indicator');
-    progressBar.style.display = 'block';
-
-    let progressText = 'Starting...';
-    let actualPercent = percent || 0;
-
-    if (progress) {
-        // Create detailed progress text like the GUI
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const currentStep = progress.current_step || 'Processing';
-
-        // Calculate actual progress as processed/total, not just successful/total
-        if (total > 0) {
-            const processed = matched + failed;
-            actualPercent = Math.round((processed / total) * 100);
-            progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
-        } else {
-            progressText = currentStep;
-        }
-
-        // If there's a current track being processed, show it
-        if (progress.current_track) {
-            progressText += ` - ${progress.current_track}`;
-        }
-    }
-
-    // Build live status counter HTML (same as modal)
-    let statusCounterHTML = '';
-    if (progress && progress.total_tracks > 0) {
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const processed = matched + failed;
-        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-        statusCounterHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat matched-tracks">✓ ${matched}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat failed-tracks">✗ ${failed}</span>
-                <span class="sync-stat percentage">(${percentage}%)</span>
-            </div>
-        `;
-    }
-
-    progressBar.innerHTML = `
-        ${statusCounterHTML}
-        <div class="progress-bar-sync">
-            <div class="progress-fill-sync" style="width: ${actualPercent}%;"></div>
-        </div>
-        <div class="progress-text-sync">${progressText}</div>
-    `;
-}
-
-function updateCardToDefault(playlistId, finalState = null) {
-    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
-    if (!card) return;
-
-    const progressBar = card.querySelector('.sync-progress-indicator');
-    progressBar.style.display = 'none';
-    progressBar.innerHTML = '';
-
-    const statusEl = card.querySelector('.playlist-card-status');
-    if (finalState) {
-        if (finalState.status === 'finished') {
-            statusEl.textContent = `Synced: Just now`;
-            statusEl.className = 'playlist-card-status status-synced';
-
-            // Check if any tracks were added to wishlist
-            const wishlistCount = finalState.progress?.wishlist_added_count || finalState.result?.wishlist_added_count || 0;
-            const unmatchedTracks = finalState.progress?.unmatched_tracks || finalState.result?.unmatched_tracks || [];
-            const playlistName = card.querySelector('.playlist-card-name').textContent;
-
-            if (wishlistCount > 0 && unmatchedTracks.length > 0) {
-                const trackList = unmatchedTracks.map(t => `${t.artist} - ${t.name}`).join(', ');
-                showToast(`Sync complete for "${playlistName}". ${wishlistCount} not found in library: ${trackList}`, 'warning');
-            } else if (wishlistCount > 0) {
-                showToast(`Sync complete for "${playlistName}". Added ${wishlistCount} missing track${wishlistCount > 1 ? 's' : ''} to wishlist.`, 'success');
-            } else {
-                showToast(`Sync complete for "${playlistName}"`, 'success');
-            }
-        } else {
-            statusEl.textContent = `Sync Failed`;
-            statusEl.className = 'playlist-card-status status-needs-sync'; // Or a new error class
-            showToast(`Sync failed: ${finalState.error || 'Unknown error'}`, 'error');
-        }
-    }
-}
-
-// Update the modal's sync progress display (matches GUI functionality)
-function updateModalSyncProgress(playlistId, progress) {
-    const modal = document.getElementById('playlist-details-modal') || document.getElementById('deezer-arl-playlist-details-modal');
-    if (modal && modal.style.display !== 'none') {
-        console.log(`📊 Updating modal sync progress for ${playlistId}:`, progress);
-
-        // Show sync status display
-        const statusDisplay = document.getElementById(`modal-sync-status-${playlistId}`);
-        if (statusDisplay) {
-            statusDisplay.style.display = 'flex';
-
-            // Update counters (matching GUI exactly)
-            const totalEl = document.getElementById(`modal-total-${playlistId}`);
-            const matchedEl = document.getElementById(`modal-matched-${playlistId}`);
-            const failedEl = document.getElementById(`modal-failed-${playlistId}`);
-            const percentageEl = document.getElementById(`modal-percentage-${playlistId}`);
-
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-
-            if (totalEl) totalEl.textContent = total;
-            if (matchedEl) matchedEl.textContent = matched;
-            if (failedEl) failedEl.textContent = failed;
-
-            // Calculate percentage like GUI
-            if (total > 0) {
-                const processed = matched + failed;
-                const percentage = Math.round((processed / total) * 100);
-                if (percentageEl) percentageEl.textContent = percentage;
-            }
-
-            console.log(`📊 Modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
-        } else {
-            console.warn(`❌ Modal sync status display not found for ${playlistId}`);
-        }
-    } else {
-        console.log(`📊 Modal not open for ${playlistId}, skipping update`);
-    }
-}
-
-
-// Download tracking state management - matching GUI functionality
-let activeDownloads = {};
-let finishedDownloads = {};
-let downloadStatusInterval = null;
-let isDownloadPollingActive = false;
-
-async function loadDownloadsData() {
-    // Downloads page loads search results dynamically
-    console.log('Downloads page loaded');
-
-    // Event listeners are already set up in initializeSearch() - don't duplicate them
-    const clearButton = document.querySelector('.controls-panel__clear-btn');
-    const cancelAllButton = document.querySelector('.controls-panel__cancel-all-btn');
-
-    if (clearButton) {
-        clearButton.addEventListener('click', clearFinishedDownloads);
-    }
-    if (cancelAllButton) {
-        cancelAllButton.addEventListener('click', cancelAllDownloads);
-    }
-
-    // Start sophisticated polling system (1-second interval like GUI)
-    startDownloadPolling();
-
-    // Initialize tab management
-    initializeDownloadTabs();
-}
-
-function startDownloadPolling() {
-    if (isDownloadPollingActive) return;
-
-    console.log('Starting download status polling (1-second interval)');
-    isDownloadPollingActive = true;
-
-    // Initial call
-    updateDownloadQueues();
-
-    // Start 1-second polling (matching GUI's 1000ms timer)
-    downloadStatusInterval = setInterval(updateDownloadQueues, 1000);
-}
-
-function stopDownloadPolling() {
-    if (downloadStatusInterval) {
-        clearInterval(downloadStatusInterval);
-        downloadStatusInterval = null;
-    }
-    isDownloadPollingActive = false;
-    console.log('Stopped download status polling');
-}
-
-async function updateDownloadQueues() {
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/downloads/status');
-        const data = await response.json();
-
-        if (data.error) {
-            console.error("Error fetching download status:", data.error);
-            return;
-        }
-
-        const newActive = {};
-        const newFinished = {};
-
-        // Terminal states matching GUI logic
-        const terminalStates = ['Completed', 'Succeeded', 'Cancelled', 'Canceled', 'Failed', 'Errored'];
-
-        // Process transfers exactly like GUI
-        data.transfers.forEach(item => {
-            const isTerminal = terminalStates.some(state =>
-                item.state && item.state.includes(state)
-            );
-
-            if (isTerminal) {
-                newFinished[item.id] = item;
-            } else {
-                newActive[item.id] = item;
-            }
-        });
-
-        // Update global state
-        activeDownloads = newActive;
-        finishedDownloads = newFinished;
-
-        // Render both queues
-        renderQueue('active-queue', activeDownloads, true);
-        renderQueue('finished-queue', finishedDownloads, false);
-
-        // Update tab counts
-        updateTabCounts();
-
-        // Update stats in the side panel
-        updateDownloadStats();
-
-    } catch (error) {
-        // Only log errors occasionally to avoid console spam
-        if (Math.random() < 0.1) {
-            console.error("Failed to update download queues:", error);
-        }
-    }
-}
-
-function renderQueue(containerId, downloads, isActiveQueue) {
-    const container = document.getElementById(containerId);
-    if (!container) return;
-
-    const downloadIds = Object.keys(downloads);
-
-    if (downloadIds.length === 0) {
-        container.innerHTML = `<div class="download-queue__empty-message">${isActiveQueue ? 'No active downloads.' : 'No finished downloads.'}</div>`;
-        return;
-    }
-
-    let html = '';
-    for (const id of downloadIds) {
-        const item = downloads[id];
-
-        // Extract display title from filename
-        let title = 'Unknown File';
-        if (item.filename) {
-            // YouTube/Tidal filenames are encoded as "id||title"
-            if ((item.username === 'youtube' || item.username === 'tidal' || item.username === 'qobuz' || item.username === 'hifi') && item.filename.includes('||')) {
-                const parts = item.filename.split('||');
-                title = parts[1] || parts[0];  // Use title part, fallback to id
-            } else {
-                // Regular Soulseek filename - extract last part of path
-                title = item.filename.split(/[\\/]/).pop();
-            }
-        }
-
-        const progress = item.percentComplete || 0;
-        const bytesTransferred = item.bytesTransferred || 0;
-        const totalBytes = item.size || 0;
-        const speed = item.averageSpeed || 0;
-
-        // Format file size
-        const formatSize = (bytes) => {
-            if (!bytes) return 'Unknown size';
-            const units = ['B', 'KB', 'MB', 'GB'];
-            let size = bytes;
-            let unitIndex = 0;
-            while (size >= 1024 && unitIndex < units.length - 1) {
-                size /= 1024;
-                unitIndex++;
-            }
-            return `${size.toFixed(1)} ${units[unitIndex]}`;
-        };
-
-        // Format speed
-        const formatSpeed = (bytesPerSecond) => {
-            if (!bytesPerSecond || bytesPerSecond <= 0) return '';
-            return `${formatSize(bytesPerSecond)}/s`;
-        };
-
-        let actionButtonHTML = '';
-        if (isActiveQueue) {
-            // Active items get progress bar and cancel button
-            actionButtonHTML = `
-                <div class="download-item__progress-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill" style="width: ${progress}%;"></div>
-                    </div>
-                    <div class="progress-text">
-                        ${item.state} - ${progress.toFixed(1)}%
-                        ${speed > 0 ? `• ${formatSpeed(speed)}` : ''}
-                        ${totalBytes > 0 ? `• ${formatSize(bytesTransferred)} / ${formatSize(totalBytes)}` : ''}
-                    </div>
-                </div>
-                <button class="download-item__cancel-btn" onclick="cancelDownloadItem('${item.id}', '${item.username}')">✕ Cancel</button>
-            `;
-        } else {
-            // Finished items get status and open button
-            let statusClass = '';
-            if (item.state.includes('Cancelled')) statusClass = 'status--cancelled';
-            else if (item.state.includes('Failed') || item.state.includes('Errored')) statusClass = 'status--failed';
-            else if (item.state.includes('Completed') || item.state.includes('Succeeded')) statusClass = 'status--completed';
-
-            actionButtonHTML = `
-                <div class="download-item__status-container">
-                    <span class="download-item__status-text ${statusClass}">${item.state}</span>
-                </div>
-                <button class="download-item__open-btn" title="Cannot open folder from web browser" disabled>📁 Open</button>
-            `;
-        }
-
-        // Enrich with metadata from backend context (artist, album, artwork)
-        const meta = item._meta || {};
-        const sourceLabels = { youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', lidarr: 'Lidarr' };
-        const sourceBadge = sourceLabels[item.username] || item.username;
-
-        html += `
-            <div class="download-item" data-id="${item.id}">
-                <div class="download-item__art">
-                    ${meta.artwork_url
-                        ? `<img src="${meta.artwork_url}" alt="" loading="lazy" onerror="this.parentElement.innerHTML='<div class=\\'download-item__art-placeholder\\'>&#9835;</div>'">`
-                        : '<div class="download-item__art-placeholder">&#9835;</div>'}
-                </div>
-                <div class="download-item__info">
-                    <div class="download-item__title" title="${title}">${title}</div>
-                    ${meta.artist || meta.album ? `
-                        <div class="download-item__meta">
-                            ${meta.artist ? `<span>${escapeHtml(meta.artist)}</span>` : ''}
-                            ${meta.artist && meta.album ? '<span class="download-item__sep">&middot;</span>' : ''}
-                            ${meta.album ? `<span class="download-item__album">${escapeHtml(meta.album)}</span>` : ''}
-                        </div>
-                    ` : ''}
-                    <div class="download-item__badges">
-                        <span class="download-item__source">${sourceBadge}</span>
-                        ${meta.quality ? `<span class="download-item__quality">${escapeHtml(meta.quality)}</span>` : ''}
-                    </div>
-                </div>
-                <div class="download-item__content">
-                    ${actionButtonHTML}
-                </div>
-            </div>
-        `;
-    }
-    container.innerHTML = html;
-}
-
-function updateTabCounts() {
-    const activeCount = Object.keys(activeDownloads).length;
-    const finishedCount = Object.keys(finishedDownloads).length;
-
-    const activeTabBtn = document.querySelector('.tab-btn[data-tab="active-queue"]');
-    const finishedTabBtn = document.querySelector('.tab-btn[data-tab="finished-queue"]');
-
-    if (activeTabBtn) activeTabBtn.textContent = `Download Queue (${activeCount})`;
-    if (finishedTabBtn) finishedTabBtn.textContent = `Finished (${finishedCount})`;
-}
-
-function updateDownloadStats() {
-    const activeCount = Object.keys(activeDownloads).length;
-    const finishedCount = Object.keys(finishedDownloads).length;
-
-    const activeLabel = document.getElementById('active-downloads-label');
-    const finishedLabel = document.getElementById('finished-downloads-label');
-
-    if (activeLabel) activeLabel.textContent = `• Active Downloads: ${activeCount}`;
-    if (finishedLabel) finishedLabel.textContent = `• Finished Downloads: ${finishedCount}`;
-}
-
-function initializeDownloadTabs() {
-    const tabButtons = document.querySelectorAll('.tab-btn');
-    tabButtons.forEach(btn => {
-        btn.addEventListener('click', () => switchDownloadTab(btn));
-    });
-}
-
-function switchDownloadTab(button) {
-    const targetTabId = button.getAttribute('data-tab');
-
-    // Update buttons
-    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
-    button.classList.add('active');
-
-    // Update content panes
-    document.querySelectorAll('.download-queue').forEach(queue => queue.classList.remove('active'));
-    const targetQueue = document.getElementById(targetTabId);
-    if (targetQueue) targetQueue.classList.add('active');
-}
-
-async function cancelDownloadItem(downloadId, username) {
-    try {
-        const response = await fetch('/api/downloads/cancel', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ download_id: downloadId, username: username })
-        });
-        const result = await response.json();
-
-        if (result.success) {
-            showToast('Download cancelled', 'success');
-        } else {
-            showToast(`Failed to cancel: ${result.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error cancelling download:', error);
-        showToast('Error sending cancel request', 'error');
-    }
-}
-
-async function clearFinishedDownloads() {
-    const finishedCount = Object.keys(finishedDownloads).length;
-    if (finishedCount === 0) {
-        showToast('No finished downloads to clear', 'error');
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/downloads/clear-finished', {
-            method: 'POST'
-        });
-        const result = await response.json();
-
-        if (result.success) {
-            showToast('Finished downloads cleared', 'success');
-        } else {
-            showToast(`Failed to clear: ${result.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error clearing finished downloads:', error);
-        showToast('Error sending clear request', 'error');
-    }
-}
-
-async function cancelAllDownloads() {
-    if (!await showConfirmDialog({ title: 'Cancel All Downloads', message: 'Cancel ALL active downloads and clear the transfer list? This cannot be undone.', confirmText: 'Cancel All', destructive: true })) {
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/downloads/cancel-all', {
-            method: 'POST'
-        });
-        const result = await response.json();
-
-        if (result.success) {
-            showToast('All downloads cancelled and cleared', 'success');
-        } else {
-            showToast(`Failed to cancel: ${result.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Error cancelling all downloads:', error);
-        showToast('Error cancelling downloads', 'error');
-    }
-}
-
-// REPLACE the old performDownloadsSearch function with this new one.
-async function performDownloadsSearch() {
-    const query = document.getElementById('downloads-search-input').value.trim();
-    if (!query) {
-        showToast('Please enter a search term', 'error');
-        return;
-    }
-
-    // --- UI Element References ---
-    const searchInput = document.getElementById('downloads-search-input');
-    const searchButton = document.getElementById('downloads-search-btn');
-    const cancelButton = document.getElementById('downloads-cancel-btn');
-    const statusText = document.getElementById('search-status-text');
-    const spinner = document.querySelector('.spinner-animation');
-    const dots = document.querySelector('.dots-animation');
-
-    // --- Start a new AbortController for this search ---
-    searchAbortController = new AbortController();
-
-    try {
-        // --- 1. Update UI to "Searching" State ---
-        searchInput.disabled = true;
-        searchButton.disabled = true;
-        cancelButton.classList.remove('hidden');
-        spinner.classList.remove('hidden');
-        dots.classList.remove('hidden');
-        statusText.textContent = `Searching for '${query}'...`;
-        displayDownloadsResults([]); // Clear previous results
-
-        // --- 2. Perform the Fetch Request ---
-        const response = await fetch('/api/search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query }),
-            signal: searchAbortController.signal // Link fetch to the AbortController
-        });
-
-        const data = await response.json();
-
-        if (data.error) {
-            throw new Error(data.error);
-        }
-
-        const results = data.results || [];
-        allSearchResults = results;
-        resetFilters();
-        applyFiltersAndSort();
-
-        // --- 3. Update UI with Success State ---
-        if (results.length === 0) {
-            statusText.textContent = `No results found for '${query}'`;
-            showToast('No results found', 'error');
-        } else {
-            document.getElementById('filters-container').classList.remove('hidden');
-
-            // Count albums and singles like the GUI app
-            let totalAlbums = 0;
-            let totalTracks = 0;
-
-            results.forEach(result => {
-                if (result.result_type === 'album') {
-                    totalAlbums++;
-                } else {
-                    totalTracks++;
-                }
-            });
-
-            statusText.textContent = `✨ Found ${results.length} results • ${totalAlbums} albums, ${totalTracks} singles`;
-            showToast(`Found ${results.length} results`, 'success');
-        }
-
-    } catch (error) {
-        // --- 4. Handle Errors, Including Cancellation ---
-        if (error.name === 'AbortError') {
-            // This specific error is thrown when the user clicks "Cancel"
-            statusText.textContent = 'Search was cancelled.';
-            showToast('Search cancelled', 'info');
-            displayDownloadsResults([]); // Clear any partial results
-        } else {
-            console.error('Search failed:', error);
-            statusText.textContent = `Search failed: ${error.message}`;
-            showToast('Search failed', 'error');
-        }
-    } finally {
-        // --- 5. Clean Up UI Regardless of Outcome ---
-        searchInput.disabled = false;
-        searchButton.disabled = false;
-        cancelButton.classList.add('hidden');
-        spinner.classList.add('hidden');
-        dots.classList.add('hidden');
-        searchAbortController = null; // Clear the controller
-    }
-}
-
-function displayDownloadsResults(results) {
-    const resultsArea = document.getElementById('search-results-area');
-    if (!resultsArea) return;
-
-    if (!results.length) {
-        resultsArea.innerHTML = '<div class="search-results-placeholder"><p>No search results found.</p></div>';
-        return;
-    }
-
-    let html = '';
-    results.forEach((result, index) => {
-        const isAlbum = result.result_type === 'album';
-
-        if (isAlbum) {
-            const trackCount = result.tracks ? result.tracks.length : 0;
-            const totalSize = result.total_size ? `${(result.total_size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
-
-            // Generate individual track items
-            let trackListHtml = '';
-            if (result.tracks && result.tracks.length > 0) {
-                // Detect disc boundaries from track number resets for multi-disc albums
-                let currentDisc = 1;
-                let lastTrackNum = 0;
-                let discBreaks = new Set();
-                result.tracks.forEach((track, trackIndex) => {
-                    const tn = track.track_number || 0;
-                    if (trackIndex > 0 && tn > 0 && tn <= lastTrackNum) {
-                        currentDisc++;
-                        discBreaks.add(trackIndex);
-                    }
-                    if (tn > 0) lastTrackNum = tn;
-                });
-                const isMultiDisc = discBreaks.size > 0;
-                if (isMultiDisc) {
-                    trackListHtml += `<div class="disc-separator" style="padding: 6px 12px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #aaa); border-bottom: 1px solid var(--border-color, #333); margin-bottom: 4px;">Disc 1</div>`;
-                }
-                let discNum = 1;
-                result.tracks.forEach((track, trackIndex) => {
-                    if (discBreaks.has(trackIndex)) {
-                        discNum++;
-                        trackListHtml += `<div class="disc-separator" style="padding: 6px 12px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #aaa); border-bottom: 1px solid var(--border-color, #333); margin: 8px 0 4px 0;">Disc ${discNum}</div>`;
-                    }
-                    const trackSize = track.size ? `${(track.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
-                    const trackBitrate = track.bitrate ? `${track.bitrate}kbps` : '';
-                    trackListHtml += `
-                        <div class="track-item">
-                            <div class="track-item-info">
-                                <div class="track-item-title">${escapeHtml(track.title || `Track ${trackIndex + 1}`)}</div>
-                                <div class="track-item-details">
-                                    ${track.track_number ? `${track.track_number}. ` : ''}${escapeHtml(track.artist || result.artist || 'Unknown Artist')} • ${trackSize} • ${escapeHtml(track.quality || 'Unknown')} ${trackBitrate}
-                                </div>
-                            </div>
-                            <div class="track-item-actions">
-                                <button onclick="streamAlbumTrack(${index}, ${trackIndex})" class="track-stream-btn">Stream ▶</button>
-                                <button onclick="downloadAlbumTrack(${index}, ${trackIndex})" class="track-download-btn">Download ⬇</button>
-                                <button onclick="matchedDownloadAlbumTrack(${index}, ${trackIndex})" class="track-matched-btn" title="Matched Download">Matched Download 🎯</button>
-                            </div>
-                        </div>
-                    `;
-                });
-            }
-
-            html += `
-                <div class="album-result-card" data-album-index="${index}">
-                    <div class="album-card-header" onclick="toggleAlbumExpansion(${index})">
-                        <div class="album-expand-indicator">▶</div>
-                        <div class="album-icon">💿</div>
-                        <div class="album-info">
-                            <div class="album-title">${escapeHtml(result.album_title || result.title || 'Unknown Album')}</div>
-                            <div class="album-artist">by ${escapeHtml(result.artist || 'Unknown Artist')}</div>
-                            <div class="album-details">
-                                ${trackCount} tracks • ${totalSize} • ${escapeHtml(result.quality || 'Mixed')}
-                            </div>
-                            <div class="album-uploader">Shared by ${escapeHtml(result.username || 'Unknown')}</div>
-                        </div>
-                        <div class="album-actions" onclick="event.stopPropagation()">
-                            <button onclick="downloadAlbum(${index})" class="album-download-btn">⬇ Download Album</button>
-                            <button onclick="matchedDownloadAlbum(${index})" class="album-matched-btn" title="Matched Album Download">Matched Album🎯</button>
-                        </div>
-                    </div>
-                    <div class="album-track-list" style="display: none;">
-                        ${trackListHtml}
-                    </div>
-                </div>
-            `;
-        } else {
-            const sizeText = result.size ? `${(result.size / 1024 / 1024).toFixed(1)} MB` : 'Unknown size';
-            const bitrateText = result.bitrate ? `${result.bitrate}kbps` : '';
-            html += `
-                <div class="track-result-card">
-                    <div class="track-icon">🎵</div>
-                    <div class="track-info">
-                        <div class="track-title">${escapeHtml(result.title || 'Unknown Title')}</div>
-                        <div class="track-artist">by ${escapeHtml(result.artist || 'Unknown Artist')}</div>
-                        <div class="track-details">
-                            ${sizeText} • ${escapeHtml(result.quality || 'Unknown')} ${bitrateText}
-                        </div>
-                        <div class="track-uploader">Shared by ${escapeHtml(result.username || 'Unknown')}</div>
-                    </div>
-                    <div class="track-actions">
-                        <button onclick="streamTrack(${index})" class="track-stream-btn" title="Stream Track">Stream ▶</button>
-                        <button onclick="downloadTrack(${index})" class="track-download-btn" title="Download">Download ⬇</button>
-                        <button onclick="matchedDownloadTrack(${index})" class="track-matched-btn" title="Matched Download">Matched Download🎯</button>
-                    </div>
-                </div>
-            `;
-        }
-    });
-
-    resultsArea.innerHTML = html;
-    // Store results globally for download functions
-    window.currentSearchResults = results;
-}
-
-async function downloadTrack(index) {
-    const results = window.currentSearchResults;
-    if (!results || !results[index]) return;
-
-    const track = results[index];
-
-    try {
-        const response = await fetch('/api/download', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(track)
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(`Download started: ${track.title}`, 'success');
-        } else {
-            showToast(`Download failed: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Download error:', error);
-        showToast('Failed to start download', 'error');
-    }
-}
-
-async function downloadAlbum(index) {
-    const results = window.currentSearchResults;
-    if (!results || !results[index]) return;
-
-    const album = results[index];
-
-    try {
-        const response = await fetch('/api/download', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(album)
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(data.message, 'success');
-        } else {
-            showToast(`Album download failed: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Album download error:', error);
-        showToast('Failed to start album download', 'error');
-    }
-}
-
-// Matched download functions
-function matchedDownloadTrack(index) {
-    const results = window.currentSearchResults;
-    if (!results || !results[index]) return;
-
-    const track = results[index];
-    console.log('🎯 Starting matched download for single track:', track);
-
-    // Open matching modal for single track
-    openMatchingModal(track, false, null);
-}
-
-function matchedDownloadAlbum(index) {
-    const results = window.currentSearchResults;
-    if (!results || !results[index]) return;
-
-    const album = results[index];
-    console.log('🎯 Starting matched download for album:', album);
-
-    // Open matching modal for album download
-    openMatchingModal(album, true, album);
-}
-
-function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
-    const results = window.currentSearchResults;
-    if (!results || !results[albumIndex]) return;
-
-    const album = results[albumIndex];
-    if (!album.tracks || !album.tracks[trackIndex]) return;
-
-    const track = album.tracks[trackIndex];
-
-    // Ensure track has necessary properties from parent album
-    track.username = album.username;
-    track.artist = track.artist || album.artist;
-    track.album = album.album_title || album.title;
-
-    console.log('🎯 Starting matched download for album track:', track);
-
-    // Open matching modal for single track (from album context)
-    openMatchingModal(track, false, null);
-}
-
-function toggleAlbumExpansion(albumIndex) {
-    const albumCard = document.querySelector(`[data-album-index="${albumIndex}"]`);
-    if (!albumCard) return;
-
-    const trackList = albumCard.querySelector('.album-track-list');
-    const indicator = albumCard.querySelector('.album-expand-indicator');
-
-    if (trackList.style.display === 'none' || !trackList.style.display) {
-        // Expand
-        trackList.style.display = 'block';
-        indicator.textContent = '▼';
-        albumCard.classList.add('expanded');
-    } else {
-        // Collapse
-        trackList.style.display = 'none';
-        indicator.textContent = '▶';
-        albumCard.classList.remove('expanded');
-    }
-}
-
-async function downloadAlbumTrack(albumIndex, trackIndex) {
-    const results = window.currentSearchResults;
-    if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) return;
-
-    const track = results[albumIndex].tracks[trackIndex];
-
-    try {
-        const response = await fetch('/api/download', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                ...track,
-                result_type: 'track'
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(`Download started: ${track.title}`, 'success');
-        } else {
-            showToast(`Track download failed: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        console.error('Track download error:', error);
-        showToast('Failed to start track download', 'error');
-    }
-}
-
-// ===============================
-// STREAMING WRAPPER FUNCTIONS
-// ===============================
-
-async function streamTrack(index) {
-    // Stream a single track from search results
-    try {
-        console.log(`🎵 streamTrack called with index: ${index}`);
-        console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
-
-        if (!window.currentSearchResults || !window.currentSearchResults[index]) {
-            console.error(`❌ No search results or invalid index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
-            showToast('Track not found', 'error');
-            return;
-        }
-
-        const result = window.currentSearchResults[index];
-        console.log(`🎵 Streaming track:`, result);
-
-        // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
-        const isStreamingSource = result.username === 'youtube' || result.username === 'tidal' || result.username === 'qobuz' || result.username === 'hifi';
-        if (!isStreamingSource && result.filename) {
-            const format = getFileExtension(result.filename);
-            console.log(`🎵 [STREAM CHECK] File: ${result.filename}, Extension: ${format}`);
-
-            const isSupported = isAudioFormatSupported(result.filename);
-            console.log(`🎵 [STREAM CHECK] Format ${format} supported: ${isSupported}`);
-
-            if (!isSupported) {
-                showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
-                return;
-            }
-        }
-
-        await startStream(result);
-
-    } catch (error) {
-        console.error('Track streaming error:', error);
-        showToast('Failed to start track stream', 'error');
-    }
-}
-
-
-async function streamAlbumTrack(albumIndex, trackIndex) {
-    // Stream a specific track from an album
-    try {
-        console.log(`🎵 streamAlbumTrack called with albumIndex: ${albumIndex}, trackIndex: ${trackIndex}`);
-        console.log(`🎵 window.currentSearchResults:`, window.currentSearchResults);
-
-        if (!window.currentSearchResults || !window.currentSearchResults[albumIndex]) {
-            console.error(`❌ No search results or invalid album index. Results length: ${window.currentSearchResults ? window.currentSearchResults.length : 'undefined'}`);
-            showToast('Album not found', 'error');
-            return;
-        }
-
-        const album = window.currentSearchResults[albumIndex];
-        console.log(`🎵 Album data:`, album);
-
-        // Surgical Fix: Handle YouTube/Tidal results which are "flat" (no tracks array)
-        if (album.username === 'youtube' || album.username === 'tidal' || album.username === 'qobuz' || album.username === 'hifi') {
-            // For YouTube/Tidal results, the "album" is actually the track itself
-            const track = album;
-            const trackData = {
-                ...track,
-                username: track.username,
-                filename: track.filename,
-                artist: track.artist,
-                album: track.title, // Use title as album name for player
-                title: track.title
-            };
-            console.log(`🎵 Streaming YouTube track directly:`, trackData);
-            await startStream(trackData);
-            return;
-        }
-
-        if (!album.tracks || !album.tracks[trackIndex]) {
-            console.error(`❌ No tracks in album or invalid track index. Tracks length: ${album.tracks ? album.tracks.length : 'undefined'}`);
-            showToast('Track not found in album', 'error');
-            return;
-        }
-
-        const track = album.tracks[trackIndex];
-        console.log(`🎵 Streaming album track:`, track);
-
-        // Ensure album tracks have required fields
-        const trackData = {
-            ...track,
-            username: track.username || album.username,
-            filename: track.filename || track.path,
-            artist: track.artist || album.artist,
-            album: track.album || album.title || album.album
-        };
-
-        console.log(`🎵 Enhanced track data:`, trackData);
-
-        // Check for unsupported formats before streaming (streaming sources use encoded filenames, skip check)
-        const isStreamingSource2 = trackData.username === 'youtube' || trackData.username === 'tidal' || trackData.username === 'qobuz' || trackData.username === 'hifi';
-        if (!isStreamingSource2 && trackData.filename && !isAudioFormatSupported(trackData.filename)) {
-            const format = getFileExtension(trackData.filename);
-            showToast(`Sorry, ${format.toUpperCase()} format is not supported in web browsers. Try downloading instead.`, 'error');
-            return;
-        }
-
-        await startStream(trackData);
-
-    } catch (error) {
-        console.error('Album track streaming error:', error);
-        showToast('Failed to start track stream', 'error');
-    }
-}
-
-async function loadArtistsData() {
-    try {
-        const response = await fetch(API.artists);
-        const data = await response.json();
-
-        const artistsGrid = document.getElementById('artists-grid');
-        if (data.artists && data.artists.length) {
-            artistsGrid.innerHTML = data.artists.map(artist => `
-                <div class="artist-card">
-                    <div class="artist-image">
-                        ${artist.image ?
-                    `<img src="${artist.image}" alt="${escapeHtml(artist.name)}" />` :
-                    '<div class="artist-placeholder">🎵</div>'
-                }
-                    </div>
-                    <div class="artist-info">
-                        <div class="artist-name">${escapeHtml(artist.name)}</div>
-                        <div class="artist-albums">${artist.album_count || 0} albums</div>
-                    </div>
-                </div>
-            `).join('');
-        } else {
-            artistsGrid.innerHTML = '<div class="no-artists">No artists found</div>';
-        }
-    } catch (error) {
-        console.error('Error loading artists data:', error);
-        document.getElementById('artists-grid').innerHTML = '<div class="error">Error loading artists</div>';
-    }
-}
-
-// ===============================
-// UTILITY FUNCTIONS
-// ===============================
-
-function showLoadingOverlay(message = 'Loading...') {
-    const overlay = document.getElementById('loading-overlay');
-    const messageElement = overlay.querySelector('.loading-message');
-    messageElement.textContent = message;
-    overlay.classList.remove('hidden');
-}
-
-function hideLoadingOverlay() {
-    document.getElementById('loading-overlay').classList.add('hidden');
-}
-
-// ==================================================================================
-// NOTIFICATION SYSTEM — Compact toasts + bell button + notification history panel
-// ==================================================================================
-
-const _notifState = {
-    history: [],
-    unreadCount: 0,
-    panelOpen: false,
-    currentToast: null,
-    toastTimer: null,
-    maxHistory: 50,
-};
-const _recentToastKeys = new Map();
-
-const _notifIcons = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
-
-function showToast(message, type = 'success', helpSection = null) {
-    const toastKey = `${type}:${message}`;
-    const now = Date.now();
-
-    // Deduplication — suppress identical toasts within 5 seconds
-    if (_recentToastKeys.has(toastKey) && now - _recentToastKeys.get(toastKey) < 5000) return;
-    _recentToastKeys.set(toastKey, now);
-    for (const [k, t] of _recentToastKeys) { if (now - t > 10000) _recentToastKeys.delete(k); }
-
-    // Add to notification history
-    const entry = { id: now + Math.random(), message, type, helpSection, timestamp: now, read: false };
-    _notifState.history.unshift(entry);
-    if (_notifState.history.length > _notifState.maxHistory) _notifState.history.pop();
-    _notifState.unreadCount++;
-    _updateNotifBadge();
-
-    // Show compact toast — dismiss current if showing
-    const container = document.getElementById('toast-container');
-    if (!container) return;
-
-    if (_notifState.currentToast && container.contains(_notifState.currentToast)) {
-        _notifState.currentToast.classList.add('toast-exit');
-        const old = _notifState.currentToast;
-        setTimeout(() => { if (container.contains(old)) container.removeChild(old); }, 200);
-    }
-    if (_notifState.toastTimer) clearTimeout(_notifState.toastTimer);
-
-    const icon = _notifIcons[type] || 'ℹ';
-    const toast = document.createElement('div');
-    toast.className = `toast-compact toast-${type}`;
-    toast.innerHTML = `<span class="toast-compact-icon">${icon}</span><span class="toast-compact-msg">${_escToast(message)}</span>`;
-    if (helpSection) {
-        const link = document.createElement('span');
-        link.className = 'toast-compact-link';
-        link.textContent = 'Learn more →';
-        link.onclick = e => { e.stopPropagation(); if (typeof navigateToDocsSection === 'function') navigateToDocsSection(helpSection); };
-        toast.appendChild(link);
-    }
-    toast.onclick = () => { toast.classList.add('toast-exit'); setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 200); };
-
-    container.appendChild(toast);
-    requestAnimationFrame(() => toast.classList.add('toast-enter'));
-    _notifState.currentToast = toast;
-
-    _notifState.toastTimer = setTimeout(() => {
-        if (container.contains(toast)) {
-            toast.classList.add('toast-exit');
-            setTimeout(() => { if (container.contains(toast)) container.removeChild(toast); }, 300);
-        }
-        _notifState.currentToast = null;
-    }, helpSection ? 5000 : 3500);
-}
-
-function _escToast(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
-function _escAttr(s) { return _escToast(s).replace(/'/g, "\\'").replace(/\n/g, ' ').replace(/\r/g, ''); }
-
-function _updateNotifBadge() {
-    const badge = document.getElementById('notif-bell-badge');
-    if (badge) {
-        badge.textContent = _notifState.unreadCount > 99 ? '99+' : _notifState.unreadCount;
-        badge.style.display = _notifState.unreadCount > 0 ? '' : 'none';
-    }
-}
-
-function toggleNotifPanel() {
-    if (_notifState.panelOpen) {
-        _closeNotifPanel();
-    } else {
-        _openNotifPanel();
-    }
-}
-
-function _openNotifPanel() {
-    _closeNotifPanel(); // Remove existing
-
-    _notifState.panelOpen = true;
-    _notifState.unreadCount = 0;
-    _notifState.history.forEach(e => e.read = true);
-    _updateNotifBadge();
-
-    const btn = document.getElementById('notif-bell-btn');
-    const panel = document.createElement('div');
-    panel.id = 'notif-panel';
-    panel.className = 'notif-panel';
-
-    const entries = _notifState.history;
-
-    panel.innerHTML = `
-        <div class="notif-panel-header">
-            <span class="notif-panel-title">Notifications</span>
-            ${entries.length > 0 ? '<button class="notif-panel-clear" onclick="_clearNotifHistory()">Clear All</button>' : ''}
-        </div>
-        <div class="notif-panel-body">
-            ${entries.length === 0 ? '<div class="notif-panel-empty">No notifications yet</div>' :
-            entries.map(e => {
-                const icon = _notifIcons[e.type] || 'ℹ';
-                const ago = _notifTimeAgo(e.timestamp);
-                const unreadDot = e.read ? '' : '<span class="notif-entry-unread"></span>';
-                const learnMore = e.helpSection ? `<span class="notif-entry-link" onclick="event.stopPropagation(); _closeNotifPanel(); navigateToDocsSection('${e.helpSection}')">Learn more →</span>` : '';
-                return `
-                    <div class="notif-entry notif-entry-${e.type}">
-                        ${unreadDot}
-                        <span class="notif-entry-icon notif-icon-${e.type}">${icon}</span>
-                        <div class="notif-entry-body">
-                            <div class="notif-entry-msg">${_escToast(e.message)}</div>
-                            <div class="notif-entry-meta">${ago}${learnMore}</div>
-                        </div>
-                    </div>`;
-            }).join('')}
-        </div>
-    `;
-
-    document.body.appendChild(panel);
-
-    // Position above the bell button
-    if (btn) {
-        const rect = btn.getBoundingClientRect();
-        panel.style.right = (window.innerWidth - rect.right) + 'px';
-        panel.style.bottom = (window.innerHeight - rect.top + 8) + 'px';
-    }
-
-    requestAnimationFrame(() => panel.classList.add('visible'));
-
-    // Close on outside click
-    setTimeout(() => {
-        const closeHandler = e => {
-            if (!panel.contains(e.target) && e.target.id !== 'notif-bell-btn') {
-                _closeNotifPanel();
-                document.removeEventListener('click', closeHandler);
-            }
-        };
-        document.addEventListener('click', closeHandler);
-    }, 100);
-}
-
-function _closeNotifPanel() {
-    _notifState.panelOpen = false;
-    const panel = document.getElementById('notif-panel');
-    if (panel) {
-        panel.classList.remove('visible');
-        setTimeout(() => panel.remove(), 200);
-    }
-}
-
-function _clearNotifHistory() {
-    _notifState.history = [];
-    _notifState.unreadCount = 0;
-    _updateNotifBadge();
-    _closeNotifPanel();
-}
-
-function _notifTimeAgo(ts) {
-    const s = Math.floor((Date.now() - ts) / 1000);
-    if (s < 5) return 'just now';
-    if (s < 60) return `${s}s ago`;
-    const m = Math.floor(s / 60);
-    if (m < 60) return `${m}m ago`;
-    const h = Math.floor(m / 60);
-    if (h < 24) return `${h}h ago`;
-    return `${Math.floor(h / 24)}d ago`;
-}
-
-// ==================================================================================
-// Music video download handler — defined at top level so both enhanced and global search can use it
-function _downloadMusicVideo(cardEl, video) {
-    if (cardEl.classList.contains('downloading') || cardEl.classList.contains('completed')) return;
-    cardEl.classList.add('downloading');
-    cardEl.onclick = null;
-
-    const playBtn = cardEl.querySelector('.enh-video-play');
-    const progressRing = cardEl.querySelector('.enh-video-progress-ring');
-    const progressBar = cardEl.querySelector('.enh-video-progress-bar');
-    const doneIcon = cardEl.querySelector('.enh-video-done');
-    const errorIcon = cardEl.querySelector('.enh-video-error');
-
-    if (playBtn) playBtn.classList.add('hidden');
-    if (progressRing) progressRing.classList.remove('hidden');
-
-    fetch('/api/music-video/download', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ video_id: video.video_id, url: video.url, title: video.title, channel: video.channel }),
-    }).then(res => {
-        if (!res.ok) throw new Error('Download request failed');
-        const circumference = 97.4;
-        const pollInterval = setInterval(async () => {
-            try {
-                const statusRes = await fetch(`/api/music-video/status/${video.video_id}`);
-                const status = await statusRes.json();
-                if (progressBar && status.progress > 0) {
-                    progressBar.style.strokeDashoffset = circumference - (status.progress / 100) * circumference;
-                }
-                if (status.status === 'completed') {
-                    clearInterval(pollInterval);
-                    cardEl.classList.remove('downloading');
-                    cardEl.classList.add('completed');
-                    if (progressRing) progressRing.classList.add('hidden');
-                    if (doneIcon) doneIcon.classList.remove('hidden');
-                } else if (status.status === 'error') {
-                    clearInterval(pollInterval);
-                    cardEl.classList.remove('downloading');
-                    cardEl.classList.add('errored');
-                    if (progressRing) progressRing.classList.add('hidden');
-                    if (errorIcon) errorIcon.classList.remove('hidden');
-                    cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
-                }
-            } catch (e) { }
-        }, 500);
-    }).catch(e => {
-        cardEl.classList.remove('downloading');
-        if (progressRing) progressRing.classList.add('hidden');
-        if (playBtn) playBtn.classList.remove('hidden');
-        if (errorIcon) errorIcon.classList.remove('hidden');
-        cardEl.onclick = () => _downloadMusicVideo(cardEl, video);
-    });
-}
-
-// Global search video click — decodes base64 video data and delegates to _downloadMusicVideo
-function _gsClickVideo(cardEl) {
-    try {
-        const encoded = cardEl.dataset.video;
-        const video = JSON.parse(decodeURIComponent(escape(atob(encoded))));
-        _downloadMusicVideo(cardEl, video);
-    } catch (e) {
-        console.error('Failed to parse video data:', e);
-    }
-}
-
-// GLOBAL SEARCH BAR — Spotlight-style search from anywhere
-// ==================================================================================
-
-const _gsState = {
-    active: false,
-    query: '',
-    data: null,
-    sources: {},
-    activeSource: null,
-    abortCtrl: null,
-    altAbortCtrl: null,
-    debounceTimer: null,
-};
-
-(function initGlobalSearch() {
-    // Defer init until DOM is ready
-    const _doInit = () => {
-        const bar = document.getElementById('gsearch-bar');
-        const input = document.getElementById('gsearch-input');
-        const results = document.getElementById('gsearch-results');
-        if (!input || !bar) return;
-
-        bar.addEventListener('click', () => input.focus());
-
-        input.addEventListener('focus', () => {
-            bar.classList.add('active');
-            _gsState.active = true;
-            const shortcut = document.getElementById('gsearch-shortcut');
-            if (shortcut) shortcut.style.display = 'none';
-            if (_gsState.data && _gsState.query) _gsShowResults();
-        });
-
-        // No blur handler — closing is handled by click-outside and Escape only
-        // This prevents tab switching and result clicks from closing the panel
-
-        const clearBtn = document.getElementById('gsearch-clear');
-
-        input.addEventListener('input', () => {
-            const q = input.value.trim();
-            _gsState.query = q;
-            if (clearBtn) clearBtn.style.display = q.length > 0 ? '' : 'none';
-            if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
-            if (q.length < 2) { _gsHideResults(); return; }
-            _gsState.debounceTimer = setTimeout(() => _gsPerformSearch(q), 300);
-        });
-
-        if (clearBtn) {
-            clearBtn.addEventListener('click', e => {
-                e.stopPropagation();
-                input.value = '';
-                _gsState.query = '';
-                _gsState.data = null;
-                clearBtn.style.display = 'none';
-                _gsHideResults();
-                input.focus();
-            });
-        }
-
-        input.addEventListener('keydown', e => {
-            if (e.key === 'Enter') {
-                e.preventDefault();
-                if (_gsState.debounceTimer) clearTimeout(_gsState.debounceTimer);
-                const q = input.value.trim();
-                if (q.length >= 2) _gsPerformSearch(q);
-            } else if (e.key === 'Escape') {
-                _gsDeactivate();
-                input.blur();
-            }
-        });
-
-        // Keyboard shortcuts
-        document.addEventListener('keydown', e => {
-            if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); input.focus(); return; }
-            if (e.key === '/' && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) { e.preventDefault(); input.focus(); }
-        });
-
-        // Click outside to close — uses delayed check because tab clicks replace DOM
-        document.addEventListener('click', e => {
-            if (!_gsState.active) return;
-            // Skip if click was recent interaction with search system (within 100ms of a switch)
-            if (_gsState._lastInteraction && Date.now() - _gsState._lastInteraction < 200) return;
-            setTimeout(() => {
-                if (!_gsState.active) return;
-                const freshBar = document.getElementById('gsearch-bar');
-                const freshResults = document.getElementById('gsearch-results');
-                const target = e.target;
-                if (freshBar?.contains(target) || freshResults?.contains(target)) return;
-                _gsDeactivate();
-            }, 100);
-        });
-
-        // Collapse on sidebar navigation + hide on downloads page
-        document.addEventListener('click', e => {
-            if (e.target.closest('.sidebar-link, .nav-item, .back-btn')) {
-                if (_gsState.active) _gsDeactivate();
-                // Check after navigation which page we're on
-                setTimeout(_gsUpdateVisibility, 200);
-            }
-        });
-    };
-    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => { _doInit(); _gsUpdateVisibility(); });
-    else { _doInit(); setTimeout(_gsUpdateVisibility, 500); }
-})();
-
-function _gsUpdateVisibility() {
-    const bar = document.getElementById('gsearch-bar');
-    if (!bar) return;
-    // Hide on downloads page where enhanced search already exists
-    const onDownloads = typeof currentPage !== 'undefined' && currentPage === 'downloads';
-    bar.style.display = onDownloads ? 'none' : '';
-    if (onDownloads && _gsState.active) _gsDeactivate();
-}
-
-function _gsDeactivate() {
-    const bar = document.getElementById('gsearch-bar');
-    const shortcut = document.getElementById('gsearch-shortcut');
-    if (bar) bar.classList.remove('active');
-    if (shortcut) shortcut.style.display = '';
-    _gsState.active = false;
-    _gsHideResults();
-}
-
-function _gsHideResults() {
-    const r = document.getElementById('gsearch-results');
-    if (r) r.classList.remove('visible');
-}
-
-function _gsShowResults() {
-    const r = document.getElementById('gsearch-results');
-    if (r && r.innerHTML.trim()) r.classList.add('visible');
-}
-
-async function _gsPerformSearch(query) {
-    if (_gsState.abortCtrl) _gsState.abortCtrl.abort();
-    if (_gsState.altAbortCtrl) _gsState.altAbortCtrl.abort();
-    _gsState.abortCtrl = new AbortController();
-    _gsState.altAbortCtrl = new AbortController();
-
-    const results = document.getElementById('gsearch-results');
-    if (!results) return;
-
-    results.innerHTML = '<div class="gsearch-loading"><div class="server-search-spinner"></div>Searching...</div>';
-    results.classList.add('visible');
-
-    try {
-        const res = await fetch('/api/enhanced-search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query }),
-            signal: _gsState.abortCtrl.signal,
-        });
-        const data = await res.json();
-        _gsState.data = data;
-        _gsState.activeSource = data.primary_source || 'spotify';
-        _gsState.sources = {};
-        _gsState.sources[_gsState.activeSource] = {
-            artists: data.spotify_artists || [],
-            albums: data.spotify_albums || [],
-            tracks: data.spotify_tracks || [],
-        };
-
-        _gsRender(data);
-
-        // Async library ownership check — adds badges + swaps play buttons for library tracks
-        setTimeout(() => _gsLibraryCheck(), 200);
-
-        // Fetch alternate sources — stream NDJSON so slow sources render incrementally
-        const alts = data.alternate_sources || [];
-        for (const src of alts) {
-            if (src === _gsState.activeSource) continue;
-            _gsFetchSourceStream(src, query);
-        }
-    } catch (e) {
-        if (e.name !== 'AbortError') results.innerHTML = '<div class="gsearch-empty">Search failed</div>';
-    }
-}
-
-async function _gsFetchSourceStream(src, query) {
-    try {
-        const res = await fetch(`/api/enhanced-search/source/${src}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query }),
-            signal: _gsState.altAbortCtrl.signal,
-        });
-        if (!res.ok) return;
-
-        if (!_gsState.sources[src]) {
-            const loadingSet = src === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
-            _gsState.sources[src] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
-        }
-        const sourceData = _gsState.sources[src];
-
-        const reader = res.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            buffer += decoder.decode(value, { stream: true });
-
-            let idx;
-            while ((idx = buffer.indexOf('\n')) !== -1) {
-                const line = buffer.slice(0, idx).trim();
-                buffer = buffer.slice(idx + 1);
-                if (!line) continue;
-                try {
-                    const chunk = JSON.parse(line);
-                    if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
-                    else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
-                    else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
-                    else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
-                    if (chunk.type === 'done') delete sourceData._loading;
-                    _gsRenderTabs();
-                    // Re-render content if this is the active source tab
-                    if (_gsState.activeSource === src && _gsState.data) {
-                        _gsRender(_gsState.data);
-                    }
-                } catch (e) { }
-            }
-        }
-        _gsRenderTabs();
-    } catch (e) {
-        if (e.name !== 'AbortError') console.debug(`GS alt source ${src} failed:`, e);
-    }
-}
-
-function _gsRender(data) {
-    const results = document.getElementById('gsearch-results');
-    if (!results) return;
-
-    // Music Videos tab — render video grid instead of regular results
-    if (_gsState.activeSource === 'youtube_videos') {
-        const src = _gsState.sources['youtube_videos'] || {};
-        const videos = src.videos || [];
-        const isLoading = src._loading && src._loading.size > 0;
-        let h = '';
-        h += `<div class="gsearch-results-header"><span class="gsearch-results-title">Results</span><span class="gsearch-results-count">${videos.length} videos</span></div>`;
-        h += '<div class="gsearch-tabs" id="gsearch-tabs"></div>';
-        h += '<div class="gsearch-results-body">';
-        if (isLoading) {
-            h += '<div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Searching YouTube...</div>';
-        } else if (videos.length === 0) {
-            h += `<div class="gsearch-empty">No music videos found for "${_escToast(_gsState.query)}"</div>`;
-        } else {
-            h += '<div class="gsearch-section-header">🎬 Music Videos</div>';
-            h += '<div class="enh-video-grid">';
-            h += videos.map(v => {
-                const dur = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
-                const views = v.view_count >= 1000000 ? `${(v.view_count / 1000000).toFixed(1)}M` : v.view_count >= 1000 ? `${(v.view_count / 1000).toFixed(1)}K` : (v.view_count || '');
-                const vJson = btoa(unescape(encodeURIComponent(JSON.stringify(v))));
-                return `<div class="enh-video-card" data-video-id="${v.video_id}" data-video="${vJson}" onclick="_gsClickVideo(this)">
-                    <div class="enh-video-thumb"><img src="${v.thumbnail}" alt="" loading="lazy" onerror="this.style.display='none'"><div class="enh-video-play">▶</div>
-                    <div class="enh-video-progress-ring hidden"><svg viewBox="0 0 36 36"><circle class="enh-video-progress-bg" cx="18" cy="18" r="15.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3"/><circle class="enh-video-progress-bar" cx="18" cy="18" r="15.5" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="3" stroke-dasharray="97.4" stroke-dashoffset="97.4" stroke-linecap="round" transform="rotate(-90 18 18)"/></svg></div>
-                    <div class="enh-video-done hidden">✓</div><div class="enh-video-error hidden">✗</div>
-                    ${dur ? `<span class="enh-video-duration">${dur}</span>` : ''}</div>
-                    <div class="enh-video-info"><div class="enh-video-title">${_escToast(v.title)}</div><div class="enh-video-channel">${_escToast(v.channel)}${views ? ` · ${views} views` : ''}</div></div>
-                </div>`;
-            }).join('');
-            h += '</div>';
-        }
-        h += '</div>';
-        results.innerHTML = h;
-        results.classList.add('visible');
-        _gsRenderTabs();
-        return;
-    }
-
-    const src = _gsState.sources[_gsState.activeSource] || {};
-    const loading = src._loading || new Set();
-    const dbArtists = data?.db_artists || [];
-    const artists = src.artists || [];
-    const allAlbums = src.albums || [];
-    const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
-    const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
-    const tracks = src.tracks || [];
-    const total = dbArtists.length + artists.length + albums.length + singles.length + tracks.length;
-    const isLoading = loading.size > 0;
-
-    if (total === 0 && !isLoading) {
-        results.innerHTML = `<div class="gsearch-empty">No results for "${_escToast(_gsState.query)}"<br><span style="font-size:10px;opacity:0.5">Try different keywords or check spelling</span></div>`;
-        results.classList.add('visible');
-        return;
-    }
-
-    const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase', youtube_videos: 'Music Videos', musicbrainz: 'MusicBrainz' };
-    const srcLabel = sourceLabels[_gsState.activeSource] || _gsState.activeSource || '';
-
-    let h = '';
-    h += `<div class="gsearch-results-header"><span class="gsearch-results-title">Results</span><span class="gsearch-results-count">${total} items</span></div>`;
-    h += '<div class="gsearch-tabs" id="gsearch-tabs"></div>';
-    h += '<div class="gsearch-results-body">';
-
-    if (dbArtists.length) {
-        h += '<div class="gsearch-section-header">📚 In Your Library</div><div class="gsearch-grid">';
-        h += dbArtists.map(a => `<div class="gsearch-item" onclick="_gsClickArtist('${a.id}', '${_escAttr(a.name)}', true)"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎤'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">Library</div></div></div>`).join('');
-        h += '</div>';
-    }
-
-    if (artists.length) {
-        h += `<div class="gsearch-section-header">🎤 Artists <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid" id="gsearch-artists-grid">`;
-        h += artists.map(a => `<div class="gsearch-item" onclick="_gsClickArtist('${a.id}', '${_escAttr(a.name)}', false)" ${!a.image_url ? `data-artist-id="${a.id}" data-needs-image="true"` : ''}><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎤'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div></div></div>`).join('');
-        h += '</div>';
-    } else if (loading.has('artists')) {
-        h += `<div class="gsearch-section-header">🎤 Artists <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading artists...</div>`;
-    }
-
-    const activeSrc = _gsState.activeSource || 'spotify';
-
-    if (albums.length) {
-        h += `<div class="gsearch-section-header">💿 Albums <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid">`;
-        h += albums.map(a => {
-            const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
-            const yr = a.release_date ? a.release_date.substring(0, 4) : '';
-            const img = (a.image_url || '').replace(/'/g, "\\'");
-            return `<div class="gsearch-item" onclick="_gsClickAlbum('${a.id}', '${_escAttr(a.name)}', '${_escAttr(ar)}', '${img}', '${activeSrc}')"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '💿'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}${yr ? ` · ${yr}` : ''}</div></div></div>`;
-        }).join('');
-        h += '</div>';
-    }
-
-    if (!albums.length && !singles.length && loading.has('albums')) {
-        h += `<div class="gsearch-section-header">💿 Albums <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading albums...</div>`;
-    }
-
-    if (singles.length) {
-        h += `<div class="gsearch-section-header">🎶 Singles & EPs <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-grid">`;
-        h += singles.map(a => {
-            const ar = a.artist || (a.artists ? a.artists.join(', ') : '');
-            const img = (a.image_url || '').replace(/'/g, "\\'");
-            return `<div class="gsearch-item" onclick="_gsClickAlbum('${a.id}', '${_escAttr(a.name)}', '${_escAttr(ar)}', '${img}', '${activeSrc}')"><div class="gsearch-item-art">${a.image_url ? `<img src="${a.image_url}" loading="lazy">` : '🎶'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(a.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}</div></div></div>`;
-        }).join('');
-        h += '</div>';
-    }
-
-    if (tracks.length) {
-        h += `<div class="gsearch-section-header">🎵 Tracks <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-track-list">`;
-        h += tracks.map(t => {
-            const ar = t.artist || (t.artists ? t.artists.join(', ') : '');
-            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
-            return `<div class="gsearch-track" onclick="_gsClickTrack('${_escAttr(ar)}', '${_escAttr(t.name)}', '${_escAttr(t.album || '')}', '${_escAttr(t.id || '')}', '${_escAttr(t.image_url || '')}', ${t.duration_ms || 0})"><div class="gsearch-item-art" style="width:32px;height:32px;border-radius:6px">${t.image_url ? `<img src="${t.image_url}" loading="lazy">` : '🎵'}</div><div class="gsearch-item-info"><div class="gsearch-item-title">${_escToast(t.name)}</div><div class="gsearch-item-sub">${_escToast(ar)}${t.album ? ` · ${_escToast(t.album)}` : ''}</div></div><div class="gsearch-track-dur">${dur}</div><button class="gsearch-play-btn" onclick="event.stopPropagation(); _gsPlayTrack('${_escAttr(t.name)}', '${_escAttr(ar)}', '${_escAttr(t.album || '')}')" title="Stream">▶</button></div>`;
-        }).join('');
-        h += '</div>';
-    } else if (loading.has('tracks')) {
-        h += `<div class="gsearch-section-header">🎵 Tracks <span class="gsearch-source-badge">${srcLabel}</span></div><div class="gsearch-section-loading"><div class="server-search-spinner" style="width:14px;height:14px"></div> Loading tracks...</div>`;
-    }
-
-    h += '</div>';
-    results.innerHTML = h;
-    results.classList.add('visible');
-    _gsRenderTabs();
-
-    // Lazy load artist images for sources that don't provide them (iTunes/Deezer)
-    _gsLazyLoadArtistImages();
-}
-
-async function _gsLazyLoadArtistImages() {
-    const grid = document.getElementById('gsearch-artists-grid');
-    if (!grid) return;
-    const cards = grid.querySelectorAll('[data-needs-image="true"]');
-    if (cards.length === 0) return;
-    const activeSrc = _gsState.activeSource || 'spotify';
-
-    for (const card of cards) {
-        const artistId = card.dataset.artistId;
-        if (!artistId) continue;
-        try {
-            const res = await fetch(`/api/artist/${artistId}/image?source=${activeSrc}`);
-            const data = await res.json();
-            if (data.success && data.image_url) {
-                const artDiv = card.querySelector('.gsearch-item-art');
-                if (artDiv) artDiv.innerHTML = `<img src="${data.image_url}" loading="lazy">`;
-                card.removeAttribute('data-needs-image');
-            }
-        } catch (e) { /* ignore */ }
-    }
-}
-
-function _gsRenderTabs() {
-    const el = document.getElementById('gsearch-tabs');
-    if (!el) return;
-    const sources = Object.keys(_gsState.sources);
-    const labels = {
-        spotify: 'Spotify',
-        itunes: 'Apple Music',
-        deezer: 'Deezer',
-        discogs: 'Discogs',
-        hydrabase: 'Hydrabase',
-        youtube_videos: 'Music Videos',
-        musicbrainz: 'MusicBrainz',
-    };
-    const visibleSources = sources.filter(s => {
-        const d = _gsState.sources[s] || {};
-        const count = s === 'youtube_videos'
-            ? (d.videos?.length || 0)
-            : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
-        const isLoading = !!(d._loading && d._loading.size > 0);
-        return isLoading || count > 0 || s === _gsState.activeSource;
-    });
-    if (visibleSources.length < 2) { el.style.display = 'none'; return; }
-    el.style.display = 'flex';
-    el.innerHTML = visibleSources.map(s => {
-        const d = _gsState.sources[s];
-        const c = s === 'youtube_videos'
-            ? (d.videos?.length || 0)
-            : (d.artists?.length || 0) + (d.albums?.length || 0) + (d.tracks?.length || 0);
-        return `<button class="gsearch-tab${s === _gsState.activeSource ? ' active' : ''}" onclick="_gsSwitchSource('${s}')">${labels[s] || s} (${c})</button>`;
-    }).join('');
-}
-
-function _gsSwitchSource(src) {
-    _gsState._lastInteraction = Date.now();
-    _gsState.activeSource = src;
-    _gsRender(_gsState.data);
-    const input = document.getElementById('gsearch-input');
-    if (input) input.focus();
-}
-
-function _gsClickArtist(id, name, isLibrary) {
-    _gsDeactivate();
-    if (isLibrary) {
-        // Same as enhanced search: navigateToArtistDetail
-        navigateToArtistDetail(id, name);
-    } else {
-        // Same as enhanced search: navigate to Artists page + selectArtistForDetail
-        navigateToPage('artists');
-        setTimeout(() => {
-            selectArtistForDetail({ id, name, image_url: '' }, {
-                source: _gsState.activeSource || '',
-            });
-        }, 150);
-    }
-}
-
-async function _gsClickAlbum(albumId, albumName, artistName, imageUrl, source) {
-    _gsDeactivate();
-    // Same flow as handleEnhancedSearchAlbumClick — fetch album, open download modal
-    showLoadingOverlay('Loading album...');
-    try {
-        const params = new URLSearchParams({ name: albumName, artist: artistName });
-        if (source && source !== 'spotify') params.set('source', source);
-        const response = await fetch(`/api/spotify/album/${albumId}?${params}`);
-        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
-        const albumData = await response.json();
-
-        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-            hideLoadingOverlay();
-            showToast(`No tracks available for "${albumName}"`, 'warning');
-            return;
-        }
-
-        const enrichedTracks = albumData.tracks.map(t => ({
-            ...t,
-            album: { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks }
-        }));
-
-        const virtualPlaylistId = `enhanced_search_album_${albumId}`;
-        const firstArtist = (albumData.artists || [])[0] || {};
-        const artistObj = { id: firstArtist.id || '', name: firstArtist.name || artistName, source: source || '' };
-        const albumObj = { name: albumData.name, id: albumData.id, album_type: albumData.album_type || 'album', images: albumData.images || [], release_date: albumData.release_date, total_tracks: albumData.total_tracks, artists: albumData.artists || [{ name: artistName }] };
-
-        await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, `[${artistName}] ${albumData.name}`, enrichedTracks, albumObj, artistObj, false);
-
-        // Register download bubble (same pattern as enhanced search)
-        registerSearchDownload(
-            {
-                id: albumData.id,
-                name: albumData.name,
-                artist: artistName,
-                image_url: albumData.images?.[0]?.url || imageUrl || null,
-                images: albumData.images || []
-            },
-            'album',
-            virtualPlaylistId,
-            artistName
-        );
-
-    } catch (e) {
-        hideLoadingOverlay();
-        showToast('Failed to load album: ' + e.message, 'error');
-    }
-}
-
-async function _gsClickTrack(artistName, trackName, albumName, trackId, imageUrl, durationMs) {
-    _gsDeactivate();
-
-    // Build enriched track + open download modal directly (same as enhanced search)
-    const virtualPlaylistId = `gsearch_track_${trackId || (artistName + '_' + trackName).replace(/\s/g, '_')}`;
-    const enrichedTrack = {
-        id: trackId || '',
-        name: trackName,
-        artists: [artistName],
-        album: { name: albumName || '', id: null, album_type: 'single', images: imageUrl ? [{ url: imageUrl }] : [], total_tracks: 1 },
-        duration_ms: durationMs || 0,
-        image_url: imageUrl || '',
-    };
-    const albumObject = {
-        name: albumName || '', id: null, album_type: 'single',
-        images: imageUrl ? [{ url: imageUrl }] : [],
-        artists: [{ name: artistName }], total_tracks: 1,
-    };
-    const artistObject = { id: null, name: artistName };
-    const playlistName = `${artistName} - ${trackName}`;
-
-    try {
-        showLoadingOverlay('Loading track...');
-        await openDownloadMissingModalForArtistAlbum(
-            virtualPlaylistId, playlistName, [enrichedTrack], albumObject, artistObject, false
-        );
-
-        // Register download bubble (same pattern as enhanced search)
-        registerSearchDownload(
-            {
-                id: trackId || '',
-                name: trackName,
-                artist: artistName,
-                image_url: imageUrl || null,
-                images: imageUrl ? [{ url: imageUrl }] : []
-            },
-            'track',
-            virtualPlaylistId,
-            artistName
-        );
-    } catch (e) {
-        console.error('Error opening track download:', e);
-        // Fallback: navigate to enhanced search
-        navigateToPage('downloads');
-        setTimeout(() => {
-            const input = document.getElementById('enhanced-search-input');
-            if (input) { input.value = `${artistName} ${trackName}`.trim(); input.dispatchEvent(new Event('input')); }
-        }, 300);
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-async function _gsPlayTrack(trackName, artistName, albumName) {
-    try {
-        showToast('Searching for stream...', 'info');
-        const res = await fetch('/api/enhanced-search/stream-track', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_name: trackName, artist_name: artistName, album_name: albumName })
-        });
-        const data = await res.json();
-        if (data.success && data.result) {
-            if (typeof startStream === 'function') {
-                startStream(data.result);
-            } else {
-                showToast('Streaming not available', 'error');
-            }
-        } else {
-            showToast(data.error || 'No stream found', 'error');
-        }
-    } catch (e) {
-        showToast('Stream failed: ' + e.message, 'error');
-    }
-}
-
-// Async library check for global search results — adds badges + swaps play buttons
-async function _gsLibraryCheck() {
-    try {
-        const src = _gsState.sources[_gsState.activeSource] || {};
-        const allAlbums = src.albums || [];
-        const albums = allAlbums.filter(a => !a.album_type || a.album_type === 'album' || a.album_type === 'compilation');
-        const singles = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
-        const tracks = src.tracks || [];
-        if (!allAlbums.length && !tracks.length) return;
-
-        const res = await fetch('/api/enhanced-search/library-check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                albums: allAlbums.map(a => ({ name: a.name, artist: a.artist || (a.artists ? a.artists.join(', ') : '') })),
-                tracks: tracks.map(t => ({ name: t.name, artist: t.artist || (t.artists ? t.artists.join(', ') : '') })),
-            })
-        });
-        const checkData = await res.json();
-
-        // Add "In Library" badges to albums — match by index against allAlbums order
-        const albumResults = checkData.albums || [];
-        let albumIdx = 0;
-        // Albums section
-        document.querySelectorAll('#gsearch-results .gsearch-results-body').forEach(body => {
-            // Find all gsearch-item elements and tag ones that are albums
-            const sections = body.querySelectorAll('.gsearch-section-header');
-            sections.forEach(header => {
-                const text = header.textContent;
-                const isAlbumSection = text.includes('Albums') || text.includes('Singles');
-                if (!isAlbumSection) return;
-                const grid = header.nextElementSibling;
-                if (!grid) return;
-                const items = grid.querySelectorAll('.gsearch-item');
-                items.forEach(item => {
-                    if (albumIdx < albumResults.length && albumResults[albumIdx]) {
-                        if (!item.querySelector('.gsearch-item-badge')) {
-                            const badge = document.createElement('span');
-                            badge.className = 'gsearch-item-badge';
-                            badge.textContent = 'In Library';
-                            item.appendChild(badge);
-                        }
-                    }
-                    albumIdx++;
-                });
-            });
-        });
-
-        // Tag tracks + swap play buttons for library playback
-        const trackResults = checkData.tracks || [];
-        const trackEls = document.querySelectorAll('#gsearch-results .gsearch-track');
-        trackEls.forEach((el, i) => {
-            const tr = trackResults[i];
-            if (tr && tr.in_library) {
-                // Add badge
-                if (!el.querySelector('.gsearch-item-badge')) {
-                    const badge = document.createElement('span');
-                    badge.className = 'gsearch-item-badge';
-                    badge.textContent = 'In Library';
-                    badge.style.marginRight = '4px';
-                    el.querySelector('.gsearch-track-dur')?.before(badge);
-                }
-
-                // Swap play button to library playback
-                if (tr.file_path) {
-                    const playBtn = el.querySelector('.gsearch-play-btn');
-                    if (playBtn) {
-                        const newBtn = playBtn.cloneNode(true);
-                        newBtn.removeAttribute('onclick');
-                        newBtn.title = 'Play from library';
-                        newBtn.style.background = 'rgba(76,175,80,0.15)';
-                        newBtn.style.color = '#4caf50';
-                        newBtn.addEventListener('click', e => {
-                            e.stopPropagation();
-                            playLibraryTrack(
-                                { id: tr.track_id, title: tr.title, file_path: tr.file_path, _stats_image: tr.album_thumb_url || null },
-                                tr.album_title || '',
-                                tr.artist_name || ''
-                            );
-                        });
-                        playBtn.replaceWith(newBtn);
-                    }
-                }
-            } else if (tr && tr.in_wishlist) {
-                if (!el.querySelector('.gsearch-item-badge')) {
-                    const badge = document.createElement('span');
-                    badge.className = 'gsearch-item-badge gsearch-wishlist-badge';
-                    badge.textContent = 'In Wishlist';
-                    badge.style.marginRight = '4px';
-                    el.querySelector('.gsearch-track-dur')?.before(badge);
-                }
-            }
-        });
-    } catch (e) {
-        // Non-critical
-    }
-}
-
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-/**
- * Escape a value for safe use inside a single-quoted JS string literal
- * within a double-quoted HTML attribute (e.g. onclick="fn('${val}')").
- *
- * Layer 1 (JS): escape \ and ' so the JS string parses correctly.
- * Layer 2 (HTML): escape &, ", <, > so the HTML attribute parses correctly.
- * The browser applies these in reverse: HTML-decode first, then JS-execute.
- */
-function escapeForInlineJs(str) {
-    if (str == null) return '';
-    return String(str)
-        .replace(/\\/g, '\\\\')   // JS: literal backslash
-        .replace(/'/g, "\\'")     // JS: single quote
-        .replace(/&/g, '&amp;')   // HTML: ampersand
-        .replace(/"/g, '&quot;')  // HTML: double quote
-        .replace(/</g, '&lt;')    // HTML: less-than
-        .replace(/>/g, '&gt;');   // HTML: greater-than
-}
-
-function formatArtists(artists) {
-    if (!artists || !Array.isArray(artists)) {
-        return 'Unknown Artist';
-    }
-
-    // Handle both string arrays and object arrays with 'name' property
-    const artistNames = artists.map(artist => {
-        let artistName;
-        if (typeof artist === 'string') {
-            artistName = artist;
-        } else if (artist && typeof artist === 'object' && artist.name) {
-            artistName = artist.name;
-        } else {
-            artistName = 'Unknown Artist';
-        }
-
-        // Clean featured artists from the name
-        return cleanArtistName(artistName);
-    });
-
-    return artistNames.join(', ') || 'Unknown Artist';
-}
-
-async function checkForUpdates() {
-    try {
-        const res = await fetch('/api/update-check');
-        if (!res.ok) return;
-        const data = await res.json();
-        const btn = document.querySelector('.version-button');
-        if (!btn) return;
-        if (data.update_available) {
-            const dismissed = localStorage.getItem('soulsync-update-dismissed');
-            if (dismissed !== data.latest_sha) {
-                // Add glow class
-                btn.classList.add('update-available');
-                // Add UPDATE badge if not already present
-                if (!btn.querySelector('.update-badge')) {
-                    const badge = document.createElement('span');
-                    badge.className = 'update-badge';
-                    badge.textContent = 'UPDATE';
-                    btn.appendChild(badge);
-                }
-                // Show toast on first detection (not if already notified this session)
-                const notified = sessionStorage.getItem('soulsync-update-notified');
-                if (notified !== data.latest_sha) {
-                    sessionStorage.setItem('soulsync-update-notified', data.latest_sha);
-                    showToast(data.is_docker
-                        ? 'A new SoulSync update has been pushed to the repo — Docker image will be updated soon!'
-                        : 'A new SoulSync update is available!', 'info');
-                }
-            }
-        } else {
-            btn.classList.remove('update-available');
-            const badge = btn.querySelector('.update-badge');
-            if (badge) badge.remove();
-        }
-    } catch (e) {
-        console.debug('Update check failed:', e);
-    }
-}
-
-async function showVersionInfo() {
-    // Check update status before dismissing so we can pass it to the modal
-    let updateInfo = null;
-    const btn = document.querySelector('.version-button');
-    const hadUpdate = btn && btn.classList.contains('update-available');
-
-    // Dismiss update glow when user opens the modal
-    if (hadUpdate) {
-        btn.classList.remove('update-available');
-        const badge = btn.querySelector('.update-badge');
-        if (badge) badge.remove();
-        try {
-            const updateRes = await fetch('/api/update-check');
-            if (updateRes.ok) {
-                updateInfo = await updateRes.json();
-                if (updateInfo.latest_sha) {
-                    localStorage.setItem('soulsync-update-dismissed', updateInfo.latest_sha);
-                }
-            }
-        } catch (e) { /* ignore */ }
-    }
-
-    try {
-        console.log('Fetching version info...');
-
-        // Fetch version data from API
-        const response = await fetch('/api/version-info');
-        if (!response.ok) {
-            throw new Error('Failed to fetch version info');
-        }
-
-        const versionData = await response.json();
-        console.log('Version data received:', versionData);
-
-        // Populate modal content
-        populateVersionModal(versionData, hadUpdate ? updateInfo : null);
-
-        // Show modal
-        const modalOverlay = document.getElementById('version-modal-overlay');
-        modalOverlay.classList.remove('hidden');
-
-        console.log('Version modal opened');
-
-    } catch (error) {
-        console.error('Error showing version info:', error);
-        showToast('Failed to load version information', 'error');
-    }
-}
-
-function closeVersionModal() {
-    const modalOverlay = document.getElementById('version-modal-overlay');
-    modalOverlay.classList.add('hidden');
-    console.log('Version modal closed');
-}
-
-function populateVersionModal(versionData, updateInfo) {
-    const container = document.getElementById('version-content-container');
-    if (!container) {
-        console.error('Version content container not found');
-        return;
-    }
-
-    // Update header with dynamic data
-    const titleElement = document.querySelector('.version-modal-title');
-    const subtitleElement = document.querySelector('.version-modal-subtitle');
-
-    if (titleElement) titleElement.textContent = versionData.title;
-    if (subtitleElement) subtitleElement.textContent = versionData.subtitle;
-
-    // Clear existing content
-    container.innerHTML = '';
-
-    // Show update banner if an update was available when modal was opened
-    if (updateInfo && updateInfo.update_available) {
-        const banner = document.createElement('div');
-        banner.className = 'version-update-banner';
-        const isDocker = updateInfo.is_docker;
-        banner.innerHTML = `
-            <div class="version-update-banner-icon">&#x2B06;</div>
-            <div class="version-update-banner-text">
-                <strong>${isDocker ? 'Repo update detected' : 'New update available'}</strong>
-                <span>${isDocker
-                ? 'A new update has been pushed to the repo. The Docker image will be updated soon — no action needed yet.'
-                : `Your version: ${updateInfo.current_sha || 'unknown'} &rarr; Latest: ${updateInfo.latest_sha || 'unknown'}`}</span>
-            </div>
-        `;
-        container.appendChild(banner);
-    }
-
-    // Create sections
-    versionData.sections.forEach(section => {
-        const sectionDiv = document.createElement('div');
-        sectionDiv.className = 'version-feature-section';
-
-        // Section title
-        const titleDiv = document.createElement('div');
-        titleDiv.className = 'version-section-title';
-        titleDiv.textContent = section.title;
-        sectionDiv.appendChild(titleDiv);
-
-        // Section description
-        const descDiv = document.createElement('div');
-        descDiv.className = 'version-section-description';
-        descDiv.textContent = section.description;
-        sectionDiv.appendChild(descDiv);
-
-        // Features list
-        const featuresList = document.createElement('ul');
-        featuresList.className = 'version-feature-list';
-
-        section.features.forEach(feature => {
-            const featureItem = document.createElement('li');
-            featureItem.className = 'version-feature-item';
-            featureItem.textContent = feature;
-            featuresList.appendChild(featureItem);
-        });
-
-        sectionDiv.appendChild(featuresList);
-
-        // Usage note (if present)
-        if (section.usage_note) {
-            const usageDiv = document.createElement('div');
-            usageDiv.className = 'version-usage-note';
-            usageDiv.textContent = `💡 ${section.usage_note}`;
-            sectionDiv.appendChild(usageDiv);
-        }
-
-        container.appendChild(sectionDiv);
-    });
-
-    console.log('Version modal content populated');
-}
-
-// ===============================
-// ADDITIONAL STYLES FOR SEARCH RESULTS
-// ===============================
-
-// Add dynamic styles for search results (since they're created dynamically)
-const additionalStyles = `
-<style>
-.search-result-item {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    padding: 16px;
-    margin-bottom: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.search-result-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(29, 185, 84, 0.2);
-}
-
-.result-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 8px;
-}
-
-.result-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.result-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #ffffff;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.result-artist {
-    font-size: 12px;
-    color: #b3b3b3;
-    margin-bottom: 2px;
-}
-
-.result-album {
-    font-size: 11px;
-    color: #888888;
-}
-
-.result-actions {
-    display: flex;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-.stream-button, .download-button {
-    padding: 6px 12px;
-    border: none;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.stream-button {
-    background: rgba(var(--accent-rgb), 0.1);
-    color: rgb(var(--accent-light-rgb));
-    border: 1px solid rgba(var(--accent-rgb), 0.3);
-}
-
-.stream-button:hover {
-    background: rgba(29, 185, 84, 0.2);
-    border-color: rgba(29, 185, 84, 0.5);
-}
-
-.download-button {
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.download-button:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: #ffffff;
-}
-
-.result-details {
-    display: flex;
-    gap: 16px;
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.6);
-}
-
-.result-quality {
-    color: rgb(var(--accent-light-rgb));
-    font-weight: 500;
-}
-
-.no-results, .no-artists, .error {
-    text-align: center;
-    color: rgba(255, 255, 255, 0.5);
-    padding: 40px 20px;
-    font-size: 14px;
-}
-
-.artist-card {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 16px;
-    text-align: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.artist-card:hover {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(29, 185, 84, 0.2);
-}
-
-.artist-image {
-    width: 120px;
-    height: 120px;
-    margin: 0 auto 12px auto;
-    border-radius: 8px;
-    overflow: hidden;
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.artist-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.artist-placeholder {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    color: rgba(255, 255, 255, 0.3);
-}
-
-.artist-name {
-    font-size: 14px;
-    font-weight: 600;
-    color: #ffffff;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.artist-albums {
-    font-size: 12px;
-    color: #b3b3b3;
-}
-</style>
-`;
-
-// Inject additional styles
-document.head.insertAdjacentHTML('beforeend', additionalStyles);
-
-// ============================================================================
-// DISCOVERY FIX MODAL - Manual Track Matching
-// ============================================================================
-
-// Global state for discovery fix
-let currentDiscoveryFix = {
-    platform: null,    // 'youtube', 'tidal', 'beatport'
-    identifier: null,  // url_hash or playlist_id
-    trackIndex: null,
-    sourceTrack: null,
-    sourceArtist: null
-};
-
-// Store event handler reference to allow proper removal
-let discoveryFixEnterHandler = null;
-
-/**
- * Open discovery fix modal for a specific track
- */
-function openDiscoveryFixModal(platform, identifier, trackIndex) {
-    console.log(`🔧 Opening fix modal: ${platform} - ${identifier} - track ${trackIndex}`);
-
-    // Get the discovery state
-    // Note: Beatport, Tidal, and ListenBrainz have their own states, but reuse YouTube modal infrastructure
-    let state, result;
-    if (platform === 'youtube') {
-        // Check both states - ListenBrainz also uses YouTube modal infrastructure
-        state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
-    } else if (platform === 'tidal') {
-        state = youtubePlaylistStates[identifier]; // Tidal uses YouTube state infrastructure
-    } else if (platform === 'beatport') {
-        state = youtubePlaylistStates[identifier]; // Beatport uses YouTube state infrastructure
-    } else if (platform === 'listenbrainz') {
-        state = listenbrainzPlaylistStates[identifier]; // ListenBrainz has its own state
-    } else if (platform === 'deezer') {
-        state = youtubePlaylistStates[identifier]; // Deezer uses YouTube state infrastructure
-    } else if (platform === 'mirrored') {
-        state = youtubePlaylistStates[identifier]; // Mirrored playlists use YouTube state infrastructure
-    } else if (platform === 'spotify_public') {
-        state = youtubePlaylistStates[identifier]; // Spotify public playlists use YouTube state infrastructure
-    }
-
-    // Support both camelCase and snake_case for discovery results
-    const results = state?.discoveryResults || state?.discovery_results;
-    result = results?.[trackIndex];
-
-    if (!result) {
-        console.error('❌ Track data not found');
-        console.error('  Platform:', platform);
-        console.error('  Identifier:', identifier);
-        console.error('  State:', state);
-        console.error('  Discovery results (camelCase):', state?.discoveryResults?.length);
-        console.error('  Discovery results (snake_case):', state?.discovery_results?.length);
-        showToast('Track data not found', 'error');
-        return;
-    }
-
-    console.log('✅ Found result:', result);
-
-    // Store context
-    currentDiscoveryFix = {
-        platform,
-        identifier,
-        trackIndex,
-        sourceTrack: result.lb_track || result.yt_track || result.tidal_track?.name || result.beatport_track?.title || result.track_name || 'Unknown Track',
-        sourceArtist: result.lb_artist || result.yt_artist || result.tidal_track?.artist || result.beatport_track?.artist || result.artist_name || 'Unknown Artist'
-    };
-
-    // Find the fix modal within the active discovery modal
-    const discoveryModal = document.getElementById(`youtube-discovery-modal-${identifier}`);
-    if (!discoveryModal) {
-        console.error('❌ Discovery modal not found:', identifier);
-        showToast('Discovery modal not found', 'error');
-        return;
-    }
-
-    const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
-    if (!fixModalOverlay) {
-        console.error('❌ Fix modal not found within discovery modal');
-        showToast('Fix modal not found', 'error');
-        return;
-    }
-
-    console.log('🔍 Source track:', currentDiscoveryFix.sourceTrack);
-    console.log('🔍 Source artist:', currentDiscoveryFix.sourceArtist);
-    console.log('🔍 Fix modal overlay found:', fixModalOverlay);
-
-    // Populate modal - scope within the specific fix modal overlay to handle duplicate IDs
-    const sourceTrackEl = fixModalOverlay.querySelector('#fix-modal-source-track');
-    const sourceArtistEl = fixModalOverlay.querySelector('#fix-modal-source-artist');
-    const trackInput = fixModalOverlay.querySelector('#fix-modal-track-input');
-    const artistInput = fixModalOverlay.querySelector('#fix-modal-artist-input');
-
-    console.log('🔍 Elements found:', {
-        sourceTrackEl,
-        sourceArtistEl,
-        trackInput,
-        artistInput
-    });
-
-    if (!sourceTrackEl || !sourceArtistEl || !trackInput || !artistInput) {
-        console.error('❌ Fix modal elements not found in DOM');
-        showToast('Fix modal not properly initialized', 'error');
-        return;
-    }
-
-    sourceTrackEl.textContent = currentDiscoveryFix.sourceTrack;
-    sourceArtistEl.textContent = currentDiscoveryFix.sourceArtist;
-    trackInput.value = currentDiscoveryFix.sourceTrack;
-    artistInput.value = currentDiscoveryFix.sourceArtist;
-
-    console.log('✅ Populated modal with:', {
-        track: trackInput.value,
-        artist: artistInput.value
-    });
-
-    // Remove old enter key handler if exists
-    if (discoveryFixEnterHandler) {
-        trackInput.removeEventListener('keypress', discoveryFixEnterHandler);
-        artistInput.removeEventListener('keypress', discoveryFixEnterHandler);
-    }
-
-    // Add new enter key handler
-    discoveryFixEnterHandler = function (e) {
-        if (e.key === 'Enter') searchDiscoveryFix();
-    };
-    trackInput.addEventListener('keypress', discoveryFixEnterHandler);
-    artistInput.addEventListener('keypress', discoveryFixEnterHandler);
-
-    // Show modal BEFORE auto-search so elements are visible
-    fixModalOverlay.classList.remove('hidden');
-    console.log('✅ Fix modal opened, starting auto-search...');
-
-    // Auto-search with initial values (delay allows modal layout to settle and prevents accidental clicks)
-    setTimeout(() => searchDiscoveryFix(), 500);
-}
-
-/**
- * Close discovery fix modal
- */
-function closeDiscoveryFixModal() {
-    if (!currentDiscoveryFix.identifier) {
-        console.warn('No active fix modal to close');
-        return;
-    }
-
-    const discoveryModal = document.getElementById(`youtube-discovery-modal-${currentDiscoveryFix.identifier}`);
-    if (discoveryModal) {
-        const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
-        if (fixModalOverlay) {
-            fixModalOverlay.classList.add('hidden');
-        }
-    }
-
-    currentDiscoveryFix = { platform: null, identifier: null, trackIndex: null, sourceTrack: null, sourceArtist: null };
-}
-
-/**
- * Search for tracks in Spotify
- */
-async function searchDiscoveryFix() {
-    if (!currentDiscoveryFix.identifier) {
-        console.error('No active fix modal context');
-        return;
-    }
-
-    const discoveryModal = document.getElementById(`youtube-discovery-modal-${currentDiscoveryFix.identifier}`);
-    if (!discoveryModal) {
-        console.error('Discovery modal not found');
-        return;
-    }
-
-    const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
-    if (!fixModalOverlay) {
-        console.error('Fix modal not found');
-        return;
-    }
-
-    const trackInput = fixModalOverlay.querySelector('#fix-modal-track-input').value.trim();
-    const artistInput = fixModalOverlay.querySelector('#fix-modal-artist-input').value.trim();
-
-    if (!trackInput && !artistInput) {
-        showToast('Enter track name or artist', 'error');
-        return;
-    }
-
-    const resultsContainer = fixModalOverlay.querySelector('#fix-modal-results');
-
-    // Build search params
-    const params = new URLSearchParams();
-    if (trackInput) params.set('track', trackInput);
-    if (artistInput) params.set('artist', artistInput);
-    if (!trackInput && !artistInput) {
-        resultsContainer.innerHTML = '<div class="no-results">Enter a track name or artist.</div>';
-        return;
-    }
-    params.set('limit', '50');
-
-    // Use the user's active metadata source first, then fall back to others
-    const activeSource = (currentMusicSourceName || 'Spotify').toLowerCase();
-    const allSources = [
-        { key: 'spotify', endpoint: '/api/spotify/search_tracks', label: 'Spotify' },
-        { key: 'deezer', endpoint: '/api/deezer/search_tracks', label: 'Deezer' },
-        { key: 'itunes', endpoint: '/api/itunes/search_tracks', label: 'iTunes' },
-    ];
-    // Put the active source first, keep others as fallbacks
-    const activeIdx = allSources.findIndex(s => activeSource.includes(s.key));
-    const searchSources = activeIdx > 0
-        ? [allSources[activeIdx], ...allSources.filter((_, i) => i !== activeIdx)]
-        : allSources;
-
-    resultsContainer.innerHTML = `<div class="loading">🔍 Searching ${searchSources[0].label}...</div>`;
-
-    try {
-        for (let i = 0; i < searchSources.length; i++) {
-            const source = searchSources[i];
-            try {
-                const response = await fetch(`${source.endpoint}?${params.toString()}`);
-                const data = await response.json();
-
-                if (data.tracks && data.tracks.length > 0) {
-                    renderDiscoveryFixResults(data.tracks, fixModalOverlay);
-                    return;
-                }
-                // No results from this source — show next source status if there is one
-                if (i < searchSources.length - 1) {
-                    resultsContainer.innerHTML = `<div class="loading">🔍 Trying ${searchSources[i + 1].label}...</div>`;
-                }
-            } catch (e) {
-                console.warn(`Discovery fix search failed on ${source.label}: ${e.message}`);
-            }
-        }
-        // All sources exhausted
-        resultsContainer.innerHTML = '<div class="no-results">No matches found on any source. Try different search terms.</div>';
-
-    } catch (error) {
-        console.error('Search error:', error);
-        resultsContainer.innerHTML = '<div class="error-message">❌ Search failed. Try again.</div>';
-    }
-}
-
-/**
- * Render search results as clickable cards
- */
-function renderDiscoveryFixResults(tracks, fixModalOverlay) {
-    const resultsContainer = fixModalOverlay.querySelector('#fix-modal-results');
-    resultsContainer.innerHTML = '';
-
-    // Sort: standard album versions first, live/remix/cover/soundtrack last
-    const _variantPattern = /\b(live|remix|remaster|refix|cover|acoustic|demo|instrumental|radio edit|single version|deluxe|edition|soundtrack|from .* film|from .* movie|bonus track)\b|\b\w+ mix\b/i;
-    const _albumVariantPattern = /\b(live|greatest hits|best of|collection|compilation|soundtrack|from .* film|from .* movie|remaster|deluxe|redux|expanded|anniversary)\b/i;
-    tracks.sort((a, b) => {
-        const aVariant = _variantPattern.test(a.name || '') || _albumVariantPattern.test(a.album || '');
-        const bVariant = _variantPattern.test(b.name || '') || _albumVariantPattern.test(b.album || '');
-        if (aVariant !== bVariant) return aVariant ? 1 : -1;
-        return 0; // preserve original order within same category
-    });
-
-    tracks.forEach(track => {
-        const card = document.createElement('div');
-        card.className = 'fix-result-card';
-        card.onclick = () => selectDiscoveryFixTrack(track);
-
-        card.innerHTML = `
-            <div class="fix-result-card-content">
-                <div class="fix-result-title">${escapeHtml(track.name || 'Unknown Track')}</div>
-                <div class="fix-result-artist">${escapeHtml((track.artists || ['Unknown Artist']).join(', '))}</div>
-                <div class="fix-result-album">${escapeHtml(track.album || 'Unknown Album')}</div>
-                <div class="fix-result-duration">${formatDuration(track.duration_ms || 0)}</div>
-            </div>
-        `;
-
-        resultsContainer.appendChild(card);
-    });
-}
-
-/**
- * User selected a track - update discovery state
- */
-async function selectDiscoveryFixTrack(track) {
-    console.log('✅ User selected track:', track);
-
-    // Confirm selection to prevent accidental clicks from layout shift
-    const artists = (track.artists || ['Unknown Artist']).join(', ');
-    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
-
-    const { platform, identifier, trackIndex } = currentDiscoveryFix;
-
-    console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track });
-
-    // Update backend
-    try {
-        // Get the correct backend identifier based on platform
-        let backendIdentifier = identifier;
-
-        if (platform === 'tidal') {
-            // For Tidal, backend expects the actual playlist_id, not url_hash
-            const state = youtubePlaylistStates[identifier];
-            backendIdentifier = state?.tidal_playlist_id || identifier;
-        } else if (platform === 'deezer') {
-            // For Deezer, backend expects the actual playlist_id, not url_hash
-            const state = youtubePlaylistStates[identifier];
-            backendIdentifier = state?.deezer_playlist_id || identifier;
-        } else if (platform === 'spotify_public') {
-            // For Spotify Public, backend expects the url_hash
-            const state = youtubePlaylistStates[identifier];
-            backendIdentifier = state?.spotify_public_playlist_id || identifier;
-        } else if (platform === 'beatport') {
-            // For Beatport, backend expects url_hash (same as identifier)
-            backendIdentifier = identifier;
-        }
-
-        // Mirrored playlists route through the YouTube endpoint (which already handles mirrored_ prefixes)
-        const apiPlatform = platform === 'mirrored' ? 'youtube' : (platform === 'spotify_public' ? 'spotify-public' : platform);
-
-        const requestBody = {
-            identifier: backendIdentifier,
-            track_index: trackIndex,
-            spotify_track: {
-                id: track.id,
-                name: track.name,
-                artists: track.artists,
-                album: track.album,
-                duration_ms: track.duration_ms,
-                image_url: track.image_url || null
-            }
-        };
-
-        console.log('📡 Request body:', requestBody);
-        console.log('📡 Backend identifier:', backendIdentifier);
-
-        const response = await fetch(`/api/${apiPlatform}/discovery/update_match`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(requestBody)
-        });
-
-        console.log('📡 Response status:', response.status);
-
-        const data = await response.json();
-
-        console.log('📡 Response data:', data);
-
-        if (data.error) {
-            showToast(`Failed to update: ${data.error}`, 'error');
-            console.error('❌ Backend update failed:', data.error);
-            return;
-        }
-
-        showToast('Match updated successfully!', 'success');
-        console.log('✅ Backend update successful');
-
-        // Update frontend state
-        // Note: Beatport and Tidal reuse youtubePlaylistStates for discovery results
-        // ListenBrainz uses its own state but may also be accessed via YouTube
-        let state;
-        if (platform === 'youtube') {
-            state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
-        } else if (platform === 'tidal') {
-            state = youtubePlaylistStates[identifier];
-        } else if (platform === 'deezer') {
-            state = youtubePlaylistStates[identifier];
-        } else if (platform === 'beatport') {
-            state = youtubePlaylistStates[identifier];
-        } else if (platform === 'listenbrainz') {
-            state = listenbrainzPlaylistStates[identifier];
-        } else if (platform === 'mirrored') {
-            state = youtubePlaylistStates[identifier];
-        } else if (platform === 'spotify_public') {
-            state = youtubePlaylistStates[identifier];
-        }
-
-        // Support both camelCase and snake_case
-        const results = state?.discoveryResults || state?.discovery_results;
-        if (state && results && results[trackIndex]) {
-            const result = results[trackIndex];
-            const wasNotFound = result.status !== 'found' && result.status_class !== 'found';
-
-            // Update result
-            result.status = '✅ Found';
-            result.status_class = 'found';
-            result.spotify_track = track.name;
-            result.spotify_artist = Array.isArray(track.artists)
-                ? track.artists
-                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                    .filter(Boolean)
-                    .join(', ') || '-'
-                : (track.artists || '-');
-            result.spotify_album = track.album;
-            result.spotify_id = track.id;
-            result.duration = formatDuration(track.duration_ms);
-            result.manual_match = true;
-            // User picked a real metadata match — no longer a wing-it track
-            result.wing_it_fallback = false;
-
-            // IMPORTANT: Also set spotify_data for download/sync compatibility.
-            // Build album as a dict (not a bare string) so the download
-            // pipeline can find cover art via album.image_url / album.images.
-            // This matches the shape that normal discovery produces.
-            const _fixImageUrl = track.image_url || '';
-            let _fixAlbumObj;
-            if (track.album && typeof track.album === 'object') {
-                _fixAlbumObj = { ...track.album };
-                if (_fixImageUrl && !_fixAlbumObj.image_url) _fixAlbumObj.image_url = _fixImageUrl;
-                if (_fixImageUrl && !_fixAlbumObj.images) _fixAlbumObj.images = [{ url: _fixImageUrl }];
-            } else {
-                _fixAlbumObj = { name: track.album || '' };
-                if (_fixImageUrl) {
-                    _fixAlbumObj.image_url = _fixImageUrl;
-                    _fixAlbumObj.images = [{ url: _fixImageUrl }];
-                }
-            }
-            result.spotify_data = {
-                id: track.id,
-                name: track.name,
-                artists: track.artists,
-                album: _fixAlbumObj,
-                duration_ms: track.duration_ms,
-                image_url: _fixImageUrl
-            };
-
-            // Increment match count if this was previously not_found or error
-            if (wasNotFound) {
-                state.spotifyMatches = (state.spotifyMatches || 0) + 1;
-
-                // Update progress bar and text
-                const spotify_total = state.spotify_total || state.playlist?.tracks?.length || 0;
-                const progress = spotify_total > 0 ? Math.round((state.spotifyMatches / spotify_total) * 100) : 0;
-
-                const progressBar = document.getElementById(`youtube-discovery-progress-${identifier}`);
-                const progressText = document.getElementById(`youtube-discovery-progress-text-${identifier}`);
-
-                if (progressBar) {
-                    progressBar.style.width = `${progress}%`;
-                }
-                if (progressText) {
-                    progressText.textContent = `${state.spotifyMatches} / ${spotify_total} tracks matched (${progress}%)`;
-                }
-
-                console.log(`✅ Updated progress: ${state.spotifyMatches}/${spotify_total} (${progress}%)`);
-
-                // Also update the Deezer playlist card if this is a Deezer fix
-                if (platform === 'deezer' && state.deezer_playlist_id) {
-                    const deezerState = deezerPlaylistStates[state.deezer_playlist_id];
-                    if (deezerState) {
-                        deezerState.spotifyMatches = state.spotifyMatches;
-                        updateDeezerCardProgress(state.deezer_playlist_id, {
-                            spotify_matches: state.spotifyMatches,
-                            spotify_total: spotify_total
-                        });
-                    }
-                }
-
-                // Also update the Tidal playlist card if this is a Tidal fix
-                if (platform === 'tidal' && state.tidal_playlist_id) {
-                    const tidalState = tidalPlaylistStates?.[state.tidal_playlist_id];
-                    if (tidalState) {
-                        tidalState.spotifyMatches = state.spotifyMatches;
-                    }
-                }
-
-                // Also update the Spotify Public playlist card if this is a Spotify Public fix
-                if (platform === 'spotify_public' && state.spotify_public_playlist_id) {
-                    const spState = spotifyPublicPlaylistStates?.[state.spotify_public_playlist_id];
-                    if (spState) {
-                        spState.spotifyMatches = state.spotifyMatches;
-                        updateSpotifyPublicCardProgress(state.spotify_public_playlist_id, {
-                            spotify_matches: state.spotifyMatches,
-                            spotify_total: spotify_total
-                        });
-                    }
-                }
-            }
-
-            // Update UI - refresh the table row
-            updateDiscoveryModalSingleRow(platform, identifier, trackIndex);
-        }
-
-        // Close modal
-        closeDiscoveryFixModal();
-
-    } catch (error) {
-        console.error('Error updating match:', error);
-        showToast('Failed to update match', 'error');
-    }
-}
-
-/**
- * Update a single row in the discovery modal table
- */
-function updateDiscoveryModalSingleRow(platform, identifier, trackIndex) {
-    // Check both state maps - ListenBrainz uses its own, others reuse youtubePlaylistStates
-    const state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
-
-    // Support both camelCase and snake_case
-    const results = state?.discoveryResults || state?.discovery_results;
-    if (!state || !results || !results[trackIndex]) {
-        console.warn(`Cannot update row: state or result not found`);
-        return;
-    }
-
-    const result = results[trackIndex];
-    const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
-
-    if (!row) {
-        console.warn(`Cannot update row: row element not found for ${identifier}-${trackIndex}`);
-        return;
-    }
-
-    // Update cells
-    const statusCell = row.querySelector('.discovery-status');
-    const spotifyTrackCell = row.querySelector('.spotify-track');
-    const spotifyArtistCell = row.querySelector('.spotify-artist');
-    const spotifyAlbumCell = row.querySelector('.spotify-album');
-    const actionsCell = row.querySelector('.discovery-actions');
-
-    if (statusCell) {
-        statusCell.textContent = result.status;
-        statusCell.className = `discovery-status ${result.status_class}`;
-    }
-
-    if (spotifyTrackCell) spotifyTrackCell.textContent = result.spotify_track || '-';
-    if (spotifyArtistCell) spotifyArtistCell.textContent = result.spotify_artist || '-';
-    if (spotifyAlbumCell) spotifyAlbumCell.textContent = result.spotify_album || '-';
-
-    // Update action button
-    if (actionsCell) {
-        actionsCell.innerHTML = generateDiscoveryActionButton(result, identifier, platform);
-    }
-
-    console.log(`✅ Updated row ${trackIndex} in discovery modal`);
-}
-
-async function unmatchDiscoveryTrack(platform, identifier, trackIndex) {
-    // Determine the correct API base for this platform
-    const apiBase = platform === 'tidal' ? '/api/tidal'
-        : platform === 'deezer' ? '/api/deezer'
-        : platform === 'spotify-public' ? '/api/spotify-public'
-        : platform === 'beatport' ? '/api/beatport'
-        : platform === 'listenbrainz' ? '/api/listenbrainz'
-        : '/api/youtube';
-
-    try {
-        const response = await fetch(`${apiBase}/discovery/unmatch`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ identifier, track_index: trackIndex })
-        });
-        const data = await response.json();
-        if (data.success) {
-            // Update the row in the discovery modal table
-            const state = youtubePlaylistStates[identifier]
-                || (window.tidalDiscoveryStates && window.tidalDiscoveryStates[identifier])
-                || {};
-            if (state.discovery_results && state.discovery_results[trackIndex]) {
-                const r = state.discovery_results[trackIndex];
-                r.status = '❌ Not Found';
-                r.status_class = 'not-found';
-                r.spotify_track = '-';
-                r.spotify_artist = '-';
-                r.spotify_album = '-';
-                r.spotify_data = null;
-                r.matched_data = null;
-                r.confidence = 0;
-                r.wing_it_fallback = false;
-                r.manual_match = false;
-            }
-            // Re-render the row — discovery rows use id="discovery-row-{urlHash}-{index}"
-            const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
-            if (row) {
-                const statusCell = row.querySelector('.discovery-status');
-                if (statusCell) { statusCell.textContent = '❌ Not Found'; statusCell.className = 'discovery-status not-found'; }
-                const matchedCells = row.querySelectorAll('.spotify-track, .spotify-artist, .spotify-album');
-                matchedCells.forEach(c => c.textContent = '-');
-                const actionsCell = row.querySelector('.discovery-actions');
-                if (actionsCell) {
-                    actionsCell.innerHTML = `<button class="fix-match-btn" onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${trackIndex})" title="Manually search for this track">🔧 Fix</button>`;
-                }
-            }
-            showToast('Match removed', 'success');
-        } else {
-            showToast(data.error || 'Failed to remove match', 'error');
-        }
-    } catch (e) {
-        console.error('Unmatch error:', e);
-        showToast('Failed to remove match', 'error');
-    }
-}
-
-// Make functions available globally for onclick handlers
-window.openDiscoveryFixModal = openDiscoveryFixModal;
-window.closeDiscoveryFixModal = closeDiscoveryFixModal;
-window.searchDiscoveryFix = searchDiscoveryFix;
-window.unmatchDiscoveryTrack = unmatchDiscoveryTrack;
-window.openMatchingModal = openMatchingModal;
-window.closeMatchingModal = closeMatchingModal;
-window.selectArtist = selectArtist;
-window.selectAlbum = selectAlbum;
-window.navigateToPage = navigateToPage;
-window.showSupportModal = showSupportModal;
-window.closeSupportModal = closeSupportModal;
-window.copyAddress = copyAddress;
-window.retryLastSearch = retryLastSearch;
-window.showVersionInfo = showVersionInfo;
-window.closeVersionModal = closeVersionModal;
-window.testConnection = testConnection;
-window.autoDetectPlex = autoDetectPlex;
-window.autoDetectJellyfin = autoDetectJellyfin;
-window.autoDetectSlskd = autoDetectSlskd;
-window.startPlexPinAuth = startPlexPinAuth;
-window.cancelPlexPinAuth = cancelPlexPinAuth;
-window.restartPlexPinAuth = restartPlexPinAuth;
-window.showPlexConfiguration = showPlexConfiguration;
-window.toggleServer = toggleServer;
-window.authenticateSpotify = authenticateSpotify;
-window.authenticateTidal = authenticateTidal;
-window.togglePathLock = togglePathLock;
-window.selectResult = selectResult;
-window.startStream = startStream;
-window.streamTrack = streamTrack;
-window.streamAlbumTrack = streamAlbumTrack;
-window.startDownload = startDownload;
-window.downloadTrack = downloadTrack;
-window.downloadAlbum = downloadAlbum;
-window.toggleAlbumExpansion = toggleAlbumExpansion;
-window.downloadAlbumTrack = downloadAlbumTrack;
-window.switchDownloadTab = switchDownloadTab;
-window.cancelDownloadItem = cancelDownloadItem;
-window.clearFinishedDownloads = clearFinishedDownloads;
-
-window.matchedDownloadTrack = matchedDownloadTrack;
-window.matchedDownloadAlbum = matchedDownloadAlbum;
-window.matchedDownloadAlbumTrack = matchedDownloadAlbumTrack;
-
-/**
- * Handle post-download cleanup: clear finished downloads from slskd.
- * Scan and database update are now handled by system automations
- * (batch_complete → scan_library → library_scan_completed → start_database_update).
- */
-async function handlePostDownloadAutomation(playlistId, process) {
-    try {
-        const successfulDownloads = getSuccessfulDownloadCount(process);
-        if (successfulDownloads === 0) {
-            console.log(`🔄 [AUTO] No successful downloads for ${playlistId} - skipping cleanup`);
-            return;
-        }
-        console.log(`🔄 [AUTO] Post-download cleanup for ${playlistId} (${successfulDownloads} successful downloads)`);
-
-        // Clear completed downloads from slskd
-        try {
-            const clearResponse = await fetch('/api/downloads/clear-finished', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' }
-            });
-            if (clearResponse.ok) {
-                console.log(`✅ [AUTO] Completed downloads cleared`);
-            } else {
-                console.warn(`⚠️ [AUTO] Clear downloads failed, continuing anyway`);
-            }
-        } catch (error) {
-            console.warn(`⚠️ [AUTO] Clear error: ${error.message}`);
-        }
-    } catch (error) {
-        console.error(`❌ [AUTO] Error in post-download cleanup: ${error.message}`);
-    }
-}
-
-/**
- * Extract successful download count from a download process
- */
-function getSuccessfulDownloadCount(process) {
-    try {
-        // For processes that have completed, check the modal for completed count
-        if (process && process.modalElement) {
-            const statElement = process.modalElement.querySelector('[id*="stat-downloaded-"]');
-            if (statElement && statElement.textContent) {
-                const count = parseInt(statElement.textContent, 10);
-                return isNaN(count) ? 0 : count;
-            }
-        }
-
-        // Fallback: assume successful if process completed without obvious failure
-        if (process && process.status === 'complete') {
-            return 1; // Conservative assumption for single download
-        }
-
-        return 0;
-    } catch (error) {
-        console.warn(`⚠️ [AUTO] Error getting successful download count: ${error.message}`);
-        return 0;
-    }
-}
-
-// ===============================
-// ADD TO WISHLIST MODAL FUNCTIONS
-// ===============================
-
-let currentWishlistModalData = null;
-let wishlistModalVersion = 0;
-
-/**
- * Open the Add to Wishlist modal for an album/EP/single
- * @param {Object} album - Album object with id, name, image_url, etc.
- * @param {Object} artist - Artist object with id, name, image_url
- * @param {Array} tracks - Array of track objects
- * @param {string} albumType - Type of release (album, EP, single)
- */
-async function openAddToWishlistModal(album, artist, tracks, albumType, trackOwnership) {
-    wishlistModalVersion++;
-    showLoadingOverlay('Preparing wishlist...');
-    console.log(`🎵 Opening Add to Wishlist modal for: ${artist.name} - ${album.name}`);
-
-    try {
-        // Store current modal data for use by other functions
-        currentWishlistModalData = {
-            album,
-            artist,
-            tracks,
-            albumType
-        };
-
-        const modal = document.getElementById('add-to-wishlist-modal');
-        const overlay = document.getElementById('add-to-wishlist-modal-overlay');
-
-        if (!modal || !overlay) {
-            console.error('Add to wishlist modal elements not found');
-            return;
-        }
-
-        // Generate and populate hero section
-        const heroContent = generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership);
-        const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
-        if (heroContainer) {
-            heroContainer.innerHTML = heroContent;
-        }
-
-        // Generate and populate track list
-        const trackListHTML = generateWishlistTrackList(tracks, trackOwnership);
-        const trackListContainer = document.getElementById('wishlist-track-list');
-        if (trackListContainer) {
-            trackListContainer.innerHTML = trackListHTML;
-        }
-
-        // Set up the "Add to Wishlist" button click handler
-        const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
-        if (addToWishlistBtn) {
-            addToWishlistBtn.onclick = () => handleAddToWishlist();
-        }
-
-        // Show the modal
-        overlay.classList.remove('hidden');
-        hideLoadingOverlay();
-
-        console.log(`✅ Successfully opened Add to Wishlist modal for: ${album.name}`);
-
-    } catch (error) {
-        console.error('❌ Error opening Add to Wishlist modal:', error);
-        hideLoadingOverlay();
-        showToast(`Error opening wishlist modal: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Generate the hero section HTML for the wishlist modal
- */
-function generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership) {
-    const artistImage = artist.image_url || '';
-    const albumImage = album.image_url || '';
-    const trackCount = tracks.length;
-
-    // Calculate missing tracks if ownership info is available
-    let trackDetailText = `${trackCount} track${trackCount !== 1 ? 's' : ''}`;
-    if (trackOwnership) {
-        const ownedCount = Object.values(trackOwnership).filter(v => v === true).length;
-        const missingCount = trackCount - ownedCount;
-        if (missingCount > 0 && ownedCount > 0) {
-            trackDetailText = `${missingCount} of ${trackCount} tracks missing`;
-        }
-    }
-
-    let heroBackgroundImage = '';
-    if (albumImage) {
-        heroBackgroundImage = `<div class="add-to-wishlist-modal-hero-bg" style="background-image: url('${albumImage}');"></div>`;
-    }
-
-    const heroContent = `
-        <div class="add-to-wishlist-modal-hero-content">
-            <div class="add-to-wishlist-modal-hero-images">
-                ${artistImage ? `<img class="add-to-wishlist-modal-hero-image artist" src="${artistImage}" alt="${escapeHtml(artist.name)}">` : ''}
-                ${albumImage ? `<img class="add-to-wishlist-modal-hero-image album" src="${albumImage}" alt="${escapeHtml(album.name)}">` : ''}
-            </div>
-            <div class="add-to-wishlist-modal-hero-metadata">
-                <h1 class="add-to-wishlist-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
-                <div class="add-to-wishlist-modal-hero-subtitle">by ${escapeHtml(artist.name || 'Unknown Artist')}</div>
-                <div class="add-to-wishlist-modal-hero-details">
-                    <span class="add-to-wishlist-modal-hero-detail">${albumType || 'Album'}</span>
-                    <span class="add-to-wishlist-modal-hero-detail">${trackDetailText}</span>
-                </div>
-            </div>
-        </div>
-    `;
-
-    return `
-        ${heroBackgroundImage}
-        ${heroContent}
-    `;
-}
-
-/**
- * Generate the track list HTML for the wishlist modal
- */
-function generateWishlistTrackList(tracks, trackOwnership) {
-    if (!tracks || tracks.length === 0) {
-        return '<div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.6);">No tracks found</div>';
-    }
-
-    return tracks.map((track, index) => {
-        const trackNumber = track.track_number || (index + 1);
-        const trackName = escapeHtml(track.name || 'Unknown Track');
-        const artistsString = formatArtists(track.artists) || 'Unknown Artist';
-        const duration = formatDuration(track.duration_ms);
-
-        const trackData = trackOwnership ? trackOwnership[track.name] : null;
-        const isOwned = trackData && (trackData.owned === true || trackData === true);
-        const isKnown = trackData !== null && trackData !== undefined;
-        const ownershipClass = isOwned ? 'owned' : (isKnown && !isOwned ? 'missing' : '');
-        const badge = isOwned
-            ? '<div class="wishlist-track-badge owned"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></div>'
-            : '';
-
-        return `
-            <div class="wishlist-track-item ${ownershipClass}">
-                <div class="wishlist-track-number">${trackNumber}</div>
-                <div class="wishlist-track-info">
-                    <div class="wishlist-track-name">${trackName}</div>
-                    <div class="wishlist-track-artists">${artistsString}</div>
-                </div>
-                <div class="wishlist-track-duration">${duration}</div>
-                ${badge}
-            </div>
-        `;
-    }).join('');
-}
-
-/**
- * Handle the "Add to Wishlist" button click
- */
-async function handleAddToWishlist() {
-    if (!currentWishlistModalData) {
-        console.error('❌ No wishlist modal data available');
-        return;
-    }
-
-    const { album, artist, tracks, albumType } = currentWishlistModalData;
-    const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
-
-    try {
-        // Show loading state
-        if (addToWishlistBtn) {
-            addToWishlistBtn.classList.add('loading');
-            addToWishlistBtn.textContent = 'Adding...';
-            addToWishlistBtn.disabled = true;
-        }
-
-        console.log(`🔄 Adding ${tracks.length} tracks to wishlist for: ${artist.name} - ${album.name}`);
-
-        let successCount = 0;
-        let errorCount = 0;
-
-        // Add each track to wishlist individually
-        for (const track of tracks) {
-            try {
-                // Ensure artists field is in the correct format (array of objects)
-                let formattedArtists = track.artists;
-                if (typeof track.artists === 'string') {
-                    // If artists is a string, convert to array of objects
-                    formattedArtists = [{ name: track.artists }];
-                } else if (Array.isArray(track.artists)) {
-                    // If artists is already an array, ensure each item is an object
-                    formattedArtists = track.artists.map(artistItem => {
-                        if (typeof artistItem === 'string') {
-                            return { name: artistItem };
-                        } else if (typeof artistItem === 'object' && artistItem !== null) {
-                            return artistItem;
-                        } else {
-                            return { name: 'Unknown Artist' };
-                        }
-                    });
-                } else {
-                    // Fallback to array with single artist object
-                    formattedArtists = [{ name: artist.name }];
-                }
-
-                const formattedTrack = {
-                    ...track,
-                    artists: formattedArtists
-                };
-
-                // Use track's album data if available (from API), falling back to modal's album data
-                // This ensures consistency with how the Artists page handles wishlisting
-                let trackAlbum = track.album;
-                let trackAlbumType = albumType || 'album';
-
-                if (trackAlbum && typeof trackAlbum === 'object') {
-                    // Track has album data from API - use its album_type
-                    trackAlbumType = trackAlbum.album_type || albumType || 'album';
-                    // Ensure album has required fields
-                    if (!trackAlbum.name) {
-                        trackAlbum.name = album.name;
-                    }
-                    if (!trackAlbum.id) {
-                        trackAlbum.id = album.id;
-                    }
-                } else {
-                    // Fall back to the album passed to the modal
-                    trackAlbum = album;
-                }
-
-                console.log(`🔄 Adding track with formatted artists:`, formattedTrack.name, formattedTrack.artists);
-                console.log(`🔄 Using album_type: ${trackAlbumType} (from ${track.album ? 'track.album' : 'modal album'})`);
-
-                const response = await fetch('/api/add-album-to-wishlist', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        track: formattedTrack,
-                        artist: artist,
-                        album: trackAlbum,
-                        source_type: 'album',
-                        source_context: {
-                            album_name: trackAlbum.name,
-                            artist_name: artist.name,
-                            album_type: trackAlbumType
-                        }
-                    })
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    successCount++;
-                    console.log(`✅ Added "${track.name}" to wishlist`);
-                } else {
-                    errorCount++;
-                    console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
-                }
-
-            } catch (error) {
-                errorCount++;
-                console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
-            }
-        }
-
-        // Show completion message
-        if (successCount > 0) {
-            const message = errorCount > 0
-                ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
-                : `Added ${successCount} tracks to wishlist`;
-            showToast(message, successCount === tracks.length ? 'success' : 'warning');
-        } else {
-            showToast('Failed to add any tracks to wishlist', 'error');
-        }
-
-        // Close the modal
-        closeAddToWishlistModal();
-
-        console.log(`✅ Wishlist addition complete: ${successCount} successful, ${errorCount} failed`);
-
-    } catch (error) {
-        console.error('❌ Error in handleAddToWishlist:', error);
-        showToast(`Error adding to wishlist: ${error.message}`, 'error');
-    } finally {
-        // Reset button state
-        if (addToWishlistBtn) {
-            addToWishlistBtn.classList.remove('loading');
-            addToWishlistBtn.textContent = 'Add to Wishlist';
-            addToWishlistBtn.disabled = false;
-        }
-    }
-}
-
-/**
- * Lazy-load per-track ownership indicators into an already-open wishlist modal.
- * Fetches ownership from the backend, then updates the modal DOM in-place.
- * If all tracks are owned (Spotify metadata discrepancy), also fixes the source card.
- */
-async function lazyLoadTrackOwnership(artistName, tracks, sourceCard, albumName = null) {
-    const myVersion = wishlistModalVersion;
-    try {
-        const checkBody = {
-            artist_name: artistName,
-            tracks: tracks.map(t => ({ name: t.name, track_number: t.track_number }))
-        };
-        if (albumName) checkBody.album_name = albumName;
-        const resp = await fetch('/api/library/check-tracks', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(checkBody)
-        });
-        const data = await resp.json();
-        if (!data.success) return;
-
-        // Guard against stale updates if user reopened modal for a different album
-        if (myVersion !== wishlistModalVersion) return;
-
-        const ownership = data.owned_tracks;
-        const trackItems = document.querySelectorAll('#wishlist-track-list .wishlist-track-item');
-
-        let ownedCount = 0;
-        trackItems.forEach((item, index) => {
-            const track = tracks[index];
-            if (!track) return;
-            const trackData = ownership[track.name];
-            const isOwned = trackData && trackData.owned === true;
-            if (isOwned) {
-                ownedCount++;
-                item.classList.add('owned');
-                // Add metadata line below track name
-                const trackInfo = item.querySelector('.wishlist-track-info');
-                if (trackInfo && (trackData.format || trackData.bitrate)) {
-                    const metaDiv = document.createElement('div');
-                    metaDiv.className = 'wishlist-track-meta';
-                    let metaHtml = '';
-                    if (trackData.format === 'MP3' && trackData.bitrate) {
-                        metaHtml += `<span class="wishlist-track-format">MP3 ${trackData.bitrate}</span>`;
-                    } else {
-                        if (trackData.format) {
-                            metaHtml += `<span class="wishlist-track-format">${trackData.format}</span>`;
-                        }
-                        if (trackData.bitrate) {
-                            metaHtml += `<span class="wishlist-track-bitrate">${trackData.bitrate} kbps</span>`;
-                        }
-                    }
-                    metaDiv.innerHTML = metaHtml;
-                    trackInfo.appendChild(metaDiv);
-                }
-                const badge = document.createElement('div');
-                badge.className = 'wishlist-track-badge owned';
-                badge.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
-                item.appendChild(badge);
-            } else {
-                item.classList.add('missing');
-            }
-        });
-
-        // Aggregate format summary from owned tracks
-        const formatSet = new Set();
-        for (const trackName of Object.keys(ownership)) {
-            const td = ownership[trackName];
-            if (td && td.owned && td.format) {
-                if (td.format === 'MP3' && td.bitrate) {
-                    formatSet.add(`MP3-${td.bitrate}`);
-                } else {
-                    formatSet.add(td.format);
-                }
-            }
-        }
-        if (formatSet.size > 0) {
-            const heroDetailsContainer = document.querySelector('.add-to-wishlist-modal-hero-details');
-            if (heroDetailsContainer) {
-                // Remove any existing format tag
-                const existing = heroDetailsContainer.querySelector('.modal-format-tag');
-                if (existing) existing.remove();
-                const formatTag = document.createElement('span');
-                formatTag.className = 'modal-format-tag';
-                formatTag.textContent = [...formatSet].sort().join(' / ');
-                heroDetailsContainer.appendChild(formatTag);
-            }
-        }
-
-        // Update hero subtitle with missing count
-        const missingCount = tracks.length - ownedCount;
-        const heroDetails = document.querySelectorAll('.add-to-wishlist-modal-hero-detail');
-        const trackDetailEl = heroDetails.length > 1 ? heroDetails[heroDetails.length - 1] : null;
-        if (trackDetailEl && missingCount > 0 && ownedCount > 0) {
-            trackDetailEl.textContent = `${missingCount} of ${tracks.length} tracks missing`;
-        }
-
-        // If ALL returned tracks are owned, this is a Spotify metadata discrepancy
-        // (e.g. total_tracks says 15 but API only returns 14, and all 14 are owned)
-        // Fix the source card to show complete
-        if (missingCount === 0 && sourceCard && sourceCard._releaseData) {
-            sourceCard._releaseData.track_completion = {
-                owned_tracks: ownedCount,
-                total_tracks: tracks.length,
-                percentage: 100,
-                missing_tracks: 0
-            };
-            const completionText = sourceCard.querySelector('.completion-text');
-            if (completionText) {
-                completionText.textContent = `Complete (${ownedCount})`;
-                completionText.className = 'completion-text complete';
-                completionText.title = '';
-            }
-            const completionFill = sourceCard.querySelector('.completion-fill');
-            if (completionFill) {
-                completionFill.style.width = '100%';
-                completionFill.classList.remove('partial');
-                completionFill.classList.add('complete');
-            }
-        }
-    } catch (e) {
-        console.warn('Could not load track ownership:', e);
-    }
-}
-
-/**
- * Close the Add to Wishlist modal
- */
-function closeAddToWishlistModal() {
-    console.log('🔄 Closing Add to Wishlist modal');
-
-    try {
-        const overlay = document.getElementById('add-to-wishlist-modal-overlay');
-        if (overlay) {
-            overlay.classList.add('hidden');
-        }
-
-        // Clear current modal data
-        currentWishlistModalData = null;
-
-        // Clear hero content
-        const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
-        if (heroContainer) {
-            heroContainer.innerHTML = '';
-        }
-
-        // Clear track list
-        const trackListContainer = document.getElementById('wishlist-track-list');
-        if (trackListContainer) {
-            trackListContainer.innerHTML = '';
-        }
-
-        console.log('✅ Add to Wishlist modal closed successfully');
-
-    } catch (error) {
-        console.error('❌ Error closing Add to Wishlist modal:', error);
-    }
-}
-
-/**
- * Handle "Download Now" button click from the Add to Wishlist modal.
- * Captures modal data, closes the wishlist modal, then opens the download missing tracks modal.
- */
-async function handleWishlistDownloadNow() {
-    if (!currentWishlistModalData) {
-        showToast('No album data available', 'error');
-        return;
-    }
-
-    // Capture data before closeAddToWishlistModal clears it
-    const { album, artist, tracks, albumType } = currentWishlistModalData;
-
-    // Close the wishlist modal
-    closeAddToWishlistModal();
-
-    // Build virtual playlist ID and name (same pattern as createArtistAlbumVirtualPlaylist)
-    const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
-    const playlistName = `[${artist.name}] ${album.name}`;
-
-    // If a download process already exists for this album, just show the existing modal
-    if (activeDownloadProcesses[virtualPlaylistId]) {
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process.modalElement) {
-            process.modalElement.style.display = 'flex';
-        }
-        return;
-    }
-
-    // Open download missing modal (reuses existing function)
-    showLoadingOverlay('Loading album...');
-    await openDownloadMissingModalForArtistAlbum(
-        virtualPlaylistId, playlistName, tracks, album, artist, false
-    );
-    hideLoadingOverlay();
-
-    // Register download bubble (reuses existing artist bubble system)
-    registerArtistDownload(artist, album, virtualPlaylistId, albumType);
-}
-
-/**
- * Add all tracks from any download modal to the wishlist
- * Universal handler for all modal types (artist albums, playlists, YouTube, Tidal, etc.)
- */
-async function addModalTracksToWishlist(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) {
-        console.error('❌ No active process found for:', playlistId);
-        showToast('Error: Could not find playlist data', 'error');
-        return;
-    }
-
-    // Verify we have tracks
-    if (!process.tracks || process.tracks.length === 0) {
-        console.error('❌ No tracks found in process:', process);
-        showToast('Error: No tracks to add', 'error');
-        return;
-    }
-
-    // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
-    const wishlistTbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
-    let tracks = process.tracks;
-    if (wishlistTbody) {
-        const allCbs = wishlistTbody.querySelectorAll('.track-select-cb');
-        if (allCbs.length > 0) {
-            const checkedCbs = wishlistTbody.querySelectorAll('.track-select-cb:checked');
-            const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
-            tracks = process.tracks.filter((_, i) => selectedIndices.has(i));
-        }
-    }
-
-    // Get album context if available (for artist album downloads)
-    // Artist is resolved per-track below — process.artist is only set for album downloads,
-    // not for playlists, so we must NOT use it as a blanket default.
-    const processArtist = process.artist || null;
-    const album = process.album || process.playlist || { name: 'Playlist', id: playlistId };
-
-    console.log(`🔄 Adding ${tracks.length} tracks from "${album.name}" to wishlist (process artist: ${processArtist?.name || 'per-track'})`);
-
-    // Disable the button to prevent double-clicks
-    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
-    if (wishlistBtn) {
-        wishlistBtn.disabled = true;
-        wishlistBtn.classList.add('loading');
-        wishlistBtn.textContent = 'Adding...';
-    }
-
-    try {
-        let successCount = 0;
-        let errorCount = 0;
-
-        // Add each track to wishlist individually
-        let wingItSkipped = 0;
-        for (const track of tracks) {
-            try {
-                // Skip wing-it fallback tracks — they have no real metadata,
-                // adding them to wishlist would just retry with raw data
-                const trackId = track.id || '';
-                if (String(trackId).startsWith('wing_it_')) {
-                    wingItSkipped++;
-                    console.log(`⏭️ Skipping wing-it track from wishlist: ${track.name}`);
-                    continue;
-                }
-
-                // Format artists field to match backend expectations
-                let formattedArtists = track.artists;
-                if (typeof track.artists === 'string') {
-                    formattedArtists = [{ name: track.artists }];
-                } else if (Array.isArray(track.artists)) {
-                    formattedArtists = track.artists.map(artistItem => {
-                        if (typeof artistItem === 'string') {
-                            return { name: artistItem };
-                        } else if (typeof artistItem === 'object' && artistItem !== null) {
-                            return artistItem;
-                        } else {
-                            return { name: 'Unknown Artist' };
-                        }
-                    });
-                } else {
-                    formattedArtists = [{ name: artist.name }];
-                }
-
-                const formattedTrack = {
-                    ...track,
-                    artists: formattedArtists
-                };
-
-                // Use track's own album data if available
-                // Convert string album names to objects if needed (no Spotify fetch!)
-                let trackAlbum = track.album;
-                let trackAlbumType = 'album';
-
-                // Handle both object and string album formats
-                if (typeof trackAlbum === 'string') {
-                    // Album is just a string - convert to minimal object
-                    trackAlbum = {
-                        name: trackAlbum,
-                        album_type: 'album',
-                        images: []
-                    };
-                    trackAlbumType = 'album';
-                } else if (trackAlbum && typeof trackAlbum === 'object') {
-                    // Album is already an object - extract album_type
-                    trackAlbumType = trackAlbum.album_type || 'album';
-                    // Ensure it has a name
-                    if (!trackAlbum.name) {
-                        trackAlbum.name = 'Unknown Album';
-                    }
-                } else {
-                    // No album data at all - create minimal object
-                    trackAlbum = {
-                        name: 'Unknown Album',
-                        album_type: 'album',
-                        images: []
-                    };
-                    trackAlbumType = 'album';
-                }
-
-                // Resolve artist: for album downloads, use the album-level artist to keep
-                // all tracks grouped under one artist in the wishlist. Per-track artists
-                // (like individual vocalists on a soundtrack) should NOT split the album.
-                let trackArtist;
-                if (processArtist && processArtist.name) {
-                    // Album context exists — use album artist to keep tracks grouped
-                    trackArtist = processArtist;
-                } else if (formattedArtists.length > 0 && formattedArtists[0].name && formattedArtists[0].name !== 'Unknown Artist') {
-                    // No album context (playlist/single) — use track's own artist
-                    trackArtist = formattedArtists[0];
-                } else {
-                    trackArtist = { name: 'Unknown Artist', id: null };
-                }
-
-                const response = await fetch('/api/add-album-to-wishlist', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        track: formattedTrack,
-                        artist: trackArtist,
-                        album: trackAlbum,
-                        source_type: 'album',
-                        source_context: {
-                            album_name: trackAlbum.name,
-                            artist_name: trackArtist.name,
-                            album_type: trackAlbumType
-                        }
-                    })
-                });
-
-                const result = await response.json();
-
-                if (result.success) {
-                    successCount++;
-                } else {
-                    errorCount++;
-                    console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
-                }
-            } catch (error) {
-                errorCount++;
-                console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
-            }
-        }
-
-        // Show result toast
-        if (successCount > 0) {
-            let message = errorCount > 0
-                ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
-                : `Added ${successCount} tracks to wishlist`;
-            if (wingItSkipped > 0) message += ` (${wingItSkipped} wing-it skipped)`;
-            showToast(message, 'success');
-
-            // Close the modal on success
-            await closeDownloadMissingModal(playlistId);
-        } else {
-            showToast('Failed to add any tracks to wishlist', 'error');
-        }
-
-    } catch (error) {
-        console.error('❌ Error in addModalTracksToWishlist:', error);
-        showToast(`Error adding to wishlist: ${error.message}`, 'error');
-    } finally {
-        // Re-enable button if still on screen (in case of error)
-        if (wishlistBtn) {
-            wishlistBtn.disabled = false;
-            wishlistBtn.classList.remove('loading');
-            wishlistBtn.textContent = 'Add to Wishlist';
-        }
-    }
-}
-
-/**
- * Format duration from milliseconds to MM:SS format
- */
-function formatDuration(durationMs) {
-    if (!durationMs || durationMs <= 0) {
-        return '--:--';
-    }
-
-    const totalSeconds = Math.floor(durationMs / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-// Download Missing Tracks Modal functions
-window.openDownloadMissingModal = openDownloadMissingModal;
-window.closeDownloadMissingModal = closeDownloadMissingModal;
-window.startMissingTracksProcess = startMissingTracksProcess;
-window.cancelAllOperations = cancelAllOperations;
-window.cancelTrackDownload = cancelTrackDownload; // Legacy system
-window.cancelTrackDownloadV2 = cancelTrackDownloadV2; // NEW V2 system
-window.handleViewProgressClick = handleViewProgressClick;
-
-// Wishlist Modal functions (existing)
-window.openDownloadMissingWishlistModal = openDownloadMissingWishlistModal;
-window.startWishlistMissingTracksProcess = startWishlistMissingTracksProcess;
-window.handleWishlistButtonClick = handleWishlistButtonClick;
-
-// Wishlist Overview Modal functions (new)
-window.openWishlistOverviewModal = openWishlistOverviewModal;
-window.closeWishlistOverviewModal = closeWishlistOverviewModal;
-window.selectWishlistCategory = selectWishlistCategory;
-window.backToCategories = backToCategories;
-window.downloadSelectedCategory = downloadSelectedCategory;
-
-// Add to Wishlist Modal functions (new)
-window.openAddToWishlistModal = openAddToWishlistModal;
-window.closeAddToWishlistModal = closeAddToWishlistModal;
-window.handleAddToWishlist = handleAddToWishlist;
-window.handleWishlistDownloadNow = handleWishlistDownloadNow;
-window.addModalTracksToWishlist = addModalTracksToWishlist;
-
-// Helper functions
-window.escapeHtml = escapeHtml;
-window.formatArtists = formatArtists;
-
-// Artist Download Management functions
-window.closeArtistDownloadModal = closeArtistDownloadModal;
-window.openArtistDownloadProcess = openArtistDownloadProcess;
-window.bulkCompleteArtistDownloads = bulkCompleteArtistDownloads;
-window.refreshAllArtistDownloadStatuses = refreshAllArtistDownloadStatuses;
-
-
-// APPEND THIS JAVASCRIPT SNIPPET (B)
-
-function initializeFilters() {
-    const toggleBtn = document.getElementById('filter-toggle-btn');
-    const container = document.getElementById('filters-container');
-    const content = document.getElementById('filter-content');
-
-    if (toggleBtn && container && content) {
-        // Using .onclick ensures we only ever have one click handler
-        toggleBtn.onclick = () => {
-            const isExpanded = container.classList.contains('expanded');
-
-            if (isExpanded) {
-                // Collapse the container
-                container.classList.remove('expanded');
-                toggleBtn.textContent = '⏷ Filters';
-            } else {
-                // Expand the container
-                content.classList.remove('hidden'); // Make sure content is visible for animation
-                container.classList.add('expanded');
-                toggleBtn.textContent = '⏶ Filters';
-            }
-        };
-    }
-
-    // This part is correct and doesn't need to change
-    document.querySelectorAll('.filter-btn').forEach(button => {
-        button.addEventListener('click', handleFilterClick);
-    });
-}
-
-function handleFilterClick(event) {
-    const button = event.target;
-    const filterType = button.dataset.filterType;
-    const value = button.dataset.value;
-
-    if (filterType === 'type') currentFilterType = value;
-    if (filterType === 'format') currentFilterFormat = value;
-    if (filterType === 'sort') currentSortBy = value;
-
-    if (button.id === 'sort-order-btn') {
-        isSortReversed = !isSortReversed;
-        button.textContent = isSortReversed ? '↑' : '↓';
-    }
-
-    document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
-        btn.classList.remove('active');
-    });
-    if (filterType) { // Don't try to activate the sort order button
-        button.classList.add('active');
-    }
-
-    applyFiltersAndSort();
-}
-
-function resetFilters() {
-    currentFilterType = 'all';
-    currentFilterFormat = 'all';
-    currentSortBy = 'quality_score';
-    isSortReversed = false;
-
-    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
-    document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
-    document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
-    document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
-    document.getElementById('sort-order-btn').textContent = '↓';
-}
-
-function applyFiltersAndSort() {
-    let processedResults = [...allSearchResults];
-    const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
-
-    // 1. Filter by Type
-    if (currentFilterType !== 'all') {
-        processedResults = processedResults.filter(r => r.result_type === currentFilterType);
-    }
-
-    // 2. Filter by Format
-    if (currentFilterFormat !== 'all') {
-        processedResults = processedResults.filter(r => {
-            const quality = (r.dominant_quality || r.quality || '').toLowerCase();
-            return quality === currentFilterFormat;
-        });
-    }
-
-    // 3. Sort Results
-    processedResults.sort((a, b) => {
-        let valA, valB;
-
-        // Special handling for relevance sort
-        if (currentSortBy === 'relevance') {
-            valA = calculateRelevanceScore(a, query);
-            valB = calculateRelevanceScore(b, query);
-            return valB - valA; // Higher score is better
-        }
-
-        // Special handling for availability
-        if (currentSortBy === 'availability') {
-            valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
-            valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
-            return valB - valA;
-        }
-
-        valA = a[currentSortBy] || 0;
-        valB = b[currentSortBy] || 0;
-
-        if (typeof valA === 'string') {
-            // For name/title sort, use the correct property
-            const titleA = (a.album_title || a.title || '').toLowerCase();
-            const titleB = (b.album_title || b.title || '').toLowerCase();
-            return titleA.localeCompare(titleB);
-        }
-
-        // Default numeric sort (descending)
-        return valB - valA;
-    });
-
-    // Handle sort direction toggle
-    const sortDefaults = {
-        relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
-        upload_speed: 'desc', duration: 'desc', availability: 'desc',
-        title: 'asc', username: 'asc'
-    };
-
-    const defaultOrder = sortDefaults[currentSortBy] || 'desc';
-    if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
-        processedResults.reverse();
-    }
-
-    displayDownloadsResults(processedResults);
-}
-
-function calculateRelevanceScore(result, query) {
-    let score = 0.0;
-    const queryTerms = query.split(' ').filter(t => t.length > 1);
-
-    // 1. Search Term Matching (40%)
-    let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
-    let termMatches = 0;
-    for (const term of queryTerms) {
-        if (searchableText.includes(term)) {
-            termMatches++;
-        }
-    }
-    score += (termMatches / queryTerms.length) * 0.40;
-
-    // 2. Quality Score (25%)
-    score += (result.quality_score || 0) * 0.25;
-
-    // 3. User Reliability (Availability & Speed) (20%)
-    const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
-    score += reliability * 0.20;
-
-    // 4. File Completeness (Bitrate & Duration) (15%)
-    const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
-    score += completeness * 0.15;
-
-    return score;
-}
-// APPEND THIS JAVASCRIPT SNIPPET (B)
-
-function initializeFilters() {
-    const toggleBtn = document.getElementById('filter-toggle-btn');
-    const container = document.getElementById('filters-container');
-    const content = document.getElementById('filter-content');
-
-    if (toggleBtn && container && content) {
-        // Using .onclick ensures we only ever have one click handler
-        toggleBtn.onclick = () => {
-            const isExpanded = container.classList.contains('expanded');
-
-            if (isExpanded) {
-                // Collapse the container
-                container.classList.remove('expanded');
-                toggleBtn.textContent = '⏷ Filters';
-            } else {
-                // Expand the container
-                content.classList.remove('hidden'); // Make sure content is visible for animation
-                container.classList.add('expanded');
-                toggleBtn.textContent = '⏶ Filters';
-            }
-        };
-    }
-
-    // This part is correct and doesn't need to change
-    document.querySelectorAll('.filter-btn').forEach(button => {
-        button.addEventListener('click', handleFilterClick);
-    });
-}
-
-function handleFilterClick(event) {
-    const button = event.target;
-    const filterType = button.dataset.filterType;
-    const value = button.dataset.value;
-
-    if (filterType === 'type') currentFilterType = value;
-    if (filterType === 'format') currentFilterFormat = value;
-    if (filterType === 'sort') currentSortBy = value;
-
-    if (button.id === 'sort-order-btn') {
-        isSortReversed = !isSortReversed;
-        button.textContent = isSortReversed ? '↑' : '↓';
-    }
-
-    document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
-        btn.classList.remove('active');
-    });
-    if (filterType) { // Don't try to activate the sort order button
-        button.classList.add('active');
-    }
-
-    applyFiltersAndSort();
-}
-
-function resetFilters() {
-    currentFilterType = 'all';
-    currentFilterFormat = 'all';
-    currentSortBy = 'quality_score';
-    isSortReversed = false;
-
-    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
-    document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
-    document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
-    document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
-    document.getElementById('sort-order-btn').textContent = '↓';
-}
-
-function applyFiltersAndSort() {
-    let processedResults = [...allSearchResults];
-    const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
-
-    // 1. Filter by Type
-    if (currentFilterType !== 'all') {
-        processedResults = processedResults.filter(r => r.result_type === currentFilterType);
-    }
-
-    // 2. Filter by Format
-    if (currentFilterFormat !== 'all') {
-        processedResults = processedResults.filter(r => {
-            const quality = (r.dominant_quality || r.quality || '').toLowerCase();
-            return quality === currentFilterFormat;
-        });
-    }
-
-    // 3. Sort Results
-    processedResults.sort((a, b) => {
-        let valA, valB;
-
-        // Special handling for relevance sort
-        if (currentSortBy === 'relevance') {
-            valA = calculateRelevanceScore(a, query);
-            valB = calculateRelevanceScore(b, query);
-            return valB - valA; // Higher score is better
-        }
-
-        // Special handling for availability
-        if (currentSortBy === 'availability') {
-            valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
-            valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
-            return valB - valA;
-        }
-
-        valA = a[currentSortBy] || 0;
-        valB = b[currentSortBy] || 0;
-
-        if (typeof valA === 'string') {
-            // For name/title sort, use the correct property
-            const titleA = (a.album_title || a.title || '').toLowerCase();
-            const titleB = (b.album_title || b.title || '').toLowerCase();
-            return titleA.localeCompare(titleB);
-        }
-
-        // Default numeric sort (descending)
-        return valB - valA;
-    });
-
-    // Handle sort direction toggle
-    const sortDefaults = {
-        relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
-        upload_speed: 'desc', duration: 'desc', availability: 'desc',
-        title: 'asc', username: 'asc'
-    };
-
-    const defaultOrder = sortDefaults[currentSortBy] || 'desc';
-    if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
-        processedResults.reverse();
-    }
-
-    displayDownloadsResults(processedResults);
-}
-
-function calculateRelevanceScore(result, query) {
-    let score = 0.0;
-    const queryTerms = query.split(' ').filter(t => t.length > 1);
-
-    // 1. Search Term Matching (40%)
-    let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
-    let termMatches = 0;
-    for (const term of queryTerms) {
-        if (searchableText.includes(term)) {
-            termMatches++;
-        }
-    }
-    score += (termMatches / queryTerms.length) * 0.40;
-
-    // 2. Quality Score (25%)
-    score += (result.quality_score || 0) * 0.25;
-
-    // 3. User Reliability (Availability & Speed) (20%)
-    const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
-    score += reliability * 0.20;
-
-    // 4. File Completeness (Bitrate & Duration) (15%)
-    const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
-    score += completeness * 0.15;
-
-    return score;
-}
-
-// Add to global scope for onclick
-window.handleFilterClick = handleFilterClick;
-
-// ===============================
-// MATCHED DOWNLOADS MODAL
-// ===============================
-
-// Global state for matching modal
-let currentMatchingData = {
-    searchResult: null,
-    isAlbumDownload: false,
-    albumResult: null,
-    selectedArtist: null,
-    selectedAlbum: null,
-    currentStage: 'artist' // 'artist' or 'album'
-};
-
-let searchTimers = {
-    artist: null,
-    album: null
-};
-
-function openMatchingModal(searchResult, isAlbumDownload = false, albumResult = null) {
-    console.log('🎯 Opening matching modal for:', searchResult);
-
-    // Store the current matching data
-    currentMatchingData = {
-        searchResult: searchResult,
-        isAlbumDownload: isAlbumDownload,
-        albumResult: albumResult,
-        selectedArtist: null,
-        selectedAlbum: null,
-        currentStage: 'artist'
-    };
-
-    // Show modal
-    const overlay = document.getElementById('matching-modal-overlay');
-    overlay.classList.remove('hidden');
-
-    // Reset modal state
-    resetModalState();
-
-    // Set appropriate title and stage
-    const modalTitle = document.getElementById('matching-modal-title');
-    const artistStageTitle = document.getElementById('artist-stage-title');
-
-    if (isAlbumDownload) {
-        modalTitle.textContent = 'Match Album Download to Spotify';
-        artistStageTitle.textContent = 'Step 1: Select the correct Artist';
-        document.getElementById('album-selection-stage').style.display = 'block';
-    } else {
-        modalTitle.textContent = 'Match Download to Spotify';
-        artistStageTitle.textContent = 'Select the correct Artist for this Single';
-        document.getElementById('album-selection-stage').style.display = 'none';
-    }
-
-    // Generate initial artist suggestions
-    fetchArtistSuggestions();
-
-    // Setup event listeners
-    setupModalEventListeners();
-}
-
-function closeMatchingModal() {
-    const overlay = document.getElementById('matching-modal-overlay');
-    overlay.classList.add('hidden');
-
-    // Clear timers
-    Object.values(searchTimers).forEach(timer => {
-        if (timer) clearTimeout(timer);
-    });
-
-    // Reset state
-    currentMatchingData = {
-        searchResult: null,
-        isAlbumDownload: false,
-        albumResult: null,
-        selectedArtist: null,
-        selectedAlbum: null,
-        currentStage: 'artist'
-    };
-}
-
-function resetModalState() {
-    // Show artist stage, hide album stage
-    document.getElementById('artist-selection-stage').classList.remove('hidden');
-    document.getElementById('album-selection-stage').classList.add('hidden');
-
-    // Clear all suggestion containers
-    document.getElementById('artist-suggestions').innerHTML = '';
-    document.getElementById('artist-manual-results').innerHTML = '';
-    document.getElementById('album-suggestions').innerHTML = '';
-    document.getElementById('album-manual-results').innerHTML = '';
-
-    // Clear search inputs
-    document.getElementById('artist-search-input').value = '';
-    document.getElementById('album-search-input').value = '';
-
-    // Reset button states
-    document.getElementById('confirm-match-btn').disabled = true;
-
-    // Reset selections
-    currentMatchingData.selectedArtist = null;
-    currentMatchingData.selectedAlbum = null;
-    currentMatchingData.currentStage = 'artist';
-}
-
-function setupModalEventListeners() {
-    // Search input listeners
-    const artistInput = document.getElementById('artist-search-input');
-    const albumInput = document.getElementById('album-search-input');
-
-    artistInput.removeEventListener('input', handleArtistSearch);
-    artistInput.addEventListener('input', handleArtistSearch);
-
-    albumInput.removeEventListener('input', handleAlbumSearch);
-    albumInput.addEventListener('input', handleAlbumSearch);
-
-    // Button listeners
-    const skipBtn = document.getElementById('skip-matching-btn');
-    const cancelBtn = document.getElementById('cancel-match-btn');
-    const confirmBtn = document.getElementById('confirm-match-btn');
-
-    skipBtn.onclick = skipMatching;
-    cancelBtn.onclick = closeMatchingModal;
-    confirmBtn.onclick = confirmMatch;
-}
-
-async function fetchArtistSuggestions() {
-    try {
-        showLoadingCards('artist-suggestions', 'Finding artist...');
-
-        const response = await fetch('/api/match/suggestions', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                search_result: currentMatchingData.searchResult,
-                context: 'artist',
-                is_album: currentMatchingData.isAlbumDownload,
-                album_result: currentMatchingData.albumResult
-            })
-        });
-
-        const data = await response.json();
-        if (data.suggestions) {
-            renderArtistSuggestions(data.suggestions);
-        } else {
-            showNoResultsMessage('artist-suggestions', 'No artist suggestions found');
-        }
-    } catch (error) {
-        console.error('Error fetching artist suggestions:', error);
-        showNoResultsMessage('artist-suggestions', 'Error loading suggestions');
-    }
-}
-
-async function fetchAlbumSuggestions() {
-    if (!currentMatchingData.selectedArtist) return;
-
-    try {
-        showLoadingCards('album-suggestions', 'Finding album...');
-
-        const response = await fetch('/api/match/suggestions', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                search_result: currentMatchingData.searchResult,
-                context: 'album',
-                selected_artist: currentMatchingData.selectedArtist
-            })
-        });
-
-        const data = await response.json();
-        if (data.suggestions) {
-            renderAlbumSuggestions(data.suggestions);
-        } else {
-            showNoResultsMessage('album-suggestions', 'No album suggestions found');
-        }
-    } catch (error) {
-        console.error('Error fetching album suggestions:', error);
-        showNoResultsMessage('album-suggestions', 'Error loading suggestions');
-    }
-}
-
-function renderArtistSuggestions(suggestions) {
-    const container = document.getElementById('artist-suggestions');
-    container.innerHTML = '';
-
-    if (!suggestions.length) {
-        showNoResultsMessage('artist-suggestions', 'No artist matches found');
-        return;
-    }
-
-    suggestions.forEach(suggestion => {
-        const card = createArtistCard(suggestion.artist, suggestion.confidence);
-        container.appendChild(card);
-    });
-}
-
-function renderAlbumSuggestions(suggestions) {
-    const container = document.getElementById('album-suggestions');
-    container.innerHTML = '';
-
-    if (!suggestions.length) {
-        showNoResultsMessage('album-suggestions', 'No album matches found');
-        return;
-    }
-
-    suggestions.forEach(suggestion => {
-        const card = createAlbumCard(suggestion.album, suggestion.confidence);
-        container.appendChild(card);
-    });
-}
-
-function createArtistCard(artist, confidence) {
-    const card = document.createElement('div');
-    card.className = 'suggestion-card';
-    card.onclick = () => selectArtist(artist);
-
-    const imageUrl = artist.image_url || '';
-    const confidencePercent = Math.round(confidence * 100);
-
-    // Add data attribute for lazy loading
-    card.dataset.artistId = artist.id;
-    card.dataset.needsImage = imageUrl ? 'false' : 'true';
-
-    card.innerHTML = `
-        <div class="suggestion-card-overlay"></div>
-        <div class="suggestion-card-content">
-            <div class="suggestion-card-name" title="${escapeHtml(artist.name)}">${escapeHtml(artist.name)}</div>
-            <div class="suggestion-card-details">
-                ${artist.genres && artist.genres.length ? escapeHtml(artist.genres.slice(0, 2).join(', ')) : 'Artist'}
-            </div>
-            <div class="suggestion-card-confidence">${confidencePercent}% match</div>
-        </div>
-    `;
-
-    // Set background image if available
-    if (imageUrl) {
-        card.style.backgroundImage = `url(${imageUrl})`;
-        card.style.backgroundSize = 'cover';
-        card.style.backgroundPosition = 'center';
-    }
-
-    return card;
-}
-
-function createAlbumCard(album, confidence) {
-    const card = document.createElement('div');
-    card.className = 'suggestion-card';
-    card.onclick = () => selectAlbum(album);
-
-    const imageUrl = album.image_url || '';
-    const confidencePercent = Math.round(confidence * 100);
-    const year = album.release_date ? album.release_date.split('-')[0] : '';
-
-    card.innerHTML = `
-        <div class="suggestion-card-overlay"></div>
-        <div class="suggestion-card-content">
-            <div class="suggestion-card-name" title="${escapeHtml(album.name)}">${escapeHtml(album.name)}</div>
-            <div class="suggestion-card-details">
-                ${album.album_type ? escapeHtml(album.album_type.charAt(0).toUpperCase() + album.album_type.slice(1)) : 'Album'}${year ? ` • ${year}` : ''}
-            </div>
-            <div class="suggestion-card-confidence">${confidencePercent}% match</div>
-        </div>
-    `;
-
-    // Set background image if available
-    if (imageUrl) {
-        card.style.backgroundImage = `url(${imageUrl})`;
-        card.style.backgroundSize = 'cover';
-        card.style.backgroundPosition = 'center';
-    }
-
-    return card;
-}
-
-function selectArtist(artist) {
-    // Clear previous selections
-    document.querySelectorAll('#artist-suggestions .suggestion-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-    document.querySelectorAll('#artist-manual-results .suggestion-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-
-    // Mark new selection
-    event.currentTarget.classList.add('selected');
-
-    // Store selection
-    currentMatchingData.selectedArtist = artist;
-
-    console.log('🎯 Selected artist:', artist.name);
-
-    if (currentMatchingData.isAlbumDownload) {
-        // Transition to album selection stage
-        transitionToAlbumStage();
-    } else {
-        // Enable confirm button for single downloads
-        document.getElementById('confirm-match-btn').disabled = false;
-    }
-}
-
-function selectAlbum(album) {
-    // Clear previous selections
-    document.querySelectorAll('#album-suggestions .suggestion-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-    document.querySelectorAll('#album-manual-results .suggestion-card').forEach(card => {
-        card.classList.remove('selected');
-    });
-
-    // Mark new selection
-    event.currentTarget.classList.add('selected');
-
-    // Store selection
-    currentMatchingData.selectedAlbum = album;
-
-    console.log('🎯 Selected album:', album.name);
-
-    // Enable confirm button
-    document.getElementById('confirm-match-btn').disabled = false;
-}
-
-function transitionToAlbumStage() {
-    // Hide artist stage
-    document.getElementById('artist-selection-stage').classList.add('hidden');
-
-    // Show album stage
-    const albumStage = document.getElementById('album-selection-stage');
-    albumStage.classList.remove('hidden');
-
-    // Update selected artist name
-    document.getElementById('selected-artist-name').textContent = currentMatchingData.selectedArtist.name;
-
-    // Update current stage
-    currentMatchingData.currentStage = 'album';
-
-    // Fetch album suggestions
-    fetchAlbumSuggestions();
-}
-
-function handleArtistSearch(event) {
-    const query = event.target.value.trim();
-
-    // Clear previous timer
-    if (searchTimers.artist) {
-        clearTimeout(searchTimers.artist);
-    }
-
-    if (query.length < 2) {
-        document.getElementById('artist-manual-results').innerHTML = '';
-        return;
-    }
-
-    // Debounce search
-    searchTimers.artist = setTimeout(() => {
-        performArtistSearch(query);
-    }, 400);
-}
-
-function handleAlbumSearch(event) {
-    const query = event.target.value.trim();
-
-    // Clear previous timer
-    if (searchTimers.album) {
-        clearTimeout(searchTimers.album);
-    }
-
-    if (query.length < 2) {
-        document.getElementById('album-manual-results').innerHTML = '';
-        return;
-    }
-
-    // Debounce search
-    searchTimers.album = setTimeout(() => {
-        performAlbumSearch(query);
-    }, 400);
-}
-
-async function performArtistSearch(query) {
-    try {
-        showLoadingCards('artist-manual-results', 'Searching artists...');
-
-        const requestBody = {
-            query: query,
-            context: 'artist'
-        };
-        console.log('Manual search request:', requestBody);
-
-        const response = await fetch('/api/match/search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(requestBody)
-        });
-
-        const data = await response.json();
-        console.log('Manual search response:', data);
-        if (data.provider) currentMatchingData.provider = data.provider;
-        if (data.results) {
-            console.log('Results array:', data.results);
-            renderArtistSearchResults(data.results);
-        } else {
-            showNoResultsMessage('artist-manual-results', 'No artists found');
-        }
-    } catch (error) {
-        console.error('Error searching artists:', error);
-        showNoResultsMessage('artist-manual-results', 'Error searching artists');
-    }
-}
-
-async function performAlbumSearch(query) {
-    if (!currentMatchingData.selectedArtist) return;
-
-    try {
-        showLoadingCards('album-manual-results', 'Searching albums...');
-
-        const response = await fetch('/api/match/search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                query: query,
-                context: 'album',
-                artist_id: currentMatchingData.selectedArtist.id
-            })
-        });
-
-        const data = await response.json();
-        if (data.results) {
-            renderAlbumSearchResults(data.results);
-        } else {
-            showNoResultsMessage('album-manual-results', 'No albums found');
-        }
-    } catch (error) {
-        console.error('Error searching albums:', error);
-        showNoResultsMessage('album-manual-results', 'Error searching albums');
-    }
-}
-
-function renderArtistSearchResults(results) {
-    const container = document.getElementById('artist-manual-results');
-    container.innerHTML = '';
-
-    results.forEach((result, index) => {
-        console.log(`Manual search result ${index}:`, result);
-        console.log(`  result.artist:`, result.artist);
-        console.log(`  result.confidence:`, result.confidence);
-        try {
-            const card = createArtistCard(result.artist, result.confidence);
-            console.log(`createArtistCard returned:`, card, typeof card, card instanceof Element);
-            if (card && card instanceof Element) {
-                container.appendChild(card);
-            } else {
-                console.error(`Invalid card returned for result ${index}:`, card);
-            }
-        } catch (error) {
-            console.error(`Error calling createArtistCard for result ${index}:`, error);
-        }
-    });
-
-    // Lazy load missing artist images
-    console.log('🖼️ Starting lazy load for artist images in matching modal...');
-    if (typeof lazyLoadArtistImages === 'function') {
-        lazyLoadArtistImages(container);
-    } else if (typeof window.lazyLoadArtistImages === 'function') {
-        window.lazyLoadArtistImages(container);
-    } else {
-        console.error('❌ lazyLoadArtistImages function not found!');
-    }
-}
-
-function renderAlbumSearchResults(results) {
-    const container = document.getElementById('album-manual-results');
-    container.innerHTML = '';
-
-    results.forEach(result => {
-        const card = createAlbumCard(result.album, result.confidence);
-        container.appendChild(card);
-    });
-}
-
-function showLoadingCards(containerId, message) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = `<div class="loading-card">${message}</div>`;
-}
-
-function showNoResultsMessage(containerId, message) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = `<div class="loading-card" style="color: rgba(255,255,255,0.5)">${message}</div>`;
-}
-
-function skipMatching() {
-    console.log('🎯 Skipping matching, proceeding with normal download');
-
-    // Close modal
-    closeMatchingModal();
-
-    // Start normal download
-    if (currentMatchingData.isAlbumDownload) {
-        // For albums, we need to download each track
-        showToast('⬇️ Starting album download (unmatched)', 'info');
-        // This would need to be implemented to download all album tracks
-    } else {
-        // Single track download
-        startDownload(window.currentSearchResults.indexOf(currentMatchingData.searchResult));
-    }
-}
-
-function matchSlskdTracksToSpotify(slskdTracks, spotifyTracks) {
-    /**
-     * Matches Soulseek tracks to Spotify tracks based on filename analysis.
-     * Returns enhanced tracks with full Spotify metadata.
-     */
-    console.log(`🎯 Starting track matching: ${slskdTracks.length} Soulseek tracks vs ${spotifyTracks.length} Spotify tracks`);
-
-    const matched = [];
-    const unmatched = [];
-
-    for (const slskdTrack of slskdTracks) {
-        const filename = slskdTrack.filename || slskdTrack.title || '';
-        const parsedMeta = parseTrackFilename(filename);
-
-        console.log(`🔍 Matching: "${filename}" -> parsed as: "${parsedMeta.title}" (track #${parsedMeta.trackNumber})`);
-
-        // Find best matching Spotify track
-        let bestMatch = null;
-        let bestScore = 0;
-
-        for (const spotifyTrack of spotifyTracks) {
-            let score = 0;
-
-            // Match by track number (highest priority if available)
-            if (parsedMeta.trackNumber && spotifyTrack.track_number === parsedMeta.trackNumber) {
-                score += 50;
-                console.log(`   ✓ Track number match: ${parsedMeta.trackNumber} == ${spotifyTrack.track_number} (+50)`);
-            }
-
-            // Match by title similarity
-            const titleScore = calculateStringSimilarity(
-                parsedMeta.title.toLowerCase(),
-                spotifyTrack.name.toLowerCase()
-            );
-            score += titleScore * 50; // Max 50 points for perfect title match
-
-            console.log(`   Spotify track "${spotifyTrack.name}" (${spotifyTrack.track_number}): score ${score.toFixed(2)}`);
-
-            if (score > bestScore) {
-                bestScore = score;
-                bestMatch = spotifyTrack;
-            }
-        }
-
-        // Accept match if score is above threshold (70/100)
-        if (bestMatch && bestScore >= 70) {
-            console.log(`✅ MATCHED: "${filename}" -> "${bestMatch.name}" (score: ${bestScore.toFixed(2)})`);
-            matched.push({
-                slskd_track: slskdTrack,
-                spotify_track: bestMatch,
-                confidence: bestScore / 100
-            });
-        } else {
-            console.log(`❌ NO MATCH: "${filename}" (best score: ${bestScore.toFixed(2)})`);
-            unmatched.push(slskdTrack);
-        }
-    }
-
-    console.log(`🎯 Matching complete: ${matched.length} matched, ${unmatched.length} unmatched`);
-
-    return {
-        matched: matched,
-        unmatched: unmatched,
-        total: slskdTracks.length
-    };
-}
-
-function parseTrackFilename(filename) {
-    /**
-     * Parse track metadata from filename.
-     * Handles common patterns like:
-     * - "01 - Title.flac"
-     * - "01. Title.flac"
-     * - "Artist - Title.flac"
-     * - "Title.flac"
-     * - YouTube: "video_id||title" (extract title part)
-     */
-    // YouTube special handling: Extract title from encoded format
-    if (filename && filename.includes('||')) {
-        const parts = filename.split('||');
-        const youtubeTitle = parts[1] || parts[0];  // Use title part, fallback to video_id
-        // Remove common YouTube suffixes
-        const cleanTitle = youtubeTitle
-            .replace(/\s*\[.*?\]\s*/g, '')  // Remove [Official Video], [Lyrics], etc.
-            .replace(/\s*\(.*?\)\s*/g, '')  // Remove (Official), (Audio), etc.
-            .trim();
-        return { title: cleanTitle, trackNumber: null };
-    }
-
-    // Remove file extension and path
-    let basename = filename.split('/').pop().split('\\').pop();
-    basename = basename.replace(/\.(flac|mp3|m4a|ogg|wav)$/i, '');
-
-    let trackNumber = null;
-    let title = basename;
-
-    // Pattern 1: "01 - Title" or "01. Title"
-    const pattern1 = /^(\d{1,2})\s*[-\.]\s*(.+)$/;
-    const match1 = basename.match(pattern1);
-    if (match1) {
-        trackNumber = parseInt(match1[1]);
-        title = match1[2].trim();
-        return { title, trackNumber };
-    }
-
-    // Pattern 2: "Artist - Title" (extract title only)
-    const pattern2 = /^.+?\s*[-–]\s*(.+)$/;
-    const match2 = basename.match(pattern2);
-    if (match2) {
-        title = match2[1].trim();
-        return { title, trackNumber };
-    }
-
-    // Fallback: use whole basename as title
-    return { title: basename.trim(), trackNumber };
-}
-
-function calculateStringSimilarity(str1, str2) {
-    /**
-     * Calculate similarity between two strings (0-1 range).
-     * Uses Levenshtein distance for fuzzy matching.
-     */
-    // Normalize strings
-    str1 = str1.trim().toLowerCase();
-    str2 = str2.trim().toLowerCase();
-
-    if (str1 === str2) return 1.0;
-
-    // Simple contains check
-    if (str1.includes(str2) || str2.includes(str1)) {
-        return 0.9;
-    }
-
-    // Levenshtein distance calculation
-    const matrix = [];
-    const len1 = str1.length;
-    const len2 = str2.length;
-
-    for (let i = 0; i <= len1; i++) {
-        matrix[i] = [i];
-    }
-
-    for (let j = 0; j <= len2; j++) {
-        matrix[0][j] = j;
-    }
-
-    for (let i = 1; i <= len1; i++) {
-        for (let j = 1; j <= len2; j++) {
-            const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
-            matrix[i][j] = Math.min(
-                matrix[i - 1][j] + 1,      // deletion
-                matrix[i][j - 1] + 1,      // insertion
-                matrix[i - 1][j - 1] + cost // substitution
-            );
-        }
-    }
-
-    const maxLen = Math.max(len1, len2);
-    const distance = matrix[len1][len2];
-    const similarity = 1 - (distance / maxLen);
-
-    return Math.max(0, similarity);
-}
-
-async function confirmMatch() {
-    if (!currentMatchingData.selectedArtist) {
-        showToast('⚠️ Please select an artist first', 'error');
-        return;
-    }
-
-    if (currentMatchingData.isAlbumDownload && !currentMatchingData.selectedAlbum) {
-        showToast('⚠️ Please select an album first', 'error');
-        return;
-    }
-
-    const confirmBtn = document.getElementById('confirm-match-btn');
-    const originalText = confirmBtn.textContent;
-
-    try {
-        console.log('🎯 Confirming match with:', {
-            artist: currentMatchingData.selectedArtist.name,
-            album: currentMatchingData.selectedAlbum?.name
-        });
-
-        confirmBtn.disabled = true;
-        confirmBtn.textContent = 'Starting...';
-
-        // Determine the correct data to send
-        const downloadPayload = currentMatchingData.isAlbumDownload
-            ? currentMatchingData.albumResult
-            : currentMatchingData.searchResult;
-
-        // --- NEW: For album downloads, fetch Spotify tracklist and match tracks ---
-        if (currentMatchingData.isAlbumDownload && currentMatchingData.selectedAlbum) {
-            confirmBtn.textContent = 'Matching tracks...';
-            console.log('🎵 Fetching Spotify tracklist for album:', currentMatchingData.selectedAlbum.name);
-
-            try {
-                // Fetch album tracks (pass name/artist for Hydrabase support)
-                const artistId = currentMatchingData.selectedArtist.id;
-                const albumId = currentMatchingData.selectedAlbum.id;
-                const _aat3 = new URLSearchParams({ name: currentMatchingData.selectedAlbum.name || '', artist: currentMatchingData.selectedArtist.name || '' });
-                const tracksResponse = await fetch(`/api/album/${albumId}/tracks?${_aat3}`);
-
-                if (!tracksResponse.ok) {
-                    throw new Error(`Failed to fetch Spotify tracks: ${tracksResponse.status}`);
-                }
-
-                const tracksData = await tracksResponse.json();
-                const spotifyTracks = tracksData.tracks || [];
-
-                console.log(`✅ Fetched ${spotifyTracks.length} Spotify tracks for matching`);
-
-                // Match each Soulseek track to a Spotify track
-                const enhancedTracks = matchSlskdTracksToSpotify(
-                    downloadPayload.tracks || [],
-                    spotifyTracks
-                );
-
-                console.log(`🎯 Matched ${enhancedTracks.matched.length}/${enhancedTracks.total} tracks to Spotify`);
-
-                // Send enhanced data with full Spotify track objects
-                confirmBtn.textContent = 'Downloading...';
-                const response = await fetch('/api/download/matched', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        search_result: downloadPayload,
-                        spotify_artist: currentMatchingData.selectedArtist,
-                        spotify_album: currentMatchingData.selectedAlbum,
-                        enhanced_tracks: enhancedTracks.matched, // Send matched tracks with full Spotify data
-                        unmatched_tracks: enhancedTracks.unmatched // Send unmatched tracks for basic processing
-                    })
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    showToast(`🎯 Matched ${enhancedTracks.matched.length} tracks to Spotify`, 'success');
-                    closeMatchingModal();
-                } else {
-                    throw new Error(data.error || 'Failed to start matched download');
-                }
-
-            } catch (trackMatchError) {
-                console.error('❌ Track matching failed, falling back to simple matching:', trackMatchError);
-                showToast('⚠️ Track matching failed, using basic matching', 'warning');
-
-                // Fallback to simple matching (current behavior)
-                const response = await fetch('/api/download/matched', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        search_result: downloadPayload,
-                        spotify_artist: currentMatchingData.selectedArtist,
-                        spotify_album: currentMatchingData.selectedAlbum || null
-                    })
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
-                    closeMatchingModal();
-                } else {
-                    throw new Error(data.error || 'Failed to start matched download');
-                }
-            }
-        } else {
-            // Single track download - fetch Spotify track for full metadata
-            confirmBtn.textContent = 'Searching Spotify...';
-
-            try {
-                // Parse track name from Soulseek filename
-                const filename = downloadPayload.filename || downloadPayload.title || '';
-                const parsedMeta = parseTrackFilename(filename);
-
-                console.log(`🔍 Searching Spotify for: "${parsedMeta.title}" by ${currentMatchingData.selectedArtist.name}`);
-
-                // Search Spotify for this track
-                const searchQuery = `track:${parsedMeta.title} artist:${currentMatchingData.selectedArtist.name}`;
-                const searchResponse = await fetch(`/api/spotify/search?q=${encodeURIComponent(searchQuery)}&type=track&limit=5`);
-
-                if (!searchResponse.ok) {
-                    throw new Error('Failed to search Spotify for track');
-                }
-
-                const searchData = await searchResponse.json();
-                const spotifyTracks = searchData.tracks?.items || [];
-
-                if (spotifyTracks.length === 0) {
-                    throw new Error('No Spotify tracks found for this search');
-                }
-
-                // Find best match (prefer exact artist match)
-                let bestMatch = spotifyTracks.find(track =>
-                    track.artists.some(artist => artist.id === currentMatchingData.selectedArtist.id)
-                ) || spotifyTracks[0];
-
-                console.log(`✅ Found Spotify track: "${bestMatch.name}" (${bestMatch.id})`);
-
-                // Get full track details with album info
-                const trackResponse = await fetch(`/api/spotify/track/${bestMatch.id}`);
-                if (!trackResponse.ok) {
-                    throw new Error('Failed to fetch Spotify track details');
-                }
-
-                const fullTrack = await trackResponse.json();
-
-                // Send with full Spotify metadata (single track enhanced)
-                confirmBtn.textContent = 'Downloading...';
-                const response = await fetch('/api/download/matched', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        search_result: downloadPayload,
-                        spotify_artist: currentMatchingData.selectedArtist,
-                        spotify_album: null,  // Singles don't have album context
-                        spotify_track: fullTrack,  // Full Spotify track object
-                        is_single_track: true  // Flag for single track processing
-                    })
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    showToast(`🎯 Matched single: "${fullTrack.name}"`, 'success');
-                    closeMatchingModal();
-                } else {
-                    throw new Error(data.error || 'Failed to start matched download');
-                }
-
-            } catch (singleMatchError) {
-                console.error('❌ Spotify track matching failed, falling back to basic:', singleMatchError);
-                showToast('⚠️ Spotify matching failed, using basic metadata', 'warning');
-
-                // Fallback to basic matching (current behavior)
-                const response = await fetch('/api/download/matched', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        search_result: downloadPayload,
-                        spotify_artist: currentMatchingData.selectedArtist,
-                        spotify_album: currentMatchingData.selectedAlbum || null
-                    })
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
-                    closeMatchingModal();
-                } else {
-                    throw new Error(data.error || 'Failed to start matched download');
-                }
-            }
-        }
-
-    } catch (error) {
-        console.error('Error starting matched download:', error);
-        showToast(`❌ Error starting matched download: ${error.message}`, 'error');
-
-        // Re-enable confirm button on failure
-        confirmBtn.disabled = false;
-        confirmBtn.textContent = originalText;
-    }
-}
-
-
-
-
-function matchedDownloadTrack(trackIndex) {
-    const results = window.currentSearchResults;
-    if (!results || !results[trackIndex]) {
-        console.error('Could not find track for matched download:', trackIndex);
-        showToast('Error preparing matched download.', 'error');
-        return;
-    }
-    const trackData = results[trackIndex];
-    // It's a single track, so isAlbumDownload is false and there's no album context.
-    openMatchingModal(trackData, false, null);
-}
-
-function matchedDownloadAlbum(albumIndex) {
-    const results = window.currentSearchResults;
-    if (!results || !results[albumIndex]) {
-        console.error('Could not find album for matched download:', albumIndex);
-        showToast('Error preparing matched download.', 'error');
-        return;
-    }
-    const albumData = results[albumIndex];
-    // The first track is used as a reference for the initial artist search.
-    const firstTrack = albumData.tracks ? albumData.tracks[0] : albumData;
-    openMatchingModal(firstTrack, true, albumData);
-}
-
-function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
-    const results = window.currentSearchResults;
-    if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) {
-        console.error('Could not find album track for matched download:', albumIndex, trackIndex);
-        showToast('Error preparing matched download.', 'error');
-        return;
-    }
-    const albumData = results[albumIndex];
-    const trackData = albumData.tracks[trackIndex];
-
-    // This is the definitive fix.
-    // The second argument MUST be 'false' to treat this as a single track download,
-    // which prevents the modal from asking for an album selection.
-    openMatchingModal(trackData, false, albumData);
-}
-
-// ===========================================
-// == DASHBOARD DATABASE UPDATER FUNCTIONALITY ==
-// ===========================================
-
-// --- State and Polling Management ---
-
-function stopDbStatsPolling() {
-    if (dbStatsInterval) {
-        clearInterval(dbStatsInterval);
-        dbStatsInterval = null;
-    }
-}
-
-function stopDbUpdatePolling() {
-    if (dbUpdateStatusInterval) {
-        console.log('⏹️ Stopping database update polling');
-        clearInterval(dbUpdateStatusInterval);
-        dbUpdateStatusInterval = null;
-    }
-}
-
-// ===================================================================
-// QUALITY SCANNER TOOL
-// ===================================================================
-
-async function handleQualityScanButtonClick() {
-    const button = document.getElementById('quality-scan-button');
-    const currentAction = button.textContent;
-
-    if (currentAction === 'Scan Library') {
-        const scopeSelect = document.getElementById('quality-scan-scope');
-        const scope = scopeSelect.value;
-
-        try {
-            button.disabled = true;
-            button.textContent = 'Starting...';
-            const response = await fetch('/api/quality-scanner/start', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ scope: scope })
-            });
-
-            if (response.ok) {
-                showToast('Quality scan started!', 'success');
-                // Start polling immediately to get live status
-                checkAndUpdateQualityScanProgress();
-            } else {
-                const errorData = await response.json();
-                showToast(`Error: ${errorData.error}`, 'error');
-                button.disabled = false;
-                button.textContent = 'Scan Library';
-            }
-        } catch (error) {
-            showToast('Failed to start quality scan.', 'error');
-            button.disabled = false;
-            button.textContent = 'Scan Library';
-        }
-
-    } else { // "Stop Scan"
-        try {
-            const response = await fetch('/api/quality-scanner/stop', { method: 'POST' });
-            if (response.ok) {
-                showToast('Stop request sent.', 'info');
-            } else {
-                showToast('Failed to send stop request.', 'error');
-            }
-        } catch (error) {
-            showToast('Error sending stop request.', 'error');
-        }
-    }
-}
-
-async function checkAndUpdateQualityScanProgress() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/quality-scanner/status', {
-            signal: AbortSignal.timeout(10000) // 10 second timeout
-        });
-        if (!response.ok) return;
-
-        const state = await response.json();
-        console.debug('🔍 Quality Scanner Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
-        updateQualityScanProgressUI(state);
-
-        // Start polling only if not already polling and status is running
-        if (state.status === 'running' && !qualityScannerStatusInterval) {
-            console.log('🔄 Starting quality scanner polling (1 second interval)');
-            qualityScannerStatusInterval = setInterval(checkAndUpdateQualityScanProgress, 1000);
-        }
-
-    } catch (error) {
-        console.warn('Could not fetch quality scanner status:', error);
-        // Don't stop polling on network errors - keep trying
-    }
-}
-
-function updateQualityScanProgressFromData(data) {
-    const prev = _lastToolStatus['quality-scanner'];
-    _lastToolStatus['quality-scanner'] = data.status;
-    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
-    updateQualityScanProgressUI(data);
-}
-
-function updateQualityScanProgressUI(state) {
-    const button = document.getElementById('quality-scan-button');
-    const phaseLabel = document.getElementById('quality-phase-label');
-    const progressLabel = document.getElementById('quality-progress-label');
-    const progressBar = document.getElementById('quality-progress-bar');
-    const scopeSelect = document.getElementById('quality-scan-scope');
-
-    // Stats
-    const processedStat = document.getElementById('quality-stat-processed');
-    const metStat = document.getElementById('quality-stat-met');
-    const lowStat = document.getElementById('quality-stat-low');
-    const matchedStat = document.getElementById('quality-stat-matched');
-
-    if (!button || !phaseLabel || !progressLabel || !progressBar || !scopeSelect) return;
-
-    // Update stats
-    if (processedStat) processedStat.textContent = state.processed || 0;
-    if (metStat) metStat.textContent = state.quality_met || 0;
-    if (lowStat) lowStat.textContent = state.low_quality || 0;
-    if (matchedStat) matchedStat.textContent = state.matched || 0;
-
-    if (state.status === 'running') {
-        button.textContent = 'Stop Scan';
-        button.disabled = false;
-        scopeSelect.disabled = true;
-
-        phaseLabel.textContent = state.phase || 'Scanning...';
-        progressLabel.textContent = `${state.processed} / ${state.total} tracks scanned (${state.progress.toFixed(1)}%)`;
-        progressBar.style.width = `${state.progress}%`;
-    } else { // idle, finished, or error
-        stopQualityScannerPolling();
-        button.textContent = 'Scan Library';
-        button.disabled = false;
-        scopeSelect.disabled = false;
-
-        if (state.status === 'error') {
-            phaseLabel.textContent = `Error: ${state.error_message}`;
-            progressBar.style.backgroundColor = '#ff4444'; // Red for error
-        } else {
-            phaseLabel.textContent = state.phase || 'Ready to scan';
-            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
-        }
-
-        if (state.status === 'finished') {
-            // Show completion toast with results
-            showToast(`Scan complete! ${state.matched} tracks added to wishlist`, 'success');
-        }
-    }
-}
-
-function stopQualityScannerPolling() {
-    if (qualityScannerStatusInterval) {
-        console.log('⏹️ Stopping quality scanner polling');
-        clearInterval(qualityScannerStatusInterval);
-        qualityScannerStatusInterval = null;
-    }
-}
-
-// ============================================
-// == DUPLICATE CLEANER FUNCTIONS            ==
-// ============================================
-
-async function handleDuplicateCleanButtonClick() {
-    const button = document.getElementById('duplicate-clean-button');
-    const currentAction = button.textContent;
-
-    if (currentAction === 'Clean Duplicates') {
-        try {
-            button.disabled = true;
-            button.textContent = 'Starting...';
-            const response = await fetch('/api/duplicate-cleaner/start', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' }
-            });
-
-            if (response.ok) {
-                showToast('Duplicate cleaner started!', 'success');
-                // Start polling immediately to get live status
-                checkAndUpdateDuplicateCleanProgress();
-            } else {
-                const errorData = await response.json();
-                showToast(`Error: ${errorData.error}`, 'error');
-                button.disabled = false;
-                button.textContent = 'Clean Duplicates';
-            }
-        } catch (error) {
-            showToast('Failed to start duplicate cleaner.', 'error');
-            button.disabled = false;
-            button.textContent = 'Clean Duplicates';
-        }
-
-    } else { // "Stop Cleaning"
-        try {
-            const response = await fetch('/api/duplicate-cleaner/stop', { method: 'POST' });
-            if (response.ok) {
-                showToast('Stop request sent.', 'info');
-            } else {
-                showToast('Failed to send stop request.', 'error');
-            }
-        } catch (error) {
-            showToast('Error sending stop request.', 'error');
-        }
-    }
-}
-
-async function checkAndUpdateDuplicateCleanProgress() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/duplicate-cleaner/status', {
-            signal: AbortSignal.timeout(10000) // 10 second timeout
-        });
-        if (!response.ok) return;
-
-        const state = await response.json();
-        console.debug('🧹 Duplicate Cleaner Status:', state.status, `${state.files_scanned}/${state.total_files}`, `${state.progress.toFixed(1)}%`);
-        updateDuplicateCleanProgressUI(state);
-
-        // Start polling only if not already polling and status is running
-        if (state.status === 'running' && !duplicateCleanerStatusInterval) {
-            console.log('🔄 Starting duplicate cleaner polling (1 second interval)');
-            duplicateCleanerStatusInterval = setInterval(checkAndUpdateDuplicateCleanProgress, 1000);
-        }
-
-    } catch (error) {
-        console.warn('Could not fetch duplicate cleaner status:', error);
-        // Don't stop polling on network errors - keep trying
-    }
-}
-
-function updateDuplicateCleanProgressFromData(data) {
-    const prev = _lastToolStatus['duplicate-cleaner'];
-    _lastToolStatus['duplicate-cleaner'] = data.status;
-    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
-    updateDuplicateCleanProgressUI(data);
-}
-
-function updateDuplicateCleanProgressUI(state) {
-    const button = document.getElementById('duplicate-clean-button');
-    const phaseLabel = document.getElementById('duplicate-phase-label');
-    const progressLabel = document.getElementById('duplicate-progress-label');
-    const progressBar = document.getElementById('duplicate-progress-bar');
-
-    // Stats
-    const scannedStat = document.getElementById('duplicate-stat-scanned');
-    const foundStat = document.getElementById('duplicate-stat-found');
-    const deletedStat = document.getElementById('duplicate-stat-deleted');
-    const spaceStat = document.getElementById('duplicate-stat-space');
-
-    if (!button || !phaseLabel || !progressLabel || !progressBar) return;
-
-    // Update stats
-    if (scannedStat) scannedStat.textContent = state.files_scanned || 0;
-    if (foundStat) foundStat.textContent = state.duplicates_found || 0;
-    if (deletedStat) deletedStat.textContent = state.deleted || 0;
-    if (spaceStat) {
-        const spaceMB = state.space_freed_mb || 0;
-        if (spaceMB >= 1024) {
-            spaceStat.textContent = `${(spaceMB / 1024).toFixed(2)} GB`;
-        } else {
-            spaceStat.textContent = `${spaceMB.toFixed(2)} MB`;
-        }
-    }
-
-    if (state.status === 'running') {
-        button.textContent = 'Stop Cleaning';
-        button.disabled = false;
-
-        phaseLabel.textContent = state.phase || 'Scanning...';
-        progressLabel.textContent = `${state.files_scanned} / ${state.total_files} files scanned (${state.progress.toFixed(1)}%)`;
-        progressBar.style.width = `${state.progress}%`;
-    } else { // idle, finished, or error
-        stopDuplicateCleanerPolling();
-        button.textContent = 'Clean Duplicates';
-        button.disabled = false;
-
-        if (state.status === 'error') {
-            phaseLabel.textContent = `Error: ${state.error_message}`;
-            progressBar.style.backgroundColor = '#ff4444'; // Red for error
-        } else {
-            phaseLabel.textContent = state.phase || 'Ready to scan';
-            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
-        }
-
-        if (state.status === 'finished') {
-            // Show completion toast with results
-            const spaceMB = state.space_freed_mb || 0;
-            const spaceDisplay = spaceMB >= 1024 ? `${(spaceMB / 1024).toFixed(2)} GB` : `${spaceMB.toFixed(1)} MB`;
-            showToast(`Cleaning complete! ${state.deleted} files removed, ${spaceDisplay} freed`, 'success');
-        }
-    }
-}
-
-function stopDuplicateCleanerPolling() {
-    if (duplicateCleanerStatusInterval) {
-        console.log('⏹️ Stopping duplicate cleaner polling');
-        clearInterval(duplicateCleanerStatusInterval);
-        duplicateCleanerStatusInterval = null;
-    }
-}
-
-// ============================================
-// == BACKUP MANAGER                         ==
-// ============================================
-
-async function loadBackupList() {
-    try {
-        const res = await fetch('/api/database/backups');
-        const data = await res.json();
-        if (data.success) {
-            updateBackupManagerUI(data);
-            renderBackupList(data.backups);
-        }
-    } catch (e) {
-        console.error('Failed to load backup list:', e);
-    }
-}
-
-function updateBackupManagerUI(data) {
-    const lastEl = document.getElementById('backup-stat-last');
-    const countEl = document.getElementById('backup-stat-count');
-    const latestSizeEl = document.getElementById('backup-stat-latest-size');
-    const dbSizeEl = document.getElementById('backup-stat-db-size');
-
-    if (countEl) countEl.textContent = data.count;
-    if (dbSizeEl) dbSizeEl.textContent = data.db_size_mb + ' MB';
-
-    if (data.backups && data.backups.length > 0) {
-        const newest = data.backups[0];
-        if (lastEl) lastEl.textContent = timeAgo(newest.created);
-        if (latestSizeEl) latestSizeEl.textContent = newest.size_mb + ' MB';
-    } else {
-        if (lastEl) lastEl.textContent = 'Never';
-        if (latestSizeEl) latestSizeEl.textContent = '—';
-    }
-}
-
-function renderBackupList(backups) {
-    const container = document.getElementById('backup-list-container');
-    if (!container) return;
-    if (!backups || backups.length === 0) {
-        container.innerHTML = '';
-        return;
-    }
-
-    container.innerHTML = backups.map(b => {
-        const date = new Date(b.created + (b.created.includes('Z') ? '' : 'Z'));
-        const dateStr = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
-            + ' ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
-        const safeName = escapeForInlineJs(b.filename);
-        const versionBadge = b.version ? `<span class="backup-list-version">v${escapeHtml(b.version)}</span>` : '';
-        return `<div class="backup-list-item">
-            <div class="backup-list-info">
-                <span class="backup-list-date">${escapeHtml(dateStr)}</span>
-                <span class="backup-list-size">${b.size_mb} MB</span>
-                ${versionBadge}
-            </div>
-            <div class="backup-list-actions">
-                <button class="backup-dl-btn" onclick="downloadBackup('${safeName}')" title="Download">DL</button>
-                <button class="backup-restore-btn" onclick="restoreBackup('${safeName}')" title="Restore">Restore</button>
-                <button class="backup-delete-btn" onclick="deleteBackup('${safeName}')" title="Delete">Del</button>
-            </div>
-        </div>`;
-    }).join('');
-}
-
-async function handleBackupNowClick() {
-    const button = document.getElementById('backup-now-button');
-    if (!button) return;
-    const origText = button.textContent;
-    button.disabled = true;
-    button.textContent = 'Backing up...';
-    try {
-        const res = await fetch('/api/database/backup', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Database backed up (${data.size_mb} MB)`, 'success');
-            await loadBackupList();
-        } else {
-            showToast(`Backup failed: ${data.error}`, 'error');
-        }
-    } catch (e) {
-        showToast('Backup request failed', 'error');
-    }
-    button.disabled = false;
-    button.textContent = origText;
-}
-
-function downloadBackup(filename) {
-    const a = document.createElement('a');
-    a.href = `/api/database/backups/${encodeURIComponent(filename)}/download`;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-}
-
-async function restoreBackup(filename, force = false) {
-    if (!force) {
-        if (!await showConfirmDialog({ title: 'Restore Backup', message: `Restore database from "${filename}"?\n\nA safety backup of the current database will be created first.`, confirmText: 'Restore' })) return;
-    }
-    try {
-        const fetchOpts = { method: 'POST' };
-        if (force) {
-            fetchOpts.headers = { 'Content-Type': 'application/json' };
-            fetchOpts.body = JSON.stringify({ force: true });
-        }
-        const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}/restore`, fetchOpts);
-        const data = await res.json();
-        if (data.success) {
-            let msg = `Database restored from ${data.restored_from} (${data.artist_count} artists). Safety backup: ${data.safety_backup}`;
-            if (data.version_warning) msg += `\n⚠️ ${data.version_warning}`;
-            showToast(msg, 'success');
-            await loadBackupList();
-        } else if (data.version_mismatch) {
-            // Version mismatch — ask user to confirm
-            const confirmed = await showConfirmDialog({
-                title: 'Version Mismatch',
-                message: `This backup was created on SoulSync v${data.backup_version}, but you're running v${data.current_version}.\n\nRestoring an older backup may cause issues if the database schema has changed. A safety backup will be created first.\n\nProceed anyway?`,
-                confirmText: 'Restore Anyway',
-                destructive: true
-            });
-            if (confirmed) {
-                await restoreBackup(filename, true);
-            }
-        } else {
-            showToast(`Restore failed: ${data.error}`, 'error');
-        }
-    } catch (e) {
-        showToast('Restore request failed', 'error');
-    }
-}
-
-async function deleteBackup(filename) {
-    if (!await showConfirmDialog({ title: 'Delete Backup', message: `Delete backup "${filename}"? This cannot be undone.`, confirmText: 'Delete', destructive: true })) return;
-    try {
-        const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}`, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Backup deleted: ${data.deleted}`, 'success');
-            await loadBackupList();
-        } else {
-            showToast(`Delete failed: ${data.error}`, 'error');
-        }
-    } catch (e) {
-        showToast('Delete request failed', 'error');
-    }
-}
-
-// ============================================
-// == METADATA CACHE                         ==
-// ============================================
-
-async function loadMetadataCacheStats() {
-    try {
-        const response = await fetch('/api/metadata-cache/stats');
-        if (!response.ok) return;
-        const stats = await response.json();
-
-        const artistsEl = document.getElementById('mcache-stat-artists');
-        const albumsEl = document.getElementById('mcache-stat-albums');
-        const tracksEl = document.getElementById('mcache-stat-tracks');
-        const hitsEl = document.getElementById('mcache-stat-hits');
-
-        if (artistsEl) artistsEl.textContent = (stats.artists?.spotify || 0) + (stats.artists?.itunes || 0) + (stats.artists?.deezer || 0) + (stats.artists?.beatport || 0);
-        if (albumsEl) albumsEl.textContent = (stats.albums?.spotify || 0) + (stats.albums?.itunes || 0) + (stats.albums?.deezer || 0) + (stats.albums?.beatport || 0);
-        if (tracksEl) tracksEl.textContent = (stats.tracks?.spotify || 0) + (stats.tracks?.itunes || 0) + (stats.tracks?.deezer || 0) + (stats.tracks?.beatport || 0);
-        if (hitsEl) hitsEl.textContent = stats.total_hits || 0;
-    } catch (e) {
-        // Silently fail — cache may not be initialized yet
-    }
-}
-
-// ── Library History Modal ────────────────────────────────────────────
-let _libraryHistoryState = { tab: 'download', page: 1, limit: 50 };
-
-function openLibraryHistoryModal() {
-    const overlay = document.getElementById('library-history-overlay');
-    if (overlay) {
-        overlay.classList.remove('hidden');
-        _libraryHistoryState.page = 1;
-        loadLibraryHistory();
-    }
-}
-
-function closeLibraryHistoryModal() {
-    const overlay = document.getElementById('library-history-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-function switchHistoryTab(tab) {
-    _libraryHistoryState.tab = tab;
-    _libraryHistoryState.page = 1;
-    document.querySelectorAll('.library-history-tab').forEach(t => {
-        t.classList.toggle('active', t.dataset.tab === tab);
-    });
-    loadLibraryHistory();
-}
-
-async function loadLibraryHistory() {
-    const { tab, page, limit } = _libraryHistoryState;
-    const list = document.getElementById('library-history-list');
-    const pagination = document.getElementById('library-history-pagination');
-    if (!list) return;
-    list.innerHTML = '<div class="library-history-loading">Loading...</div>';
-    if (pagination) pagination.innerHTML = '';
-
-    try {
-        const resp = await fetch(`/api/library/history?type=${tab}&page=${page}&limit=${limit}`);
-        const data = await resp.json();
-
-        // Update tab counts
-        const dlCount = document.getElementById('history-download-count');
-        const imCount = document.getElementById('history-import-count');
-        if (dlCount) dlCount.textContent = data.stats?.downloads || 0;
-        if (imCount) imCount.textContent = data.stats?.imports || 0;
-
-        // Source breakdown bar (downloads tab only)
-        const sourceBar = document.getElementById('history-source-bar');
-        if (sourceBar) {
-            const sc = data.stats?.source_counts || {};
-            const srcEntries = Object.entries(sc).sort((a, b) => b[1] - a[1]);
-            if (srcEntries.length > 0 && tab === 'download') {
-                const _srcColors = { Soulseek: '#4caf50', Tidal: '#000', YouTube: '#ff0000', Qobuz: '#4285f4', HiFi: '#00bcd4', Deezer: '#a238ff' };
-                sourceBar.innerHTML = srcEntries.map(([src, cnt]) =>
-                    `<span class="history-source-chip" style="border-color:${_srcColors[src] || '#888'};color:${_srcColors[src] || '#888'}">${src}: ${cnt}</span>`
-                ).join('');
-                sourceBar.style.display = '';
-            } else {
-                sourceBar.style.display = 'none';
-            }
-        }
-
-        if (!data.entries || data.entries.length === 0) {
-            const emptyIcon = tab === 'download' ? '📥' : '📚';
-            const emptyText = tab === 'download'
-                ? 'No downloads recorded yet. Completed downloads will appear here.'
-                : 'No server imports recorded yet. New tracks from library scans will appear here.';
-            list.innerHTML = `<div class="library-history-empty">${emptyIcon}<br><br>${emptyText}</div>`;
-            return;
-        }
-
-        list.innerHTML = data.entries.map(renderHistoryEntry).join('');
-        renderHistoryPagination(data.total, page, limit);
-    } catch (err) {
-        console.error('Error loading library history:', err);
-        list.innerHTML = '<div class="library-history-empty">Error loading history</div>';
-    }
-}
-
-function renderHistoryEntry(entry) {
-    // Server import thumb_urls are relative paths (e.g. /library/metadata/...) — use placeholder
-    const hasValidThumb = entry.thumb_url && (entry.thumb_url.startsWith('http://') || entry.thumb_url.startsWith('https://'));
-    const thumb = hasValidThumb
-        ? `<img src="${escapeHtml(entry.thumb_url)}" class="library-history-thumb" loading="lazy" onerror="this.outerHTML='<div class=\\'library-history-thumb-placeholder\\'>${entry.event_type === 'download' ? '📥' : '📚'}</div>'">`
-        : `<div class="library-history-thumb-placeholder">${entry.event_type === 'download' ? '📥' : '📚'}</div>`;
-
-    let badge = '';
-    if (entry.event_type === 'download') {
-        const parts = [];
-        if (entry.download_source) parts.push(entry.download_source);
-        if (entry.quality) parts.push(entry.quality);
-        badge = parts.map(p => `<span class="library-history-badge download">${escapeHtml(p)}</span>`).join('');
-    } else if (entry.event_type === 'import' && entry.server_source) {
-        const sourceName = { plex: 'Plex', jellyfin: 'Jellyfin', navidrome: 'Navidrome' }[entry.server_source] || entry.server_source;
-        badge = `<span class="library-history-badge import">${escapeHtml(sourceName)}</span>`;
-    }
-
-    // AcoustID badge
-    let acoustidBadge = '';
-    if (entry.acoustid_result) {
-        const _aidColors = { pass: '#4caf50', fail: '#ef5350', skip: '#ff9800', disabled: '#666', error: '#ef5350' };
-        const _aidLabels = { pass: 'Verified', fail: 'Failed', skip: 'Skipped', disabled: 'Off', error: 'Error' };
-        const color = _aidColors[entry.acoustid_result] || '#666';
-        const label = _aidLabels[entry.acoustid_result] || entry.acoustid_result;
-        acoustidBadge = `<span class="library-history-badge" style="border-color:${color};color:${color}">AcoustID: ${label}</span>`;
-    }
-
-    const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ');
-
-    // Source provenance — expected vs downloaded
-    let sourceDetail = '';
-    if (entry.event_type === 'download') {
-        const lines = [];
-        // Expected line (what we asked for)
-        if (entry.title || entry.artist_name) {
-            lines.push(`<span class="lh-prov-label">Expected:</span> ${escapeHtml(entry.title || '?')} <span class="lh-prov-dim">by</span> ${escapeHtml(entry.artist_name || '?')}`);
-        }
-        // Downloaded line (what the source provided)
-        const srcTitle = entry.source_track_title || '';
-        const srcArtist = entry.source_artist || '';
-        if (srcTitle || srcArtist) {
-            const isMismatch = (srcTitle && entry.title && srcTitle.toLowerCase() !== entry.title.toLowerCase())
-                || (srcArtist && entry.artist_name && srcArtist.toLowerCase() !== entry.artist_name.toLowerCase());
-            const mismatchClass = isMismatch ? ' lh-prov-mismatch' : '';
-            lines.push(`<span class="lh-prov-label">Downloaded:</span> <span class="${mismatchClass}">${escapeHtml(srcTitle || '?')} <span class="lh-prov-dim">by</span> ${escapeHtml(srcArtist || '?')}</span>`);
-        }
-        // Source file + ID line
-        if (entry.source_filename || entry.source_track_id) {
-            const fileParts = [];
-            if (entry.source_filename) fileParts.push(`<span class="lh-prov-label">File:</span> ${escapeHtml(entry.source_filename)}`);
-            if (entry.source_track_id) fileParts.push(`<span class="lh-prov-label">${entry.source_filename ? '' : 'Source '}ID:</span> ${escapeHtml(entry.source_track_id)}`);
-            lines.push(fileParts.join(` <span class="lh-prov-dim">·</span> `));
-        }
-        if (lines.length > 0) {
-            sourceDetail = `<div class="library-history-entry-source">${lines.join('<br>')}</div>`;
-        }
-    }
-
-    const hasDetails = sourceDetail || acoustidBadge;
-    const expandIndicator = hasDetails ? `<span class="lh-expand-btn">&#x25BE;</span>` : '';
-
-    return `<div class="library-history-entry${hasDetails ? ' lh-expandable' : ''}" ${hasDetails ? 'onclick="this.classList.toggle(\'lh-expanded\')"' : ''}>
-        ${thumb}
-        <div class="library-history-entry-content">
-            <div class="library-history-entry-row1">
-                <div class="library-history-entry-text">
-                    <div class="library-history-entry-title">${escapeHtml(entry.title || 'Unknown')}</div>
-                    <div class="library-history-entry-meta">${escapeHtml(meta)}</div>
-                </div>
-                <div class="library-history-entry-badges">${badge}</div>
-                <div class="library-history-entry-time">${formatHistoryTime(entry.created_at)}</div>
-                ${expandIndicator}
-            </div>
-            ${hasDetails ? `<div class="library-history-entry-details">
-                ${sourceDetail}
-                ${acoustidBadge ? `<div class="library-history-entry-badges" style="margin-top:4px">${acoustidBadge}</div>` : ''}
-            </div>` : ''}
-        </div>
-    </div>`;
-}
-
-function formatHistoryTime(isoStr) {
-    if (!isoStr) return '';
-    try {
-        // SQLite CURRENT_TIMESTAMP is UTC but lacks timezone marker — append Z
-        let normalized = isoStr;
-        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}/.test(normalized) && !normalized.includes('Z') && !normalized.includes('+')) {
-            normalized = normalized.replace(' ', 'T') + 'Z';
-        }
-        const date = new Date(normalized);
-        const now = new Date();
-        const diffMs = now - date;
-        const diffMins = Math.floor(diffMs / 60000);
-        if (diffMins < 1) return 'Just now';
-        if (diffMins < 60) return `${diffMins}m ago`;
-        const diffHours = Math.floor(diffMins / 60);
-        if (diffHours < 24) return `${diffHours}h ago`;
-        const diffDays = Math.floor(diffHours / 24);
-        if (diffDays < 7) return `${diffDays}d ago`;
-        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
-    } catch { return ''; }
-}
-
-function renderHistoryPagination(total, page, limit) {
-    const pagination = document.getElementById('library-history-pagination');
-    if (!pagination) return;
-
-    const totalPages = Math.ceil(total / limit);
-    if (totalPages <= 1) { pagination.innerHTML = ''; return; }
-
-    pagination.innerHTML = `
-        <button class="library-history-page-btn" onclick="changeHistoryPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>Prev</button>
-        <span class="library-history-page-info">Page ${page} of ${totalPages}</span>
-        <button class="library-history-page-btn" onclick="changeHistoryPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>Next</button>
-    `;
-}
-
-function changeHistoryPage(newPage) {
-    if (newPage < 1) return;
-    _libraryHistoryState.page = newPage;
-    loadLibraryHistory();
-}
-
-// ── Sync History Modal ──────────────────────────────────────────────
-const _syncHistoryState = { source: null, page: 1, limit: 20 };
-
-function openSyncHistoryModal() {
-    const overlay = document.getElementById('sync-history-overlay');
-    if (overlay) {
-        overlay.classList.remove('hidden');
-        _syncHistoryState.page = 1;
-        _syncHistoryState.source = null;
-        loadSyncHistory();
-    }
-}
-
-function closeSyncHistoryModal() {
-    const overlay = document.getElementById('sync-history-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-function switchSyncHistoryTab(source) {
-    _syncHistoryState.source = source;
-    _syncHistoryState.page = 1;
-    document.querySelectorAll('.sync-history-tab').forEach(t => {
-        t.classList.toggle('active', t.dataset.source === (source || 'all'));
-    });
-    loadSyncHistory();
-}
-
-async function loadSyncHistory() {
-    const { source, page, limit } = _syncHistoryState;
-    const list = document.getElementById('sync-history-list');
-    const tabsContainer = document.getElementById('sync-history-tabs');
-    if (!list) return;
-    list.innerHTML = '<div class="sync-history-loading">Loading...</div>';
-
-    try {
-        const params = new URLSearchParams({ page, limit });
-        if (source) params.set('source', source);
-        const resp = await fetch(`/api/sync/history?${params}`);
-        const data = await resp.json();
-
-        // Build tabs from stats
-        if (tabsContainer && data.stats) {
-            const totalCount = Object.values(data.stats).reduce((a, b) => a + b, 0);
-            const sourceLabels = {
-                spotify: 'Spotify', beatport: 'Beatport', youtube: 'YouTube',
-                tidal: 'Tidal', deezer: 'Deezer', wishlist: 'Wishlist',
-                library: 'Library', discover: 'Discover', listenbrainz: 'ListenBrainz',
-                spotify_public: 'Spotify Public', mirrored: 'Mirrored'
-            };
-            let tabsHtml = `<button class="sync-history-tab ${!source ? 'active' : ''}" data-source="all" onclick="switchSyncHistoryTab(null)">All <span class="sync-history-tab-count">${totalCount}</span></button>`;
-            for (const [src, count] of Object.entries(data.stats).sort((a, b) => b[1] - a[1])) {
-                const label = sourceLabels[src] || src;
-                const isActive = source === src ? ' active' : '';
-                tabsHtml += `<button class="sync-history-tab${isActive}" data-source="${src}" onclick="switchSyncHistoryTab('${src}')">${label} <span class="sync-history-tab-count">${count}</span></button>`;
-            }
-            tabsContainer.innerHTML = tabsHtml;
-        }
-
-        // Filter to only show playlist syncs — not album downloads, wishlist, or redownloads
-        const syncEntries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
-
-        if (syncEntries.length === 0) {
-            list.innerHTML = '<div class="sync-history-empty">No sync history yet. Completed syncs will appear here.</div>';
-            return;
-        }
-
-        list.innerHTML = syncEntries.map(renderSyncHistoryEntry).join('');
-        renderSyncHistoryPagination(data.total, page, limit);
-    } catch (err) {
-        console.error('Error loading sync history:', err);
-        list.innerHTML = '<div class="sync-history-empty">Error loading sync history</div>';
-    }
-}
-
-function renderSyncHistoryEntry(entry) {
-    const thumb = entry.thumb_url
-        ? `<img src="${escapeHtml(entry.thumb_url)}" class="sync-history-thumb" loading="lazy" onerror="this.outerHTML='<div class=\\'sync-history-thumb-placeholder\\'>&#x1F4E5;</div>'">`
-        : `<div class="sync-history-thumb-placeholder">${_syncSourceIcon(entry.source)}</div>`;
-
-    const sourceBadge = `<span class="sync-history-source-badge ${entry.source}">${escapeHtml(entry.source)}</span>`;
-
-    const title = entry.playlist_name || 'Unknown';
-    const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ') || entry.sync_type;
-
-    // Stats
-    let statsHtml = '';
-    if (entry.completed_at) {
-        const parts = [];
-        if (entry.tracks_found > 0) parts.push(`<span class="sync-history-stat found">${entry.tracks_found} found</span>`);
-        if (entry.tracks_downloaded > 0) parts.push(`<span class="sync-history-stat downloaded">${entry.tracks_downloaded} downloaded</span>`);
-        if (entry.tracks_failed > 0) parts.push(`<span class="sync-history-stat failed">${entry.tracks_failed} failed</span>`);
-        if (parts.length === 0) parts.push(`<span class="sync-history-stat found">${entry.total_tracks} in library</span>`);
-        statsHtml = `<div class="sync-history-stats">${parts.join('')}</div>`;
-    } else {
-        statsHtml = `<div class="sync-history-stats"><span class="sync-history-stat pending">In progress</span></div>`;
-    }
-
-    const timeStr = formatHistoryTime(entry.started_at);
-
-    return `<div class="sync-history-entry-wrapper" id="sync-history-wrapper-${entry.id}">
-        <div class="sync-history-entry">
-            ${thumb}
-            <div class="sync-history-entry-text">
-                <div class="sync-history-entry-title">${escapeHtml(title)}</div>
-                <div class="sync-history-entry-meta">${escapeHtml(meta)}</div>
-            </div>
-            ${sourceBadge}
-            ${statsHtml}
-            <div class="sync-history-entry-time">${timeStr}</div>
-            <button class="sync-history-delete-btn" onclick="deleteSyncHistoryEntry(${entry.id})" title="Delete this entry">&times;</button>
-            <button class="sync-history-resync-btn" id="resync-btn-${entry.id}" onclick="retriggerSync(${entry.id})" title="Re-sync this playlist">Re-sync</button>
-        </div>
-        <div class="sync-history-live-progress" id="sync-history-progress-${entry.id}" style="display:none;">
-            <div class="sync-history-progress-bar-container">
-                <div class="sync-history-progress-bar-fill" id="sync-history-bar-${entry.id}"></div>
-            </div>
-            <div class="sync-history-progress-text">
-                <span class="sync-history-progress-step" id="sync-history-step-${entry.id}">Starting sync...</span>
-                <div class="sync-history-progress-stats">
-                    <span class="matched" id="sync-history-matched-${entry.id}">0 matched</span>
-                    <span class="failed" id="sync-history-failed-${entry.id}">0 failed</span>
-                </div>
-                <button class="sync-history-cancel-btn" id="sync-history-cancel-${entry.id}" onclick="cancelSyncHistoryResync(${entry.id})">Cancel</button>
-            </div>
-        </div>
-    </div>`;
-}
-
-function _syncSourceIcon(source) {
-    const icons = {
-        spotify: '&#x1F3B5;', beatport: '&#x1F3B6;', youtube: '&#x25B6;',
-        tidal: '&#x1F30A;', deezer: '&#x1F3A7;', wishlist: '&#x2B50;',
-        library: '&#x1F4DA;', discover: '&#x1F50D;', mirrored: '&#x1F517;',
-        listenbrainz: '&#x1F3A7;', spotify_public: '&#x1F3B5;'
-    };
-    return icons[source] || '&#x1F4E5;';
-}
-
-function renderSyncHistoryPagination(total, page, limit) {
-    const pagination = document.getElementById('sync-history-pagination');
-    if (!pagination) return;
-    const totalPages = Math.ceil(total / limit);
-    if (totalPages <= 1) { pagination.innerHTML = ''; return; }
-    pagination.innerHTML = `
-        <button class="sync-history-page-btn" onclick="changeSyncHistoryPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>Prev</button>
-        <span class="sync-history-page-info">Page ${page} of ${totalPages}</span>
-        <button class="sync-history-page-btn" onclick="changeSyncHistoryPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>Next</button>
-    `;
-}
-
-function changeSyncHistoryPage(newPage) {
-    if (newPage < 1) return;
-    _syncHistoryState.page = newPage;
-    loadSyncHistory();
-}
-
-// Track active re-syncs from history
-let _activeSyncHistoryResyncs = {};
-
-// Sources that do server playlist sync (match to media server) vs download (Soulseek download)
-const _serverSyncSources = new Set(['spotify', 'tidal', 'deezer', 'youtube', 'mirrored', 'listenbrainz', 'spotify_public', 'beatport']);
-const _downloadSyncSources = new Set(['discover', 'library', 'wishlist']);
-
-async function retriggerSync(entryId) {
-    try {
-        const resp = await fetch(`/api/sync/history/${entryId}`);
-        const data = await resp.json();
-
-        if (!data.success || !data.entry) {
-            showToast('Failed to load sync data', 'error');
-            return;
-        }
-
-        const entry = data.entry;
-
-        // Determine if this is a download-type sync or a server-sync-type
-        const isDownloadSync = entry.is_album_download || _downloadSyncSources.has(entry.source);
-        const isServerSync = _serverSyncSources.has(entry.source) && !entry.is_album_download;
-
-        if (isDownloadSync) {
-            // Download syncs open the download modal (existing behavior)
-            closeSyncHistoryModal();
-
-            const virtualPlaylistId = entry.playlist_id || `resync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-            const albumObj = entry.album_context || {
-                id: `resync_album_${entryId}`,
-                name: entry.playlist_name,
-                album_type: entry.sync_type === 'album' ? 'album' : 'compilation',
-                images: entry.thumb_url ? [{ url: entry.thumb_url }] : [],
-                total_tracks: entry.total_tracks
-            };
-            const artistObj = entry.artist_context || { id: 'resync_artist', name: 'Various Artists' };
-            const contextType = entry.sync_type === 'album' ? 'artist_album' : 'playlist';
-
-            await openDownloadMissingModalForArtistAlbum(
-                virtualPlaylistId, entry.playlist_name, entry.tracks,
-                albumObj, artistObj, false, contextType
-            );
-        } else {
-            // Server sync — start sync and show live progress in the card
-            await _startSyncHistoryResync(entryId, entry);
-        }
-    } catch (err) {
-        console.error('Error re-triggering sync:', err);
-        showToast('Error loading sync data', 'error');
-    }
-}
-
-async function _startSyncHistoryResync(entryId, entry) {
-    // Disable the re-sync button
-    const btn = document.getElementById(`resync-btn-${entryId}`);
-    if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
-
-    // Show the progress area
-    const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
-    const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
-    if (wrapper) wrapper.classList.add('syncing');
-    if (progressArea) progressArea.style.display = '';
-
-    // Build a unique sync playlist ID for this re-sync
-    const syncPlaylistId = `resync_${entryId}_${Date.now()}`;
-
-    // Prepare tracks for the sync API
-    const tracks = (entry.tracks || []).map(t => {
-        const artists = Array.isArray(t.artists)
-            ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
-            : [t.artists || 'Unknown Artist'];
-        const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
-        return {
-            id: t.id || '',
-            name: t.name || '',
-            artists: artists,
-            album: albumName,
-            duration_ms: t.duration_ms || 0,
-            popularity: t.popularity || 0
-        };
-    });
-
-    try {
-        const response = await fetch('/api/sync/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_id: syncPlaylistId,
-                playlist_name: entry.playlist_name,
-                tracks: tracks
-            })
-        });
-
-        const result = await response.json();
-        if (!result.success) {
-            showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
-            _cleanupSyncHistoryResync(entryId);
-            return;
-        }
-
-        // Store active re-sync state
-        _activeSyncHistoryResyncs[entryId] = { syncPlaylistId, entryId };
-
-        // Start polling for progress
-        _pollSyncHistoryProgress(entryId, syncPlaylistId);
-
-    } catch (err) {
-        console.error('Error starting re-sync:', err);
-        showToast('Failed to start sync', 'error');
-        _cleanupSyncHistoryResync(entryId);
-    }
-}
-
-function _pollSyncHistoryProgress(entryId, syncPlaylistId) {
-    const pollInterval = setInterval(async () => {
-        try {
-            const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
-            if (!resp.ok) {
-                clearInterval(pollInterval);
-                _cleanupSyncHistoryResync(entryId, 'error');
-                return;
-            }
-            const state = await resp.json();
-
-            if (state.status === 'syncing' || state.status === 'starting') {
-                const progress = state.progress || {};
-                const matched = progress.matched_tracks || 0;
-                const failed = progress.failed_tracks || 0;
-                const total = progress.total_tracks || 0;
-                const step = progress.current_step || 'Processing';
-                const currentTrack = progress.current_track || '';
-                const processed = matched + failed;
-                const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-                const bar = document.getElementById(`sync-history-bar-${entryId}`);
-                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
-                const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
-                const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
-
-                if (bar) bar.style.width = `${percent}%`;
-                if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
-                if (matchedEl) matchedEl.textContent = `${matched} matched`;
-                if (failedEl) failedEl.textContent = `${failed} failed`;
-
-            } else if (state.status === 'finished') {
-                clearInterval(pollInterval);
-                const progress = state.progress || state.result || {};
-                const matched = progress.matched_tracks || 0;
-                const failed = progress.failed_tracks || 0;
-                const total = progress.total_tracks || 0;
-                const synced = progress.synced_tracks || 0;
-
-                const bar = document.getElementById(`sync-history-bar-${entryId}`);
-                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
-                const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
-                const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
-
-                if (bar) bar.style.width = '100%';
-                if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
-                if (matchedEl) matchedEl.textContent = `${matched} matched`;
-                if (failedEl) failedEl.textContent = `${failed} failed`;
-
-                // Hide cancel button
-                const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
-                if (cancelBtn) cancelBtn.style.display = 'none';
-
-                showToast(`Re-sync complete: ${matched}/${total} matched`, 'success');
-
-                // Auto-collapse after 5 seconds
-                setTimeout(() => _cleanupSyncHistoryResync(entryId, 'finished'), 5000);
-
-            } else if (state.status === 'cancelled' || state.status === 'error') {
-                clearInterval(pollInterval);
-                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
-                if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error: ${state.error || 'Unknown'}`;
-
-                const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
-                if (cancelBtn) cancelBtn.style.display = 'none';
-
-                setTimeout(() => _cleanupSyncHistoryResync(entryId, state.status), 3000);
-            }
-        } catch (err) {
-            console.error('Error polling sync status:', err);
-            clearInterval(pollInterval);
-            _cleanupSyncHistoryResync(entryId, 'error');
-        }
-    }, 2000);
-
-    // Store interval so cancel can clear it
-    if (_activeSyncHistoryResyncs[entryId]) {
-        _activeSyncHistoryResyncs[entryId].pollInterval = pollInterval;
-    }
-}
-
-async function cancelSyncHistoryResync(entryId) {
-    const active = _activeSyncHistoryResyncs[entryId];
-    if (!active) return;
-
-    try {
-        await fetch('/api/sync/cancel', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ playlist_id: active.syncPlaylistId })
-        });
-
-        const stepEl = document.getElementById(`sync-history-step-${entryId}`);
-        if (stepEl) stepEl.textContent = 'Cancelling...';
-
-    } catch (err) {
-        console.error('Error cancelling sync:', err);
-        showToast('Failed to cancel sync', 'error');
-    }
-}
-
-function _cleanupSyncHistoryResync(entryId, finalStatus) {
-    const active = _activeSyncHistoryResyncs[entryId];
-    if (active && active.pollInterval) {
-        clearInterval(active.pollInterval);
-    }
-    delete _activeSyncHistoryResyncs[entryId];
-
-    const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
-    const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
-    const btn = document.getElementById(`resync-btn-${entryId}`);
-
-    if (wrapper) wrapper.classList.remove('syncing');
-    if (progressArea) progressArea.style.display = 'none';
-    if (btn) { btn.disabled = false; btn.textContent = 'Re-sync'; }
-}
-
-async function deleteSyncHistoryEntry(entryId) {
-    try {
-        const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
-        const data = await resp.json();
-        if (data.success) {
-            const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
-            if (wrapper) {
-                wrapper.style.transition = 'opacity 0.2s ease, max-height 0.3s ease';
-                wrapper.style.opacity = '0';
-                wrapper.style.maxHeight = wrapper.offsetHeight + 'px';
-                requestAnimationFrame(() => { wrapper.style.maxHeight = '0'; wrapper.style.overflow = 'hidden'; });
-                setTimeout(() => wrapper.remove(), 300);
-            }
-        } else {
-            showToast('Failed to delete entry', 'error');
-        }
-    } catch (err) {
-        console.error('Error deleting sync history entry:', err);
-        showToast('Failed to delete entry', 'error');
-    }
-}
-
-// ── Sync Playlist to Server (from Download Modal) ──────────────────
-
-// Track active modal syncs
-let _activeModalSyncs = {};
-
-function _isBeatportPlaylistId(id) {
-    return id.startsWith('beatport_chart_') || id.startsWith('beatport_top100_') || id.startsWith('beatport_hype100_');
-}
-
-async function syncPlaylistToServer(playlistId) {
-    const process = activeDownloadProcesses[playlistId];
-    if (!process) { showToast('No playlist data found', 'error'); return; }
-
-    // Disable the sync button
-    const btn = document.getElementById(`sync-server-btn-${playlistId}`);
-    if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
-
-    // Show progress area
-    const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
-    if (progressArea) progressArea.style.display = '';
-
-    const syncPlaylistId = `beatport_sync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    const playlistName = process.playlist?.name || 'Beatport Playlist';
-
-    // Format tracks for the sync API
-    const tracks = (process.tracks || []).map(t => {
-        const artists = Array.isArray(t.artists)
-            ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
-            : [t.artists || 'Unknown Artist'];
-        const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
-        return {
-            id: t.id || '',
-            name: t.name || '',
-            artists: artists,
-            album: albumName,
-            duration_ms: t.duration_ms || 0,
-            popularity: t.popularity || 0
-        };
-    });
-
-    try {
-        const response = await fetch('/api/sync/start', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_id: syncPlaylistId,
-                playlist_name: playlistName,
-                tracks: tracks
-            })
-        });
-
-        const result = await response.json();
-        if (!result.success) {
-            showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
-            _cleanupModalSync(playlistId);
-            return;
-        }
-
-        _activeModalSyncs[playlistId] = { syncPlaylistId };
-        _pollModalSyncProgress(playlistId, syncPlaylistId);
-
-    } catch (err) {
-        console.error('Error starting playlist sync:', err);
-        showToast('Failed to start sync', 'error');
-        _cleanupModalSync(playlistId);
-    }
-}
-
-function _pollModalSyncProgress(playlistId, syncPlaylistId) {
-    const pollInterval = setInterval(async () => {
-        try {
-            const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
-            if (!resp.ok) { clearInterval(pollInterval); _cleanupModalSync(playlistId, 'error'); return; }
-            const state = await resp.json();
-
-            const bar = document.getElementById(`modal-sync-bar-${playlistId}`);
-            const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
-            const matchedEl = document.getElementById(`modal-sync-matched-${playlistId}`);
-            const failedEl = document.getElementById(`modal-sync-failed-${playlistId}`);
-
-            if (state.status === 'syncing' || state.status === 'starting') {
-                const p = state.progress || {};
-                const matched = p.matched_tracks || 0;
-                const failed = p.failed_tracks || 0;
-                const total = p.total_tracks || 0;
-                const step = p.current_step || 'Processing';
-                const currentTrack = p.current_track || '';
-                const processed = matched + failed;
-                const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-                if (bar) bar.style.width = `${percent}%`;
-                if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
-                if (matchedEl) matchedEl.textContent = `${matched} matched`;
-                if (failedEl) failedEl.textContent = `${failed} failed`;
-
-            } else if (state.status === 'finished') {
-                clearInterval(pollInterval);
-                const p = state.progress || state.result || {};
-                const matched = p.matched_tracks || 0;
-                const failed = p.failed_tracks || 0;
-                const total = p.total_tracks || 0;
-                const synced = p.synced_tracks || 0;
-
-                if (bar) bar.style.width = '100%';
-                if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
-                if (matchedEl) matchedEl.textContent = `${matched} matched`;
-                if (failedEl) failedEl.textContent = `${failed} failed`;
-
-                const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
-                if (cancelBtn) cancelBtn.style.display = 'none';
-
-                showToast(`Server sync complete: ${matched}/${total} matched`, 'success');
-
-                // Re-enable sync button after a delay
-                setTimeout(() => _cleanupModalSync(playlistId, 'finished'), 5000);
-
-            } else if (state.status === 'cancelled' || state.status === 'error') {
-                clearInterval(pollInterval);
-                if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error`;
-                const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
-                if (cancelBtn) cancelBtn.style.display = 'none';
-                setTimeout(() => _cleanupModalSync(playlistId, state.status), 3000);
-            }
-        } catch (err) {
-            console.error('Error polling modal sync status:', err);
-            clearInterval(pollInterval);
-            _cleanupModalSync(playlistId, 'error');
-        }
-    }, 2000);
-
-    if (_activeModalSyncs[playlistId]) {
-        _activeModalSyncs[playlistId].pollInterval = pollInterval;
-    }
-}
-
-async function cancelModalSync(playlistId) {
-    const active = _activeModalSyncs[playlistId];
-    if (!active) return;
-
-    try {
-        await fetch('/api/sync/cancel', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ playlist_id: active.syncPlaylistId })
-        });
-        const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
-        if (stepEl) stepEl.textContent = 'Cancelling...';
-    } catch (err) {
-        console.error('Error cancelling modal sync:', err);
-    }
-}
-
-function _cleanupModalSync(playlistId, finalStatus) {
-    const active = _activeModalSyncs[playlistId];
-    if (active && active.pollInterval) clearInterval(active.pollInterval);
-    delete _activeModalSyncs[playlistId];
-
-    const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
-    const btn = document.getElementById(`sync-server-btn-${playlistId}`);
-
-    if (finalStatus === 'finished') {
-        // Keep progress visible but hide after fade
-        if (progressArea) setTimeout(() => { progressArea.style.display = 'none'; }, 300);
-    } else {
-        if (progressArea) progressArea.style.display = 'none';
-    }
-    if (btn) { btn.disabled = false; btn.textContent = 'Sync to Server'; }
-}
-
-// ── Metadata Cache Modal ────────────────────────────────────────────
-let _mcacheCurrentTab = 'artist';
-let _mcachePage = 0;
-let _mcacheSearchTimeout = null;
-// ==================================================================================
-// DOWNLOAD BLACKLIST VIEWER
-// ==================================================================================
-
-async function loadBlacklistCount() {
-    try {
-        const res = await fetch('/api/library/blacklist');
-        const data = await res.json();
-        const el = document.getElementById('blacklist-count');
-        if (el) el.textContent = data.entries?.length || 0;
-    } catch (e) { /* ignore */ }
-}
-
-async function openBlacklistModal() {
-    const existing = document.getElementById('blacklist-modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'blacklist-modal-overlay';
-    overlay.className = 'redownload-overlay';
-    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="blacklist-modal">
-            <div class="blacklist-modal-header">
-                <h3>Download Blacklist</h3>
-                <button class="redownload-close" onclick="document.getElementById('blacklist-modal-overlay')?.remove()">&times;</button>
-            </div>
-            <div class="blacklist-modal-body" id="blacklist-modal-body">
-                <div class="redownload-loading"><div class="server-search-spinner"></div>Loading...</div>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-
-    const escH = e => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escH); } };
-    document.addEventListener('keydown', escH);
-
-    try {
-        const res = await fetch('/api/library/blacklist');
-        const data = await res.json();
-        const body = document.getElementById('blacklist-modal-body');
-
-        if (!data.success || !data.entries || data.entries.length === 0) {
-            body.innerHTML = '<div class="blacklist-empty">No blocked sources. Sources can be blacklisted from the Source Info (ℹ) button on tracks in the enhanced library view.</div>';
-            return;
-        }
-
-        const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜' };
-
-        body.innerHTML = data.entries.map(e => {
-            const displayFile = (e.blocked_filename || '').replace(/\\/g, '/').split('/').pop() || 'Unknown';
-            const svc = e.blocked_username && ['youtube', 'tidal', 'qobuz', 'hifi', 'deezer_dl'].includes(e.blocked_username) ? e.blocked_username : 'soulseek';
-            const icon = serviceIcons[svc] || '🔍';
-            const ago = e.created_at ? timeAgo(e.created_at) : '';
-            return `
-                <div class="blacklist-entry">
-                    <div class="blacklist-entry-icon">${icon}</div>
-                    <div class="blacklist-entry-info">
-                        <div class="blacklist-entry-track">${_esc(e.track_artist || '')}${e.track_artist && e.track_title ? ' — ' : ''}${_esc(e.track_title || '')}</div>
-                        <div class="blacklist-entry-file" title="${_esc(e.blocked_filename || '')}">${_esc(displayFile)}</div>
-                        ${e.blocked_username && svc === 'soulseek' ? `<div class="blacklist-entry-user">from ${_esc(e.blocked_username)}</div>` : ''}
-                    </div>
-                    <div class="blacklist-entry-meta">${ago}</div>
-                    <button class="blacklist-entry-remove" onclick="_removeBlacklistEntry(${e.id}, this)" title="Remove from blacklist">✕</button>
-                </div>`;
-        }).join('');
-
-    } catch (e) {
-        document.getElementById('blacklist-modal-body').innerHTML = `<div class="blacklist-empty">Error: ${e.message}</div>`;
-    }
-}
-
-async function _removeBlacklistEntry(id, btn) {
-    if (!await showConfirmDialog({ title: 'Remove from Blacklist', message: 'Allow this source to be used for downloads again?', confirmText: 'Remove' })) return;
-    try {
-        const res = await fetch(`/api/library/blacklist/${id}`, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            btn.closest('.blacklist-entry').remove();
-            showToast('Removed from blacklist', 'success');
-            loadBlacklistCount();
-        }
-    } catch (e) {
-        showToast('Error: ' + e.message, 'error');
-    }
-}
-
-const MCACHE_PAGE_SIZE = 48;
-
-function openMetadataCacheModal() {
-    const modal = document.getElementById('mcache-browse-modal');
-    if (modal) {
-        modal.style.display = 'flex';
-        _mcacheCurrentTab = 'artist';
-        _mcachePage = 0;
-        // Reset UI
-        document.querySelectorAll('.mcache-tab').forEach(t => t.classList.remove('active'));
-        document.querySelector('.mcache-tab[data-tab="artist"]')?.classList.add('active');
-        const searchInput = document.getElementById('mcache-search');
-        if (searchInput) searchInput.value = '';
-        const sourceFilter = document.getElementById('mcache-source-filter');
-        if (sourceFilter) sourceFilter.value = '';
-        const sortFilter = document.getElementById('mcache-sort-filter');
-        if (sortFilter) sortFilter.value = 'last_accessed_at';
-        loadMetadataCacheBrowseStats();
-        loadMetadataCacheBrowse();
-    }
-}
-
-function closeMetadataCacheModal() {
-    const modal = document.getElementById('mcache-browse-modal');
-    if (modal) modal.style.display = 'none';
-}
-
-async function loadMetadataCacheBrowseStats() {
-    try {
-        const response = await fetch('/api/metadata-cache/stats');
-        if (!response.ok) return;
-        const stats = await response.json();
-
-        const el = (id, val) => {
-            const e = document.getElementById(id);
-            if (e) e.textContent = val;
-        };
-
-        const spotifyTotal = (stats.artists?.spotify || 0) + (stats.albums?.spotify || 0) + (stats.tracks?.spotify || 0);
-        const itunesTotal = (stats.artists?.itunes || 0) + (stats.albums?.itunes || 0) + (stats.tracks?.itunes || 0);
-        const deezerTotal = (stats.artists?.deezer || 0) + (stats.albums?.deezer || 0) + (stats.tracks?.deezer || 0);
-        const beatportTotal = (stats.artists?.beatport || 0) + (stats.albums?.beatport || 0) + (stats.tracks?.beatport || 0);
-        el('mcache-browse-spotify-count', spotifyTotal);
-        el('mcache-browse-itunes-count', itunesTotal);
-        el('mcache-browse-deezer-count', deezerTotal);
-        el('mcache-browse-beatport-count', beatportTotal);
-        const discogsTotal = (stats.artists?.discogs || 0) + (stats.albums?.discogs || 0) + (stats.tracks?.discogs || 0);
-        el('mcache-browse-discogs-count', discogsTotal);
-        el('mcache-browse-musicbrainz-count', stats.musicbrainz_total || 0);
-        el('mcache-browse-hits', stats.total_hits || 0);
-        el('mcache-browse-searches', stats.searches || 0);
-    } catch (e) { /* ignore */ }
-}
-
-function switchMetadataCacheTab(tab) {
-    _mcacheCurrentTab = tab;
-    _mcachePage = 0;
-    document.querySelectorAll('.mcache-tab').forEach(t => {
-        t.classList.toggle('active', t.dataset.tab === tab);
-    });
-    loadMetadataCacheBrowse();
-}
-
-async function loadMetadataCacheBrowse() {
-    const grid = document.getElementById('mcache-grid');
-    if (!grid) return;
-
-    const source = document.getElementById('mcache-source-filter')?.value || '';
-    const search = document.getElementById('mcache-search')?.value || '';
-    const sort = document.getElementById('mcache-sort-filter')?.value || 'last_accessed_at';
-
-    grid.innerHTML = '<div class="mcache-empty"><div class="mcache-empty-icon">...</div><div class="mcache-empty-sub">Loading...</div></div>';
-
-    try {
-        let data;
-        if (source === 'musicbrainz') {
-            // MusicBrainz is a separate cache table — use dedicated endpoint
-            const params = new URLSearchParams({
-                entity_type: _mcacheCurrentTab,
-                page: _mcachePage + 1,
-                limit: MCACHE_PAGE_SIZE
-            });
-            if (search) params.set('search', search);
-            const response = await fetch(`/api/metadata-cache/browse-musicbrainz?${params}`);
-            if (!response.ok) throw new Error('Failed to load');
-            data = await response.json();
-        } else {
-            const params = new URLSearchParams({
-                type: _mcacheCurrentTab,
-                sort: sort,
-                sort_dir: sort === 'name' ? 'asc' : 'desc',
-                offset: _mcachePage * MCACHE_PAGE_SIZE,
-                limit: MCACHE_PAGE_SIZE
-            });
-            if (source) params.set('source', source);
-            if (search) params.set('search', search);
-            const response = await fetch(`/api/metadata-cache/browse?${params}`);
-            if (!response.ok) throw new Error('Failed to load');
-            data = await response.json();
-        }
-
-        if (!data.items || data.items.length === 0) {
-            grid.innerHTML = `
-                <div class="mcache-empty">
-                    <div class="mcache-empty-icon">📦</div>
-                    <div class="mcache-empty-title">No cached ${_mcacheCurrentTab}s yet</div>
-                    <div class="mcache-empty-sub">As you search and browse music in SoulSync, API responses will be cached here automatically.</div>
-                </div>`;
-            renderMetadataCachePagination(0, 0);
-            return;
-        }
-
-        renderMetadataCacheGrid(data.items, _mcacheCurrentTab);
-        renderMetadataCachePagination(data.total, data.offset);
-    } catch (e) {
-        grid.innerHTML = '<div class="mcache-empty"><div class="mcache-empty-sub">Failed to load cache data.</div></div>';
-    }
-}
-
-function renderMetadataCacheGrid(items, entityType) {
-    const grid = document.getElementById('mcache-grid');
-    if (!grid) return;
-
-    grid.innerHTML = items.map(item => {
-        const source = item.source || 'spotify';
-        const sourceBadge = `<span class="mcache-source-badge ${source}">${source}</span>`;
-        const cacheAge = formatCacheAge(item.last_accessed_at);
-        const hits = item.access_count || 1;
-
-        let imageHtml = '';
-        const isArtist = entityType === 'artist';
-        const shapeClass = isArtist ? ' artist' : '';
-
-        if (item.image_url) {
-            imageHtml = `<img class="mcache-card-image${shapeClass}" src="${item.image_url}" alt="" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="mcache-card-image-placeholder${shapeClass}" style="display:none">${(item.name || '?')[0].toUpperCase()}</div>`;
-        } else {
-            imageHtml = `<div class="mcache-card-image-placeholder${shapeClass}">${(item.name || '?')[0].toUpperCase()}</div>`;
-        }
-
-        let subText = '';
-        let metaText = '';
-
-        if (source === 'musicbrainz') {
-            subText = item.artist_name || '';
-            metaText = item._mb_matched ? `MBID: ${(item._mb_id || '').substring(0, 8)}…` : 'No match found';
-        } else if (entityType === 'artist') {
-            const genres = item.genres ? (typeof item.genres === 'string' ? JSON.parse(item.genres || '[]') : item.genres) : [];
-            subText = genres.length > 0 ? genres.slice(0, 2).join(', ') : '';
-            if (item.popularity) metaText = `Pop: ${item.popularity}`;
-        } else if (entityType === 'album') {
-            subText = item.artist_name || '';
-            const parts = [];
-            if (item.release_date) parts.push(item.release_date.substring(0, 4));
-            if (item.total_tracks) parts.push(`${item.total_tracks} tracks`);
-            if (item.album_type) parts.push(item.album_type);
-            metaText = parts.join(' · ');
-        } else if (entityType === 'track') {
-            subText = item.artist_name || '';
-            const parts = [];
-            if (item.album_name) parts.push(item.album_name);
-            if (item.duration_ms) parts.push(formatDuration(item.duration_ms));
-            metaText = parts.join(' · ');
-        }
-
-        const clickAttr = source === 'musicbrainz' ? '' : `onclick="openMetadataCacheDetail('${source}', '${entityType}', '${encodeURIComponent(item.entity_id)}')"`;
-        const mbStatusClass = source === 'musicbrainz' ? (item._mb_matched ? ' mb-matched' : ' mb-failed') : '';
-
-        return `
-            <div class="mcache-card${mbStatusClass}" ${clickAttr}>
-                <div class="mcache-card-top">
-                    ${imageHtml}
-                    <div class="mcache-card-info">
-                        <div class="mcache-card-name" title="${(item.name || '').replace(/"/g, '&quot;')}">${item.name || 'Unknown'}</div>
-                        ${subText ? `<div class="mcache-card-sub">${subText}</div>` : ''}
-                        ${metaText ? `<div class="mcache-card-meta">${metaText}</div>` : ''}
-                    </div>
-                </div>
-                <div class="mcache-card-bottom">
-                    ${sourceBadge}
-                    <span class="mcache-card-cache-info">${cacheAge} · ${hits}x</span>
-                </div>
-            </div>`;
-    }).join('');
-}
-
-function renderMetadataCachePagination(total, offset) {
-    const container = document.getElementById('mcache-pagination');
-    if (!container) return;
-
-    const totalPages = Math.ceil(total / MCACHE_PAGE_SIZE);
-    const currentPage = Math.floor(offset / MCACHE_PAGE_SIZE);
-
-    if (totalPages <= 1) {
-        container.innerHTML = total > 0 ? `<span style="font-size:11px;color:rgba(255,255,255,0.3)">${total} result${total !== 1 ? 's' : ''}</span>` : '';
-        return;
-    }
-
-    let html = '';
-    html += `<button class="mcache-page-btn" ${currentPage === 0 ? 'disabled' : ''} onclick="_mcachePage=${currentPage - 1};loadMetadataCacheBrowse()">‹</button>`;
-
-    const maxVisible = 7;
-    let start = Math.max(0, currentPage - Math.floor(maxVisible / 2));
-    let end = Math.min(totalPages, start + maxVisible);
-    if (end - start < maxVisible) start = Math.max(0, end - maxVisible);
-
-    if (start > 0) {
-        html += `<button class="mcache-page-btn" onclick="_mcachePage=0;loadMetadataCacheBrowse()">1</button>`;
-        if (start > 1) html += `<span style="color:rgba(255,255,255,0.2);padding:0 4px">...</span>`;
-    }
-
-    for (let i = start; i < end; i++) {
-        html += `<button class="mcache-page-btn${i === currentPage ? ' active' : ''}" onclick="_mcachePage=${i};loadMetadataCacheBrowse()">${i + 1}</button>`;
-    }
-
-    if (end < totalPages) {
-        if (end < totalPages - 1) html += `<span style="color:rgba(255,255,255,0.2);padding:0 4px">...</span>`;
-        html += `<button class="mcache-page-btn" onclick="_mcachePage=${totalPages - 1};loadMetadataCacheBrowse()">${totalPages}</button>`;
-    }
-
-    html += `<button class="mcache-page-btn" ${currentPage >= totalPages - 1 ? 'disabled' : ''} onclick="_mcachePage=${currentPage + 1};loadMetadataCacheBrowse()">›</button>`;
-    html += `<span style="font-size:11px;color:rgba(255,255,255,0.25);margin-left:8px">${total} total</span>`;
-
-    container.innerHTML = html;
-}
-
-async function openMetadataCacheDetail(source, entityType, entityId) {
-    const modal = document.getElementById('mcache-detail-modal');
-    const body = document.getElementById('mcache-detail-body');
-    const title = document.getElementById('mcache-detail-title');
-    if (!modal || !body) return;
-
-    modal.style.display = 'flex';
-    body.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,0.4)">Loading...</div>';
-    if (title) title.textContent = 'Loading...';
-
-    try {
-        const response = await fetch(`/api/metadata-cache/entity/${source}/${entityType}/${entityId}`);
-        if (!response.ok) throw new Error('Not found');
-        const data = await response.json();
-
-        if (title) title.textContent = data.name || 'Unknown';
-
-        const isArtist = entityType === 'artist';
-        const shapeClass = isArtist ? ' artist' : '';
-        let imageHtml = '';
-        if (data.image_url) {
-            imageHtml = `<img class="mcache-detail-image${shapeClass}" src="${data.image_url}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="mcache-detail-image-placeholder${shapeClass}" style="display:none">${(data.name || '?')[0].toUpperCase()}</div>`;
-        } else {
-            imageHtml = `<div class="mcache-detail-image-placeholder${shapeClass}">${(data.name || '?')[0].toUpperCase()}</div>`;
-        }
-
-        const sourceBadge = `<span class="mcache-source-badge ${source}">${source}</span>`;
-        const typeBadge = `<span class="mcache-type-badge">${entityType}</span>`;
-
-        // Build structured fields table
-        let fieldsHtml = '<table class="mcache-detail-table">';
-        const addRow = (label, value) => {
-            if (value !== null && value !== undefined && value !== '') {
-                fieldsHtml += `<tr><td>${label}</td><td>${value}</td></tr>`;
-            }
-        };
-
-        addRow('Entity ID', data.entity_id);
-        addRow('Name', data.name);
-
-        if (entityType === 'artist') {
-            const genres = data.genres ? (typeof data.genres === 'string' ? JSON.parse(data.genres || '[]') : data.genres) : [];
-            if (genres.length) addRow('Genres', genres.join(', '));
-            if (data.popularity) addRow('Popularity', data.popularity);
-            if (data.followers) addRow('Followers', data.followers.toLocaleString());
-        } else if (entityType === 'album') {
-            addRow('Artist', data.artist_name);
-            addRow('Release Date', data.release_date);
-            addRow('Total Tracks', data.total_tracks);
-            addRow('Album Type', data.album_type);
-            addRow('Label', data.label);
-        } else if (entityType === 'track') {
-            addRow('Artist', data.artist_name);
-            addRow('Album', data.album_name);
-            if (data.duration_ms) addRow('Duration', formatDuration(data.duration_ms));
-            addRow('Track Number', data.track_number);
-            addRow('Disc Number', data.disc_number);
-            addRow('Explicit', data.explicit ? 'Yes' : 'No');
-            addRow('ISRC', data.isrc);
-            if (data.preview_url) addRow('Preview', `<a href="${data.preview_url}" target="_blank" style="color:var(--accent,#6d5dfc)">Listen</a>`);
-        }
-
-        fieldsHtml += '</table>';
-
-        // Cache metadata section
-        let cacheHtml = '<div class="mcache-detail-section-title">Cache Metadata</div>';
-        cacheHtml += '<table class="mcache-detail-table">';
-        if (data.created_at) cacheHtml += `<tr><td>Cached At</td><td>${new Date(data.created_at).toLocaleString()}</td></tr>`;
-        if (data.last_accessed_at) cacheHtml += `<tr><td>Last Accessed</td><td>${new Date(data.last_accessed_at).toLocaleString()}</td></tr>`;
-        if (data.access_count) cacheHtml += `<tr><td>Access Count</td><td>${data.access_count}</td></tr>`;
-        if (data.ttl_days) cacheHtml += `<tr><td>TTL</td><td>${data.ttl_days} days</td></tr>`;
-        cacheHtml += '</table>';
-
-        // Raw JSON section
-        let rawJsonHtml = '';
-        if (data.raw_json) {
-            const rawStr = typeof data.raw_json === 'string' ? data.raw_json : JSON.stringify(data.raw_json, null, 2);
-            const escapedJson = rawStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-            rawJsonHtml = `
-                <div class="mcache-detail-section-title">Raw API Response</div>
-                <button class="mcache-raw-json-toggle" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none';this.textContent=this.nextElementSibling.style.display==='none'?'Show Raw JSON':'Hide Raw JSON'">Show Raw JSON</button>
-                <pre class="mcache-raw-json" style="display:none">${escapedJson}</pre>`;
-        }
-
-        body.innerHTML = `
-            <div class="mcache-detail-hero">
-                ${imageHtml}
-                <div class="mcache-detail-hero-info">
-                    <div class="mcache-detail-hero-name">${data.name || 'Unknown'}</div>
-                    ${entityType !== 'artist' && data.artist_name ? `<div class="mcache-detail-hero-sub">${data.artist_name}</div>` : ''}
-                    <div class="mcache-detail-badges">
-                        ${sourceBadge}
-                        ${typeBadge}
-                    </div>
-                </div>
-            </div>
-            <div class="mcache-detail-section-title">Details</div>
-            ${fieldsHtml}
-            ${cacheHtml}
-            ${rawJsonHtml}`;
-    } catch (e) {
-        body.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,0.4)">Failed to load entity details.</div>';
-    }
-}
-
-function closeMetadataCacheDetail() {
-    const modal = document.getElementById('mcache-detail-modal');
-    if (modal) modal.style.display = 'none';
-}
-
-function toggleMcacheClearDropdown(event) {
-    event.stopPropagation();
-    const menu = document.getElementById('mcache-clear-dropdown-menu');
-    if (!menu) return;
-    const isOpen = menu.style.display === 'block';
-    menu.style.display = isOpen ? 'none' : 'block';
-    if (!isOpen) {
-        const closeHandler = (e) => {
-            if (!e.target.closest('#mcache-clear-dropdown')) {
-                menu.style.display = 'none';
-                document.removeEventListener('click', closeHandler);
-            }
-        };
-        setTimeout(() => document.addEventListener('click', closeHandler), 0);
-    }
-}
-
-async function clearMetadataCache() {
-    if (!confirm('Clear ALL cached metadata? This removes all cached API responses.')) return;
-    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
-    try {
-        const response = await fetch('/api/metadata-cache/clear', { method: 'DELETE' });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Cleared ${data.cleared} cached entries`, 'success');
-            loadMetadataCacheBrowseStats();
-            loadMetadataCacheBrowse();
-            loadMetadataCacheStats();
-        } else {
-            showToast('Failed to clear cache', 'error');
-        }
-    } catch (e) {
-        showToast('Error clearing cache', 'error');
-    }
-}
-
-async function clearMetadataCacheBySource(source) {
-    if (!confirm(`Clear all ${source} cached metadata?`)) return;
-    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
-    try {
-        const response = await fetch(`/api/metadata-cache/clear?source=${source}`, { method: 'DELETE' });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Cleared ${data.cleared} ${source} cache entries`, 'success');
-            loadMetadataCacheBrowseStats();
-            loadMetadataCacheBrowse();
-            loadMetadataCacheStats();
-        } else {
-            showToast(`Failed to clear ${source} cache`, 'error');
-        }
-    } catch (e) {
-        showToast(`Error clearing ${source} cache`, 'error');
-    }
-}
-
-async function clearMusicBrainzCache(failedOnly = false) {
-    const label = failedOnly ? 'failed MusicBrainz lookups' : 'ALL MusicBrainz cache entries';
-    if (!confirm(`Clear ${label}?`)) return;
-    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
-
-    try {
-        const url = failedOnly ? '/api/metadata-cache/clear-musicbrainz?failed_only=true' : '/api/metadata-cache/clear-musicbrainz';
-        const response = await fetch(url, { method: 'DELETE' });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Cleared ${data.cleared} MusicBrainz cache entries`, 'success');
-            loadMetadataCacheBrowseStats();
-            loadMetadataCacheBrowse();
-            loadMetadataCacheStats();
-        } else {
-            showToast('Failed to clear MusicBrainz cache', 'error');
-        }
-    } catch (e) {
-        showToast('Error clearing MusicBrainz cache', 'error');
-    }
-}
-
-function debouncedMetadataCacheSearch() {
-    if (_mcacheSearchTimeout) clearTimeout(_mcacheSearchTimeout);
-    _mcacheSearchTimeout = setTimeout(() => {
-        _mcachePage = 0;
-        loadMetadataCacheBrowse();
-    }, 400);
-}
-
-function formatCacheAge(timestamp) {
-    if (!timestamp) return '—';
-    const now = new Date();
-    const then = new Date(timestamp);
-    const diffMs = now - then;
-    const diffMin = Math.floor(diffMs / 60000);
-    if (diffMin < 1) return 'now';
-    if (diffMin < 60) return `${diffMin}m`;
-    const diffHr = Math.floor(diffMin / 60);
-    if (diffHr < 24) return `${diffHr}h`;
-    const diffDays = Math.floor(diffHr / 24);
-    if (diffDays < 30) return `${diffDays}d`;
-    return `${Math.floor(diffDays / 30)}mo`;
-}
-
-// ============================================
-// == TOOL HELP MODAL                        ==
-// ============================================
-
-const TOOL_HELP_CONTENT = {
-    'db-updater': {
-        title: 'Database Updater',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Database Updater syncs your media server library (Plex, Jellyfin, or Navidrome) with SoulSync's internal database.</p>
-
-            <h4>Update Modes</h4>
-            <ul>
-                <li><strong>Incremental Update:</strong> Only scans for new artists, albums, and tracks that have been added since the last update. Fast and efficient for regular updates.</li>
-                <li><strong>Full Refresh:</strong> Completely rebuilds the database from scratch. Use this if you've made significant changes to your library or if data seems out of sync.</li>
-            </ul>
-
-            <h4>When to use it?</h4>
-            <ul>
-                <li>After adding new music to your media server</li>
-                <li>When library statistics seem incorrect</li>
-                <li>After changing media server settings</li>
-            </ul>
-
-            <h4>Progress Persistence</h4>
-            <p>The update runs in the background. You can close this page and return later - progress will be preserved and continue where it left off.</p>
-        `
-    },
-    'metadata-updater': {
-        title: 'Metadata Updater',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Metadata Updater triggers all enrichment workers simultaneously, re-checking every item in your library against all connected services (Spotify, MusicBrainz, iTunes, Deezer, AudioDB, Last.fm, Genius, Tidal, Qobuz).</p>
-
-            <h4>Refresh Interval Options</h4>
-            <ul>
-                <li><strong>6 months:</strong> Only updates metadata for artists not updated in the last 180 days</li>
-                <li><strong>3 months:</strong> Updates metadata for artists not updated in the last 90 days</li>
-                <li><strong>1 month:</strong> Updates metadata for artists not updated in the last 30 days</li>
-                <li><strong>Force All:</strong> Updates all artists regardless of when they were last updated</li>
-            </ul>
-
-            <h4>What gets updated?</h4>
-            <ul>
-                <li>Artist profile photos, genres, and descriptions</li>
-                <li>Album cover artwork, labels, and release info</li>
-                <li>Track ISRCs, explicit flags, and external IDs</li>
-                <li>Service match status for all 9 enrichment workers</li>
-            </ul>
-
-            <h4>Note</h4>
-            <p>Available for <strong>Plex</strong> and <strong>Jellyfin</strong> media servers. Each enrichment worker only runs if its service is authenticated.</p>
-        `
-    },
-    'quality-scanner': {
-        title: 'Quality Scanner',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Quality Scanner identifies tracks in your library that don't meet your preferred quality settings and automatically matches them to Spotify to add to your wishlist for re-downloading.</p>
-
-            <h4>Scan Scope</h4>
-            <ul>
-                <li><strong>Watchlist Artists Only:</strong> Only scans tracks from artists you're watching. Faster and more focused.</li>
-                <li><strong>All Library Tracks:</strong> Scans your entire music library. Comprehensive but takes longer.</li>
-            </ul>
-
-            <h4>How it works</h4>
-            <ol>
-                <li>Scans tracks and checks file format against your quality preferences</li>
-                <li>Identifies tracks below your quality threshold (e.g., MP3 when you prefer FLAC)</li>
-                <li>Uses fuzzy matching to find the track on Spotify (70% confidence minimum)</li>
-                <li>Automatically adds matched tracks to your wishlist for re-download</li>
-            </ol>
-
-            <h4>Quality Tiers</h4>
-            <ul>
-                <li><strong>Tier 1 (Best):</strong> FLAC, WAV, ALAC, AIFF - Lossless formats</li>
-                <li><strong>Tier 2:</strong> OPUS, OGG - High quality lossy</li>
-                <li><strong>Tier 3:</strong> M4A, AAC - Standard lossy</li>
-                <li><strong>Tier 4:</strong> MP3, WMA - Lower quality lossy</li>
-            </ul>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Processed:</strong> Total tracks scanned so far</li>
-                <li><strong>Quality Met:</strong> Tracks that meet your quality standards</li>
-                <li><strong>Low Quality:</strong> Tracks below your quality threshold</li>
-                <li><strong>Matched:</strong> Low quality tracks successfully matched to Spotify and added to wishlist</li>
-            </ul>
-        `
-    },
-    'duplicate-cleaner': {
-        title: 'Duplicate Cleaner',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Duplicate Cleaner scans your output folder for duplicate audio files and automatically removes lower-quality versions, keeping only the best copy.</p>
-
-            <h4>How it detects duplicates</h4>
-            <p>Files are considered duplicates when:</p>
-            <ul>
-                <li>They are in the <strong>same folder</strong></li>
-                <li>They have the <strong>exact same filename</strong> (ignoring file extension)</li>
-            </ul>
-            <p>Example: <code>Song.flac</code> and <code>Song.mp3</code> in the same folder = duplicates ✓</p>
-            <p>Example: <code>Song.flac</code> and <code>Song (Remaster).flac</code> = NOT duplicates ✗</p>
-
-            <h4>Which file is kept?</h4>
-            <p>Priority order (best to worst):</p>
-            <ol>
-                <li><strong>Format priority:</strong> FLAC/Lossless > OPUS/OGG > M4A/AAC > MP3/WMA</li>
-                <li><strong>If same format:</strong> Larger file size is kept (usually indicates better bitrate)</li>
-            </ol>
-
-            <h4>Where do deleted files go?</h4>
-            <p>Removed files are moved to <code>Transfer/deleted/</code> folder (not permanently deleted). You can review and recover them if needed.</p>
-
-            <h4>Safety Features</h4>
-            <ul>
-                <li>Only processes audio files (FLAC, MP3, M4A, etc.)</li>
-                <li>Only removes files with identical names in the same folder</li>
-                <li>Files are moved, not deleted - fully recoverable</li>
-                <li>Preserves original folder structure in the deleted folder</li>
-            </ul>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Files Scanned:</strong> Total audio files checked</li>
-                <li><strong>Duplicates Found:</strong> Number of duplicate files detected</li>
-                <li><strong>Deleted:</strong> Files moved to deleted folder</li>
-                <li><strong>Space Freed:</strong> Total disk space reclaimed</li>
-            </ul>
-        `
-    },
-    'media-scan': {
-        title: 'Media Server Scan',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Media Server Scan tool manually triggers a Plex media library scan to detect newly downloaded music files.</p>
-
-            <h4>When to use it?</h4>
-            <ul>
-                <li>After downloading new tracks to refresh your Plex library</li>
-                <li>When new music isn't showing up in Plex</li>
-                <li>To force an immediate library update instead of waiting for auto-scan</li>
-            </ul>
-
-            <h4>What happens when you scan?</h4>
-            <ol>
-                <li><strong>Plex library scan:</strong> Plex scans your music folder for new/changed files</li>
-                <li><strong>Automatic database update:</strong> After the scan completes, SoulSync automatically updates its internal database with new tracks</li>
-                <li><strong>Library refreshed:</strong> New music appears in Plex and SoulSync within moments</li>
-            </ol>
-
-            <h4>Plex only?</h4>
-            <p>Yes! This tool only appears when Plex is your active media server because:</p>
-            <ul>
-                <li><strong>Jellyfin</strong> automatically detects new files instantly (real-time monitoring)</li>
-                <li><strong>Navidrome</strong> automatically detects new files instantly (real-time monitoring)</li>
-                <li><strong>Plex</strong> requires manual scans or has delayed auto-scanning</li>
-            </ul>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Last Scan:</strong> Time of the most recent scan request</li>
-                <li><strong>Status:</strong> Current scan state (Idle, Scanning, Error)</li>
-            </ul>
-
-            <h4>Scan workflow</h4>
-            <p>This tool replicates the same scan process that runs automatically after completing a download modal - ensuring your new tracks are immediately available in your library!</p>
-        `
-    },
-    'retag-tool': {
-        title: 'Retag Tool',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Retag Tool lets you fix metadata on files that have already been downloaded and processed. If an album was tagged with wrong metadata, you can search for the correct match and re-apply tags.</p>
-
-            <h4>How it works</h4>
-            <ul>
-                <li>Browse your past downloads organized by artist</li>
-                <li>Expand an album or single to see individual tracks</li>
-                <li>Click <strong>Retag</strong> to search for the correct album match</li>
-                <li>Select the right album and confirm &mdash; metadata and file paths are updated automatically</li>
-            </ul>
-
-            <h4>What gets updated?</h4>
-            <ul>
-                <li><strong>File tags:</strong> Title, artist, album, track number, genre, cover art</li>
-                <li><strong>File paths:</strong> Files are moved/renamed to match new metadata (based on your path template)</li>
-                <li><strong>Cover art:</strong> cover.jpg is updated in the album folder</li>
-            </ul>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Groups:</strong> Number of album/single download groups tracked</li>
-                <li><strong>Tracks:</strong> Total individual track files tracked</li>
-                <li><strong>Artists:</strong> Number of unique artists across all groups</li>
-            </ul>
-
-            <h4>Notes</h4>
-            <ul>
-                <li>Only album and single downloads are tracked (not playlists)</li>
-                <li>Deleting a group from the list does <strong>not</strong> delete the files</li>
-                <li>Only one retag operation can run at a time</li>
-            </ul>
-        `
-    },
-    'discover-page': {
-        title: 'Discover Page Guide',
-        content: `
-            <h4>What is the Discover page?</h4>
-            <p>The Discover page is your personalized music discovery hub. It uses your watchlist, library listening history, and <strong>MusicMap</strong> to surface new music, create curated playlists, and organize your collection in dynamic ways.</p>
-
-            <h4>🎯 Hero Section (Featured Artists)</h4>
-            <p>The rotating hero showcases <strong>similar artists</strong> discovered via MusicMap. These are artists you don't already have in your library but might enjoy based on your watchlist.</p>
-            <ul>
-                <li>Auto-rotates every 8 seconds through 10 featured artists</li>
-                <li>Similar artists sourced from MusicMap and matched to Spotify</li>
-                <li>Click arrows to navigate manually</li>
-                <li>Add artists to watchlist or view their full discography</li>
-                <li>Data refreshed when watchlist scanner runs</li>
-            </ul>
-
-            <h4>📀 Recent Releases</h4>
-            <p>New albums from artists you're watching <strong>and their MusicMap similar artists</strong>. Cached from Spotify and updated during watchlist scans.</p>
-            <ul>
-                <li>Shows up to 20 recent albums</li>
-                <li>Click any album to view tracks and add to wishlist</li>
-                <li>Automatically filtered to show albums released in the last 90 days</li>
-                <li>Includes both watchlist artists and similar artists from MusicMap</li>
-            </ul>
-
-            <h4>🍂 Seasonal Content (Auto-detected)</h4>
-            <p>Seasonal albums and playlists that appear automatically based on the current season (Winter, Spring, Summer, Fall).</p>
-            <ul>
-                <li><strong>Seasonal Albums:</strong> Albums matching the current season's vibe</li>
-                <li><strong>Seasonal Playlist:</strong> Curated playlist that refreshes with each season</li>
-                <li>Only visible during the matching season</li>
-                <li>Can download and sync to your media server</li>
-            </ul>
-
-            <h4>🎵 Fresh Tape (Release Radar)</h4>
-            <p>Curated playlist of <strong>brand new releases</strong> from your discovery pool. Focuses on tracks released in the past 30 days.</p>
-            <ul>
-                <li>50 tracks, refreshed weekly by watchlist scanner</li>
-                <li>Stays consistent until next update (not random)</li>
-                <li>Download missing tracks or sync to media server</li>
-                <li>Tracks from watchlist artists and MusicMap similar artists</li>
-            </ul>
-
-            <h4>📚 The Archives (Discovery Weekly)</h4>
-            <p>Curated playlist from your <strong>entire discovery pool</strong> - a mix of new and catalog tracks from MusicMap discoveries.</p>
-            <ul>
-                <li>50 tracks, refreshed weekly by watchlist scanner</li>
-                <li>Stays consistent until next update (not random)</li>
-                <li>Broader selection than Fresh Tape (includes older releases)</li>
-                <li>Download missing tracks or sync to media server</li>
-            </ul>
-
-            <h4>📊 Personalized Library Playlists</h4>
-            <p>Playlists generated from <strong>your existing library</strong> using listening statistics:</p>
-            <ul>
-                <li><strong>Recently Added:</strong> Latest 50 tracks added to your library</li>
-                <li><strong>Your Top 50:</strong> All-time most played tracks (requires play count data)</li>
-                <li><strong>Forgotten Favorites:</strong> Tracks you loved but haven't played recently</li>
-            </ul>
-
-            <h4>🎲 Discovery Pool Playlists</h4>
-            <p>Playlists generated from your <strong>discovery pool</strong> (tracks from watchlist/similar artists you don't own yet):</p>
-            <ul>
-                <li><strong>Popular Picks:</strong> High-popularity tracks (Spotify popularity 70+)</li>
-                <li><strong>Hidden Gems:</strong> Underground discoveries (Spotify popularity &lt;40)</li>
-                <li><strong>Discovery Shuffle:</strong> 50 random tracks - different every time you load</li>
-                <li><strong>Familiar Favorites:</strong> Reliable, mid-popularity tracks (40-70)</li>
-            </ul>
-
-            <h4>🎨 Build a Playlist</h4>
-            <p>Create custom playlists using <strong>MusicMap similar artists</strong> from seed artists you select.</p>
-            <ul>
-                <li>Search for any artist on Spotify (even if not in your library)</li>
-                <li>Select 1-5 seed artists</li>
-                <li>Choose playlist size: 25, 50, 75, or 100 tracks</li>
-                <li>Uses cached MusicMap similar artists from your database</li>
-                <li>Pulls albums from those similar artists to build the playlist</li>
-                <li>Download and sync like any other discover playlist</li>
-            </ul>
-
-            <h4>🧠 ListenBrainz Playlists</h4>
-            <p>Access playlists from your ListenBrainz account (requires ListenBrainz authentication).</p>
-            <ul>
-                <li><strong>Created For You:</strong> Playlists generated by ListenBrainz for you</li>
-                <li><strong>Your Playlists:</strong> Playlists you've created on ListenBrainz</li>
-                <li><strong>Collaborative:</strong> Collaborative playlists you're part of</li>
-                <li>Cached locally for performance - click Refresh to update from ListenBrainz</li>
-                <li>Click any playlist to view tracks and download/sync</li>
-            </ul>
-
-            <h4>⏰ Time Machine (Browse by Decade)</h4>
-            <p>Explore your discovery pool organized by release decade.</p>
-            <ul>
-                <li>Dynamically generated tabs for decades with available content (1950s-2020s)</li>
-                <li>Each decade shows up to 100 tracks from that era</li>
-                <li>Great for discovering older catalog releases from your favorite artists</li>
-            </ul>
-
-            <h4>🎵 Browse by Genre</h4>
-            <p>Explore your discovery pool filtered by music genre.</p>
-            <ul>
-                <li>Shows top genres from your discovery pool</li>
-                <li>Click any genre tab to see up to 100 tracks in that genre</li>
-                <li>Genres sourced from Spotify metadata</li>
-            </ul>
-
-            <h4>💾 What is the Discovery Pool?</h4>
-            <p>The <strong>discovery pool</strong> is a database of tracks from:</p>
-            <ul>
-                <li>Artists in your watchlist</li>
-                <li>Similar artists found via <strong>MusicMap</strong></li>
-                <li>Populated during watchlist scanner runs (scrapes music-map.com, matches to Spotify)</li>
-                <li>Filtered to exclude tracks already in your library</li>
-                <li>Used to generate Fresh Tape, The Archives, and discovery pool playlists</li>
-                <li>Caches up to 50 top similar artists across your watchlist</li>
-            </ul>
-
-            <h4>🗺️ How MusicMap Integration Works</h4>
-            <p>SoulSync uses <strong>MusicMap</strong> (music-map.com) instead of Spotify's recommendation API to find similar artists:</p>
-            <ul>
-                <li>During watchlist scans, each watchlist artist is looked up on MusicMap</li>
-                <li>MusicMap's artist similarity graph is scraped to find related artists</li>
-                <li>Similar artist names are matched to Spotify IDs</li>
-                <li>Up to 10 similar artists per watchlist artist are cached (refreshed every 30 days)</li>
-                <li>These cached similar artists power all discovery features</li>
-                <li>This approach gives you more diverse, community-driven recommendations</li>
-            </ul>
-
-            <h4>⬇️ Download & Sync Features</h4>
-            <p>Most discover playlists support two actions:</p>
-            <ul>
-                <li><strong>Download:</strong> Opens modal to match tracks to Soulseek and add to download queue</li>
-                <li><strong>Sync:</strong> Downloads tracks and automatically transfers them to your media server</li>
-                <li>Sync progress persists - you can close the page and it continues in the background</li>
-                <li>Sync status shows: ✓ completed, ⏳ pending, ✗ failed</li>
-            </ul>
-
-            <h4>🔄 When is data refreshed?</h4>
-            <ul>
-                <li><strong>MusicMap Similar Artists:</strong> Fetched during watchlist scans, cached for 30 days</li>
-                <li><strong>Hero, Recent Releases, Fresh Tape, The Archives:</strong> Updated during watchlist scanner runs (Dashboard page)</li>
-                <li><strong>Discovery Pool:</strong> Fully refreshed every 24 hours during watchlist scans (50 top similar artists, 10 albums each)</li>
-                <li><strong>Seasonal Content:</strong> Auto-detected based on current date</li>
-                <li><strong>Personalized Library Playlists:</strong> Generated on-demand from current library data</li>
-                <li><strong>Discovery Pool Playlists:</strong> Generated on-demand from current discovery pool</li>
-                <li><strong>Build a Playlist:</strong> Generated on-demand from cached MusicMap similar artists</li>
-                <li><strong>ListenBrainz:</strong> Cached locally, manually refreshed via Refresh button</li>
-                <li><strong>Time Machine & Genre:</strong> Generated on-demand from current discovery pool</li>
-            </ul>
-
-            <h4>💡 Pro Tips</h4>
-            <ul>
-                <li>Curated playlists (Fresh Tape, The Archives) stay consistent until next watchlist scan - great for weekly listening routines</li>
-                <li>Discovery Shuffle changes every page load - perfect when you want spontaneous recommendations</li>
-                <li>Use Build a Playlist to explore artists not in your watchlist (if seed artist isn't in watchlist, MusicMap data must be cached first)</li>
-                <li>The discovery pool only includes tracks you <strong>don't own yet</strong> - download them to build your collection!</li>
-                <li>Sync feature is ideal for batch downloading entire playlists to your media server</li>
-                <li>MusicMap provides more diverse recommendations than Spotify's algorithm - expect deeper cuts and underground artists!</li>
-                <li>Add more artists to your watchlist to expand your discovery pool with their MusicMap similar artists</li>
-            </ul>
-        `
-    },
-
-    // ==================== Automation Trigger Help ====================
-
-    'auto-schedule': {
-        title: 'Schedule Timer',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Runs your automation on a repeating interval — every X minutes, hours, or days.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Interval:</strong> How often to repeat (e.g. every 6 hours)</li>
-                <li><strong>Unit:</strong> Minutes, Hours, or Days</li>
-            </ul>
-
-            <h4>When does it first run?</h4>
-            <p>The timer starts when SoulSync boots. If the automation was previously scheduled, it resumes from where it left off.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Regular wishlist processing (every 30 minutes)</li>
-                <li>Periodic database backups (every 12 hours)</li>
-                <li>Any recurring maintenance task</li>
-            </ul>
-        `
-    },
-    'auto-daily_time': {
-        title: 'Daily Time',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Runs your automation once per day at a specific time.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Time:</strong> The wall-clock time to run (e.g. 03:00 for 3 AM)</li>
-            </ul>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Nightly watchlist scans</li>
-                <li>Off-peak database updates</li>
-                <li>Daily backups at a consistent time</li>
-            </ul>
-        `
-    },
-    'auto-weekly_time': {
-        title: 'Weekly Schedule',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Runs your automation on specific days of the week at a set time.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Days:</strong> Select one or more days (Mon–Sun)</li>
-                <li><strong>Time:</strong> The time to run on those days</li>
-            </ul>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Weekend-only quality scans</li>
-                <li>Weekly playlist refreshes</li>
-                <li>Scheduled maintenance on quiet days</li>
-            </ul>
-        `
-    },
-    'auto-app_started': {
-        title: 'App Started',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires once when SoulSync starts up. Useful for tasks you want to run on every boot.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Refreshing mirrored playlists on startup</li>
-                <li>Running a quick database sync</li>
-                <li>Sending a "SoulSync is online" notification</li>
-            </ul>
-
-            <h4>Note</h4>
-            <p>This trigger fires only once per startup — it will not fire again until SoulSync is restarted.</p>
-        `
-    },
-    'auto-track_downloaded': {
-        title: 'Track Downloaded',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires every time a single track finishes downloading and post-processing (tagging, moving to library).</p>
-
-            <h4>Conditions</h4>
-            <p>You can filter which downloads trigger this automation:</p>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-                <li><strong>Title:</strong> Match on track title</li>
-                <li><strong>Album:</strong> Match on album name</li>
-                <li><strong>Quality:</strong> Match on file format (FLAC, MP3, etc.)</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{title}</code>, <code>{album}</code>, <code>{quality}</code></p>
-
-            <h4>Note</h4>
-            <p>This fires per-track, not per-album. For an album with 12 tracks, it fires 12 times. Use <strong>Batch Complete</strong> if you want one event per album.</p>
-        `
-    },
-    'auto-batch_complete': {
-        title: 'Batch Complete',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when an entire album or playlist download batch finishes — all tracks in the batch are done (whether successful or failed).</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Playlist name:</strong> Filter by the name of the album or playlist</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{completed_tracks}</code>, <code>{failed_tracks}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Triggering a media server scan after downloads finish</li>
-                <li>Sending a notification when an album is fully downloaded</li>
-                <li>Running a database update after new content arrives</li>
-            </ul>
-        `
-    },
-    'auto-watchlist_new_release': {
-        title: 'New Release Found',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the watchlist scanner detects new music from an artist you're watching. This means a new album, EP, or single has been released that you don't already have.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific watched artists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{new_tracks}</code>, <code>{added_to_wishlist}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Getting notified when your favorite artists drop new music</li>
-                <li>Auto-processing the wishlist immediately after new releases are found</li>
-            </ul>
-        `
-    },
-    'auto-playlist_synced': {
-        title: 'Playlist Synced',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires after a mirrored playlist is synced to your media server (Plex, Jellyfin, or Navidrome). This means the playlist has been matched and created/updated on your server.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{matched_tracks}</code>, <code>{synced_tracks}</code>, <code>{failed_tracks}</code></p>
-        `
-    },
-    'auto-playlist_changed': {
-        title: 'Playlist Changed',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a mirrored playlist detects that the source playlist (on Spotify, Tidal, YouTube, etc.) has changed — tracks were added or removed.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{playlist_name}</code>, <code>{old_count}</code>, <code>{new_count}</code>, <code>{added}</code>, <code>{removed}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Auto-discovering new tracks after a playlist updates</li>
-                <li>Auto-syncing the playlist to your media server</li>
-                <li>Getting notified when your followed playlists change</li>
-            </ul>
-        `
-    },
-    'auto-discovery_completed': {
-        title: 'Discovery Complete',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when Spotify/iTunes metadata discovery finishes for a mirrored playlist. Discovery is the process of matching playlist tracks to official Spotify or iTunes metadata.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{discovered_count}</code>, <code>{failed_count}</code>, <code>{skipped_count}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Auto-syncing a playlist after discovery completes</li>
-                <li>Getting notified about discovery results (how many matched vs failed)</li>
-            </ul>
-        `
-    },
-    'auto-wishlist_processing_completed': {
-        title: 'Wishlist Processed',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the auto-wishlist processing batch finishes. This is the automated download cycle that searches Soulseek for wishlist tracks.</p>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{tracks_processed}</code>, <code>{tracks_found}</code>, <code>{tracks_failed}</code></p>
-        `
-    },
-    'auto-watchlist_scan_completed': {
-        title: 'Watchlist Scan Done',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the watchlist artist scan completes. The scan checks all watched artists for new releases and adds new tracks to your wishlist.</p>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artists_scanned}</code>, <code>{new_tracks_found}</code>, <code>{tracks_added}</code></p>
-        `
-    },
-    'auto-database_update_completed': {
-        title: 'Database Updated',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the library database refresh finishes — either incremental or full. This means SoulSync's internal database has been synced with your media server.</p>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{total_artists}</code>, <code>{total_albums}</code>, <code>{total_tracks}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Running a quality scan after the database is refreshed</li>
-                <li>Sending a summary notification with library stats</li>
-            </ul>
-        `
-    },
-    'auto-download_failed': {
-        title: 'Download Failed',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a track permanently fails to download. This means all retry attempts and sources have been exhausted.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-                <li><strong>Title:</strong> Match on track title</li>
-                <li><strong>Reason:</strong> Match on failure reason</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
-        `
-    },
-    'auto-download_quarantined': {
-        title: 'File Quarantined',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a downloaded file fails AcoustID verification and is moved to the quarantine folder. This means the audio fingerprint didn't match what was expected — the file might be the wrong song.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-                <li><strong>Title:</strong> Match on track title</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
-
-            <h4>What is quarantine?</h4>
-            <p>Files that fail audio fingerprint verification are moved to a quarantine folder instead of your library. This prevents wrong songs from polluting your collection. You can review quarantined files manually.</p>
-        `
-    },
-    'auto-wishlist_item_added': {
-        title: 'Wishlist Item Added',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a track is added to your wishlist — whether manually, by the quality scanner, or by the watchlist scan.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-                <li><strong>Title:</strong> Match on track title</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
-        `
-    },
-    'auto-watchlist_artist_added': {
-        title: 'Artist Watched',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when an artist is added to your watchlist. Watched artists are periodically scanned for new releases.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{artist_id}</code></p>
-        `
-    },
-    'auto-watchlist_artist_removed': {
-        title: 'Artist Unwatched',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when an artist is removed from your watchlist.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{artist}</code>, <code>{artist_id}</code></p>
-        `
-    },
-    'auto-import_completed': {
-        title: 'Import Complete',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when an album or track import operation finishes. Imports bring music from external sources into your library.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Artist:</strong> Only fire for specific artists</li>
-                <li><strong>Album name:</strong> Match on album name</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{track_count}</code>, <code>{album_name}</code>, <code>{artist}</code></p>
-        `
-    },
-    'auto-mirrored_playlist_created': {
-        title: 'Playlist Mirrored',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a new playlist mirror is created — a playlist from Spotify, Tidal, YouTube, ListenBrainz, or Beatport is set up for mirroring.</p>
-
-            <h4>Conditions</h4>
-            <ul>
-                <li><strong>Playlist name:</strong> Match on playlist name</li>
-                <li><strong>Source:</strong> Match on platform (spotify, tidal, youtube, etc.)</li>
-            </ul>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{playlist_name}</code>, <code>{source}</code>, <code>{track_count}</code></p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Auto-discovering tracks immediately after a new mirror is created</li>
-                <li>Getting notified when new playlists are mirrored</li>
-            </ul>
-        `
-    },
-    'auto-quality_scan_completed': {
-        title: 'Quality Scan Done',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the quality scanner finishes. The scanner identifies tracks below your quality preferences and adds them to your wishlist for re-downloading.</p>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{quality_met}</code>, <code>{low_quality}</code>, <code>{total_scanned}</code></p>
-        `
-    },
-    'auto-duplicate_scan_completed': {
-        title: 'Duplicate Scan Done',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when the duplicate cleaner finishes scanning your output folder for duplicate audio files.</p>
-
-            <h4>Available variables for notifications</h4>
-            <p><code>{files_scanned}</code>, <code>{duplicates_found}</code>, <code>{space_freed}</code></p>
-        `
-    },
-    'auto-library_scan_completed': {
-        title: 'Library Scan Done',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when a media server library scan is considered complete. This only happens after a <strong>Scan Library</strong> action was triggered — it cannot fire on its own.</p>
-
-            <h4>How does it know the scan is done?</h4>
-            <p>Your media server (Plex, Jellyfin, Navidrome) doesn't send a "scan finished" signal back to SoulSync. So after telling the server to scan, SoulSync waits <strong>approximately 5 minutes</strong> and then assumes the scan has finished. This is a generous estimate that works for most libraries.</p>
-
-            <h4>Timing</h4>
-            <p>From the moment a download finishes to when this trigger fires, expect roughly <strong>6-7 minutes</strong>:</p>
-            <ol>
-                <li>60 second debounce wait (groups multiple downloads together)</li>
-                <li>Media server scan triggered</li>
-                <li>~5 minute wait (assumed scan completion)</li>
-                <li>This event fires</li>
-            </ol>
-
-            <h4>Default use</h4>
-            <p>The system automation <strong>Auto-Update Database After Scan</strong> listens for this trigger to start an incremental database update, keeping your SoulSync library in sync with your media server.</p>
-
-            <h4>Available variables</h4>
-            <p><code>{server_type}</code> — which media server was scanned (plex, jellyfin, navidrome)</p>
-        `
-    },
-
-    // ==================== Automation Action Help ====================
-
-    'auto-process_wishlist': {
-        title: 'Process Wishlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Searches Soulseek for tracks in your wishlist and downloads them. This is the same process that runs automatically on a timer — this action lets you trigger it manually or chain it to events.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Category:</strong> Process all wishlist tracks, or only Albums/EPs, or only Singles</li>
-            </ul>
-
-            <h4>How it works</h4>
-            <ol>
-                <li>Picks tracks from the wishlist (alternating Albums and Singles cycles)</li>
-                <li>Searches Soulseek for each track</li>
-                <li>Downloads the best quality match found</li>
-                <li>Tags and moves files to your library</li>
-            </ol>
-        `
-    },
-    'auto-scan_watchlist': {
-        title: 'Scan Watchlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Checks all watched artists for new releases you don't already have. New tracks are automatically added to your wishlist for downloading.</p>
-
-            <h4>How it works</h4>
-            <ol>
-                <li>Goes through each artist in your watchlist</li>
-                <li>Fetches their discography from Spotify</li>
-                <li>Compares against your library to find missing releases</li>
-                <li>Adds new tracks to your wishlist</li>
-            </ol>
-        `
-    },
-    'auto-scan_library': {
-        title: 'Scan Library',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Tells your media server (Plex, Jellyfin, or Navidrome) to scan its music library folder for new or changed files. This makes newly downloaded music appear in your media server.</p>
-
-            <h4>How it works</h4>
-            <ol>
-                <li>A <strong>60 second debounce</strong> groups rapid requests — if multiple downloads finish close together, only one scan is triggered</li>
-                <li>After the debounce, your media server is told to scan</li>
-                <li>SoulSync waits <strong>~5 minutes</strong> (your media server doesn't report when it's finished, so this is an assumed completion time)</li>
-                <li>The <strong>Library Scan Done</strong> event fires, which can trigger follow-up actions like a database update</li>
-            </ol>
-
-            <h4>Default use</h4>
-            <p>The system automation <strong>Auto-Scan After Downloads</strong> uses this action to automatically scan your library when a batch download completes. You can disable that automation if you prefer to scan manually.</p>
-
-            <h4>Note</h4>
-            <p>Jellyfin and Navidrome often detect new files automatically, but the scan ensures nothing is missed.</p>
-        `
-    },
-    'auto-refresh_mirrored': {
-        title: 'Refresh Mirrored Playlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Re-fetches a mirrored playlist from its source platform (Spotify, Tidal, YouTube, etc.) and updates the local mirror with any track changes.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Playlist:</strong> Select a specific mirrored playlist, or check "Refresh all" to update all mirrors</li>
-            </ul>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Keeping mirrors in sync with playlists that change frequently</li>
-                <li>Detecting added/removed tracks on the source platform</li>
-            </ul>
-        `
-    },
-    'auto-sync_playlist': {
-        title: 'Sync Playlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Syncs a mirrored playlist to your media server. It matches discovered tracks against your library and creates or updates the playlist on Plex, Jellyfin, or Navidrome.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Playlist:</strong> Select which mirrored playlist to sync</li>
-            </ul>
-
-            <h4>Prerequisites</h4>
-            <p>Tracks should be discovered first (matched to Spotify/iTunes metadata) before syncing. Undiscovered tracks will be skipped.</p>
-        `
-    },
-    'auto-discover_playlist': {
-        title: 'Discover Playlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Finds official Spotify or iTunes metadata for tracks in a mirrored playlist. This is required before syncing — it matches each track to a known release so it can be found in your library.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Playlist:</strong> Select a specific playlist, or check "Discover all" to process all mirrored playlists</li>
-            </ul>
-
-            <h4>How it works</h4>
-            <ol>
-                <li>Takes each track name and artist from the mirror</li>
-                <li>Searches Spotify (or iTunes as fallback) for a match</li>
-                <li>Stores the best match with confidence score in the discovery cache</li>
-                <li>Already-discovered tracks are skipped for efficiency</li>
-            </ol>
-        `
-    },
-    'auto-playlist_pipeline': {
-        title: 'Playlist Pipeline',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Runs the full playlist lifecycle in one automation — no signal wiring needed. Executes four phases sequentially:</p>
-            <ol>
-                <li><strong>Refresh</strong> — Re-fetches playlist tracks from the source platform (Spotify, Tidal, YouTube, Deezer)</li>
-                <li><strong>Discover</strong> — Matches each track to official metadata (Spotify/iTunes/Deezer IDs)</li>
-                <li><strong>Sync</strong> — Pushes the playlist to your media server (Plex, Jellyfin, Navidrome)</li>
-                <li><strong>Download Missing</strong> — Queues unmatched tracks to the wishlist for automatic download</li>
-            </ol>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Playlist:</strong> Select a specific mirrored playlist, or check "Process all" to run the pipeline for every mirrored playlist</li>
-                <li><strong>Skip wishlist:</strong> Check this to skip the download phase (useful if you only want to sync, not download)</li>
-            </ul>
-
-            <h4>How the re-sync loop works</h4>
-            <p>Set this on a schedule (e.g., every 6 hours). Between runs, the wishlist processor downloads missing tracks in the background. On the next pipeline run, those newly downloaded tracks will match during the sync phase — so your server playlist gets more complete with each cycle until fully synced.</p>
-
-            <h4>Replaces</h4>
-            <p>This single automation replaces the 4-automation signal chain pattern (Refresh → signal → Discover → signal → Sync → signal → Download). No signals, no chaining, no room for misconfiguration.</p>
-        `
-    },
-    'auto-notify_only': {
-        title: 'Notify Only',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Nothing — it performs no action. It just passes the event data through to the notification step.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Getting notified about events without taking any automated action</li>
-                <li>Monitoring what's happening in SoulSync (downloads, failures, changes)</li>
-                <li>Pair with any event trigger + Discord/Telegram/Pushbullet notification</li>
-            </ul>
-        `
-    },
-    'auto-start_database_update': {
-        title: 'Update Database',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Refreshes SoulSync's internal library database by syncing with your media server (Plex, Jellyfin, or Navidrome).</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Full refresh:</strong> When checked, completely rebuilds the database from scratch. When unchecked, only scans for new content (faster).</li>
-            </ul>
-        `
-    },
-    'auto-run_duplicate_cleaner': {
-        title: 'Run Duplicate Cleaner',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Scans your output folder for duplicate audio files (same filename, different format) and removes the lower-quality version. For example, if you have both <code>Song.flac</code> and <code>Song.mp3</code>, the MP3 is removed.</p>
-
-            <h4>Safety</h4>
-            <p>Removed files are moved to a <code>deleted/</code> subfolder, not permanently deleted. You can recover them if needed.</p>
-        `
-    },
-    'auto-clear_quarantine': {
-        title: 'Clear Quarantine',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Permanently deletes all files in the quarantine folder. Quarantined files are downloads that failed AcoustID audio fingerprint verification — they might be the wrong song.</p>
-
-            <h4>Warning</h4>
-            <p>This permanently deletes files. Make sure you've reviewed quarantined files before setting up an automation for this.</p>
-        `
-    },
-    'auto-cleanup_wishlist': {
-        title: 'Clean Up Wishlist',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Removes duplicate entries and tracks you already own from your wishlist. Keeps the wishlist lean by removing items that no longer need downloading.</p>
-        `
-    },
-    'auto-update_discovery_pool': {
-        title: 'Update Discovery Pool',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Refreshes the discovery pool with new tracks from your mirrored playlists. The discovery pool tracks which playlist tracks have been successfully matched and which ones failed.</p>
-        `
-    },
-    'auto-start_quality_scan': {
-        title: 'Run Quality Scan',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Scans your library for tracks that don't meet your quality preferences (e.g., MP3 when you prefer FLAC). Low-quality tracks are matched to Spotify and added to your wishlist for re-downloading in better quality.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Scope:</strong> Scan only watchlist artists (faster) or your entire library (thorough)</li>
-            </ul>
-        `
-    },
-    'auto-backup_database': {
-        title: 'Backup Database',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Creates a timestamped backup of SoulSync's SQLite database. Uses the SQLite backup API for a safe hot-copy while the app is running.</p>
-
-            <h4>Retention</h4>
-            <p>Keeps the last 5 backups automatically. Older backups are cleaned up to save disk space.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Nightly automated backups</li>
-                <li>Pre-update safety backups</li>
-                <li>Peace of mind for your library data</li>
-            </ul>
-        `
-    },
-    'auto-refresh_beatport_cache': {
-        title: 'Refresh Beatport Cache',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Scrapes the Beatport homepage for top charts and caches the results locally. Keeps the Beatport charts page loading instantly without needing to scrape on every visit.</p>
-
-            <h4>Cache duration</h4>
-            <p>Cache lasts 24 hours. This action refreshes it early so it's always warm when you visit the charts page.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Keeping Beatport charts available instantly</li>
-                <li>Scheduling daily cache refreshes (e.g. every morning)</li>
-            </ul>
-        `
-    },
-    'auto-clean_search_history': {
-        title: 'Clean Search History',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Removes old search queries from Soulseek. This keeps your search history clean and prevents buildup over time.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Periodic housekeeping</li>
-                <li>Keeping Soulseek search history tidy</li>
-            </ul>
-        `
-    },
-    'auto-clean_completed_downloads': {
-        title: 'Clean Completed Downloads',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Clears completed downloads from the transfer list and removes any empty directories left behind in the import folder.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Automatic cleanup after batch downloads</li>
-                <li>Preventing import folder clutter</li>
-                <li>Chaining after a batch complete trigger</li>
-            </ul>
-        `
-    },
-    'auto-full_cleanup': {
-        title: 'Full Cleanup',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Runs all housekeeping tasks in a single sweep:</p>
-            <ol>
-                <li><strong>Clear Quarantine</strong> — permanently deletes all quarantined files</li>
-                <li><strong>Clear Download Queue</strong> — removes completed, errored, and cancelled downloads from Soulseek</li>
-                <li><strong>Sweep Empty Directories</strong> — removes empty folders left behind in the input directory</li>
-                <li><strong>Sweep Import Folder</strong> — removes empty directories from the import folder</li>
-                <li><strong>Clean Search History</strong> — trims old Soulseek search queries</li>
-            </ol>
-
-            <h4>Safety</h4>
-            <p>Skips download queue cleanup if batches are actively downloading or post-processing. Each step runs independently — a failure in one step won't stop the others.</p>
-
-            <h4>Good for</h4>
-            <ul>
-                <li>Scheduled housekeeping every 12 hours</li>
-                <li>Keeping disk usage and queue clutter under control</li>
-                <li>Running after large batch downloads complete</li>
-            </ul>
-        `
-    },
-    'auto-deep_scan_library': {
-        title: 'Deep Scan Library',
-        content: `
-            <h4>What does this action do?</h4>
-            <p>Walks your entire media server library and compares it against SoulSync's database. Adds any new tracks found and removes stale entries that no longer exist on the server.</p>
-
-            <h4>How is this different from Database Update?</h4>
-            <ul>
-                <li><strong>Database Update:</strong> Incremental — only looks for new artists/albums added since last update</li>
-                <li><strong>Deep Scan:</strong> Full comparison — checks every track on the server against the database, catches anything missed</li>
-            </ul>
-
-            <h4>Safety</h4>
-            <ul>
-                <li>Never overwrites existing enrichment data (genres, Spotify IDs, artwork)</li>
-                <li>Only inserts tracks that don't already exist in the database</li>
-                <li>Stale track removal has a 50% safety threshold — if more than half the library appears missing, removal is skipped</li>
-            </ul>
-        `
-    },
-
-    // ==================== Notification/Then-Action Help ====================
-
-    'auto-discord_webhook': {
-        title: 'Discord Webhook',
-        content: `
-            <h4>What does this then-action do?</h4>
-            <p>Sends a notification to a Discord channel via webhook when the automation's action completes.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Webhook URL:</strong> The Discord webhook URL for your channel (found in Channel Settings → Integrations → Webhooks)</li>
-                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
-            </ul>
-
-            <h4>Available variables</h4>
-            <p>Use these in your message template:</p>
-            <ul>
-                <li><code>{time}</code> — When the automation ran</li>
-                <li><code>{name}</code> — Automation name</li>
-                <li><code>{run_count}</code> — How many times this automation has run</li>
-                <li><code>{status}</code> — Result status of the action</li>
-            </ul>
-        `
-    },
-    'auto-pushbullet': {
-        title: 'Pushbullet',
-        content: `
-            <h4>What does this then-action do?</h4>
-            <p>Sends a push notification to your phone or desktop via Pushbullet when the automation's action completes.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>API Key:</strong> Your Pushbullet access token (found in Pushbullet Settings → Access Tokens)</li>
-                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
-            </ul>
-
-            <h4>Available variables</h4>
-            <p>Use these in your message template:</p>
-            <ul>
-                <li><code>{time}</code> — When the automation ran</li>
-                <li><code>{name}</code> — Automation name</li>
-                <li><code>{run_count}</code> — How many times this automation has run</li>
-                <li><code>{status}</code> — Result status of the action</li>
-            </ul>
-        `
-    },
-    'auto-telegram': {
-        title: 'Telegram',
-        content: `
-            <h4>What does this then-action do?</h4>
-            <p>Sends a message to a Telegram chat via bot when the automation's action completes.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Bot Token:</strong> Your Telegram bot token (from @BotFather)</li>
-                <li><strong>Chat ID:</strong> The chat/group ID to send messages to</li>
-                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
-            </ul>
-
-            <h4>Available variables</h4>
-            <p>Use these in your message template:</p>
-            <ul>
-                <li><code>{time}</code> — When the automation ran</li>
-                <li><code>{name}</code> — Automation name</li>
-                <li><code>{run_count}</code> — How many times this automation has run</li>
-                <li><code>{status}</code> — Result status of the action</li>
-            </ul>
-        `
-    },
-
-    'auto-webhook': {
-        title: 'Webhook (POST)',
-        content: `
-            <h4>What does this then-action do?</h4>
-            <p>Sends an HTTP POST request with a JSON payload to any URL when the automation's action completes. Use it to integrate with Gotify, Home Assistant, Slack, n8n, or any service that accepts webhooks.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>URL:</strong> The endpoint to POST to (e.g. <code>https://gotify.example.com/message?token=xxx</code>)</li>
-                <li><strong>Headers:</strong> Optional custom headers, one per line in <code>Key: Value</code> format. Useful for auth tokens.</li>
-                <li><strong>Custom Message:</strong> Optional message with variable placeholders. Added as a "message" field in the JSON payload.</li>
-            </ul>
-
-            <h4>JSON payload</h4>
-            <p>The POST body always includes all event variables as JSON fields:</p>
-            <pre style="background:rgba(255,255,255,0.05);padding:8px;border-radius:6px;font-size:11px;">{"time": "2026-04-02 ...", "name": "My Automation", "status": "success", ...}</pre>
-
-            <h4>Available variables</h4>
-            <p>Use these in your message or header values:</p>
-            <ul>
-                <li><code>{time}</code> — When the automation ran</li>
-                <li><code>{name}</code> — Automation name</li>
-                <li><code>{run_count}</code> — How many times this automation has run</li>
-                <li><code>{status}</code> — Result status of the action</li>
-            </ul>
-        `
-    },
-
-    // ==================== Signal System Help ====================
-
-    'auto-signal_received': {
-        title: 'Signal Received',
-        content: `
-            <h4>What is this trigger?</h4>
-            <p>Fires when another automation sends a named signal using the <strong>Fire Signal</strong> then-action. This lets you chain automations together — one automation finishes and wakes up another.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Signal Name:</strong> The name to listen for (e.g. <code>library_ready</code>, <code>scan_done</code>). Must match the name used in the Fire Signal action.</li>
-            </ul>
-
-            <h4>How chaining works</h4>
-            <ol>
-                <li><strong>Automation A:</strong> Trigger = Batch Complete, Action = Scan Library, Then = Fire Signal "scan_done"</li>
-                <li><strong>Automation B:</strong> Trigger = Signal Received "scan_done", Action = Update Database</li>
-                <li>When a download finishes → A scans library → fires signal → B wakes up → updates database</li>
-            </ol>
-
-            <h4>Safety</h4>
-            <ul>
-                <li>Circular signal chains are detected and blocked when you save</li>
-                <li>Maximum chain depth of 5 levels to prevent runaway cascades</li>
-                <li>Same signal can only fire once every 10 seconds (cooldown)</li>
-            </ul>
-
-            <h4>Signal names</h4>
-            <p>Use descriptive lowercase names with underscores: <code>library_ready</code>, <code>scan_complete</code>, <code>downloads_done</code>. Existing signal names from other automations appear as suggestions.</p>
-        `
-    },
-    'auto-fire_signal': {
-        title: 'Fire Signal',
-        content: `
-            <h4>What does this then-action do?</h4>
-            <p>Fires a named signal after the automation's action completes. Any other automation with a <strong>Signal Received</strong> trigger listening for this signal name will wake up and run.</p>
-
-            <h4>Configuration</h4>
-            <ul>
-                <li><strong>Signal Name:</strong> The signal to fire (e.g. <code>library_ready</code>). Use the same name in a Signal Received trigger on another automation to connect them.</li>
-            </ul>
-
-            <h4>Use cases</h4>
-            <ul>
-                <li><strong>Multi-step workflows:</strong> Scan library → fire signal → update database → fire signal → send notification</li>
-                <li><strong>Fan-out:</strong> One signal can trigger multiple automations simultaneously</li>
-                <li><strong>Decoupled logic:</strong> Keep each automation simple with one job, chain them via signals</li>
-            </ul>
-
-            <h4>Combining with notifications</h4>
-            <p>You can add up to 3 then-actions per automation. For example: Fire Signal + Discord notification + Telegram notification — all run after the action completes.</p>
-        `
-    },
-    'backup-manager': {
-        title: 'Backup Manager',
-        content: `
-            <h4>What does this tool do?</h4>
-            <p>The Backup Manager lets you create, view, download, restore, and delete database backups directly from the dashboard.</p>
-
-            <h4>Features</h4>
-            <ul>
-                <li><strong>Backup Now:</strong> Create an instant backup of the current database using SQLite's hot-copy API</li>
-                <li><strong>Download:</strong> Download any backup file to your local machine</li>
-                <li><strong>Restore:</strong> Roll back the database to a previous backup state</li>
-                <li><strong>Delete:</strong> Remove old backups you no longer need</li>
-            </ul>
-
-            <h4>Auto-Backups</h4>
-            <p>SoulSync automatically creates a backup every 3 days via the automation engine. Up to 5 rolling backups are kept (oldest are removed when the limit is exceeded).</p>
-
-            <h4>Restore Safety</h4>
-            <p>When you restore from a backup, a <strong>safety backup</strong> of your current database is created first. This means you can always undo a restore if something goes wrong.</p>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Last Backup:</strong> When the most recent backup was created</li>
-                <li><strong>Backups:</strong> Total number of backup files available</li>
-                <li><strong>Latest Size:</strong> Size of the most recent backup</li>
-                <li><strong>DB Size:</strong> Current size of the live database</li>
-            </ul>
-        `
-    },
-    'metadata-cache': {
-        title: 'Metadata Cache',
-        content: `
-            <h4>What is this?</h4>
-            <p>The Metadata Cache stores every API response from Spotify and iTunes so SoulSync can reuse them instead of making duplicate API calls. This reduces rate limit pressure and speeds up lookups.</p>
-
-            <h4>How it works</h4>
-            <p>When SoulSync fetches artist, album, or track data from Spotify or iTunes, the response is cached locally. The next time the same data is needed, it's served from cache instantly — no API call required. Cached data is even served during Spotify rate limit bans.</p>
-
-            <h4>Browsing the Cache</h4>
-            <p>Click <strong>Browse Cache</strong> to explore all cached metadata. You can filter by entity type (artists, albums, tracks), search by name, filter by source (Spotify/iTunes), and sort by different fields. Click any card to see full details including the raw API response.</p>
-
-            <h4>Cache Management</h4>
-            <ul>
-                <li><strong>TTL:</strong> Entities expire after 30 days, search mappings after 7 days</li>
-                <li><strong>Eviction:</strong> Expired entries are automatically cleaned up</li>
-                <li><strong>Clear:</strong> You can clear the entire cache or filter by source/type</li>
-            </ul>
-
-            <h4>Stats Explained</h4>
-            <ul>
-                <li><strong>Artists:</strong> Total cached artist profiles</li>
-                <li><strong>Albums:</strong> Total cached album records</li>
-                <li><strong>Tracks:</strong> Total cached track records</li>
-                <li><strong>Hits:</strong> Total number of times cached data was served instead of making an API call</li>
-            </ul>
-        `
-    }
-};
-
-function initializeToolHelpButtons() {
-    const helpButtons = document.querySelectorAll('.tool-help-button');
-    const modal = document.getElementById('tool-help-modal');
-    const closeButton = modal.querySelector('.tool-help-modal-close');
-
-    // Attach click handlers to all help buttons
-    helpButtons.forEach(button => {
-        button.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const toolId = button.getAttribute('data-tool');
-            openToolHelpModal(toolId);
-        });
-    });
-
-    // Close modal when clicking close button
-    closeButton.addEventListener('click', closeToolHelpModal);
-
-    // Close modal when clicking outside content
-    modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-            closeToolHelpModal();
-        }
-    });
-
-    // Close modal on Escape key
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && modal.classList.contains('active')) {
-            closeToolHelpModal();
-        }
-    });
-}
-
-function openToolHelpModal(toolId) {
-    const modal = document.getElementById('tool-help-modal');
-    const titleElement = document.getElementById('tool-help-modal-title');
-    const bodyElement = document.getElementById('tool-help-modal-body');
-
-    const helpData = TOOL_HELP_CONTENT[toolId];
-    if (!helpData) {
-        console.warn(`No help content found for tool: ${toolId}`);
-        return;
-    }
-
-    titleElement.textContent = helpData.title;
-    bodyElement.innerHTML = helpData.content;
-
-    modal.classList.add('active');
-    document.body.style.overflow = 'hidden'; // Prevent background scrolling
-}
-
-function closeToolHelpModal() {
-    const modal = document.getElementById('tool-help-modal');
-    if (modal) modal.classList.remove('active');
-    document.body.style.overflow = ''; // Restore scrolling
-}
-// Global Escape key handler for tool help modal (works even if Tools page wasn't visited)
-document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') {
-        const modal = document.getElementById('tool-help-modal');
-        if (modal && modal.classList.contains('active')) closeToolHelpModal();
-    }
-});
-
-// ===============================
-// == RETAG TOOL FUNCTIONS      ==
-// ===============================
-
-let retagStatusInterval = null;
-let retagCurrentGroupId = null;
-
-async function loadRetagStats() {
-    try {
-        const response = await fetch('/api/retag/stats');
-        const data = await response.json();
-        if (data.success !== false) {
-            const groupsEl = document.getElementById('retag-stat-groups');
-            const tracksEl = document.getElementById('retag-stat-tracks');
-            const artistsEl = document.getElementById('retag-stat-artists');
-            if (groupsEl) groupsEl.textContent = data.groups || 0;
-            if (tracksEl) tracksEl.textContent = data.tracks || 0;
-            if (artistsEl) artistsEl.textContent = data.artists || 0;
-        }
-    } catch (e) {
-        console.warn('Failed to load retag stats:', e);
-    }
-}
-
-async function openRetagModal() {
-    const modal = document.getElementById('retag-modal');
-    if (!modal) return;
-    modal.style.display = 'flex';
-    document.body.style.overflow = 'hidden';
-
-    // Reset batch bar and clear-all button
-    const batchBar = document.getElementById('retag-batch-bar');
-    if (batchBar) batchBar.style.display = 'none';
-    const clearBtn = document.getElementById('retag-clear-all-btn');
-    if (clearBtn) { clearBtn.textContent = 'Clear All'; clearBtn.dataset.confirming = ''; clearBtn.style.background = ''; }
-
-    const body = document.getElementById('retag-modal-body');
-    body.innerHTML = '<div class="retag-loading">Loading downloads...</div>';
-
-    try {
-        const response = await fetch('/api/retag/groups');
-        const data = await response.json();
-        if (!data.success || !data.groups || data.groups.length === 0) {
-            body.innerHTML = '<p class="retag-empty">No downloads recorded yet. Downloads will appear here after completing album or single downloads.</p>';
-            if (clearBtn) clearBtn.style.display = 'none';
-            return;
-        }
-        if (clearBtn) clearBtn.style.display = '';
-        renderRetagGroups(data.groups, body);
-    } catch (e) {
-        body.innerHTML = '<p class="retag-error">Failed to load downloads.</p>';
-    }
-}
-
-function closeRetagModal() {
-    const modal = document.getElementById('retag-modal');
-    if (modal) modal.style.display = 'none';
-    document.body.style.overflow = '';
-}
-
-function renderRetagGroups(groups, container) {
-    // Group by artist_name
-    const byArtist = {};
-    groups.forEach(g => {
-        const artist = g.artist_name || 'Unknown Artist';
-        if (!byArtist[artist]) byArtist[artist] = [];
-        byArtist[artist].push(g);
-    });
-
-    let html = '';
-    Object.keys(byArtist).sort((a, b) => a.localeCompare(b)).forEach(artist => {
-        html += `<div class="retag-artist-section">
-            <h3 class="retag-artist-name">${escapeHtml(artist)}</h3>
-            <div class="retag-artist-groups">`;
-
-        byArtist[artist].forEach(group => {
-            const imgHtml = group.image_url
-                ? `<img class="retag-group-image" src="${group.image_url}" alt="" loading="lazy">`
-                : '<div class="retag-group-image-placeholder"></div>';
-            const trackCount = group.track_count || group.total_tracks || 0;
-            const typeLabel = (group.group_type || 'album').charAt(0).toUpperCase() + (group.group_type || 'album').slice(1);
-            const releaseDate = group.release_date ? group.release_date.substring(0, 4) : '';
-            const defaultQuery = (artist + ' ' + (group.album_name || '')).trim();
-
-            html += `<div class="retag-group-card" data-group-id="${group.id}">
-                <div class="retag-group-header" data-group-id="${group.id}" data-default-query="${escapeHtml(defaultQuery).replace(/"/g, '&quot;')}">
-                    <label class="retag-group-checkbox">
-                        <input type="checkbox" class="retag-select-cb" data-group-id="${group.id}">
-                        <span class="retag-checkbox-custom"></span>
-                    </label>
-                    ${imgHtml}
-                    <div class="retag-group-info">
-                        <span class="retag-group-album">${escapeHtml(group.album_name || 'Unknown')}</span>
-                        <span class="retag-group-meta">${typeLabel}${releaseDate ? ' \u00b7 ' + releaseDate : ''} \u00b7 ${trackCount} track${trackCount !== 1 ? 's' : ''}</span>
-                    </div>
-                    <button class="retag-group-btn" data-group-id="${group.id}" title="Re-tag with different album">Retag</button>
-                    <div class="retag-group-delete-area" id="retag-delete-area-${group.id}">
-                        <button class="retag-group-delete-btn" data-group-id="${group.id}" title="Remove from list">&times;</button>
-                    </div>
-                </div>
-                <div class="retag-group-tracks" id="retag-tracks-${group.id}" style="display:none;">
-                    <div class="retag-tracks-loading">Loading tracks...</div>
-                </div>
-            </div>`;
-        });
-
-        html += `</div></div>`;
-    });
-
-    container.innerHTML = html;
-    _attachRetagDelegation(container);
-}
-
-function _attachRetagDelegation(container) {
-    // Single click handler for all retag group interactions
-    container.addEventListener('click', (e) => {
-        const target = e.target;
-
-        // Skip checkbox wrapper clicks — handled by change listener
-        if (target.closest('.retag-group-checkbox')) return;
-
-        // Retag button
-        const retagBtn = target.closest('.retag-group-btn');
-        if (retagBtn) {
-            e.stopPropagation();
-            const groupId = parseInt(retagBtn.dataset.groupId);
-            const header = retagBtn.closest('.retag-group-header');
-            const defaultQuery = header ? header.dataset.defaultQuery || '' : '';
-            openRetagSearch(groupId, defaultQuery);
-            return;
-        }
-
-        // Delete confirm buttons (dynamically injected)
-        const confirmYes = target.closest('.retag-confirm-yes');
-        if (confirmYes) {
-            e.stopPropagation();
-            const card = confirmYes.closest('.retag-group-card');
-            if (card) executeRetagGroupDelete(parseInt(card.dataset.groupId));
-            return;
-        }
-        const confirmNo = target.closest('.retag-confirm-no');
-        if (confirmNo) {
-            e.stopPropagation();
-            const card = confirmNo.closest('.retag-group-card');
-            if (card) cancelRetagDeleteConfirm(parseInt(card.dataset.groupId));
-            return;
-        }
-
-        // Delete button
-        const delBtn = target.closest('.retag-group-delete-btn');
-        if (delBtn) {
-            e.stopPropagation();
-            showRetagDeleteConfirm(parseInt(delBtn.dataset.groupId));
-            return;
-        }
-
-        // Group header click (expand/collapse)
-        const header = target.closest('.retag-group-header');
-        if (header) {
-            toggleRetagGroup(parseInt(header.dataset.groupId));
-            return;
-        }
-    });
-
-    // Separate change handler for checkboxes
-    container.addEventListener('change', (e) => {
-        if (e.target.classList.contains('retag-select-cb')) {
-            updateRetagBatchBar();
-        }
-    });
-}
-
-async function toggleRetagGroup(groupId) {
-    const tracksDiv = document.getElementById(`retag-tracks-${groupId}`);
-    if (!tracksDiv) return;
-
-    if (tracksDiv.style.display === 'none') {
-        tracksDiv.style.display = 'block';
-        if (tracksDiv.querySelector('.retag-tracks-loading')) {
-            try {
-                const response = await fetch(`/api/retag/groups/${groupId}/tracks`);
-                const data = await response.json();
-                if (data.success && data.tracks && data.tracks.length > 0) {
-                    tracksDiv.innerHTML = data.tracks.map(t => {
-                        const discPrefix = t.disc_number > 1 ? `${t.disc_number}-` : '';
-                        const trackNum = t.track_number != null ? `${discPrefix}${String(t.track_number).padStart(2, '0')}` : '--';
-                        return `<div class="retag-track-item">
-                            <span class="retag-track-number">${trackNum}</span>
-                            <span class="retag-track-title">${escapeHtml(t.title || 'Unknown')}</span>
-                            <span class="retag-track-format">${(t.file_format || '').toUpperCase()}</span>
-                        </div>`;
-                    }).join('');
-                } else {
-                    tracksDiv.innerHTML = '<p class="retag-tracks-empty">No tracks found</p>';
-                }
-            } catch (e) {
-                tracksDiv.innerHTML = '<p class="retag-tracks-empty">Failed to load tracks</p>';
-            }
-        }
-    } else {
-        tracksDiv.style.display = 'none';
-    }
-}
-
-function openRetagSearch(groupId, defaultQuery) {
-    retagCurrentGroupId = groupId;
-    const modal = document.getElementById('retag-search-modal');
-    if (!modal) return;
-    modal.style.display = 'flex';
-
-    const input = document.getElementById('retag-search-input');
-    if (input) {
-        input.value = defaultQuery || '';
-        input.focus();
-        if (defaultQuery) {
-            searchRetagAlbums(defaultQuery);
-        }
-    }
-}
-
-function closeRetagSearch() {
-    const modal = document.getElementById('retag-search-modal');
-    if (modal) modal.style.display = 'none';
-    retagCurrentGroupId = null;
-}
-
-let retagSearchTimeout = null;
-document.addEventListener('DOMContentLoaded', () => {
-    const retagSearchInput = document.getElementById('retag-search-input');
-    if (retagSearchInput) {
-        retagSearchInput.addEventListener('input', (e) => {
-            clearTimeout(retagSearchTimeout);
-            retagSearchTimeout = setTimeout(() => searchRetagAlbums(e.target.value), 400);
-        });
-        retagSearchInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') {
-                clearTimeout(retagSearchTimeout);
-                searchRetagAlbums(e.target.value);
-            }
-        });
-    }
-
-    // Close retag modals on escape
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-            const searchModal = document.getElementById('retag-search-modal');
-            if (searchModal && searchModal.style.display === 'flex') {
-                closeRetagSearch();
-                return;
-            }
-            const mainModal = document.getElementById('retag-modal');
-            if (mainModal && mainModal.style.display === 'flex') {
-                closeRetagModal();
-            }
-        }
-    });
-
-    // Close retag modal on overlay click
-    const retagModal = document.getElementById('retag-modal');
-    if (retagModal) {
-        retagModal.addEventListener('click', (e) => {
-            if (e.target === retagModal) closeRetagModal();
-        });
-    }
-    const retagSearchModal = document.getElementById('retag-search-modal');
-    if (retagSearchModal) {
-        retagSearchModal.addEventListener('click', (e) => {
-            if (e.target === retagSearchModal) closeRetagSearch();
-        });
-    }
-});
-
-async function searchRetagAlbums(query) {
-    if (!query || !query.trim()) return;
-    const resultsDiv = document.getElementById('retag-search-results');
-    if (!resultsDiv) return;
-    resultsDiv.innerHTML = '<div class="retag-search-loading">Searching...</div>';
-
-    try {
-        const response = await fetch(`/api/retag/search?q=${encodeURIComponent(query.trim())}`);
-        const data = await response.json();
-        if (data.success && data.albums && data.albums.length > 0) {
-            resultsDiv.innerHTML = data.albums.map(a => {
-                const imgHtml = a.image_url
-                    ? `<img class="retag-result-image" src="${a.image_url}" alt="" loading="lazy">`
-                    : '<div class="retag-result-image-placeholder"></div>';
-                const typeLabel = (a.album_type || 'album').charAt(0).toUpperCase() + (a.album_type || 'album').slice(1);
-                const releaseYear = a.release_date ? a.release_date.substring(0, 4) : '';
-                return `<div class="retag-search-result" id="retag-result-${a.id}" onclick="showRetagConfirm(this, ${retagCurrentGroupId}, '${a.id}', '${escapeHtml(a.name).replace(/'/g, "\\'")}')">
-                    ${imgHtml}
-                    <div class="retag-result-info">
-                        <span class="retag-result-name">${escapeHtml(a.name || 'Unknown')}</span>
-                        <span class="retag-result-artist">${escapeHtml(a.artist || 'Unknown')}</span>
-                        <span class="retag-result-meta">${typeLabel}${releaseYear ? ' \u00b7 ' + releaseYear : ''} \u00b7 ${a.total_tracks || 0} tracks</span>
-                    </div>
-                </div>`;
-            }).join('');
-        } else {
-            resultsDiv.innerHTML = '<p class="retag-no-results">No albums found.</p>';
-        }
-    } catch (e) {
-        resultsDiv.innerHTML = '<p class="retag-search-error">Search failed.</p>';
-    }
-}
-
-/**
- * Show inline confirmation on a search result before retagging
- */
-function showRetagConfirm(el, groupId, albumId, albumName) {
-    // Clear any other confirming states
-    document.querySelectorAll('.retag-search-result.retag-confirming').forEach(r => {
-        r.classList.remove('retag-confirming');
-        const bar = r.querySelector('.retag-result-confirm-bar');
-        if (bar) bar.remove();
-        r.onclick = r._originalOnclick || null;
-    });
-
-    el.classList.add('retag-confirming');
-    el._originalOnclick = el.onclick;
-    el.onclick = null; // Disable clicking the row again
-
-    const confirmBar = document.createElement('div');
-    confirmBar.className = 'retag-result-confirm-bar';
-    confirmBar.innerHTML = `
-        <span>Re-tag with "${escapeHtml(albumName)}"?</span>
-        <div class="retag-result-confirm-actions">
-            <button class="retag-result-confirm-yes" onclick="event.stopPropagation(); executeRetag(${groupId}, '${albumId}', '${albumName.replace(/'/g, "\\'")}')">Confirm</button>
-            <button class="retag-result-confirm-cancel" onclick="event.stopPropagation(); cancelRetagConfirm(this)">Cancel</button>
-        </div>
-    `;
-    el.appendChild(confirmBar);
-}
-
-function cancelRetagConfirm(cancelBtn) {
-    const result = cancelBtn.closest('.retag-search-result');
-    if (!result) return;
-    result.classList.remove('retag-confirming');
-    const bar = result.querySelector('.retag-result-confirm-bar');
-    if (bar) bar.remove();
-    if (result._originalOnclick) {
-        result.onclick = result._originalOnclick;
-    }
-}
-
-async function executeRetag(groupId, albumId, albumName) {
-
-    closeRetagSearch();
-    closeRetagModal();
-
-    try {
-        const response = await fetch('/api/retag/execute', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ group_id: groupId, album_id: albumId })
-        });
-        const data = await response.json();
-        if (data.success) {
-            showToast('Retag operation started', 'success');
-            startRetagPolling();
-        } else {
-            showToast(`Error: ${data.error || 'Unknown error'}`, 'error');
-        }
-    } catch (e) {
-        showToast('Failed to start retag operation', 'error');
-    }
-}
-
-function startRetagPolling() {
-    if (retagStatusInterval) return;
-    retagStatusInterval = setInterval(checkRetagStatus, 1000);
-    checkRetagStatus();
-}
-
-async function checkRetagStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/retag/status');
-        const state = await response.json();
-        updateRetagProgressUI(state);
-
-        if (state.status === 'running' && !retagStatusInterval) {
-            startRetagPolling();
-        }
-
-        if (state.status !== 'running' && retagStatusInterval) {
-            clearInterval(retagStatusInterval);
-            retagStatusInterval = null;
-            if (state.status === 'finished') {
-                showToast('Retag completed successfully', 'success');
-                loadRetagStats();
-            } else if (state.status === 'error') {
-                showToast(`Retag error: ${state.error_message || 'Unknown error'}`, 'error');
-            }
-        }
-    } catch (e) {
-        // Ignore fetch errors during polling
-    }
-}
-
-function updateRetagStatusFromData(data) {
-    const prev = _lastToolStatus['retag'];
-    _lastToolStatus['retag'] = data.status;
-    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
-    updateRetagProgressUI(data);
-    // Handle terminal state toasts (only on transition)
-    if (prev === 'running' || prev === undefined) {
-        if (data.status === 'finished') {
-            showToast('Retag completed successfully', 'success');
-            loadRetagStats();
-        } else if (data.status === 'error') {
-            showToast(`Retag error: ${data.error_message || 'Unknown error'}`, 'error');
-        }
-    }
-}
-
-function updateRetagProgressUI(state) {
-    const phaseLabel = document.getElementById('retag-phase-label');
-    const progressBar = document.getElementById('retag-progress-bar');
-    const progressLabel = document.getElementById('retag-progress-label');
-    const statusEl = document.getElementById('retag-stat-status');
-
-    if (phaseLabel) phaseLabel.textContent = state.phase || 'Ready';
-    if (progressBar) progressBar.style.width = `${state.progress || 0}%`;
-    if (progressLabel) {
-        progressLabel.textContent = `${state.processed || 0} / ${state.total_tracks || 0} tracks (${(state.progress || 0).toFixed(1)}%)`;
-    }
-    if (statusEl) {
-        statusEl.textContent = state.status === 'running' ? 'Running' : 'Idle';
-    }
-
-    // Color the progress bar red on error
-    if (progressBar) {
-        progressBar.style.backgroundColor = state.status === 'error' ? '#ff4444' : '';
-    }
-}
-
-/**
- * Show inline delete confirmation for a retag group
- */
-function showRetagDeleteConfirm(groupId) {
-    const area = document.getElementById(`retag-delete-area-${groupId}`);
-    if (!area) return;
-    area.innerHTML = `<div class="retag-confirm-inline">
-        <span>Remove?</span>
-        <button class="retag-confirm-yes">Yes</button>
-        <button class="retag-confirm-no">No</button>
-    </div>`;
-}
-
-function cancelRetagDeleteConfirm(groupId) {
-    const area = document.getElementById(`retag-delete-area-${groupId}`);
-    if (!area) return;
-    area.innerHTML = `<button class="retag-group-delete-btn" data-group-id="${groupId}" title="Remove from list">&times;</button>`;
-}
-
-async function executeRetagGroupDelete(groupId) {
-    try {
-        const response = await fetch(`/api/retag/groups/${groupId}`, { method: 'DELETE' });
-        const data = await response.json();
-        if (data.success) {
-            const card = document.querySelector(`.retag-group-card[data-group-id="${groupId}"]`);
-            if (card) {
-                const section = card.closest('.retag-artist-section');
-                card.remove();
-                if (section && section.querySelectorAll('.retag-group-card').length === 0) {
-                    section.remove();
-                }
-            }
-            loadRetagStats();
-            updateRetagBatchBar();
-            showToast('Group removed', 'success');
-        } else {
-            showToast('Failed to remove group', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to remove group', 'error');
-    }
-}
-
-/**
- * Update the retag batch action bar based on checkbox selection
- */
-function updateRetagBatchBar() {
-    const checked = document.querySelectorAll('.retag-select-cb:checked');
-    const bar = document.getElementById('retag-batch-bar');
-    const countEl = document.getElementById('retag-batch-count');
-    if (!bar) return;
-
-    if (checked.length > 0) {
-        bar.style.display = 'flex';
-        countEl.textContent = `${checked.length} selected`;
-    } else {
-        bar.style.display = 'none';
-    }
-}
-
-/**
- * Batch remove selected retag groups
- */
-async function batchRemoveRetagGroups() {
-    const checked = document.querySelectorAll('.retag-select-cb:checked');
-    if (checked.length === 0) return;
-
-    const groupIds = Array.from(checked).map(cb => parseInt(cb.getAttribute('data-group-id')));
-
-    try {
-        const response = await fetch('/api/retag/groups/delete-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ group_ids: groupIds })
-        });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Removed ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
-            openRetagModal(); // Refresh
-        } else {
-            showToast('Failed to remove groups', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to remove groups', 'error');
-    }
-}
-
-/**
- * Clear all retag groups — inline confirm on the button itself
- */
-function clearAllRetagGroups(btn) {
-    if (!btn) return;
-    if (btn.dataset.confirming === 'true') {
-        // Already confirming — execute
-        btn.dataset.confirming = '';
-        btn.textContent = 'Clear All';
-        executeClearAllRetag();
-        return;
-    }
-    // First click — show confirm state
-    btn.dataset.confirming = 'true';
-    btn.textContent = 'Confirm Clear?';
-    btn.style.background = 'rgba(255, 59, 48, 0.15)';
-    // Auto-reset after 3 seconds if not clicked again
-    setTimeout(() => {
-        if (btn.dataset.confirming === 'true') {
-            btn.dataset.confirming = '';
-            btn.textContent = 'Clear All';
-            btn.style.background = '';
-        }
-    }, 3000);
-}
-
-async function executeClearAllRetag() {
-    try {
-        const response = await fetch('/api/retag/groups/clear-all', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-        const data = await response.json();
-        if (data.success) {
-            showToast(`Cleared ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
-            openRetagModal(); // Refresh
-        } else {
-            showToast('Failed to clear groups', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to clear groups', 'error');
-    }
-}
-
-function stopWishlistCountPolling() {
-    if (wishlistCountInterval) {
-        clearInterval(wishlistCountInterval);
-        wishlistCountInterval = null;
-    }
-}
-
-
-
-function resetWishlistModalToIdleState() {
-    // Reset wishlist modal to idle state after background processing completes
-    const playlistId = 'wishlist';
-    const process = activeDownloadProcesses[playlistId];
-
-    if (process) {
-        console.log('🔄 Resetting wishlist modal to idle state...');
-
-        // Reset button states
-        const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-        const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-        if (beginBtn) {
-            beginBtn.style.display = 'inline-block';
-            beginBtn.disabled = false;
-            beginBtn.textContent = 'Begin Analysis';
-        }
-        if (cancelBtn) {
-            cancelBtn.style.display = 'none';
-        }
-
-        // Show the force download toggle again
-        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
-        if (forceToggleContainer) {
-            forceToggleContainer.style.display = 'flex';
-        }
-
-        // Reset progress displays
-        const analysisText = document.getElementById(`analysis-progress-text-${playlistId}`);
-        const analysisBar = document.getElementById(`analysis-progress-fill-${playlistId}`);
-        const downloadText = document.getElementById(`download-progress-text-${playlistId}`);
-        const downloadBar = document.getElementById(`download-progress-fill-${playlistId}`);
-
-        if (analysisText) analysisText.textContent = 'Ready to start';
-        if (analysisBar) analysisBar.style.width = '0%';
-        if (downloadText) downloadText.textContent = 'Waiting for analysis';
-        if (downloadBar) downloadBar.style.width = '0%';
-
-        // Reset all track rows to pending state
-        const trackRows = document.querySelectorAll(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index]`);
-        trackRows.forEach((row, index) => {
-            const matchCell = row.querySelector(`#match-${playlistId}-${index}`);
-            const downloadCell = row.querySelector(`#download-${playlistId}-${index}`);
-            const actionsCell = row.querySelector(`#actions-${playlistId}-${index}`);
-
-            if (matchCell) matchCell.textContent = '🔍 Pending';
-            if (downloadCell) downloadCell.textContent = '-';
-            if (actionsCell) actionsCell.innerHTML = '-';
-        });
-
-        // Reset stats
-        const foundElement = document.getElementById(`stat-found-${playlistId}`);
-        const missingElement = document.getElementById(`stat-missing-${playlistId}`);
-        const downloadedElement = document.getElementById(`stat-downloaded-${playlistId}`);
-        if (foundElement) foundElement.textContent = '-';
-        if (missingElement) missingElement.textContent = '-';
-        if (downloadedElement) downloadedElement.textContent = '0';
-
-        // Reset process status
-        process.status = 'idle';
-        process.batchId = null;
-        if (process.poller) {
-            clearInterval(process.poller);
-            process.poller = null;
-        }
-
-        console.log('✅ Wishlist modal fully reset to idle state');
-    } else {
-        console.log('⚠️ No wishlist process found to reset');
-    }
-}
-
-let toolsPageState = { isInitialized: false };
-
-async function initializeToolsPage() {
-    // Attach event listeners for tool buttons (idempotent — getElementById returns null if already wired)
-    const updateButton = document.getElementById('db-update-button');
-    if (updateButton && !updateButton._toolsWired) {
-        updateButton.addEventListener('click', handleDbUpdateButtonClick);
-        updateButton._toolsWired = true;
-    }
-
-    const metadataButton = document.getElementById('metadata-update-button');
-    if (metadataButton && !metadataButton._toolsWired) {
-        metadataButton.addEventListener('click', handleMetadataUpdateButtonClick);
-        metadataButton._toolsWired = true;
-    }
-
-    const qualityScanButton = document.getElementById('quality-scan-button');
-    if (qualityScanButton && !qualityScanButton._toolsWired) {
-        qualityScanButton.addEventListener('click', handleQualityScanButtonClick);
-        qualityScanButton._toolsWired = true;
-    }
-
-    const duplicateCleanButton = document.getElementById('duplicate-clean-button');
-    if (duplicateCleanButton && !duplicateCleanButton._toolsWired) {
-        duplicateCleanButton.addEventListener('click', handleDuplicateCleanButtonClick);
-        duplicateCleanButton._toolsWired = true;
-    }
-
-    const retagOpenButton = document.getElementById('retag-open-button');
-    if (retagOpenButton && !retagOpenButton._toolsWired) {
-        retagOpenButton.addEventListener('click', openRetagModal);
-        retagOpenButton._toolsWired = true;
-    }
-
-    const mediaScanButton = document.getElementById('media-scan-button');
-    if (mediaScanButton && !mediaScanButton._toolsWired) {
-        mediaScanButton.addEventListener('click', handleMediaScanButtonClick);
-        mediaScanButton._toolsWired = true;
-    }
-
-    const backupNowButton = document.getElementById('backup-now-button');
-    if (backupNowButton && !backupNowButton._toolsWired) {
-        backupNowButton.addEventListener('click', handleBackupNowClick);
-        backupNowButton._toolsWired = true;
-    }
-
-    // Tool-specific init
-    await checkAndHideMetadataUpdaterForNonPlex();
-    await checkAndRestoreMetadataUpdateState();
-    await checkAndShowMediaScanForPlex();
-    loadBackupList();
-    initializeToolHelpButtons();
-    loadRetagStats();
-    checkRetagStatus();
-    await fetchAndUpdateDbStats();
-    loadDiscoveryPoolStats();
-    loadMetadataCacheStats();
-
-    // Start polling (cleared when navigating away via loadPageData preamble)
-    stopDbStatsPolling();
-    dbStatsInterval = setInterval(fetchAndUpdateDbStats, 10000);
-
-    // Check for ongoing operations
-    await checkAndUpdateDbProgress();
-    await checkAndUpdateQualityScanProgress();
-    await checkAndUpdateDuplicateCleanProgress();
-
-    // Initialize library maintenance section
-    updateRepairStatus();
-    switchRepairTab('jobs');
-
-    toolsPageState.isInitialized = true;
-}
-
-async function loadDashboardData() {
-    // Initial load of wishlist count
-    await updateWishlistCount();
-
-    // Start periodic refresh of wishlist count (every 10 seconds)
-    stopWishlistCountPolling(); // Ensure no duplicates
-    wishlistCountInterval = setInterval(updateWishlistCount, 10000);
-
-    // Initial load of service status, system statistics, and library status
-    await fetchAndUpdateServiceStatus();
-    await fetchAndUpdateSystemStats();
-    await fetchAndUpdateDbStats();
-
-    // Service status is already polled globally (line 311)
-    // System stats polling kept here (dashboard-specific)
-    setInterval(fetchAndUpdateSystemStats, 10000);
-
-    // Initial load of activity feed
-    await fetchAndUpdateActivityFeed();
-
-    // Start periodic refresh of activity feed (every 2 seconds for responsiveness)
-    setInterval(fetchAndUpdateActivityFeed, 2000);
-
-    // Start periodic toast checking (every 3 seconds)
-    setInterval(checkForActivityToasts, 3000);
-
-    // Check for any active download processes that need rehydration
-    await checkForActiveProcesses();
-
-    // Populate the Active Downloads dashboard section with any existing downloads
-    updateDashboardDownloads();
-
-    // Automatic wishlist processing now runs server-side
-}
-
-// --- Data Fetching and UI Updates ---
-
-async function fetchAndUpdateDbStats() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/database/stats');
-        if (!response.ok) return;
-
-        const stats = await response.json();
-
-        // This function updates the stat cards in the top grid
-        updateDashboardStatCards(stats);
-
-        // This function updates the info within the DB Updater tool card
-        updateDbUpdaterCardInfo(stats);
-
-    } catch (error) {
-        console.warn('Could not fetch DB stats:', error);
-    }
-}
-
-function updateDashboardStatCards(stats) {
-    // Update the Library Status card on the dashboard
-    updateLibraryStatusCard(stats);
-}
-
-/**
- * Smart Library Status card on the Dashboard.
- * Shows different states: no server, empty library, healthy library, scanning.
- */
-function updateLibraryStatusCard(dbStats) {
-    const card = document.getElementById('library-status-card');
-    if (!card) return;
-
-    const title = document.getElementById('library-status-title');
-    const subtitle = document.getElementById('library-status-subtitle');
-    const statsRow = document.getElementById('library-status-stats');
-    const scanBtn = document.getElementById('library-status-scan-btn');
-    const scanLabel = document.getElementById('library-status-scan-label');
-    const deepBtn = document.getElementById('library-status-deep-btn');
-    const progressDiv = document.getElementById('library-status-progress');
-    const messageDiv = document.getElementById('library-status-message');
-
-    const artists = dbStats ? (dbStats.artists || 0) : 0;
-    const albums = dbStats ? (dbStats.albums || 0) : 0;
-    const tracks = dbStats ? (dbStats.tracks || 0) : 0;
-    const sizeMb = dbStats ? (dbStats.database_size_mb || 0) : 0;
-    const lastUpdate = dbStats ? dbStats.last_update : null;
-    const serverSource = dbStats ? dbStats.server_source : null;
-
-    // Check if a scan is in progress
-    const isScanning = window._libraryStatusScanning || false;
-
-    // Determine state
-    const serverConnected = _lastServiceStatus && _lastServiceStatus.media_server && _lastServiceStatus.media_server.connected;
-    const serverType = _lastServiceStatus && _lastServiceStatus.active_media_server;
-    const hasData = tracks > 0;
-    const hasServer = !!serverType && serverType !== 'none';
-
-    // Reset classes
-    card.className = 'library-status-card';
-
-    if (isScanning) {
-        // State: Scanning
-        card.classList.add('scanning');
-        if (title) title.textContent = 'Library Scan';
-        if (subtitle) subtitle.textContent = 'Updating library database...';
-        if (scanBtn) {
-            scanBtn.style.display = '';
-            scanBtn.classList.add('scanning');
-            scanLabel.textContent = 'Stop';
-            scanBtn.disabled = false;
-        }
-        if (deepBtn) deepBtn.style.display = 'none';
-        if (statsRow) statsRow.style.display = hasData ? '' : 'none';
-        if (progressDiv) progressDiv.style.display = '';
-        if (messageDiv) messageDiv.style.display = 'none';
-
-    } else if (!hasServer) {
-        // State: No server configured
-        card.classList.add('needs-setup');
-        if (title) title.textContent = 'No Media Server';
-        if (subtitle) subtitle.textContent = 'Connect a server to get started';
-        if (scanBtn) scanBtn.style.display = 'none';
-        if (deepBtn) deepBtn.style.display = 'none';
-        if (statsRow) statsRow.style.display = 'none';
-        if (progressDiv) progressDiv.style.display = 'none';
-        if (messageDiv) {
-            messageDiv.style.display = '';
-            messageDiv.innerHTML = 'SoulSync needs a media server to manage your library. '
-                + 'Go to <span class="link" onclick="navigateToPage(\'settings\')">Settings</span> '
-                + 'to connect Plex, Jellyfin, or Navidrome.';
-        }
-
-    } else if (!serverConnected) {
-        // State: Server configured but not connected
-        card.classList.add('needs-setup');
-        const serverName = _capitalize(serverType);
-        if (title) title.textContent = `${serverName} — Disconnected`;
-        if (subtitle) subtitle.textContent = 'Cannot reach your media server';
-        if (scanBtn) scanBtn.style.display = 'none';
-        if (deepBtn) deepBtn.style.display = 'none';
-        if (statsRow) statsRow.style.display = 'none';
-        if (progressDiv) progressDiv.style.display = 'none';
-        if (messageDiv) {
-            messageDiv.style.display = '';
-            messageDiv.innerHTML = `Your ${serverName} server is configured but not responding. `
-                + 'Check that it\'s running and the connection details are correct in '
-                + '<span class="link" onclick="navigateToPage(\'settings\')">Settings</span>.';
-        }
-
-    } else if (!hasData) {
-        // State: Server connected but library is empty
-        card.classList.add('empty-library');
-        const serverName = _capitalize(serverType);
-        if (title) title.textContent = `${serverName} Connected`;
-        if (subtitle) subtitle.textContent = 'Library database is empty';
-        if (scanBtn) {
-            scanBtn.style.display = '';
-            scanBtn.classList.remove('scanning');
-            scanLabel.textContent = 'Scan Now';
-            scanBtn.disabled = false;
-        }
-        if (deepBtn) deepBtn.style.display = 'none';
-        if (statsRow) statsRow.style.display = 'none';
-        if (progressDiv) progressDiv.style.display = 'none';
-        if (messageDiv) {
-            messageDiv.style.display = '';
-            messageDiv.innerHTML = 'Your server is connected but SoulSync hasn\'t imported your library yet. '
-                + 'Click <strong>Scan Now</strong> to pull your artists, albums, and tracks into SoulSync.';
-        }
-
-    } else {
-        // State: Healthy library with data
-        card.classList.add('has-data');
-        const serverName = _capitalize(serverType);
-        let lastRefreshText = 'Never';
-        if (lastUpdate) {
-            const d = new Date(lastUpdate);
-            if (!isNaN(d.getTime())) {
-                lastRefreshText = typeof _formatTimeAgo === 'function' ? _formatTimeAgo(d) : d.toLocaleDateString();
-            }
-        }
-        if (title) title.textContent = `${serverName} Library`;
-        if (subtitle) subtitle.textContent = `Last refreshed ${lastRefreshText}`;
-        if (scanBtn) {
-            scanBtn.style.display = '';
-            scanBtn.classList.remove('scanning');
-            scanLabel.textContent = 'Refresh';
-            scanBtn.disabled = false;
-        }
-        if (deepBtn) deepBtn.style.display = '';
-        if (statsRow) {
-            statsRow.style.display = '';
-            document.getElementById('library-status-artists').textContent = artists.toLocaleString();
-            document.getElementById('library-status-albums').textContent = albums.toLocaleString();
-            document.getElementById('library-status-tracks').textContent = tracks.toLocaleString();
-            document.getElementById('library-status-size').textContent = sizeMb < 1 ? `${Math.round(sizeMb * 1024)} KB` : `${sizeMb.toFixed(1)} MB`;
-        }
-        if (progressDiv) progressDiv.style.display = 'none';
-        if (messageDiv) messageDiv.style.display = 'none';
-    }
-}
-
-// Track last service status for library card
-let _lastServiceStatus = null;
-let _isSoulsyncStandalone = false;  // Global flag: true when no media server (sync buttons hidden)
-const _origFetchServiceStatus = typeof fetchAndUpdateServiceStatus === 'function' ? fetchAndUpdateServiceStatus : null;
-
-function _capitalize(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ''; }
-
-/**
- * Dashboard library scan button handler — triggers incremental DB update.
- */
-async function dashboardLibraryScan(fullRefresh = false) {
-    const scanBtn = document.getElementById('library-status-scan-btn');
-    const scanLabel = document.getElementById('library-status-scan-label');
-
-    // If already scanning, stop it
-    if (window._libraryStatusScanning) {
-        try {
-            await fetch('/api/database/update/stop', { method: 'POST' });
-            window._libraryStatusScanning = false;
-            showToast('Library scan stopped', 'info');
-            // Refresh the card
-            try {
-                const r = await fetch('/api/database/stats');
-                if (r.ok) updateLibraryStatusCard(await r.json());
-            } catch (e) {}
-        } catch (e) {
-            showToast('Failed to stop scan', 'error');
-        }
-        return;
-    }
-
-    // Start scan
-    try {
-        window._libraryStatusScanning = true;
-        updateLibraryStatusCard(null); // Update to scanning state
-
-        const response = await fetch('/api/database/update', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ full_refresh: fullRefresh })
-        });
-        const data = await response.json();
-        if (!data.success) {
-            window._libraryStatusScanning = false;
-            showToast(data.error || 'Failed to start scan', 'error');
-            return;
-        }
-
-        showToast('Library scan started', 'success');
-
-        // Poll for progress
-        const pollInterval = setInterval(async () => {
-            try {
-                const statusResp = await fetch('/api/database/update/status');
-                if (!statusResp.ok) return;
-                const status = await statusResp.json();
-
-                const phase = document.getElementById('library-status-phase');
-                const barFill = document.getElementById('library-status-bar-fill');
-                const detail = document.getElementById('library-status-progress-detail');
-
-                if (phase) phase.textContent = status.phase || 'Scanning...';
-                if (barFill) barFill.style.width = `${status.progress || 0}%`;
-                if (detail && status.processed !== undefined) {
-                    detail.textContent = `${status.processed} / ${status.total || '?'}`;
-                }
-
-                if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
-                    clearInterval(pollInterval);
-                    window._libraryStatusScanning = false;
-
-                    if (status.status === 'completed' || status.status === 'finished') {
-                        showToast('Library scan complete', 'success');
-                    } else if (status.status === 'error') {
-                        showToast(`Scan error: ${status.error_message || 'Unknown'}`, 'error');
-                    }
-
-                    // Refresh stats
-                    try {
-                        const r = await fetch('/api/database/stats');
-                        if (r.ok) updateLibraryStatusCard(await r.json());
-                    } catch (e) {}
-                }
-            } catch (e) {
-                clearInterval(pollInterval);
-                window._libraryStatusScanning = false;
-            }
-        }, 2000);
-
-    } catch (e) {
-        window._libraryStatusScanning = false;
-        showToast(`Scan failed: ${e.message}`, 'error');
-    }
-}
-
-/**
- * Dashboard deep scan — finds new tracks, removes stale ones, preserves enrichment data.
- */
-async function dashboardLibraryDeepScan() {
-    if (window._libraryStatusScanning) {
-        showToast('A scan is already running', 'warning');
-        return;
-    }
-
-    if (!await showConfirmDialog({
-        title: 'Deep Scan Library',
-        message: 'A deep scan re-checks every track in your media server library.\n\n' +
-                 '• Adds any new tracks that were missed\n' +
-                 '• Removes tracks no longer on your server\n' +
-                 '• Preserves all existing metadata and enrichment data\n\n' +
-                 'This may take a while for large libraries. Continue?',
-    })) return;
-
-    // Use the same scan flow as dashboardLibraryScan but with deep_scan flag
-    try {
-        window._libraryStatusScanning = true;
-        updateLibraryStatusCard(null);
-
-        const response = await fetch('/api/database/update', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ deep_scan: true })
-        });
-        const data = await response.json();
-        if (!data.success) {
-            window._libraryStatusScanning = false;
-            showToast(data.error || 'Failed to start deep scan', 'error');
-            try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
-            return;
-        }
-
-        showToast('Deep scan started — this may take a while', 'success');
-
-        const pollInterval = setInterval(async () => {
-            try {
-                const statusResp = await fetch('/api/database/update/status');
-                if (!statusResp.ok) return;
-                const status = await statusResp.json();
-
-                const phase = document.getElementById('library-status-phase');
-                const barFill = document.getElementById('library-status-bar-fill');
-                const detail = document.getElementById('library-status-progress-detail');
-
-                if (phase) phase.textContent = status.phase || 'Deep scanning...';
-                if (barFill) barFill.style.width = `${status.progress || 0}%`;
-                if (detail && status.processed !== undefined) {
-                    detail.textContent = `${status.processed} / ${status.total || '?'}`;
-                }
-
-                if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
-                    clearInterval(pollInterval);
-                    window._libraryStatusScanning = false;
-
-                    if (status.status === 'completed' || status.status === 'finished') {
-                        showToast('Deep scan complete', 'success');
-                    } else if (status.status === 'error') {
-                        showToast(`Deep scan error: ${status.error_message || 'Unknown'}`, 'error');
-                    }
-
-                    try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
-                }
-            } catch (e) {
-                clearInterval(pollInterval);
-                window._libraryStatusScanning = false;
-            }
-        }, 2000);
-
-    } catch (e) {
-        window._libraryStatusScanning = false;
-        showToast(`Deep scan failed: ${e.message}`, 'error');
-    }
-}
-
-/**
- * Update the Active Downloads section on the dashboard.
- * Called from artist, search, and discover update points (event-driven, no polling).
- */
-function updateDashboardDownloads() {
-    const section = document.getElementById('dashboard-active-downloads-section');
-    const container = document.getElementById('dashboard-downloads-container');
-    if (!section || !container) return;
-
-    // Collect active entries from each source
-    const activeArtists = Object.keys(artistDownloadBubbles).filter(id =>
-        artistDownloadBubbles[id].downloads.length > 0
-    );
-    const activeSearch = Object.keys(searchDownloadBubbles).filter(name =>
-        searchDownloadBubbles[name].downloads.length > 0
-    );
-    const activeDiscover = Object.keys(discoverDownloads);
-    const activeBeatport = Object.keys(beatportDownloadBubbles).filter(key =>
-        beatportDownloadBubbles[key].downloads.length > 0
-    );
-
-    const totalCount = activeArtists.length + activeSearch.length + activeDiscover.length + activeBeatport.length;
-
-    if (totalCount === 0) {
-        section.style.display = 'none';
-        container.innerHTML = '';
-        return;
-    }
-
-    section.style.display = '';
-    let html = '';
-
-    // --- Artists group ---
-    if (activeArtists.length > 0) {
-        html += `
-            <div class="dashboard-downloads-group">
-                <div class="dashboard-downloads-group-header">
-                    <span class="dashboard-downloads-group-label">Artists</span>
-                    <span class="dashboard-downloads-group-count">${activeArtists.length}</span>
-                </div>
-                <div class="dashboard-bubble-container">
-                    ${activeArtists.map(id => createArtistBubbleCard(artistDownloadBubbles[id])).join('')}
-                </div>
-            </div>`;
-    }
-
-    // --- Search group ---
-    if (activeSearch.length > 0) {
-        html += `
-            <div class="dashboard-downloads-group">
-                <div class="dashboard-downloads-group-header">
-                    <span class="dashboard-downloads-group-label">Search</span>
-                    <span class="dashboard-downloads-group-count">${activeSearch.length}</span>
-                </div>
-                <div class="dashboard-bubble-container">
-                    ${activeSearch.map(name => createSearchBubbleCard(searchDownloadBubbles[name])).join('')}
-                </div>
-            </div>`;
-    }
-
-    // --- Discover group ---
-    if (activeDiscover.length > 0) {
-        html += `
-            <div class="dashboard-downloads-group">
-                <div class="dashboard-downloads-group-header">
-                    <span class="dashboard-downloads-group-label">Discover</span>
-                    <span class="dashboard-downloads-group-count">${activeDiscover.length}</span>
-                </div>
-                <div class="dashboard-bubble-container">
-                    ${activeDiscover.map(pid => createDashboardDiscoverBubble(pid)).join('')}
-                </div>
-            </div>`;
-    }
-
-    // --- Beatport group ---
-    if (activeBeatport.length > 0) {
-        html += `
-            <div class="dashboard-downloads-group">
-                <div class="dashboard-downloads-group-header">
-                    <span class="dashboard-downloads-group-label">Beatport</span>
-                    <span class="dashboard-downloads-group-count">${activeBeatport.length}</span>
-                </div>
-                <div class="dashboard-bubble-container">
-                    ${activeBeatport.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
-                </div>
-            </div>`;
-    }
-
-    container.innerHTML = html;
-
-    // Post-render: attach artist bubble click handlers + dynamic glow
-    activeArtists.forEach(artistId => {
-        const card = container.querySelector(`.artist-bubble-card[data-artist-id="${artistId}"]`);
-        if (card) {
-            card.addEventListener('click', () => openArtistDownloadModal(artistId));
-            const artist = artistDownloadBubbles[artistId].artist;
-            if (artist.image_url) {
-                extractImageColors(artist.image_url, (colors) => {
-                    applyDynamicGlow(card, colors);
-                });
-            }
-        }
-    });
-    // Beatport bubble click handlers + glow
-    activeBeatport.forEach(chartKey => {
-        const card = container.querySelector(`.artist-bubble-card[data-chart-key="${chartKey}"]`);
-        if (card) {
-            card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
-            const chartImage = beatportDownloadBubbles[chartKey].chart.image;
-            if (chartImage) {
-                extractImageColors(chartImage, (colors) => {
-                    applyDynamicGlow(card, colors);
-                });
-            }
-        }
-    });
-    // Search and discover cards use inline onclick — no post-render needed
-}
-
-/**
- * Create a 150px circle card for a discover download (dashboard variant).
- * Matches artist/search bubble sizing.
- */
-function createDashboardDiscoverBubble(playlistId) {
-    const download = discoverDownloads[playlistId];
-    if (!download) return '';
-
-    const isCompleted = download.status === 'completed';
-    const imageUrl = download.imageUrl || '';
-    const backgroundStyle = imageUrl
-        ? `background-image: url('${imageUrl}');`
-        : `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
-
-    return `
-        <div class="dashboard-discover-bubble ${isCompleted ? 'completed' : ''}"
-             onclick="openDiscoverDownloadModal('${playlistId}')"
-             title="${escapeHtml(download.name)} - Click to view">
-            <div class="dashboard-discover-bubble-image" style="${backgroundStyle}"></div>
-            <div class="dashboard-discover-bubble-overlay"></div>
-            <div class="dashboard-discover-bubble-content">
-                <div class="dashboard-discover-bubble-name">${escapeHtml(download.name)}</div>
-                <div class="dashboard-discover-bubble-status">${isCompleted ? 'Completed' : 'In Progress'}</div>
-            </div>
-        </div>
-    `;
-}
-
-
-
-function updateDbUpdaterCardInfo(stats) {
-    // Update the detailed stats within the DB Updater tool card
-    const lastRefreshEl = document.getElementById('db-last-refresh');
-    const artistsStatEl = document.getElementById('db-stat-artists');
-    const albumsStatEl = document.getElementById('db-stat-albums');
-    const tracksStatEl = document.getElementById('db-stat-tracks');
-    const sizeStatEl = document.getElementById('db-stat-size');
-
-    if (lastRefreshEl) {
-        if (stats.last_full_refresh) {
-            const date = new Date(stats.last_full_refresh);
-            lastRefreshEl.textContent = date.toLocaleString();
-        } else {
-            lastRefreshEl.textContent = 'Never';
-        }
-    }
-
-    if (artistsStatEl) artistsStatEl.textContent = stats.artists.toLocaleString() || '0';
-    if (albumsStatEl) albumsStatEl.textContent = stats.albums.toLocaleString() || '0';
-    if (tracksStatEl) tracksStatEl.textContent = stats.tracks.toLocaleString() || '0';
-    if (sizeStatEl) sizeStatEl.textContent = `${stats.database_size_mb.toFixed(2)} MB`;
-
-    // Update the title of the tool card to show which server is active
-    const toolCardTitle = document.querySelector('#db-updater-card .tool-card-title');
-    if (toolCardTitle && stats.server_source) {
-        const serverName = stats.server_source.charAt(0).toUpperCase() + stats.server_source.slice(1);
-        toolCardTitle.textContent = `${serverName} Database Updater`;
-    }
-}
-
-// --- Wishlist Count Functions ---
-
-async function updateWishlistCount() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/wishlist/count');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        const count = data.count || 0;
-
-        _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
-        // Update sidebar nav badge
-        const wlNavBadge = document.getElementById('wishlist-nav-badge');
-        if (wlNavBadge) {
-            wlNavBadge.textContent = count;
-            wlNavBadge.classList.toggle('hidden', count === 0);
-        }
-        const wishlistButton = document.getElementById('wishlist-button');
-        if (wishlistButton) {
-            if (count === 0) {
-                wishlistButton.classList.remove('wishlist-active');
-                wishlistButton.classList.add('wishlist-inactive');
-            } else {
-                wishlistButton.classList.remove('wishlist-inactive');
-                wishlistButton.classList.add('wishlist-active');
-            }
-        }
-
-        // Check for auto-initiated wishlist processes that user should see immediately
-        await checkForAutoInitiatedWishlistProcess();
-
-    } catch (error) {
-        console.warn('Could not fetch wishlist count:', error);
-    }
-}
-
-async function checkForAutoInitiatedWishlistProcess() {
-    try {
-        const playlistId = 'wishlist';
-
-        // Only check if we're on the dashboard and no modal is currently visible
-        if (currentPage !== 'dashboard') {
-            return;
-        }
-
-        // Don't override if user has manually closed the modal during auto-processing
-        if (WishlistModalState.wasUserClosed()) {
-            return;
-        }
-
-        // Check for active wishlist processes
-        const response = await fetch('/api/active-processes');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        const processes = data.active_processes || [];
-        const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
-        const clientWishlistProcess = activeDownloadProcesses[playlistId];
-
-        if (serverWishlistProcess && serverWishlistProcess.auto_initiated) {
-            console.log('🤖 [Auto-Processing] Detected auto-initiated wishlist process during polling');
-
-            // Only sync frontend state if needed, but don't auto-show modal
-            const needsSync = !clientWishlistProcess ||
-                clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
-                !clientWishlistProcess.modalElement ||
-                !document.body.contains(clientWishlistProcess.modalElement);
-
-            if (needsSync) {
-                console.log('🔄 [Auto-Processing] Syncing frontend state for auto-processing (background mode)');
-                await rehydrateModal(serverWishlistProcess, false); // Background sync only
-            }
-
-            // Note: Modal visibility is controlled by user interaction only
-            // User must click wishlist button to see auto-processing progress
-        }
-
-    } catch (error) {
-        console.warn('Error checking for auto-initiated wishlist process:', error);
-    }
-}
-
-async function checkAndUpdateDbProgress() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/database/update/status', {
-            signal: AbortSignal.timeout(10000) // 10 second timeout
-        });
-        if (!response.ok) return;
-
-        const state = await response.json();
-        console.debug('📊 DB Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
-        updateDbProgressUI(state);
-
-        // Start polling only if not already polling and status is running
-        if (state.status === 'running' && !dbUpdateStatusInterval) {
-            console.log('🔄 Starting database update polling (1 second interval)');
-            dbUpdateStatusInterval = setInterval(checkAndUpdateDbProgress, 1000);
-        }
-
-    } catch (error) {
-        console.warn('Could not fetch DB update status:', error);
-        // Don't stop polling on network errors - keep trying
-    }
-}
-
-function updateDbProgressFromData(data) {
-    const prev = _lastToolStatus['db-update'];
-    _lastToolStatus['db-update'] = data.status;
-    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
-    updateDbProgressUI(data);
-}
-
-function updateDbProgressUI(state) {
-    const button = document.getElementById('db-update-button');
-    const phaseLabel = document.getElementById('db-phase-label');
-    const progressLabel = document.getElementById('db-progress-label');
-    const progressBar = document.getElementById('db-progress-bar');
-    const refreshSelect = document.getElementById('db-refresh-type');
-
-    if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
-
-    if (state.status === 'running') {
-        button.textContent = 'Stop Update';
-        button.disabled = false;
-        refreshSelect.disabled = true;
-
-        phaseLabel.textContent = state.phase || 'Processing...';
-        progressLabel.textContent = `${state.processed} / ${state.total} artists (${state.progress.toFixed(1)}%)`;
-        progressBar.style.width = `${state.progress}%`;
-    } else { // idle, finished, or error
-        stopDbUpdatePolling();
-        button.textContent = 'Update Database';
-        button.disabled = false;
-        refreshSelect.disabled = false;
-
-        if (state.status === 'error') {
-            phaseLabel.textContent = `Error: ${state.error_message}`;
-            progressBar.style.backgroundColor = '#ff4444'; // Red for error
-        } else {
-            phaseLabel.textContent = state.phase || 'Idle';
-            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
-        }
-
-        if (state.status === 'finished' || state.status === 'error') {
-            // Final stats refresh after completion/error
-            setTimeout(fetchAndUpdateDbStats, 500);
-        }
-    }
-}
-
-// ===================================================================
-// TIDAL PLAYLIST MANAGEMENT (YouTube-style cards with Tidal colors)
-// ===================================================================
-
-async function loadTidalPlaylists() {
-    const container = document.getElementById('tidal-playlist-container');
-    const refreshBtn = document.getElementById('tidal-refresh-btn');
-
-    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading Tidal playlists...</div>`;
-    refreshBtn.disabled = true;
-    refreshBtn.textContent = '🔄 Loading...';
-
-    try {
-        const response = await fetch('/api/tidal/playlists');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Tidal playlists');
-        }
-
-        tidalPlaylists = await response.json();
-        renderTidalPlaylists();
-        tidalPlaylistsLoaded = true;
-
-        console.log(`🎵 Loaded ${tidalPlaylists.length} Tidal playlists`);
-
-        // Auto-mirror Tidal playlists: fetch tracks in background then mirror
-        // Cards render instantly from metadata; tracks load per-playlist without blocking UI
-        for (const p of tidalPlaylists) {
-            // Skip if already have tracks from a previous load
-            if (p.tracks && p.tracks.length > 0) {
-                mirrorPlaylist('tidal', p.id, p.name, p.tracks.map(t => ({
-                    track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
-                    album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
-                    source_track_id: t.id || ''
-                })), { owner: p.owner, image_url: p.image_url, description: p.description });
-                continue;
-            }
-            // Fetch tracks on-demand for this playlist
-            try {
-                const fullResp = await fetch(`/api/tidal/playlist/${p.id}`);
-                if (fullResp.ok) {
-                    const fullData = await fullResp.json();
-                    if (fullData.tracks && fullData.tracks.length > 0) {
-                        p.tracks = fullData.tracks;
-                        p.track_count = fullData.tracks.length;
-                        // Update card track count in UI
-                        const countEl = document.querySelector(`#tidal-card-${p.id} .playlist-card-track-count`);
-                        if (countEl) countEl.textContent = `${fullData.tracks.length} tracks`;
-                        // Mirror with full track data
-                        mirrorPlaylist('tidal', p.id, p.name, fullData.tracks.map(t => ({
-                            track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
-                            album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
-                            source_track_id: t.id || ''
-                        })), { owner: p.owner, image_url: p.image_url, description: p.description });
-                    }
-                }
-            } catch (e) {
-                console.warn(`Failed to fetch tracks for Tidal playlist ${p.name}: ${e.message}`);
-            }
-        }
-
-        // Load and apply saved discovery states from backend (like YouTube)
-        await loadTidalPlaylistStatesFromBackend();
-
-    } catch (error) {
-        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
-        showToast(`Error loading Tidal playlists: ${error.message}`, 'error');
-    } finally {
-        refreshBtn.disabled = false;
-        refreshBtn.textContent = '🔄 Refresh';
-    }
-}
-
-function renderTidalPlaylists() {
-    const container = document.getElementById('tidal-playlist-container');
-    if (tidalPlaylists.length === 0) {
-        container.innerHTML = `<div class="playlist-placeholder">No Tidal playlists found.</div>`;
-        return;
-    }
-
-    container.innerHTML = tidalPlaylists.map(p => {
-        // Initialize state if not exists (fresh state like sync.py)
-        if (!tidalPlaylistStates[p.id]) {
-            tidalPlaylistStates[p.id] = {
-                phase: 'fresh',
-                playlist: p
-            };
-        }
-
-        return createTidalCard(p);
-    }).join('');
-
-    // Add click handlers to cards
-    tidalPlaylists.forEach(p => {
-        const card = document.getElementById(`tidal-card-${p.id}`);
-        if (card) {
-            card.addEventListener('click', () => handleTidalCardClick(p.id));
-        }
-    });
-}
-
-function createTidalCard(playlist) {
-    const state = tidalPlaylistStates[playlist.id];
-    const phase = state.phase;
-
-    // Get phase-specific button text (like YouTube cards)
-    let buttonText = getActionButtonText(phase);
-    let phaseText = getPhaseText(phase);
-    let phaseColor = getPhaseColor(phase);
-
-    return `
-        <div class="youtube-playlist-card tidal-playlist-card" id="tidal-card-${playlist.id}">
-            <div class="playlist-card-icon">🎵</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">${playlist.track_count} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                <!-- Progress will be dynamically updated based on phase -->
-            </div>
-            <button class="playlist-card-action-btn">${buttonText}</button>
-        </div>
-    `;
-}
-
-async function handleTidalCardClick(playlistId) {
-    // Robust state validation
-    const state = tidalPlaylistStates[playlistId];
-    if (!state) {
-        console.error(`❌ [Card Click] No state found for Tidal playlist: ${playlistId}`);
-        showToast('Playlist state not found - try refreshing the page', 'error');
-        return;
-    }
-
-    // Validate required state data
-    if (!state.playlist) {
-        console.error(`❌ [Card Click] No playlist data found for Tidal playlist: ${playlistId}`);
-        showToast('Playlist data missing - try refreshing the page', 'error');
-        return;
-    }
-
-    // Validate phase
-    if (!state.phase) {
-        console.warn(`⚠️ [Card Click] No phase set for Tidal playlist ${playlistId} - defaulting to 'fresh'`);
-        state.phase = 'fresh';
-    }
-
-    console.log(`🎵 [Card Click] Tidal card clicked: ${playlistId}, Phase: ${state.phase}`);
-
-    if (state.phase === 'fresh') {
-        // Fetch tracks if not yet loaded (metadata-only listing doesn't include them)
-        if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
-            console.log(`🎵 Fetching tracks for Tidal playlist: ${state.playlist.name}`);
-            showLoadingOverlay(`Loading ${state.playlist.name}...`);
-            try {
-                const resp = await fetch(`/api/tidal/playlist/${playlistId}`);
-                if (resp.ok) {
-                    const fullData = await resp.json();
-                    if (fullData.tracks && fullData.tracks.length > 0) {
-                        // Convert to Track-like objects for the discovery modal
-                        state.playlist.tracks = fullData.tracks.map(t => ({
-                            id: t.id, name: t.name, artists: t.artists || [],
-                            album: t.album || '', duration_ms: t.duration_ms || 0,
-                            track_number: t.track_number || 0
-                        }));
-                        // Update card count
-                        const countEl = document.querySelector(`#tidal-card-${playlistId} .playlist-card-track-count`);
-                        if (countEl) countEl.textContent = `${state.playlist.tracks.length} tracks`;
-                    }
-                }
-            } catch (e) {
-                console.error(`Failed to fetch Tidal playlist tracks: ${e}`);
-                hideLoadingOverlay();
-            }
-        }
-
-        if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
-            hideLoadingOverlay();
-            showToast('Could not load tracks for this playlist', 'error');
-            return;
-        }
-
-        hideLoadingOverlay();
-        console.log(`🎵 Ready with ${state.playlist.tracks.length} Tidal tracks for discovery`);
-
-        // Open discovery modal - phase will be updated when discovery actually starts
-        openTidalDiscoveryModal(playlistId, state.playlist);
-
-    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
-        // Reopen existing modal with preserved discovery results (like GUI sync.py)
-        console.log(`🎵 [Card Click] Opening Tidal discovery modal for ${state.phase} phase`);
-
-        // Validate that we have discovery results to show
-        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
-            console.warn(`⚠️ [Card Click] Discovered phase but no discovery results found - attempting to reload from backend`);
-
-            // Try to fetch from backend as fallback
-            try {
-                const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    if (fullState.discovery_results) {
-                        // Merge backend state with current state
-                        state.discovery_results = fullState.discovery_results;
-                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
-                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
-                        tidalPlaylistStates[playlistId] = { ...tidalPlaylistStates[playlistId], ...state };
-                        console.log(`✅ [Card Click] Restored ${fullState.discovery_results.length} discovery results from backend`);
-                    }
-                }
-            } catch (error) {
-                console.error(`❌ [Card Click] Failed to fetch discovery results from backend: ${error}`);
-            }
-        }
-
-        openTidalDiscoveryModal(playlistId, state.playlist);
-    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
-        // Open download modal if we have the converted playlist ID
-        if (state.convertedSpotifyPlaylistId) {
-            console.log(`🔍 [Card Click] Opening download modal for Tidal playlist: ${state.playlist.name} (phase: ${state.phase})`);
-            // Check if modal already exists, if not create it
-            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
-                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
-                if (process.modalElement) {
-                    console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
-                    process.modalElement.style.display = 'flex';
-                } else {
-                    console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
-                    await rehydrateTidalDownloadModal(playlistId, state);
-                }
-            } else {
-                // Need to create the download modal - fetch the discovery results
-                console.log(`🔧 [Card Click] Rehydrating Tidal download modal for ${state.phase} phase`);
-                await rehydrateTidalDownloadModal(playlistId, state);
-            }
-        } else {
-            console.error('❌ [Card Click] No converted Spotify playlist ID found for Tidal download modal');
-            console.log('📊 [Card Click] Available state data:', Object.keys(state));
-
-            // Fallback: try to open discovery modal if we have discovery results
-            if (state.discovery_results && state.discovery_results.length > 0) {
-                console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${state.discovery_results.length} results`);
-                openTidalDiscoveryModal(playlistId, state.playlist);
-            } else {
-                showToast('Unable to open download modal - missing playlist data', 'error');
-            }
-        }
-    }
-}
-
-async function rehydrateTidalDownloadModal(playlistId, state) {
-    try {
-        // Robust state validation for rehydration
-        if (!state || !state.playlist) {
-            console.error(`❌ [Rehydration] Invalid state data for Tidal playlist: ${playlistId}`);
-            showToast('Cannot open download modal - invalid playlist data', 'error');
-            return;
-        }
-
-        console.log(`💧 [Rehydration] Rehydrating Tidal download modal for: ${state.playlist.name}`);
-
-        // Get discovery results from backend if not already loaded
-        if (!state.discovery_results) {
-            console.log(`🔍 Fetching discovery results from backend for Tidal playlist: ${playlistId}`);
-            const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
-            if (stateResponse.ok) {
-                const fullState = await stateResponse.json();
-                state.discovery_results = fullState.discovery_results;
-                state.convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
-                state.download_process_id = fullState.download_process_id;
-                console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
-            } else {
-                console.error('❌ Failed to fetch Tidal discovery results from backend');
-                showToast('Error loading playlist data', 'error');
-                return;
-            }
-        }
-
-        // Extract Spotify tracks from discovery results
-        const spotifyTracks = [];
-        for (const result of state.discovery_results) {
-            if (result.spotify_data) {
-                spotifyTracks.push(result.spotify_data);
-            }
-        }
-
-        if (spotifyTracks.length === 0) {
-            console.error('❌ No Spotify tracks found for download modal');
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        const virtualPlaylistId = state.convertedSpotifyPlaylistId;
-        const playlistName = state.playlist.name;
-
-        // Create the download modal
-        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // If we have a download process ID, set up the modal for the running state
-        if (state.download_process_id) {
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                process.status = state.phase === 'download_complete' ? 'complete' : 'running';
-                process.batchId = state.download_process_id;
-
-                // Update UI based on phase
-                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-
-                if (state.phase === 'downloading') {
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Start polling for live updates
-                    startModalDownloadPolling(virtualPlaylistId);
-                    console.log(`🔄 Started polling for active Tidal download: ${state.download_process_id}`);
-                } else if (state.phase === 'download_complete') {
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'none';
-                    console.log(`✅ Showing completed Tidal download results: ${state.download_process_id}`);
-
-                    // For completed downloads, fetch the final results once to populate the modal
-                    try {
-                        const response = await fetch(`/api/playlists/${state.download_process_id}/download_status`);
-                        if (response.ok) {
-                            const data = await response.json();
-                            if (data.phase === 'complete' && data.tasks) {
-                                console.log(`📊 [Rehydration] Loading ${data.tasks.length} completed tasks for modal display`);
-                                // Process the completed tasks to update modal display
-                                updateCompletedModalResults(virtualPlaylistId, data);
-                            } else {
-                                console.warn(`⚠️ [Rehydration] Unexpected data from download_status: phase=${data.phase}, tasks=${data.tasks?.length || 0}`);
-                            }
-                        } else {
-                            console.error(`❌ [Rehydration] Failed to fetch download status: ${response.status} ${response.statusText}`);
-                        }
-                    } catch (error) {
-                        console.error(`❌ [Rehydration] Error fetching final results for completed download: ${error}`);
-                        // Show a user-friendly message but still allow modal to open
-                        showToast('Could not load download results - modal may show incomplete data', 'warning', 3000);
-                    }
-                }
-            }
-        }
-
-        console.log(`✅ Successfully rehydrated Tidal download modal for: ${state.playlist.name}`);
-
-    } catch (error) {
-        console.error(`❌ Error rehydrating Tidal download modal:`, error);
-        showToast('Error opening download modal', 'error');
-    }
-}
-
-function updateCompletedModalResults(playlistId, downloadData) {
-    /**
-     * Update a completed download modal with final results
-     * This reuses the existing status polling logic but applies it once for completed state
-     */
-    console.log(`📊 [Completed Results] Updating modal ${playlistId} with final download results`);
-
-    // Validate input data
-    if (!downloadData || !downloadData.tasks) {
-        console.error(`❌ [Completed Results] Invalid download data for playlist ${playlistId}:`, downloadData);
-        return;
-    }
-
-    try {
-        // Update analysis progress to 100%
-        const analysisProgressFill = document.getElementById(`analysis-progress-fill-${playlistId}`);
-        const analysisProgressText = document.getElementById(`analysis-progress-text-${playlistId}`);
-        if (analysisProgressFill) analysisProgressFill.style.width = '100%';
-        if (analysisProgressText) analysisProgressText.textContent = 'Analysis complete!';
-
-        // Update analysis results and stats
-        if (downloadData.analysis_results) {
-            updateTrackAnalysisResults(playlistId, downloadData.analysis_results);
-            const foundCount = downloadData.analysis_results.filter(r => r.found).length;
-            const missingCount = downloadData.analysis_results.filter(r => !r.found).length;
-
-            const statFound = document.getElementById(`stat-found-${playlistId}`);
-            const statMissing = document.getElementById(`stat-missing-${playlistId}`);
-            if (statFound) statFound.textContent = foundCount;
-            if (statMissing) statMissing.textContent = missingCount;
-        }
-
-        // Process completed tasks to update individual track statuses
-        const missingTracks = (downloadData.analysis_results || []).filter(r => !r.found);
-        let completedCount = 0;
-        let failedOrCancelledCount = 0;
-        let notFoundCount = 0;
-
-        (downloadData.tasks || []).forEach(task => {
-            const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
-            if (!row) return;
-
-            row.dataset.taskId = task.task_id;
-            const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
-            const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
-
-            let statusText = '';
-            switch (task.status) {
-                case 'pending': statusText = '⏸️ Pending'; break;
-                case 'searching': statusText = '🔍 Searching...'; break;
-                case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
-                case 'post_processing': statusText = '⌛ Processing...'; break; // NEW VERIFICATION WORKFLOW
-                case 'completed': statusText = '✅ Completed'; completedCount++; break;
-                case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
-                case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
-                case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
-                default: statusText = `⚪ ${task.status}`; break;
-            }
-
-            if (statusEl) {
-                statusEl.textContent = statusText;
-                if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
-                    statusEl.classList.add('has-error-tooltip');
-                    statusEl.dataset.errorMsg = task.error_message;
-                    _ensureErrorTooltipListeners(statusEl);
-                }
-                if (task.status === 'not_found' && task.has_candidates) {
-                    statusEl.classList.add('has-candidates');
-                    statusEl.dataset.taskId = task.task_id;
-                    _ensureCandidatesClickListener(statusEl);
-                }
-            }
-            if (actionsEl) actionsEl.innerHTML = '-'; // Remove action buttons for completed tasks
-        });
-
-        // Update download progress to final state
-        const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
-        const missingCount = missingTracks.length;
-        const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 100;
-
-        const downloadProgressFill = document.getElementById(`download-progress-fill-${playlistId}`);
-        const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
-        const statDownloaded = document.getElementById(`stat-downloaded-${playlistId}`);
-
-        if (downloadProgressFill) downloadProgressFill.style.width = `${progressPercent}%`;
-        if (downloadProgressText) downloadProgressText.textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
-        if (statDownloaded) statDownloaded.textContent = completedCount;
-
-        console.log(`✅ [Completed Results] Updated modal with ${completedCount} completed, ${notFoundCount} not found, ${failedOrCancelledCount} failed tasks`);
-
-    } catch (error) {
-        console.error(`❌ [Completed Results] Error updating completed modal results:`, error);
-    }
-}
-
-function updateTidalCardPhase(playlistId, phase) {
-    const state = tidalPlaylistStates[playlistId];
-    if (!state) return;
-
-    state.phase = phase;
-
-    // Re-render the card with new phase
-    const card = document.getElementById(`tidal-card-${playlistId}`);
-    if (card) {
-        const oldButtonText = card.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
-        const newCardHtml = createTidalCard(state.playlist);
-        card.outerHTML = newCardHtml;
-
-        // Verify the card was actually updated
-        const updatedCard = document.getElementById(`tidal-card-${playlistId}`);
-        const newButtonText = updatedCard?.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
-
-        console.log(`🔄 [Card Update] Re-rendered Tidal card ${playlistId}:`);
-        console.log(`   📊 Phase: ${phase}`);
-        console.log(`   🔘 Button text: "${oldButtonText}" → "${newButtonText}"`);
-        console.log(`   ✅ Expected: "${getActionButtonText(phase)}"`);
-
-        if (newButtonText !== getActionButtonText(phase)) {
-            console.error(`❌ [Card Update] Button text mismatch! Expected "${getActionButtonText(phase)}", got "${newButtonText}"`);
-        }
-
-        // Re-attach click handler
-        const newCard = document.getElementById(`tidal-card-${playlistId}`);
-        if (newCard) {
-            newCard.addEventListener('click', () => handleTidalCardClick(playlistId));
-            console.debug(`🔗 [Card Update] Reattached click handler for Tidal card: ${playlistId}`);
-        } else {
-            console.error(`❌ [Card Update] Failed to find new card after rendering: tidal-card-${playlistId}`);
-        }
-
-        // If we have sync progress and we're in sync/sync_complete phase, restore it
-        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
-            setTimeout(() => {
-                updateTidalCardSyncProgress(playlistId, state.lastSyncProgress);
-            }, 0);
-        }
-    }
-
-    console.log(`🎵 Updated Tidal card phase: ${playlistId} -> ${phase}`);
-}
-
-async function openTidalDiscoveryModal(playlistId, playlistData) {
-    console.log(`🎵 Opening Tidal discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
-    // Create a fake YouTube-style urlHash for the modal system
-    const fakeUrlHash = `tidal_${playlistId}`;
-
-    // Get current Tidal card state to check if discovery is already done or in progress
-    const tidalCardState = tidalPlaylistStates[playlistId];
-    const isAlreadyDiscovered = tidalCardState && (tidalCardState.phase === 'discovered' || tidalCardState.phase === 'syncing' || tidalCardState.phase === 'sync_complete');
-    const isCurrentlyDiscovering = tidalCardState && tidalCardState.phase === 'discovering';
-
-    // Prepare discovery results in the correct format for modal
-    let transformedResults = [];
-    let actualMatches = 0;
-    if (isAlreadyDiscovered && tidalCardState.discovery_results) {
-        transformedResults = tidalCardState.discovery_results.map((result, index) => {
-            // Check multiple status formats
-            const isFound = result.status === 'found' ||
-                result.status === '✅ Found' ||
-                result.status_class === 'found' ||
-                result.spotify_data ||
-                result.spotify_track;
-            if (isFound) actualMatches++;
-
-            return {
-                index: index,
-                yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
-                yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                status: isFound ? '✅ Found' : '❌ Not Found',
-                status_class: isFound ? 'found' : 'not-found',
-                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                    (Array.isArray(result.spotify_data.artists)
-                        ? result.spotify_data.artists
-                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                            .filter(Boolean)
-                            .join(', ') || '-'
-                        : result.spotify_data.artists)
-                    : (result.spotify_artist || '-'),
-                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                spotify_data: result.spotify_data, // Pass through spotify_data
-                spotify_id: result.spotify_id, // Pass through spotify_id
-                manual_match: result.manual_match // Pass through manual match flag
-            };
-        });
-        console.log(`🎵 Tidal modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
-    }
-
-    // Create YouTube-compatible state structure  
-    const modalPhase = tidalCardState ? tidalCardState.phase : 'fresh';
-    youtubePlaylistStates[fakeUrlHash] = {
-        phase: modalPhase,
-        playlist: {
-            name: playlistData.name,
-            tracks: playlistData.tracks
-        },
-        is_tidal_playlist: true,  // Flag to identify this as Tidal
-        tidal_playlist_id: playlistId,
-        discovery_progress: isAlreadyDiscovered ? 100 : 0,
-        spotify_matches: isAlreadyDiscovered ? actualMatches : 0, // Backend format (snake_case)
-        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0, // Frontend format (camelCase) - for button logic
-        spotify_total: playlistData.tracks.length,
-        discovery_results: transformedResults,
-        discoveryResults: transformedResults, // Both formats for compatibility
-        discoveryProgress: isAlreadyDiscovered ? 100 : 0 // Frontend format for modal progress display
-    };
-
-    // Only start discovery if not already discovered AND not currently discovering
-    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
-        // Start Tidal discovery process automatically (like sync.py)
-        try {
-            console.log(`🔍 Starting Tidal discovery for: ${playlistData.name}`);
-
-            const response = await fetch(`/api/tidal/discovery/start/${playlistId}`, {
-                method: 'POST'
-            });
-
-            const result = await response.json();
-
-            if (result.error) {
-                console.error('❌ Error starting Tidal discovery:', result.error);
-                showToast(`Error starting discovery: ${result.error}`, 'error');
-                return;
-            }
-
-            console.log('✅ Tidal discovery started, beginning polling...');
-
-            // Update phase to discovering now that backend discovery is actually started
-            tidalPlaylistStates[playlistId].phase = 'discovering';
-            updateTidalCardPhase(playlistId, 'discovering');
-
-            // Update modal phase to match
-            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
-            // Start polling for progress
-            startTidalDiscoveryPolling(fakeUrlHash, playlistId);
-
-        } catch (error) {
-            console.error('❌ Error starting Tidal discovery:', error);
-            showToast(`Error starting discovery: ${error.message}`, 'error');
-        }
-    } else if (isCurrentlyDiscovering) {
-        // Resume polling if discovery is already in progress (like YouTube)
-        console.log(`🔄 Resuming Tidal discovery polling for: ${playlistData.name}`);
-        startTidalDiscoveryPolling(fakeUrlHash, playlistId);
-    } else if (tidalCardState && tidalCardState.phase === 'syncing') {
-        // Resume sync polling if sync is in progress
-        console.log(`🔄 Resuming Tidal sync polling for: ${playlistData.name}`);
-        startTidalSyncPolling(fakeUrlHash);
-    } else {
-        console.log('✅ Using existing results - no need to re-discover');
-    }
-
-    // Reuse YouTube discovery modal (exact sync.py pattern)
-    openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startTidalDiscoveryPolling(fakeUrlHash, playlistId) {
-    console.log(`🔄 Starting Tidal discovery polling for: ${playlistId}`);
-
-    // Stop any existing polling
-    if (activeYouTubePollers[fakeUrlHash]) {
-        clearInterval(activeYouTubePollers[fakeUrlHash]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [playlistId] });
-        _discoveryProgressCallbacks[playlistId] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
-                return;
-            }
-            // Transform to YouTube modal format
-            const transformed = {
-                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
-                complete: data.complete,
-                results: (data.results || []).map((r, i) => {
-                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
-                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
-                    return {
-                        index: i, yt_track: r.tidal_track ? r.tidal_track.name : 'Unknown',
-                        yt_artist: r.tidal_track ? (r.tidal_track.artists ? r.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
-                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
-                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
-                        spotify_artist: r.spotify_data && r.spotify_data.artists
-                            ? (Array.isArray(r.spotify_data.artists)
-                                ? (r.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : r.spotify_data.artists)
-                            : (r.spotify_artist || '-'),
-                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
-                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
-                        wing_it_fallback: isWingIt
-                    };
-                })
-            };
-            const st = youtubePlaylistStates[fakeUrlHash];
-            if (st) {
-                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
-                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
-                st.discovery_results = data.results; st.discoveryResults = transformed.results;
-                st.phase = data.phase;
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
-            }
-            if (tidalPlaylistStates[playlistId]) {
-                tidalPlaylistStates[playlistId].phase = data.phase;
-                tidalPlaylistStates[playlistId].discovery_results = data.results;
-                tidalPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
-                tidalPlaylistStates[playlistId].discovery_progress = data.progress;
-                updateTidalCardPhase(playlistId, data.phase);
-            }
-            updateTidalCardProgress(playlistId, data);
-            if (data.complete) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/tidal/discovery/status/${playlistId}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling Tidal discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-                return;
-            }
-
-            // Transform Tidal results to YouTube modal format first
-            const transformedStatus = {
-                progress: status.progress,
-                spotify_matches: status.spotify_matches,
-                spotify_total: status.spotify_total,
-                complete: status.complete,
-                results: status.results.map((result, index) => {
-                    const isFound = result.status === 'found' ||
-                        result.status === '✅ Found' ||
-                        result.status_class === 'found' ||
-                        result.spotify_data ||
-                        result.spotify_track;
-
-                    return {
-                        index: index,
-                        yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
-                        yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isFound ? '✅ Found' : '❌ Not Found',
-                        status_class: isFound ? 'found' : 'not-found',
-                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                        spotify_artist: result.spotify_data && result.spotify_data.artists
-                            ? (Array.isArray(result.spotify_data.artists)
-                                ? (result.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : result.spotify_data.artists)
-                            : (result.spotify_artist || '-'),
-                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                        spotify_data: result.spotify_data, // Pass through
-                        spotify_id: result.spotify_id, // Pass through
-                        manual_match: result.manual_match // Pass through
-                    };
-                })
-            };
-
-            // Update fake YouTube state with Tidal discovery results
-            const state = youtubePlaylistStates[fakeUrlHash];
-            if (state) {
-                state.discovery_progress = status.progress; // Backend format
-                state.discoveryProgress = status.progress; // Frontend format - for modal progress display
-                state.spotify_matches = status.spotify_matches; // Backend format
-                state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
-                state.discovery_results = status.results; // Backend format
-                state.discoveryResults = transformedStatus.results; // Frontend format - for button logic  
-                state.phase = status.phase;
-
-                // Update modal with transformed data (reuse YouTube modal update logic)
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
-                // Update Tidal card phase and save discovery results FIRST
-                if (tidalPlaylistStates[playlistId]) {
-                    tidalPlaylistStates[playlistId].phase = status.phase;
-                    tidalPlaylistStates[playlistId].discovery_results = status.results;
-                    tidalPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
-                    tidalPlaylistStates[playlistId].discovery_progress = status.progress;
-                    updateTidalCardPhase(playlistId, status.phase);
-                }
-
-                // Update Tidal card progress AFTER phase update to avoid being overwritten
-                updateTidalCardProgress(playlistId, status);
-
-                console.log(`🔄 Tidal discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
-            }
-
-            // Stop polling when complete
-            if (status.complete) {
-                console.log(`✅ Tidal discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-            }
-
-        } catch (error) {
-            console.error('❌ Error polling Tidal discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[fakeUrlHash];
-        }
-    }, 1000); // Poll every second like YouTube
-
-    // Store poller reference (reuse YouTube poller storage)
-    activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadTidalPlaylistStatesFromBackend() {
-    // Load all stored Tidal playlist discovery states from backend (similar to YouTube hydration)
-    try {
-        console.log('🎵 Loading Tidal playlist states from backend...');
-
-        const response = await fetch('/api/tidal/playlists/states');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Tidal playlist states');
-        }
-
-        const data = await response.json();
-        const states = data.states || [];
-
-        console.log(`🎵 Found ${states.length} stored Tidal playlist states in backend`);
-
-        if (states.length === 0) {
-            console.log('🎵 No Tidal playlist states to hydrate');
-            return;
-        }
-
-        // Apply states to existing playlist cards
-        for (const stateInfo of states) {
-            await applyTidalPlaylistState(stateInfo);
-        }
-
-        // Rehydrate download modals for Tidal playlists in downloading/download_complete phases
-        for (const stateInfo of states) {
-            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
-                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
-                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
-                if (!activeDownloadProcesses[convertedPlaylistId]) {
-                    console.log(`💧 Rehydrating download modal for Tidal playlist: ${stateInfo.playlist_id}`);
-                    try {
-                        // Get the playlist data
-                        const playlistData = tidalPlaylists.find(p => p.id === stateInfo.playlist_id);
-                        if (!playlistData) {
-                            console.warn(`⚠️ Playlist data not found for rehydration: ${stateInfo.playlist_id}`);
-                            continue;
-                        }
-
-                        // Create the download modal using the Tidal-specific function
-                        const spotifyTracks = tidalPlaylistStates[stateInfo.playlist_id]?.discovery_results
-                            ?.filter(result => result.spotify_data)
-                            ?.map(result => result.spotify_data) || [];
-
-                        if (spotifyTracks.length > 0) {
-                            await openDownloadMissingModalForTidal(
-                                convertedPlaylistId,
-                                playlistData.name,
-                                spotifyTracks
-                            );
-
-                            // Set the modal to running state with the correct batch ID
-                            const process = activeDownloadProcesses[convertedPlaylistId];
-                            if (process) {
-                                process.status = 'running';
-                                process.batchId = stateInfo.download_process_id;
-
-                                // Update UI to running state
-                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                                if (beginBtn) beginBtn.style.display = 'none';
-                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                                // Start polling for this process
-                                startModalDownloadPolling(convertedPlaylistId);
-
-                                console.log(`✅ Rehydrated Tidal download modal for batch ${stateInfo.download_process_id}`);
-                            }
-                        } else {
-                            console.warn(`⚠️ No Spotify tracks found for Tidal playlist rehydration: ${stateInfo.playlist_id}`);
-                        }
-                    } catch (error) {
-                        console.error(`❌ Error rehydrating Tidal download modal for ${stateInfo.playlist_id}:`, error);
-                    }
-                }
-            }
-        }
-
-        console.log('✅ Tidal playlist states loaded and applied');
-
-    } catch (error) {
-        console.error('❌ Error loading Tidal playlist states:', error);
-    }
-}
-
-async function applyTidalPlaylistState(stateInfo) {
-    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
-    try {
-        console.log(`🎵 Applying saved state for Tidal playlist: ${playlist_id}, Phase: ${phase}`);
-
-        // Find the playlist data from the loaded playlists
-        const playlistData = tidalPlaylists.find(p => p.id === playlist_id);
-        if (!playlistData) {
-            console.warn(`⚠️ Playlist data not found for state ${playlist_id} - skipping`);
-            return;
-        }
-
-        // Update local state
-        if (!tidalPlaylistStates[playlist_id]) {
-            // Initialize state if it doesn't exist
-            tidalPlaylistStates[playlist_id] = {
-                playlist: playlistData,
-                phase: 'fresh'
-            };
-        }
-
-        // Update with backend state
-        tidalPlaylistStates[playlist_id].phase = phase;
-        tidalPlaylistStates[playlist_id].discovery_progress = discovery_progress;
-        tidalPlaylistStates[playlist_id].spotify_matches = spotify_matches;
-        tidalPlaylistStates[playlist_id].discovery_results = discovery_results;
-        tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
-        tidalPlaylistStates[playlist_id].download_process_id = download_process_id;
-        tidalPlaylistStates[playlist_id].playlist = playlistData; // Ensure playlist data is set
-
-        // Fetch full discovery results for non-fresh playlists (matching YouTube pattern)
-        if (phase !== 'fresh' && phase !== 'discovering') {
-            try {
-                console.log(`🔍 Fetching full discovery results for Tidal playlist: ${playlistData.name}`);
-                const stateResponse = await fetch(`/api/tidal/state/${playlist_id}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    console.log(`📋 Retrieved full Tidal state with ${fullState.discovery_results?.length || 0} discovery results`);
-
-                    // Store full discovery results in local state (matching YouTube pattern)
-                    if (fullState.discovery_results && tidalPlaylistStates[playlist_id]) {
-                        tidalPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
-                        tidalPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
-                        tidalPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
-                        tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
-                        tidalPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
-                        console.log(`✅ Restored ${fullState.discovery_results.length} discovery results for Tidal playlist: ${playlistData.name}`);
-                    }
-                } else {
-                    console.warn(`⚠️ Could not fetch full discovery results for Tidal playlist: ${playlistData.name}`);
-                }
-            } catch (error) {
-                console.warn(`⚠️ Error fetching full discovery results for Tidal playlist ${playlistData.name}:`, error.message);
-            }
-        }
-
-        // Update the card UI to reflect the saved state
-        updateTidalCardPhase(playlist_id, phase);
-
-        // Update card progress if we have discovery results
-        if (phase === 'discovered' && tidalPlaylistStates[playlist_id]) {
-            const progressInfo = {
-                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
-                spotify_matches: tidalPlaylistStates[playlist_id].spotify_matches || 0
-            };
-            updateTidalCardProgress(playlist_id, progressInfo);
-        }
-
-        // Handle active polling resumption (matching YouTube/Beatport pattern)
-        if (phase === 'discovering') {
-            console.log(`🔍 Resuming discovery polling for Tidal: ${playlistData.name}`);
-            const fakeUrlHash = `tidal_${playlist_id}`;
-            startTidalDiscoveryPolling(fakeUrlHash, playlist_id);
-        } else if (phase === 'syncing') {
-            console.log(`🔄 Resuming sync polling for Tidal: ${playlistData.name}`);
-            const fakeUrlHash = `tidal_${playlist_id}`;
-            startTidalSyncPolling(fakeUrlHash);
-        }
-
-        console.log(`✅ Applied saved state for Tidal playlist: ${playlist_id} -> ${phase}`);
-
-    } catch (error) {
-        console.error(`❌ Error applying Tidal playlist state for ${playlist_id}:`, error);
-    }
-}
-
-function updateTidalCardProgress(playlistId, progress) {
-    const state = tidalPlaylistStates[playlistId];
-    if (!state) return;
-
-    const card = document.getElementById(`tidal-card-${playlistId}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-    if (!progressElement) return;
-
-    const total = progress.spotify_total || 0;
-    const matches = progress.spotify_matches || 0;
-    const failed = total - matches;
-    const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
-
-    progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
-    progressElement.classList.remove('hidden'); // Show progress during discovery
-
-    console.log('🎵 Updated Tidal card progress:', playlistId, `${matches}/${total} (${percentage}%)`);
-}
-
-// ===============================
-// TIDAL SYNC FUNCTIONALITY
-// ===============================
-
-async function startTidalPlaylistSync(urlHash) {
-    try {
-        console.log('🎵 Starting Tidal playlist sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_tidal_playlist) {
-            console.error('❌ Invalid Tidal playlist state for sync');
-            return;
-        }
-
-        const playlistId = state.tidal_playlist_id;
-        const response = await fetch(`/api/tidal/sync/start/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Capture sync_playlist_id for WebSocket subscription
-        const syncPlaylistId = result.sync_playlist_id;
-        if (state) state.syncPlaylistId = syncPlaylistId;
-
-        // Update card and modal to syncing phase
-        updateTidalCardPhase(playlistId, 'syncing');
-
-        // Update modal buttons if modal is open
-        updateTidalModalButtons(urlHash, 'syncing');
-
-        // Start sync polling
-        startTidalSyncPolling(urlHash, syncPlaylistId);
-
-        showToast('Tidal playlist sync started!', 'success');
-
-    } catch (error) {
-        console.error('❌ Error starting Tidal sync:', error);
-        showToast(`Error starting sync: ${error.message}`, 'error');
-    }
-}
-
-function startTidalSyncPolling(urlHash, syncPlaylistId) {
-    // Stop any existing polling
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    const state = youtubePlaylistStates[urlHash];
-    const playlistId = state.tidal_playlist_id;
-
-    // Resolve syncPlaylistId from argument or stored state
-    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
-    // Phase 6: Subscribe via WebSocket
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateTidalCardSyncProgress(playlistId, progress);
-            updateTidalModalSyncProgress(urlHash, progress);
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateTidalCardPhase(playlistId, 'sync_complete');
-                updateTidalModalButtons(urlHash, 'sync_complete');
-                showToast('Tidal playlist sync complete!', 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateTidalCardPhase(playlistId, 'discovered');
-                updateTidalModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    // Define the polling function (HTTP fallback)
-    const pollFunction = async () => {
-        if (socketConnected) return; // Phase 6: WS handles updates
-        try {
-            const response = await fetch(`/api/tidal/sync/status/${playlistId}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling Tidal sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            updateTidalCardSyncProgress(playlistId, status.progress);
-            updateTidalModalSyncProgress(urlHash, status.progress);
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateTidalCardPhase(playlistId, 'sync_complete');
-                updateTidalModalButtons(urlHash, 'sync_complete');
-                showToast('Tidal playlist sync complete!', 'success');
-            } else if (status.sync_status === 'error') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateTidalCardPhase(playlistId, 'discovered');
-                updateTidalModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            console.error('❌ Error polling Tidal sync:', error);
-            if (activeYouTubePollers[urlHash]) {
-                clearInterval(activeYouTubePollers[urlHash]);
-                delete activeYouTubePollers[urlHash];
-            }
-        }
-    };
-
-    // Run immediately to get current status (skip if WS active)
-    if (!socketConnected) pollFunction();
-
-    // Then continue polling at regular intervals
-    const pollInterval = setInterval(pollFunction, 1000);
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelTidalSync(urlHash) {
-    try {
-        console.log('❌ Cancelling Tidal sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_tidal_playlist) {
-            console.error('❌ Invalid Tidal playlist state');
-            return;
-        }
-
-        const playlistId = state.tidal_playlist_id;
-        const response = await fetch(`/api/tidal/sync/cancel/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error cancelling sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Stop polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Phase 6: Clean up WS subscription
-        const syncId = state && state.syncPlaylistId;
-        if (syncId && _syncProgressCallbacks[syncId]) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
-            delete _syncProgressCallbacks[syncId];
-        }
-
-        // Revert to discovered phase
-        updateTidalCardPhase(playlistId, 'discovered');
-        updateTidalModalButtons(urlHash, 'discovered');
-
-        showToast('Tidal sync cancelled', 'info');
-
-    } catch (error) {
-        console.error('❌ Error cancelling Tidal sync:', error);
-        showToast(`Error cancelling sync: ${error.message}`, 'error');
-    }
-}
-
-function updateTidalCardSyncProgress(playlistId, progress) {
-    const state = tidalPlaylistStates[playlistId];
-    if (!state || !state.playlist || !progress) return;
-
-    // Save the progress for later restoration
-    state.lastSyncProgress = progress;
-
-    const card = document.getElementById(`tidal-card-${playlistId}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    // Build clean status counter HTML exactly like YouTube cards
-    let statusCounterHTML = '';
-    if (progress && progress.total_tracks > 0) {
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const processed = matched + failed;
-        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-        statusCounterHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat matched-tracks">✓ ${matched}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat failed-tracks">✗ ${failed}</span>
-                <span class="sync-stat percentage">(${percentage}%)</span>
-            </div>
-        `;
-    }
-
-    // Only update if we have valid sync progress, otherwise preserve existing discovery results
-    if (statusCounterHTML) {
-        progressElement.innerHTML = statusCounterHTML;
-    }
-
-    console.log(`🎵 Updated Tidal card sync progress: ♪ ${progress?.total_tracks || 0} / ✓ ${progress?.matched_tracks || 0} / ✗ ${progress?.failed_tracks || 0}`);
-}
-
-function updateTidalModalSyncProgress(urlHash, progress) {
-    const statusDisplay = document.getElementById(`tidal-sync-status-${urlHash}`);
-    if (!statusDisplay || !progress) return;
-
-    console.log(`📊 Updating Tidal modal sync progress for ${urlHash}:`, progress);
-
-    // Update individual counters exactly like YouTube sync
-    const totalEl = document.getElementById(`tidal-total-${urlHash}`);
-    const matchedEl = document.getElementById(`tidal-matched-${urlHash}`);
-    const failedEl = document.getElementById(`tidal-failed-${urlHash}`);
-    const percentageEl = document.getElementById(`tidal-percentage-${urlHash}`);
-
-    const total = progress.total_tracks || 0;
-    const matched = progress.matched_tracks || 0;
-    const failed = progress.failed_tracks || 0;
-
-    if (totalEl) totalEl.textContent = total;
-    if (matchedEl) matchedEl.textContent = matched;
-    if (failedEl) failedEl.textContent = failed;
-
-    // Calculate percentage like YouTube sync
-    if (total > 0) {
-        const processed = matched + failed;
-        const percentage = Math.round((processed / total) * 100);
-        if (percentageEl) percentageEl.textContent = percentage;
-    }
-
-    console.log(`📊 Tidal modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
-}
-
-function updateTidalModalButtons(urlHash, phase) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (!modal) return;
-
-    const footerLeft = modal.querySelector('.modal-footer-left');
-    if (footerLeft) {
-        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
-    }
-}
-
-async function startTidalDownloadMissing(urlHash) {
-    try {
-        console.log('🔍 Starting download missing tracks for Tidal playlist:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_tidal_playlist) {
-            console.error('❌ Invalid Tidal playlist state for download');
-            return;
-        }
-
-        // Tidal reuses youtubePlaylistStates infrastructure, so get results from there
-        const discoveryResults = state.discoveryResults || state.discovery_results;
-
-        if (!discoveryResults) {
-            showToast('No discovery results available for download', 'error');
-            return;
-        }
-
-        // Convert Tidal discovery results to Spotify tracks format (same as YouTube)
-        const spotifyTracks = [];
-        for (const result of discoveryResults) {
-            if (result.spotify_data) {
-                spotifyTracks.push(result.spotify_data);
-            } else if (result.spotify_track && result.status_class === 'found') {
-                // Build from individual fields (automatic discovery format)
-                // Convert album to proper object format for wishlist compatibility
-                const albumData = result.spotify_album || 'Unknown Album';
-                const albumObject = typeof albumData === 'object' && albumData !== null
-                    ? albumData
-                    : {
-                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
-                        album_type: 'album',
-                        images: []
-                    };
-
-                spotifyTracks.push({
-                    id: result.spotify_id || 'unknown',
-                    name: result.spotify_track || 'Unknown Track',
-                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
-                    album: albumObject,
-                    duration_ms: 0
-                });
-            }
-        }
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        // Create a virtual playlist for the download system
-        const virtualPlaylistId = `tidal_${state.tidal_playlist_id}`;
-        const playlistName = state.playlist.name;
-
-        // Store reference for card navigation (same as YouTube)
-        state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
-        // Close the discovery modal if it's open (same as YouTube)
-        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (discoveryModal) {
-            discoveryModal.classList.add('hidden');
-            console.log('🔄 Closed Tidal discovery modal to show download modal');
-        }
-
-        // Open download missing tracks modal for Tidal playlist
-        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // Phase will change to 'downloading' when user clicks "Begin Analysis" button
-
-    } catch (error) {
-        console.error('❌ Error starting download missing tracks:', error);
-        showToast(`Error starting downloads: ${error.message}`, 'error');
-    }
-}
-
-async function openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks) {
-    showLoadingOverlay('Loading Tidal playlist...');
-    // Check if a process is already active for this virtual playlist
-    if (activeDownloadProcesses[virtualPlaylistId]) {
-        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process.modalElement) {
-            if (process.status === 'complete') {
-                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-            }
-            process.modalElement.style.display = 'flex';
-        }
-        return;
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for Tidal playlist: ${virtualPlaylistId}`);
-
-    // Create virtual playlist object for compatibility with existing modal logic
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: playlistName,
-        track_count: spotifyTracks.length
-    };
-
-    // Store the tracks in the cache for the modal to use
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-    currentPlaylistTracks = spotifyTracks;
-    currentModalPlaylistId = virtualPlaylistId;
-
-    let modal = document.createElement('div');
-    modal.id = `download-missing-modal-${virtualPlaylistId}`;
-    modal.className = 'download-missing-modal';
-    modal.style.display = 'none';
-    document.body.appendChild(modal);
-
-    // Register the new process in our global state tracker using the same structure as Spotify
-    activeDownloadProcesses[virtualPlaylistId] = {
-        status: 'idle',
-        modalElement: modal,
-        poller: null,
-        batchId: null,
-        playlist: virtualPlaylist,
-        tracks: spotifyTracks
-    };
-
-    // Generate hero section with dynamic source detection (same as YouTube/Beatport)
-    const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
-        virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
-            virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
-                virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
-                    virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
-                        virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
-                            virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
-                                virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
-                                    virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
-                                        virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
-                                            virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
-                                                'YouTube';
-
-    const heroContext = {
-        type: 'playlist',
-        playlist: { name: playlistName, owner: source },
-        trackCount: spotifyTracks.length,
-        playlistId: virtualPlaylistId
-    };
-
-    // Use the exact same modal HTML structure as the existing Spotify modal
-    modal.innerHTML = `
-        <div class="download-missing-modal-content" data-context="playlist">
-            <div class="download-missing-modal-header">
-                ${generateDownloadModalHeroSection(heroContext)}
-            </div>
-
-            <div class="download-missing-modal-body">
-                <div class="download-progress-section">
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            🔍 Library Analysis
-                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            ⏬ Downloads
-                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="download-tracks-section">
-                    <div class="download-tracks-header">
-                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
-                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
-                    </div>
-                    <div class="download-tracks-table-container">
-                        <table class="download-tracks-table">
-                            <thead>
-                                <tr>
-                                    <th class="track-select-header">
-                                        <input type="checkbox" class="track-select-all"
-                                               id="select-all-${virtualPlaylistId}" checked
-                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
-                                    </th>
-                                    <th>#</th>
-                                    <th>Track</th>
-                                    <th>Artist</th>
-                                    <th>Duration</th>
-                                    <th>Library Match</th>
-                                    <th>Download Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
-                                ${spotifyTracks.map((track, index) => `
-                                    <tr data-track-index="${index}">
-                                        <td class="track-select-cell">
-                                            <input type="checkbox" class="track-select-cb"
-                                                   data-track-index="${index}" checked
-                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
-                                        </td>
-                                        <td class="track-number">${index + 1}</td>
-                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
-                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
-                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
-                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
-                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="download-missing-modal-footer">
-                <div class="download-phase-controls">
-                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
-                            <span>Force Download All</span>
-                        </label>
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
-                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
-                        </label>
-                    </div>
-                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
-                        Begin Analysis
-                    </button>
-                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
-                        Add to Wishlist
-                    </button>
-                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
-                        Cancel All
-                    </button>
-                </div>
-                <div class="modal-close-section">
-                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
-    modal.style.display = 'flex';
-    hideLoadingOverlay();
-}
-
-
-// ===================================================================
-// DEEZER ARL PLAYLIST MANAGEMENT (Spotify-identical pattern)
-// ===================================================================
-
-async function loadDeezerArlPlaylists() {
-    const container = document.getElementById('deezer-arl-playlist-container');
-    const refreshBtn = document.getElementById('deezer-arl-refresh-btn');
-
-    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading playlists...</div>`;
-    refreshBtn.disabled = true;
-    refreshBtn.textContent = '🔄 Loading...';
-
-    try {
-        const response = await fetch('/api/deezer/arl-playlists');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Deezer playlists');
-        }
-        deezerArlPlaylists = await response.json();
-        renderDeezerArlPlaylists();
-        deezerArlPlaylistsLoaded = true;
-
-        // Check for active syncs or downloads and rehydrate UI
-        await checkForActiveProcesses();
-        for (const p of deezerArlPlaylists) {
-            const arlId = `deezer_arl_${p.id}`;
-            try {
-                const syncResp = await fetch(`/api/sync/status/${arlId}`);
-                if (syncResp.ok) {
-                    const syncState = await syncResp.json();
-                    if (syncState.status === 'syncing') {
-                        // Re-attach sync polling and update card UI
-                        if (!spotifyPlaylists.find(sp => sp.id === arlId)) {
-                            spotifyPlaylists.push({ id: arlId, name: p.name, track_count: p.track_count || 0, image_url: p.image_url || '', owner: p.owner || '' });
-                        }
-                        updateCardToSyncing(arlId, syncState.progress?.progress || 0, syncState.progress);
-                        startSyncPolling(arlId);
-                        console.log(`🔄 Rehydrated active sync for Deezer ARL playlist: ${p.name}`);
-                    }
-                }
-            } catch (e) { /* No active sync — normal */ }
-        }
-
-    } catch (error) {
-        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
-        showToast(`Error loading Deezer playlists: ${error.message}`, 'error');
-    } finally {
-        refreshBtn.disabled = false;
-        refreshBtn.textContent = '🔄 Refresh';
-    }
-}
-
-function renderDeezerArlPlaylists() {
-    const container = document.getElementById('deezer-arl-playlist-container');
-    if (deezerArlPlaylists.length === 0) {
-        container.innerHTML = `<div class="playlist-placeholder">No Deezer playlists found.</div>`;
-        return;
-    }
-
-    container.innerHTML = deezerArlPlaylists.map(p => {
-        const arlId = `deezer_arl_${p.id}`;
-        let statusClass = 'status-never-synced';
-        if (p.sync_status && p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
-
-        return `
-        <div class="playlist-card deezer-arl-playlist-card" data-playlist-id="${arlId}">
-            <div class="playlist-card-main">
-                <div class="playlist-card-content">
-                    <div class="playlist-card-name">${escapeHtml(p.name)}</div>
-                    <div class="playlist-card-info">
-                        <span>${p.track_count} tracks</span> •
-                        <span class="playlist-card-status ${statusClass}">${p.sync_status || 'Never Synced'}</span>
-                    </div>
-                    <div class="sync-progress-indicator" id="progress-${arlId}"></div>
-                </div>
-                <div class="playlist-card-actions">
-                    <button id="action-btn-${arlId}" onclick="openDeezerArlPlaylistDetailsModal(event, '${p.id}')">Sync / Download</button>
-                    <button id="progress-btn-${arlId}" class="view-progress-btn hidden" onclick="handleDeezerArlViewProgressClick(event, '${p.id}')">
-                        View Progress
-                    </button>
-                </div>
-            </div>
-        </div>
-        `;
-    }).join('');
-}
-
-function handleDeezerArlViewProgressClick(event, playlistId) {
-    event.stopPropagation();
-    const arlPlaylistId = `deezer_arl_${playlistId}`;
-    const process = activeDownloadProcesses[arlPlaylistId];
-    if (process && process.modalElement) {
-        process.modalElement.style.display = 'flex';
-    }
-}
-
-async function openDeezerArlPlaylistDetailsModal(event, playlistId) {
-    event.stopPropagation();
-
-    const playlist = deezerArlPlaylists.find(p => String(p.id) === String(playlistId));
-    if (!playlist) return;
-
-    const arlPlaylistId = `deezer_arl_${playlistId}`;
-    showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
-
-    try {
-        if (playlistTrackCache[arlPlaylistId]) {
-            const fullPlaylist = { ...playlist, id: arlPlaylistId, tracks: playlistTrackCache[arlPlaylistId] };
-            showDeezerArlPlaylistDetailsModal(fullPlaylist, playlistId);
-        } else {
-            const response = await fetch(`/api/deezer/arl-playlist/${playlistId}`);
-            const fullPlaylist = await response.json();
-            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
-
-            playlistTrackCache[arlPlaylistId] = fullPlaylist.tracks;
-
-            // Auto-mirror
-            mirrorPlaylist('deezer', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
-                track_name: t.name,
-                artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
-                album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
-                duration_ms: t.duration_ms || 0,
-                source_track_id: t.id || ''
-            })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
-
-            showDeezerArlPlaylistDetailsModal({ ...fullPlaylist, id: arlPlaylistId }, playlistId);
-        }
-    } catch (error) {
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        hideLoadingOverlay();
-    }
-}
-
-function showDeezerArlPlaylistDetailsModal(playlist, originalDeezerPlaylistId) {
-    let modal = document.getElementById('deezer-arl-playlist-details-modal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'deezer-arl-playlist-details-modal';
-        modal.className = 'modal-overlay';
-        document.body.appendChild(modal);
-    }
-
-    const playlistId = playlist.id;
-    const activeProcess = activeDownloadProcesses[playlistId];
-    const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
-    const isSyncing = !!activeSyncPollers[playlistId];
-
-    modal.innerHTML = `
-        <div class="modal-container playlist-modal">
-            <div class="playlist-modal-header">
-                <div class="playlist-header-content">
-                    <h2>${escapeHtml(playlist.name)}</h2>
-                    <div class="playlist-quick-info">
-                        <span class="playlist-track-count">${playlist.track_count || (playlist.tracks ? playlist.tracks.length : 0)} tracks</span>
-                        <span class="playlist-owner">by ${escapeHtml(playlist.owner || '')}</span>
-                    </div>
-                    <div class="playlist-modal-sync-status" id="modal-sync-status-${playlistId}" style="display: none;">
-                        <span class="sync-stat total-tracks">♪ <span id="modal-total-${playlistId}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="modal-matched-${playlistId}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="modal-failed-${playlistId}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="modal-percentage-${playlistId}">0</span>%)</span>
-                    </div>
-                </div>
-                <span class="playlist-modal-close" onclick="closeDeezerArlPlaylistDetailsModal()">&times;</span>
-            </div>
-
-            <div class="playlist-modal-body">
-                ${playlist.description ? `<div class="playlist-description">${escapeHtml(playlist.description)}</div>` : ''}
-
-                <div class="playlist-tracks-container">
-                    <div class="playlist-tracks-list">
-                        ${(playlist.tracks || []).map((track, index) => `
-                            <div class="playlist-track-item">
-                                <span class="playlist-track-number">${index + 1}</span>
-                                <div class="playlist-track-info">
-                                    <div class="playlist-track-name">${escapeHtml(track.name)}</div>
-                                    <div class="playlist-track-artists">${formatArtists(track.artists)}</div>
-                                </div>
-                                <div class="playlist-track-duration">${formatDuration(track.duration_ms)}</div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            </div>
-
-            <div class="playlist-modal-footer">
-                <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeDeezerArlPlaylistDetailsModal()">Close</button>
-                <button class="playlist-modal-btn playlist-modal-btn-tertiary" onclick="closeDeezerArlPlaylistDetailsModal(); openDownloadMissingModal('${playlistId}')">
-                    ${hasCompletedProcess ? '📊 View Download Results' : '📥 Download Missing Tracks'}
-                </button>
-                <button id="sync-btn-${playlistId}" class="playlist-modal-btn playlist-modal-btn-primary" onclick="startPlaylistSync('${playlistId}')" ${isSyncing ? 'disabled' : ''} ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>${isSyncing ? '⏳ Syncing...' : 'Sync Playlist'}</button>
-            </div>
-        </div>
-    `;
-
-    // Store playlist in spotifyPlaylists-compatible format for openDownloadMissingModal
-    if (!spotifyPlaylists.find(p => p.id === playlistId)) {
-        spotifyPlaylists.push({
-            id: playlistId,
-            name: playlist.name,
-            track_count: playlist.tracks ? playlist.tracks.length : 0,
-            image_url: playlist.image_url || '',
-            owner: playlist.owner || '',
-        });
-    }
-
-    modal.style.display = 'flex';
-}
-
-function closeDeezerArlPlaylistDetailsModal() {
-    const modal = document.getElementById('deezer-arl-playlist-details-modal');
-    if (modal) modal.style.display = 'none';
-}
-
-function updateDeezerArlPlaylistCardUI(playlistId) {
-    const arlPlaylistId = `deezer_arl_${playlistId}`;
-    const process = activeDownloadProcesses[arlPlaylistId];
-    const progressBtn = document.getElementById(`progress-btn-${arlPlaylistId}`);
-    const actionBtn = document.getElementById(`action-btn-${arlPlaylistId}`);
-    const card = document.querySelector(`.playlist-card[data-playlist-id="${arlPlaylistId}"]`);
-
-    if (!progressBtn || !actionBtn) return;
-
-    if (process && process.status === 'running') {
-        progressBtn.classList.remove('hidden');
-        progressBtn.textContent = 'View Progress';
-        progressBtn.style.backgroundColor = '';
-        actionBtn.textContent = '📥 Downloading...';
-        actionBtn.disabled = true;
-        if (card) card.classList.remove('download-complete');
-    } else if (process && process.status === 'complete') {
-        progressBtn.classList.remove('hidden');
-        progressBtn.textContent = '📋 View Results';
-        progressBtn.style.backgroundColor = '#28a745';
-        progressBtn.style.color = 'white';
-        actionBtn.textContent = '✅ Ready for Review';
-        actionBtn.disabled = false;
-        if (card) card.classList.add('download-complete');
-    } else {
-        progressBtn.classList.add('hidden');
-        progressBtn.style.backgroundColor = '';
-        progressBtn.style.color = '';
-        actionBtn.textContent = 'Sync / Download';
-        actionBtn.disabled = false;
-        if (card) card.classList.remove('download-complete');
-    }
-}
-
-
-// ===================================================================
-// DEEZER PLAYLIST MANAGEMENT (URL-input like YouTube, reuses YouTube modal)
-// ===================================================================
-
-async function loadDeezerPlaylist() {
-    const urlInput = document.getElementById('deezer-url-input');
-    if (!urlInput) return;
-
-    const rawUrl = urlInput.value.trim();
-    if (!rawUrl) {
-        showToast('Please paste a Deezer playlist URL', 'error');
-        return;
-    }
-
-    // Extract playlist ID from URL
-    // Supports: deezer.com/playlist/{id}, deezer.com/{locale}/playlist/{id}, or raw numeric ID
-    let playlistId = null;
-    const urlMatch = rawUrl.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
-    if (urlMatch) {
-        playlistId = urlMatch[1];
-    } else if (/^\d+$/.test(rawUrl)) {
-        playlistId = rawUrl;
-    }
-
-    if (!playlistId) {
-        showToast('Invalid Deezer playlist URL. Expected format: deezer.com/playlist/{id}', 'error');
-        return;
-    }
-
-    // Check if already loaded
-    if (deezerPlaylists.find(p => String(p.id) === String(playlistId))) {
-        showToast('This playlist is already loaded', 'info');
-        urlInput.value = '';
-        return;
-    }
-
-    const parseBtn = document.getElementById('deezer-parse-btn');
-    if (parseBtn) {
-        parseBtn.disabled = true;
-        parseBtn.textContent = 'Loading...';
-    }
-
-    try {
-        const response = await fetch(`/api/deezer/playlist/${playlistId}`);
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Deezer playlist');
-        }
-
-        const playlist = await response.json();
-        deezerPlaylists.push(playlist);
-
-        // Auto-mirror Deezer playlist
-        if (playlist.tracks && playlist.tracks.length > 0) {
-            mirrorPlaylist('deezer', playlist.id, playlist.name, playlist.tracks.map(t => ({
-                track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
-                album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
-                source_track_id: t.id || ''
-            })), { owner: playlist.owner, image_url: playlist.image_url, description: rawUrl });
-        }
-
-        // Save to URL history
-        saveUrlHistory('deezer', rawUrl, playlist.name);
-
-        renderDeezerPlaylists();
-        await loadDeezerPlaylistStatesFromBackend();
-
-        urlInput.value = '';
-        showToast(`Deezer playlist loaded: ${playlist.name} (${playlist.track_count || playlist.tracks.length} tracks)`, 'success');
-        console.log(`🎵 Loaded Deezer playlist: ${playlist.name}`);
-
-    } catch (error) {
-        showToast(`Error loading Deezer playlist: ${error.message}`, 'error');
-    } finally {
-        if (parseBtn) {
-            parseBtn.disabled = false;
-            parseBtn.textContent = 'Load Playlist';
-        }
-    }
-}
-
-function renderDeezerPlaylists() {
-    const container = document.getElementById('deezer-playlist-container');
-    if (deezerPlaylists.length === 0) {
-        container.innerHTML = `<div class="playlist-placeholder">Paste a Deezer playlist URL above to get started.</div>`;
-        return;
-    }
-
-    container.innerHTML = deezerPlaylists.map(p => {
-        if (!deezerPlaylistStates[p.id]) {
-            deezerPlaylistStates[p.id] = {
-                phase: 'fresh',
-                playlist: p
-            };
-        }
-        return createDeezerCard(p);
-    }).join('');
-
-    // Add click handlers to cards
-    deezerPlaylists.forEach(p => {
-        const card = document.getElementById(`deezer-card-${p.id}`);
-        if (card) {
-            card.addEventListener('click', () => handleDeezerCardClick(p.id));
-        }
-    });
-}
-
-function createDeezerCard(playlist) {
-    const state = deezerPlaylistStates[playlist.id];
-    const phase = state.phase;
-
-    let buttonText = getActionButtonText(phase);
-    let phaseText = getPhaseText(phase);
-    let phaseColor = getPhaseColor(phase);
-
-    return `
-        <div class="youtube-playlist-card deezer-playlist-card" id="deezer-card-${playlist.id}">
-            <div class="playlist-card-icon">🎵</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">${playlist.track_count || playlist.tracks.length} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                <!-- Progress will be dynamically updated based on phase -->
-            </div>
-            <button class="playlist-card-action-btn">${buttonText}</button>
-        </div>
-    `;
-}
-
-async function handleDeezerCardClick(playlistId) {
-    const state = deezerPlaylistStates[playlistId];
-    if (!state) {
-        console.error(`No state found for Deezer playlist: ${playlistId}`);
-        showToast('Playlist state not found - try refreshing the page', 'error');
-        return;
-    }
-
-    if (!state.playlist) {
-        console.error(`No playlist data found for Deezer playlist: ${playlistId}`);
-        showToast('Playlist data missing - try refreshing the page', 'error');
-        return;
-    }
-
-    if (!state.phase) {
-        state.phase = 'fresh';
-    }
-
-    console.log(`🎵 [Card Click] Deezer card clicked: ${playlistId}, Phase: ${state.phase}`);
-
-    if (state.phase === 'fresh') {
-        console.log(`🎵 Using pre-loaded Deezer playlist data for: ${state.playlist.name}`);
-        openDeezerDiscoveryModal(playlistId, state.playlist);
-
-    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
-        console.log(`🎵 [Card Click] Opening Deezer discovery modal for ${state.phase} phase`);
-
-        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
-            try {
-                const stateResponse = await fetch(`/api/deezer/state/${playlistId}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    if (fullState.discovery_results) {
-                        state.discovery_results = fullState.discovery_results;
-                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
-                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
-                        deezerPlaylistStates[playlistId] = { ...deezerPlaylistStates[playlistId], ...state };
-                        console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
-                    }
-                }
-            } catch (error) {
-                console.error(`Failed to fetch discovery results from backend: ${error}`);
-            }
-        }
-
-        openDeezerDiscoveryModal(playlistId, state.playlist);
-    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
-        if (state.convertedSpotifyPlaylistId) {
-            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
-                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
-                if (process.modalElement) {
-                    process.modalElement.style.display = 'flex';
-                } else {
-                    await rehydrateDeezerDownloadModal(playlistId, state);
-                }
-            } else {
-                await rehydrateDeezerDownloadModal(playlistId, state);
-            }
-        } else {
-            if (state.discovery_results && state.discovery_results.length > 0) {
-                openDeezerDiscoveryModal(playlistId, state.playlist);
-            } else {
-                showToast('Unable to open download modal - missing playlist data', 'error');
-            }
-        }
-    }
-}
-
-async function rehydrateDeezerDownloadModal(playlistId, state) {
-    try {
-        if (!state || !state.playlist) {
-            showToast('Cannot open download modal - invalid playlist data', 'error');
-            return;
-        }
-
-        const spotifyTracks = state.discovery_results
-            ?.filter(result => result.spotify_data)
-            ?.map(result => result.spotify_data) || [];
-
-        if (spotifyTracks.length > 0) {
-            const virtualPlaylistId = state.convertedSpotifyPlaylistId || `deezer_${playlistId}`;
-            await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
-
-            if (state.download_process_id) {
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = state.download_process_id;
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-                    startModalDownloadPolling(virtualPlaylistId);
-                }
-            }
-        } else {
-            showToast('No Spotify tracks found for download', 'error');
-        }
-    } catch (error) {
-        console.error(`Error rehydrating Deezer download modal: ${error}`);
-    }
-}
-
-async function openDeezerDiscoveryModal(playlistId, playlistData) {
-    console.log(`🎵 Opening Deezer discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
-    const fakeUrlHash = `deezer_${playlistId}`;
-
-    const deezerCardState = deezerPlaylistStates[playlistId];
-    const isAlreadyDiscovered = deezerCardState && (deezerCardState.phase === 'discovered' || deezerCardState.phase === 'syncing' || deezerCardState.phase === 'sync_complete');
-    const isCurrentlyDiscovering = deezerCardState && deezerCardState.phase === 'discovering';
-
-    let transformedResults = [];
-    let actualMatches = 0;
-    if (isAlreadyDiscovered && deezerCardState.discovery_results) {
-        transformedResults = deezerCardState.discovery_results.map((result, index) => {
-            const isFound = result.status === 'found' ||
-                result.status === '✅ Found' ||
-                result.status_class === 'found' ||
-                result.spotify_data ||
-                result.spotify_track;
-            if (isFound) actualMatches++;
-
-            return {
-                index: index,
-                yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
-                yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                status: isFound ? '✅ Found' : '❌ Not Found',
-                status_class: isFound ? 'found' : 'not-found',
-                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                    (Array.isArray(result.spotify_data.artists)
-                        ? result.spotify_data.artists
-                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                            .filter(Boolean)
-                            .join(', ') || '-'
-                        : result.spotify_data.artists)
-                    : (result.spotify_artist || '-'),
-                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                spotify_data: result.spotify_data,
-                spotify_id: result.spotify_id,
-                manual_match: result.manual_match
-            };
-        });
-        console.log(`🎵 Deezer modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
-    }
-
-    const modalPhase = deezerCardState ? deezerCardState.phase : 'fresh';
-    youtubePlaylistStates[fakeUrlHash] = {
-        phase: modalPhase,
-        playlist: {
-            name: playlistData.name,
-            tracks: playlistData.tracks
-        },
-        is_deezer_playlist: true,
-        deezer_playlist_id: playlistId,
-        discovery_progress: isAlreadyDiscovered ? 100 : 0,
-        spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
-        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
-        spotify_total: playlistData.tracks.length,
-        discovery_results: transformedResults,
-        discoveryResults: transformedResults,
-        discoveryProgress: isAlreadyDiscovered ? 100 : 0
-    };
-
-    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
-        try {
-            console.log(`🔍 Starting Deezer discovery for: ${playlistData.name}`);
-
-            const response = await fetch(`/api/deezer/discovery/start/${playlistId}`, {
-                method: 'POST'
-            });
-
-            const result = await response.json();
-
-            if (result.error) {
-                console.error('Error starting Deezer discovery:', result.error);
-                showToast(`Error starting discovery: ${result.error}`, 'error');
-                return;
-            }
-
-            console.log('Deezer discovery started, beginning polling...');
-
-            deezerPlaylistStates[playlistId].phase = 'discovering';
-            updateDeezerCardPhase(playlistId, 'discovering');
-            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
-            startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
-
-        } catch (error) {
-            console.error('Error starting Deezer discovery:', error);
-            showToast(`Error starting discovery: ${error.message}`, 'error');
-        }
-    } else if (isCurrentlyDiscovering) {
-        console.log(`🔄 Resuming Deezer discovery polling for: ${playlistData.name}`);
-        startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
-    } else if (deezerCardState && deezerCardState.phase === 'syncing') {
-        console.log(`🔄 Resuming Deezer sync polling for: ${playlistData.name}`);
-        startDeezerSyncPolling(fakeUrlHash);
-    } else {
-        console.log('Using existing results - no need to re-discover');
-    }
-
-    openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startDeezerDiscoveryPolling(fakeUrlHash, playlistId) {
-    console.log(`🔄 Starting Deezer discovery polling for: ${playlistId}`);
-
-    if (activeYouTubePollers[fakeUrlHash]) {
-        clearInterval(activeYouTubePollers[fakeUrlHash]);
-    }
-
-    // WebSocket subscription
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [playlistId] });
-        _discoveryProgressCallbacks[playlistId] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
-                return;
-            }
-            const transformed = {
-                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
-                complete: data.complete,
-                results: (data.results || []).map((r, i) => {
-                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
-                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
-                    return {
-                        index: i, yt_track: r.deezer_track ? r.deezer_track.name : 'Unknown',
-                        yt_artist: r.deezer_track ? (r.deezer_track.artists ? r.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
-                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
-                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
-                        spotify_artist: r.spotify_data && r.spotify_data.artists
-                            ? (Array.isArray(r.spotify_data.artists)
-                                ? (r.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : r.spotify_data.artists)
-                            : (r.spotify_artist || '-'),
-                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
-                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
-                        wing_it_fallback: isWingIt
-                    };
-                })
-            };
-            const st = youtubePlaylistStates[fakeUrlHash];
-            if (st) {
-                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
-                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
-                st.discovery_results = data.results; st.discoveryResults = transformed.results;
-                st.phase = data.phase;
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
-            }
-            if (deezerPlaylistStates[playlistId]) {
-                deezerPlaylistStates[playlistId].phase = data.phase;
-                deezerPlaylistStates[playlistId].discovery_results = data.results;
-                deezerPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
-                deezerPlaylistStates[playlistId].discovery_progress = data.progress;
-                updateDeezerCardPhase(playlistId, data.phase);
-            }
-            updateDeezerCardProgress(playlistId, data);
-            if (data.complete) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        if (socketConnected) return;
-        try {
-            const response = await fetch(`/api/deezer/discovery/status/${playlistId}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('Error polling Deezer discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-                return;
-            }
-
-            const transformedStatus = {
-                progress: status.progress,
-                spotify_matches: status.spotify_matches,
-                spotify_total: status.spotify_total,
-                complete: status.complete,
-                results: status.results.map((result, index) => {
-                    const isFound = result.status === 'found' ||
-                        result.status === '✅ Found' ||
-                        result.status_class === 'found' ||
-                        result.spotify_data ||
-                        result.spotify_track;
-
-                    return {
-                        index: index,
-                        yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
-                        yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isFound ? '✅ Found' : '❌ Not Found',
-                        status_class: isFound ? 'found' : 'not-found',
-                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                        spotify_artist: result.spotify_data && result.spotify_data.artists
-                            ? (Array.isArray(result.spotify_data.artists)
-                                ? (result.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : result.spotify_data.artists)
-                            : (result.spotify_artist || '-'),
-                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                        spotify_data: result.spotify_data,
-                        spotify_id: result.spotify_id,
-                        manual_match: result.manual_match
-                    };
-                })
-            };
-
-            const state = youtubePlaylistStates[fakeUrlHash];
-            if (state) {
-                state.discovery_progress = status.progress;
-                state.discoveryProgress = status.progress;
-                state.spotify_matches = status.spotify_matches;
-                state.spotifyMatches = status.spotify_matches;
-                state.discovery_results = status.results;
-                state.discoveryResults = transformedStatus.results;
-                state.phase = status.phase;
-
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
-                if (deezerPlaylistStates[playlistId]) {
-                    deezerPlaylistStates[playlistId].phase = status.phase;
-                    deezerPlaylistStates[playlistId].discovery_results = status.results;
-                    deezerPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
-                    deezerPlaylistStates[playlistId].discovery_progress = status.progress;
-                    updateDeezerCardPhase(playlistId, status.phase);
-                }
-
-                updateDeezerCardProgress(playlistId, status);
-
-                console.log(`🔄 Deezer discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
-            }
-
-            if (status.complete) {
-                console.log(`Deezer discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-            }
-
-        } catch (error) {
-            console.error('Error polling Deezer discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[fakeUrlHash];
-        }
-    }, 1000);
-
-    activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadDeezerPlaylistStatesFromBackend() {
-    try {
-        console.log('🎵 Loading Deezer playlist states from backend...');
-
-        const response = await fetch('/api/deezer/playlists/states');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Deezer playlist states');
-        }
-
-        const data = await response.json();
-        const states = data.states || [];
-
-        console.log(`🎵 Found ${states.length} stored Deezer playlist states in backend`);
-
-        if (states.length === 0) return;
-
-        for (const stateInfo of states) {
-            await applyDeezerPlaylistState(stateInfo);
-        }
-
-        // Rehydrate download modals for Deezer playlists in downloading/download_complete phases
-        for (const stateInfo of states) {
-            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
-                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
-                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
-                if (!activeDownloadProcesses[convertedPlaylistId]) {
-                    console.log(`Rehydrating download modal for Deezer playlist: ${stateInfo.playlist_id}`);
-                    try {
-                        const playlistData = deezerPlaylists.find(p => String(p.id) === String(stateInfo.playlist_id));
-                        if (!playlistData) continue;
-
-                        const spotifyTracks = deezerPlaylistStates[stateInfo.playlist_id]?.discovery_results
-                            ?.filter(result => result.spotify_data)
-                            ?.map(result => result.spotify_data) || [];
-
-                        if (spotifyTracks.length > 0) {
-                            await openDownloadMissingModalForTidal(
-                                convertedPlaylistId,
-                                playlistData.name,
-                                spotifyTracks
-                            );
-
-                            const process = activeDownloadProcesses[convertedPlaylistId];
-                            if (process) {
-                                process.status = 'running';
-                                process.batchId = stateInfo.download_process_id;
-                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                                if (beginBtn) beginBtn.style.display = 'none';
-                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-                                startModalDownloadPolling(convertedPlaylistId);
-                            }
-                        }
-                    } catch (error) {
-                        console.error(`Error rehydrating Deezer download modal for ${stateInfo.playlist_id}:`, error);
-                    }
-                }
-            }
-        }
-
-        console.log('Deezer playlist states loaded and applied');
-
-    } catch (error) {
-        console.error('Error loading Deezer playlist states:', error);
-    }
-}
-
-async function applyDeezerPlaylistState(stateInfo) {
-    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
-    try {
-        console.log(`🎵 Applying saved state for Deezer playlist: ${playlist_id}, Phase: ${phase}`);
-
-        const playlistData = deezerPlaylists.find(p => String(p.id) === String(playlist_id));
-        if (!playlistData) {
-            console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
-            return;
-        }
-
-        if (!deezerPlaylistStates[playlist_id]) {
-            deezerPlaylistStates[playlist_id] = {
-                playlist: playlistData,
-                phase: 'fresh'
-            };
-        }
-
-        deezerPlaylistStates[playlist_id].phase = phase;
-        deezerPlaylistStates[playlist_id].discovery_progress = discovery_progress;
-        deezerPlaylistStates[playlist_id].spotify_matches = spotify_matches;
-        deezerPlaylistStates[playlist_id].discovery_results = discovery_results;
-        deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
-        deezerPlaylistStates[playlist_id].download_process_id = download_process_id;
-        deezerPlaylistStates[playlist_id].playlist = playlistData;
-
-        if (phase !== 'fresh' && phase !== 'discovering') {
-            try {
-                const stateResponse = await fetch(`/api/deezer/state/${playlist_id}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    if (fullState.discovery_results && deezerPlaylistStates[playlist_id]) {
-                        deezerPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
-                        deezerPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
-                        deezerPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
-                        deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
-                        deezerPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
-                    }
-                }
-            } catch (error) {
-                console.warn(`Error fetching full discovery results for Deezer playlist ${playlistData.name}:`, error.message);
-            }
-        }
-
-        updateDeezerCardPhase(playlist_id, phase);
-
-        if (phase === 'discovered' && deezerPlaylistStates[playlist_id]) {
-            const progressInfo = {
-                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
-                spotify_matches: deezerPlaylistStates[playlist_id].spotify_matches || 0
-            };
-            updateDeezerCardProgress(playlist_id, progressInfo);
-        }
-
-        if (phase === 'discovering') {
-            const fakeUrlHash = `deezer_${playlist_id}`;
-            startDeezerDiscoveryPolling(fakeUrlHash, playlist_id);
-        } else if (phase === 'syncing') {
-            const fakeUrlHash = `deezer_${playlist_id}`;
-            startDeezerSyncPolling(fakeUrlHash);
-        }
-
-    } catch (error) {
-        console.error(`Error applying Deezer playlist state for ${playlist_id}:`, error);
-    }
-}
-
-function updateDeezerCardPhase(playlistId, phase) {
-    const state = deezerPlaylistStates[playlistId];
-    if (!state) return;
-
-    state.phase = phase;
-
-    const card = document.getElementById(`deezer-card-${playlistId}`);
-    if (card) {
-        const newCardHtml = createDeezerCard(state.playlist);
-        card.outerHTML = newCardHtml;
-
-        const newCard = document.getElementById(`deezer-card-${playlistId}`);
-        if (newCard) {
-            newCard.addEventListener('click', () => handleDeezerCardClick(playlistId));
-        }
-
-        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
-            setTimeout(() => {
-                updateDeezerCardSyncProgress(playlistId, state.lastSyncProgress);
-            }, 0);
-        }
-    }
-}
-
-function updateDeezerCardProgress(playlistId, progress) {
-    const state = deezerPlaylistStates[playlistId];
-    if (!state) return;
-
-    const card = document.getElementById(`deezer-card-${playlistId}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-    if (!progressElement) return;
-
-    progressElement.classList.remove('hidden');
-
-    const total = progress.spotify_total || 0;
-    const matches = progress.spotify_matches || 0;
-
-    if (total > 0) {
-        progressElement.innerHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat matched-tracks">✓ ${matches}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-            </div>
-        `;
-    }
-}
-
-// ===============================
-// DEEZER SYNC FUNCTIONALITY
-// ===============================
-
-async function startDeezerPlaylistSync(urlHash) {
-    try {
-        console.log('🎵 Starting Deezer playlist sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_deezer_playlist) {
-            console.error('Invalid Deezer playlist state for sync');
-            return;
-        }
-
-        const playlistId = state.deezer_playlist_id;
-        const response = await fetch(`/api/deezer/sync/start/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting sync: ${result.error}`, 'error');
-            return;
-        }
-
-        const syncPlaylistId = result.sync_playlist_id;
-        if (state) state.syncPlaylistId = syncPlaylistId;
-
-        updateDeezerCardPhase(playlistId, 'syncing');
-        updateDeezerModalButtons(urlHash, 'syncing');
-
-        startDeezerSyncPolling(urlHash, syncPlaylistId);
-
-        showToast('Deezer playlist sync started!', 'success');
-
-    } catch (error) {
-        console.error('Error starting Deezer sync:', error);
-        showToast(`Error starting sync: ${error.message}`, 'error');
-    }
-}
-
-function startDeezerSyncPolling(urlHash, syncPlaylistId) {
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    const state = youtubePlaylistStates[urlHash];
-    const playlistId = state.deezer_playlist_id;
-
-    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
-    // WebSocket subscription
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateDeezerCardSyncProgress(playlistId, progress);
-            updateDeezerModalSyncProgress(urlHash, progress);
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateDeezerCardPhase(playlistId, 'sync_complete');
-                updateDeezerModalButtons(urlHash, 'sync_complete');
-                showToast('Deezer playlist sync complete!', 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateDeezerCardPhase(playlistId, 'discovered');
-                updateDeezerModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    const pollFunction = async () => {
-        if (socketConnected) return;
-        try {
-            const response = await fetch(`/api/deezer/sync/status/${playlistId}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('Error polling Deezer sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            updateDeezerCardSyncProgress(playlistId, status.progress);
-            updateDeezerModalSyncProgress(urlHash, status.progress);
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateDeezerCardPhase(playlistId, 'sync_complete');
-                updateDeezerModalButtons(urlHash, 'sync_complete');
-                showToast('Deezer playlist sync complete!', 'success');
-            } else if (status.sync_status === 'error') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateDeezerCardPhase(playlistId, 'discovered');
-                updateDeezerModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            console.error('Error polling Deezer sync:', error);
-            if (activeYouTubePollers[urlHash]) {
-                clearInterval(activeYouTubePollers[urlHash]);
-                delete activeYouTubePollers[urlHash];
-            }
-        }
-    };
-
-    if (!socketConnected) pollFunction();
-
-    const pollInterval = setInterval(pollFunction, 1000);
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelDeezerSync(urlHash) {
-    try {
-        console.log('Cancelling Deezer sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_deezer_playlist) {
-            console.error('Invalid Deezer playlist state');
-            return;
-        }
-
-        const playlistId = state.deezer_playlist_id;
-        const response = await fetch(`/api/deezer/sync/cancel/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error cancelling sync: ${result.error}`, 'error');
-            return;
-        }
-
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        const syncId = state && state.syncPlaylistId;
-        if (syncId && _syncProgressCallbacks[syncId]) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
-            delete _syncProgressCallbacks[syncId];
-        }
-
-        updateDeezerCardPhase(playlistId, 'discovered');
-        updateDeezerModalButtons(urlHash, 'discovered');
-
-        showToast('Deezer sync cancelled', 'info');
-
-    } catch (error) {
-        console.error('Error cancelling Deezer sync:', error);
-        showToast(`Error cancelling sync: ${error.message}`, 'error');
-    }
-}
-
-function updateDeezerCardSyncProgress(playlistId, progress) {
-    const state = deezerPlaylistStates[playlistId];
-    if (!state || !state.playlist || !progress) return;
-
-    state.lastSyncProgress = progress;
-
-    const card = document.getElementById(`deezer-card-${playlistId}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    let statusCounterHTML = '';
-    if (progress && progress.total_tracks > 0) {
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const processed = matched + failed;
-        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-        statusCounterHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat matched-tracks">✓ ${matched}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat failed-tracks">✗ ${failed}</span>
-                <span class="sync-stat percentage">(${percentage}%)</span>
-            </div>
-        `;
-    }
-
-    if (statusCounterHTML) {
-        progressElement.innerHTML = statusCounterHTML;
-    }
-}
-
-function updateDeezerModalSyncProgress(urlHash, progress) {
-    const statusDisplay = document.getElementById(`deezer-sync-status-${urlHash}`);
-    if (!statusDisplay || !progress) return;
-
-    const totalEl = document.getElementById(`deezer-total-${urlHash}`);
-    const matchedEl = document.getElementById(`deezer-matched-${urlHash}`);
-    const failedEl = document.getElementById(`deezer-failed-${urlHash}`);
-    const percentageEl = document.getElementById(`deezer-percentage-${urlHash}`);
-
-    const total = progress.total_tracks || 0;
-    const matched = progress.matched_tracks || 0;
-    const failed = progress.failed_tracks || 0;
-
-    if (totalEl) totalEl.textContent = total;
-    if (matchedEl) matchedEl.textContent = matched;
-    if (failedEl) failedEl.textContent = failed;
-
-    if (total > 0) {
-        const processed = matched + failed;
-        const percentage = Math.round((processed / total) * 100);
-        if (percentageEl) percentageEl.textContent = percentage;
-    }
-}
-
-function updateDeezerModalButtons(urlHash, phase) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (!modal) return;
-
-    const footerLeft = modal.querySelector('.modal-footer-left');
-    if (footerLeft) {
-        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
-    }
-}
-
-async function startDeezerDownloadMissing(urlHash) {
-    try {
-        console.log('🔍 Starting download missing tracks for Deezer playlist:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_deezer_playlist) {
-            console.error('Invalid Deezer playlist state for download');
-            return;
-        }
-
-        const discoveryResults = state.discoveryResults || state.discovery_results;
-
-        if (!discoveryResults) {
-            showToast('No discovery results available for download', 'error');
-            return;
-        }
-
-        const spotifyTracks = [];
-        for (const result of discoveryResults) {
-            if (result.spotify_data) {
-                spotifyTracks.push(result.spotify_data);
-            } else if (result.spotify_track && result.status_class === 'found') {
-                const albumData = result.spotify_album || 'Unknown Album';
-                const albumObject = typeof albumData === 'object' && albumData !== null
-                    ? albumData
-                    : {
-                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
-                        album_type: 'album',
-                        images: []
-                    };
-
-                spotifyTracks.push({
-                    id: result.spotify_id || 'unknown',
-                    name: result.spotify_track || 'Unknown Track',
-                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
-                    album: albumObject,
-                    duration_ms: 0
-                });
-            }
-        }
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        const virtualPlaylistId = `deezer_${state.deezer_playlist_id}`;
-        const playlistName = state.playlist.name;
-
-        state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
-        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (discoveryModal) {
-            discoveryModal.classList.add('hidden');
-        }
-
-        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
-    } catch (error) {
-        console.error('Error starting download missing tracks:', error);
-        showToast(`Error starting downloads: ${error.message}`, 'error');
-    }
-}
-
-
-// ===============================
-// SYNC PAGE FUNCTIONALITY (REDESIGNED)
-// ===============================
-
-function initializeSyncPage() {
-    // Logic for tab switching
-    const tabButtons = document.querySelectorAll('.sync-tab-button');
-    const syncSidebar = document.querySelector('.sync-sidebar');
-    const syncContentArea = document.querySelector('.sync-content-area');
-
-    tabButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const tabId = button.dataset.tab;
-            const previousActiveTab = document.querySelector('.sync-tab-button.active');
-            const previousTabId = previousActiveTab ? previousActiveTab.dataset.tab : null;
-
-            // Update button active state
-            tabButtons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-
-            // Update content active state
-            document.querySelectorAll('.sync-tab-content').forEach(content => {
-                content.classList.remove('active');
-            });
-            document.getElementById(`${tabId}-tab-content`).classList.add('active');
-
-            // Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden)
-            if (syncSidebar && syncContentArea) {
-                const isMobile = window.innerWidth <= 1300;
-                // Sidebar always hidden by default — shown only when sync is active
-                syncSidebar.style.display = 'none';
-                syncContentArea.style.gridTemplateColumns = '1fr';
-            }
-
-            // Auto-load Deezer ARL playlists on first tab activation
-            if (tabId === 'deezer' && !deezerArlPlaylistsLoaded) {
-                // Check ARL status first
-                fetch('/api/deezer/arl-status').then(r => r.json()).then(data => {
-                    const container = document.getElementById('deezer-arl-playlist-container');
-                    if (data.authenticated) {
-                        loadDeezerArlPlaylists();
-                    } else if (container) {
-                        container.innerHTML = `<div class="playlist-placeholder">Deezer ARL not configured. Add your ARL token in Settings &gt; Downloads to see your playlists here.</div>`;
-                    }
-                }).catch(() => { });
-            }
-
-            // Auto-load mirrored playlists on first tab activation
-            if (tabId === 'mirrored' && !mirroredPlaylistsLoaded) {
-                loadMirroredPlaylists();
-            }
-
-            // Auto-load server playlists on first tab activation
-            if (tabId === 'server' && !window._serverPlaylistsLoaded) {
-                window._serverPlaylistsLoaded = true;
-                loadServerPlaylists();
-            }
-
-            if (previousTabId === 'beatport' && tabId !== 'beatport') {
-                cleanupBeatportContent();
-            }
-
-            // Lazily load Beatport content the first time the Beatport tab is opened
-            if (tabId === 'beatport') {
-                ensureBeatportContentLoaded();
-            }
-        });
-    });
-
-    // If the Beatport tab is already active when Sync initializes, load it now.
-    const activeBeatportTab = document.querySelector('.sync-tab-button.active[data-tab="beatport"]');
-    if (activeBeatportTab) {
-        ensureBeatportContentLoaded();
-    }
-
-    // Logic for the Spotify refresh button
-    const refreshBtn = document.getElementById('spotify-refresh-btn');
-    if (refreshBtn) {
-        // Remove any old listeners to be safe, then add the new one
-        refreshBtn.removeEventListener('click', loadSpotifyPlaylists);
-        refreshBtn.addEventListener('click', loadSpotifyPlaylists);
-    }
-
-    // Logic for the Tidal refresh button
-    const tidalRefreshBtn = document.getElementById('tidal-refresh-btn');
-    if (tidalRefreshBtn) {
-        tidalRefreshBtn.removeEventListener('click', loadTidalPlaylists);
-        tidalRefreshBtn.addEventListener('click', loadTidalPlaylists);
-    }
-
-    // Logic for the Deezer ARL refresh button
-    const deezerArlRefreshBtn = document.getElementById('deezer-arl-refresh-btn');
-    if (deezerArlRefreshBtn) {
-        deezerArlRefreshBtn.removeEventListener('click', loadDeezerArlPlaylists);
-        deezerArlRefreshBtn.addEventListener('click', loadDeezerArlPlaylists);
-    }
-
-    // Logic for the Deezer Link parse button
-    const deezerParseBtn = document.getElementById('deezer-parse-btn');
-    if (deezerParseBtn) {
-        deezerParseBtn.addEventListener('click', loadDeezerPlaylist);
-    }
-    // Also allow Enter key in the Deezer input
-    const deezerUrlInput = document.getElementById('deezer-url-input');
-    if (deezerUrlInput) {
-        deezerUrlInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') loadDeezerPlaylist();
-        });
-    }
-
-    // Logic for the Mirrored refresh button
-    const mirroredRefreshBtn = document.getElementById('mirrored-refresh-btn');
-    if (mirroredRefreshBtn) {
-        mirroredRefreshBtn.addEventListener('click', loadMirroredPlaylists);
-    }
-
-    // Initialize import file tab
-    _initImportFileTab();
-
-    // Logic for the Beatport clear button
-    const beatportClearBtn = document.getElementById('beatport-clear-btn');
-    if (beatportClearBtn) {
-        beatportClearBtn.addEventListener('click', clearBeatportPlaylists);
-        // Set initial clear button state
-        updateBeatportClearButtonState();
-    }
-
-    // Logic for Beatport nested tabs
-    const beatportTabButtons = document.querySelectorAll('.beatport-tab-button');
-    beatportTabButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const tabId = button.dataset.beatportTab;
-
-            // Update button active state
-            beatportTabButtons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-
-            // Update content active state
-            document.querySelectorAll('.beatport-tab-content').forEach(content => {
-                content.classList.remove('active');
-            });
-            document.getElementById(`beatport-${tabId}-content`).classList.add('active');
-
-            // Initialize rebuild content lazily when the rebuild tab is selected
-            if (tabId === 'rebuild') {
-                ensureBeatportContentLoaded();
-            }
-        });
-    });
-
-    // Logic for Homepage Genre Explorer card
-    const genreExplorerCard = document.querySelector('[data-action="show-genres"]');
-    if (genreExplorerCard) {
-        genreExplorerCard.addEventListener('click', () => {
-            console.log('🎵 Genre Explorer card clicked');
-            showBeatportSubView('genres');
-            loadBeatportGenres();
-        });
-    }
-
-    // Setup homepage chart handlers (following genre page pattern to prevent duplicates)
-    setupHomepageChartTypeHandlers();
-
-    // Load homepage chart collections automatically (disabled since Browse Charts tab is hidden)
-    // loadDJChartsInline();
-    // loadFeaturedChartsInline();
-
-    // Logic for Beatport breadcrumb back buttons
-    const beatportBackButtons = document.querySelectorAll('.breadcrumb-back');
-    beatportBackButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            // Handle different back button types
-            if (button.id === 'genre-detail-back') {
-                showBeatportGenresView();
-            } else if (button.id === 'genre-charts-list-back') {
-                showBeatportGenreDetailViewFromBack();
-            } else {
-                showBeatportMainView();
-            }
-        });
-    });
-
-    // Logic for Beatport chart items
-    const beatportChartItems = document.querySelectorAll('.beatport-chart-item');
-    beatportChartItems.forEach(item => {
-        item.addEventListener('click', () => {
-            const chartType = item.dataset.chartType;
-            const chartId = item.dataset.chartId;
-            const chartName = item.dataset.chartName;
-            const chartEndpoint = item.dataset.chartEndpoint;
-            handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint);
-        });
-    });
-
-    // Logic for Beatport genre items
-    const beatportGenreItems = document.querySelectorAll('.beatport-genre-item');
-    beatportGenreItems.forEach(item => {
-        item.addEventListener('click', () => {
-            const genreSlug = item.dataset.genreSlug;
-            const genreId = item.dataset.genreId;
-            handleBeatportGenreClick(genreSlug, genreId);
-        });
-    });
-
-    // Logic for Rebuild page Top 10 containers - Beatport Top 10
-    const beatportTop10Container = document.getElementById('beatport-top10-list');
-    if (beatportTop10Container) {
-        beatportTop10Container.addEventListener('click', () => {
-            console.log('🎵 Beatport Top 10 container clicked on rebuild page');
-            handleRebuildBeatportTop10Click();
-        });
-    }
-
-    // Logic for Rebuild page Top 10 containers - Hype Top 10
-    const beatportHype10Container = document.getElementById('beatport-hype10-list');
-    if (beatportHype10Container) {
-        beatportHype10Container.addEventListener('click', () => {
-            console.log('🔥 Hype Top 10 container clicked on rebuild page');
-            handleRebuildHypeTop10Click();
-        });
-    }
-
-    // Logic for Rebuild page Hero Slider - individual slide click handlers will be set up in populateBeatportSlider
-    // Container-level click handler removed to allow individual slide clicks like top 10 releases
-
-    // Logic for the Start Sync button
-    const startSyncBtn = document.getElementById('start-sync-btn');
-    if (startSyncBtn) {
-        startSyncBtn.addEventListener('click', startSequentialSync);
-    }
-
-    // Logic for the YouTube parse button
-    const youtubeParseBtn = document.getElementById('youtube-parse-btn');
-    if (youtubeParseBtn) {
-        youtubeParseBtn.addEventListener('click', parseYouTubePlaylist);
-    }
-
-    // Logic for YouTube URL input (Enter key support)
-    const youtubeUrlInput = document.getElementById('youtube-url-input');
-    if (youtubeUrlInput) {
-        youtubeUrlInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                parseYouTubePlaylist();
-            }
-        });
-    }
-
-    // Logic for Spotify Public parse button
-    const spotifyPublicParseBtn = document.getElementById('spotify-public-parse-btn');
-    if (spotifyPublicParseBtn) {
-        spotifyPublicParseBtn.addEventListener('click', parseSpotifyPublicUrl);
-    }
-
-    // Logic for Spotify Public URL input (Enter key support)
-    const spotifyPublicUrlInput = document.getElementById('spotify-public-url-input');
-    if (spotifyPublicUrlInput) {
-        spotifyPublicUrlInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                parseSpotifyPublicUrl();
-            }
-        });
-    }
-
-    // Logic for Beatport Top 100 button
-    const beatportTop100Btn = document.getElementById('beatport-top100-btn');
-    if (beatportTop100Btn) {
-        beatportTop100Btn.addEventListener('click', handleBeatportTop100Click);
-    }
-
-    // Logic for Hype Top 100 button
-    const hypeTop100Btn = document.getElementById('hype-top100-btn');
-    if (hypeTop100Btn) {
-        hypeTop100Btn.addEventListener('click', handleHypeTop100Click);
-    }
-
-    // Initialize live log viewer
-    initializeLiveLogViewer();
-}
-
-
-// --- Event Handlers ---
-
-// --- Find and REPLACE the existing handleDbUpdateButtonClick function ---
-
-async function handleDbUpdateButtonClick() {
-    const button = document.getElementById('db-update-button');
-    const currentAction = button.textContent;
-
-    if (currentAction === 'Update Database') {
-        const refreshSelect = document.getElementById('db-refresh-type');
-        const isFullRefresh = refreshSelect.value === 'full';
-
-        if (isFullRefresh) {
-            // Replicates the QMessageBox confirmation from the GUI
-            const confirmed = await showConfirmDialog({ title: 'Full Refresh', message: 'This will clear and rebuild the database for the active server. It can take a long time.\n\nAre you sure you want to proceed?', confirmText: 'Proceed' });
-            if (!confirmed) return;
-        }
-
-        try {
-            button.disabled = true;
-            button.textContent = 'Starting...';
-            const response = await fetch('/api/database/update', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ full_refresh: isFullRefresh })
-            });
-
-            if (response.ok) {
-                showToast('Database update started!', 'success');
-                // Start polling immediately to get live status
-                checkAndUpdateDbProgress();
-            } else {
-                const errorData = await response.json();
-                showToast(`Error: ${errorData.error}`, 'error');
-                button.disabled = false;
-                button.textContent = 'Update Database';
-            }
-        } catch (error) {
-            showToast('Failed to start update process.', 'error');
-            button.disabled = false;
-            button.textContent = 'Update Database';
-        }
-
-    } else { // "Stop Update"
-        try {
-            const response = await fetch('/api/database/update/stop', { method: 'POST' });
-            if (response.ok) {
-                showToast('Stop request sent.', 'info');
-            } else {
-                showToast('Failed to send stop request.', 'error');
-            }
-        } catch (error) {
-            showToast('Error sending stop request.', 'error');
-        }
-    }
-}
-
-async function handleWishlistButtonClick() {
-    try {
-        const playlistId = 'wishlist';
-
-        console.log('🎵 [Wishlist Button] User clicked wishlist button - checking server state first');
-
-        // STEP 1: Always check server state first to detect any active wishlist processes
-        const response = await fetch('/api/active-processes');
-        if (!response.ok) {
-            throw new Error(`Failed to fetch active processes: ${response.status}`);
-        }
-
-        const data = await response.json();
-        const processes = data.active_processes || [];
-        const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
-
-        // STEP 2: Handle active server process - show current state immediately
-        if (serverWishlistProcess) {
-            console.log('🎯 [Wishlist Button] Server has active wishlist process:', {
-                batch_id: serverWishlistProcess.batch_id,
-                phase: serverWishlistProcess.phase,
-                auto_initiated: serverWishlistProcess.auto_initiated,
-                should_show: serverWishlistProcess.should_show_modal
-            });
-
-            // Clear any user-closed state since user explicitly requested to see modal
-            WishlistModalState.clearUserClosed();
-
-            // Check if we need to create/sync the frontend modal
-            const clientWishlistProcess = activeDownloadProcesses[playlistId];
-            const needsRehydration = !clientWishlistProcess ||
-                clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
-                !clientWishlistProcess.modalElement ||
-                !document.body.contains(clientWishlistProcess.modalElement);
-
-            if (needsRehydration) {
-                console.log('🔄 [Wishlist Button] Frontend modal needs sync/creation');
-                await rehydrateModal(serverWishlistProcess, true); // user-requested = true
-            } else {
-                console.log('✅ [Wishlist Button] Frontend modal already synced, showing existing modal');
-                clientWishlistProcess.modalElement.style.display = 'flex';
-                WishlistModalState.setVisible();
-            }
-            return;
-        }
-
-        // STEP 3: No active server process - check wishlist count and create fresh modal
-        console.log('📭 [Wishlist Button] No active server process, checking wishlist content');
-
-        const countResponse = await fetch('/api/wishlist/count');
-        if (!countResponse.ok) {
-            throw new Error(`Failed to fetch wishlist count: ${countResponse.status}`);
-        }
-
-        const countData = await countResponse.json();
-        if (countData.count === 0) {
-            showToast('Wishlist is empty. No tracks to download.', 'info');
-            return;
-        }
-
-        // STEP 4: Open wishlist overview modal (NEW - category selection)
-        console.log(`🆕 [Wishlist Button] Opening wishlist overview for ${countData.count} tracks`);
-        await openWishlistOverviewModal();
-
-    } catch (error) {
-        console.error('❌ [Wishlist Button] Error handling wishlist button click:', error);
-        showToast(`Error opening wishlist: ${error.message}`, 'error');
-    }
-}
-
-async function cleanupWishlist(playlistId) {
-    try {
-        // Show information dialog
-        const confirmed = await showConfirmDialog({
-            title: 'Cleanup Wishlist',
-            message: 'This will check all wishlist tracks against your music library and automatically remove any tracks that already exist in your database.\n\nThis is a safe operation that only removes tracks you already have. Continue with cleanup?'
-        });
-
-        if (!confirmed) {
-            return;
-        }
-
-        // Disable the cleanup button during the operation
-        const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
-        if (cleanupBtn) {
-            cleanupBtn.disabled = true;
-            cleanupBtn.textContent = '🧹 Cleaning...';
-        }
-
-        const response = await fetch('/api/wishlist/cleanup', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            const removedCount = result.removed_count || 0;
-            const processedCount = result.processed_count || 0;
-
-            if (removedCount > 0) {
-                showToast(`Wishlist cleanup completed: ${removedCount} tracks removed (${processedCount} checked)`, 'success');
-
-                // Refresh the modal content to show updated state
-                setTimeout(() => {
-                    openDownloadMissingWishlistModal();
-                }, 500);
-
-                // Update the wishlist count in the main dashboard
-                await updateWishlistCount();
-            } else {
-                showToast(`Wishlist cleanup completed: No tracks to remove (${processedCount} checked)`, 'info');
-            }
-        } else {
-            showToast(`Error cleaning wishlist: ${result.error}`, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error cleaning wishlist:', error);
-        showToast(`Error cleaning wishlist: ${error.message}`, 'error');
-    } finally {
-        // Re-enable the cleanup button
-        const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
-        if (cleanupBtn) {
-            cleanupBtn.disabled = false;
-            cleanupBtn.textContent = '🧹 Cleanup Wishlist';
-        }
-    }
-}
-
-async function clearWishlist(playlistId) {
-    try {
-        // Show confirmation dialog
-        const confirmed = await showConfirmDialog({
-            title: 'Clear Wishlist',
-            message: 'Are you sure you want to clear the entire wishlist?\n\nThis will permanently remove all failed tracks from the wishlist. This action cannot be undone.',
-            confirmText: 'Clear All',
-            destructive: true
-        });
-
-        if (!confirmed) {
-            return;
-        }
-
-        // Disable the clear button during the operation
-        const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
-        if (clearBtn) {
-            clearBtn.disabled = true;
-            clearBtn.textContent = 'Clearing...';
-        }
-
-        // Call the clear API endpoint
-        const response = await fetch('/api/wishlist/clear', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            }
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            showToast('Wishlist cleared successfully', 'success');
-
-            // Close the modal since there are no more tracks
-            closeDownloadMissingModal(playlistId);
-
-            // Update the wishlist count in the main dashboard
-            await updateWishlistCount();
-
-        } else {
-            showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error clearing wishlist:', error);
-        showToast(`Error clearing wishlist: ${error.message}`, 'error');
-    } finally {
-        // Re-enable the clear button
-        const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
-        if (clearBtn) {
-            clearBtn.disabled = false;
-            clearBtn.textContent = '🗑️ Clear Wishlist';
-        }
-    }
-}
-
-
-// ===============================
-// BEATPORT CHARTS FUNCTIONALITY
-// ===============================
-
-function updateBeatportClearButtonState() {
-    const clearBtn = document.getElementById('beatport-clear-btn');
-    if (!clearBtn) return;
-
-    // Check if any Beatport cards are in active states
-    const activeCharts = Object.values(beatportChartStates).filter(state =>
-        state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
-    );
-
-    const hasActiveCharts = activeCharts.length > 0;
-    const hasAnyCharts = Object.keys(beatportChartStates).length > 0;
-
-    if (!hasAnyCharts) {
-        // No charts at all
-        clearBtn.disabled = true;
-        clearBtn.textContent = '🗑️ Clear';
-        clearBtn.style.opacity = '0.5';
-        clearBtn.style.cursor = 'not-allowed';
-        clearBtn.title = 'No Beatport charts to clear';
-    } else if (hasActiveCharts) {
-        // Has charts but some are active
-        clearBtn.disabled = true;
-        clearBtn.textContent = '🚫 Clear Blocked';
-        clearBtn.style.opacity = '0.6';
-        clearBtn.style.cursor = 'not-allowed';
-        const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
-        clearBtn.title = `Cannot clear: ${activeCharts.length} chart(s) are currently active: ${activeNames}`;
-    } else {
-        // Has charts and none are active
-        clearBtn.disabled = false;
-        clearBtn.textContent = '🗑️ Clear';
-        clearBtn.style.opacity = '1';
-        clearBtn.style.cursor = 'pointer';
-        clearBtn.title = 'Clear all Beatport charts';
-    }
-}
-
-async function clearBeatportPlaylists() {
-    const container = document.getElementById('beatport-playlist-container');
-    const clearBtn = document.getElementById('beatport-clear-btn');
-
-    if (Object.keys(beatportChartStates).length === 0) {
-        showToast('No Beatport playlists to clear', 'info');
-        return;
-    }
-
-    // Check if any Beatport cards are in active states (discovering, syncing, or downloading)
-    const activeCharts = Object.values(beatportChartStates).filter(state =>
-        state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
-    );
-
-    if (activeCharts.length > 0) {
-        const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
-        showToast(`Cannot clear: ${activeCharts.length} chart(s) are currently discovering, syncing, or downloading: ${activeNames}`, 'warning');
-        return;
-    }
-
-    // Show loading state
-    clearBtn.disabled = true;
-    clearBtn.textContent = '🗑️ Clearing...';
-
-    try {
-        // Clear all Beatport chart states
-        Object.keys(beatportChartStates).forEach(chartHash => {
-            // Close any open modals for this chart
-            const modal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
-            if (modal) {
-                modal.remove();
-            }
-
-            // Remove from YouTube states (since Beatport reuses that infrastructure)
-            if (youtubePlaylistStates[chartHash]) {
-                // Clean up any active download processes for this Beatport chart
-                const ytState = youtubePlaylistStates[chartHash];
-                if (ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
-                    const downloadProcess = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
-                    if (downloadProcess) {
-                        console.log(`🗑️ Cleaning up download process for Beatport chart: ${chartHash}`);
-                        if (downloadProcess.modalElement) {
-                            downloadProcess.modalElement.remove();
-                        }
-                        delete activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
-                    }
-                }
-
-                delete youtubePlaylistStates[chartHash];
-            }
-        });
-
-        // Clear Beatport states
-        const chartHashesToClear = Object.keys(beatportChartStates);
-        beatportChartStates = {};
-
-        // Clear backend state for all charts
-        for (const chartHash of chartHashesToClear) {
-            try {
-                await fetch(`/api/beatport/charts/delete/${chartHash}`, {
-                    method: 'DELETE'
-                });
-                console.log(`🗑️ Deleted backend state for Beatport chart: ${chartHash}`);
-            } catch (error) {
-                console.warn(`⚠️ Error deleting backend state for chart ${chartHash}:`, error);
-            }
-        }
-
-        // Reset container to placeholder
-        container.innerHTML = `
-            <div class="playlist-placeholder">Your created Beatport playlists will appear here.</div>
-        `;
-
-        console.log(`🗑️ Cleared ${chartHashesToClear.length} Beatport charts from frontend and backend`);
-        showToast('Cleared all Beatport playlists', 'success');
-
-        // Update clear button state after clearing all charts
-        updateBeatportClearButtonState();
-
-    } catch (error) {
-        console.error('Error clearing Beatport playlists:', error);
-        showToast(`Error clearing playlists: ${error.message}`, 'error');
-    } finally {
-        clearBtn.disabled = false;
-        clearBtn.textContent = '🗑️ Clear';
-    }
-}
-
-function handleBeatportCategoryClick(category) {
-    console.log(`🎵 Beatport category clicked: ${category}`);
-
-    // Only handle genres category now - homepage has direct chart buttons
-    switch (category) {
-        case 'genres':
-            showBeatportSubView('genres');
-            loadBeatportGenres(); // Load genres dynamically
-            break;
-        default:
-            showToast(`Unknown category: ${category}`, 'error');
-    }
-}
-
-async function loadBeatportGenres() {
-    console.log('🔍 Loading Beatport genres dynamically...');
-
-    const genreGrid = document.querySelector('#beatport-genres-view .beatport-genre-grid');
-    if (!genreGrid) {
-        console.error('❌ Could not find genre grid element');
-        return;
-    }
-
-    // Show loading state
-    genreGrid.innerHTML = `
-        <div class="genre-loading-placeholder">
-            <div class="loading-spinner"></div>
-            <p>🔍 Discovering current Beatport genres...</p>
-        </div>
-    `;
-
-    try {
-        // First, fetch genres quickly without images
-        console.log('🚀 Fetching genres without images for fast loading...');
-        const fastResponse = await fetch('/api/beatport/genres');
-        if (!fastResponse.ok) {
-            throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
-        }
-
-        const fastData = await fastResponse.json();
-        const genres = fastData.genres || [];
-
-        if (genres.length === 0) {
-            genreGrid.innerHTML = `
-                <div class="genre-error-placeholder">
-                    <p>⚠️ No genres available</p>
-                    <button onclick="loadBeatportGenres()" class="refresh-genres-btn">🔄 Retry</button>
-                </div>
-            `;
-            return;
-        }
-
-        // Generate genre cards dynamically (without images first)
-        const genreCardsHTML = genres.map(genre => `
-            <div class="beatport-genre-item"
-                 data-genre-slug="${genre.slug}"
-                 data-genre-id="${genre.id}"
-                 data-genre-name="${genre.name}">
-                <div class="genre-icon">🎵</div>
-                <h3>${genre.name}</h3>
-                <span class="track-count">Top 100</span>
-            </div>
-        `).join('');
-
-        genreGrid.innerHTML = genreCardsHTML;
-
-        // Add click handlers to dynamically created genre items
-        const genreItems = genreGrid.querySelectorAll('.beatport-genre-item');
-        genreItems.forEach(item => {
-            item.addEventListener('click', () => {
-                const genreSlug = item.dataset.genreSlug;
-                const genreId = item.dataset.genreId;
-                const genreName = item.dataset.genreName;
-                handleBeatportGenreClick(genreSlug, genreId, genreName);
-            });
-        });
-
-        console.log(`✅ Loaded ${genres.length} Beatport genres dynamically (fast mode)`);
-        showToast(`Loaded ${genres.length} current Beatport genres`, 'success');
-
-        // Now fetch images progressively in the background if there are many genres
-        if (genres.length > 10) {
-            console.log('🖼️ Loading genre images progressively...');
-            loadGenreImagesProgressively(genres);
-        }
-
-    } catch (error) {
-        console.error('❌ Error loading Beatport genres:', error);
-        genreGrid.innerHTML = `
-            <div class="genre-error-placeholder">
-                <p>❌ Failed to load genres: ${error.message}</p>
-                <button onclick="loadBeatportGenres()" class="refresh-genres-btn">🔄 Retry</button>
-            </div>
-        `;
-        showToast(`Error loading Beatport genres: ${error.message}`, 'error');
-    }
-}
-
-async function loadGenreImagesProgressively(genres) {
-    // Load genre images with 2 concurrent workers for faster loading
-
-    const imageQueue = [...genres]; // Create a copy for processing
-    let imagesLoaded = 0;
-    const maxWorkers = 2;
-
-    console.log(`🖼️ Starting progressive image loading with ${maxWorkers} workers for ${imageQueue.length} genres`);
-
-    // Function to process a single image
-    async function processImage(genre) {
-        try {
-            // Fetch individual genre image from backend
-            const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);
-
-            if (response.ok) {
-                const data = await response.json();
-
-                if (data.success && data.image_url) {
-                    // Find the genre item in the DOM
-                    const genreItem = document.querySelector(
-                        `[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
-                    );
-
-                    if (genreItem) {
-                        const iconElement = genreItem.querySelector('.genre-icon');
-                        if (iconElement) {
-                            // Create new image element with smooth transition
-                            const imageDiv = document.createElement('div');
-                            imageDiv.className = 'genre-image';
-                            imageDiv.style.backgroundImage = `url('${data.image_url}')`;
-                            imageDiv.style.opacity = '0';
-                            imageDiv.style.transition = 'opacity 0.3s ease';
-
-                            // Replace icon with image
-                            iconElement.replaceWith(imageDiv);
-
-                            // Trigger fade-in animation
-                            setTimeout(() => {
-                                imageDiv.style.opacity = '1';
-                            }, 50);
-
-                            imagesLoaded++;
-                            console.log(`🖼️ [${imagesLoaded}/${imageQueue.length}] Loaded image for ${genre.name}`);
-                        }
-                    }
-                }
-            }
-        } catch (error) {
-            console.warn(`⚠️ Failed to load image for ${genre.name}:`, error);
-        }
-    }
-
-    // Worker function that processes images from the queue
-    async function imageWorker(workerId) {
-        while (imageQueue.length > 0) {
-            const genre = imageQueue.shift(); // Take next image from queue
-            if (genre) {
-                await processImage(genre);
-
-                // Small delay between requests to be respectful (500ms per worker = ~2 images per second total)
-                await new Promise(resolve => setTimeout(resolve, 500));
-            }
-        }
-        console.log(`✅ Worker ${workerId} finished`);
-    }
-
-    // Start the workers
-    const workers = [];
-    for (let i = 0; i < maxWorkers; i++) {
-        workers.push(imageWorker(i + 1));
-    }
-
-    // Wait for all workers to complete
-    await Promise.all(workers);
-
-    console.log(`✅ Progressive image loading complete: ${imagesLoaded}/${genres.length} images loaded`);
-}
-
-function setupHomepageChartTypeHandlers() {
-    console.log('🔧 Setting up homepage chart type handlers...');
-
-    // Select all homepage chart type cards (following genre page pattern)
-    const chartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
-
-    chartTypeCards.forEach(card => {
-        // Remove existing listeners by cloning (following genre page pattern)
-        card.replaceWith(card.cloneNode(true));
-    });
-
-    // Re-select after cloning to ensure clean event listeners (following genre page pattern)
-    const newChartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
-
-    newChartTypeCards.forEach(card => {
-        card.addEventListener('click', () => {
-            const chartType = card.dataset.chartType;
-            const chartEndpoint = card.dataset.chartEndpoint;
-            const chartName = card.querySelector('.chart-type-info h3').textContent;
-            console.log(`🔥 Homepage chart clicked: ${chartName} (${chartType})`);
-            handleHomepageChartTypeClick(chartType, chartEndpoint, chartName);
-        });
-    });
-
-    console.log(`✅ Setup ${newChartTypeCards.length} homepage chart handlers`);
-}
-
-async function handleHomepageChartTypeClick(chartType, chartEndpoint, chartName) {
-    console.log(`🔥 Homepage chart type clicked: ${chartType} (${chartName})`);
-
-    // Map chart types to API endpoints and create descriptive names (following genre page pattern)
-    const chartTypeMap = {
-        'top-10': {
-            endpoint: `/api/beatport/top-100`,  // Use top-100 endpoint and limit to 10
-            name: `Beatport Top 10`,
-            limit: 10
-        },
-        'top-100': {
-            endpoint: `/api/beatport/top-100`,
-            name: `Beatport Top 100`,
-            limit: 100
-        },
-        'releases-top-10': {
-            endpoint: `/api/beatport/homepage/top-10-releases`,  // Working route
-            name: `Top 10 Releases`,
-            limit: 10
-        },
-        'releases-top-100': {
-            endpoint: `/api/beatport/top-100-releases`,
-            name: `Top 100 Releases`,
-            limit: 100
-        },
-        'latest-releases': {
-            endpoint: `/api/beatport/homepage/new-releases`,  // Use new-releases as fallback for now
-            name: `Latest Releases`,
-            limit: 50
-        },
-        'hype-top-10': {
-            endpoint: `/api/beatport/hype-top-100`,  // Use hype-100 endpoint and limit to 10
-            name: `Hype Top 10`,
-            limit: 10
-        },
-        'hype-top-100': {
-            endpoint: `/api/beatport/hype-top-100`,
-            name: `Hype Top 100`,
-            limit: 100
-        },
-        'hype-picks': {
-            endpoint: `/api/beatport/homepage/hype-picks`,  // Working route
-            name: `Hype Picks`,
-            limit: 50
-        }
-    };
-
-    const chartConfig = chartTypeMap[chartType];
-    if (!chartConfig) {
-        console.error(`❌ Unknown homepage chart type: ${chartType}`);
-        showToast(`Unknown chart type: ${chartType}`, 'error');
-        return;
-    }
-
-    try {
-        showToast(`Loading ${chartConfig.name}...`, 'info');
-        showLoadingOverlay(`Loading ${chartConfig.name}...`);
-
-        const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(`No tracks found in ${chartConfig.name}`);
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
-
-    } catch (error) {
-        console.error(`❌ Error loading ${chartConfig.name}:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
-    }
-}
-
-
-
-async function openBeatportDiscoveryModal(chartHash, chartData) {
-    console.log(`🎵 Opening Beatport discovery modal (reusing YouTube modal): ${chartData.name}`);
-
-    // Create YouTube-style state entry for this Beatport chart
-    const beatportState = {
-        phase: 'fresh',
-        playlist: {
-            name: chartData.name,
-            tracks: chartData.tracks,
-            description: `${chartData.track_count} tracks from ${chartData.name}`,
-            source: 'beatport'
-        },
-        is_beatport_playlist: true,
-        beatport_chart_type: chartData.chart_type,
-        beatport_chart_hash: chartHash  // Link to Beatport card state
-    };
-
-    // Store in YouTube playlist states (reusing the infrastructure)
-    youtubePlaylistStates[chartHash] = beatportState;
-
-    // Start discovery automatically (like Tidal does)
-    try {
-        console.log(`🔍 Starting Beatport discovery for: ${chartData.name}`);
-
-        // Update card phase to discovering immediately
-        updateBeatportCardPhase(chartHash, 'discovering');
-
-        // Call the discovery start endpoint with chart data
-        const response = await fetch(`/api/beatport/discovery/start/${chartHash}`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                chart_data: chartData
-            })
-        });
-
-        const result = await response.json();
-        if (result.success) {
-            // Update state to discovering
-            youtubePlaylistStates[chartHash].phase = 'discovering';
-
-            // Start polling for progress
-            startBeatportDiscoveryPolling(chartHash);
-
-            console.log(`✅ Started Beatport discovery for: ${chartData.name}`);
-        } else {
-            console.error('❌ Error starting Beatport discovery:', result.error);
-            showToast(`Error starting discovery: ${result.error}`, 'error');
-            // Revert card phase on error
-            updateBeatportCardPhase(chartHash, 'fresh');
-        }
-    } catch (error) {
-        console.error('❌ Error starting Beatport discovery:', error);
-        showToast(`Error starting discovery: ${error.message}`, 'error');
-        // Revert card phase on error
-        updateBeatportCardPhase(chartHash, 'fresh');
-    }
-
-    // Open the existing YouTube discovery modal infrastructure
-    openYouTubeDiscoveryModal(chartHash);
-
-    console.log(`✅ Beatport discovery modal opened for ${chartData.name} with ${chartData.tracks.length} tracks`);
-}
-
-function startBeatportDiscoveryPolling(urlHash) {
-    console.log(`🔄 Starting Beatport discovery polling for: ${urlHash}`);
-
-    // Stop any existing polling (reuse YouTube polling infrastructure)
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [urlHash] });
-        _discoveryProgressCallbacks[urlHash] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-                return;
-            }
-            if (youtubePlaylistStates[urlHash]) {
-                const transformed = {
-                    progress: data.progress || 0, spotify_matches: data.spotify_matches || 0, spotify_total: data.spotify_total || 0,
-                    results: (data.results || []).map((r, i) => ({
-                        index: r.index !== undefined ? r.index : i,
-                        yt_track: r.beatport_track ? r.beatport_track.title : 'Unknown',
-                        yt_artist: r.beatport_track ? r.beatport_track.artist : 'Unknown',
-                        status: (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found') ? '✅ Found' : (r.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                        status_class: r.status_class || ((r.status === 'found' || r.status === '✅ Found') ? 'found' : (r.status === 'error' ? 'error' : 'not-found')),
-                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
-                        spotify_artist: r.spotify_data && r.spotify_data.artists ? r.spotify_data.artists.map(a => a.name || a).join(', ') : (r.spotify_artist || '-'),
-                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
-                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match
-                    }))
-                };
-                const st = youtubePlaylistStates[urlHash];
-                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
-                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
-                st.discovery_results = data.results; st.discoveryResults = transformed.results;
-                st.phase = data.phase || 'discovering';
-                const chartHash = st.beatport_chart_hash || urlHash;
-                updateBeatportCardPhase(chartHash, data.phase || 'discovering');
-                updateBeatportCardProgress(chartHash, { spotify_total: data.spotify_total || 0, spotify_matches: data.spotify_matches || 0, failed: (data.spotify_total || 0) - (data.spotify_matches || 0) });
-                if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = data.phase || 'discovering';
-                updateYouTubeDiscoveryModal(urlHash, transformed);
-            }
-            if (data.phase === 'discovered' || data.phase === 'error') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/beatport/discovery/status/${urlHash}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling Beatport discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            // Update state and modal (reuse YouTube infrastructure like Tidal)
-            if (youtubePlaylistStates[urlHash]) {
-                // Transform Beatport results to YouTube modal format (like Tidal does)
-                const transformedStatus = {
-                    progress: status.progress || 0,
-                    spotify_matches: status.spotify_matches || 0,
-                    spotify_total: status.spotify_total || 0,
-                    results: (status.results || []).map((result, index) => ({
-                        index: result.index !== undefined ? result.index : index,
-                        yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
-                        yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
-                        status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                        status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
-                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                        spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                            result.spotify_data.artists.map(a => a.name || a).join(', ') : (result.spotify_artist || '-'),
-                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                        spotify_data: result.spotify_data, // Pass through
-                        spotify_id: result.spotify_id, // Pass through
-                        manual_match: result.manual_match // Pass through
-                    }))
-                };
-
-                // Update state with both backend and frontend formats (like Tidal)
-                const state = youtubePlaylistStates[urlHash];
-                state.discovery_progress = status.progress; // Backend format
-                state.discoveryProgress = status.progress; // Frontend format - for modal progress display
-                state.spotify_matches = status.spotify_matches; // Backend format
-                state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
-                state.discovery_results = status.results; // Backend format
-                state.discoveryResults = transformedStatus.results; // Frontend format - for button logic
-                state.phase = status.phase || 'discovering';
-
-                // Update Beatport card phase and progress
-                const chartHash = state.beatport_chart_hash || urlHash;
-                updateBeatportCardPhase(chartHash, status.phase || 'discovering');
-                updateBeatportCardProgress(chartHash, {
-                    spotify_total: status.spotify_total || 0,
-                    spotify_matches: status.spotify_matches || 0,
-                    failed: (status.spotify_total || 0) - (status.spotify_matches || 0)
-                });
-
-                // Sync with backend Beatport chart state
-                if (beatportChartStates[chartHash]) {
-                    beatportChartStates[chartHash].phase = status.phase || 'discovering';
-                }
-
-                // Update modal display with transformed data
-                updateYouTubeDiscoveryModal(urlHash, transformedStatus);
-            }
-
-            // Stop polling when discovery is complete
-            if (status.phase === 'discovered' || status.phase === 'error') {
-                console.log(`✅ Beatport discovery polling complete for: ${urlHash}`);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-            }
-
-        } catch (error) {
-            console.error('❌ Error polling Beatport discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[urlHash];
-        }
-    }, 2000); // Poll every 2 seconds like Tidal
-
-    // Store the interval so we can clean it up later
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-function showBeatportSubView(viewType) {
-    // Hide main category view
-    const mainView = document.getElementById('beatport-main-view');
-    if (mainView) {
-        mainView.classList.remove('active');
-    }
-
-    // Hide all sub-views
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-
-    // Show the requested sub-view
-    const targetView = document.getElementById(`beatport-${viewType}-view`);
-    if (targetView) {
-        targetView.classList.add('active');
-        console.log(`🎵 Showing Beatport ${viewType} view`);
-    } else {
-        console.error(`🎵 Could not find view: beatport-${viewType}-view`);
-    }
-}
-
-function showBeatportMainView() {
-    // Hide all sub-views
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-
-    // Show main category view
-    const mainView = document.getElementById('beatport-main-view');
-    if (mainView) {
-        mainView.classList.add('active');
-        console.log('🎵 Showing Beatport main view');
-    }
-}
-
-// ===============================
-// REBUILD PAGE TOP 10 FUNCTIONALITY
-// ===============================
-
-// Global variable to store rebuild page track data for reuse
-let rebuildPageTrackData = {
-    beatport_top10: null,
-    hype_top10: null
-    // hero_slider removed - now uses individual slide click handlers
-};
-
-async function handleRebuildBeatportTop10Click() {
-    console.log('🎵 Handling Beatport Top 10 click on rebuild page');
-
-    // Use the existing chart creation pattern from Browse Charts EXACTLY
-    await handleRebuildChartClick('beatport_top10', 'Beatport Top 10', 'rebuild_beatport_top10');
-}
-
-async function handleRebuildHypeTop10Click() {
-    console.log('🔥 Handling Hype Top 10 click on rebuild page');
-
-    // Use the existing chart creation pattern from Browse Charts EXACTLY
-    await handleRebuildChartClick('hype_top10', 'Hype Top 10', 'rebuild_hype_top10');
-}
-
-// Hero slider now uses individual slide click handlers instead of container-level clicking
-// The old handleRebuildHeroSliderClick function has been removed in favor of individual release discovery
-
-async function handleRebuildChartClick(trackDataKey, chartName, chartType) {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-    setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
-    try {
-        // Get basic track data from DOM
-        const trackData = await getRebuildPageTrackData(trackDataKey);
-        if (!trackData || trackData.length === 0) {
-            throw new Error(`No track data found for ${chartName}`);
-        }
-
-        console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
-        showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
-
-        const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
-
-        console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
-    } catch (error) {
-        hideLoadingOverlay();
-        console.error(`❌ Error handling ${chartName} click:`, error);
-        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
-    }
-}
-
-async function getRebuildPageTrackData(trackDataKey) {
-    // First check if we have cached data from when the rebuild page was loaded
-    if (rebuildPageTrackData[trackDataKey]) {
-        console.log(`📦 Using cached ${trackDataKey} data`);
-        return rebuildPageTrackData[trackDataKey];
-    }
-
-    // If no cached data, extract from DOM (fallback)
-    console.log(`🔍 Extracting ${trackDataKey} data from rebuild page DOM`);
-
-    let containerSelector, cardSelector;
-    if (trackDataKey === 'beatport_top10') {
-        containerSelector = '#beatport-top10-list';
-        cardSelector = '.beatport-top10-card[data-url]';
-    } else if (trackDataKey === 'hype_top10') {
-        containerSelector = '#beatport-hype10-list';
-        cardSelector = '.beatport-hype10-card[data-url]';
-    } else {
-        throw new Error(`Unknown track data key: ${trackDataKey}`);
-    }
-
-    const container = document.querySelector(containerSelector);
-    if (!container) {
-        throw new Error(`Container ${containerSelector} not found`);
-    }
-
-    const trackCards = container.querySelectorAll(cardSelector);
-    if (trackCards.length === 0) {
-        throw new Error(`No track cards found in ${containerSelector}`);
-    }
-
-    // Extract track data from DOM cards
-    const tracks = Array.from(trackCards).map(card => {
-        const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
-        const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
-        const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
-        const url = card.getAttribute('data-url') || '';
-        const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
-
-        return {
-            title: title,
-            artist: artist,
-            label: label,
-            url: url,
-            rank: rank
-        };
-    });
-
-    console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
-
-    // Cache for future use
-    rebuildPageTrackData[trackDataKey] = tracks;
-
-    return tracks;
-}
-
-// getHeroSliderTrackData function removed - hero slider now uses individual slide click handlers
-// Each slide will create its own discovery modal using handleBeatportReleaseCardClick
-
-// Hook into the loadBeatportTop10Lists function to cache track data
-const originalLoadBeatportTop10Lists = window.loadBeatportTop10Lists;
-if (originalLoadBeatportTop10Lists) {
-    window.loadBeatportTop10Lists = async function () {
-        const result = await originalLoadBeatportTop10Lists.apply(this, arguments);
-
-        // If the load was successful, we can potentially cache the track data
-        // But for now, we'll rely on DOM extraction as it's more reliable
-
-        return result;
-    };
-}
-
-// ===============================
-// BEATPORT CHART FUNCTIONALITY
-// ===============================
-
-function createBeatportCard(chartData) {
-    const state = beatportChartStates[chartData.hash];
-    const phase = state ? state.phase : 'fresh';
-
-    let buttonText = getActionButtonText(phase);
-    let phaseText = getPhaseText(phase);
-    let phaseColor = getPhaseColor(phase);
-
-    return `
-        <div class="youtube-playlist-card" id="beatport-card-${chartData.hash}">
-            <div class="playlist-card-icon">🎧</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(chartData.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">${chartData.track_count} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                <!-- Progress will be dynamically updated based on phase -->
-            </div>
-            <button class="playlist-card-action-btn">${buttonText}</button>
-        </div>
-    `;
-}
-
-function addBeatportCardToContainer(chartData) {
-    const container = document.getElementById('beatport-playlist-container');
-
-    // Remove placeholder if it exists
-    const placeholder = container.querySelector('.playlist-placeholder');
-    if (placeholder) {
-        placeholder.remove();
-    }
-
-    // Check if card already exists
-    const existingCard = document.getElementById(`beatport-card-${chartData.hash}`);
-    if (existingCard) {
-        console.log(`Card already exists for ${chartData.name}, updating instead`);
-        return;
-    }
-
-    // Create and add the card
-    const cardHtml = createBeatportCard(chartData);
-    container.insertAdjacentHTML('beforeend', cardHtml);
-
-    // Initialize state
-    beatportChartStates[chartData.hash] = {
-        phase: 'fresh',
-        chart: chartData,
-        cardElement: document.getElementById(`beatport-card-${chartData.hash}`)
-    };
-
-    // Add click handler
-    const card = document.getElementById(`beatport-card-${chartData.hash}`);
-    if (card) {
-        card.addEventListener('click', async () => await handleBeatportCardClick(chartData.hash));
-    }
-
-    console.log(`🃏 Created Beatport card: ${chartData.name}`);
-
-    // Auto-mirror this Beatport chart
-    if (chartData.tracks && chartData.tracks.length > 0) {
-        mirrorPlaylist('beatport', chartData.hash, chartData.name, chartData.tracks.map(t => ({
-            track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
-            album_name: t.album || '', duration_ms: t.duration_ms || 0,
-            source_track_id: t.id || '', image_url: t.image_url || null
-        })));
-    }
-
-    // Update clear button state after creating card
-    updateBeatportClearButtonState();
-}
-
-async function handleBeatportCardClick(chartHash) {
-    const state = beatportChartStates[chartHash];
-    if (!state) {
-        console.error(`❌ [Card Click] No state found for Beatport chart: ${chartHash}`);
-        showToast('Chart state not found - try refreshing the page', 'error');
-        return;
-    }
-
-    if (!state.chart) {
-        console.error(`❌ [Card Click] No chart data found for Beatport chart: ${chartHash}`);
-        showToast('Chart data missing - try refreshing the page', 'error');
-        return;
-    }
-
-    console.log(`🎧 [Card Click] Beatport card clicked: ${chartHash}, Phase: ${state.phase}`);
-
-    if (state.phase === 'fresh') {
-        // Open discovery modal and start discovery
-        openBeatportDiscoveryModal(chartHash, state.chart);
-    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
-        // Reopen existing modal with preserved discovery results
-        console.log(`🎧 [Card Click] Opening Beatport discovery modal for ${state.phase} phase`);
-
-        // Check if we have the required state data
-        const ytState = youtubePlaylistStates[chartHash];
-        if (!ytState || !ytState.playlist) {
-            console.log(`🔍 [Card Click] Missing playlist data for ${state.phase} phase, fetching from backend...`);
-
-            try {
-                // Fetch the full state from backend
-                const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-
-                    // Restore the missing playlist data
-                    if (fullState.chart_data) {
-                        if (!youtubePlaylistStates[chartHash]) {
-                            youtubePlaylistStates[chartHash] = {};
-                        }
-                        youtubePlaylistStates[chartHash].playlist = fullState.chart_data;
-                        youtubePlaylistStates[chartHash].is_beatport_playlist = true;
-                        youtubePlaylistStates[chartHash].beatport_chart_hash = chartHash;
-
-                        // Also restore discovery results if available
-                        if (fullState.discovery_results) {
-                            youtubePlaylistStates[chartHash].discovery_results = fullState.discovery_results;
-                            console.log(`🔄 [Hydration] Restored ${fullState.discovery_results.length} discovery results`);
-                            console.log(`🔄 [Hydration] First result:`, fullState.discovery_results[0]);
-                        }
-
-                        // Restore discovery progress state
-                        if (fullState.discovery_progress !== undefined) {
-                            youtubePlaylistStates[chartHash].discovery_progress = fullState.discovery_progress;
-                        }
-                        if (fullState.spotify_matches !== undefined) {
-                            youtubePlaylistStates[chartHash].spotify_matches = fullState.spotify_matches;
-                            console.log(`🔄 [Hydration] Restored spotify_matches: ${fullState.spotify_matches}`);
-                        }
-                        if (fullState.spotify_total !== undefined) {
-                            youtubePlaylistStates[chartHash].spotify_total = fullState.spotify_total;
-                        }
-
-                        console.log(`✅ [Card Click] Restored playlist data for ${state.phase} phase`);
-                    }
-                } else {
-                    console.error(`❌ [Card Click] Failed to fetch state for chart: ${chartHash}`);
-                    showToast('Error loading chart data', 'error');
-                    return;
-                }
-            } catch (error) {
-                console.error(`❌ [Card Click] Error fetching chart state:`, error);
-                showToast('Error loading chart data', 'error');
-                return;
-            }
-        }
-
-        openYouTubeDiscoveryModal(chartHash);
-
-        // If still in discovering phase, start polling for live updates
-        if (state.phase === 'discovering') {
-            console.log(`🔄 [Card Click] Starting discovery polling for ${state.phase} phase`);
-
-            // Let the polling handle all modal updates to avoid data structure mismatches
-            console.log(`📊 [Card Click] Starting polling - it will update modal with current progress`);
-
-            startBeatportDiscoveryPolling(chartHash);
-        }
-    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
-        // Open download modal if we have the converted playlist ID (following YouTube/Tidal pattern)
-        const ytState = youtubePlaylistStates[chartHash];
-        if (ytState && ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
-            console.log(`📥 [Card Click] Opening download modal for Beatport chart: ${ytState.playlist.name} (phase: ${state.phase})`);
-
-            // Check if modal already exists, if not create it (like Tidal implementation)
-            if (activeDownloadProcesses[ytState.convertedSpotifyPlaylistId]) {
-                const process = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
-                if (process.modalElement) {
-                    console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
-                    process.modalElement.style.display = 'flex';
-                } else {
-                    console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
-                    await rehydrateBeatportDownloadModal(chartHash, ytState);
-                }
-            } else {
-                // Need to create the download modal - fetch the discovery results if needed
-                console.log(`🔧 [Card Click] Rehydrating Beatport download modal for ${state.phase} phase`);
-                await rehydrateBeatportDownloadModal(chartHash, ytState);
-            }
-        } else {
-            console.error('❌ [Card Click] No converted Spotify playlist ID found for Beatport download modal');
-            console.log('📊 [Card Click] Available state data:', Object.keys(ytState || {}));
-
-            // Fallback: try to open discovery modal if we have discovery results
-            if (ytState && ytState.discovery_results && ytState.discovery_results.length > 0) {
-                console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${ytState.discovery_results.length} results`);
-                openYouTubeDiscoveryModal(chartHash);
-            } else {
-                showToast('Unable to open download modal - missing playlist data', 'error');
-            }
-        }
-    }
-}
-
-async function rehydrateBeatportDownloadModal(chartHash, ytState) {
-    try {
-        console.log(`💧 [Rehydration] Attempting fallback rehydration for Beatport chart: ${chartHash}`);
-
-        // This function is only called as a fallback when the modal wasn't created during backend loading
-        // In most cases, the modal should already exist from loadBeatportChartsFromBackend()
-
-        if (!ytState || !ytState.playlist || !ytState.convertedSpotifyPlaylistId) {
-            console.error(`❌ [Rehydration] Invalid state data for Beatport chart: ${chartHash}`);
-            showToast('Cannot open download modal - invalid playlist data', 'error');
-            return;
-        }
-
-        // Get discovery results from backend if not already loaded
-        if (!ytState.discovery_results) {
-            console.log(`🔍 Fetching discovery results from backend for Beatport chart: ${chartHash}`);
-            const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
-            if (stateResponse.ok) {
-                const fullState = await stateResponse.json();
-                ytState.discovery_results = fullState.discovery_results;
-                ytState.download_process_id = fullState.download_process_id;
-                console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
-            } else {
-                console.error('❌ Failed to fetch Beatport discovery results from backend');
-                showToast('Error loading playlist data', 'error');
-                return;
-            }
-        }
-
-        // Extract Spotify tracks from discovery results
-        const spotifyTracks = ytState.discovery_results
-            .filter(result => result.spotify_data)
-            .map(result => {
-                const track = result.spotify_data;
-                // Ensure artists is an array of strings
-                if (track.artists && Array.isArray(track.artists)) {
-                    track.artists = track.artists.map(artist =>
-                        typeof artist === 'string' ? artist : (artist.name || artist)
-                    );
-                } else if (track.artists && typeof track.artists === 'string') {
-                    track.artists = [track.artists];
-                } else {
-                    track.artists = ['Unknown Artist'];
-                }
-                return {
-                    id: track.id,
-                    name: track.name,
-                    artists: track.artists,
-                    album: track.album || 'Unknown Album',
-                    duration_ms: track.duration_ms || 0,
-                    external_urls: track.external_urls || {}
-                };
-            });
-
-        if (spotifyTracks.length === 0) {
-            console.error('❌ No Spotify tracks found for download modal');
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        const virtualPlaylistId = ytState.convertedSpotifyPlaylistId;
-        const playlistName = ytState.playlist.name;
-
-        // Create the download modal
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // Set up the modal for the running state if we have a download process ID
-        if (ytState.download_process_id) {
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                process.status = 'running';
-                process.batchId = ytState.download_process_id;
-
-                // Update UI to reflect running state
-                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                if (beginBtn) beginBtn.style.display = 'none';
-                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                // Start polling for this process
-                startModalDownloadPolling(virtualPlaylistId);
-
-                console.log(`✅ [Rehydration] Fallback modal rehydrated for running download process`);
-            }
-        }
-
-    } catch (error) {
-        console.error(`❌ [Rehydration] Error in fallback rehydration for Beatport chart:`, error);
-        showToast('Error opening download modal', 'error');
-        hideLoadingOverlay();
-    }
-}
-
-function updateBeatportCardPhase(chartHash, phase) {
-    const state = beatportChartStates[chartHash];
-    if (!state) return;
-
-    state.phase = phase;
-
-    // Re-render the card with new phase
-    const card = document.getElementById(`beatport-card-${chartHash}`);
-    if (card) {
-        const newCardHtml = createBeatportCard(state.chart);
-        card.outerHTML = newCardHtml;
-
-        // Re-attach click handler
-        const newCard = document.getElementById(`beatport-card-${chartHash}`);
-        if (newCard) {
-            newCard.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
-            state.cardElement = newCard;
-        }
-    }
-
-    // Update clear button state after phase change
-    updateBeatportClearButtonState();
-}
-
-function updateBeatportCardProgress(chartHash, progress) {
-    const state = beatportChartStates[chartHash];
-    if (!state) return;
-
-    const card = document.getElementById(`beatport-card-${chartHash}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-    if (!progressElement) return;
-
-    const { spotify_total, spotify_matches, failed } = progress;
-    const percentage = spotify_total > 0 ? Math.round((spotify_matches / spotify_total) * 100) : 0;
-
-    progressElement.textContent = `♪ ${spotify_total} / ✓ ${spotify_matches} / ✗ ${failed} / ${percentage}%`;
-    progressElement.classList.remove('hidden');
-
-    console.log('🎧 Updated Beatport card progress:', chartHash, `${spotify_matches}/${spotify_total} (${percentage}%)`);
-}
-
-function switchToBeatportPlaylistsTab() {
-    // Switch from "Browse Charts" to "My Playlists" tab
-    const browseTab = document.querySelector('.beatport-tab-button[data-beatport-tab="browse"]');
-    const playlistsTab = document.querySelector('.beatport-tab-button[data-beatport-tab="playlists"]');
-    const browseContent = document.getElementById('beatport-browse-content');
-    const playlistsContent = document.getElementById('beatport-playlists-content');
-
-    if (browseTab && playlistsTab && browseContent && playlistsContent) {
-        // Update tab buttons
-        browseTab.classList.remove('active');
-        playlistsTab.classList.add('active');
-
-        // Update tab content
-        browseContent.classList.remove('active');
-        playlistsContent.classList.add('active');
-
-        console.log('🔄 Switched to Beatport "My Playlists" tab');
-    }
-}
-
-// ===============================
-// BEATPORT SYNC FUNCTIONALITY
-// ===============================
-
-async function startBeatportPlaylistSync(urlHash) {
-    try {
-        console.log('🎧 Starting Beatport playlist sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_beatport_playlist) {
-            console.error('❌ Invalid Beatport playlist state for sync');
-            showToast('Invalid Beatport playlist state', 'error');
-            return;
-        }
-
-        // Call Beatport sync endpoint
-        const response = await fetch(`/api/beatport/sync/start/${urlHash}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Capture sync_playlist_id for WebSocket subscription (Beatport returns sync_id)
-        const syncPlaylistId = result.sync_id || result.sync_playlist_id;
-        if (state) state.syncPlaylistId = syncPlaylistId;
-
-        // Update state to syncing
-        state.phase = 'syncing';
-        updateBeatportCardPhase(state.beatport_chart_hash || urlHash, 'syncing');
-
-        // Update modal buttons and start polling
-        updateBeatportModalButtons(urlHash, 'syncing');
-        startBeatportSyncPolling(urlHash, syncPlaylistId);
-
-        showToast('Starting Beatport playlist sync...', 'success');
-
-    } catch (error) {
-        console.error('❌ Error starting Beatport sync:', error);
-        showToast(`Error starting sync: ${error.message}`, 'error');
-    }
-}
-
-function startBeatportSyncPolling(urlHash, syncPlaylistId) {
-    // Stop any existing polling (reuse activeYouTubePollers for Beatport)
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    // Resolve syncPlaylistId from argument or stored state
-    const bpState = youtubePlaylistStates[urlHash];
-    syncPlaylistId = syncPlaylistId || (bpState && bpState.syncPlaylistId);
-
-    // Phase 6: Subscribe via WebSocket
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateBeatportModalSyncProgress(urlHash, progress);
-
-            if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-
-                const state = youtubePlaylistStates[urlHash];
-                if (state) {
-                    const chartHash = state.beatport_chart_hash || urlHash;
-                    if (data.status === 'finished') {
-                        state.phase = 'sync_complete';
-                        updateBeatportCardPhase(chartHash, 'sync_complete');
-                        updateBeatportModalButtons(urlHash, 'sync_complete');
-                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
-                    } else {
-                        state.phase = 'discovered';
-                        updateBeatportCardPhase(chartHash, 'discovered');
-                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
-                    }
-                }
-            }
-        };
-    }
-
-    // Define the polling function (HTTP fallback)
-    const pollFunction = async () => {
-        if (socketConnected) return; // Phase 6: WS handles updates
-        try {
-            const response = await fetch(`/api/beatport/sync/status/${urlHash}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling Beatport sync:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            updateBeatportModalSyncProgress(urlHash, status.progress);
-
-            if (status.complete || status.status === 'error') {
-                const state = youtubePlaylistStates[urlHash];
-                if (state) {
-                    const chartHash = state.beatport_chart_hash || urlHash;
-                    if (status.complete) {
-                        state.phase = 'sync_complete';
-                        state.convertedSpotifyPlaylistId = status.converted_spotify_playlist_id;
-                        updateBeatportCardPhase(chartHash, 'sync_complete');
-                        updateBeatportModalButtons(urlHash, 'sync_complete');
-                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
-                    } else {
-                        state.phase = 'discovered';
-                        updateBeatportCardPhase(chartHash, 'discovered');
-                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
-                    }
-                }
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-            }
-        } catch (error) {
-            console.error('❌ Error polling Beatport sync:', error);
-            if (activeYouTubePollers[urlHash]) {
-                clearInterval(activeYouTubePollers[urlHash]);
-                delete activeYouTubePollers[urlHash];
-            }
-        }
-    };
-
-    // Run immediately to get current status (skip if WS active)
-    if (!socketConnected) pollFunction();
-
-    // Then continue polling at regular intervals
-    const pollInterval = setInterval(pollFunction, 2000);
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelBeatportSync(urlHash) {
-    try {
-        console.log('❌ Cancelling Beatport sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_beatport_playlist) {
-            console.error('❌ Invalid Beatport playlist state');
-            return;
-        }
-
-        const response = await fetch(`/api/beatport/sync/cancel/${urlHash}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error cancelling sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Stop polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Phase 6: Clean up WS subscription
-        const bpSyncId = state && state.syncPlaylistId;
-        if (bpSyncId && _syncProgressCallbacks[bpSyncId]) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [bpSyncId] });
-            delete _syncProgressCallbacks[bpSyncId];
-        }
-
-        // Revert to discovered phase
-        const chartHash = state.beatport_chart_hash || urlHash;
-        state.phase = 'discovered';
-        updateBeatportCardPhase(chartHash, 'discovered');
-        updateBeatportModalButtons(urlHash, 'discovered');
-
-        // Sync with backend Beatport chart state
-        if (beatportChartStates[chartHash]) {
-            beatportChartStates[chartHash].phase = 'discovered';
-        }
-
-        showToast('Beatport sync cancelled', 'info');
-
-    } catch (error) {
-        console.error('❌ Error cancelling Beatport sync:', error);
-        showToast(`Error cancelling sync: ${error.message}`, 'error');
-    }
-}
-
-function updateBeatportModalSyncProgress(urlHash, progress) {
-    const statusDisplay = document.getElementById(`beatport-sync-status-${urlHash}`);
-    if (!statusDisplay || !progress) return;
-
-    console.log(`📊 Updating Beatport modal sync progress for ${urlHash}:`, progress);
-
-    // Update individual counters with Beatport-specific IDs
-    const totalEl = document.getElementById(`beatport-total-${urlHash}`);
-    const matchedEl = document.getElementById(`beatport-matched-${urlHash}`);
-    const failedEl = document.getElementById(`beatport-failed-${urlHash}`);
-    const percentageEl = document.getElementById(`beatport-percentage-${urlHash}`);
-
-    const total = progress.total_tracks || 0;
-    const matched = progress.matched_tracks || 0;
-    const failed = progress.failed_tracks || 0;
-    const percentage = total > 0 ? Math.round((matched / total) * 100) : 0;
-
-    if (totalEl) totalEl.textContent = total;
-    if (matchedEl) matchedEl.textContent = matched;
-    if (failedEl) failedEl.textContent = failed;
-    if (percentageEl) percentageEl.textContent = percentage;
-}
-
-function updateBeatportModalButtons(urlHash, phase) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (!modal) return;
-
-    const footerLeft = modal.querySelector('.modal-footer-left');
-    if (footerLeft) {
-        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
-    }
-}
-
-async function startBeatportDownloadMissing(urlHash) {
-    try {
-        console.log('🔍 Starting download missing tracks for Beatport chart:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        // Support both camelCase and snake_case
-        const discoveryResults = state?.discoveryResults || state?.discovery_results;
-
-        if (!state || !discoveryResults) {
-            showToast('No discovery results available for download', 'error');
-            return;
-        }
-
-        if (!state.is_beatport_playlist) {
-            console.error('❌ State is not a Beatport playlist');
-            showToast('Invalid Beatport chart state', 'error');
-            return;
-        }
-
-        // Convert Beatport discovery results to Spotify tracks format (like Tidal does)
-        console.log(`🔍 Total discovery results: ${discoveryResults.length}`);
-        console.log(`🔍 First result (full object):`, JSON.stringify(discoveryResults[0], null, 2));
-        console.log(`🔍 Second result (full object):`, JSON.stringify(discoveryResults[1], null, 2));
-        console.log(`🔍 Results with spotify_data:`, discoveryResults.filter(r => r.spotify_data).length);
-        console.log(`🔍 Results with spotify_id:`, discoveryResults.filter(r => r.spotify_id).length);
-
-        const spotifyTracks = discoveryResults
-            .filter(result => {
-                // Accept if has spotify_data OR if has spotify_track (from automatic discovery)
-                return result.spotify_data || (result.spotify_track && result.status_class === 'found');
-            })
-            .map(result => {
-                // Use spotify_data if available, otherwise build from individual fields
-                let track;
-                if (result.spotify_data) {
-                    track = result.spotify_data;
-                } else {
-                    // Build from individual fields (automatic discovery format)
-                    // Convert album to proper object format for wishlist compatibility
-                    const albumData = result.spotify_album || 'Unknown Album';
-                    const albumObject = typeof albumData === 'object' && albumData !== null
-                        ? albumData
-                        : {
-                            name: typeof albumData === 'string' ? albumData : 'Unknown Album',
-                            album_type: 'album',
-                            images: []
-                        };
-
-                    track = {
-                        id: result.spotify_id || 'unknown',
-                        name: result.spotify_track || 'Unknown Track',
-                        artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
-                        album: albumObject,
-                        duration_ms: 0
-                    };
-                }
-
-                // Ensure artists is an array of strings
-                if (track.artists && Array.isArray(track.artists)) {
-                    track.artists = track.artists.map(artist =>
-                        typeof artist === 'string' ? artist : (artist.name || artist)
-                    );
-                } else if (track.artists && typeof track.artists === 'string') {
-                    track.artists = [track.artists];
-                } else {
-                    track.artists = ['Unknown Artist'];
-                }
-
-                // Ensure album is an object (in case it was converted back to string somehow)
-                const albumForReturn = typeof track.album === 'object' && track.album !== null
-                    ? track.album
-                    : {
-                        name: typeof track.album === 'string' ? track.album : 'Unknown Album',
-                        album_type: 'album',
-                        images: []
-                    };
-
-                return {
-                    id: track.id,
-                    name: track.name,
-                    artists: track.artists,
-                    album: albumForReturn,
-                    duration_ms: track.duration_ms || 0,
-                    external_urls: track.external_urls || {}
-                };
-            });
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        console.log(`🎧 Found ${spotifyTracks.length} Spotify tracks for Beatport download`);
-
-        // Create a virtual playlist for the download system
-        const virtualPlaylistId = `beatport_${urlHash}`;
-        const playlistName = state.playlist.name;
-
-        // Store reference for card navigation (but don't change phase yet)
-        state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
-        // Store converted playlist ID in backend but keep current phase
-        const chartHash = state.beatport_chart_hash || urlHash;
-        if (beatportChartStates[chartHash]) {
-            try {
-                await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        phase: state.phase, // Keep current phase (should be 'discovered')
-                        converted_spotify_playlist_id: virtualPlaylistId
-                    })
-                });
-                console.log('✅ Updated backend with Beatport converted playlist ID (phase unchanged)');
-            } catch (error) {
-                console.warn('⚠️ Error updating backend Beatport state:', error);
-            }
-        }
-
-        // Close the discovery modal if it's open
-        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (discoveryModal) {
-            discoveryModal.classList.add('hidden');
-            console.log('🔄 Closed Beatport discovery modal to show download modal');
-        }
-
-        // DON'T update card phase here - let the download modal handle phase changes when "Begin Analysis" is clicked
-
-        // Open download missing tracks modal using the same system as YouTube/Tidal
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-        console.log(`✅ Opened download modal for Beatport chart: ${state.playlist.name}`);
-
-    } catch (error) {
-        console.error('❌ Error starting Beatport download missing tracks:', error);
-        showToast(`Error starting downloads: ${error.message}`, 'error');
-    }
-}
-
-async function handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint) {
-    console.log(`🎵 Beatport chart clicked: ${chartType} - ${chartId} - ${chartName}`);
-
-    try {
-        showToast(`Loading ${chartName}...`, 'info');
-        showLoadingOverlay(`Loading ${chartName}...`);
-
-        const response = await fetch(`${chartEndpoint}?limit=100`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch ${chartName}: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(`No tracks found in ${chartName}`);
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartName}`);
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(data.tracks, chartName, null);
-
-    } catch (error) {
-        console.error(`❌ Error handling Beatport chart click:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chartName || chartId}: ${error.message}`, 'error');
-    }
-}
-
-function handleBeatportGenreClick(genreSlug, genreId, genreName) {
-    console.log(`🎵 Beatport genre clicked: ${genreName} (${genreSlug}/${genreId}) - SHOWING GENRE DETAIL VIEW`);
-    console.log(`📝 Debug: Parameters received - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
-
-    // Navigate to genre detail view with proper parameters
-    showBeatportGenreDetailView(genreSlug, genreId, genreName);
-}
-
-function showBeatportGenreDetailView(genreSlug, genreId, genreName) {
-    console.log(`🎯 Showing genre detail view for: ${genreName}`);
-    console.log(`📝 Debug: Function called with - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
-
-    // Hide all other beatport views
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-    const mainView = document.getElementById('beatport-main-view');
-    if (mainView) {
-        mainView.classList.remove('active');
-    }
-
-    // Show genre detail view
-    const genreDetailView = document.getElementById('beatport-genre-detail-view');
-    if (genreDetailView) {
-        genreDetailView.classList.add('active');
-        console.log(`📝 Debug: Genre detail view element found and activated`);
-
-        // Update view content
-        const titleElement = document.getElementById('genre-detail-title');
-        const breadcrumbElement = document.getElementById('genre-detail-breadcrumb');
-
-        console.log(`📝 Debug: Title element found: ${!!titleElement}, Breadcrumb element found: ${!!breadcrumbElement}`);
-
-        if (titleElement) {
-            titleElement.textContent = genreName;
-            console.log(`📝 Debug: Updated title to: ${genreName}`);
-        }
-        if (breadcrumbElement) {
-            breadcrumbElement.textContent = `Browse Charts > Genre Explorer > ${genreName} Charts`;
-            console.log(`📝 Debug: Updated breadcrumb`);
-        }
-
-        // Update chart type titles with genre name
-        const chartTitles = [
-            'genre-top-10-title',
-            'genre-top-100-title',
-            'genre-releases-top-10-title',
-            'genre-releases-top-100-title',
-            'genre-staff-picks-title',
-            'genre-latest-releases-title',
-            'genre-new-charts-title'
-        ];
-
-        chartTitles.forEach(titleId => {
-            const element = document.getElementById(titleId);
-            if (element) {
-                console.log(`📝 Debug: Found chart title element: ${titleId}`);
-            } else {
-                console.log(`📝 Debug: Missing chart title element: ${titleId}`);
-            }
-        });
-
-        document.getElementById('genre-top-10-title').textContent = `Top 10 ${genreName}`;
-        document.getElementById('genre-top-100-title').textContent = `Top 100 ${genreName}`;
-        document.getElementById('genre-releases-top-10-title').textContent = `Top 10 ${genreName} Releases`;
-        document.getElementById('genre-releases-top-100-title').textContent = `Top 100 ${genreName} Releases`;
-        document.getElementById('genre-staff-picks-title').textContent = `${genreName} Staff Picks`;
-        document.getElementById('genre-latest-releases-title').textContent = `Latest ${genreName} Releases`;
-
-        // Update Hype section titles
-        document.getElementById('genre-hype-top-10-title').textContent = `${genreName} Hype Top 10`;
-        document.getElementById('genre-hype-top-100-title').textContent = `${genreName} Hype Top 100`;
-        document.getElementById('genre-hype-picks-title').textContent = `${genreName} Hype Picks`;
-
-        // Load new charts directly (no expansion needed)
-        console.log(`🔄 Auto-loading new charts for ${genreName}...`);
-        loadNewChartsInline(genreSlug, genreId, genreName);
-
-        // Store current genre data for chart type handlers
-        genreDetailView.dataset.genreSlug = genreSlug;
-        genreDetailView.dataset.genreId = genreId;
-        genreDetailView.dataset.genreName = genreName;
-
-        // Add click handlers to chart type cards
-        setupGenreChartTypeHandlers();
-
-        console.log(`✅ Genre detail view shown for ${genreName}`);
-    } else {
-        console.error('❌ Genre detail view element not found');
-    }
-}
-
-function setupGenreChartTypeHandlers() {
-    const chartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
-
-    chartTypeCards.forEach(card => {
-        // Remove existing listeners
-        card.replaceWith(card.cloneNode(true));
-    });
-
-    // Re-select after cloning
-    const newChartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
-
-    newChartTypeCards.forEach(card => {
-        card.addEventListener('click', () => {
-            const chartType = card.dataset.chartType;
-            const genreDetailView = document.getElementById('beatport-genre-detail-view');
-            const genreSlug = genreDetailView.dataset.genreSlug;
-            const genreId = genreDetailView.dataset.genreId;
-            const genreName = genreDetailView.dataset.genreName;
-
-            // All chart types now go directly to discovery modal
-            handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType);
-        });
-    });
-}
-
-function showBeatportGenresView() {
-    // Hide genre detail view and show genres view
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-
-    const genresView = document.getElementById('beatport-genres-view');
-    if (genresView) {
-        genresView.classList.add('active');
-    }
-}
-
-async function toggleNewChartsExpansion(genreSlug, genreId, genreName) {
-    console.log(`📈 Toggling new charts expansion for: ${genreName}`);
-
-    const expandedContent = document.getElementById('new-charts-expanded');
-    const expandIndicator = document.getElementById('expand-indicator');
-    const chartsCount = document.getElementById('new-charts-count');
-
-    if (!expandedContent || !expandIndicator) {
-        console.error('❌ New charts expansion elements not found');
-        return;
-    }
-
-    // Check if already expanded
-    const isExpanded = expandedContent.style.display !== 'none';
-
-    if (isExpanded) {
-        // Collapse
-        expandedContent.style.display = 'none';
-        expandIndicator.classList.remove('expanded');
-        console.log('📉 Collapsed new charts section');
-    } else {
-        // Expand and load charts
-        expandedContent.style.display = 'block';
-        expandIndicator.classList.add('expanded');
-
-        // Load charts if not already loaded
-        await loadNewChartsInline(genreSlug, genreId, genreName);
-        console.log('📈 Expanded new charts section');
-    }
-}
-
-async function loadNewChartsInline(genreSlug, genreId, genreName) {
-    const chartsGrid = document.getElementById('new-charts-grid');
-    const loadingInline = document.getElementById('charts-loading-inline');
-
-    if (!chartsGrid || !loadingInline) {
-        console.error('❌ Inline charts elements not found');
-        return;
-    }
-
-    // Show loading state
-    loadingInline.style.display = 'block';
-    chartsGrid.style.display = 'none';
-    chartsGrid.innerHTML = '';
-
-    try {
-        console.log(`🔍 Loading inline charts for ${genreName}...`);
-
-        // Fetch charts from the new-charts endpoint
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=20`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch charts: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            // Show empty state
-            chartsGrid.innerHTML = `
-                <div class="new-charts-empty">
-                    <h4>No Charts Available</h4>
-                    <p>No curated charts found for ${genreName} at the moment.</p>
-                </div>
-            `;
-        } else {
-            // Populate charts grid
-            const chartsHTML = data.tracks.map((chart, index) => {
-                const chartName = chart.title || 'Untitled Chart';
-                const artistName = chart.artist || 'Various Artists';
-                const chartUrl = chart.url || '';
-
-                return `
-                    <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
-                        <div class="new-chart-header">
-                            <div class="new-chart-icon">📈</div>
-                            <div class="new-chart-title">
-                                <h5>${chartName}</h5>
-                                <p class="new-chart-artist">by ${artistName}</p>
-                            </div>
-                        </div>
-                        <div class="new-chart-description">
-                            Curated ${genreName} chart collection
-                        </div>
-                        <div class="new-chart-footer">
-                            <div class="new-chart-type">Chart</div>
-                            <div class="new-chart-action">Explore →</div>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-
-            chartsGrid.innerHTML = chartsHTML;
-
-            // Add click handlers to chart items
-            setupNewChartItemHandlers(genreSlug, genreId, genreName);
-        }
-
-        // Hide loading and show grid
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        console.log(`✅ Loaded ${data.tracks?.length || 0} inline charts for ${genreName}`);
-        showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
-
-    } catch (error) {
-        console.error(`❌ Error loading inline charts for ${genreName}:`, error);
-
-        // Show error state
-        chartsGrid.innerHTML = `
-            <div class="new-charts-empty">
-                <h4>Error Loading Charts</h4>
-                <p>Unable to load chart collections for ${genreName}.</p>
-            </div>
-        `;
-
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        showToast(`Error loading charts: ${error.message}`, 'error');
-    }
-}
-
-async function loadDJChartsInline() {
-    const chartsGrid = document.getElementById('dj-charts-grid');
-    const loadingInline = document.getElementById('dj-charts-loading-inline');
-
-    if (!chartsGrid || !loadingInline) {
-        console.error('❌ DJ charts elements not found');
-        return;
-    }
-
-    // Show loading state
-    loadingInline.style.display = 'block';
-    chartsGrid.style.display = 'none';
-    chartsGrid.innerHTML = '';
-
-    try {
-        console.log('🔍 Loading DJ charts...');
-
-        // Fetch charts from the dj-charts-improved endpoint
-        const response = await fetch('/api/beatport/dj-charts-improved?limit=20');
-        if (!response.ok) {
-            throw new Error(`Failed to fetch DJ charts: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.charts || data.charts.length === 0) {
-            // Show empty state
-            chartsGrid.innerHTML = `
-                <div class="new-charts-empty">
-                    <h4>No DJ Charts Available</h4>
-                    <p>No DJ curated charts found at the moment.</p>
-                </div>
-            `;
-            loadingInline.style.display = 'none';
-            chartsGrid.style.display = 'grid';
-            return;
-        }
-
-        // Create chart items using New Charts structure
-        const chartsHTML = data.charts.map(chart => {
-            const chartName = chart.name || chart.title || 'Untitled Chart';
-            const artistName = chart.artist || chart.curator || 'Various Artists';
-            const chartUrl = chart.url || chart.chart_url || '';
-
-            return `
-                <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
-                    <div class="new-chart-header">
-                        <div class="new-chart-icon">🎧</div>
-                        <div class="new-chart-title">
-                            <h5>${chartName}</h5>
-                            <p class="new-chart-artist">by ${artistName}</p>
-                        </div>
-                    </div>
-                    <div class="new-chart-description">
-                        DJ curated chart collection
-                    </div>
-                    <div class="new-chart-footer">
-                        <div class="new-chart-type">DJ Chart</div>
-                        <div class="new-chart-action">Explore →</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        chartsGrid.innerHTML = chartsHTML;
-
-        // Hide loading, show content
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        // Setup click handlers for chart items
-        setupDJChartItemHandlers();
-
-        console.log(`✅ Loaded ${data.charts.length} DJ charts`);
-
-    } catch (error) {
-        console.error('❌ Error loading DJ charts:', error);
-
-        // Show error state
-        chartsGrid.innerHTML = `
-            <div class="new-charts-empty">
-                <h4>Error Loading DJ Charts</h4>
-                <p>Unable to load DJ chart collections.</p>
-            </div>
-        `;
-
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        showToast(`Error loading DJ charts: ${error.message}`, 'error');
-    }
-}
-
-async function loadFeaturedChartsInline() {
-    const chartsGrid = document.getElementById('featured-charts-grid');
-    const loadingInline = document.getElementById('featured-charts-loading-inline');
-
-    if (!chartsGrid || !loadingInline) {
-        console.error('❌ Featured charts elements not found');
-        return;
-    }
-
-    // Show loading state
-    loadingInline.style.display = 'block';
-    chartsGrid.style.display = 'none';
-    chartsGrid.innerHTML = '';
-
-    try {
-        console.log('🔍 Loading Featured charts...');
-
-        // Fetch charts from the homepage/featured-charts endpoint
-        const response = await fetch('/api/beatport/homepage/featured-charts?limit=20');
-        if (!response.ok) {
-            throw new Error(`Failed to fetch Featured charts: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            // Show empty state
-            chartsGrid.innerHTML = `
-                <div class="new-charts-empty">
-                    <h4>No Featured Charts Available</h4>
-                    <p>No featured curated charts found at the moment.</p>
-                </div>
-            `;
-            loadingInline.style.display = 'none';
-            chartsGrid.style.display = 'grid';
-            return;
-        }
-
-        // Create chart items using New Charts structure
-        const chartsHTML = data.tracks.map(chart => {
-            const chartName = chart.name || chart.title || 'Untitled Chart';
-            const artistName = chart.artist || chart.curator || 'Various Artists';
-            const chartUrl = chart.url || chart.chart_url || '';
-
-            return `
-                <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
-                    <div class="new-chart-header">
-                        <div class="new-chart-icon">⭐</div>
-                        <div class="new-chart-title">
-                            <h5>${chartName}</h5>
-                            <p class="new-chart-artist">by ${artistName}</p>
-                        </div>
-                    </div>
-                    <div class="new-chart-description">
-                        Editor curated chart collection
-                    </div>
-                    <div class="new-chart-footer">
-                        <div class="new-chart-type">Featured Chart</div>
-                        <div class="new-chart-action">Explore →</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        chartsGrid.innerHTML = chartsHTML;
-
-        // Hide loading, show content
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        // Setup click handlers for chart items
-        setupFeaturedChartItemHandlers();
-
-        console.log(`✅ Loaded ${data.tracks.length} Featured charts`);
-
-    } catch (error) {
-        console.error('❌ Error loading Featured charts:', error);
-
-        // Show error state
-        chartsGrid.innerHTML = `
-            <div class="new-charts-empty">
-                <h4>Error Loading Featured Charts</h4>
-                <p>Unable to load featured chart collections.</p>
-            </div>
-        `;
-
-        loadingInline.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        showToast(`Error loading Featured charts: ${error.message}`, 'error');
-    }
-}
-
-function setupDJChartItemHandlers() {
-    const chartItems = document.querySelectorAll('#dj-charts-grid .new-chart-item');
-
-    chartItems.forEach(item => {
-        item.addEventListener('click', async () => {
-            const chartName = item.dataset.chartName;
-            const chartUrl = item.dataset.chartUrl;
-
-            console.log(`🎧 DJ Chart clicked: ${chartName}`);
-
-            try {
-                showToast(`Loading ${chartName}...`, 'info');
-                showLoadingOverlay(`Scraping ${chartName}...`);
-
-                const response = await fetch('/api/beatport/chart/extract', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`Failed to extract chart tracks: ${response.status}`);
-                }
-
-                const data = await response.json();
-                if (!data.success || !data.tracks || data.tracks.length === 0) {
-                    throw new Error('No tracks found in chart');
-                }
-
-                console.log(`✅ Extracted ${data.tracks.length} raw tracks from DJ chart, enriching...`);
-                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
-                hideLoadingOverlay();
-                openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
-            } catch (error) {
-                console.error('❌ Error extracting DJ chart tracks:', error);
-                hideLoadingOverlay();
-                showToast(`Error loading chart: ${error.message}`, 'error');
-            }
-        });
-    });
-}
-
-function setupFeaturedChartItemHandlers() {
-    const chartItems = document.querySelectorAll('#featured-charts-grid .new-chart-item');
-
-    chartItems.forEach(item => {
-        item.addEventListener('click', async () => {
-            const chartName = item.dataset.chartName;
-            const chartUrl = item.dataset.chartUrl;
-
-            console.log(`⭐ Featured Chart clicked: ${chartName}`);
-
-            try {
-                showToast(`Loading ${chartName}...`, 'info');
-                showLoadingOverlay(`Scraping ${chartName}...`);
-
-                const response = await fetch('/api/beatport/chart/extract', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`Failed to extract chart tracks: ${response.status}`);
-                }
-
-                const data = await response.json();
-                if (!data.success || !data.tracks || data.tracks.length === 0) {
-                    throw new Error('No tracks found in chart');
-                }
-
-                console.log(`✅ Extracted ${data.tracks.length} raw tracks from Featured chart, enriching...`);
-                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
-                hideLoadingOverlay();
-                openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
-            } catch (error) {
-                console.error('❌ Error extracting Featured chart tracks:', error);
-                hideLoadingOverlay();
-                showToast(`Error loading chart: ${error.message}`, 'error');
-            }
-        });
-    });
-}
-
-function setupNewChartItemHandlers(genreSlug, genreId, genreName) {
-    const chartItems = document.querySelectorAll('#new-charts-grid .new-chart-item');
-
-    chartItems.forEach(item => {
-        item.addEventListener('click', async () => {
-            const chartName = item.dataset.chartName;
-            const chartArtist = item.dataset.chartArtist;
-            const chartUrl = item.dataset.chartUrl;
-
-            console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
-
-            const fullChartName = `${chartName} (${genreName})`;
-
-            try {
-                showToast(`Loading ${chartName}...`, 'info');
-                showLoadingOverlay(`Scraping ${chartName}...`);
-
-                const response = await fetch('/api/beatport/chart/extract', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch chart content: ${response.status}`);
-                }
-
-                const data = await response.json();
-                if (!data.success || !data.tracks || data.tracks.length === 0) {
-                    throw new Error('No tracks found in chart');
-                }
-
-                console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
-                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
-
-                hideLoadingOverlay();
-                openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
-
-            } catch (error) {
-                console.error(`❌ Error loading chart: ${error.message}`);
-                hideLoadingOverlay();
-                showToast(`Error loading chart: ${error.message}`, 'error');
-            }
-        });
-    });
-}
-
-function showBeatportGenreDetailViewFromBack() {
-    // Show genre detail view (used by charts list back button)
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-
-    const genreDetailView = document.getElementById('beatport-genre-detail-view');
-    if (genreDetailView) {
-        genreDetailView.classList.add('active');
-    }
-}
-
-async function showBeatportGenreChartsListView(genreSlug, genreId, genreName) {
-    console.log(`📈 Showing charts list for: ${genreName}`);
-
-    // Hide all other beatport views
-    document.querySelectorAll('.beatport-sub-view').forEach(view => {
-        view.classList.remove('active');
-    });
-    const mainView = document.getElementById('beatport-main-view');
-    if (mainView) {
-        mainView.classList.remove('active');
-    }
-
-    // Show charts list view
-    const chartsListView = document.getElementById('beatport-genre-charts-list-view');
-    if (chartsListView) {
-        chartsListView.classList.add('active');
-
-        // Update view content
-        document.getElementById('genre-charts-list-title').textContent = `New ${genreName} Charts`;
-        document.getElementById('genre-charts-list-breadcrumb').textContent = `Browse Charts > Genre Explorer > ${genreName} Charts > New Charts`;
-
-        // Store current genre data for individual chart handlers
-        chartsListView.dataset.genreSlug = genreSlug;
-        chartsListView.dataset.genreId = genreId;
-        chartsListView.dataset.genreName = genreName;
-
-        // Load charts for this genre
-        await loadGenreChartsList(genreSlug, genreId, genreName);
-
-        console.log(`✅ Charts list view shown for ${genreName}`);
-    } else {
-        console.error('❌ Charts list view element not found');
-    }
-}
-
-async function loadGenreChartsList(genreSlug, genreId, genreName) {
-    const chartsGrid = document.getElementById('genre-charts-grid');
-    const loadingPlaceholder = document.getElementById('charts-loading-placeholder');
-
-    if (!chartsGrid || !loadingPlaceholder) {
-        console.error('❌ Charts grid or loading placeholder not found');
-        return;
-    }
-
-    // Show loading state
-    loadingPlaceholder.style.display = 'block';
-    chartsGrid.style.display = 'none';
-    chartsGrid.innerHTML = '';
-
-    try {
-        console.log(`🔍 Loading charts for ${genreName}...`);
-
-        // Fetch charts from the new-charts endpoint
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=50`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch charts: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            // Show empty state
-            chartsGrid.innerHTML = `
-                <div class="genre-charts-empty">
-                    <h3>No Charts Available</h3>
-                    <p>No curated charts found for ${genreName} at the moment.<br>Check back later for new DJ and artist chart collections.</p>
-                </div>
-            `;
-        } else {
-            // Populate charts grid
-            const chartsHTML = data.tracks.map((chart, index) => {
-                const chartName = chart.title || 'Untitled Chart';
-                const artistName = chart.artist || 'Various Artists';
-                const chartUrl = chart.url || '';
-
-                // Extract chart ID from URL for click handling
-                const chartId = chartUrl.split('/').pop() || `chart_${index}`;
-
-                return `
-                    <div class="genre-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
-                        <div class="chart-item-header">
-                            <div class="chart-item-icon">📈</div>
-                            <div class="chart-item-title">
-                                <h4>${chartName}</h4>
-                                <p class="chart-item-artist">by ${artistName}</p>
-                            </div>
-                        </div>
-                        <div class="chart-item-description">
-                            Curated chart collection featuring ${genreName} tracks
-                        </div>
-                        <div class="chart-item-footer">
-                            <div class="chart-item-type">Chart</div>
-                            <div class="chart-item-action">Click to explore →</div>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-
-            chartsGrid.innerHTML = chartsHTML;
-
-            // Add click handlers to chart items
-            setupGenreChartItemHandlers(genreSlug, genreId, genreName);
-        }
-
-        // Hide loading and show grid
-        loadingPlaceholder.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        console.log(`✅ Loaded ${data.tracks?.length || 0} charts for ${genreName}`);
-        showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
-
-    } catch (error) {
-        console.error(`❌ Error loading charts for ${genreName}:`, error);
-
-        // Show error state
-        chartsGrid.innerHTML = `
-            <div class="genre-charts-empty">
-                <h3>Error Loading Charts</h3>
-                <p>Unable to load chart collections for ${genreName}.<br>Please try again later.</p>
-            </div>
-        `;
-
-        loadingPlaceholder.style.display = 'none';
-        chartsGrid.style.display = 'grid';
-
-        showToast(`Error loading charts: ${error.message}`, 'error');
-    }
-}
-
-function setupGenreChartItemHandlers(genreSlug, genreId, genreName) {
-    const chartItems = document.querySelectorAll('#genre-charts-grid .genre-chart-item');
-
-    chartItems.forEach(item => {
-        item.addEventListener('click', async () => {
-            const chartName = item.dataset.chartName;
-            const chartArtist = item.dataset.chartArtist;
-            const chartUrl = item.dataset.chartUrl;
-
-            console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
-
-            const fullChartName = `${chartName} (${genreName})`;
-
-            try {
-                showToast(`Loading ${chartName}...`, 'info');
-                showLoadingOverlay(`Scraping ${chartName}...`);
-
-                const response = await fetch('/api/beatport/chart/extract', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch chart content: ${response.status}`);
-                }
-
-                const data = await response.json();
-                if (!data.success || !data.tracks || data.tracks.length === 0) {
-                    throw new Error('No tracks found in chart');
-                }
-
-                console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
-                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
-
-                hideLoadingOverlay();
-                openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
-
-            } catch (error) {
-                console.error(`❌ Error loading chart: ${error.message}`);
-                hideLoadingOverlay();
-                showToast(`Error loading chart: ${error.message}`, 'error');
-            }
-        });
-    });
-}
-
-async function handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType) {
-    console.log(`🎯 Genre chart type clicked: ${chartType} for ${genreName} (${genreSlug}/${genreId})`);
-
-    // Map chart types to API endpoints and create descriptive names
-    const chartTypeMap = {
-        'top-10': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/top-10`,
-            name: `Top 10 ${genreName}`,
-            limit: 10
-        },
-        'top-100': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/tracks`,
-            name: `Top 100 ${genreName}`,
-            limit: 100
-        },
-        'releases-top-10': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-10`,
-            name: `Top 10 ${genreName} Releases`,
-            limit: 10
-        },
-        'releases-top-100': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-100`,
-            name: `Top 100 ${genreName} Releases`,
-            limit: 100
-        },
-        'staff-picks': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/staff-picks`,
-            name: `${genreName} Staff Picks`,
-            limit: 50
-        },
-        'latest-releases': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/latest-releases`,
-            name: `Latest ${genreName} Releases`,
-            limit: 50
-        },
-        'hype-top-10': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-10`,
-            name: `${genreName} Hype Top 10`,
-            limit: 10
-        },
-        'hype-top-100': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-100`,
-            name: `${genreName} Hype Top 100`,
-            limit: 100
-        },
-        'hype-picks': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-picks`,
-            name: `${genreName} Hype Picks`,
-            limit: 50
-        },
-        'new-charts': {
-            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/new-charts`,
-            name: `New ${genreName} Charts`,
-            limit: 100
-        }
-    };
-
-    const chartConfig = chartTypeMap[chartType];
-    if (!chartConfig) {
-        console.error(`❌ Unknown chart type: ${chartType}`);
-        showToast(`Unknown chart type: ${chartType}`, 'error');
-        return;
-    }
-
-    try {
-        showToast(`Loading ${chartConfig.name}...`, 'info');
-        showLoadingOverlay(`Loading ${chartConfig.name}...`);
-
-        const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
-        if (!response.ok) {
-            throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(`No tracks found in ${chartConfig.name}`);
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
-
-    } catch (error) {
-        console.error(`❌ Error loading ${chartConfig.name}:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
-    }
-}
-
-// ===============================
-// SPOTIFY PUBLIC LINK FUNCTIONALITY
-// ===============================
-
-let spotifyPublicPlaylists = []; // Array of loaded Spotify public playlist objects
-let spotifyPublicPlaylistStates = {}; // Key: url_hash, Value: state dict
-
-async function parseSpotifyPublicUrl() {
-    const urlInput = document.getElementById('spotify-public-url-input');
-    const url = urlInput.value.trim();
-
-    if (!url) {
-        showToast('Please enter a Spotify URL', 'error');
-        return;
-    }
-
-    // Basic URL validation
-    if (!url.includes('open.spotify.com/playlist') && !url.includes('open.spotify.com/album') &&
-        !url.startsWith('spotify:playlist:') && !url.startsWith('spotify:album:')) {
-        showToast('Please enter a valid Spotify playlist or album URL', 'error');
-        return;
-    }
-
-    // Check if already loaded
-    if (_isUrlAlreadyLoaded('spotify-public', url)) {
-        showToast('This playlist is already loaded', 'info');
-        urlInput.value = '';
-        return;
-    }
-
-    const parseBtn = document.getElementById('spotify-public-parse-btn');
-    if (parseBtn) {
-        parseBtn.disabled = true;
-        parseBtn.textContent = 'Loading...';
-    }
-
-    try {
-        console.log('🎵 Parsing public Spotify URL:', url);
-
-        const response = await fetch('/api/spotify/parse-public', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ url })
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error: ${result.error}`, 'error');
-            return;
-        }
-
-        // Check if already loaded
-        if (spotifyPublicPlaylists.find(p => String(p.url_hash) === String(result.url_hash))) {
-            showToast('This playlist is already loaded', 'info');
-            urlInput.value = '';
-            return;
-        }
-
-        console.log(`✅ Spotify ${result.type} parsed: ${result.name} (${result.track_count} tracks)`);
-
-        spotifyPublicPlaylists.push(result);
-
-        // Auto-mirror
-        if (result.tracks && result.tracks.length > 0) {
-            mirrorPlaylist('spotify_public', result.url_hash, result.name, result.tracks.map(t => ({
-                track_name: t.name || '',
-                artist_name: Array.isArray(t.artists) ? t.artists.map(a => a.name).join(', ') : '',
-                album_name: t.album?.name || '',
-                duration_ms: t.duration_ms || 0,
-                source_track_id: t.id || ''
-            })), { owner: result.subtitle || '', image_url: '', description: result.url || '' });
-        }
-
-        // Save to URL history
-        saveUrlHistory('spotify-public', url, result.name);
-
-        renderSpotifyPublicPlaylists();
-        await loadSpotifyPublicPlaylistStatesFromBackend();
-
-        urlInput.value = '';
-        showToast(`Loaded: ${result.name} (${result.track_count} tracks)`, 'success');
-        console.log(`🎵 Loaded Spotify playlist: ${result.name}`);
-
-    } catch (error) {
-        console.error('❌ Error parsing Spotify URL:', error);
-        showToast(`Error parsing Spotify URL: ${error.message}`, 'error');
-    } finally {
-        if (parseBtn) {
-            parseBtn.disabled = false;
-            parseBtn.textContent = 'Load';
-        }
-    }
-}
-
-function renderSpotifyPublicPlaylists() {
-    const container = document.getElementById('spotify-public-playlist-container');
-    if (spotifyPublicPlaylists.length === 0) {
-        container.innerHTML = `<div class="playlist-placeholder">Paste a Spotify playlist or album URL above to load tracks without needing Spotify API credentials.</div>`;
-        return;
-    }
-
-    container.innerHTML = spotifyPublicPlaylists.map(p => {
-        if (!spotifyPublicPlaylistStates[p.url_hash]) {
-            spotifyPublicPlaylistStates[p.url_hash] = {
-                phase: 'fresh',
-                playlist: p
-            };
-        }
-        return createSpotifyPublicCard(p);
-    }).join('');
-
-    // Add click handlers to cards
-    spotifyPublicPlaylists.forEach(p => {
-        const card = document.getElementById(`spotify-public-card-${p.url_hash}`);
-        if (card) {
-            card.addEventListener('click', () => handleSpotifyPublicCardClick(p.url_hash));
-        }
-    });
-}
-
-function createSpotifyPublicCard(playlist) {
-    const state = spotifyPublicPlaylistStates[playlist.url_hash];
-    const phase = state ? state.phase : 'fresh';
-    const isAlbum = playlist.type === 'album';
-
-    let buttonText = getActionButtonText(phase);
-    let phaseText = getPhaseText(phase);
-    let phaseColor = getPhaseColor(phase);
-
-    return `
-        <div class="youtube-playlist-card spotify-public-card" id="spotify-public-card-${playlist.url_hash}">
-            <div class="playlist-card-icon">${isAlbum ? '💿' : '🎵'}</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-type-badge" style="color: ${isAlbum ? '#b3b3b3' : '#1DB954'}; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px;">${isAlbum ? 'Album' : 'Playlist'}</span>
-                    <span class="playlist-card-track-count">${playlist.track_count || playlist.tracks.length} tracks</span>
-                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
-                <!-- Progress will be dynamically updated based on phase -->
-            </div>
-            <button class="playlist-card-action-btn">${buttonText}</button>
-        </div>
-    `;
-}
-
-async function handleSpotifyPublicCardClick(urlHash) {
-    const state = spotifyPublicPlaylistStates[urlHash];
-    if (!state) {
-        console.error(`No state found for Spotify public playlist: ${urlHash}`);
-        showToast('Playlist state not found - try refreshing the page', 'error');
-        return;
-    }
-
-    if (!state.playlist) {
-        console.error(`No playlist data found for Spotify public playlist: ${urlHash}`);
-        showToast('Playlist data missing - try refreshing the page', 'error');
-        return;
-    }
-
-    if (!state.phase) {
-        state.phase = 'fresh';
-    }
-
-    console.log(`🎵 [Card Click] Spotify public card clicked: ${urlHash}, Phase: ${state.phase}`);
-
-    if (state.phase === 'fresh') {
-        console.log(`🎵 Using pre-loaded Spotify public playlist data for: ${state.playlist.name}`);
-        openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
-
-    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
-        console.log(`🎵 [Card Click] Opening Spotify public discovery modal for ${state.phase} phase`);
-
-        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
-            try {
-                const stateResponse = await fetch(`/api/spotify-public/state/${urlHash}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    if (fullState.discovery_results) {
-                        state.discovery_results = fullState.discovery_results;
-                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
-                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
-                        spotifyPublicPlaylistStates[urlHash] = { ...spotifyPublicPlaylistStates[urlHash], ...state };
-                        console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
-                    }
-                }
-            } catch (error) {
-                console.error(`Failed to fetch discovery results from backend: ${error}`);
-            }
-        }
-
-        openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
-    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
-        if (state.convertedSpotifyPlaylistId) {
-            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
-                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
-                if (process.modalElement) {
-                    process.modalElement.style.display = 'flex';
-                } else {
-                    await rehydrateSpotifyPublicDownloadModal(urlHash, state);
-                }
-            } else {
-                await rehydrateSpotifyPublicDownloadModal(urlHash, state);
-            }
-        } else {
-            if (state.discovery_results && state.discovery_results.length > 0) {
-                openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
-            } else {
-                showToast('Unable to open download modal - missing playlist data', 'error');
-            }
-        }
-    }
-}
-
-async function rehydrateSpotifyPublicDownloadModal(urlHash, state) {
-    try {
-        if (!state || !state.playlist) {
-            showToast('Cannot open download modal - invalid playlist data', 'error');
-            return;
-        }
-
-        const spotifyTracks = state.discovery_results
-            ?.filter(result => result.spotify_data)
-            ?.map(result => result.spotify_data) || [];
-
-        if (spotifyTracks.length > 0) {
-            const virtualPlaylistId = state.convertedSpotifyPlaylistId || `spotify_public_${urlHash}`;
-            await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
-
-            if (state.download_process_id) {
-                const process = activeDownloadProcesses[virtualPlaylistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = state.download_process_id;
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-                    startModalDownloadPolling(virtualPlaylistId);
-                }
-            }
-        } else {
-            showToast('No Spotify tracks found for download', 'error');
-        }
-    } catch (error) {
-        console.error(`Error rehydrating Spotify public download modal: ${error}`);
-    }
-}
-
-async function openSpotifyPublicDiscoveryModal(urlHash, playlistData) {
-    console.log(`🎵 Opening Spotify public discovery modal (reusing YouTube modal): ${playlistData.name}`);
-
-    const fakeUrlHash = `spotifypublic_${urlHash}`;
-
-    const cardState = spotifyPublicPlaylistStates[urlHash];
-    const isAlreadyDiscovered = cardState && (cardState.phase === 'discovered' || cardState.phase === 'syncing' || cardState.phase === 'sync_complete');
-    const isCurrentlyDiscovering = cardState && cardState.phase === 'discovering';
-
-    let transformedResults = [];
-    let actualMatches = 0;
-    if (isAlreadyDiscovered && cardState.discovery_results) {
-        transformedResults = cardState.discovery_results.map((result, index) => {
-            const isFound = result.status === 'found' ||
-                result.status === '✅ Found' ||
-                result.status_class === 'found' ||
-                result.spotify_data ||
-                result.spotify_track;
-            if (isFound) actualMatches++;
-
-            return {
-                index: index,
-                yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
-                yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                status: isFound ? '✅ Found' : '❌ Not Found',
-                status_class: isFound ? 'found' : 'not-found',
-                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                spotify_artist: result.spotify_data && result.spotify_data.artists ?
-                    (Array.isArray(result.spotify_data.artists)
-                        ? result.spotify_data.artists
-                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                            .filter(Boolean)
-                            .join(', ') || '-'
-                        : result.spotify_data.artists)
-                    : (result.spotify_artist || '-'),
-                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                spotify_data: result.spotify_data,
-                spotify_id: result.spotify_id,
-                manual_match: result.manual_match
-            };
-        });
-        console.log(`🎵 Spotify public modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
-    }
-
-    // Normalize artist objects to strings for the discovery modal table
-    const normalizedTracks = playlistData.tracks.map(t => ({
-        ...t,
-        artists: Array.isArray(t.artists)
-            ? t.artists.map(a => typeof a === 'object' ? a.name : a)
-            : t.artists
-    }));
-
-    const modalPhase = cardState ? cardState.phase : 'fresh';
-    youtubePlaylistStates[fakeUrlHash] = {
-        phase: modalPhase,
-        playlist: {
-            name: playlistData.name,
-            tracks: normalizedTracks
-        },
-        is_spotify_public_playlist: true,
-        spotify_public_playlist_id: urlHash,
-        discovery_progress: isAlreadyDiscovered ? 100 : 0,
-        spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
-        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
-        spotify_total: playlistData.tracks.length,
-        discovery_results: transformedResults,
-        discoveryResults: transformedResults,
-        discoveryProgress: isAlreadyDiscovered ? 100 : 0
-    };
-
-    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
-        try {
-            console.log(`🔍 Starting Spotify public discovery for: ${playlistData.name}`);
-
-            const response = await fetch(`/api/spotify-public/discovery/start/${urlHash}`, {
-                method: 'POST'
-            });
-
-            const result = await response.json();
-
-            if (result.error) {
-                console.error('Error starting Spotify public discovery:', result.error);
-                showToast(`Error starting discovery: ${result.error}`, 'error');
-                return;
-            }
-
-            console.log('Spotify public discovery started, beginning polling...');
-
-            spotifyPublicPlaylistStates[urlHash].phase = 'discovering';
-            updateSpotifyPublicCardPhase(urlHash, 'discovering');
-            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
-
-            startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
-
-        } catch (error) {
-            console.error('Error starting Spotify public discovery:', error);
-            showToast(`Error starting discovery: ${error.message}`, 'error');
-        }
-    } else if (isCurrentlyDiscovering) {
-        console.log(`🔄 Resuming Spotify public discovery polling for: ${playlistData.name}`);
-        startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
-    } else if (cardState && cardState.phase === 'syncing') {
-        console.log(`🔄 Resuming Spotify public sync polling for: ${playlistData.name}`);
-        startSpotifyPublicSyncPolling(fakeUrlHash);
-    } else {
-        console.log('Using existing results - no need to re-discover');
-    }
-
-    openYouTubeDiscoveryModal(fakeUrlHash);
-}
-
-function startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash) {
-    console.log(`🔄 Starting Spotify public discovery polling for: ${urlHash}`);
-
-    if (activeYouTubePollers[fakeUrlHash]) {
-        clearInterval(activeYouTubePollers[fakeUrlHash]);
-    }
-
-    // WebSocket subscription
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [urlHash] });
-        _discoveryProgressCallbacks[urlHash] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-                return;
-            }
-            const transformed = {
-                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
-                complete: data.complete,
-                results: (data.results || []).map((r, i) => {
-                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
-                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
-                    return {
-                        index: i, yt_track: r.spotify_public_track ? r.spotify_public_track.name : 'Unknown',
-                        yt_artist: r.spotify_public_track ? (r.spotify_public_track.artists ? r.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
-                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
-                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
-                        spotify_artist: r.spotify_data && r.spotify_data.artists
-                            ? (Array.isArray(r.spotify_data.artists)
-                                ? (r.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : r.spotify_data.artists)
-                            : (r.spotify_artist || '-'),
-                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
-                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
-                        wing_it_fallback: isWingIt
-                    };
-                })
-            };
-            const st = youtubePlaylistStates[fakeUrlHash];
-            if (st) {
-                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
-                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
-                st.discovery_results = data.results; st.discoveryResults = transformed.results;
-                st.phase = data.phase;
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
-            }
-            if (spotifyPublicPlaylistStates[urlHash]) {
-                spotifyPublicPlaylistStates[urlHash].phase = data.phase;
-                spotifyPublicPlaylistStates[urlHash].discovery_results = data.results;
-                spotifyPublicPlaylistStates[urlHash].spotify_matches = data.spotify_matches;
-                spotifyPublicPlaylistStates[urlHash].discovery_progress = data.progress;
-                updateSpotifyPublicCardPhase(urlHash, data.phase);
-            }
-            updateSpotifyPublicCardProgress(urlHash, data);
-            if (data.complete) {
-                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        if (socketConnected) return;
-        try {
-            const response = await fetch(`/api/spotify-public/discovery/status/${urlHash}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('Error polling Spotify public discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-                return;
-            }
-
-            const transformedStatus = {
-                progress: status.progress,
-                spotify_matches: status.spotify_matches,
-                spotify_total: status.spotify_total,
-                complete: status.complete,
-                results: status.results.map((result, index) => {
-                    const isFound = result.status === 'found' ||
-                        result.status === '✅ Found' ||
-                        result.status_class === 'found' ||
-                        result.spotify_data ||
-                        result.spotify_track;
-
-                    return {
-                        index: index,
-                        yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
-                        yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
-                        status: isFound ? '✅ Found' : '❌ Not Found',
-                        status_class: isFound ? 'found' : 'not-found',
-                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                        spotify_artist: result.spotify_data && result.spotify_data.artists
-                            ? (Array.isArray(result.spotify_data.artists)
-                                ? (result.spotify_data.artists
-                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
-                                    .filter(Boolean)
-                                    .join(', ') || '-')
-                                : result.spotify_data.artists)
-                            : (result.spotify_artist || '-'),
-                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
-                        spotify_data: result.spotify_data,
-                        spotify_id: result.spotify_id,
-                        manual_match: result.manual_match
-                    };
-                })
-            };
-
-            const state = youtubePlaylistStates[fakeUrlHash];
-            if (state) {
-                state.discovery_progress = status.progress;
-                state.discoveryProgress = status.progress;
-                state.spotify_matches = status.spotify_matches;
-                state.spotifyMatches = status.spotify_matches;
-                state.discovery_results = status.results;
-                state.discoveryResults = transformedStatus.results;
-                state.phase = status.phase;
-
-                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
-
-                if (spotifyPublicPlaylistStates[urlHash]) {
-                    spotifyPublicPlaylistStates[urlHash].phase = status.phase;
-                    spotifyPublicPlaylistStates[urlHash].discovery_results = status.results;
-                    spotifyPublicPlaylistStates[urlHash].spotify_matches = status.spotify_matches;
-                    spotifyPublicPlaylistStates[urlHash].discovery_progress = status.progress;
-                    updateSpotifyPublicCardPhase(urlHash, status.phase);
-                }
-
-                updateSpotifyPublicCardProgress(urlHash, status);
-
-                console.log(`🔄 Spotify public discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
-            }
-
-            if (status.complete) {
-                console.log(`Spotify public discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[fakeUrlHash];
-            }
-
-        } catch (error) {
-            console.error('Error polling Spotify public discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[fakeUrlHash];
-        }
-    }, 1000);
-
-    activeYouTubePollers[fakeUrlHash] = pollInterval;
-}
-
-async function loadSpotifyPublicPlaylistStatesFromBackend() {
-    try {
-        console.log('🎵 Loading Spotify public playlist states from backend...');
-
-        const response = await fetch('/api/spotify-public/playlists/states');
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to fetch Spotify public playlist states');
-        }
-
-        const data = await response.json();
-        const states = data.states || [];
-
-        console.log(`🎵 Found ${states.length} stored Spotify public playlist states in backend`);
-
-        if (states.length === 0) return;
-
-        for (const stateInfo of states) {
-            await applySpotifyPublicPlaylistState(stateInfo);
-        }
-
-        // Rehydrate download modals for playlists in downloading/download_complete phases
-        for (const stateInfo of states) {
-            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
-                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
-
-                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
-
-                if (!activeDownloadProcesses[convertedPlaylistId]) {
-                    console.log(`Rehydrating download modal for Spotify public playlist: ${stateInfo.playlist_id}`);
-                    try {
-                        const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(stateInfo.playlist_id));
-                        if (!playlistData) continue;
-
-                        const spotifyTracks = spotifyPublicPlaylistStates[stateInfo.playlist_id]?.discovery_results
-                            ?.filter(result => result.spotify_data)
-                            ?.map(result => result.spotify_data) || [];
-
-                        if (spotifyTracks.length > 0) {
-                            await openDownloadMissingModalForTidal(
-                                convertedPlaylistId,
-                                playlistData.name,
-                                spotifyTracks
-                            );
-
-                            const process = activeDownloadProcesses[convertedPlaylistId];
-                            if (process) {
-                                process.status = 'running';
-                                process.batchId = stateInfo.download_process_id;
-                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                                if (beginBtn) beginBtn.style.display = 'none';
-                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-                                startModalDownloadPolling(convertedPlaylistId);
-                            }
-                        }
-                    } catch (error) {
-                        console.error(`Error rehydrating Spotify public download modal for ${stateInfo.playlist_id}:`, error);
-                    }
-                }
-            }
-        }
-
-        console.log('Spotify public playlist states loaded and applied');
-
-    } catch (error) {
-        console.error('Error loading Spotify public playlist states:', error);
-    }
-}
-
-async function applySpotifyPublicPlaylistState(stateInfo) {
-    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
-
-    try {
-        console.log(`🎵 Applying saved state for Spotify public playlist: ${playlist_id}, Phase: ${phase}`);
-
-        const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(playlist_id));
-        if (!playlistData) {
-            console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
-            return;
-        }
-
-        if (!spotifyPublicPlaylistStates[playlist_id]) {
-            spotifyPublicPlaylistStates[playlist_id] = {
-                playlist: playlistData,
-                phase: 'fresh'
-            };
-        }
-
-        spotifyPublicPlaylistStates[playlist_id].phase = phase;
-        spotifyPublicPlaylistStates[playlist_id].discovery_progress = discovery_progress;
-        spotifyPublicPlaylistStates[playlist_id].spotify_matches = spotify_matches;
-        spotifyPublicPlaylistStates[playlist_id].discovery_results = discovery_results;
-        spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
-        spotifyPublicPlaylistStates[playlist_id].download_process_id = download_process_id;
-        spotifyPublicPlaylistStates[playlist_id].playlist = playlistData;
-
-        if (phase !== 'fresh' && phase !== 'discovering') {
-            try {
-                const stateResponse = await fetch(`/api/spotify-public/state/${playlist_id}`);
-                if (stateResponse.ok) {
-                    const fullState = await stateResponse.json();
-                    if (fullState.discovery_results && spotifyPublicPlaylistStates[playlist_id]) {
-                        spotifyPublicPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
-                        spotifyPublicPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
-                        spotifyPublicPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
-                        spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
-                        spotifyPublicPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
-                    }
-                }
-            } catch (error) {
-                console.warn(`Error fetching full discovery results for Spotify public playlist ${playlistData.name}:`, error.message);
-            }
-        }
-
-        updateSpotifyPublicCardPhase(playlist_id, phase);
-
-        if (phase === 'discovered' && spotifyPublicPlaylistStates[playlist_id]) {
-            const progressInfo = {
-                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
-                spotify_matches: spotifyPublicPlaylistStates[playlist_id].spotify_matches || 0
-            };
-            updateSpotifyPublicCardProgress(playlist_id, progressInfo);
-        }
-
-        if (phase === 'discovering') {
-            const fakeUrlHash = `spotifypublic_${playlist_id}`;
-            startSpotifyPublicDiscoveryPolling(fakeUrlHash, playlist_id);
-        } else if (phase === 'syncing') {
-            const fakeUrlHash = `spotifypublic_${playlist_id}`;
-            startSpotifyPublicSyncPolling(fakeUrlHash);
-        }
-
-    } catch (error) {
-        console.error(`Error applying Spotify public playlist state for ${playlist_id}:`, error);
-    }
-}
-
-function updateSpotifyPublicCardPhase(urlHash, phase) {
-    const state = spotifyPublicPlaylistStates[urlHash];
-    if (!state) return;
-
-    state.phase = phase;
-
-    const card = document.getElementById(`spotify-public-card-${urlHash}`);
-    if (card) {
-        const newCardHtml = createSpotifyPublicCard(state.playlist);
-        card.outerHTML = newCardHtml;
-
-        const newCard = document.getElementById(`spotify-public-card-${urlHash}`);
-        if (newCard) {
-            newCard.addEventListener('click', () => handleSpotifyPublicCardClick(urlHash));
-        }
-
-        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
-            setTimeout(() => {
-                updateSpotifyPublicCardSyncProgress(urlHash, state.lastSyncProgress);
-            }, 0);
-        }
-    }
-}
-
-function updateSpotifyPublicCardProgress(urlHash, progress) {
-    const state = spotifyPublicPlaylistStates[urlHash];
-    if (!state) return;
-
-    const card = document.getElementById(`spotify-public-card-${urlHash}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-    if (!progressElement) return;
-
-    progressElement.classList.remove('hidden');
-
-    const total = progress.spotify_total || 0;
-    const matches = progress.spotify_matches || 0;
-
-    if (total > 0) {
-        progressElement.innerHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat matched-tracks">✓ ${matches}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-            </div>
-        `;
-    }
-}
-
-// ===============================
-// SPOTIFY PUBLIC SYNC FUNCTIONALITY
-// ===============================
-
-async function startSpotifyPublicPlaylistSync(urlHash) {
-    try {
-        console.log('🎵 Starting Spotify public playlist sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_spotify_public_playlist) {
-            console.error('Invalid Spotify public playlist state for sync');
-            return;
-        }
-
-        const playlistId = state.spotify_public_playlist_id;
-        const response = await fetch(`/api/spotify-public/sync/start/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting sync: ${result.error}`, 'error');
-            return;
-        }
-
-        const syncPlaylistId = result.sync_playlist_id;
-        if (state) state.syncPlaylistId = syncPlaylistId;
-
-        updateSpotifyPublicCardPhase(playlistId, 'syncing');
-        updateSpotifyPublicModalButtons(urlHash, 'syncing');
-
-        startSpotifyPublicSyncPolling(urlHash, syncPlaylistId);
-
-        showToast('Spotify public playlist sync started!', 'success');
-
-    } catch (error) {
-        console.error('Error starting Spotify public sync:', error);
-        showToast(`Error starting sync: ${error.message}`, 'error');
-    }
-}
-
-function startSpotifyPublicSyncPolling(urlHash, syncPlaylistId) {
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    const state = youtubePlaylistStates[urlHash];
-    const playlistId = state.spotify_public_playlist_id;
-
-    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
-
-    // WebSocket subscription
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateSpotifyPublicCardSyncProgress(playlistId, progress);
-            updateSpotifyPublicModalSyncProgress(urlHash, progress);
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
-                updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
-                showToast('Spotify public playlist sync complete!', 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateSpotifyPublicCardPhase(playlistId, 'discovered');
-                updateSpotifyPublicModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    const pollFunction = async () => {
-        if (socketConnected) return;
-        try {
-            const response = await fetch(`/api/spotify-public/sync/status/${playlistId}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('Error polling Spotify public sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            updateSpotifyPublicCardSyncProgress(playlistId, status.progress);
-            updateSpotifyPublicModalSyncProgress(urlHash, status.progress);
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
-                updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
-                updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
-                showToast('Spotify public playlist sync complete!', 'success');
-            } else if (status.sync_status === 'error') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
-                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
-                updateSpotifyPublicCardPhase(playlistId, 'discovered');
-                updateSpotifyPublicModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            console.error('Error polling Spotify public sync:', error);
-            if (activeYouTubePollers[urlHash]) {
-                clearInterval(activeYouTubePollers[urlHash]);
-                delete activeYouTubePollers[urlHash];
-            }
-        }
-    };
-
-    if (!socketConnected) pollFunction();
-
-    const pollInterval = setInterval(pollFunction, 1000);
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelSpotifyPublicSync(urlHash) {
-    try {
-        console.log('Cancelling Spotify public sync:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_spotify_public_playlist) {
-            console.error('Invalid Spotify public playlist state');
-            return;
-        }
-
-        const playlistId = state.spotify_public_playlist_id;
-        const response = await fetch(`/api/spotify-public/sync/cancel/${playlistId}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error cancelling sync: ${result.error}`, 'error');
-            return;
-        }
-
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        const syncId = state && state.syncPlaylistId;
-        if (syncId && _syncProgressCallbacks[syncId]) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
-            delete _syncProgressCallbacks[syncId];
-        }
-
-        updateSpotifyPublicCardPhase(playlistId, 'discovered');
-        updateSpotifyPublicModalButtons(urlHash, 'discovered');
-
-        showToast('Spotify public sync cancelled', 'info');
-
-    } catch (error) {
-        console.error('Error cancelling Spotify public sync:', error);
-        showToast(`Error cancelling sync: ${error.message}`, 'error');
-    }
-}
-
-function updateSpotifyPublicCardSyncProgress(urlHash, progress) {
-    const state = spotifyPublicPlaylistStates[urlHash];
-    if (!state || !state.playlist || !progress) return;
-
-    state.lastSyncProgress = progress;
-
-    const card = document.getElementById(`spotify-public-card-${urlHash}`);
-    if (!card) return;
-
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    let statusCounterHTML = '';
-    if (progress && progress.total_tracks > 0) {
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const processed = matched + failed;
-        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-        statusCounterHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat matched-tracks">✓ ${matched}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat failed-tracks">✗ ${failed}</span>
-                <span class="sync-stat percentage">(${percentage}%)</span>
-            </div>
-        `;
-    }
-
-    if (statusCounterHTML) {
-        progressElement.innerHTML = statusCounterHTML;
-    }
-}
-
-function updateSpotifyPublicModalSyncProgress(urlHash, progress) {
-    const statusDisplay = document.getElementById(`spotify-public-sync-status-${urlHash}`);
-    if (!statusDisplay || !progress) return;
-
-    const totalEl = document.getElementById(`spotify-public-total-${urlHash}`);
-    const matchedEl = document.getElementById(`spotify-public-matched-${urlHash}`);
-    const failedEl = document.getElementById(`spotify-public-failed-${urlHash}`);
-    const percentageEl = document.getElementById(`spotify-public-percentage-${urlHash}`);
-
-    const total = progress.total_tracks || 0;
-    const matched = progress.matched_tracks || 0;
-    const failed = progress.failed_tracks || 0;
-
-    if (totalEl) totalEl.textContent = total;
-    if (matchedEl) matchedEl.textContent = matched;
-    if (failedEl) failedEl.textContent = failed;
-
-    if (total > 0) {
-        const processed = matched + failed;
-        const percentage = Math.round((processed / total) * 100);
-        if (percentageEl) percentageEl.textContent = percentage;
-    }
-}
-
-function updateSpotifyPublicModalButtons(urlHash, phase) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (!modal) return;
-
-    const footerLeft = modal.querySelector('.modal-footer-left');
-    if (footerLeft) {
-        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
-    }
-}
-
-async function startSpotifyPublicDownloadMissing(urlHash) {
-    try {
-        console.log('🔍 Starting download missing tracks for Spotify public playlist:', urlHash);
-
-        const state = youtubePlaylistStates[urlHash];
-        if (!state || !state.is_spotify_public_playlist) {
-            console.error('Invalid Spotify public playlist state for download');
-            return;
-        }
-
-        const discoveryResults = state.discoveryResults || state.discovery_results;
-
-        if (!discoveryResults) {
-            showToast('No discovery results available for download', 'error');
-            return;
-        }
-
-        const spotifyTracks = [];
-        for (const result of discoveryResults) {
-            if (result.spotify_data) {
-                spotifyTracks.push(result.spotify_data);
-            } else if (result.spotify_track && result.status_class === 'found') {
-                const albumData = result.spotify_album || 'Unknown Album';
-                const albumObject = typeof albumData === 'object' && albumData !== null
-                    ? albumData
-                    : {
-                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
-                        album_type: 'album',
-                        images: []
-                    };
-
-                spotifyTracks.push({
-                    id: result.spotify_id || 'unknown',
-                    name: result.spotify_track || 'Unknown Track',
-                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
-                    album: albumObject,
-                    duration_ms: 0
-                });
-            }
-        }
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        const realUrlHash = state.spotify_public_playlist_id;
-        const virtualPlaylistId = `spotify_public_${realUrlHash}`;
-        const playlistName = state.playlist.name;
-
-        state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
-        // Sync convertedSpotifyPlaylistId to spotifyPublicPlaylistStates for card click routing
-        if (realUrlHash && spotifyPublicPlaylistStates[realUrlHash]) {
-            spotifyPublicPlaylistStates[realUrlHash].convertedSpotifyPlaylistId = virtualPlaylistId;
-        }
-
-        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (discoveryModal) {
-            discoveryModal.classList.add('hidden');
-        }
-
-        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
-
-    } catch (error) {
-        console.error('Error starting Spotify public download missing:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// ===============================
-// URL HISTORY (Saved playlist URLs)
-// ===============================
-
-const URL_HISTORY_MAX = 10;
-const URL_HISTORY_SOURCES = {
-    youtube: { key: 'soulsync-url-history-youtube', icon: '▶', inputId: 'youtube-url-input', containerId: 'youtube-url-history', loadFn: () => parseYouTubePlaylist() },
-    deezer: { key: 'soulsync-url-history-deezer', icon: '🎵', inputId: 'deezer-url-input', containerId: 'deezer-url-history', loadFn: () => loadDeezerPlaylist() },
-    'spotify-public': { key: 'soulsync-url-history-spotify-public', icon: '🎧', inputId: 'spotify-public-url-input', containerId: 'spotify-public-url-history', loadFn: () => parseSpotifyPublicUrl() }
-};
-
-function getUrlHistory(source) {
-    try {
-        const cfg = URL_HISTORY_SOURCES[source];
-        if (!cfg) return [];
-        const raw = localStorage.getItem(cfg.key);
-        return raw ? JSON.parse(raw) : [];
-    } catch { return []; }
-}
-
-function saveUrlHistory(source, url, name) {
-    const cfg = URL_HISTORY_SOURCES[source];
-    if (!cfg || !url) return;
-    let history = getUrlHistory(source);
-    // Remove duplicate (same URL)
-    history = history.filter(h => h.url !== url);
-    // Add to front
-    history.unshift({ url, name: name || url, ts: Date.now() });
-    // Cap
-    if (history.length > URL_HISTORY_MAX) history = history.slice(0, URL_HISTORY_MAX);
-    localStorage.setItem(cfg.key, JSON.stringify(history));
-    renderUrlHistory(source);
-}
-
-function removeUrlHistoryEntry(source, url) {
-    const cfg = URL_HISTORY_SOURCES[source];
-    if (!cfg) return;
-    let history = getUrlHistory(source);
-    history = history.filter(h => h.url !== url);
-    localStorage.setItem(cfg.key, JSON.stringify(history));
-    renderUrlHistory(source);
-}
-
-function renderUrlHistory(source) {
-    const cfg = URL_HISTORY_SOURCES[source];
-    if (!cfg) return;
-    const container = document.getElementById(cfg.containerId);
-    if (!container) return;
-    const history = getUrlHistory(source);
-    if (history.length === 0) {
-        container.style.display = 'none';
-        container.innerHTML = '';
-        return;
-    }
-    container.style.display = 'flex';
-    container.innerHTML = `<span class="url-history-bar-label">Recent</span>` +
-        history.map(h => {
-            const rawName = h.name.length > 30 ? h.name.substring(0, 28) + '...' : h.name;
-            const safeName = escapeHtml(rawName);
-            const safeTitle = escapeHtml(h.name);
-            const safeUrl = h.url.replace(/"/g, '&quot;');
-            return `<div class="url-history-pill" data-url="${safeUrl}" title="${safeTitle}">
-                <span class="url-history-pill-icon">${cfg.icon}</span>
-                <span class="url-history-pill-name">${safeName}</span>
-                <button class="url-history-pill-remove" data-source="${source}" data-url="${safeUrl}">&times;</button>
-            </div>`;
-        }).join('');
-
-    // Pill click → fill input and load (skip if already loaded)
-    container.querySelectorAll('.url-history-pill').forEach(pill => {
-        pill.addEventListener('click', (e) => {
-            // Don't trigger if clicking the X button
-            if (e.target.classList.contains('url-history-pill-remove')) return;
-            const pillUrl = pill.dataset.url;
-            if (_isUrlAlreadyLoaded(source, pillUrl)) {
-                showToast('This playlist is already loaded', 'info');
-                return;
-            }
-            const input = document.getElementById(cfg.inputId);
-            if (input) input.value = pillUrl;
-            cfg.loadFn();
-        });
-    });
-
-    // X button click → remove entry
-    container.querySelectorAll('.url-history-pill-remove').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            removeUrlHistoryEntry(btn.dataset.source, btn.dataset.url);
-        });
-    });
-}
-
-function _isUrlAlreadyLoaded(source, url) {
-    if (source === 'youtube') {
-        // Check for existing YouTube card with this URL
-        const container = document.getElementById('youtube-playlist-container');
-        if (container) {
-            const cards = container.querySelectorAll('.youtube-playlist-card[data-url]');
-            for (const card of cards) {
-                if (card.dataset.url === url) return true;
-            }
-        }
-        return false;
-    } else if (source === 'deezer') {
-        // Extract playlist ID from URL and check deezerPlaylists array
-        const match = url.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
-        const id = match ? match[1] : (/^\d+$/.test(url) ? url : null);
-        if (id && deezerPlaylists.find(p => String(p.id) === String(id))) return true;
-        return false;
-    } else if (source === 'spotify-public') {
-        // Extract Spotify ID from URL and compare against loaded playlists
-        const spMatch = url.match(/open\.spotify\.com\/(playlist|album)\/([a-zA-Z0-9]+)/);
-        const spId = spMatch ? spMatch[2] : null;
-        if (spId && spotifyPublicPlaylists.some(p => p.id === spId)) return true;
-        // Fallback: direct URL comparison
-        return spotifyPublicPlaylists.some(p => p.url === url);
-    }
-    return false;
-}
-
-function initUrlHistories() {
-    for (const source of Object.keys(URL_HISTORY_SOURCES)) {
-        renderUrlHistory(source);
-    }
-}
-
-// ===============================
-// YOUTUBE PLAYLIST FUNCTIONALITY
-// ===============================
-
-async function parseYouTubePlaylist() {
-    const urlInput = document.getElementById('youtube-url-input');
-    const url = urlInput.value.trim();
-
-    if (!url) {
-        showToast('Please enter a YouTube playlist URL', 'error');
-        return;
-    }
-
-    // Validate URL format
-    if (!url.includes('youtube.com/playlist') && !url.includes('music.youtube.com/playlist')) {
-        showToast('Please enter a valid YouTube playlist URL', 'error');
-        return;
-    }
-
-    // Check if already loaded
-    if (_isUrlAlreadyLoaded('youtube', url)) {
-        showToast('This playlist is already loaded', 'info');
-        urlInput.value = '';
-        return;
-    }
-
-    try {
-        console.log('🎬 Parsing YouTube playlist:', url);
-
-        // Create card immediately in 'fresh' phase
-        createYouTubeCard(url, 'fresh');
-
-        // Parse playlist via API
-        const response = await fetch('/api/youtube/parse', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ url: url })
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error parsing YouTube playlist: ${result.error}`, 'error');
-            removeYouTubeCard(url);
-            return;
-        }
-
-        console.log('✅ YouTube playlist parsed:', result.name, `(${result.tracks.length} tracks)`);
-
-        // Save to URL history
-        saveUrlHistory('youtube', url, result.name);
-
-        // Update card with parsed data and stay in 'fresh' phase
-        updateYouTubeCardData(result.url_hash, result);
-        updateYouTubeCardPhase(result.url_hash, 'fresh');
-
-        // Auto-mirror this YouTube playlist
-        mirrorPlaylist('youtube', result.url_hash, result.name, result.tracks.map(t => ({
-            track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
-            album_name: '', duration_ms: t.duration_ms || 0, source_track_id: t.id || ''
-        })), { description: url });
-
-        // Clear input
-        urlInput.value = '';
-
-        // Show success message
-        showToast(`YouTube playlist parsed: ${result.name} (${result.tracks.length} tracks)`, 'success');
-
-    } catch (error) {
-        console.error('❌ Error parsing YouTube playlist:', error);
-        showToast(`Error parsing YouTube playlist: ${error.message}`, 'error');
-        removeYouTubeCard(url);
-    }
-}
-
-function createYouTubeCard(url, phase = 'fresh') {
-    const container = document.getElementById('youtube-playlist-container');
-    const placeholder = container.querySelector('.playlist-placeholder');
-
-    // Remove placeholder if it exists
-    if (placeholder) {
-        placeholder.style.display = 'none';
-    }
-
-    // Create temporary URL hash for initial card
-    const tempHash = btoa(url).substring(0, 8);
-
-    const cardHtml = `
-        <div class="youtube-playlist-card" id="youtube-card-${tempHash}" data-url="${url}">
-            <div class="playlist-card-icon youtube-icon">▶</div>
-            <div class="playlist-card-content">
-                <div class="playlist-card-name">Parsing YouTube playlist...</div>
-                <div class="playlist-card-info">
-                    <span class="playlist-card-track-count">-- tracks</span>
-                    <span class="playlist-card-phase-text" style="color: #999;">Loading...</span>
-                </div>
-            </div>
-            <div class="playlist-card-progress hidden">
-                ♪ 0 / ✓ 0 / ✗ 0 / 0%
-            </div>
-            <button class="playlist-card-action-btn" disabled>Parsing...</button>
-        </div>
-    `;
-
-    container.insertAdjacentHTML('beforeend', cardHtml);
-
-    // Store temporary state
-    youtubePlaylistStates[tempHash] = {
-        phase: phase,
-        url: url,
-        cardElement: document.getElementById(`youtube-card-${tempHash}`),
-        tempHash: tempHash
-    };
-
-    console.log('🃏 Created YouTube card for URL:', url);
-}
-
-function updateYouTubeCardData(urlHash, playlistData) {
-    // Find the card by URL or temp hash
-    let state = youtubePlaylistStates[urlHash];
-    if (!state) {
-        // Look for temporary card by URL
-        const tempState = Object.values(youtubePlaylistStates).find(s => s.url === playlistData.url);
-        if (tempState) {
-            // Update the state with real hash
-            delete youtubePlaylistStates[tempState.tempHash];
-            youtubePlaylistStates[urlHash] = tempState;
-            state = tempState;
-
-            // Update card ID
-            if (state.cardElement) {
-                state.cardElement.id = `youtube-card-${urlHash}`;
-            }
-        }
-    }
-
-    if (!state || !state.cardElement) {
-        console.error('❌ Could not find YouTube card for hash:', urlHash);
-        return;
-    }
-
-    const card = state.cardElement;
-
-    // Update card content
-    const nameElement = card.querySelector('.playlist-card-name');
-    const trackCountElement = card.querySelector('.playlist-card-track-count');
-
-    nameElement.textContent = playlistData.name;
-    trackCountElement.textContent = `${playlistData.tracks.length} tracks`;
-
-    // Store playlist data
-    state.playlist = playlistData;
-    state.urlHash = urlHash;
-
-    // Add click handler for card and action button
-    const handleCardClick = () => handleYouTubeCardClick(urlHash);
-    const actionBtn = card.querySelector('.playlist-card-action-btn');
-
-    card.addEventListener('click', handleCardClick);
-    actionBtn.addEventListener('click', (e) => {
-        e.stopPropagation(); // Prevent card click
-        handleCardClick();
-    });
-
-    console.log('🃏 Updated YouTube card data:', playlistData.name);
-}
-
-function updateYouTubeCardPhase(urlHash, phase) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state || !state.cardElement) return;
-
-    const card = state.cardElement;
-    const phaseTextElement = card.querySelector('.playlist-card-phase-text');
-    const actionBtn = card.querySelector('.playlist-card-action-btn');
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    state.phase = phase;
-
-    switch (phase) {
-        case 'fresh':
-            phaseTextElement.textContent = 'Ready to discover';
-            phaseTextElement.style.color = '#999';
-            actionBtn.textContent = 'Start Discovery';
-            actionBtn.disabled = false;
-            progressElement.classList.add('hidden');
-            break;
-
-        case 'discovering':
-            phaseTextElement.textContent = 'Discovering...';
-            phaseTextElement.style.color = '#ffa500'; // Orange
-            actionBtn.textContent = 'View Progress';
-            actionBtn.disabled = false;
-            progressElement.classList.remove('hidden');
-            break;
-
-        case 'discovered':
-            phaseTextElement.textContent = 'Discovery Complete';
-            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
-            actionBtn.textContent = 'View Details';
-            actionBtn.disabled = false;
-            progressElement.classList.add('hidden');
-            break;
-
-        case 'syncing':
-            phaseTextElement.textContent = 'Syncing...';
-            phaseTextElement.style.color = '#ffa500'; // Orange
-            actionBtn.textContent = 'View Progress';
-            actionBtn.disabled = false;
-            progressElement.classList.remove('hidden');
-            break;
-
-        case 'sync_complete':
-            phaseTextElement.textContent = 'Sync Complete';
-            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
-            actionBtn.textContent = 'View Details';
-            actionBtn.disabled = false;
-            progressElement.classList.add('hidden');
-            break;
-
-        case 'downloading':
-            phaseTextElement.textContent = 'Downloading...';
-            phaseTextElement.style.color = '#ffa500'; // Orange
-            actionBtn.textContent = 'View Downloads';
-            actionBtn.disabled = false;
-            progressElement.classList.remove('hidden');
-            break;
-
-        case 'download_complete':
-            phaseTextElement.textContent = 'Download Complete';
-            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
-            actionBtn.textContent = 'View Results';
-            actionBtn.disabled = false;
-            progressElement.classList.add('hidden');
-            break;
-    }
-
-    console.log('🃏 Updated YouTube card phase:', urlHash, phase);
-}
-
-function handleYouTubeCardClick(urlHash) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state) return;
-
-    switch (state.phase) {
-        case 'fresh':
-            // First click: Start discovery and open modal
-            console.log('🎬 Starting YouTube discovery for first time:', urlHash);
-            updateYouTubeCardPhase(urlHash, 'discovering');
-            startYouTubeDiscovery(urlHash);
-            openYouTubeDiscoveryModal(urlHash);
-            break;
-
-        case 'discovering':
-        case 'discovered':
-        case 'syncing':
-        case 'sync_complete':
-            // Open discovery modal with current state
-            console.log('🎬 Opening YouTube discovery modal:', urlHash);
-            openYouTubeDiscoveryModal(urlHash);
-            break;
-
-        case 'downloading':
-        case 'download_complete':
-            // Open download missing tracks modal
-            console.log('🎬 Opening download modal for YouTube playlist:', urlHash);
-            // Need to get playlist ID from converted Spotify data
-            const spotifyPlaylistId = state.convertedSpotifyPlaylistId;
-            if (spotifyPlaylistId) {
-                // Check if we have discovery results, if not load them first
-                if (!state.discoveryResults || state.discoveryResults.length === 0) {
-                    console.log('🔍 Loading discovery results for download modal...');
-                    fetch(`/api/youtube/state/${urlHash}`)
-                        .then(response => response.json())
-                        .then(fullState => {
-                            if (fullState.discovery_results) {
-                                state.discoveryResults = fullState.discovery_results;
-                                console.log(`✅ Loaded ${state.discoveryResults.length} discovery results`);
-
-                                // Now open the modal with the loaded data
-                                const playlistName = state.playlist.name;
-                                const spotifyTracks = state.discoveryResults
-                                    .filter(result => result.spotify_data)
-                                    .map(result => result.spotify_data);
-                                openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
-                            } else {
-                                console.error('❌ No discovery results found for downloads');
-                                showToast('Unable to open download modal - no discovery data', 'error');
-                            }
-                        })
-                        .catch(error => {
-                            console.error('❌ Error loading discovery results:', error);
-                            showToast('Error loading playlist data', 'error');
-                        });
-                } else {
-                    // Use the YouTube-specific function to maintain proper state linking
-                    const playlistName = state.playlist.name;
-                    const spotifyTracks = state.discoveryResults
-                        .filter(result => result.spotify_data)
-                        .map(result => result.spotify_data);
-                    openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
-                }
-            } else {
-                console.error('❌ No converted Spotify playlist ID found for downloads');
-                showToast('Unable to open download modal - missing playlist data', 'error');
-            }
-            break;
-    }
-}
-
-function updateYouTubeCardProgress(urlHash, progress) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state || !state.cardElement) return;
-
-    const card = state.cardElement;
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    const total = progress.spotify_total || 0;
-    const matches = progress.spotify_matches || 0;
-    const failed = total - matches;
-    const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
-
-    progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
-
-    console.log('🃏 Updated YouTube card progress:', urlHash, `${matches}/${total} (${percentage}%)`);
-}
-
-function removeYouTubeCard(url) {
-    const state = Object.values(youtubePlaylistStates).find(s => s.url === url);
-    if (state && state.cardElement) {
-        state.cardElement.remove();
-
-        // Remove from state
-        if (state.urlHash) {
-            delete youtubePlaylistStates[state.urlHash];
-        } else if (state.tempHash) {
-            delete youtubePlaylistStates[state.tempHash];
-        }
-    }
-
-    // Show placeholder if no cards left
-    const container = document.getElementById('youtube-playlist-container');
-    const cards = container.querySelectorAll('.youtube-playlist-card');
-    const placeholder = container.querySelector('.playlist-placeholder');
-
-    if (cards.length === 0 && placeholder) {
-        placeholder.style.display = 'block';
-    }
-}
-
-async function startYouTubeDiscovery(urlHash) {
-    try {
-        console.log('🔍 Starting YouTube Spotify discovery for:', urlHash);
-
-        const response = await fetch(`/api/youtube/discovery/start/${urlHash}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting discovery: ${result.error}`, 'error');
-            return;
-        }
-
-        // Update frontend phase to match backend
-        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
-        if (state) {
-            state.phase = 'discovering';
-        }
-
-        // Update modal buttons to show "Discovering..." instead of "Start Discovery"
-        updateYouTubeModalButtons(urlHash, 'discovering');
-
-        // Start polling for progress
-        startYouTubeDiscoveryPolling(urlHash);
-
-        // Open discovery modal
-        openYouTubeDiscoveryModal(urlHash);
-
-    } catch (error) {
-        console.error('❌ Error starting YouTube discovery:', error);
-        showToast(`Error starting discovery: ${error.message}`, 'error');
-    }
-}
-
-function startYouTubeDiscoveryPolling(urlHash) {
-    // Stop any existing polling
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [urlHash] });
-        _discoveryProgressCallbacks[urlHash] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-                return;
-            }
-            updateYouTubeCardProgress(urlHash, data);
-            const st = youtubePlaylistStates[urlHash];
-            if (st) { st.discoveryResults = data.results || []; st.discovery_results = data.results || []; st.discoveryProgress = data.progress || 0; st.spotifyMatches = data.spotify_matches || 0; st.spotify_matches = data.spotify_matches || 0; }
-            updateYouTubeDiscoveryModal(urlHash, data);
-            if (data.complete) {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
-                // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
-                if (st) st.phase = 'discovered';
-                updateYouTubeCardPhase(urlHash, 'discovered');
-                updateYouTubeModalButtons(urlHash, 'discovered');
-                showToast('Discovery complete!', 'success');
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/youtube/discovery/status/${urlHash}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling YouTube discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            // Update card progress
-            updateYouTubeCardProgress(urlHash, status);
-
-            // Store discovery results and progress in state
-            const state = youtubePlaylistStates[urlHash];
-            if (state) {
-                state.discoveryResults = status.results || [];
-                state.discovery_results = status.results || [];
-                state.discoveryProgress = status.progress || 0;
-                state.spotifyMatches = status.spotify_matches || 0;
-                state.spotify_matches = status.spotify_matches || 0;
-            }
-
-            // Update modal if open
-            updateYouTubeDiscoveryModal(urlHash, status);
-
-            // Check if complete
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-
-                // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
-                if (state) state.phase = 'discovered';
-                // Update card phase to discovered
-                updateYouTubeCardPhase(urlHash, 'discovered');
-
-                // Update modal buttons to show sync and download buttons
-                updateYouTubeModalButtons(urlHash, 'discovered');
-
-                console.log('✅ Discovery complete:', urlHash);
-                showToast('Discovery complete!', 'success');
-            }
-
-        } catch (error) {
-            console.error('❌ Error polling YouTube discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[urlHash];
-        }
-    }, 1000);
-
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-function stopYouTubeDiscoveryPolling(urlHash) {
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-        delete activeYouTubePollers[urlHash];
-        console.log('⏹ Stopped YouTube discovery polling for:', urlHash);
-    }
-}
-
-function openYouTubeDiscoveryModal(urlHash) {
-    // Check ListenBrainz state first, then fallback to YouTube state
-    const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
-    if (!state || !state.playlist) {
-        console.error('❌ No playlist data found for identifier:', urlHash);
-        return;
-    }
-
-    console.log('🎵 Opening discovery modal for:', state.playlist.name);
-
-    // Check if modal already exists
-    let modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-
-    if (modal) {
-        // Modal exists, just show it
-        modal.classList.remove('hidden');
-        console.log('🔄 Showing existing modal with preserved state');
-        console.log('🔄 Current discovery results count:', state.discoveryResults?.length || state.discovery_results?.length || 0);
-
-        // Resume polling if discovery or sync is in progress
-        if (state.phase === 'discovering' && !activeYouTubePollers[urlHash]) {
-            console.log('🔄 Resuming discovery polling...');
-            startYouTubeDiscoveryPolling(urlHash);
-        } else if (state.phase === 'syncing' && !activeYouTubePollers[urlHash]) {
-            console.log('🔄 Resuming sync polling...');
-            if (state.is_tidal_playlist) {
-                startTidalSyncPolling(urlHash);
-            } else if (state.is_deezer_playlist) {
-                startDeezerSyncPolling(urlHash);
-            } else if (state.is_spotify_public_playlist) {
-                startSpotifyPublicSyncPolling(urlHash);
-            } else if (state.is_beatport_playlist) {
-                startBeatportSyncPolling(urlHash);
-            } else if (state.is_listenbrainz_playlist) {
-                startListenBrainzSyncPolling(urlHash);
-            } else {
-                startYouTubeSyncPolling(urlHash);
-            }
-        }
-    } else {
-        // Create new modal (support YouTube, Tidal, Deezer, Beatport, ListenBrainz, Spotify Public, and Mirrored)
-        const isTidal = state.is_tidal_playlist;
-        const isDeezer = state.is_deezer_playlist;
-        const isSpotifyPublic = state.is_spotify_public_playlist;
-        const isBeatport = state.is_beatport_playlist;
-        const isListenBrainz = state.is_listenbrainz_playlist;
-        const isMirrored = state.is_mirrored_playlist;
-        const isLastfmRadio = typeof urlHash === 'string' && urlHash.startsWith('lastfm_radio_');
-        const modalTitle = isMirrored ? '🎵 Mirrored Playlist Discovery' :
-            isSpotifyPublic ? '🎵 Spotify Playlist Discovery' :
-                isDeezer ? '🎵 Deezer Playlist Discovery' :
-                    isTidal ? '🎵 Tidal Playlist Discovery' :
-                        isBeatport ? '🎵 Beatport Chart Discovery' :
-                            isLastfmRadio ? '📻 Last.fm Radio Discovery' :
-                                isListenBrainz ? '🎵 ListenBrainz Playlist Discovery' :
-                                    '🎵 YouTube Playlist Discovery';
-        const sourceLabel = isMirrored ? (state.mirrored_source ? state.mirrored_source.charAt(0).toUpperCase() + state.mirrored_source.slice(1) : 'Source') :
-            isSpotifyPublic ? 'Spotify' :
-                isDeezer ? 'Deezer' :
-                    isTidal ? 'Tidal' :
-                        isBeatport ? 'Beatport' :
-                            isLastfmRadio ? 'Last.fm' :
-                                isListenBrainz ? 'LB' :
-                                    'YT';
-
-        const modalHtml = `
-            <div class="modal-overlay" id="youtube-discovery-modal-${urlHash}">
-                <div class="youtube-discovery-modal">
-                    <div class="modal-header">
-                        <h2>${modalTitle}</h2>
-                        <div class="modal-subtitle">${state.playlist.name} (${state.playlist.tracks.length} tracks)</div>
-                        <div class="modal-description">${getModalDescription(state.phase, isTidal, isBeatport, isListenBrainz, isMirrored, isDeezer, isSpotifyPublic, isLastfmRadio)}</div>
-                        <button class="modal-close-btn" onclick="closeYouTubeDiscoveryModal('${urlHash}')">✕</button>
-                    </div>
-
-                    <div class="modal-body">
-                        <div class="progress-section">
-                            <div class="progress-label">🔍 ${currentMusicSourceName} Discovery Progress</div>
-                            <div class="progress-bar-container">
-                                <div class="progress-bar-fill" id="youtube-discovery-progress-${urlHash}" style="width: 0%;"></div>
-                            </div>
-                            <div class="progress-text" id="youtube-discovery-progress-text-${urlHash}">${getInitialProgressText(state.phase, isTidal, isBeatport, isListenBrainz)}</div>
-                        </div>
-                        
-                        <div class="discovery-table-container">
-                            <table class="discovery-table">
-                                <thead>
-                                    <tr>
-                                        <th>${sourceLabel} Track</th>
-                                        <th>${sourceLabel} Artist</th>
-                                        <th>Status</th>
-                                        <th>${currentMusicSourceName} Track</th>
-                                        <th>${currentMusicSourceName} Artist</th>
-                                        <th>Album</th>
-                                        <th>Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody id="youtube-discovery-table-${urlHash}">
-                                    ${generateTableRowsFromState(state, urlHash)}
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                    
-                    <div class="modal-footer">
-                        <div class="modal-footer-left">
-                            ${getModalActionButtons(urlHash, state.phase, state)}
-                        </div>
-                        <div class="modal-footer-right">
-                            <button class="modal-btn modal-btn-secondary" onclick="closeYouTubeDiscoveryModal('${urlHash}')">🏠 Close</button>
-                        </div>
-                    </div>
-
-                    <!-- Discovery Fix Modal (nested inside) -->
-                    <div class="discovery-fix-modal-overlay hidden" id="discovery-fix-modal-overlay">
-                        <div class="discovery-fix-modal">
-                            <div class="discovery-fix-modal-header">
-                                <h2>Fix Track Match</h2>
-                                <button class="modal-close-btn" onclick="closeDiscoveryFixModal()">✕</button>
-                            </div>
-
-                            <div class="discovery-fix-modal-content">
-                                <!-- Source track info (read-only) -->
-                                <div class="source-track-info">
-                                    <h3>Source Track</h3>
-                                    <div class="source-track-display">
-                                        <div class="source-field">
-                                            <label>Track:</label>
-                                            <span id="fix-modal-source-track">-</span>
-                                        </div>
-                                        <div class="source-field">
-                                            <label>Artist:</label>
-                                            <span id="fix-modal-source-artist">-</span>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- Search inputs (editable) -->
-                                <div class="search-inputs-section">
-                                    <h3>Search for Match</h3>
-                                    <div class="search-input-group">
-                                        <input type="text"
-                                               id="fix-modal-track-input"
-                                               placeholder="Track name"
-                                               class="fix-modal-input">
-                                        <input type="text"
-                                               id="fix-modal-artist-input"
-                                               placeholder="Artist name"
-                                               class="fix-modal-input">
-                                        <button class="search-btn" onclick="searchDiscoveryFix()">
-                                            🔍 Search
-                                        </button>
-                                    </div>
-                                </div>
-
-                                <!-- Search results -->
-                                <div class="search-results-section">
-                                    <h3>Results</h3>
-                                    <div id="fix-modal-results" class="fix-modal-results">
-                                        <!-- Auto-populated on modal open, updated on search -->
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="discovery-fix-modal-footer">
-                                <button class="modal-btn secondary" onclick="closeDiscoveryFixModal()">
-                                    Cancel
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        // Add modal to DOM
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-        modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-
-        // Store modal reference
-        state.modalElement = modal;
-
-        // Set initial progress if we have discovery results
-        if (state.discoveryResults && state.discoveryResults.length > 0) {
-            // Compute progress from results if discoveryProgress is missing/zero
-            let progress = state.discoveryProgress || 0;
-            const matches = state.spotifyMatches || 0;
-            if (progress === 0 && state.discoveryResults.length > 0 && state.playlist.tracks.length > 0) {
-                progress = Math.min(100, Math.round((state.discoveryResults.length / state.playlist.tracks.length) * 100));
-            }
-            const progressData = {
-                progress: progress,
-                spotify_matches: matches || state.discoveryResults.filter(r => r.status_class === 'found').length,
-                spotify_total: state.playlist.tracks.length,
-                results: state.discoveryResults
-            };
-            updateYouTubeDiscoveryModal(urlHash, progressData);
-        }
-
-        // Start polling immediately if modal is opened in syncing phase
-        if (state.phase === 'syncing') {
-            console.log('🔄 Modal opened in syncing phase - starting immediate polling...');
-            if (state.is_tidal_playlist) {
-                startTidalSyncPolling(urlHash);
-            } else if (state.is_deezer_playlist) {
-                startDeezerSyncPolling(urlHash);
-            } else if (state.is_spotify_public_playlist) {
-                startSpotifyPublicSyncPolling(urlHash);
-            } else if (state.is_beatport_playlist) {
-                startBeatportSyncPolling(urlHash);
-            } else {
-                startYouTubeSyncPolling(urlHash);
-            }
-        }
-
-        console.log('✨ Created new modal with current state');
-    }
-}
-
-function getModalActionButtons(urlHash, phase, state = null) {
-    // Get state if not provided
-    if (!state) {
-        state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
-    }
-
-    const isTidal = state && state.is_tidal_playlist;
-    const isDeezer = state && state.is_deezer_playlist;
-    const isSpotifyPublic = state && state.is_spotify_public_playlist;
-    const isBeatport = state && state.is_beatport_playlist;
-    const isListenBrainz = state && state.is_listenbrainz_playlist;
-
-    // Validate data availability for buttons (support both naming conventions)
-    const hasDiscoveryResults = state && ((state.discoveryResults && state.discoveryResults.length > 0) || (state.discovery_results && state.discovery_results.length > 0));
-    const hasSpotifyMatches = state && ((state.spotifyMatches > 0) || (state.spotify_matches > 0));
-    const hasConvertedPlaylistId = state && state.convertedSpotifyPlaylistId;
-
-    switch (phase) {
-        case 'fresh':
-        case 'discovering':
-            // Show start discovery button for fresh playlists
-            if (phase === 'fresh') {
-                const wingItBtn = ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
-
-                if (isListenBrainz) {
-                    return `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzDiscovery('${urlHash}')">🔍 Start Discovery</button>${wingItBtn}`;
-                } else {
-                    return `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDiscovery('${urlHash}')">🔍 Start Discovery</button>${wingItBtn}`;
-                }
-            } else {
-                // Discovering phase - show progress
-                return `<div class="modal-info">🔍 Discovering ${currentMusicSourceName} matches...</div>`;
-            }
-
-        case 'discovered':
-        case 'downloading':
-        case 'download_complete':
-            // Only show buttons if we actually have discovery data
-            if (!hasDiscoveryResults) {
-                return `<div class="modal-info">⚠️ No discovery results available. Try starting discovery again.</div>`;
-            }
-
-            let buttons = '';
-
-            // Only show sync button if there are Spotify matches (and not standalone mode)
-            if (hasSpotifyMatches && !_isSoulsyncStandalone) {
-                if (isListenBrainz) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isTidal) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isDeezer) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isSpotifyPublic) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isBeatport) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                }
-            }
-
-            // Only show download button if we have matches or a converted playlist ID
-            if (hasSpotifyMatches || hasConvertedPlaylistId) {
-                if (isListenBrainz) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isTidal) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isDeezer) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isSpotifyPublic) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isBeatport) {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else {
-                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                }
-            }
-
-            // Retry Failed button for mirrored playlists
-            if (state && state.is_mirrored_playlist) {
-                const results = state.discovery_results || state.discoveryResults || [];
-                const failedCount = results.filter(r => r.status_class !== 'found').length;
-                if (failedCount > 0) {
-                    buttons += `<button class="modal-btn modal-btn-secondary" onclick="retryFailedMirroredDiscovery('${urlHash}')">🔄 Retry Failed (${failedCount})</button>`;
-                }
-            }
-
-            // Rediscover button — reset and re-run discovery (only for sources with reset endpoints)
-            if (isBeatport) {
-                buttons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
-            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
-                buttons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
-            }
-
-            // Wing It button — available in discovered phase
-            buttons += ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
-
-            if (!buttons || buttons.trim().startsWith('<button class="modal-btn wing-it-btn"')) {
-                buttons = `<div class="modal-info">ℹ️ No Spotify matches found.</div>` + buttons;
-            }
-
-            return buttons;
-
-        case 'syncing':
-            if (isListenBrainz) {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelYouTubeSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="listenbrainz-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="listenbrainz-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="listenbrainz-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="listenbrainz-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="listenbrainz-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            } else if (isTidal) {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelTidalSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="tidal-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="tidal-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="tidal-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="tidal-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="tidal-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            } else if (isDeezer) {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelDeezerSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="deezer-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="deezer-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="deezer-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="deezer-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="deezer-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            } else if (isSpotifyPublic) {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelSpotifyPublicSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="spotify-public-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="spotify-public-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="spotify-public-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="spotify-public-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="spotify-public-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            } else if (isBeatport) {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelBeatportSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="beatport-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="beatport-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="beatport-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="beatport-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="beatport-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            } else {
-                return `
-                    <button class="modal-btn modal-btn-danger" onclick="cancelYouTubeSync('${urlHash}')">❌ Cancel Sync</button>
-                    <div class="playlist-modal-sync-status" id="youtube-sync-status-${urlHash}" style="display: flex;">
-                        <span class="sync-stat total-tracks">♪ <span id="youtube-total-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat matched-tracks">✓ <span id="youtube-matched-${urlHash}">0</span></span>
-                        <span class="sync-separator">/</span>
-                        <span class="sync-stat failed-tracks">✗ <span id="youtube-failed-${urlHash}">0</span></span>
-                        <span class="sync-stat percentage">(<span id="youtube-percentage-${urlHash}">0</span>%)</span>
-                    </div>
-                `;
-            }
-
-        case 'sync_complete':
-            let syncCompleteButtons = '';
-
-            // Only show sync button if there are Spotify matches (and not standalone mode)
-            if (hasSpotifyMatches && !_isSoulsyncStandalone) {
-                if (isListenBrainz) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isTidal) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isSpotifyPublic) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isBeatport) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                }
-            }
-
-            // Only show download button if we have matches or a converted playlist ID
-            if (hasSpotifyMatches || hasConvertedPlaylistId) {
-                if (isListenBrainz) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isTidal) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isSpotifyPublic) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isBeatport) {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else {
-                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                }
-            }
-
-            // Rediscover button (only for sources with reset endpoints)
-            if (isBeatport) {
-                syncCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
-            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
-                syncCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
-            }
-
-            // Wing It button
-            syncCompleteButtons += ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
-
-            return syncCompleteButtons;
-
-        case 'download_complete':
-            // Same options as sync_complete — allow re-sync, download missing, and reset
-            let dlCompleteButtons = '';
-
-            if (hasSpotifyMatches) {
-                if (isListenBrainz) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isTidal) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isDeezer) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isSpotifyPublic) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else if (isBeatport) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                } else {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
-                }
-            }
-
-            if (hasSpotifyMatches || hasConvertedPlaylistId) {
-                if (isListenBrainz) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isTidal) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isDeezer) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isSpotifyPublic) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else if (isBeatport) {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                } else {
-                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
-                }
-            }
-
-            // Rediscover button (only for sources with reset endpoints)
-            if (isBeatport) {
-                dlCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
-            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
-                dlCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
-            }
-
-            return dlCompleteButtons;
-
-        default:
-            return '';
-    }
-}
-
-function getModalDescription(phase, isTidal = false, isBeatport = false, isListenBrainz = false, isMirrored = false, isDeezer = false, isSpotifyPublic = false, isLastfmRadio = false) {
-    const source = isMirrored ? 'mirrored' : (isSpotifyPublic ? 'Spotify' : (isDeezer ? 'Deezer' : (isLastfmRadio ? 'Last.fm Radio' : (isListenBrainz ? 'ListenBrainz' : (isBeatport ? 'Beatport' : (isTidal ? 'Tidal' : 'YouTube'))))));
-    switch (phase) {
-        case 'fresh':
-            return `Ready to discover clean ${currentMusicSourceName} metadata for ${source} tracks...`;
-        case 'discovering':
-            return `Discovering clean ${currentMusicSourceName} metadata for ${source} tracks...`;
-        case 'discovered':
-        case 'downloading':
-        case 'download_complete':
-            return 'Discovery complete! View the results below.';
-        default:
-            return `Discovering clean ${currentMusicSourceName} metadata for ${source} tracks...`;
-    }
-}
-
-function getInitialProgressText(phase, isTidal = false, isBeatport = false, isListenBrainz = false) {
-    switch (phase) {
-        case 'fresh':
-            return 'Click Start Discovery to begin...';
-        case 'discovering':
-            return 'Starting discovery...';
-        case 'discovered':
-        case 'downloading':
-        case 'download_complete':
-            return 'Discovery completed!';
-        default:
-            return 'Starting discovery...';
-    }
-}
-
-function generateTableRowsFromState(state, urlHash) {
-    const isTidal = state.is_tidal_playlist;
-    const isDeezer = state.is_deezer_playlist;
-    const isSpotifyPublic = state.is_spotify_public_playlist;
-    const isBeatport = state.is_beatport_playlist;
-    const isListenBrainz = state.is_listenbrainz_playlist;
-    const isMirrored = state.is_mirrored_playlist;
-    const platform = isMirrored ? 'mirrored' : (isSpotifyPublic ? 'spotify_public' : (isDeezer ? 'deezer' : (isListenBrainz ? 'listenbrainz' : (isTidal ? 'tidal' : (isBeatport ? 'beatport' : 'youtube')))));
-
-    // Support both camelCase and snake_case
-    const discoveryResults = state.discoveryResults || state.discovery_results;
-
-    if (discoveryResults && discoveryResults.length > 0) {
-        // Generate rows from existing discovery results
-        return discoveryResults.map((result, index) => {
-            // Handle different field names based on platform
-            const trackName = result.lb_track || result.yt_track || result.track_name || '-';
-            const artistName = result.lb_artist || result.yt_artist || result.artist_name || '-';
-
-            return `
-            <tr id="discovery-row-${urlHash}-${result.index}">
-                <td class="yt-track">${trackName}</td>
-                <td class="yt-artist">${artistName}</td>
-                <td class="discovery-status ${result.status_class}">${result.status}</td>
-                <td class="spotify-track">${result.spotify_track || '-'}</td>
-                <td class="spotify-artist">${result.spotify_artist || '-'}</td>
-                <td class="spotify-album">${result.spotify_album || '-'}</td>
-                <td class="discovery-actions">${generateDiscoveryActionButton(result, urlHash, platform)}</td>
-            </tr>
-        `;
-        }).join('');
-    } else {
-        // Generate initial rows from playlist tracks
-        return generateInitialTableRows(state.playlist.tracks, isTidal, urlHash, isBeatport, isListenBrainz);
-    }
-}
-
-function generateInitialTableRows(tracks, isTidal = false, urlHash = '', isBeatport = false, isListenBrainz = false) {
-    return tracks.map((track, index) => {
-        // Handle different track formats based on platform
-        let trackName, artistName;
-
-        if (isListenBrainz) {
-            // ListenBrainz tracks have track_name and artist_name
-            trackName = track.track_name || 'Unknown Track';
-            artistName = track.artist_name || 'Unknown Artist';
-        } else {
-            // YouTube/Tidal/Beatport tracks have name and artists
-            trackName = track.name || 'Unknown Track';
-            artistName = track.artists ? (Array.isArray(track.artists) ? track.artists.join(', ') : track.artists) : 'Unknown Artist';
-        }
-
-        return `
-        <tr id="discovery-row-${urlHash}-${index}">
-            <td class="yt-track">${trackName}</td>
-            <td class="yt-artist">${artistName}</td>
-            <td class="discovery-status">🔍 Pending...</td>
-            <td class="spotify-track">-</td>
-            <td class="spotify-artist">-</td>
-            <td class="spotify-album">-</td>
-            <td class="discovery-actions">-</td>
-        </tr>
-    `;
-    }).join('');
-}
-
-function formatDuration(durationMs) {
-    if (!durationMs) return '0:00';
-    const minutes = Math.floor(durationMs / 60000);
-    const seconds = Math.floor((durationMs % 60000) / 1000);
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-/**
- * Generate action button for discovery table row
- */
-function generateDiscoveryActionButton(result, identifier, platform) {
-    // Show fix button for not_found, error, or any non-found status
-    const isNotFound = result.status === 'not_found' ||
-        result.status_class === 'not-found' ||
-        result.status === '❌ Not Found' ||
-        result.status === 'Not Found';
-
-    const isError = result.status === 'error' ||
-        result.status_class === 'error' ||
-        result.status === '❌ Error';
-
-    const isWingIt = result.wing_it_fallback ||
-        result.status_class === 'wing-it';
-
-    const isFound = result.status === 'found' ||
-        result.status_class === 'found' ||
-        result.status === '✅ Found';
-
-    if (isNotFound || isError) {
-        return `<button class="fix-match-btn"
-                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
-                        title="Manually search for this track">
-                    🔧 Fix
-                </button>`;
-    }
-
-    // For wing-it fallbacks, show fix button so user can find a real match
-    if (isWingIt) {
-        return `<button class="fix-match-btn"
-                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
-                        title="Search for a proper metadata match">
-                    🔧 Fix
-                </button>`;
-    }
-
-    // For found matches, show re-match and unmatch buttons
-    if (isFound) {
-        return `<button class="rematch-btn"
-                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
-                        title="Change this match">
-                    ↻
-                </button><button class="rematch-btn" style="margin-left:4px;color:#ff6b6b"
-                        onclick="unmatchDiscoveryTrack('${platform}', '${identifier}', ${result.index})"
-                        title="Remove this match">
-                    ✕
-                </button>`;
-    }
-
-    return '-';
-}
-
-function updateYouTubeDiscoveryModal(urlHash, status) {
-    const progressBar = document.getElementById(`youtube-discovery-progress-${urlHash}`);
-    const progressText = document.getElementById(`youtube-discovery-progress-text-${urlHash}`);
-    const tableBody = document.getElementById(`youtube-discovery-table-${urlHash}`);
-
-    if (!progressBar || !progressText || !tableBody) {
-        console.warn(`⚠️ Missing modal elements for ${urlHash}:`, {
-            progressBar: !!progressBar,
-            progressText: !!progressText,
-            tableBody: !!tableBody
-        });
-        return;
-    }
-
-    // Update progress bar
-    progressBar.style.width = `${status.progress}%`;
-    progressText.textContent = `${status.spotify_matches} / ${status.spotify_total} tracks matched (${status.progress}%)`;
-
-
-    // Update table rows
-    status.results.forEach(result => {
-        const row = document.getElementById(`discovery-row-${urlHash}-${result.index}`);
-        if (!row) return;
-
-        const statusCell = row.querySelector('.discovery-status');
-        const spotifyTrackCell = row.querySelector('.spotify-track');
-        const spotifyArtistCell = row.querySelector('.spotify-artist');
-        const spotifyAlbumCell = row.querySelector('.spotify-album');
-        const actionsCell = row.querySelector('.discovery-actions');
-
-        statusCell.textContent = result.status;
-        statusCell.className = `discovery-status ${result.status_class}`;
-
-        spotifyTrackCell.textContent = result.spotify_track || '-';
-        spotifyArtistCell.textContent = result.spotify_artist || '-';
-        spotifyAlbumCell.textContent = result.spotify_album || '-';
-
-        // Update actions cell with appropriate button
-        if (actionsCell) {
-            const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
-            const platform = state?.is_mirrored_playlist ? 'mirrored' :
-                (state?.is_spotify_public_playlist ? 'spotify_public' :
-                    (state?.is_deezer_playlist ? 'deezer' :
-                        (state?.is_listenbrainz_playlist ? 'listenbrainz' :
-                            (state?.is_tidal_playlist ? 'tidal' :
-                                (state?.is_beatport_playlist ? 'beatport' : 'youtube')))));
-            actionsCell.innerHTML = generateDiscoveryActionButton(result, urlHash, platform);
-        }
-    });
-
-    // Update action buttons and description when discovery is complete.
-    // status.complete is explicitly set by LB/WS polling callers; only act when transitioning
-    // from 'discovering' to avoid interfering with download/sync phases of other playlist types.
-    if (status.complete) {
-        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
-        if (state && state.phase === 'discovering') {
-            state.phase = 'discovered';
-            const actionButtonsContainer = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-footer-left`);
-            if (actionButtonsContainer) {
-                actionButtonsContainer.innerHTML = getModalActionButtons(urlHash, 'discovered', state);
-                console.log(`✨ Updated action buttons for completed discovery: ${urlHash}`);
-            }
-            const descEl = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-description`);
-            if (descEl) descEl.textContent = 'Discovery complete! View the results below.';
-        } else if (state && state.phase === 'discovered') {
-            // Already discovered — ensure buttons are correct (e.g. after rehydration)
-            const actionButtonsContainer = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-footer-left`);
-            if (actionButtonsContainer && actionButtonsContainer.querySelector('.modal-info')) {
-                actionButtonsContainer.innerHTML = getModalActionButtons(urlHash, 'discovered', state);
-            }
-        }
-    }
-}
-
-function refreshYouTubeDiscoveryModalTable(urlHash) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state || !state.modalElement) {
-        console.warn(`⚠️ Cannot refresh modal table: no state or modal for ${urlHash}`);
-        return;
-    }
-
-    console.log(`🔄 Refreshing modal table with ${state.discoveryResults?.length || 0} discovery results`);
-
-    // Update the table body with new discovery results
-    const tableBody = state.modalElement.querySelector(`#youtube-discovery-table-${urlHash}`);
-    if (tableBody) {
-        tableBody.innerHTML = generateTableRowsFromState(state, urlHash);
-        console.log(`✅ Modal table refreshed with discovery data`);
-    } else {
-        console.warn(`⚠️ Could not find table body for modal ${urlHash}`);
-    }
-
-    // Update the progress bar and footer buttons too
-    if (state.discoveryResults && state.discoveryResults.length > 0) {
-        const progressData = {
-            progress: state.discoveryProgress || 100,
-            spotify_matches: state.spotifyMatches || 0,
-            spotify_total: state.playlist.tracks.length,
-            results: state.discoveryResults
-        };
-        updateYouTubeDiscoveryModal(urlHash, progressData);
-    }
-}
-
-function closeYouTubeDiscoveryModal(urlHash) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (modal) {
-        // Hide modal instead of removing it to preserve state
-        modal.classList.add('hidden');
-        console.log('🚪 Hidden YouTube discovery modal (preserving state):', urlHash);
-    }
-
-    // Handle phase reset for completed discovery (Tidal/Beatport pattern)
-    const state = youtubePlaylistStates[urlHash];
-    if (state) {
-        const isTidal = state.is_tidal_playlist;
-        const isDeezer = state.is_deezer_playlist;
-        const isSpotifyPublic = state.is_spotify_public_playlist;
-        const isBeatport = state.is_beatport_playlist;
-
-        // Reset to 'discovered' phase if modal is closed after completion (like Tidal does)
-        if (state.phase === 'sync_complete' || state.phase === 'download_complete') {
-            console.log(`🧹 [Modal Close] Resetting ${isSpotifyPublic ? 'Spotify Public' : (isDeezer ? 'Deezer' : (isBeatport ? 'Beatport' : (isTidal ? 'Tidal' : 'YouTube')))} state after completion`);
-
-            if (isSpotifyPublic) {
-                // Spotify Public: Extract url_hash and reset state
-                const spUrlHash = state.spotify_public_playlist_id || null;
-                if (spUrlHash && spotifyPublicPlaylistStates[spUrlHash]) {
-                    const preservedData = {
-                        playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
-                        discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
-                        spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
-                        discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
-                        convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
-                    };
-
-                    delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
-                    delete spotifyPublicPlaylistStates[spUrlHash].phase;
-
-                    Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
-                    spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
-
-                    updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
-
-                    try {
-                        fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                    } catch (error) {
-                        console.warn('Error updating backend Spotify Public phase:', error);
-                    }
-                }
-            } else if (isDeezer) {
-                // Deezer: Extract playlist ID and reset Deezer state
-                const deezerPlaylistId = state.deezer_playlist_id || null;
-                if (deezerPlaylistId && deezerPlaylistStates[deezerPlaylistId]) {
-                    const preservedData = {
-                        playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
-                        discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
-                        spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
-                        discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
-                        convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
-                    };
-
-                    delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
-                    delete deezerPlaylistStates[deezerPlaylistId].phase;
-
-                    Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
-                    deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
-
-                    updateDeezerCardPhase(deezerPlaylistId, 'discovered');
-
-                    try {
-                        fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                    } catch (error) {
-                        console.warn('Error updating backend Deezer phase:', error);
-                    }
-                }
-            } else if (isTidal) {
-                // Tidal: Extract playlist ID and reset Tidal state
-                const tidalPlaylistId = state.tidal_playlist_id || null;
-                if (tidalPlaylistId && tidalPlaylistStates[tidalPlaylistId]) {
-                    // Preserve discovery data but reset phase
-                    const preservedData = {
-                        playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
-                        discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
-                        spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
-                        discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
-                        convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
-                    };
-
-                    // Clear download state
-                    delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
-                    delete tidalPlaylistStates[tidalPlaylistId].phase;
-
-                    // Restore preserved data and set to discovered phase
-                    Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
-                    tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
-
-                    updateTidalCardPhase(tidalPlaylistId, 'discovered');
-
-                    // Update backend state
-                    try {
-                        fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                    } catch (error) {
-                        console.warn('⚠️ Error updating backend Tidal phase:', error);
-                    }
-                }
-            } else if (isBeatport) {
-                // Beatport: Reset chart state
-                const chartHash = state.beatport_chart_hash || urlHash;
-                if (beatportChartStates[chartHash]) {
-                    beatportChartStates[chartHash].phase = 'discovered';
-                    updateBeatportCardPhase(chartHash, 'discovered');
-
-                    // Update backend state
-                    try {
-                        fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-                            method: 'POST',
-                            headers: { 'Content-Type': 'application/json' },
-                            body: JSON.stringify({ phase: 'discovered' })
-                        });
-                    } catch (error) {
-                        console.warn('⚠️ Error updating backend Beatport phase:', error);
-                    }
-                }
-            } else {
-                // YouTube: Reset to discovered phase
-                updateYouTubeCardPhase(urlHash, 'discovered');
-
-                // Update backend state
-                try {
-                    fetch(`/api/youtube/update_phase/${urlHash}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'discovered' })
-                    });
-                } catch (error) {
-                    console.warn('⚠️ Error updating backend YouTube phase:', error);
-                }
-            }
-
-            // Reset frontend state to discovered
-            state.phase = 'discovered';
-            console.log(`✅ [Modal Close] Reset to discovered phase: ${urlHash}`);
-        }
-    }
-
-    // Keep modal reference and all state intact
-    // Discovery polling continues in background if active
-}
-
-// ===============================
-// YOUTUBE SYNC FUNCTIONALITY
-// ===============================
-
-async function startYouTubePlaylistSync(urlHash) {
-    try {
-        console.log('🔄 Starting YouTube playlist sync:', urlHash);
-
-        const response = await fetch(`/api/youtube/sync/start/${urlHash}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error starting sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Capture sync_playlist_id for WebSocket subscription
-        const syncPlaylistId = result.sync_playlist_id;
-        const ytState = youtubePlaylistStates[urlHash];
-        if (ytState) ytState.syncPlaylistId = syncPlaylistId;
-
-        // Update card and modal to syncing phase
-        updateYouTubeCardPhase(urlHash, 'syncing');
-
-        // Update modal buttons if modal is open
-        updateYouTubeModalButtons(urlHash, 'syncing');
-
-        // Start sync polling
-        startYouTubeSyncPolling(urlHash, syncPlaylistId);
-
-        showToast('YouTube playlist sync started!', 'success');
-
-    } catch (error) {
-        console.error('❌ Error starting YouTube sync:', error);
-        showToast(`Error starting sync: ${error.message}`, 'error');
-    }
-}
-
-function startYouTubeSyncPolling(urlHash, syncPlaylistId) {
-    // Stop any existing polling
-    if (activeYouTubePollers[urlHash]) {
-        clearInterval(activeYouTubePollers[urlHash]);
-    }
-
-    // Resolve syncPlaylistId from argument or stored state
-    const ytState = youtubePlaylistStates[urlHash];
-    syncPlaylistId = syncPlaylistId || (ytState && ytState.syncPlaylistId);
-
-    // Phase 6: Subscribe via WebSocket
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateYouTubeCardSyncProgress(urlHash, progress);
-            updateYouTubeModalSyncProgress(urlHash, progress);
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                updateYouTubeCardPhase(urlHash, 'sync_complete');
-                updateYouTubeModalButtons(urlHash, 'sync_complete');
-                showToast('YouTube playlist sync complete!', 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                updateYouTubeCardPhase(urlHash, 'discovered');
-                updateYouTubeModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    // Define the polling function (HTTP fallback)
-    const pollFunction = async () => {
-        if (socketConnected) return; // Phase 6: WS handles updates
-        try {
-            const response = await fetch(`/api/youtube/sync/status/${urlHash}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling YouTube sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                return;
-            }
-
-            updateYouTubeCardSyncProgress(urlHash, status.progress);
-            updateYouTubeModalSyncProgress(urlHash, status.progress);
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                updateYouTubeCardPhase(urlHash, 'sync_complete');
-                updateYouTubeModalButtons(urlHash, 'sync_complete');
-                showToast('YouTube playlist sync complete!', 'success');
-            } else if (status.sync_status === 'error') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[urlHash];
-                updateYouTubeCardPhase(urlHash, 'discovered');
-                updateYouTubeModalButtons(urlHash, 'discovered');
-                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            console.error('❌ Error polling YouTube sync:', error);
-            if (activeYouTubePollers[urlHash]) {
-                clearInterval(activeYouTubePollers[urlHash]);
-                delete activeYouTubePollers[urlHash];
-            }
-        }
-    };
-
-    // Run immediately to get current status (skip if WS active)
-    if (!socketConnected) pollFunction();
-
-    // Then continue polling at regular intervals
-    const pollInterval = setInterval(pollFunction, 1000);
-    activeYouTubePollers[urlHash] = pollInterval;
-}
-
-async function cancelYouTubeSync(urlHash) {
-    try {
-        console.log('❌ Cancelling YouTube sync:', urlHash);
-
-        const response = await fetch(`/api/youtube/sync/cancel/${urlHash}`, {
-            method: 'POST'
-        });
-
-        const result = await response.json();
-
-        if (result.error) {
-            showToast(`Error cancelling sync: ${result.error}`, 'error');
-            return;
-        }
-
-        // Stop polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Phase 6: Clean up WS subscription
-        const ytCancelState = youtubePlaylistStates[urlHash];
-        const ytSyncId = ytCancelState && ytCancelState.syncPlaylistId;
-        if (ytSyncId && _syncProgressCallbacks[ytSyncId]) {
-            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [ytSyncId] });
-            delete _syncProgressCallbacks[ytSyncId];
-        }
-
-        // Revert to discovered phase
-        updateYouTubeCardPhase(urlHash, 'discovered');
-        updateYouTubeModalButtons(urlHash, 'discovered');
-
-        showToast('YouTube sync cancelled', 'info');
-
-    } catch (error) {
-        console.error('❌ Error cancelling YouTube sync:', error);
-        showToast(`Error cancelling sync: ${error.message}`, 'error');
-    }
-}
-
-function updateYouTubeCardSyncProgress(urlHash, progress) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state || !state.cardElement || !progress) return;
-
-    const card = state.cardElement;
-    const progressElement = card.querySelector('.playlist-card-progress');
-
-    // Build clean status counter HTML exactly like Spotify cards
-    let statusCounterHTML = '';
-    if (progress && progress.total_tracks > 0) {
-        const matched = progress.matched_tracks || 0;
-        const failed = progress.failed_tracks || 0;
-        const total = progress.total_tracks || 0;
-        const processed = matched + failed;
-        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-        statusCounterHTML = `
-            <div class="playlist-card-sync-status">
-                <span class="sync-stat total-tracks">♪ ${total}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat matched-tracks">✓ ${matched}</span>
-                <span class="sync-separator">/</span>
-                <span class="sync-stat failed-tracks">✗ ${failed}</span>
-                <span class="sync-stat percentage">(${percentage}%)</span>
-            </div>
-        `;
-    }
-
-    // Only update if we have valid sync progress, otherwise preserve existing discovery results
-    if (statusCounterHTML) {
-        progressElement.innerHTML = statusCounterHTML;
-    }
-
-    console.log(`🔄 Updated YouTube sync progress: ♪ ${progress?.total_tracks || 0} / ✓ ${progress?.matched_tracks || 0} / ✗ ${progress?.failed_tracks || 0}`);
-}
-
-function updateYouTubeModalSyncProgress(urlHash, progress) {
-    // Try all source-specific element ID prefixes
-    const prefixes = ['youtube', 'listenbrainz', 'tidal', 'deezer', 'spotify-public', 'beatport'];
-    let statusDisplay = null;
-    let prefix = 'youtube';
-    for (const p of prefixes) {
-        statusDisplay = document.getElementById(`${p}-sync-status-${urlHash}`);
-        if (statusDisplay) { prefix = p; break; }
-    }
-    if (!statusDisplay || !progress) return;
-
-    const totalEl = document.getElementById(`${prefix}-total-${urlHash}`);
-    const matchedEl = document.getElementById(`${prefix}-matched-${urlHash}`);
-    const failedEl = document.getElementById(`${prefix}-failed-${urlHash}`);
-    const percentageEl = document.getElementById(`${prefix}-percentage-${urlHash}`);
-
-    const total = progress.total_tracks || 0;
-    const matched = progress.matched_tracks || 0;
-    const failed = progress.failed_tracks || 0;
-
-    if (totalEl) totalEl.textContent = total;
-    if (matchedEl) matchedEl.textContent = matched;
-    if (failedEl) failedEl.textContent = failed;
-
-    // Calculate percentage like Spotify sync
-    if (total > 0) {
-        const processed = matched + failed;
-        const percentage = Math.round((processed / total) * 100);
-        if (percentageEl) percentageEl.textContent = percentage;
-    }
-
-    console.log(`📊 YouTube modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
-}
-
-function updateYouTubeModalButtons(urlHash, phase) {
-    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-    if (!modal) return;
-
-    const footerLeft = modal.querySelector('.modal-footer-left');
-    if (footerLeft) {
-        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
-    }
-}
-
-// ===============================
-// YOUTUBE DOWNLOAD MISSING TRACKS
-// ===============================
-
-async function startYouTubeDownloadMissing(urlHash) {
-    try {
-        console.log('🔍 Starting download missing tracks:', urlHash);
-
-        // Check both YouTube and ListenBrainz states (like Beatport does)
-        const state = youtubePlaylistStates[urlHash] || listenbrainzPlaylistStates[urlHash];
-        // Support both camelCase and snake_case
-        const discoveryResults = state?.discoveryResults || state?.discovery_results;
-
-        if (!state || !discoveryResults) {
-            showToast('No discovery results available for download', 'error');
-            return;
-        }
-
-        // Determine source type (prefix removed - no longer needed)
-        const isListenBrainz = state.is_listenbrainz_playlist;
-        const isBeatport = state.is_beatport_playlist;
-        const isTidal = state.is_tidal_playlist;
-        const isDeezer = state.is_deezer_playlist;
-
-        // Convert discovery results to a format compatible with the download modal
-        const spotifyTracks = discoveryResults
-            .filter(result => result.spotify_data || (result.spotify_track && result.status_class === 'found'))
-            .map(result => {
-                if (result.spotify_data) {
-                    return result.spotify_data;
-                } else {
-                    // Build from individual fields (automatic discovery format)
-                    // Convert album to proper object format for wishlist compatibility
-                    const albumData = result.spotify_album || 'Unknown Album';
-                    const albumObject = typeof albumData === 'object' && albumData !== null
-                        ? albumData
-                        : {
-                            name: typeof albumData === 'string' ? albumData : 'Unknown Album',
-                            album_type: 'album',
-                            images: []
-                        };
-
-                    return {
-                        id: result.spotify_id || 'unknown',
-                        name: result.spotify_track || 'Unknown Track',
-                        artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
-                        album: albumObject,
-                        duration_ms: 0
-                    };
-                }
-            });
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        // Create a virtual playlist for the download system
-        const virtualPlaylistId = isListenBrainz ? `listenbrainz_${urlHash}` : (isDeezer ? `deezer_${urlHash}` : (isBeatport ? `beatport_${urlHash}` : (isTidal ? `tidal_${urlHash}` : `youtube_${urlHash}`)));
-        const playlistName = state.playlist.name;
-
-        // Store reference for card navigation
-        state.convertedSpotifyPlaylistId = virtualPlaylistId;
-
-        // Close the discovery modal if it's open
-        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
-        if (discoveryModal) {
-            discoveryModal.classList.add('hidden');
-            console.log('🔄 Closed YouTube discovery modal to show download modal');
-        }
-
-        // Open download missing tracks modal for YouTube playlist
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // Phase will change to 'downloading' when user clicks "Begin Analysis" button
-
-    } catch (error) {
-        console.error('❌ Error starting download missing tracks:', error);
-        showToast(`Error starting downloads: ${error.message}`, 'error');
-    }
-}
-
-async function resetYouTubePlaylist(urlHash) {
-    const state = youtubePlaylistStates[urlHash];
-    if (!state) return;
-
-    try {
-        console.log(`🔄 Resetting YouTube playlist to fresh state: ${state.playlist.name}`);
-
-        // Call backend reset endpoint
-        const response = await fetch(`/api/youtube/reset/${urlHash}`, {
-            method: 'POST'
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to reset playlist');
-        }
-
-        // Stop any active polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Update client state to match backend reset
-        state.phase = 'fresh';
-        state.discoveryResults = [];
-        state.discoveryProgress = 0;
-        state.spotifyMatches = 0;
-        state.syncPlaylistId = null;
-        state.syncProgress = {};
-        state.convertedSpotifyPlaylistId = null;
-
-        // Update card to reflect fresh state
-        updateYouTubeCardPhase(urlHash, 'fresh');
-        updateYouTubeCardProgress(urlHash, {
-            discovery_progress: 0,
-            spotify_matches: 0,
-            spotify_total: state.playlist.tracks.length
-        });
-
-        // Close modal
-        closeYouTubeDiscoveryModal(urlHash);
-
-        showToast(`Reset "${state.playlist.name}" to fresh state`, 'success');
-        console.log(`✅ Successfully reset YouTube playlist: ${state.playlist.name}`);
-
-    } catch (error) {
-        console.error(`❌ Error resetting YouTube playlist:`, error);
-        showToast(`Error resetting playlist: ${error.message}`, 'error');
-    }
-}
-
-async function resetBeatportChart(urlHash) {
-    const state = youtubePlaylistStates[urlHash];
-    const chartState = beatportChartStates[urlHash];
-
-    if (!state || !state.is_beatport_playlist || !chartState) {
-        console.error('❌ Invalid Beatport chart state for reset');
-        return;
-    }
-
-    try {
-        console.log(`🔄 Resetting Beatport chart to fresh state: ${state.playlist.name}`);
-
-        // Call backend reset endpoint for Beatport
-        const chartHash = state.beatport_chart_hash || urlHash;
-        const response = await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                phase: 'fresh',
-                reset: true
-            })
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to reset Beatport chart');
-        }
-
-        // Stop any active polling
-        if (activeYouTubePollers[urlHash]) {
-            clearInterval(activeYouTubePollers[urlHash]);
-            delete activeYouTubePollers[urlHash];
-        }
-
-        // Update client state to match backend reset
-        state.phase = 'fresh';
-        state.discoveryResults = [];
-        state.discoveryProgress = 0;
-        state.spotifyMatches = 0;
-        state.discovery_results = [];
-        state.discovery_progress = 0;
-        state.spotify_matches = 0;
-        state.syncPlaylistId = null;
-        state.syncProgress = {};
-        state.convertedSpotifyPlaylistId = null;
-
-        // Update Beatport chart state
-        chartState.phase = 'fresh';
-
-        // Update card to reflect fresh state
-        updateBeatportCardPhase(chartHash, 'fresh');
-        updateBeatportCardProgress(chartHash, {
-            spotify_total: state.playlist.tracks.length,
-            spotify_matches: 0,
-            failed: 0
-        });
-
-        // Close modal
-        closeYouTubeDiscoveryModal(urlHash);
-
-        showToast(`Reset "${state.playlist.name}" to fresh state`, 'success');
-        console.log(`✅ Successfully reset Beatport chart: ${state.playlist.name}`);
-
-    } catch (error) {
-        console.error(`❌ Error resetting Beatport chart:`, error);
-        showToast(`Error resetting chart: ${error.message}`, 'error');
-    }
-}
-
-// ============================================================================
-// LISTENBRAINZ PLAYLIST DISCOVERY & SYNC
-// ============================================================================
-
-function startListenBrainzDiscoveryPolling(playlistMbid) {
-    console.log(`🔄 Starting ListenBrainz discovery polling for: ${playlistMbid}`);
-
-    // Stop any existing polling (reuse YouTube polling infrastructure)
-    if (activeYouTubePollers[playlistMbid]) {
-        clearInterval(activeYouTubePollers[playlistMbid]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('discovery:subscribe', { ids: [playlistMbid] });
-        _discoveryProgressCallbacks[playlistMbid] = (data) => {
-            if (data.error) {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistMbid] }); delete _discoveryProgressCallbacks[playlistMbid];
-                return;
-            }
-            if (listenbrainzPlaylistStates[playlistMbid]) {
-                const transformed = {
-                    progress: data.progress || 0, spotify_matches: data.spotify_matches || 0, spotify_total: data.spotify_total || 0,
-                    results: (data.results || []).map((r, i) => ({
-                        index: r.index !== undefined ? r.index : i,
-                        yt_track: r.lb_track || r.track_name || 'Unknown',
-                        yt_artist: r.lb_artist || r.artist_name || 'Unknown',
-                        status: (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found') ? '✅ Found' : (r.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                        status_class: r.status_class || ((r.status === 'found' || r.status === '✅ Found') ? 'found' : (r.status === 'error' ? 'error' : 'not-found')),
-                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
-                        spotify_artist: r.spotify_data ? (r.spotify_data.artists && r.spotify_data.artists[0] ? (typeof r.spotify_data.artists[0] === 'object' ? r.spotify_data.artists[0].name : r.spotify_data.artists[0]) : '-') : (r.spotify_artist || '-'),
-                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) || '-' : (r.spotify_album || '-'),
-                        spotify_data: r.spotify_data, duration: r.duration || '0:00'
-                    })),
-                    complete: data.complete || data.phase === 'discovered'
-                };
-                const st = listenbrainzPlaylistStates[playlistMbid];
-                st.discovery_results = data.results || []; st.discoveryResults = transformed.results;
-                st.discovery_progress = data.progress || 0; st.discoveryProgress = data.progress || 0;
-                st.spotify_matches = data.spotify_matches || 0; st.spotifyMatches = data.spotify_matches || 0;
-                st.spotify_total = data.spotify_total || 0; st.spotifyTotal = data.spotify_total || 0;
-                updateYouTubeDiscoveryModal(playlistMbid, transformed);
-            }
-            if (data.complete || data.phase === 'discovered') {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('discovery:unsubscribe', { ids: [playlistMbid] }); delete _discoveryProgressCallbacks[playlistMbid];
-                if (listenbrainzPlaylistStates[playlistMbid]) listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
-                updateYouTubeModalButtons(playlistMbid, 'discovered');
-                const _descElWs = document.querySelector(`#youtube-discovery-modal-${playlistMbid} .modal-description`);
-                if (_descElWs) _descElWs.textContent = 'Discovery complete! View the results below.';
-                const playlistIdEl = `discover-lb-playlist-${playlistMbid}`;
-                const syncBtn = document.getElementById(`${playlistIdEl}-sync-btn`);
-                if (syncBtn) syncBtn.style.display = 'inline-block';
-                showToast('ListenBrainz discovery complete!', 'success');
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/listenbrainz/discovery/status/${playlistMbid}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling ListenBrainz discovery status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-                return;
-            }
-
-            // Update state and modal (reuse YouTube infrastructure like Beatport/Tidal)
-            if (listenbrainzPlaylistStates[playlistMbid]) {
-                // Transform ListenBrainz results to YouTube modal format (like Beatport does)
-                const transformedStatus = {
-                    progress: status.progress || 0,
-                    spotify_matches: status.spotify_matches || 0,
-                    spotify_total: status.spotify_total || 0,
-                    results: (status.results || []).map((result, index) => ({
-                        index: result.index !== undefined ? result.index : index,
-                        yt_track: result.lb_track || result.track_name || 'Unknown',
-                        yt_artist: result.lb_artist || result.artist_name || 'Unknown',
-                        status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
-                        status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
-                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
-                        spotify_artist: result.spotify_data ? (result.spotify_data.artists && result.spotify_data.artists[0] ? (typeof result.spotify_data.artists[0] === 'object' ? result.spotify_data.artists[0].name : result.spotify_data.artists[0]) : '-') : (result.spotify_artist || '-'),
-                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) || '-' : (result.spotify_album || '-'),
-                        spotify_data: result.spotify_data,
-                        duration: result.duration || '0:00'
-                    })),
-                    complete: status.complete || status.phase === 'discovered'
-                };
-
-                // Store both raw and transformed results (support both naming conventions)
-                listenbrainzPlaylistStates[playlistMbid].discovery_results = status.results || [];
-                listenbrainzPlaylistStates[playlistMbid].discoveryResults = transformedStatus.results;
-                listenbrainzPlaylistStates[playlistMbid].discovery_progress = status.progress || 0;
-                listenbrainzPlaylistStates[playlistMbid].discoveryProgress = status.progress || 0;
-                listenbrainzPlaylistStates[playlistMbid].spotify_matches = status.spotify_matches || 0;
-                listenbrainzPlaylistStates[playlistMbid].spotifyMatches = status.spotify_matches || 0;  // camelCase for modal
-                listenbrainzPlaylistStates[playlistMbid].spotify_total = status.spotify_total || 0;
-                listenbrainzPlaylistStates[playlistMbid].spotifyTotal = status.spotify_total || 0;  // camelCase for modal
-
-                // Update modal if open
-                updateYouTubeDiscoveryModal(playlistMbid, transformedStatus);
-            }
-
-            // Check if complete
-            if (status.complete || status.phase === 'discovered') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-
-                // Update phase in backend for persistence (like Beatport does)
-                try {
-                    await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ phase: 'discovered' })
-                    });
-                    console.log('✅ Updated ListenBrainz backend phase to discovered');
-                } catch (error) {
-                    console.warn('⚠️ Failed to update backend phase:', error);
-                }
-
-                // Update phase in frontend state
-                if (listenbrainzPlaylistStates[playlistMbid]) {
-                    listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
-                }
-
-                // Update modal buttons to show sync and download buttons
-                updateYouTubeModalButtons(playlistMbid, 'discovered');
-
-                // Update modal description to "Discovery complete!"
-                const descEl = document.querySelector(`#youtube-discovery-modal-${playlistMbid} .modal-description`);
-                if (descEl) descEl.textContent = 'Discovery complete! View the results below.';
-
-                // Show sync button in playlist listing (hidden by default until discovered)
-                const playlistId = `discover-lb-playlist-${playlistMbid}`;
-                const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
-                if (syncBtn) {
-                    syncBtn.style.display = 'inline-block';
-                    console.log('✅ Showing sync button after discovery completion');
-                }
-
-                console.log('✅ ListenBrainz discovery complete:', playlistMbid);
-                showToast('ListenBrainz discovery complete!', 'success');
-            }
-
-        } catch (error) {
-            console.error('❌ Error polling ListenBrainz discovery:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[playlistMbid];
-        }
-    }, 1000);
-
-    activeYouTubePollers[playlistMbid] = pollInterval;
-}
-
-function startListenBrainzSyncPolling(playlistMbid, syncPlaylistId) {
-    // Stop any existing polling
-    if (activeYouTubePollers[playlistMbid]) {
-        clearInterval(activeYouTubePollers[playlistMbid]);
-    }
-
-    // Resolve syncPlaylistId from argument or stored state
-    const lbState = listenbrainzPlaylistStates[playlistMbid];
-    syncPlaylistId = syncPlaylistId || (lbState && lbState.syncPlaylistId);
-
-    // Phase 6: Subscribe via WebSocket
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            updateYouTubeModalSyncProgress(playlistMbid, progress);
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                updateYouTubeModalButtons(playlistMbid, 'sync_complete');
-                showToast('ListenBrainz playlist sync complete!', 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                updateYouTubeModalButtons(playlistMbid, 'discovered');
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    // Define the polling function (HTTP fallback)
-    const pollFunction = async () => {
-        if (socketConnected) return; // Phase 6: WS handles updates
-        try {
-            const response = await fetch(`/api/listenbrainz/sync/status/${playlistMbid}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling ListenBrainz sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-                return;
-            }
-
-            updateYouTubeModalSyncProgress(playlistMbid, status.progress);
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-                updateYouTubeModalButtons(playlistMbid, 'sync_complete');
-                showToast('ListenBrainz playlist sync complete!', 'success');
-            } else if (status.sync_status === 'error') {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-                updateYouTubeModalButtons(playlistMbid, 'discovered');
-                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
-            }
-        } catch (error) {
-            console.error('❌ Error polling ListenBrainz sync:', error);
-            if (activeYouTubePollers[playlistMbid]) {
-                clearInterval(activeYouTubePollers[playlistMbid]);
-                delete activeYouTubePollers[playlistMbid];
-            }
-        }
-    };
-
-    // Run immediately to get current status (skip if WS active)
-    if (!socketConnected) pollFunction();
-
-    // Then continue polling at regular intervals
-    const pollInterval = setInterval(pollFunction, 1000);
-    activeYouTubePollers[playlistMbid] = pollInterval;
-}
-
-async function startListenBrainzDiscovery(playlistMbid) {
-    const state = listenbrainzPlaylistStates[playlistMbid];
-    if (!state) {
-        console.error('❌ No ListenBrainz playlist state found');
-        return;
-    }
-
-    try {
-        console.log('🔍 Starting ListenBrainz discovery for:', state.playlist.name);
-
-        // Update local phase to discovering
-        state.phase = 'discovering';
-        state.status = 'discovering';
-
-        // Call backend to start discovery worker
-        const response = await fetch(`/api/listenbrainz/discovery/start/${playlistMbid}`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist: state.playlist
-            })
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to start discovery');
-        }
-
-        console.log('✅ ListenBrainz discovery started on backend');
-
-        // Start polling for progress
-        startListenBrainzDiscoveryPolling(playlistMbid);
-
-        // Update modal to show discovering state
-        updateYouTubeDiscoveryModal(playlistMbid, {
-            phase: 'discovering',
-            progress: 0,
-            results: []
-        });
-
-        showToast('Starting ListenBrainz discovery...', 'info');
-
-    } catch (error) {
-        console.error('❌ Error starting ListenBrainz discovery:', error);
-        showToast(`Error: ${error.message}`, 'error');
-
-        // Revert phase on error
-        state.phase = 'fresh';
-        state.status = 'pending';
-    }
-}
-
-async function startListenBrainzPlaylistSync(playlistMbid) {
-    const state = listenbrainzPlaylistStates[playlistMbid];
-    if (!state) {
-        console.error('❌ No ListenBrainz playlist state found');
-        return;
-    }
-
-    try {
-        console.log('🔄 Starting ListenBrainz sync for:', state.playlist.name);
-
-        // Check if being called from playlist listing (has UI elements) or modal
-        const listingPlaylistId = `discover-lb-playlist-${playlistMbid}`;
-        const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
-        const isFromListing = statusDisplay !== null;
-
-        if (isFromListing) {
-            console.log('🔄 Sync initiated from playlist listing');
-            // Show status display in listing
-            statusDisplay.style.display = 'block';
-            const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
-            if (syncButton) {
-                syncButton.disabled = true;
-                syncButton.style.opacity = '0.5';
-            }
-        }
-
-        // Call backend to start sync
-        const response = await fetch(`/api/listenbrainz/sync/start/${playlistMbid}`, {
-            method: 'POST'
-        });
-
-        if (!response.ok) {
-            const error = await response.json();
-            throw new Error(error.error || 'Failed to start sync');
-        }
-
-        // Capture sync_playlist_id for WebSocket subscription
-        const result = await response.json();
-        const syncPlaylistId = result.sync_playlist_id;
-        if (state) state.syncPlaylistId = syncPlaylistId;
-
-        // Update phase to syncing
-        state.phase = 'syncing';
-
-        // Start polling for sync progress
-        if (isFromListing) {
-            startListenBrainzListingSyncPolling(playlistMbid, listingPlaylistId, syncPlaylistId);
-        } else {
-            startListenBrainzSyncPolling(playlistMbid, syncPlaylistId);
-            updateYouTubeModalButtons(playlistMbid, 'syncing');
-        }
-
-        showToast('Starting ListenBrainz sync...', 'info');
-
-    } catch (error) {
-        console.error('❌ Error starting ListenBrainz sync:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-function startListenBrainzListingSyncPolling(playlistMbid, listingPlaylistId, syncPlaylistId) {
-    console.log(`🔄 Starting listing sync polling for: ${playlistMbid} (UI: ${listingPlaylistId})`);
-
-    // Stop any existing polling
-    if (activeYouTubePollers[playlistMbid]) {
-        clearInterval(activeYouTubePollers[playlistMbid]);
-    }
-
-    // Resolve syncPlaylistId from argument or stored state
-    const lbState = listenbrainzPlaylistStates[playlistMbid];
-    syncPlaylistId = syncPlaylistId || (lbState && lbState.syncPlaylistId);
-
-    // Phase 6: Subscribe via WebSocket
-    if (socketConnected && syncPlaylistId) {
-        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
-        _syncProgressCallbacks[syncPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const percentage = total > 0 ? Math.round((matched / total) * 100) : 0;
-
-            const totalEl = document.getElementById(`${listingPlaylistId}-sync-total`);
-            const matchedEl = document.getElementById(`${listingPlaylistId}-sync-matched`);
-            const failedEl = document.getElementById(`${listingPlaylistId}-sync-failed`);
-            const percentageEl = document.getElementById(`${listingPlaylistId}-sync-percentage`);
-
-            if (totalEl) totalEl.textContent = total;
-            if (matchedEl) matchedEl.textContent = matched;
-            if (failedEl) failedEl.textContent = failed;
-            if (percentageEl) percentageEl.textContent = percentage;
-
-            if (data.status === 'finished') {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-
-                const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
-                const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
-                if (statusDisplay) setTimeout(() => { statusDisplay.style.display = 'none'; }, 3000);
-                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; }
-
-                if (listenbrainzPlaylistStates[playlistMbid]) {
-                    listenbrainzPlaylistStates[playlistMbid].phase = 'sync_complete';
-                }
-
-                showToast(`Sync complete: ${matched}/${total} tracks matched`, 'success');
-            } else if (data.status === 'error' || data.status === 'cancelled') {
-                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
-                delete _syncProgressCallbacks[syncPlaylistId];
-                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
-            }
-        };
-    }
-
-    const pollInterval = setInterval(async () => {
-        if (socketConnected) return; // Phase 6: WS handles updates
-        try {
-            const response = await fetch(`/api/listenbrainz/sync/status/${playlistMbid}`);
-            const status = await response.json();
-
-            if (status.error) {
-                console.error('❌ Error polling ListenBrainz sync status:', status.error);
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-                return;
-            }
-
-            const totalEl = document.getElementById(`${listingPlaylistId}-sync-total`);
-            const matchedEl = document.getElementById(`${listingPlaylistId}-sync-matched`);
-            const failedEl = document.getElementById(`${listingPlaylistId}-sync-failed`);
-            const percentageEl = document.getElementById(`${listingPlaylistId}-sync-percentage`);
-
-            if (totalEl) totalEl.textContent = status.progress?.total_tracks || 0;
-            if (matchedEl) matchedEl.textContent = status.progress?.matched_tracks || 0;
-            if (failedEl) failedEl.textContent = status.progress?.failed_tracks || 0;
-
-            const percentage = status.progress?.total_tracks > 0
-                ? Math.round(((status.progress?.matched_tracks || 0) / status.progress.total_tracks) * 100)
-                : 0;
-            if (percentageEl) percentageEl.textContent = percentage;
-
-            if (status.complete) {
-                clearInterval(pollInterval);
-                delete activeYouTubePollers[playlistMbid];
-
-                const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
-                const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
-                if (statusDisplay) setTimeout(() => { statusDisplay.style.display = 'none'; }, 3000);
-                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; }
-
-                if (listenbrainzPlaylistStates[playlistMbid]) {
-                    listenbrainzPlaylistStates[playlistMbid].phase = 'sync_complete';
-                }
-
-                showToast(`Sync complete: ${status.progress?.matched_tracks || 0}/${status.progress?.total_tracks || 0} tracks matched`, 'success');
-            }
-        } catch (error) {
-            console.error('❌ Error polling ListenBrainz listing sync:', error);
-            clearInterval(pollInterval);
-            delete activeYouTubePollers[playlistMbid];
-        }
-    }, 1000);
-
-    activeYouTubePollers[playlistMbid] = pollInterval;
-}
-
-// ============================================================================
-// ARTISTS PAGE FUNCTIONALITY - ELEGANT SEARCH & DISCOVERY
-// ============================================================================
-
-/**
- * Initialize the artists page when navigated to (only runs once)
- */
-function initializeArtistsPage() {
-    console.log('🎵 Initializing Artists Page (first time)');
-
-    // Get DOM elements
-    const searchInput = document.getElementById('artists-search-input');
-    const headerSearchInput = document.getElementById('artists-header-search-input');
-    const searchStatus = document.getElementById('artists-search-status');
-    const backButton = document.getElementById('artists-back-button');
-    const detailBackButton = document.getElementById('artist-detail-back-button');
-
-    // Set up event listeners (only need to do this once)
-    if (searchInput) {
-        searchInput.addEventListener('input', handleArtistsSearchInput);
-        searchInput.addEventListener('keypress', handleArtistsSearchKeypress);
-    }
-
-    if (headerSearchInput) {
-        headerSearchInput.addEventListener('input', handleArtistsHeaderSearchInput);
-        headerSearchInput.addEventListener('keypress', handleArtistsSearchKeypress);
-    }
-
-    if (backButton) {
-        backButton.addEventListener('click', () => showArtistsSearchState());
-    }
-
-    if (detailBackButton) {
-        detailBackButton.addEventListener('click', () => {
-            // If there are no search results (user navigated directly to artist),
-            // go straight to the main search view instead of showing an empty results page
-            if (!artistsPageState.searchResults || artistsPageState.searchResults.length === 0) {
-                showArtistsSearchState();
-            } else {
-                showArtistsResultsState();
-            }
-        });
-    }
-
-    // Initialize tabs (only need to do this once)
-    initializeArtistTabs();
-
-    // Mark as initialized
-    artistsPageState.isInitialized = true;
-
-    // Restore previous state instead of always resetting to search
-    restoreArtistsPageState();
-    console.log('✅ Artists Page initialized successfully (ready for navigation)');
-}
-
-/**
- * Restore the artists page to its previous state
- */
-function restoreArtistsPageState() {
-    console.log(`🔄 Restoring artists page state: ${artistsPageState.currentView}`);
-
-    switch (artistsPageState.currentView) {
-        case 'results':
-            // Restore search results state
-            if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
-                console.log(`📦 Restoring search results for: "${artistsPageState.searchQuery}"`);
-
-                // Restore search input values
-                const searchInput = document.getElementById('artists-search-input');
-                const headerSearchInput = document.getElementById('artists-header-search-input');
-
-                if (searchInput) searchInput.value = artistsPageState.searchQuery;
-                if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
-
-                // Display the cached results
-                displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
-            } else {
-                // No valid results state, fall back to search
-                showArtistsSearchState();
-            }
-            break;
-
-        case 'detail':
-            // Restore artist detail state
-            if (artistsPageState.selectedArtist && artistsPageState.artistDiscography) {
-                console.log(`🎤 Restoring artist detail for: ${artistsPageState.selectedArtist.name}`);
-
-                // First restore search results if they exist
-                if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
-                    const searchInput = document.getElementById('artists-search-input');
-                    const headerSearchInput = document.getElementById('artists-header-search-input');
-
-                    if (searchInput) searchInput.value = artistsPageState.searchQuery;
-                    if (headerSearchInput) headerSearchInput.value = artistsPageState.searchQuery;
-                }
-
-                // Show artist detail state
-                showArtistDetailState();
-
-                // Update artist info in header
-                updateArtistDetailHeader(artistsPageState.selectedArtist);
-
-                // Display cached discography
-                if (artistsPageState.artistDiscography.albums || artistsPageState.artistDiscography.singles) {
-                    displayArtistDiscography(artistsPageState.artistDiscography);
-                    // Restore cached completion data instead of re-scanning
-                    restoreCachedCompletionData(artistsPageState.selectedArtist.id);
-                }
-            } else {
-                // No valid detail state, fall back to search or results
-                if (artistsPageState.searchQuery && artistsPageState.searchResults.length > 0) {
-                    displayArtistsResults(artistsPageState.searchQuery, artistsPageState.searchResults);
-                } else {
-                    showArtistsSearchState();
-                }
-            }
-            break;
-
-        default:
-        case 'search':
-            // Show search state (but preserve any existing search query)
-            if (artistsPageState.searchQuery) {
-                const searchInput = document.getElementById('artists-search-input');
-                if (searchInput) searchInput.value = artistsPageState.searchQuery;
-            }
-            showArtistsSearchState();
-            break;
-    }
-}
-
-/**
- * Handle search input with debouncing
- */
-function handleArtistsSearchInput(event) {
-    const query = event.target.value.trim();
-    updateArtistsSearchStatus('searching');
-
-    // Clear existing timeout
-    if (artistsSearchTimeout) {
-        clearTimeout(artistsSearchTimeout);
-    }
-
-    // Cancel any active search
-    if (artistsSearchController) {
-        artistsSearchController.abort();
-    }
-
-    if (query === '') {
-        updateArtistsSearchStatus('default');
-        return;
-    }
-
-    // Set up new debounced search
-    artistsSearchTimeout = setTimeout(() => {
-        performArtistsSearch(query);
-    }, 1000); // 1 second debounce
-}
-
-/**
- * Handle header search input (already in results state)
- */
-function handleArtistsHeaderSearchInput(event) {
-    const query = event.target.value.trim();
-
-    // Update main search input to match
-    const mainInput = document.getElementById('artists-search-input');
-    if (mainInput) {
-        mainInput.value = query;
-    }
-
-    // Trigger search with same debouncing logic
-    handleArtistsSearchInput(event);
-}
-
-/**
- * Handle Enter key press in search inputs
- */
-function handleArtistsSearchKeypress(event) {
-    if (event.key === 'Enter') {
-        event.preventDefault();
-        const query = event.target.value.trim();
-
-        if (query && query !== artistsPageState.searchQuery) {
-            // Clear timeout and search immediately
-            if (artistsSearchTimeout) {
-                clearTimeout(artistsSearchTimeout);
-            }
-            performArtistsSearch(query);
-        }
-    }
-}
-
-/**
- * Perform artist search with API call
- */
-async function performArtistsSearch(query) {
-    console.log(`🔍 Searching for artists: "${query}"`);
-
-    // Check cache first
-    if (artistsPageState.cache.searches[query]) {
-        console.log('📦 Using cached search results');
-        displayArtistsResults(query, artistsPageState.cache.searches[query]);
-        return;
-    }
-
-    // Update status
-    updateArtistsSearchStatus('searching');
-
-    // Show loading cards immediately if we're in results view
-    if (artistsPageState.currentView === 'results') {
-        showSearchLoadingCards();
-    }
-
-    try {
-        // Set up abort controller
-        artistsSearchController = new AbortController();
-
-        const response = await fetch('/api/match/search', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                query: query,
-                context: 'artist'
-            }),
-            signal: artistsSearchController.signal
-        });
-
-        if (!response.ok) {
-            throw new Error(`Search failed: ${response.status}`);
-        }
-
-        const data = await response.json();
-        console.log(`✅ Found ${data.results?.length || 0} artists`);
-
-        // Transform the results to flatten the nested artist data
-        const transformedResults = (data.results || []).map(result => {
-            // Extract artist data from the nested structure
-            const artist = result.artist || result;
-            return {
-                id: artist.id,
-                name: artist.name,
-                image_url: artist.image_url,
-                genres: artist.genres,
-                popularity: artist.popularity,
-                confidence: result.confidence || 0
-            };
-        });
-
-        console.log('🔧 Transformed results:', transformedResults);
-
-        // Cache the transformed results
-        artistsPageState.cache.searches[query] = transformedResults;
-
-        // Display results
-        displayArtistsResults(query, transformedResults);
-
-    } catch (error) {
-        if (error.name !== 'AbortError') {
-            console.error('❌ Artist search failed:', error);
-
-            // Provide specific error messages based on the error type
-            let errorMessage = 'Search failed. Please try again.';
-            if (error.message.includes('401') || error.message.includes('authentication')) {
-                errorMessage = 'Spotify not authenticated. Please check your API settings.';
-            } else if (error.message.includes('network') || error.message.includes('fetch')) {
-                errorMessage = 'Network error. Please check your connection.';
-            } else if (error.message.includes('timeout')) {
-                errorMessage = 'Search timed out. Please try again.';
-            }
-
-            updateArtistsSearchStatus('error', errorMessage);
-        }
-    } finally {
-        artistsSearchController = null;
-    }
-}
-
-/**
- * Display artist search results
- */
-function displayArtistsResults(query, results) {
-    console.log(`📊 Displaying ${results.length} artist results`);
-
-    // Update state
-    artistsPageState.searchQuery = query;
-    artistsPageState.searchResults = results;
-    artistsPageState.currentView = 'results';
-
-    // Update header search input if different
-    const headerInput = document.getElementById('artists-header-search-input');
-    if (headerInput && headerInput.value !== query) {
-        headerInput.value = query;
-    }
-
-    // Show results state
-    showArtistsResultsState();
-
-    // Populate results
-    const container = document.getElementById('artists-cards-container');
-    if (!container) return;
-
-    if (results.length === 0) {
-        container.innerHTML = `
-            <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: rgba(255, 255, 255, 0.6);">
-                <div style="font-size: 24px; margin-bottom: 12px;">🔍</div>
-                <div style="font-size: 16px; font-weight: 600; margin-bottom: 8px;">No artists found</div>
-                <div style="font-size: 14px;">Try a different search term</div>
-            </div>
-        `;
-        return;
-    }
-
-    // Create artist cards
-    container.innerHTML = results.map(result => createArtistCardHTML(result)).join('');
-    observeLazyBackgrounds(container);
-
-    // Add event listeners to cards
-    container.querySelectorAll('.artist-card').forEach((card, index) => {
-        card.addEventListener('click', () => selectArtistForDetail(results[index]));
-
-        // Extract colors from artist image for dynamic glow
-        const artist = results[index];
-        if (artist.image_url) {
-            extractImageColors(artist.image_url, (colors) => {
-                applyDynamicGlow(card, colors);
-            });
-        }
-    });
-
-    // Update watchlist status for all cards
-    updateArtistCardWatchlistStatus();
-
-    // Lazy load missing artist images
-    console.log('🖼️ Starting lazy load for artist images on Artists page...');
-    if (typeof lazyLoadArtistImages === 'function') {
-        lazyLoadArtistImages(container);
-    } else if (typeof window.lazyLoadArtistImages === 'function') {
-        window.lazyLoadArtistImages(container);
-    } else {
-        console.error('❌ lazyLoadArtistImages function not found!');
-    }
-
-    // Add mouse wheel horizontal scrolling
-    container.addEventListener('wheel', (event) => {
-        if (event.deltaY !== 0) {
-            event.preventDefault();
-            container.scrollLeft += event.deltaY;
-        }
-    });
-}
-
-/**
- * Lazy load artist images for cards that don't have images yet.
- * Fetches images asynchronously so search results appear immediately.
- */
-async function lazyLoadArtistImages(container) {
-    if (!container) {
-        console.error('❌ lazyLoadArtistImages: container is null');
-        return;
-    }
-
-    // Find all cards that need images
-    const cardsNeedingImages = container.querySelectorAll('[data-needs-image="true"]');
-
-    if (cardsNeedingImages.length === 0) {
-        console.log('✅ All artist cards have images');
-        return;
-    }
-
-    console.log(`🖼️ Lazy loading images for ${cardsNeedingImages.length} artist cards`);
-
-    // Load images in parallel (but with a small batch to avoid overwhelming the server)
-    const batchSize = 5;
-    const cards = Array.from(cardsNeedingImages);
-
-    for (let i = 0; i < cards.length; i += batchSize) {
-        const batch = cards.slice(i, i + batchSize);
-
-        await Promise.all(batch.map(async (card) => {
-            const artistId = card.dataset.artistId;
-            if (!artistId) {
-                console.warn('⚠️ Card missing artistId:', card);
-                return;
-            }
-
-            try {
-                console.log(`🔄 Fetching image for artist ${artistId}...`);
-                const response = await fetch(`/api/artist/${artistId}/image`);
-                const data = await response.json();
-
-                console.log(`📥 Got response for ${artistId}:`, data);
-
-                if (data.success && data.image_url) {
-                    // Update the card's background image
-                    // Handle both card types (suggestion-card and artist-card)
-                    if (card.classList.contains('suggestion-card')) {
-                        card.style.backgroundImage = `url(${data.image_url})`;
-                        card.style.backgroundSize = 'cover';
-                        card.style.backgroundPosition = 'center';
-                    } else if (card.classList.contains('artist-card')) {
-                        const bgElement = card.querySelector('.artist-card-background');
-                        if (bgElement) {
-                            // Clear the gradient first, then set the image
-                            bgElement.style.cssText = `background-image: url('${data.image_url}'); background-size: cover; background-position: center;`;
-                        }
-                    }
-
-                    card.dataset.needsImage = 'false';
-                    console.log(`✅ Loaded image for artist ${artistId}`);
-                }
-            } catch (error) {
-                console.error(`❌ Failed to load image for artist ${artistId}:`, error);
-            }
-        }));
-    }
-
-    console.log('✅ Finished lazy loading artist images');
-}
-
-// Make function globally accessible
-window.lazyLoadArtistImages = lazyLoadArtistImages;
-
-/**
- * Create HTML for an artist card
- */
-function createArtistCardHTML(artist) {
-    const imageUrl = artist.image_url || '';
-    const genres = artist.genres && artist.genres.length > 0 ?
-        artist.genres.slice(0, 3).join(', ') : 'Various genres';
-    const popularity = artist.popularity || 0;
-
-    // Use data-bg-src for lazy background loading via IntersectionObserver
-    const backgroundAttr = imageUrl ?
-        `data-bg-src="${imageUrl}"` :
-        `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);"`;
-
-    // Format popularity as a percentage for better UX
-    const popularityText = popularity > 0 ? `${popularity}% Popular` : 'Popularity Unknown';
-
-    // Track if image needs to be lazy loaded
-    const needsImage = imageUrl ? 'false' : 'true';
-
-    // Check for MusicBrainz ID
-    let mbIconHTML = '';
-    if (artist.musicbrainz_id) {
-        mbIconHTML = `
-            <div class="mb-card-icon" title="View on MusicBrainz" onclick="event.stopPropagation(); window.open('https://musicbrainz.org/artist/${artist.musicbrainz_id}', '_blank')">
-                <img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">
-            </div>
-        `;
-    }
-
-    return `
-        <div class="artist-card" data-artist-id="${artist.id}" data-needs-image="${needsImage}">
-            ${mbIconHTML}
-            <div class="artist-card-background" ${backgroundAttr}></div>
-            <div class="artist-card-overlay"></div>
-            <div class="artist-card-content">
-                <div class="artist-card-name">${escapeHtml(artist.name)}</div>
-                <div class="artist-card-genres">${escapeHtml(genres)}</div>
-                <div class="artist-card-popularity">
-                    <span class="popularity-icon">🔥</span>
-                    <span>${popularityText}</span>
-                </div>
-                <div class="artist-card-actions">
-                    <div class="watchlist-btn-group">
-                        <button class="watchlist-toggle-btn" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="toggleWatchlist(event, '${artist.id}', '${escapeForInlineJs(artist.name)}')">
-                            <span class="watchlist-icon">👁️</span>
-                            <span class="watchlist-text">Add to Watchlist</span>
-                        </button>
-                        <button class="watchlist-settings-btn hidden" data-artist-id="${artist.id}" data-artist-name="${escapeHtml(artist.name)}" onclick="event.stopPropagation(); openWatchlistArtistConfigModal('${artist.id}', '${escapeForInlineJs(artist.name)}')" title="Watchlist Settings">&#9881;</button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Select an artist and show their discography
- */
-async function selectArtistForDetail(artist, options = {}) {
-    console.log(`🎤 Selected artist: ${artist.name}`);
-
-    // Cancel any ongoing completion check from previous artist
-    if (artistCompletionController) {
-        console.log('⏹️ Canceling previous artist completion check');
-        artistCompletionController.abort();
-        artistCompletionController = null;
-    }
-
-    // Cancel any ongoing similar artists stream from previous artist
-    if (similarArtistsController) {
-        console.log('⏹️ Canceling previous similar artists stream');
-        similarArtistsController.abort();
-        similarArtistsController = null;
-    }
-
-    // Update state
-    artistsPageState.selectedArtist = artist;
-    artistsPageState.currentView = 'detail';
-    artistsPageState.sourceOverride = options.source || null;
-    artistsPageState.pluginOverride = options.plugin || null;
-
-    // Show detail state
-    showArtistDetailState();
-
-    // Update artist info in header
-    updateArtistDetailHeader(artist);
-
-    // Load discography (pass artist name for cross-source fallback)
-    await loadArtistDiscography(artist.id, artist.name, options.source, options.plugin);
-}
-
-/**
- * Load artist's discography from Spotify or iTunes
- * @param {string} artistId - Artist ID (Spotify or iTunes format)
- * @param {string} [artistName] - Optional artist name for fallback searches
- */
-async function loadArtistDiscography(artistId, artistName = null, sourceOverride = null, pluginOverride = null) {
-    console.log(`💿 Loading discography for artist: ${artistId} (name: ${artistName}, source: ${sourceOverride || 'auto'})`);
-
-    // Use source-prefixed cache key to avoid ID collisions between sources
-    const cacheKey = sourceOverride ? `${sourceOverride}:${artistId}` : artistId;
-
-    // Check cache first
-    if (artistsPageState.cache.discography[cacheKey]) {
-        console.log('📦 Using cached discography');
-        const cachedDiscography = artistsPageState.cache.discography[cacheKey];
-        displayArtistDiscography(cachedDiscography);
-
-        // Load similar artists in parallel (don't wait) — always uses primary source
-        loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
-            console.error('❌ Error loading similar artists:', err);
-        });
-
-        // Still check completion status for cached data
-        await checkDiscographyCompletion(artistId, cachedDiscography);
-        return;
-    }
-
-    try {
-        // Show loading states
-        showDiscographyLoading();
-
-        // Build URL with optional artist name and source override for fallback
-        let url = `/api/artist/${artistId}/discography`;
-        const params = new URLSearchParams();
-        if (artistName) params.set('artist_name', artistName);
-        if (sourceOverride) params.set('source', sourceOverride);
-        if (pluginOverride) params.set('plugin', pluginOverride);
-        if (params.toString()) url += `?${params.toString()}`;
-
-        // Call the real API endpoint
-        const response = await fetch(url);
-
-        if (!response.ok) {
-            if (response.status === 401) {
-                throw new Error('Spotify not authenticated. Please check your API settings.');
-            }
-            throw new Error(`Failed to load discography: ${response.status}`);
-        }
-
-        const data = await response.json();
-
-        if (data.error) {
-            throw new Error(data.error);
-        }
-
-        const discography = {
-            albums: data.albums || [],
-            singles: data.singles || [],
-            source: data.source || sourceOverride || null,
-        };
-
-        // Update selected artist with full details from backend (includes MusicBrainz ID)
-        if (data.artist) {
-            console.log('✨ Updating artist details with fresh data from backend');
-            artistsPageState.selectedArtist = {
-                ...artistsPageState.selectedArtist,
-                ...data.artist
-            };
-        }
-
-        // Merge artist_info enrichment from discography response
-        if (data.artist_info) {
-            artistsPageState.selectedArtist = {
-                ...artistsPageState.selectedArtist,
-                artist_info: data.artist_info,
-            };
-        }
-
-        // Refresh header with all available data
-        updateArtistDetailHeader(artistsPageState.selectedArtist);
-
-        console.log(`✅ Loaded ${discography.albums.length} albums and ${discography.singles.length} singles`);
-
-        // Cache the results (use source-prefixed key if source override active)
-        artistsPageState.cache.discography[cacheKey] = discography;
-        artistsPageState.artistDiscography = discography;
-
-        // Display results
-        displayArtistDiscography(discography);
-
-        // Load similar artists and check completion in parallel (don't wait)
-        loadSimilarArtists(artistsPageState.selectedArtist?.name).catch(err => {
-            console.error('❌ Error loading similar artists:', err);
-        });
-
-        // Check completion status for all albums and singles
-        await checkDiscographyCompletion(artistId, discography);
-
-    } catch (error) {
-        console.error('❌ Failed to load discography:', error);
-        showDiscographyError(error.message);
-    }
-}
-
-/**
- * Display artist's discography in tabs
- */
-function displayArtistDiscography(discography) {
-    console.log(`📀 Displaying discography: ${discography.albums?.length || 0} albums, ${discography.singles?.length || 0} singles`);
-
-    // Show Download Discography button(s) if there are any releases
-    const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
-    const _discogWrap = document.getElementById('discog-download-wrap');
-    if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
-    const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
-    if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
-
-    // Populate albums
-    const albumsContainer = document.getElementById('album-cards-container');
-    if (albumsContainer) {
-        if (discography.albums?.length > 0) {
-            albumsContainer.innerHTML = discography.albums.map(album => createAlbumCardHTML(album)).join('');
-            observeLazyBackgrounds(albumsContainer);
-
-            // Add dynamic glow effects and click handlers to album cards
-            albumsContainer.querySelectorAll('.album-card').forEach((card, index) => {
-                const album = discography.albums[index];
-                if (album.image_url) {
-                    extractImageColors(album.image_url, (colors) => {
-                        applyDynamicGlow(card, colors);
-                    });
-                }
-
-                // Add click handler for download missing tracks modal
-                card.addEventListener('click', () => handleArtistAlbumClick(album, 'albums'));
-                card.style.cursor = 'pointer';
-            });
-        } else {
-            albumsContainer.innerHTML = `
-                <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.6);">
-                    <div style="font-size: 18px; margin-bottom: 8px;">💿</div>
-                    <div style="font-size: 14px;">No albums found</div>
-                </div>
-            `;
-        }
-    }
-
-    // Populate singles
-    const singlesContainer = document.getElementById('singles-cards-container');
-    if (singlesContainer) {
-        if (discography.singles?.length > 0) {
-            singlesContainer.innerHTML = discography.singles.map(single => createAlbumCardHTML(single)).join('');
-            observeLazyBackgrounds(singlesContainer);
-
-            // Add dynamic glow effects and click handlers to singles cards
-            singlesContainer.querySelectorAll('.album-card').forEach((card, index) => {
-                const single = discography.singles[index];
-                if (single.image_url) {
-                    extractImageColors(single.image_url, (colors) => {
-                        applyDynamicGlow(card, colors);
-                    });
-                }
-
-                // Add click handler for download missing tracks modal
-                card.addEventListener('click', () => handleArtistAlbumClick(single, 'singles'));
-                card.style.cursor = 'pointer';
-            });
-        } else {
-            singlesContainer.innerHTML = `
-                <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.6);">
-                    <div style="font-size: 18px; margin-bottom: 8px;">🎵</div>
-                    <div style="font-size: 14px;">No singles or EPs found</div>
-                </div>
-            `;
-        }
-    }
-
-    // Auto-switch to Singles tab if no albums but has singles
-    if ((!discography.albums || discography.albums.length === 0) &&
-        discography.singles && discography.singles.length > 0) {
-        console.log('📀 No albums found, auto-switching to Singles & EPs tab');
-
-        // Switch to singles tab
-        const albumsTab = document.getElementById('albums-tab');
-        const singlesTab = document.getElementById('singles-tab');
-        const albumsContent = document.getElementById('albums-content');
-        const singlesContent = document.getElementById('singles-content');
-
-        if (albumsTab && singlesTab && albumsContent && singlesContent) {
-            // Remove active from albums
-            albumsTab.classList.remove('active');
-            albumsContent.classList.remove('active');
-
-            // Add active to singles
-            singlesTab.classList.add('active');
-            singlesContent.classList.add('active');
-        }
-    }
-}
-
-/**
- * Load similar artists from MusicMap
- */
-async function loadSimilarArtists(artistName) {
-    if (!artistName) {
-        console.warn('⚠️ No artist name provided for similar artists');
-        return;
-    }
-
-    console.log(`🔍 Loading similar artists for: ${artistName}`);
-
-    // Get DOM elements
-    const section = document.getElementById('similar-artists-section');
-    const loadingEl = document.getElementById('similar-artists-loading');
-    const errorEl = document.getElementById('similar-artists-error');
-    const container = document.getElementById('similar-artists-bubbles-container');
-
-    if (!section || !loadingEl || !errorEl || !container) {
-        console.warn('⚠️ Similar artists section elements not found');
-        return;
-    }
-
-    // Show loading state
-    loadingEl.classList.remove('hidden');
-    errorEl.classList.add('hidden');
-    container.innerHTML = '';
-    section.style.display = 'block';
-
-    try {
-        // Create new abort controller for this similar artists stream
-        similarArtistsController = new AbortController();
-
-        // Use streaming endpoint for real-time bubble creation
-        const url = `/api/artist/similar/${encodeURIComponent(artistName)}/stream`;
-        console.log(`📡 Streaming from: ${url}`);
-
-        const response = await fetch(url, {
-            signal: similarArtistsController.signal
-        });
-
-        if (!response.ok) {
-            throw new Error(`Failed to fetch similar artists: ${response.status}`);
-        }
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-        let artistCount = 0;
-
-        // Read the stream
-        while (true) {
-            const { done, value } = await reader.read();
-
-            if (done) {
-                console.log('✅ Stream complete');
-                break;
-            }
-
-            // Decode the chunk and add to buffer
-            buffer += decoder.decode(value, { stream: true });
-
-            // Process complete messages (separated by \n\n)
-            const messages = buffer.split('\n\n');
-            buffer = messages.pop() || ''; // Keep incomplete message in buffer
-
-            for (const message of messages) {
-                if (!message.trim() || !message.startsWith('data: ')) continue;
-
-                try {
-                    const jsonData = JSON.parse(message.substring(6)); // Remove 'data: ' prefix
-
-                    if (jsonData.error) {
-                        throw new Error(jsonData.error);
-                    }
-
-                    if (jsonData.artist) {
-                        // Hide loading on first artist
-                        if (artistCount === 0) {
-                            loadingEl.classList.add('hidden');
-                        }
-
-                        // Create and append bubble immediately
-                        const bubble = createSimilarArtistBubble(jsonData.artist);
-                        container.appendChild(bubble);
-                        artistCount++;
-
-                        console.log(`✅ Added bubble for: ${jsonData.artist.name} (${artistCount})`);
-                    }
-
-                    if (jsonData.complete) {
-                        console.log(`🎉 Streaming complete: ${jsonData.total} artists`);
-
-                        if (artistCount === 0) {
-                            loadingEl.classList.add('hidden');
-                            container.innerHTML = `
-                                <div style="width: 100%; text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.5);">
-                                    <div style="font-size: 18px; margin-bottom: 8px;">🎵</div>
-                                    <div style="font-size: 14px;">No similar artists found</div>
-                                </div>
-                            `;
-                        } else {
-                            // Lazy load images for similar artists that don't have them
-                            lazyLoadSimilarArtistImages(container);
-                        }
-                    }
-                } catch (parseError) {
-                    console.error('❌ Error parsing stream message:', parseError);
-                }
-            }
-        }
-
-        // Clear the controller when done
-        similarArtistsController = null;
-
-    } catch (error) {
-        // Don't show error if it was aborted (user navigated away)
-        if (error.name === 'AbortError') {
-            console.log('⏹️ Similar artists stream aborted (user navigated to new artist)');
-            loadingEl.classList.add('hidden');
-            return;
-        }
-
-        console.error('❌ Error loading similar artists:', error);
-
-        // Hide loading, show error
-        loadingEl.classList.add('hidden');
-        errorEl.classList.remove('hidden');
-
-        // Also show error message in container
-        container.innerHTML = `
-            <div style="width: 100%; text-align: center; padding: 40px 20px; color: rgba(239, 68, 68, 0.7);">
-                <div style="font-size: 18px; margin-bottom: 8px;">⚠️</div>
-                <div style="font-size: 14px;">${error.message}</div>
-            </div>
-        `;
-    } finally {
-        // Always clear the controller
-        similarArtistsController = null;
-    }
-}
-
-/**
- * Lazy load images for similar artist bubbles that don't have images
- */
-async function lazyLoadSimilarArtistImages(container) {
-    if (!container) return;
-
-    const bubblesNeedingImages = container.querySelectorAll('.similar-artist-bubble[data-needs-image="true"]');
-
-    if (bubblesNeedingImages.length === 0) {
-        console.log('✅ All similar artist bubbles have images');
-        return;
-    }
-
-    console.log(`🖼️ Lazy loading images for ${bubblesNeedingImages.length} similar artists`);
-
-    // Load images in parallel batches
-    const batchSize = 5;
-    const bubbles = Array.from(bubblesNeedingImages);
-
-    for (let i = 0; i < bubbles.length; i += batchSize) {
-        const batch = bubbles.slice(i, i + batchSize);
-
-        await Promise.all(batch.map(async (bubble) => {
-            const artistId = bubble.getAttribute('data-artist-id');
-            const artistSource = bubble.getAttribute('data-artist-source') || '';
-            const artistPlugin = bubble.getAttribute('data-artist-plugin') || '';
-            if (!artistId) return;
-
-            try {
-                const params = new URLSearchParams();
-                if (artistSource) params.set('source', artistSource);
-                if (artistPlugin) params.set('plugin', artistPlugin);
-
-                const imageUrl = params.toString()
-                    ? `/api/artist/${encodeURIComponent(artistId)}/image?${params.toString()}`
-                    : `/api/artist/${encodeURIComponent(artistId)}/image`;
-
-                const response = await fetch(imageUrl);
-                const data = await response.json();
-
-                if (data.success && data.image_url) {
-                    const imageContainer = bubble.querySelector('.similar-artist-bubble-image');
-                    if (imageContainer) {
-                        const artistName = bubble.querySelector('.similar-artist-bubble-name')?.textContent || 'Artist';
-                        imageContainer.innerHTML = `<img src="${data.image_url}" alt="${artistName}">`;
-                        bubble.setAttribute('data-needs-image', 'false');
-                        console.log(`✅ Loaded image for similar artist ${artistId}`);
-                    }
-                }
-            } catch (error) {
-                console.warn(`⚠️ Failed to load image for similar artist ${artistId}:`, error);
-            }
-        }));
-    }
-
-    console.log('✅ Finished lazy loading similar artist images');
-}
-
-/**
- * Display similar artist bubble cards progressively (one at a time with delay)
- */
-function displaySimilarArtistsProgressively(artists) {
-    const container = document.getElementById('similar-artists-bubbles-container');
-
-    if (!container) {
-        console.warn('⚠️ Similar artists container not found');
-        return;
-    }
-
-    // Clear container
-    container.innerHTML = '';
-
-    // Add each bubble with a delay to simulate progressive loading
-    artists.forEach((artist, index) => {
-        setTimeout(() => {
-            const bubble = createSimilarArtistBubble(artist);
-            container.appendChild(bubble);
-        }, index * 100); // 100ms delay between each bubble
-    });
-
-    console.log(`✅ Displaying ${artists.length} similar artist bubbles progressively`);
-}
-
-/**
- * Display similar artist bubble cards (all at once - legacy)
- */
-function displaySimilarArtists(artists) {
-    const container = document.getElementById('similar-artists-bubbles-container');
-
-    if (!container) {
-        console.warn('⚠️ Similar artists container not found');
-        return;
-    }
-
-    // Clear container
-    container.innerHTML = '';
-
-    // Create bubble cards with staggered animation
-    artists.forEach((artist, index) => {
-        const bubble = createSimilarArtistBubble(artist);
-
-        // Add staggered animation delay (50ms per bubble)
-        bubble.style.animationDelay = `${index * 0.05}s`;
-
-        container.appendChild(bubble);
-    });
-
-    console.log(`✅ Displayed ${artists.length} similar artist bubbles`);
-}
-
-/**
- * Create a similar artist bubble card element
- */
-function createSimilarArtistBubble(artist) {
-    // Create bubble container
-    const bubble = document.createElement('div');
-    bubble.className = 'similar-artist-bubble';
-    bubble.setAttribute('data-artist-id', artist.id);
-    bubble.setAttribute('data-artist-source', artist.source || '');
-    if (artist.plugin) {
-        bubble.setAttribute('data-artist-plugin', artist.plugin);
-    }
-
-    // Track if image needs lazy loading
-    const hasImage = artist.image_url && artist.image_url.trim() !== '';
-    bubble.setAttribute('data-needs-image', hasImage ? 'false' : 'true');
-
-    // Create image container
-    const imageContainer = document.createElement('div');
-    imageContainer.className = 'similar-artist-bubble-image';
-
-    if (hasImage) {
-        const img = document.createElement('img');
-        img.src = artist.image_url;
-        img.alt = artist.name;
-
-        // Handle image load error
-        img.onerror = () => {
-            console.log(`Failed to load image for ${artist.name}`);
-            imageContainer.innerHTML = `<div class="similar-artist-bubble-image-fallback">🎵</div>`;
-            bubble.setAttribute('data-needs-image', 'true');
-        };
-
-        imageContainer.appendChild(img);
-    } else {
-        // No image - show fallback (will be lazy loaded)
-        imageContainer.innerHTML = `<div class="similar-artist-bubble-image-fallback">🎵</div>`;
-    }
-
-    // Create name element
-    const name = document.createElement('div');
-    name.className = 'similar-artist-bubble-name';
-    name.textContent = artist.name;
-    name.title = artist.name; // Tooltip for full name
-
-    // Optional: Create genres element (hidden by default in CSS)
-    const genres = document.createElement('div');
-    genres.className = 'similar-artist-bubble-genres';
-    if (artist.genres && artist.genres.length > 0) {
-        genres.textContent = artist.genres.slice(0, 2).join(', ');
-    }
-
-    // Assemble bubble
-    bubble.appendChild(imageContainer);
-    bubble.appendChild(name);
-    if (artist.genres && artist.genres.length > 0) {
-        bubble.appendChild(genres);
-    }
-
-    // Add click handler to navigate to artist detail page
-    bubble.addEventListener('click', () => {
-        console.log(`🎵 Clicked similar artist: ${artist.name} (ID: ${artist.id})`);
-        // Navigate to this artist's detail page (same as clicking from search results)
-        selectArtistForDetail(
-            artist,
-            artist.source ? { source: artist.source, plugin: artist.plugin } : {}
-        );
-    });
-
-    return bubble;
-}
-
-/**
- * Restore cached completion data without re-scanning the database
- */
-function restoreCachedCompletionData(artistId) {
-    console.log(`📦 Restoring cached completion data for artist: ${artistId}`);
-
-    const cachedData = artistsPageState.cache.completionData[artistId];
-    if (!cachedData) {
-        console.log('⚠️ No cached completion data found, skipping restoration');
-        return;
-    }
-
-    // Restore album completion overlays
-    if (cachedData.albums) {
-        cachedData.albums.forEach(albumCompletion => {
-            updateAlbumCompletionOverlay(albumCompletion, 'albums');
-        });
-        console.log(`✅ Restored ${cachedData.albums.length} album completion overlays`);
-    }
-
-    // Restore singles completion overlays  
-    if (cachedData.singles) {
-        cachedData.singles.forEach(singleCompletion => {
-            updateAlbumCompletionOverlay(singleCompletion, 'singles');
-        });
-        console.log(`✅ Restored ${cachedData.singles.length} single completion overlays`);
-    }
-}
-
-/**
- * Check completion status for entire discography with streaming updates
- */
-async function checkDiscographyCompletion(artistId, discography) {
-    console.log(`🔍 Starting streaming completion check for artist: ${artistId}`);
-
-    try {
-        // Create new abort controller for this completion check
-        artistCompletionController = new AbortController();
-
-        // Use fetch with streaming response
-        const response = await fetch(`/api/artist/${artistId}/completion-stream`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                discography: discography,
-                artist_name: artistsPageState.selectedArtist?.name || 'Unknown Artist',
-                source: discography?.source || artistsPageState.sourceOverride || null,
-            }),
-            signal: artistCompletionController.signal
-        });
-
-        if (!response.ok) {
-            throw new Error(`Failed to start completion check: ${response.status}`);
-        }
-
-        // Handle streaming response
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            const chunk = decoder.decode(value);
-            const lines = chunk.split('\n');
-
-            for (const line of lines) {
-                if (line.startsWith('data: ')) {
-                    try {
-                        const data = JSON.parse(line.slice(6));
-                        handleStreamingCompletionUpdate(data);
-                    } catch (e) {
-                        console.warn('Failed to parse streaming data:', line);
-                    }
-                }
-            }
-        }
-
-        // Clear the controller when done
-        artistCompletionController = null;
-
-    } catch (error) {
-        // Don't show error if it was aborted (user navigated away)
-        if (error.name === 'AbortError') {
-            console.log('⏹️ Completion check aborted (user navigated to new artist)');
-            return;
-        }
-
-        console.error('❌ Failed to check completion status:', error);
-        showCompletionError();
-    } finally {
-        // Always clear the controller
-        artistCompletionController = null;
-    }
-}
-
-/**
- * Handle individual streaming completion updates
- */
-function handleStreamingCompletionUpdate(data) {
-    console.log('🔄 Streaming update received:', data.type, data.name || data.artist_name);
-
-    switch (data.type) {
-        case 'start':
-            console.log(`🎤 Starting completion check for ${data.artist_name} (${data.total_items} items)`);
-            // Initialize cache for this artist if not exists
-            const artistId = artistsPageState.selectedArtist?.id;
-            if (artistId && !artistsPageState.cache.completionData[artistId]) {
-                artistsPageState.cache.completionData[artistId] = {
-                    albums: [],
-                    singles: []
-                };
-            }
-            break;
-
-        case 'album_completion':
-            updateAlbumCompletionOverlay(data, 'albums');
-            // Cache the completion data
-            cacheCompletionData(data, 'albums');
-            console.log(`📀 Updated album: ${data.name} (${data.status})`);
-            break;
-
-        case 'single_completion':
-            updateAlbumCompletionOverlay(data, 'singles');
-            // Cache the completion data
-            cacheCompletionData(data, 'singles');
-            console.log(`🎵 Updated single: ${data.name} (${data.status})`);
-            break;
-
-        case 'error':
-            console.error('❌ Error processing item:', data.name, data.error);
-            // Could show error for specific item
-            break;
-
-        case 'complete':
-            console.log(`✅ Completion check finished (${data.processed_count} items processed)`);
-            break;
-
-        default:
-            console.log('Unknown streaming update type:', data.type);
-    }
-}
-
-/**
- * Cache completion data for future restoration
- */
-function cacheCompletionData(completionData, type) {
-    const artistId = artistsPageState.selectedArtist?.id;
-    if (!artistId) return;
-
-    // Ensure cache structure exists
-    if (!artistsPageState.cache.completionData[artistId]) {
-        artistsPageState.cache.completionData[artistId] = {
-            albums: [],
-            singles: []
-        };
-    }
-
-    // Add to appropriate cache array
-    if (type === 'albums') {
-        artistsPageState.cache.completionData[artistId].albums.push(completionData);
-    } else if (type === 'singles') {
-        artistsPageState.cache.completionData[artistId].singles.push(completionData);
-    }
-}
-
-/**
- * Update completion overlay for a specific album/single
- */
-function updateAlbumCompletionOverlay(completionData, containerType) {
-    const containerId = containerType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
-    const container = document.getElementById(containerId);
-
-    if (!container) {
-        console.warn(`Container ${containerId} not found`);
-        return;
-    }
-
-    // Find the album card by data-album-id
-    const albumCard = container.querySelector(`[data-album-id="${completionData.id}"]`);
-
-    if (!albumCard) {
-        console.warn(`Album card not found for ID: ${completionData.id}`);
-        return;
-    }
-
-    // Reclassify and move cards when track count reveals single/EP (Discogs lazy fetch)
-    const currentType = albumCard.dataset.albumType;
-    const expectedTracks = completionData.expected_tracks || 0;
-    if (expectedTracks > 0) {
-        albumCard.dataset.totalTracks = expectedTracks;
-        let newType = currentType;
-        if (currentType === 'album' && expectedTracks <= 3) newType = 'single';
-        else if (currentType === 'album' && expectedTracks <= 6) newType = 'ep';
-
-        if (newType !== currentType) {
-            albumCard.dataset.albumType = newType;
-            const typeEl = albumCard.querySelector('.album-card-type');
-            if (typeEl) typeEl.textContent = newType === 'single' ? 'Single' : 'EP';
-
-            // Move card from albums grid to singles grid
-            const singlesGrid = document.getElementById('singles-grid');
-            const singlesSection = singlesGrid?.closest('.discography-section');
-            if (singlesGrid) {
-                albumCard.remove();
-                singlesGrid.appendChild(albumCard);
-                if (singlesSection) singlesSection.style.display = '';
-            }
-        }
-    }
-
-    const overlay = albumCard.querySelector('.completion-overlay');
-    if (!overlay) {
-        console.warn(`Completion overlay not found for album: ${completionData.name}`);
-        return;
-    }
-
-    // Remove existing status classes
-    overlay.classList.remove('checking', 'completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error');
-
-    // Add new status class
-    overlay.classList.add(completionData.status);
-
-    // Update overlay text and content
-    const statusText = getCompletionStatusText(completionData);
-    const progressText = completionData.expected_tracks > 0
-        ? `${completionData.owned_tracks}/${completionData.expected_tracks}`
-        : '';
-
-    overlay.innerHTML = progressText
-        ? `<span class="completion-status">${statusText}</span><span class="completion-progress">${progressText}</span>`
-        : `<span class="completion-status">${statusText}</span>`;
-
-    // Add tooltip with more details
-    overlay.title = `${completionData.name}\n${statusText} (${completionData.completion_percentage}%)\nTracks: ${completionData.owned_tracks}/${completionData.expected_tracks}\nConfidence: ${completionData.confidence}`;
-
-    // Add brief flash animation to indicate update
-    overlay.style.animation = 'none';
-    overlay.offsetHeight; // Trigger reflow
-    overlay.style.animation = 'completionOverlayFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
-
-    console.log(`📊 Updated overlay for "${completionData.name}": ${statusText} (${completionData.completion_percentage}%)`);
-}
-
-/**
- * Get human-readable status text for completion overlay
- */
-function getCompletionStatusText(completionData) {
-    switch (completionData.status) {
-        case 'completed':
-            return 'Complete';
-        case 'nearly_complete':
-            return 'Nearly Complete';
-        case 'partial':
-            return 'Partial';
-        case 'missing':
-            return 'Missing';
-        case 'downloading':
-            return 'Downloading...';
-        case 'downloaded':
-            return 'Downloaded';
-        case 'error':
-            return 'Error';
-        default:
-            return 'Unknown';
-    }
-}
-
-/**
- * Set album to downloaded status after download finishes
- */
-function setAlbumDownloadedStatus(albumId) {
-    console.log(`✅ [DOWNLOAD COMPLETE] Setting album ${albumId} to downloaded status`);
-
-    const completionData = {
-        id: albumId,
-        status: 'downloaded',
-        owned_tracks: 0,
-        expected_tracks: 0,
-        name: 'Downloaded',
-        completion_percentage: 100
-    };
-
-    // Find if it's in albums or singles container
-    let containerType = 'albums';
-    let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
-    if (!albumCard) {
-        containerType = 'singles';
-        albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
-    }
-
-    if (albumCard) {
-        updateAlbumCompletionOverlay(completionData, containerType);
-        console.log(`✅ [DOWNLOAD COMPLETE] Album ${albumId} set to Downloaded status`);
-    } else {
-        console.warn(`❌ [DOWNLOAD COMPLETE] Album card not found for ID: "${albumId}"`);
-    }
-}
-
-/**
- * Set album to downloading status
- */
-function setAlbumDownloadingStatus(albumId, downloaded = 0, total = 0) {
-    console.log(`🔍 [DOWNLOAD STATUS] Searching for album card with ID: "${albumId}"`);
-
-    const completionData = {
-        id: albumId,
-        status: 'downloading',
-        owned_tracks: downloaded,
-        expected_tracks: total,
-        name: 'Downloading',
-        completion_percentage: Math.round((downloaded / total) * 100) || 0
-    };
-
-    // Find if it's in albums or singles container
-    let containerType = 'albums';
-    let albumCard = document.querySelector(`#album-cards-container [data-album-id="${albumId}"]`);
-    if (!albumCard) {
-        containerType = 'singles';
-        albumCard = document.querySelector(`#singles-cards-container [data-album-id="${albumId}"]`);
-    }
-
-    if (albumCard) {
-        console.log(`✅ [DOWNLOAD STATUS] Found album card in ${containerType} container, updating overlay`);
-        updateAlbumCompletionOverlay(completionData, containerType);
-    } else {
-        console.warn(`❌ [DOWNLOAD STATUS] Album card not found for ID: "${albumId}"`);
-        // Debug: List all available album cards
-        const allAlbums = document.querySelectorAll('#album-cards-container [data-album-id], #singles-cards-container [data-album-id]');
-        console.log(`🔍 [DEBUG] Available album IDs:`, Array.from(allAlbums).map(card => card.dataset.albumId));
-    }
-}
-
-/**
- * Show error state on all completion overlays
- */
-function showCompletionError() {
-    const allOverlays = document.querySelectorAll('.completion-overlay.checking');
-    allOverlays.forEach(overlay => {
-        overlay.classList.remove('checking');
-        overlay.classList.add('error');
-        overlay.innerHTML = '<span class="completion-status">Error</span>';
-        overlay.title = 'Failed to check completion status';
-    });
-}
-
-/**
- * Create HTML for an album/single card
- */
-function createAlbumCardHTML(album) {
-    const imageUrl = album.image_url || '';
-    const year = album.release_date ? new Date(album.release_date).getFullYear() : '';
-    const type = album.album_type === 'album' ? 'Album' :
-        album.album_type === 'single' ? 'Single' : 'EP';
-
-    // Use data-bg-src for lazy background loading via IntersectionObserver
-    const backgroundAttr = imageUrl ?
-        `data-bg-src="${imageUrl}"` :
-        `style="background: linear-gradient(135deg, rgba(29, 185, 84, 0.2) 0%, rgba(24, 156, 71, 0.1) 100%);"`;
-
-    return `
-        <div class="album-card" data-album-id="${album.id}" data-album-name="${escapeHtml(album.name)}" data-album-type="${album.album_type}" data-total-tracks="${album.total_tracks || 0}">
-            <div class="album-card-image" ${backgroundAttr}></div>
-            <div class="completion-overlay checking">
-                <span class="completion-status">Checking...</span>
-            </div>
-            <div class="album-card-content">
-                <div class="album-card-name" title="${escapeHtml(album.name)}">${escapeHtml(album.name)}</div>
-                <div class="album-card-year">${year || 'Unknown'}</div>
-                <div class="album-card-type">${type}</div>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Initialize artist detail tabs
- */
-function initializeArtistTabs() {
-    const tabButtons = document.querySelectorAll('.artist-tab');
-    const tabContents = document.querySelectorAll('.tab-content');
-
-    tabButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const tabName = button.getAttribute('data-tab');
-
-            // Update button states
-            tabButtons.forEach(btn => btn.classList.remove('active'));
-            button.classList.add('active');
-
-            // Update content states
-            tabContents.forEach(content => {
-                content.classList.remove('active');
-                if (content.id === `${tabName}-content`) {
-                    content.classList.add('active');
-                }
-            });
-
-            console.log(`🔄 Switched to ${tabName} tab`);
-        });
-    });
-}
-
-/**
- * State management functions
- */
-function showArtistsSearchState() {
-    console.log('🔄 Showing search state');
-
-    // Cancel any ongoing completion check when navigating back to search
-    if (artistCompletionController) {
-        console.log('⏹️ Canceling completion check (navigating back to search)');
-        artistCompletionController.abort();
-        artistCompletionController = null;
-    }
-
-    // Cancel any ongoing similar artists stream when navigating back to search
-    if (similarArtistsController) {
-        console.log('⏹️ Canceling similar artists stream (navigating back to search)');
-        similarArtistsController.abort();
-        similarArtistsController = null;
-    }
-
-    const searchState = document.getElementById('artists-search-state');
-    const resultsState = document.getElementById('artists-results-state');
-    const detailState = document.getElementById('artist-detail-state');
-
-    if (searchState) {
-        searchState.classList.remove('hidden', 'fade-out');
-    }
-    if (resultsState) {
-        resultsState.classList.add('hidden');
-        resultsState.classList.remove('show');
-    }
-    if (detailState) {
-        detailState.classList.add('hidden');
-        detailState.classList.remove('show');
-    }
-
-    artistsPageState.currentView = 'search';
-    updateArtistsSearchStatus('default');
-
-    // Show artist downloads section if there are active downloads
-    showArtistDownloadsSection();
-}
-
-function showArtistsResultsState() {
-    console.log('🔄 Showing results state');
-
-    // Cancel any ongoing completion check when navigating back
-    if (artistCompletionController) {
-        console.log('⏹️ Canceling completion check (navigating back to results)');
-        artistCompletionController.abort();
-        artistCompletionController = null;
-    }
-
-    // Cancel any ongoing similar artists stream when navigating back
-    if (similarArtistsController) {
-        console.log('⏹️ Canceling similar artists stream (navigating back to results)');
-        similarArtistsController.abort();
-        similarArtistsController = null;
-    }
-
-    // Clear artist-specific data when navigating back to results
-    // This ensures that selecting the same artist again will trigger a fresh scan
-    if (artistsPageState.selectedArtist) {
-        const artistId = artistsPageState.selectedArtist.id;
-        console.log(`🗑️ Clearing cached data for artist: ${artistsPageState.selectedArtist.name}`);
-
-        // Clear artist-specific cache data
-        delete artistsPageState.cache.completionData[artistId];
-        delete artistsPageState.cache.discography[artistId];
-
-        // Clear artist state
-        artistsPageState.selectedArtist = null;
-        artistsPageState.artistDiscography = { albums: [], singles: [] };
-    }
-
-    const searchState = document.getElementById('artists-search-state');
-    const resultsState = document.getElementById('artists-results-state');
-    const detailState = document.getElementById('artist-detail-state');
-
-    if (searchState) {
-        searchState.classList.add('fade-out');
-        setTimeout(() => searchState.classList.add('hidden'), 200);
-    }
-    if (resultsState) {
-        resultsState.classList.remove('hidden');
-        setTimeout(() => resultsState.classList.add('show'), 50);
-    }
-    if (detailState) {
-        detailState.classList.add('hidden');
-        detailState.classList.remove('show');
-    }
-
-    artistsPageState.currentView = 'results';
-}
-
-function showArtistDetailState() {
-    console.log('🔄 Showing detail state');
-
-    const searchState = document.getElementById('artists-search-state');
-    const resultsState = document.getElementById('artists-results-state');
-    const detailState = document.getElementById('artist-detail-state');
-
-    if (searchState) {
-        searchState.classList.add('hidden', 'fade-out');
-    }
-    if (resultsState) {
-        resultsState.classList.add('hidden');
-        resultsState.classList.remove('show');
-    }
-    if (detailState) {
-        detailState.classList.remove('hidden');
-        setTimeout(() => detailState.classList.add('show'), 50);
-    }
-
-    artistsPageState.currentView = 'detail';
-}
-
-/**
- * Update search status text and styling
- */
-function updateArtistsSearchStatus(status, message = null) {
-    const statusElement = document.getElementById('artists-search-status');
-    if (!statusElement) return;
-
-    // Clear all status classes
-    statusElement.classList.remove('searching', 'error');
-
-    switch (status) {
-        case 'default':
-            statusElement.textContent = 'Start typing to search for artists';
-            break;
-        case 'searching':
-            statusElement.classList.add('searching');
-            statusElement.textContent = 'Searching for artists...';
-            break;
-        case 'error':
-            statusElement.classList.add('error');
-            statusElement.innerHTML = `
-                <div style="margin-bottom: 8px;">${message || 'Search failed. Please try again.'}</div>
-                <button onclick="retryLastSearch()" style="
-                    background: rgba(29, 185, 84, 0.15);
-                    color: rgba(29, 185, 84, 0.9);
-                    border: 1px solid rgba(29, 185, 84, 0.3);
-                    border-radius: 8px;
-                    padding: 4px 12px;
-                    font-size: 12px;
-                    cursor: pointer;
-                    font-family: inherit;
-                " onmouseover="this.style.background='rgba(29, 185, 84, 0.25)'" 
-                onmouseout="this.style.background='rgba(29, 185, 84, 0.15)'">
-                    🔄 Retry Search
-                </button>
-            `;
-            break;
-    }
-}
-
-/**
- * Retry the last search query
- */
-function retryLastSearch() {
-    const searchInput = document.getElementById('artists-search-input');
-    const headerSearchInput = document.getElementById('artists-header-search-input');
-
-    // Get the last search query from either input
-    const query = searchInput?.value?.trim() || headerSearchInput?.value?.trim() || artistsPageState.searchQuery;
-
-    if (query) {
-        console.log(`🔄 Retrying search for: "${query}"`);
-        performArtistsSearch(query);
-    }
-}
-
-/**
- * Update artist detail header with artist info
- */
-function updateArtistDetailHeader(artist) {
-    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-    const info = artist.artist_info || {};
-    const imageUrl = artist.image_url || info.image_url || '';
-
-    // Background blur
-    const heroBg = document.getElementById('artists-hero-bg');
-    if (heroBg) {
-        heroBg.style.backgroundImage = imageUrl ? `url('${imageUrl}')` : 'none';
-    }
-
-    // Artist image
-    const heroImage = document.getElementById('artists-hero-image');
-    if (heroImage) {
-        if (imageUrl) {
-            heroImage.style.backgroundImage = `url('${imageUrl}')`;
-            heroImage.innerHTML = '';
-        } else {
-            heroImage.style.backgroundImage = 'none';
-            heroImage.innerHTML = '<span class="artists-hero-image-fallback">🎤</span>';
-            // Lazy load
-            fetch(`/api/artist/${artist.id}/image`)
-                .then(r => r.json())
-                .then(d => {
-                    if (d.success && d.image_url) {
-                        heroImage.style.backgroundImage = `url('${d.image_url}')`;
-                        heroImage.innerHTML = '';
-                        if (heroBg) heroBg.style.backgroundImage = `url('${d.image_url}')`;
-                        artist.image_url = d.image_url;
-                    }
-                }).catch(() => { });
-        }
-    }
-
-    // Name
-    const heroName = document.getElementById('artists-hero-name');
-    if (heroName) heroName.textContent = artist.name || 'Unknown Artist';
-
-    // Badges (service links — real logos matching library page)
-    const badgesEl = document.getElementById('artists-hero-badges');
-    if (badgesEl) {
-        const _hb = (logo, fallback, title, url) => {
-            const inner = logo
-                ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
-                : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
-            if (url) return `<a class="artists-hero-badge" title="${title}" href="${_esc(url)}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
-            return `<div class="artists-hero-badge" title="${title}">${inner}</div>`;
-        };
-        const badges = [];
-        if (info.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${info.spotify_artist_id}`));
-        if (info.musicbrainz_id || artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${info.musicbrainz_id || artist.musicbrainz_id}`));
-        if (info.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${info.deezer_id}`));
-        if (info.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${info.itunes_artist_id}`));
-        if (info.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', info.lastfm_url));
-        if (info.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', info.genius_url));
-        if (info.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${info.tidal_id}`));
-        if (info.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${info.qobuz_id}`));
-        if (info.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${info.discogs_id}`));
-        badgesEl.innerHTML = badges.join('');
-    }
-
-    // Genres (pill tags — merge with Last.fm tags, deduplicated)
-    const genresEl = document.getElementById('artists-hero-genres');
-    if (genresEl) {
-        let genres = info.genres || artist.genres || [];
-        // Merge Last.fm tags
-        const lfmTags = info.lastfm_tags || [];
-        if (Array.isArray(lfmTags) && lfmTags.length > 0) {
-            const existing = new Set(genres.map(g => g.toLowerCase()));
-            const newTags = lfmTags.filter(t => !existing.has(t.toLowerCase()));
-            genres = [...genres, ...newTags];
-        }
-        if (genres.length > 0) {
-            genresEl.innerHTML = genres.slice(0, 8).map(g =>
-                `<span class="artists-hero-genre-pill">${_esc(g)}</span>`
-            ).join('');
-        } else {
-            genresEl.innerHTML = '';
-        }
-    }
-
-    // Bio (Last.fm bio or summary fallback — matching library page pattern)
-    const bioEl = document.getElementById('artists-hero-bio');
-    if (bioEl) {
-        const bio = info.lastfm_bio || info.bio || '';
-        if (bio) {
-            // Strip HTML tags and "Read more on Last.fm" links
-            let cleanBio = bio.replace(/<a\b[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
-            if (cleanBio) {
-                bioEl.innerHTML = `<span class="artists-hero-bio-text">${_esc(cleanBio)}</span>
-                    <span class="artists-hero-bio-toggle" onclick="this.parentElement.classList.toggle('expanded');this.textContent=this.parentElement.classList.contains('expanded')?'Show less':'Read more'">Read more</span>`;
-                bioEl.style.display = '';
-            } else {
-                bioEl.style.display = 'none';
-            }
-        } else {
-            bioEl.style.display = 'none';
-        }
-    }
-
-    // Stats (Last.fm listeners + playcount, with followers fallback)
-    const statsEl = document.getElementById('artists-hero-stats');
-    if (statsEl) {
-        const _fmtNum = (n) => {
-            if (!n || n <= 0) return '0';
-            if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-            if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-            return n.toLocaleString();
-        };
-        let stats = '';
-        if (info.lastfm_listeners) {
-            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.lastfm_listeners)}</strong> listeners</span>`;
-        }
-        if (info.lastfm_playcount) {
-            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.lastfm_playcount)}</strong> plays</span>`;
-        }
-        if (!stats && info.followers) {
-            stats += `<span class="artists-hero-stat"><strong>${_fmtNum(info.followers)}</strong> followers</span>`;
-        }
-        statsEl.innerHTML = stats;
-    }
-
-    // Also update old hidden elements for any JS that references them
-    const oldImage = document.getElementById('search-artist-detail-image');
-    if (oldImage && imageUrl) oldImage.style.backgroundImage = `url('${imageUrl}')`;
-    const oldName = document.getElementById('search-artist-detail-name');
-    if (oldName) oldName.textContent = artist.name;
-
-    // Initialize watchlist button
-    initializeArtistDetailWatchlistButton(artist);
-}
-
-/**
- * Initialize watchlist button for artist detail page
- */
-async function initializeArtistDetailWatchlistButton(artist) {
-    const button = document.getElementById('artist-detail-watchlist-btn');
-    if (!button) return;
-
-    console.log(`🔧 Initializing watchlist button for artist: ${artist.name} (${artist.id})`);
-
-    // Store artist info on the button for settings gear access
-    button.dataset.artistId = artist.id;
-    button.dataset.artistName = artist.name;
-
-    // Reset button state completely
-    button.disabled = false;
-    button.classList.remove('watching');
-    button.style.background = '';
-    button.style.cursor = '';
-
-    // Remove any existing click handlers to prevent duplicates
-    button.onclick = null;
-
-    // Set up new click handler
-    button.onclick = (event) => toggleArtistDetailWatchlist(event, artist.id, artist.name);
-
-    // Check and update current status
-    await updateArtistDetailWatchlistButton(artist.id, artist.name);
-}
-
-/**
- * Toggle watchlist status for artist detail page
- */
-async function toggleArtistDetailWatchlist(event, artistId, artistName) {
-    event.preventDefault();
-
-    const button = document.getElementById('artist-detail-watchlist-btn');
-    const icon = button.querySelector('.watchlist-icon');
-    const text = button.querySelector('.watchlist-text');
-
-    // Show loading state
-    const originalText = text.textContent;
-    text.textContent = 'Loading...';
-    button.disabled = true;
-
-    try {
-        // Check current status
-        const checkResponse = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const checkData = await checkResponse.json();
-        if (!checkData.success) {
-            throw new Error(checkData.error || 'Failed to check watchlist status');
-        }
-
-        const isWatching = checkData.is_watching;
-
-        // Toggle watchlist status
-        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
-        const payload = isWatching ?
-            { artist_id: artistId } :
-            { artist_id: artistId, artist_name: artistName };
-
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to update watchlist');
-        }
-
-        // Update button appearance
-        if (isWatching) {
-            // Was watching, now removed
-            icon.textContent = '👁️';
-            text.textContent = 'Add to Watchlist';
-            button.classList.remove('watching');
-            console.log(`❌ Removed ${artistName} from watchlist`);
-        } else {
-            // Was not watching, now added
-            icon.textContent = '👁️';
-            text.textContent = 'Remove from Watchlist';
-            button.classList.add('watching');
-            console.log(`✅ Added ${artistName} to watchlist`);
-        }
-
-        // Show/hide watchlist settings gear
-        const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
-        if (settingsBtn) {
-            if (!isWatching) {
-                // Just added to watchlist — show gear
-                settingsBtn.classList.remove('hidden');
-                settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, artistName);
-            } else {
-                // Just removed from watchlist — hide gear
-                settingsBtn.classList.add('hidden');
-                settingsBtn.onclick = null;
-            }
-        }
-
-        // Update dashboard watchlist count
-        updateWatchlistButtonCount();
-
-        // Update any visible artist cards
-        updateArtistCardWatchlistStatus();
-
-    } catch (error) {
-        console.error('Error toggling watchlist:', error);
-        text.textContent = originalText;
-
-        // Show error feedback
-        const originalBackground = button.style.background;
-        button.style.background = 'rgba(255, 59, 48, 0.3)';
-        setTimeout(() => {
-            button.style.background = originalBackground;
-        }, 2000);
-    } finally {
-        button.disabled = false;
-    }
-}
-
-/**
- * Update artist detail watchlist button status
- */
-async function updateArtistDetailWatchlistButton(artistId, artistName) {
-    const button = document.getElementById('artist-detail-watchlist-btn');
-    if (!button) {
-        console.warn('⚠️ Artist detail watchlist button not found');
-        return;
-    }
-
-    // Use passed name or fall back to stored data attribute
-    const name = artistName || button.dataset.artistName || '';
-
-    try {
-        console.log(`🔍 Checking watchlist status for artist: ${artistId}`);
-
-        const response = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            const icon = button.querySelector('.watchlist-icon');
-            const text = button.querySelector('.watchlist-text');
-
-            console.log(`📊 Watchlist status for ${artistId}: ${data.is_watching ? 'WATCHING' : 'NOT WATCHING'}`);
-
-            // Ensure button is enabled
-            button.disabled = false;
-
-            // Show/hide watchlist settings gear
-            const settingsBtn = document.getElementById('artist-detail-watchlist-settings-btn');
-            if (settingsBtn) {
-                if (data.is_watching) {
-                    settingsBtn.classList.remove('hidden');
-                    settingsBtn.onclick = () => openWatchlistArtistConfigModal(artistId, name);
-                } else {
-                    settingsBtn.classList.add('hidden');
-                    settingsBtn.onclick = null;
-                }
-            }
-
-            if (data.is_watching) {
-                icon.textContent = '👁️';
-                text.textContent = 'Remove from Watchlist';
-                button.classList.add('watching');
-            } else {
-                icon.textContent = '👁️';
-                text.textContent = 'Add to Watchlist';
-                button.classList.remove('watching');
-            }
-        } else {
-            console.error('❌ Failed to check watchlist status:', data.error);
-        }
-    } catch (error) {
-        console.error('❌ Error checking watchlist status:', error);
-        // Ensure button doesn't get stuck in bad state
-        button.disabled = false;
-    }
-}
-
-/**
- * Show loading state for discography
- */
-function showDiscographyLoading() {
-    const albumsContainer = document.getElementById('album-cards-container');
-    const singlesContainer = document.getElementById('singles-cards-container');
-
-    const loadingHtml = `
-        <div class="album-card loading">
-            <div class="album-card-image"></div>
-            <div class="album-card-content">
-                <div class="album-card-name">Loading...</div>
-                <div class="album-card-year">-</div>
-                <div class="album-card-type">-</div>
-            </div>
-        </div>
-    `.repeat(4);
-
-    if (albumsContainer) albumsContainer.innerHTML = loadingHtml;
-    if (singlesContainer) singlesContainer.innerHTML = loadingHtml;
-}
-
-/**
- * Show error state for discography
- */
-function showDiscographyError(message = 'Failed to load discography') {
-    const albumsContainer = document.getElementById('album-cards-container');
-    const singlesContainer = document.getElementById('singles-cards-container');
-
-    const errorHtml = `
-        <div style="grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: rgba(255, 65, 54, 0.8);">
-            <div style="font-size: 18px; margin-bottom: 8px;">⚠️</div>
-            <div style="font-size: 14px; font-weight: 600; margin-bottom: 8px;">Failed to load discography</div>
-            <div style="font-size: 12px; color: rgba(255, 65, 54, 0.6); max-width: 300px; margin: 0 auto;">${escapeHtml(message)}</div>
-        </div>
-    `;
-
-    if (albumsContainer) albumsContainer.innerHTML = errorHtml;
-    if (singlesContainer) singlesContainer.innerHTML = errorHtml;
-}
-
-/**
- * Show loading cards while searching
- */
-function showSearchLoadingCards() {
-    const container = document.getElementById('artists-cards-container');
-    if (!container) return;
-
-    const loadingCardHtml = `
-        <div class="artist-card loading">
-            <div class="artist-card-background"></div>
-            <div class="artist-card-overlay"></div>
-            <div class="artist-card-content">
-                <div class="artist-card-name">Loading...</div>
-                <div class="artist-card-genres">Fetching data...</div>
-                <div class="artist-card-popularity">
-                    <span class="popularity-icon">⏳</span>
-                    <span>Loading...</span>
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Show 6 loading cards
-    container.innerHTML = loadingCardHtml.repeat(6);
-}
-
-// ===============================
-// ARTIST ALBUM DOWNLOAD MISSING TRACKS INTEGRATION
-// ===============================
-
-/**
- * Get the completion status of an album from cached data or DOM
- * @param {string} albumId - The album ID
- * @param {string} albumType - The album type ('albums' or 'singles')
- * @returns {Object|null} - Completion status object or null
- */
-function getAlbumCompletionStatus(albumId, albumType) {
-    try {
-        // First, check cached completion data
-        const artistId = artistsPageState.selectedArtist?.id;
-        if (artistId && artistsPageState.cache.completionData[artistId]) {
-            const cachedData = artistsPageState.cache.completionData[artistId];
-            const dataArray = albumType === 'albums' ? cachedData.albums : cachedData.singles;
-
-            if (dataArray) {
-                const completionData = dataArray.find(item => item.album_id === albumId || item.id === albumId);
-                if (completionData) {
-                    console.log(`📊 Found cached completion data for album ${albumId}:`, completionData);
-                    return completionData;
-                }
-            }
-        }
-
-        // Fallback: Check DOM completion overlay
-        const containerId = albumType === 'albums' ? 'album-cards-container' : 'singles-cards-container';
-        const container = document.getElementById(containerId);
-
-        if (container) {
-            const albumCard = container.querySelector(`[data-album-id="${albumId}"]`);
-            if (albumCard) {
-                const overlay = albumCard.querySelector('.completion-overlay');
-                if (overlay) {
-                    // Extract status from overlay classes
-                    const classList = Array.from(overlay.classList);
-                    const statusClasses = ['completed', 'nearly_complete', 'partial', 'missing', 'downloading', 'downloaded', 'error'];
-                    const status = statusClasses.find(cls => classList.includes(cls));
-
-                    if (status) {
-                        console.log(`📊 Found DOM completion status for album ${albumId}: ${status}`);
-                        return { status, completion_percentage: status === 'completed' ? 100 : 0 };
-                    }
-                }
-            }
-        }
-
-        console.warn(`⚠️ No completion status found for album ${albumId}`);
-        return null;
-
-    } catch (error) {
-        console.error(`❌ Error getting album completion status for ${albumId}:`, error);
-        return null;
-    }
-}
-
-/**
- * Handle album/single/EP click to open download missing tracks modal
- */
-async function handleArtistAlbumClick(album, albumType) {
-    console.log(`🎵 Album clicked: ${album.name} (${album.album_type}) from artist: ${artistsPageState.selectedArtist?.name}`);
-
-    if (!artistsPageState.selectedArtist) {
-        console.error('❌ No selected artist found');
-        showToast('Error: No artist selected', 'error');
-        return;
-    }
-
-    showLoadingOverlay('Loading album...');
-
-    try {
-        // Check completion status of the album
-        const completionStatus = getAlbumCompletionStatus(album.id, albumType);
-        console.log(`📊 Album completion status: ${completionStatus?.status || 'unknown'} (${completionStatus?.completion_percentage || 0}%)`);
-
-        // For Artists page, always use Download Missing Tracks modal to analyze and download
-        console.log(`🔄 Opening download missing tracks modal for album analysis`);
-
-        // Create virtual playlist ID
-        const virtualPlaylistId = `artist_album_${artistsPageState.selectedArtist.id}_${album.id}`;
-
-        // Check if modal already exists and show it
-        if (activeDownloadProcesses[virtualPlaylistId]) {
-            console.log(`📱 Reopening existing modal for ${album.name}`);
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process.modalElement) {
-                if (process.status === 'complete') {
-                    showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-                }
-                process.modalElement.style.display = 'flex';
-                hideLoadingOverlay();
-                return;
-            }
-        }
-
-        // Create virtual playlist and open modal
-        // Note: Don't hide loading overlay here - let the flow continue through to the modal
-        await createArtistAlbumVirtualPlaylist(album, albumType);
-
-    } catch (error) {
-        hideLoadingOverlay();
-        console.error('❌ Error handling album click:', error);
-        showToast(`Error opening download modal: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Create virtual playlist for artist album and open download missing tracks modal
- */
-async function createArtistAlbumVirtualPlaylist(album, albumType) {
-    const artist = artistsPageState.selectedArtist;
-    const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
-
-    console.log(`🎵 Creating virtual playlist for: ${artist.name} - ${album.name}`);
-
-    try {
-        // Loading overlay already shown by handleArtistAlbumClick
-
-        // Fetch album tracks from backend (pass name/artist for Hydrabase support)
-        const _aat1 = new URLSearchParams({ name: album.name || '', artist: artist.name || '' });
-        if (artistsPageState.sourceOverride) {
-            _aat1.set('source', artistsPageState.sourceOverride);
-        }
-        if (artistsPageState.pluginOverride) {
-            _aat1.set('plugin', artistsPageState.pluginOverride);
-        }
-        const response = await fetch(`/api/album/${album.id}/tracks?${_aat1}`);
-
-        if (!response.ok) {
-            if (response.status === 401) {
-                throw new Error('Spotify not authenticated. Please check your API settings.');
-            }
-            const errData = await response.json().catch(() => ({}));
-            throw new Error(errData.error || `Failed to load album tracks: ${response.status}`);
-        }
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error('No tracks found for this album');
-        }
-
-        console.log(`✅ Loaded ${data.tracks.length} tracks for ${data.album.name}`);
-
-        // Use album data from API response (has complete data including images array)
-        const fullAlbumData = data.album;
-
-        // Format playlist name with artist and album info
-        const playlistName = `[${artist.name}] ${fullAlbumData.name}`;
-
-        // Open download missing tracks modal with formatted tracks
-        // Pass false for showLoadingOverlay since we already have one from handleArtistAlbumClick
-        // Use fullAlbumData from API response instead of album parameter
-        await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, data.tracks, fullAlbumData, artist, false);
-
-        // Track this download for artist bubble management
-        registerArtistDownload(artist, album, virtualPlaylistId, albumType);
-
-    } catch (error) {
-        console.error('❌ Error creating virtual playlist:', error);
-        showToast(`Failed to load album: ${error.message}`, 'error');
-        throw error;
-    }
-}
-
-/**
- * Open download missing tracks modal specifically for artist albums
- * Similar to openDownloadMissingModalForYouTube but for artist albums
- */
-async function openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, spotifyTracks, album, artist, showLoadingOverlayParam = true, contextType = 'artist_album') {
-    if (showLoadingOverlayParam) {
-        showLoadingOverlay('Loading album...');
-    }
-    // Check if a process is already active for this virtual playlist
-    if (activeDownloadProcesses[virtualPlaylistId]) {
-        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process.modalElement) {
-            if (process.status === 'complete') {
-                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-            }
-            process.modalElement.style.display = 'flex';
-            if (showLoadingOverlayParam) {
-                hideLoadingOverlay();
-            }
-        }
-        return;
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for artist album: ${virtualPlaylistId}`);
-
-    // Create virtual playlist object for compatibility with existing modal logic
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: playlistName,
-        track_count: spotifyTracks.length
-    };
-
-    // Store the tracks in the cache for the modal to use
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-    currentPlaylistTracks = spotifyTracks;
-    currentModalPlaylistId = virtualPlaylistId;
-
-    let modal = document.createElement('div');
-    modal.id = `download-missing-modal-${virtualPlaylistId}`;
-    modal.className = 'download-missing-modal';
-    modal.style.display = 'none';
-    document.body.appendChild(modal);
-
-    // Register the new process in our global state tracker using the same structure as other modals
-    activeDownloadProcesses[virtualPlaylistId] = {
-        status: 'idle',
-        modalElement: modal,
-        poller: null,
-        batchId: null,
-        playlist: virtualPlaylist,
-        tracks: spotifyTracks,
-        // Additional metadata for artist albums
-        artist: artist,
-        album: album,
-        albumType: album.album_type
-    };
-
-    // Generate hero section — 'artist_album' for releases, 'playlist' for charts/compilations
-    const heroContext = contextType === 'playlist' ? {
-        type: 'playlist',
-        playlist: { name: playlistName, owner: 'Beatport' },
-        trackCount: spotifyTracks.length,
-        playlistId: virtualPlaylistId
-    } : {
-        type: 'artist_album',
-        artist: artist,
-        album: album,
-        trackCount: spotifyTracks.length,
-        playlistId: virtualPlaylistId
-    };
-
-    // Use the exact same modal HTML structure as the existing modals
-    modal.innerHTML = `
-        <div class="download-missing-modal-content" data-context="${contextType}">
-            <div class="download-missing-modal-header">
-                ${generateDownloadModalHeroSection(heroContext)}
-            </div>
-
-            <div class="download-missing-modal-body">
-                <div class="download-progress-section">
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            🔍 Library Analysis
-                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                    <div class="progress-item">
-                        <div class="progress-label">
-                            ⏬ Downloads
-                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="download-tracks-section">
-                    <div class="download-tracks-header">
-                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
-                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
-                    </div>
-                    <div class="download-tracks-table-container">
-                        <table class="download-tracks-table">
-                            <thead>
-                                <tr>
-                                    <th class="track-select-header">
-                                        <input type="checkbox" class="track-select-all"
-                                               id="select-all-${virtualPlaylistId}" checked
-                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
-                                    </th>
-                                    <th>#</th>
-                                    <th>Track Name</th>
-                                    <th>Artist(s)</th>
-                                    <th>Duration</th>
-                                    <th>Library Status</th>
-                                    <th>Download Status</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
-                                ${spotifyTracks.map((track, index) => `
-                                    <tr data-track-index="${index}">
-                                        <td class="track-select-cell">
-                                            <input type="checkbox" class="track-select-cb"
-                                                   data-track-index="${index}" checked
-                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
-                                        </td>
-                                        <td class="track-number">${index + 1}</td>
-                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
-                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
-                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
-                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
-                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
-                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
-                                    </tr>
-                                `).join('')}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="download-missing-modal-footer">
-                <div class="download-phase-controls">
-                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
-                            <span>Force Download All</span>
-                        </label>
-                        ${contextType === 'playlist' ? `
-                        <label class="force-download-toggle">
-                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
-                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
-                        </label>
-                        ` : ''}
-                    </div>
-                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
-                        Begin Analysis
-                    </button>
-                    ${_isBeatportPlaylistId(virtualPlaylistId) ? `
-                    <button class="download-control-btn sync-to-server-btn" id="sync-server-btn-${virtualPlaylistId}" onclick="syncPlaylistToServer('${virtualPlaylistId}')" ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>
-                        Sync to Server
-                    </button>` : ''}
-                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
-                        Add to Wishlist
-                    </button>
-                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
-                        Cancel All
-                    </button>
-                </div>
-                <div class="modal-close-section">
-                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${virtualPlaylistId}')">
-                        📋 Export as M3U
-                    </button>
-                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
-                </div>
-            </div>
-            <!-- Sync to server live progress (below footer, hidden by default) -->
-            <div class="modal-sync-progress-area" id="modal-sync-progress-${virtualPlaylistId}" style="display:none;">
-                <div class="modal-sync-progress-bar-bg">
-                    <div class="modal-sync-progress-bar-fill" id="modal-sync-bar-${virtualPlaylistId}"></div>
-                </div>
-                <div class="modal-sync-progress-info">
-                    <span class="modal-sync-step" id="modal-sync-step-${virtualPlaylistId}">Starting sync...</span>
-                    <div class="modal-sync-stats">
-                        <span class="matched" id="modal-sync-matched-${virtualPlaylistId}">0 matched</span>
-                        <span class="failed" id="modal-sync-failed-${virtualPlaylistId}">0 failed</span>
-                    </div>
-                    <button class="modal-sync-cancel-btn" id="modal-sync-cancel-${virtualPlaylistId}" onclick="cancelModalSync('${virtualPlaylistId}')">Cancel</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
-    modal.style.display = 'flex';
-    hideLoadingOverlay();
-
-    console.log(`✅ Successfully opened download missing tracks modal for: ${playlistName}`);
-}
-
-// ===============================
-// ARTIST DOWNLOADS MANAGEMENT SYSTEM
-// ===============================
-
-/**
- * Register a new artist download for bubble management
- */
-function registerArtistDownload(artist, album, virtualPlaylistId, albumType) {
-    console.log(`📝 Registering artist download: ${artist.name} - ${album.name}`);
-
-    const artistId = artist.id;
-
-    // Initialize artist bubble if it doesn't exist
-    if (!artistDownloadBubbles[artistId]) {
-        artistDownloadBubbles[artistId] = {
-            artist: artist,
-            downloads: [],
-            element: null,
-            hasCompletedDownloads: false
-        };
-    }
-
-    // Add this download to the artist's downloads
-    const downloadInfo = {
-        virtualPlaylistId: virtualPlaylistId,
-        album: album,
-        albumType: albumType,
-        status: 'in_progress', // 'in_progress', 'completed', 'view_results'
-        startTime: new Date()
-    };
-
-    artistDownloadBubbles[artistId].downloads.push(downloadInfo);
-
-    // Show/update the artist downloads section
-    updateArtistDownloadsSection();
-
-    // Save snapshot of current state
-    saveArtistBubbleSnapshot();
-
-    // Monitor this download for completion
-    monitorArtistDownload(artistId, virtualPlaylistId);
-}
-
-/**
- * Debounced update for artist downloads section to prevent rapid updates
- */
-function updateArtistDownloadsSection() {
-    if (downloadsUpdateTimeout) {
-        clearTimeout(downloadsUpdateTimeout);
-    }
-    downloadsUpdateTimeout = setTimeout(() => {
-        showArtistDownloadsSection();
-        showLibraryDownloadsSection();
-        showBeatportDownloadsSection();
-        updateDashboardDownloads();
-    }, 300); // 300ms debounce
-}
-
-// --- Artist Bubble Snapshot System ---
-
-let snapshotSaveTimeout = null; // Debounce snapshot saves
-
-async function saveArtistBubbleSnapshot() {
-    /**
-     * Saves current artistDownloadBubbles state to backend for persistence.
-     * Debounced to prevent excessive backend calls.
-     */
-
-    // Clear any existing timeout
-    if (snapshotSaveTimeout) {
-        clearTimeout(snapshotSaveTimeout);
-    }
-
-    // Debounce the actual save
-    snapshotSaveTimeout = setTimeout(async () => {
-        try {
-            const bubbleCount = Object.keys(artistDownloadBubbles).length;
-
-            // Don't save empty state
-            if (bubbleCount === 0) {
-                console.log('📸 Skipping snapshot save - no artist bubbles to save');
-                return;
-            }
-
-            console.log(`📸 Saving artist bubble snapshot: ${bubbleCount} artists`);
-
-            // Prepare snapshot data (clean up DOM references)
-            const cleanBubbles = {};
-            for (const [artistId, bubbleData] of Object.entries(artistDownloadBubbles)) {
-                cleanBubbles[artistId] = {
-                    artist: bubbleData.artist,
-                    downloads: bubbleData.downloads.map(download => ({
-                        virtualPlaylistId: download.virtualPlaylistId,
-                        album: download.album,
-                        albumType: download.albumType,
-                        status: download.status,
-                        startTime: download.startTime instanceof Date ? download.startTime.toISOString() : download.startTime
-                    })),
-                    hasCompletedDownloads: bubbleData.hasCompletedDownloads
-                };
-            }
-
-            const response = await fetch('/api/artist_bubbles/snapshot', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    bubbles: cleanBubbles
-                })
-            });
-
-            const data = await response.json();
-
-            if (data.success) {
-                console.log(`✅ Artist bubble snapshot saved: ${bubbleCount} artists`);
-            } else {
-                console.error('❌ Failed to save artist bubble snapshot:', data.error);
-            }
-
-        } catch (error) {
-            console.error('❌ Error saving artist bubble snapshot:', error);
-        }
-    }, 1000); // 1 second debounce
-}
-
-async function hydrateArtistBubblesFromSnapshot() {
-    /**
-     * Hydrates artist download bubbles from backend snapshot with live status.
-     * Called on page load to restore bubble state.
-     */
-    try {
-        console.log('🔄 Loading artist bubble snapshot from backend...');
-
-        const response = await fetch('/api/artist_bubbles/hydrate');
-        const data = await response.json();
-
-        if (!data.success) {
-            console.error('❌ Failed to load artist bubble snapshot:', data.error);
-            return;
-        }
-
-        const bubbles = data.bubbles || {};
-        const stats = data.stats || {};
-
-        console.log(`🔄 Loaded bubble snapshot: ${stats.total_artists || 0} artists, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
-
-        if (Object.keys(bubbles).length === 0) {
-            console.log('ℹ️ No artist bubbles to hydrate');
-            return;
-        }
-
-        // Clear existing state
-        artistDownloadBubbles = {};
-
-        // Restore artistDownloadBubbles with hydrated data
-        for (const [artistId, bubbleData] of Object.entries(bubbles)) {
-            artistDownloadBubbles[artistId] = {
-                artist: bubbleData.artist,
-                downloads: bubbleData.downloads.map(download => ({
-                    virtualPlaylistId: download.virtualPlaylistId,
-                    album: download.album,
-                    albumType: download.albumType,
-                    status: download.status, // Live status from backend
-                    startTime: new Date(download.startTime)
-                })),
-                element: null, // Will be created when UI updates
-                hasCompletedDownloads: bubbleData.hasCompletedDownloads
-            };
-
-            console.log(`🔄 Hydrated artist: ${bubbleData.artist.name} (${bubbleData.downloads.length} downloads)`);
-
-            // Start monitoring for any in-progress downloads
-            for (const download of bubbleData.downloads) {
-                if (download.status === 'in_progress') {
-                    console.log(`📡 Starting monitoring for: ${download.album.name}`);
-                    monitorArtistDownload(artistId, download.virtualPlaylistId);
-                }
-            }
-        }
-
-        // Update UI to show hydrated bubbles
-        updateArtistDownloadsSection();
-
-        const totalArtists = Object.keys(artistDownloadBubbles).length;
-        console.log(`✅ Successfully hydrated ${totalArtists} artist download bubbles`);
-
-    } catch (error) {
-        console.error('❌ Error hydrating artist bubbles from snapshot:', error);
-    }
-}
-
-// --- Search Bubble Snapshot System ---
-
-async function saveSearchBubbleSnapshot() {
-    /**
-     * Saves current searchDownloadBubbles state to backend for persistence.
-     */
-    try {
-        // Rate limit saves to avoid spamming backend
-        if (saveSearchBubbleSnapshot.lastSaveTime) {
-            const timeSinceLastSave = Date.now() - saveSearchBubbleSnapshot.lastSaveTime;
-            if (timeSinceLastSave < 2000) {
-                console.log('⏱️ Skipping search bubble snapshot save (rate limited)');
-                return;
-            }
-        }
-
-        const bubbleCount = Object.keys(searchDownloadBubbles).length;
-
-        if (bubbleCount === 0) {
-            console.log('📸 Skipping snapshot save - no search bubbles to save');
-            return;
-        }
-
-        console.log(`📸 Saving search bubble snapshot: ${bubbleCount} artists`);
-
-        // Convert search bubbles to plain objects for serialization
-        const bubblesToSave = {};
-        for (const [artistName, bubbleData] of Object.entries(searchDownloadBubbles)) {
-            bubblesToSave[artistName] = {
-                artist: bubbleData.artist,
-                downloads: bubbleData.downloads.map(d => ({
-                    virtualPlaylistId: d.virtualPlaylistId,
-                    item: d.item,
-                    type: d.type,
-                    status: d.status,
-                    startTime: d.startTime
-                }))
-            };
-        }
-
-        const response = await fetch('/api/search_bubbles/snapshot', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ bubbles: bubblesToSave })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`✅ Search bubble snapshot saved: ${bubbleCount} artists`);
-            saveSearchBubbleSnapshot.lastSaveTime = Date.now();
-        } else {
-            console.error('❌ Failed to save search bubble snapshot:', data.error);
-        }
-
-    } catch (error) {
-        console.error('❌ Error saving search bubble snapshot:', error);
-    }
-}
-
-async function hydrateSearchBubblesFromSnapshot() {
-    /**
-     * Hydrates search download bubbles from backend snapshot with live status.
-     */
-    try {
-        console.log('🔄 Loading search bubble snapshot from backend...');
-
-        const response = await fetch('/api/search_bubbles/hydrate');
-        const data = await response.json();
-
-        if (!data.success) {
-            console.error('❌ Failed to load search bubble snapshot:', data.error);
-            return;
-        }
-
-        const bubbles = data.bubbles || {};
-        const stats = data.stats || {};
-
-        if (Object.keys(bubbles).length === 0) {
-            console.log('ℹ️ No search bubbles to hydrate');
-            return;
-        }
-
-        // Clear and restore search bubbles
-        searchDownloadBubbles = {};
-
-        for (const [artistName, bubbleData] of Object.entries(bubbles)) {
-            searchDownloadBubbles[artistName] = {
-                artist: bubbleData.artist,
-                downloads: bubbleData.downloads || []
-            };
-
-            console.log(`🔄 Hydrated artist: ${artistName} (${bubbleData.downloads.length} downloads)`);
-
-            // Setup monitoring for each download
-            for (const download of bubbleData.downloads) {
-                if (download.status === 'in_progress') {
-                    monitorSearchDownload(artistName, download.virtualPlaylistId);
-                }
-            }
-        }
-
-        const totalArtists = Object.keys(searchDownloadBubbles).length;
-        console.log(`✅ Successfully hydrated ${totalArtists} search download bubbles`);
-
-        // Refresh display
-        showSearchDownloadBubbles();
-
-    } catch (error) {
-        console.error('❌ Error hydrating search bubbles from snapshot:', error);
-    }
-}
-
-/**
- * Register a new search download for bubble management (grouped by artist)
- */
-function registerSearchDownload(item, type, virtualPlaylistId, artistName) {
-    console.log(`📝 [REGISTER] Registering search download: ${item.name} (${type}) by ${artistName}`);
-
-    // Initialize artist bubble if it doesn't exist
-    if (!searchDownloadBubbles[artistName]) {
-        searchDownloadBubbles[artistName] = {
-            artist: {
-                name: artistName,
-                image_url: item.image_url || (item.images && item.images[0]?.url) || null
-            },
-            downloads: []
-        };
-    }
-
-    // Add this download to the artist's downloads
-    const downloadInfo = {
-        virtualPlaylistId: virtualPlaylistId,
-        item: item,
-        type: type, // 'album' or 'track'
-        status: 'in_progress',
-        startTime: new Date().toISOString()
-    };
-
-    searchDownloadBubbles[artistName].downloads.push(downloadInfo);
-
-    console.log(`✅ [REGISTER] Registered search download for ${artistName} - ${item.name}`);
-
-    // Save snapshot
-    saveSearchBubbleSnapshot();
-
-    // Setup monitoring
-    monitorSearchDownload(artistName, virtualPlaylistId);
-
-    // Refresh display
-    updateSearchDownloadsSection();
-}
-
-/**
- * Debounced update for search downloads section
- */
-function updateSearchDownloadsSection() {
-    if (window.searchUpdateTimeout) {
-        clearTimeout(window.searchUpdateTimeout);
-    }
-    window.searchUpdateTimeout = setTimeout(() => {
-        showSearchDownloadBubbles();
-        updateDashboardDownloads();
-    }, 300);
-}
-
-/**
- * Monitor a search download for completion status changes
- */
-function monitorSearchDownload(artistName, virtualPlaylistId) {
-    const checkCompletion = setInterval(() => {
-        const process = activeDownloadProcesses[virtualPlaylistId];
-
-        if (!process || !searchDownloadBubbles[artistName]) {
-            clearInterval(checkCompletion);
-            return;
-        }
-
-        // Find the download in the artist's downloads
-        const download = searchDownloadBubbles[artistName].downloads.find(
-            d => d.virtualPlaylistId === virtualPlaylistId
-        );
-
-        if (!download) {
-            clearInterval(checkCompletion);
-            return;
-        }
-
-        // Update status
-        const newStatus = process.status === 'complete' || process.status === 'view_results'
-            ? 'view_results'
-            : 'in_progress';
-
-        if (download.status !== newStatus) {
-            console.log(`🔄 [MONITOR] Status changed for ${download.item.name}: ${download.status} -> ${newStatus}`);
-            download.status = newStatus;
-
-            // Save snapshot and refresh
-            saveSearchBubbleSnapshot();
-            updateSearchDownloadsSection();
-        }
-    }, 2000);
-}
-
-/**
- * Show or update the search downloads bubble section
- */
-function showSearchDownloadBubbles() {
-    console.log(`🔄 [SHOW] showSearchDownloadBubbles() called`);
-
-    const resultsArea = document.getElementById('enhanced-main-results-area');
-    if (!resultsArea) {
-        console.log(`⏭️ [SHOW] Skipping - no enhanced-main-results-area found`);
-        return;
-    }
-
-    // Count active artists (those with downloads)
-    const activeArtists = Object.keys(searchDownloadBubbles).filter(artistName =>
-        searchDownloadBubbles[artistName].downloads.length > 0
-    );
-
-    if (activeArtists.length === 0) {
-        // Show placeholder
-        resultsArea.innerHTML = `
-            <div class="search-results-placeholder">
-                <p>Search results will appear here when you select an album or track.</p>
-            </div>
-        `;
-        return;
-    }
-
-    // Create bubbles display
-    const bubblesHTML = activeArtists.map(artistName =>
-        createSearchBubbleCard(searchDownloadBubbles[artistName])
-    ).join('');
-
-    resultsArea.innerHTML = `
-        <div class="search-bubble-section">
-            <div class="search-bubble-header">
-                <h3 class="search-bubble-title">Active Downloads</h3>
-                <span class="search-bubble-count">${activeArtists.length}</span>
-            </div>
-            <div class="search-bubble-container" id="search-bubble-container">
-                ${bubblesHTML}
-            </div>
-        </div>
-    `;
-
-    console.log(`✅ [SHOW] Displayed ${activeArtists.length} search bubbles`);
-}
-
-/**
- * Create HTML for a search bubble card (grouped by artist)
- */
-function createSearchBubbleCard(artistBubbleData) {
-    const { artist, downloads } = artistBubbleData;
-    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
-    const completedCount = downloads.filter(d => d.status === 'view_results').length;
-    const allCompleted = activeCount === 0 && completedCount > 0;
-
-    console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
-        totalDownloads: downloads.length,
-        activeCount,
-        completedCount,
-        allCompleted
-    });
-
-    const imageUrl = artist.image_url || '';
-    const backgroundStyle = imageUrl ?
-        `background-image: url('${escapeHtml(imageUrl)}');` :
-        `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
-
-    return `
-        <div class="search-bubble-card ${allCompleted ? 'all-completed' : ''}"
-             data-artist-name="${escapeHtml(artist.name)}"
-             onclick="openSearchDownloadModal('${escapeForInlineJs(artist.name)}')"
-             title="Click to manage downloads for ${escapeHtml(artist.name)}">
-            <div class="search-bubble-image" style="${backgroundStyle}"></div>
-            <div class="search-bubble-overlay"></div>
-            <div class="search-bubble-content">
-                <div class="search-bubble-name">${escapeHtml(artist.name)}</div>
-                <div class="search-bubble-status">
-                    ${activeCount > 0 ? `${activeCount} active` : ''}
-                    ${completedCount > 0 ? `${completedCount} completed` : ''}
-                </div>
-            </div>
-            ${allCompleted ? `
-                <div class="bulk-complete-indicator"
-                     onclick="event.stopPropagation(); bulkCompleteSearchDownloads('${escapeForInlineJs(artist.name)}')"
-                     title="Complete all downloads">
-                    <span class="bulk-complete-icon">✅</span>
-                </div>
-            ` : ''}
-        </div>
-    `;
-}
-
-/**
- * Open modal showing all downloads for an artist
- */
-async function openSearchDownloadModal(artistName) {
-    const artistBubbleData = searchDownloadBubbles[artistName];
-    if (!artistBubbleData || searchDownloadModalOpen) return;
-
-    console.log(`🎵 [MODAL OPEN] Opening search download modal for: ${artistBubbleData.artist.name}`);
-
-    searchDownloadModalOpen = true;
-
-    const modal = document.createElement('div');
-    modal.id = 'search-download-management-modal';
-    modal.className = 'artist-download-management-modal';
-    modal.innerHTML = `
-        <div class="artist-download-modal-content">
-            <div class="artist-download-modal-hero">
-                <div class="artist-download-modal-hero-bg" ${artistBubbleData.artist.image_url ? `style="background-image: url('${escapeHtml(artistBubbleData.artist.image_url)}')"` : ''}></div>
-                <div class="artist-download-modal-hero-overlay">
-                    <div class="artist-download-modal-hero-content">
-                        <div class="artist-download-modal-hero-avatar">
-                            ${artistBubbleData.artist.image_url
-            ? `<img src="${escapeHtml(artistBubbleData.artist.image_url)}" alt="${escapeHtml(artistBubbleData.artist.name)}" class="artist-download-modal-hero-image" loading="lazy">`
-            : '<div class="artist-download-modal-hero-fallback">🎵</div>'
-        }
-                        </div>
-                        <div class="artist-download-modal-hero-info">
-                            <h2 class="artist-download-modal-hero-title">${escapeHtml(artistBubbleData.artist.name)}</h2>
-                            <p class="artist-download-modal-hero-subtitle">${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}</p>
-                        </div>
-                    </div>
-                    <span class="artist-download-modal-close" onclick="closeSearchDownloadModal()">&times;</span>
-                </div>
-            </div>
-
-            <div class="artist-download-modal-body">
-                <div class="artist-download-items" id="search-download-items">
-                    ${artistBubbleData.downloads.map((download, index) => createSearchDownloadItem(download, index)).join('')}
-                </div>
-            </div>
-        </div>
-        <div class="artist-download-modal-overlay" onclick="closeSearchDownloadModal()"></div>
-    `;
-
-    document.body.appendChild(modal);
-    modal.style.display = 'flex';
-
-    // Start monitoring for status changes
-    // Start monitoring for status changes
-    monitorSearchDownloadModal(artistName);
-
-    // Lazy load artist image if missing (common for iTunes)
-    if (!artistBubbleData.artist.image_url) {
-        console.log(`🖼️ Lazy loading modal image for ${artistBubbleData.artist.name} (${artistBubbleData.artist.id})`);
-        fetch(`/api/artist/${artistBubbleData.artist.id}/image`)
-            .then(response => response.json())
-            .then(data => {
-                if (data.success && data.image_url) {
-                    // Update header background
-                    const headerBg = modal.querySelector('.artist-download-modal-hero-bg');
-                    if (headerBg) {
-                        headerBg.style.backgroundImage = `url('${data.image_url}')`;
-                    }
-
-                    // Update avatar
-                    const avatarContainer = modal.querySelector('.artist-download-modal-hero-avatar');
-                    if (avatarContainer) {
-                        avatarContainer.innerHTML = `<img src="${data.image_url}" alt="${artistBubbleData.artist.name}" class="artist-download-modal-hero-image" loading="lazy">`;
-                    }
-
-                    // Update artist object in memory
-                    artistBubbleData.artist.image_url = data.image_url;
-                }
-            })
-            .catch(err => console.error('❌ Failed to load modal image:', err));
-    }
-}
-
-/**
- * Create HTML for a download item in the search modal
- */
-function createSearchDownloadItem(download, index) {
-    const { item, type, status, virtualPlaylistId } = download;
-    const buttonText = status === 'view_results' ? 'View Results' : 'View Progress';
-    const buttonClass = status === 'view_results' ? 'completed' : 'active';
-    const typeLabel = type === 'album' ? 'Album' : type === 'single' ? 'Single' : 'Track';
-
-    return `
-        <div class="artist-download-item" data-playlist-id="${virtualPlaylistId}">
-            <div class="download-item-artwork">
-                ${item.image_url
-            ? `<img src="${escapeHtml(item.image_url)}" alt="${escapeHtml(item.name)}" class="download-item-image" loading="lazy">`
-            : `<div class="download-item-fallback">
-                         ${type === 'album' ? '💿' : '🎵'}
-                       </div>`
-        }
-            </div>
-            <div class="download-item-info">
-                <div class="download-item-name">${escapeHtml(item.name)}</div>
-                <div class="download-item-type">${typeLabel}</div>
-            </div>
-            <div class="download-item-actions">
-                <button class="download-item-btn ${buttonClass}"
-                        onclick="reopenDownloadModal('${virtualPlaylistId}')">
-                    ${buttonText}
-                </button>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Reopen an individual download modal from the artist modal
- */
-async function reopenDownloadModal(virtualPlaylistId) {
-    const process = activeDownloadProcesses[virtualPlaylistId];
-
-    // If process exists, show the existing modal
-    if (process && process.modalElement) {
-        console.log(`✅ [REOPEN] Showing existing modal for ${virtualPlaylistId}`);
-        closeSearchDownloadModal();
-        setTimeout(() => {
-            process.modalElement.style.display = 'flex';
-        }, 100);
-        return;
-    }
-
-    // Process doesn't exist (after page refresh) - recreate it
-    console.log(`🔄 [REOPEN] Modal not found, recreating for ${virtualPlaylistId}`);
-
-    // Find the download in searchDownloadBubbles
-    let downloadData = null;
-    for (const artistName in searchDownloadBubbles) {
-        const bubble = searchDownloadBubbles[artistName];
-        const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
-        if (download) {
-            downloadData = download;
-            break;
-        }
-    }
-
-    if (!downloadData) {
-        console.warn(`⚠️ No download data found for ${virtualPlaylistId}`);
-        return;
-    }
-
-    // Close search modal first
-    closeSearchDownloadModal();
-
-    // Recreate the modal based on type
-    const { item, type } = downloadData;
-
-    if (type === 'album') {
-        // For albums, we need to fetch the tracks
-        console.log(`📥 [REOPEN] Recreating album modal for: ${item.name}`);
-
-        // Fetch album tracks (pass name/artist for Hydrabase support)
-        showLoadingOverlay(`Loading ${item.name}...`);
-
-        try {
-            const _sap2 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
-            const response = await fetch(`/api/spotify/album/${item.id}?${_sap2}`);
-            if (!response.ok) {
-                throw new Error('Failed to fetch album tracks');
-            }
-
-            const albumData = await response.json();
-            if (!albumData.tracks || albumData.tracks.length === 0) {
-                throw new Error('No tracks found in album');
-            }
-
-            const spotifyTracks = albumData.tracks.map(track => ({
-                id: track.id,
-                name: track.name,
-                artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
-                album: {
-                    name: item.name,
-                    images: item.image_url ? [{ url: item.image_url }] : []
-                },
-                duration_ms: track.duration_ms || 0
-            }));
-
-            hideLoadingOverlay();
-
-            // Open the modal
-            await openDownloadMissingModalForArtistAlbum(
-                virtualPlaylistId,
-                item.name,
-                spotifyTracks,
-                item,
-                { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
-                false // Don't show loading overlay again
-            );
-
-            // Sync with backend to check for active batch process
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                try {
-                    const processResponse = await fetch('/api/active-processes');
-                    if (processResponse.ok) {
-                        const processData = await processResponse.json();
-                        const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
-
-                        if (activeProcess) {
-                            console.log(`📡 [REOPEN] Found active batch for album: ${activeProcess.batch_id}`);
-                            process.status = 'running';
-                            process.batchId = activeProcess.batch_id;
-
-                            // Update UI to show running state
-                            const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                            const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                            if (beginBtn) beginBtn.style.display = 'none';
-                            if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                            // Start polling for live updates
-                            startModalDownloadPolling(virtualPlaylistId);
-                        }
-                    }
-                } catch (err) {
-                    console.warn('Could not check for active processes:', err);
-                }
-            }
-
-        } catch (error) {
-            hideLoadingOverlay();
-            showToast(`Failed to load album: ${error.message}`, 'error');
-            console.error('Error loading album:', error);
-        }
-
-    } else {
-        // For tracks, create enriched track and open modal
-        console.log(`🎵 [REOPEN] Recreating track modal for: ${item.name}`);
-
-        const enrichedTrack = {
-            id: item.id,
-            name: item.name,
-            artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
-            album: item.album || {
-                name: item.album?.name || 'Unknown Album',
-                images: item.image_url ? [{ url: item.image_url }] : []
-            },
-            duration_ms: item.duration_ms || 0
-        };
-
-        await openDownloadMissingModalForYouTube(
-            virtualPlaylistId,
-            `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
-            [enrichedTrack]
-        );
-
-        // Sync with backend to check for active batch process
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (process) {
-            try {
-                const processResponse = await fetch('/api/active-processes');
-                if (processResponse.ok) {
-                    const processData = await processResponse.json();
-                    const activeProcess = processData.active_processes?.find(p => p.playlist_id === virtualPlaylistId);
-
-                    if (activeProcess) {
-                        console.log(`📡 [REOPEN] Found active batch for track: ${activeProcess.batch_id}`);
-                        process.status = 'running';
-                        process.batchId = activeProcess.batch_id;
-
-                        // Update UI to show running state
-                        const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                        const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-                        if (beginBtn) beginBtn.style.display = 'none';
-                        if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                        // Start polling for live updates
-                        startModalDownloadPolling(virtualPlaylistId);
-                    }
-                }
-            } catch (err) {
-                console.warn('Could not check for active processes:', err);
-            }
-        }
-    }
-}
-
-/**
- * Monitor search download modal for status changes
- */
-function monitorSearchDownloadModal(artistName) {
-    const updateModal = () => {
-        if (!searchDownloadModalOpen) return;
-
-        const modal = document.getElementById('search-download-management-modal');
-        const itemsContainer = document.getElementById('search-download-items');
-
-        if (!modal || !itemsContainer || !searchDownloadBubbles[artistName]) return;
-
-        const downloads = searchDownloadBubbles[artistName].downloads;
-
-        // If no downloads at all, close modal
-        if (downloads.length === 0) {
-            closeSearchDownloadModal();
-            return;
-        }
-
-        // Update modal content and sync status with active processes
-        let statusChanged = false;
-        itemsContainer.innerHTML = downloads.map((download, index) => {
-            const process = activeDownloadProcesses[download.virtualPlaylistId];
-
-            // Only update status if process exists (otherwise keep current status)
-            if (process) {
-                const newStatus = process.status === 'complete' || process.status === 'view_results'
-                    ? 'view_results'
-                    : 'in_progress';
-
-                if (download.status !== newStatus) {
-                    console.log(`🔄 [MODAL MONITOR] Status changed: ${download.item.name} ${download.status} -> ${newStatus}`);
-                    download.status = newStatus;
-                    statusChanged = true;
-                }
-            }
-
-            return createSearchDownloadItem(download, index);
-        }).join('');
-
-        // If status changed, refresh bubble display and save
-        if (statusChanged) {
-            updateSearchDownloadsSection();
-            saveSearchBubbleSnapshot();
-        }
-
-        // Continue monitoring
-        setTimeout(updateModal, 2000);
-    };
-
-    setTimeout(updateModal, 1000);
-}
-
-/**
- * Close the search download modal
- */
-function closeSearchDownloadModal() {
-    const modal = document.getElementById('search-download-management-modal');
-    if (modal) {
-        modal.style.display = 'none';
-        if (modal.parentElement) {
-            modal.parentElement.removeChild(modal);
-        }
-    }
-    searchDownloadModalOpen = false;
-}
-
-/**
- * Bulk complete all downloads for an artist (called when user clicks green checkmark)
- */
-function bulkCompleteSearchDownloads(artistName) {
-    console.log(`🎯 Bulk completing downloads for artist: ${artistName}`);
-
-    const artistBubbleData = searchDownloadBubbles[artistName];
-    if (!artistBubbleData) {
-        console.warn(`❌ No artist bubble data found for ${artistName}`);
-        return;
-    }
-
-    // Find all completed downloads
-    const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
-    console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
-        completedDownloads.map(d => d.item.name));
-
-    if (completedDownloads.length === 0) {
-        console.warn(`⚠️ No completed downloads found for bulk close`);
-        showToast('No completed downloads to close', 'info');
-        return;
-    }
-
-    // Close all completed modals
-    completedDownloads.forEach(download => {
-        const process = activeDownloadProcesses[download.virtualPlaylistId];
-        if (process && process.modalElement) {
-            console.log(`🗑️ Closing modal for: ${download.item.name}`);
-            closeDownloadMissingModal(download.virtualPlaylistId);
-        } else {
-            // No modal open — clean up the bubble entry directly
-            console.log(`🧹 Direct cleanup (no modal) for: ${download.item.name}`);
-            cleanupSearchDownload(download.virtualPlaylistId);
-        }
-    });
-
-    showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
-}
-
-/**
- * Cleanup search download when modal is closed
- */
-function cleanupSearchDownload(virtualPlaylistId) {
-    console.log(`🔍 [CLEANUP] Looking for search download to cleanup: ${virtualPlaylistId}`);
-
-    // Find which artist this download belongs to
-    for (const artistName in searchDownloadBubbles) {
-        const downloads = searchDownloadBubbles[artistName].downloads;
-        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
-
-        if (downloadIndex !== -1) {
-            console.log(`🧹 [CLEANUP] Found download in artist ${artistName}: ${downloads[downloadIndex].item.name}`);
-
-            // Remove this download
-            downloads.splice(downloadIndex, 1);
-            console.log(`🗑️ [CLEANUP] Removed download from ${artistName}'s bubble`);
-
-            // If no more downloads for this artist, remove the bubble
-            if (downloads.length === 0) {
-                delete searchDownloadBubbles[artistName];
-                console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistName}`);
-            }
-
-            // Save snapshot and refresh
-            saveSearchBubbleSnapshot();
-            updateSearchDownloadsSection();
-
-            return;
-        }
-    }
-
-    console.log(`⚠️ [CLEANUP] No matching search download found for: ${virtualPlaylistId}`);
-}
-
-/**
- * Show or update the artist downloads section in search state
- */
-function showArtistDownloadsSection() {
-    console.log(`🔄 [SHOW] showArtistDownloadsSection() called - refreshing artist bubbles`);
-    console.log(`🔄 [SHOW] Current view: ${artistsPageState.currentView}, artistDownloadBubbles count: ${Object.keys(artistDownloadBubbles).length}`);
-
-    // Only show in search state
-    if (artistsPageState.currentView !== 'search') {
-        console.log(`⏭️ [SHOW] Skipping - not in search state (current: ${artistsPageState.currentView})`);
-        return;
-    }
-
-    const artistsSearchState = document.getElementById('artists-search-state');
-    if (!artistsSearchState) {
-        console.log(`⏭️ [SHOW] Skipping - no artists-search-state element found`);
-        return;
-    }
-
-    let downloadsSection = document.getElementById('artist-downloads-section');
-
-    // Create section if it doesn't exist
-    if (!downloadsSection) {
-        downloadsSection = document.createElement('div');
-        downloadsSection.id = 'artist-downloads-section';
-        downloadsSection.className = 'artist-downloads-section';
-
-        // Insert after the search container
-        const searchContainer = artistsSearchState.querySelector('.artists-search-container');
-        if (searchContainer) {
-            searchContainer.insertAdjacentElement('afterend', downloadsSection);
-        }
-    }
-
-    // Count active artists (those with downloads)
-    const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
-        artistDownloadBubbles[artistId].downloads.length > 0
-    );
-
-    if (activeArtists.length === 0) {
-        downloadsSection.style.display = 'none';
-        return;
-    }
-
-    // Show and populate the section
-    downloadsSection.style.display = 'block';
-    downloadsSection.innerHTML = `
-        <div class="artist-downloads-header">
-            <h3 class="artist-downloads-title">Current Downloads</h3>
-            <p class="artist-downloads-subtitle">Active download processes</p>
-        </div>
-        <div class="artist-bubble-container" id="artist-bubble-container">
-            ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
-        </div>
-    `;
-
-    // Add event listeners to bubble cards
-    activeArtists.forEach(artistId => {
-        const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
-        if (bubbleCard) {
-            bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
-
-            // Add dynamic glow effect
-            const artist = artistDownloadBubbles[artistId].artist;
-            if (artist.image_url) {
-                extractImageColors(artist.image_url, (colors) => {
-                    applyDynamicGlow(bubbleCard, colors);
-                });
-            }
-        }
-    });
-}
-
-/**
- * Show download bubbles on the Library page (mirrors showArtistDownloadsSection)
- */
-function showLibraryDownloadsSection() {
-    const libraryContent = document.querySelector('.library-content');
-    if (!libraryContent) return;
-
-    let downloadsSection = document.getElementById('library-downloads-section');
-
-    // Create section if it doesn't exist
-    if (!downloadsSection) {
-        downloadsSection = document.createElement('div');
-        downloadsSection.id = 'library-downloads-section';
-        downloadsSection.className = 'artist-downloads-section';
-
-        // Insert before the artist grid
-        const artistGrid = document.getElementById('library-artists-grid');
-        if (artistGrid) {
-            libraryContent.insertBefore(downloadsSection, artistGrid);
-        }
-    }
-
-    // Count active artists (reuses artistDownloadBubbles state)
-    const activeArtists = Object.keys(artistDownloadBubbles).filter(artistId =>
-        artistDownloadBubbles[artistId].downloads.length > 0
-    );
-
-    if (activeArtists.length === 0) {
-        downloadsSection.style.display = 'none';
-        return;
-    }
-
-    downloadsSection.style.display = 'block';
-    downloadsSection.innerHTML = `
-        <div class="artist-downloads-header">
-            <h3 class="artist-downloads-title">Current Downloads</h3>
-            <p class="artist-downloads-subtitle">Active download processes</p>
-        </div>
-        <div class="artist-bubble-container">
-            ${activeArtists.map(artistId => createArtistBubbleCard(artistDownloadBubbles[artistId])).join('')}
-        </div>
-    `;
-
-    // Add click handlers + glow effects
-    activeArtists.forEach(artistId => {
-        const bubbleCard = downloadsSection.querySelector(`[data-artist-id="${artistId}"]`);
-        if (bubbleCard) {
-            bubbleCard.addEventListener('click', () => openArtistDownloadModal(artistId));
-            const artist = artistDownloadBubbles[artistId].artist;
-            if (artist.image_url) {
-                extractImageColors(artist.image_url, (colors) => {
-                    applyDynamicGlow(bubbleCard, colors);
-                });
-            }
-        }
-    });
-}
-
-/**
- * Create HTML for an artist bubble card
- */
-function createArtistBubbleCard(artistBubbleData) {
-    const { artist, downloads } = artistBubbleData;
-    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
-    const completedCount = downloads.filter(d => d.status === 'view_results').length;
-    const allCompleted = activeCount === 0 && completedCount > 0;
-
-    // Enhanced debug logging for bubble card creation and green checkmark detection
-    console.log(`🔵 [BUBBLE] Creating bubble for ${artist.name}:`, {
-        totalDownloads: downloads.length,
-        activeCount,
-        completedCount,
-        allCompleted,
-        downloadStatuses: downloads.map(d => `${d.album.name}: ${d.status}`)
-    });
-
-    // CRITICAL: Green checkmark detection logging
-    if (allCompleted) {
-        console.log(`🟢 [BUBBLE] GREEN CHECKMARK DETECTED for ${artist.name} - all ${downloads.length} downloads completed`);
-        console.log(`✅ [BUBBLE] This bubble will have 'all-completed' class and green checkmark`);
-    } else if (activeCount === 0 && completedCount === 0) {
-        console.log(`⭕ [BUBBLE] No active or completed downloads for ${artist.name} - this shouldn't happen`);
-    } else {
-        console.log(`⏳ [BUBBLE] Still waiting for completion: ${activeCount} active, ${completedCount} completed`);
-    }
-
-    const imageUrl = artist.image_url || '';
-    const backgroundStyle = imageUrl ?
-        `background-image: url('${imageUrl}');` :
-        `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
-
-    return `
-        <div class="artist-bubble-card ${allCompleted ? 'all-completed' : ''}" 
-             data-artist-id="${artist.id}"
-             title="Click to manage downloads for ${escapeHtml(artist.name)}">
-            <div class="artist-bubble-image" style="${backgroundStyle}"></div>
-            <div class="artist-bubble-overlay"></div>
-            <div class="artist-bubble-content">
-                <div class="artist-bubble-name">${escapeHtml(artist.name)}</div>
-                <div class="artist-bubble-status">
-                    ${activeCount > 0 ? `${activeCount} active` : ''}
-                    ${completedCount > 0 ? `${completedCount} completed` : ''}
-                </div>
-            </div>
-            ${allCompleted ? `
-                <div class="bulk-complete-indicator" 
-                     onclick="event.stopPropagation(); bulkCompleteArtistDownloads('${artist.id}')"
-                     title="Complete all downloads">
-                    <span class="bulk-complete-icon">✅</span>
-                </div>
-            ` : ''}
-        </div>
-    `;
-}
-
-/**
- * Monitor an artist download for completion status changes
- */
-function monitorArtistDownload(artistId, virtualPlaylistId) {
-    // Check if the download process exists and monitor its status
-    const checkStatus = () => {
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (!process || !artistDownloadBubbles[artistId]) {
-            return; // Process or artist bubble no longer exists
-        }
-
-        // Find this download in the artist's downloads
-        const download = artistDownloadBubbles[artistId].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
-        if (!download) return;
-
-        // Update download status based on process status
-        if (process.status === 'complete' && download.status === 'in_progress') {
-            download.status = 'view_results';
-            console.log(`✅ Download completed for ${artistDownloadBubbles[artistId].artist.name} - ${download.album.name}`);
-            console.log(`📊 Artist ${artistId} downloads status:`, artistDownloadBubbles[artistId].downloads.map(d => `${d.album.name}: ${d.status}`));
-
-            // Update the downloads section
-            updateArtistDownloadsSection();
-
-            // Save snapshot of updated state
-            saveArtistBubbleSnapshot();
-
-            // Check if all downloads for this artist are now completed
-            const artistDownloads = artistDownloadBubbles[artistId].downloads;
-            const allCompleted = artistDownloads.every(d => d.status === 'view_results');
-            if (allCompleted) {
-                console.log(`🟢 All downloads completed for ${artistDownloadBubbles[artistId].artist.name} - green checkmark should appear`);
-                console.log(`🎯 [STATUS DEBUG] Green checkmark trigger - forcing bubble refresh`);
-                // Force immediate bubble refresh to show green checkmark
-                setTimeout(updateArtistDownloadsSection, 100);
-            }
-        }
-
-        // Continue monitoring if still active
-        if (process.status !== 'complete') {
-            setTimeout(checkStatus, 2000); // Check every 2 seconds
-        }
-    };
-
-    // Start monitoring after a brief delay
-    setTimeout(checkStatus, 1000);
-}
-
-/**
- * Open the artist download management modal
- */
-function openArtistDownloadModal(artistId) {
-    const artistBubbleData = artistDownloadBubbles[artistId];
-    if (!artistBubbleData || artistDownloadModalOpen) return;
-
-    console.log(`🎵 [MODAL OPEN] Opening artist download modal for: ${artistBubbleData.artist.name}`);
-    console.log(`📊 [MODAL OPEN] Current download statuses:`, artistBubbleData.downloads.map(d => `${d.album.name}: ${d.status}`));
-    artistDownloadModalOpen = true;
-
-    const modal = document.createElement('div');
-    modal.id = 'artist-download-management-modal';
-    modal.className = 'artist-download-management-modal';
-    modal.innerHTML = `
-        <div class="artist-download-modal-content">
-            <div class="artist-download-modal-hero">
-                <div class="artist-download-modal-hero-bg" ${artistBubbleData.artist.image_url ? `style="background-image: url('${escapeHtml(artistBubbleData.artist.image_url)}')"` : ''}></div>
-                <div class="artist-download-modal-hero-overlay">
-                    <div class="artist-download-modal-hero-content">
-                        <div class="artist-download-modal-hero-avatar">
-                            ${artistBubbleData.artist.image_url
-            ? `<img src="${escapeHtml(artistBubbleData.artist.image_url)}" alt="${escapeHtml(artistBubbleData.artist.name)}" class="artist-download-modal-hero-image" loading="lazy">`
-            : '<div class="artist-download-modal-hero-fallback"><i class="fas fa-user-music"></i></div>'
-        }
-                        </div>
-                        <div class="artist-download-modal-hero-info">
-                            <h2 class="artist-download-modal-hero-title">${escapeHtml(artistBubbleData.artist.name)}</h2>
-                            <p class="artist-download-modal-hero-subtitle">${artistBubbleData.downloads.length} active download${artistBubbleData.downloads.length !== 1 ? 's' : ''}</p>
-                        </div>
-                    </div>
-                    <span class="artist-download-modal-close" onclick="closeArtistDownloadModal()">&times;</span>
-                </div>
-            </div>
-
-            <div class="artist-download-modal-body">
-                <div class="artist-download-items" id="artist-download-items-${artistId}">
-                    ${artistBubbleData.downloads.map((download, index) => createArtistDownloadItem(download, index)).join('')}
-                </div>
-            </div>
-        </div>
-        <div class="artist-download-modal-overlay" onclick="closeArtistDownloadModal()"></div>
-    `;
-
-    document.body.appendChild(modal);
-    modal.style.display = 'flex';
-
-    // Monitor for real-time updates
-    startArtistDownloadModalMonitoring(artistId);
-}
-
-/**
- * Create HTML for an individual download item in the artist modal
- */
-function createArtistDownloadItem(download, index) {
-    const { album, albumType, status, virtualPlaylistId } = download;
-    const buttonText = status === 'view_results' ? 'View Results' : 'View Progress';
-    const buttonClass = status === 'view_results' ? 'completed' : 'active';
-
-    // Enhanced debugging for button text generation
-    console.log(`🎯 [BUTTON] Creating item for ${album.name}: status='${status}' → buttonText='${buttonText}'`);
-
-    return `
-        <div class="artist-download-item" data-playlist-id="${virtualPlaylistId}">
-            <div class="download-item-artwork">
-                ${album.image_url
-            ? `<img src="${escapeHtml(album.image_url)}" alt="${escapeHtml(album.name)}" class="download-item-image" loading="lazy">`
-            : `<div class="download-item-fallback">
-                         <i class="fas fa-${albumType === 'album' ? 'compact-disc' : albumType === 'single' ? 'music' : 'record-vinyl'}"></i>
-                       </div>`
-        }
-            </div>
-            <div class="download-item-info">
-                <div class="download-item-name">${escapeHtml(album.name)}</div>
-                <div class="download-item-type">${albumType === 'album' ? 'Album' : albumType === 'single' ? 'Single' : 'EP'}</div>
-            </div>
-            <div class="download-item-actions">
-                <button class="download-item-btn ${buttonClass}"
-                        onclick="openArtistDownloadProcess('${virtualPlaylistId}')">
-                    ${buttonText}
-                </button>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Monitor artist download modal for real-time updates
- */
-function startArtistDownloadModalMonitoring(artistId) {
-    if (!artistDownloadModalOpen) return;
-
-    const updateModal = () => {
-        const modal = document.getElementById('artist-download-management-modal');
-        const itemsContainer = document.getElementById(`artist-download-items-${artistId}`);
-
-        if (!modal || !itemsContainer || !artistDownloadBubbles[artistId]) return;
-
-        // Check for completed downloads that need to be removed
-        const activeDownloads = artistDownloadBubbles[artistId].downloads.filter(download => {
-            const process = activeDownloadProcesses[download.virtualPlaylistId];
-            // Keep if process exists or if it's completed but not yet cleaned up
-            return process !== undefined;
-        });
-
-        // Update the downloads array
-        artistDownloadBubbles[artistId].downloads = activeDownloads;
-
-        // If no downloads left, close modal
-        if (activeDownloads.length === 0) {
-            closeArtistDownloadModal();
-            return;
-        }
-
-        // Update modal content and synchronize with bubble state
-        let statusChanged = false;
-        itemsContainer.innerHTML = activeDownloads.map((download, index) => {
-            const process = activeDownloadProcesses[download.virtualPlaylistId];
-            if (process) {
-                const newStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
-                if (download.status !== newStatus) {
-                    console.log(`🔄 [ARTIST MODAL] Updating ${download.album.name} status from ${download.status} to ${newStatus}`);
-                    download.status = newStatus;
-                    statusChanged = true;
-                }
-            }
-            return createArtistDownloadItem(download, index);
-        }).join('');
-
-        // CRITICAL: If any status changed, immediately refresh artist bubble to show green checkmarks
-        if (statusChanged) {
-            console.log(`🎯 [SYNC] Status change detected in artist modal - refreshing bubble display`);
-            updateArtistDownloadsSection();
-
-            // Check if all downloads for this artist are now completed
-            const artistDownloads = artistDownloadBubbles[artistId].downloads;
-            const allCompleted = artistDownloads.every(d => d.status === 'view_results');
-            if (allCompleted) {
-                console.log(`🟢 [ARTIST MODAL] All downloads completed for artist ${artistId} - triggering green checkmark`);
-                // Force additional refresh after a brief delay to ensure UI updates
-                setTimeout(() => {
-                    console.log(`✨ [ARTIST MODAL] Forcing final refresh for green checkmark`);
-                    updateArtistDownloadsSection();
-                }, 200);
-            }
-        }
-
-        // Continue monitoring
-        setTimeout(updateModal, 2000);
-    };
-
-    setTimeout(updateModal, 1000);
-}
-
-/**
- * Open a specific artist download process modal
- */
-function openArtistDownloadProcess(virtualPlaylistId) {
-    const process = activeDownloadProcesses[virtualPlaylistId];
-    if (process && process.modalElement) {
-        // Close artist management modal first
-        closeArtistDownloadModal();
-
-        // Show the download process modal
-        process.modalElement.style.display = 'flex';
-
-        if (process.status === 'complete') {
-            showToast('Review download results and click "Close" to finish.', 'info');
-        }
-    }
-}
-
-/**
- * Close the artist download management modal
- */
-function closeArtistDownloadModal() {
-    const modal = document.getElementById('artist-download-management-modal');
-    if (modal) {
-        modal.remove();
-    }
-    artistDownloadModalOpen = false;
-}
-
-/**
- * Bulk complete all downloads for an artist (when all are in 'view_results' state)
- */
-function bulkCompleteArtistDownloads(artistId) {
-    console.log(`🎯 Bulk completing downloads for artist: ${artistId}`);
-
-    const artistBubbleData = artistDownloadBubbles[artistId];
-    if (!artistBubbleData) {
-        console.warn(`❌ No artist bubble data found for ${artistId}`);
-        return;
-    }
-
-    // Find all downloads in 'view_results' state
-    const completedDownloads = artistBubbleData.downloads.filter(d => d.status === 'view_results');
-    console.log(`📋 Found ${completedDownloads.length} completed downloads to close:`,
-        completedDownloads.map(d => d.album.name));
-
-    if (completedDownloads.length === 0) {
-        console.warn(`⚠️ No completed downloads found for bulk close`);
-        showToast('No completed downloads to close', 'info');
-        return;
-    }
-
-    // Programmatically close all completed modals
-    completedDownloads.forEach(download => {
-        const process = activeDownloadProcesses[download.virtualPlaylistId];
-        if (process && process.modalElement) {
-            console.log(`🗑️ Closing modal for: ${download.album.name}`);
-            // Trigger the close function which handles cleanup
-            closeDownloadMissingModal(download.virtualPlaylistId);
-        } else {
-            // No modal open — clean up the bubble entry directly
-            console.log(`🧹 Direct cleanup (no modal) for: ${download.album.name}`);
-            cleanupArtistDownload(download.virtualPlaylistId);
-        }
-    });
-
-    showToast(`Completed ${completedDownloads.length} downloads for ${artistBubbleData.artist.name}`, 'success');
-}
-
-// ========================================
-// Beatport Download Bubbles
-// ========================================
-
-/**
- * Register a new Beatport chart download for bubble management
- */
-function registerBeatportDownload(chartName, chartImage, virtualPlaylistId) {
-    console.log(`📝 Registering Beatport download: ${chartName}`);
-
-    // Use chart name as key (sanitised)
-    const chartKey = chartName.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
-
-    if (!beatportDownloadBubbles[chartKey]) {
-        beatportDownloadBubbles[chartKey] = {
-            chart: { name: chartName, image: chartImage || '' },
-            downloads: []
-        };
-    }
-
-    beatportDownloadBubbles[chartKey].downloads.push({
-        virtualPlaylistId: virtualPlaylistId,
-        status: 'in_progress',
-        startTime: new Date()
-    });
-
-    updateBeatportDownloadsSection();
-    saveBeatportBubbleSnapshot();
-    monitorBeatportDownload(chartKey, virtualPlaylistId);
-}
-
-/**
- * Debounced update for Beatport downloads section
- */
-function updateBeatportDownloadsSection() {
-    if (beatportDownloadsUpdateTimeout) {
-        clearTimeout(beatportDownloadsUpdateTimeout);
-    }
-    beatportDownloadsUpdateTimeout = setTimeout(() => {
-        showBeatportDownloadsSection();
-        updateDashboardDownloads();
-    }, 300);
-}
-
-/**
- * Render Beatport download bubbles on the Beatport page
- */
-function showBeatportDownloadsSection() {
-    const downloadsSection = document.getElementById('beatport-downloads-section');
-    if (!downloadsSection) return;
-
-    const activeCharts = Object.keys(beatportDownloadBubbles).filter(key =>
-        beatportDownloadBubbles[key].downloads.length > 0
-    );
-
-    if (activeCharts.length === 0) {
-        downloadsSection.style.display = 'none';
-        return;
-    }
-
-    downloadsSection.style.display = 'block';
-    downloadsSection.innerHTML = `
-        <div class="artist-downloads-header">
-            <h3 class="artist-downloads-title">Beatport Downloads</h3>
-            <p class="artist-downloads-subtitle">Active chart download processes</p>
-        </div>
-        <div class="artist-bubble-container" id="beatport-bubble-container">
-            ${activeCharts.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
-        </div>
-    `;
-
-    // Attach click handlers + glow
-    activeCharts.forEach(chartKey => {
-        const card = downloadsSection.querySelector(`[data-chart-key="${chartKey}"]`);
-        if (card) {
-            card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
-            const chartImage = beatportDownloadBubbles[chartKey].chart.image;
-            if (chartImage) {
-                extractImageColors(chartImage, (colors) => {
-                    applyDynamicGlow(card, colors);
-                });
-            }
-        }
-    });
-}
-
-/**
- * Create HTML for a Beatport bubble card (reuses artist bubble CSS)
- */
-function createBeatportBubbleCard(bubbleData) {
-    const { chart, downloads } = bubbleData;
-    const chartKey = chart.name.replace(/[^a-zA-Z0-9]/g, '_').toLowerCase();
-    const activeCount = downloads.filter(d => d.status === 'in_progress').length;
-    const completedCount = downloads.filter(d => d.status === 'view_results').length;
-    const allCompleted = activeCount === 0 && completedCount > 0;
-
-    const backgroundStyle = chart.image
-        ? `background-image: url('${chart.image}');`
-        : `background: linear-gradient(135deg, rgba(0, 210, 120, 0.3) 0%, rgba(0, 170, 100, 0.2) 100%);`;
-
-    return `
-        <div class="artist-bubble-card ${allCompleted ? 'all-completed' : ''}"
-             data-chart-key="${chartKey}"
-             title="Click to manage downloads for ${escapeHtml(chart.name)}">
-            <div class="artist-bubble-image" style="${backgroundStyle}"></div>
-            <div class="artist-bubble-overlay"></div>
-            <div class="artist-bubble-content">
-                <div class="artist-bubble-name">${escapeHtml(chart.name)}</div>
-                <div class="artist-bubble-status">
-                    ${activeCount > 0 ? `${activeCount} active` : ''}
-                    ${completedCount > 0 ? `${completedCount} completed` : ''}
-                </div>
-            </div>
-            ${allCompleted ? `
-                <div class="bulk-complete-indicator"
-                     onclick="event.stopPropagation(); bulkCompleteBeatportDownloads('${chartKey}')"
-                     title="Complete all downloads">
-                    <span class="bulk-complete-icon">✅</span>
-                </div>
-            ` : ''}
-        </div>
-    `;
-}
-
-/**
- * Monitor a Beatport download for completion
- */
-function monitorBeatportDownload(chartKey, virtualPlaylistId) {
-    const checkStatus = () => {
-        const process = activeDownloadProcesses[virtualPlaylistId];
-        if (!process || !beatportDownloadBubbles[chartKey]) return;
-
-        const download = beatportDownloadBubbles[chartKey].downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
-        if (!download) return;
-
-        if (process.status === 'complete' && download.status === 'in_progress') {
-            download.status = 'view_results';
-            console.log(`✅ Beatport download completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
-
-            updateBeatportDownloadsSection();
-            saveBeatportBubbleSnapshot();
-
-            const allCompleted = beatportDownloadBubbles[chartKey].downloads.every(d => d.status === 'view_results');
-            if (allCompleted) {
-                console.log(`🟢 All Beatport downloads completed for ${beatportDownloadBubbles[chartKey].chart.name}`);
-                setTimeout(updateBeatportDownloadsSection, 100);
-            }
-        }
-
-        if (process.status !== 'complete') {
-            setTimeout(checkStatus, 2000);
-        }
-    };
-
-    setTimeout(checkStatus, 1000);
-}
-
-/**
- * Open the download modal for a Beatport chart bubble
- */
-function openBeatportBubbleModal(chartKey) {
-    const bubbleData = beatportDownloadBubbles[chartKey];
-    if (!bubbleData) return;
-
-    // Find the first download with an active modal
-    for (const download of bubbleData.downloads) {
-        const process = activeDownloadProcesses[download.virtualPlaylistId];
-        if (process && process.modalElement) {
-            process.modalElement.style.display = 'flex';
-            if (process.status === 'complete') {
-                showToast('Review download results and click "Close" to finish.', 'info');
-            }
-            return;
-        }
-    }
-
-    showToast('No active download modal found for this chart', 'info');
-}
-
-/**
- * Bulk complete all downloads for a Beatport chart
- */
-function bulkCompleteBeatportDownloads(chartKey) {
-    console.log(`🎯 Bulk completing Beatport downloads for chart: ${chartKey}`);
-
-    const bubbleData = beatportDownloadBubbles[chartKey];
-    if (!bubbleData) return;
-
-    const completedDownloads = bubbleData.downloads.filter(d => d.status === 'view_results');
-    if (completedDownloads.length === 0) {
-        showToast('No completed downloads to close', 'info');
-        return;
-    }
-
-    completedDownloads.forEach(download => {
-        const process = activeDownloadProcesses[download.virtualPlaylistId];
-        if (process && process.modalElement) {
-            closeDownloadMissingModal(download.virtualPlaylistId);
-        } else {
-            cleanupBeatportDownload(download.virtualPlaylistId);
-        }
-    });
-
-    showToast(`Completed ${completedDownloads.length} downloads for ${bubbleData.chart.name}`, 'success');
-}
-
-/**
- * Clean up a Beatport download when its modal is closed
- */
-function cleanupBeatportDownload(virtualPlaylistId) {
-    console.log(`🔍 [CLEANUP] Looking for Beatport download to cleanup: ${virtualPlaylistId}`);
-
-    for (const chartKey in beatportDownloadBubbles) {
-        const downloads = beatportDownloadBubbles[chartKey].downloads;
-        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
-
-        if (downloadIndex !== -1) {
-            downloads.splice(downloadIndex, 1);
-            console.log(`🧹 [CLEANUP] Removed Beatport download from ${chartKey}. Remaining: ${downloads.length}`);
-
-            if (downloads.length === 0) {
-                delete beatportDownloadBubbles[chartKey];
-                console.log(`🧹 [CLEANUP] No more downloads - removed Beatport bubble: ${chartKey}`);
-            }
-
-            updateBeatportDownloadsSection();
-            saveBeatportBubbleSnapshot();
-            return;
-        }
-    }
-}
-
-// --- Beatport Bubble Snapshot System ---
-
-let beatportSnapshotSaveTimeout = null;
-
-async function saveBeatportBubbleSnapshot() {
-    if (beatportSnapshotSaveTimeout) {
-        clearTimeout(beatportSnapshotSaveTimeout);
-    }
-
-    beatportSnapshotSaveTimeout = setTimeout(async () => {
-        try {
-            const bubbleCount = Object.keys(beatportDownloadBubbles).length;
-            if (bubbleCount === 0) return;
-
-            const cleanBubbles = {};
-            for (const [chartKey, bubbleData] of Object.entries(beatportDownloadBubbles)) {
-                cleanBubbles[chartKey] = {
-                    chart: bubbleData.chart,
-                    downloads: bubbleData.downloads.map(d => ({
-                        virtualPlaylistId: d.virtualPlaylistId,
-                        status: d.status,
-                        startTime: d.startTime instanceof Date ? d.startTime.toISOString() : d.startTime
-                    }))
-                };
-            }
-
-            const response = await fetch('/api/beatport_bubbles/snapshot', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ bubbles: cleanBubbles })
-            });
-
-            const data = await response.json();
-            if (data.success) {
-                console.log(`✅ Beatport bubble snapshot saved: ${bubbleCount} charts`);
-            }
-        } catch (error) {
-            console.error('❌ Error saving Beatport bubble snapshot:', error);
-        }
-    }, 1000);
-}
-
-async function hydrateBeatportBubblesFromSnapshot() {
-    try {
-        console.log('🔄 Loading Beatport bubble snapshot from backend...');
-
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport_bubbles/hydrate', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (!data.success) {
-            console.error('❌ Failed to load Beatport bubble snapshot:', data.error);
-            return;
-        }
-
-        const bubbles = data.bubbles || {};
-        if (Object.keys(bubbles).length === 0) {
-            console.log('ℹ️ No Beatport bubbles to hydrate');
-            return;
-        }
-
-        beatportDownloadBubbles = {};
-
-        for (const [chartKey, bubbleData] of Object.entries(bubbles)) {
-            beatportDownloadBubbles[chartKey] = {
-                chart: bubbleData.chart,
-                downloads: bubbleData.downloads.map(d => ({
-                    virtualPlaylistId: d.virtualPlaylistId,
-                    status: d.status,
-                    startTime: new Date(d.startTime)
-                }))
-            };
-
-            for (const download of bubbleData.downloads) {
-                if (download.status === 'in_progress') {
-                    monitorBeatportDownload(chartKey, download.virtualPlaylistId);
-                }
-            }
-        }
-
-        updateBeatportDownloadsSection();
-        console.log(`✅ Hydrated ${Object.keys(beatportDownloadBubbles).length} Beatport download bubbles`);
-    } catch (error) {
-        if (error && error.name === 'AbortError') {
-            console.log('⏹ Beatport bubble hydration aborted');
-            return;
-        }
-        console.error('❌ Error hydrating Beatport bubbles:', error);
-    }
-}
-
-/**
- * Clean up artist download when a modal is closed
- */
-function cleanupArtistDownload(virtualPlaylistId) {
-    console.log(`🔍 [CLEANUP] Looking for download to cleanup: ${virtualPlaylistId}`);
-    console.log(`🔍 [CLEANUP] Current artist bubbles:`, Object.keys(artistDownloadBubbles));
-
-    // Find which artist this download belongs to
-    for (const artistId in artistDownloadBubbles) {
-        const downloads = artistDownloadBubbles[artistId].downloads;
-        const downloadIndex = downloads.findIndex(d => d.virtualPlaylistId === virtualPlaylistId);
-
-        console.log(`🔍 [CLEANUP] Checking artist ${artistId}: ${downloads.length} downloads`);
-        downloads.forEach(d => console.log(`  - ${d.album.name} (${d.virtualPlaylistId}): ${d.status}`));
-
-        if (downloadIndex !== -1) {
-            const downloadToRemove = downloads[downloadIndex];
-            console.log(`🧹 [CLEANUP] Found download to cleanup: ${downloadToRemove.album.name} (status: ${downloadToRemove.status})`);
-
-            // Remove this download from the artist's downloads
-            downloads.splice(downloadIndex, 1);
-            console.log(`✅ [CLEANUP] Removed download from artist ${artistId}. Remaining: ${downloads.length}`);
-
-            // If no more downloads for this artist, remove the bubble
-            if (downloads.length === 0) {
-                delete artistDownloadBubbles[artistId];
-                console.log(`🧹 [CLEANUP] No more downloads - removed artist bubble: ${artistId}`);
-            } else {
-                console.log(`📊 [CLEANUP] Artist ${artistId} still has ${downloads.length} downloads remaining`);
-            }
-
-            // Update the downloads section
-            console.log(`🔄 [CLEANUP] Updating artist downloads section...`);
-            updateArtistDownloadsSection();
-
-            // Save snapshot of updated state
-            saveArtistBubbleSnapshot();
-            break;
-        }
-    }
-    console.log(`✅ [CLEANUP] Cleanup process completed for ${virtualPlaylistId}`);
-}
-
-/**
- * Force refresh all artist download statuses (useful for debugging)
- */
-function refreshAllArtistDownloadStatuses() {
-    console.log('🔄 Force refreshing all artist download statuses...');
-
-    for (const artistId in artistDownloadBubbles) {
-        const artistData = artistDownloadBubbles[artistId];
-        let hasChanges = false;
-
-        artistData.downloads.forEach(download => {
-            const process = activeDownloadProcesses[download.virtualPlaylistId];
-            if (process) {
-                const expectedStatus = process.status === 'complete' ? 'view_results' : 'in_progress';
-                if (download.status !== expectedStatus) {
-                    console.log(`🔧 Fixing status for ${download.album.name}: ${download.status} → ${expectedStatus}`);
-                    download.status = expectedStatus;
-                    hasChanges = true;
-                }
-            }
-        });
-
-        if (hasChanges) {
-            console.log(`✅ Updated statuses for ${artistData.artist.name}`);
-        }
-    }
-
-    // Force update the downloads section
-    showArtistDownloadsSection();
-}
-
-/**
- * Extract dominant colors from an image for dynamic glow effects
- */
-async function extractImageColors(imageUrl, callback) {
-    if (!imageUrl) {
-        callback(getAccentFallbackColors()); // Fallback to Spotify green
-        return;
-    }
-
-    // Check cache first for performance
-    if (artistsPageState.cache.colors[imageUrl]) {
-        callback(artistsPageState.cache.colors[imageUrl]);
-        return;
-    }
-
-    try {
-        // Create a canvas to analyze the image
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        const img = new Image();
-
-        img.crossOrigin = 'anonymous';
-
-        img.onload = function () {
-            // Resize to small dimensions for faster processing
-            const size = 50;
-            canvas.width = size;
-            canvas.height = size;
-
-            // Draw image to canvas
-            ctx.drawImage(img, 0, 0, size, size);
-
-            try {
-                // Get image data
-                const imageData = ctx.getImageData(0, 0, size, size);
-                const data = imageData.data;
-
-                // Extract colors (sample every few pixels for performance)
-                const colors = [];
-                for (let i = 0; i < data.length; i += 16) { // Sample every 4th pixel
-                    const r = data[i];
-                    const g = data[i + 1];
-                    const b = data[i + 2];
-                    const alpha = data[i + 3];
-
-                    // Skip transparent or very dark pixels
-                    if (alpha > 128 && (r + g + b) > 150) {
-                        colors.push({ r, g, b });
-                    }
-                }
-
-                if (colors.length === 0) {
-                    callback(getAccentFallbackColors()); // Fallback
-                    return;
-                }
-
-                // Find dominant colors using a simple clustering approach
-                const dominantColors = findDominantColors(colors, 2);
-
-                // Convert to CSS hex colors
-                const hexColors = dominantColors.map(color =>
-                    `#${((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1)}`
-                );
-
-                // Cache the colors for future use
-                artistsPageState.cache.colors[imageUrl] = hexColors;
-
-                callback(hexColors);
-
-            } catch (e) {
-                console.warn('Color extraction failed, using fallback colors:', e);
-                callback(getAccentFallbackColors());
-            }
-        };
-
-        img.onerror = function () {
-            callback(getAccentFallbackColors()); // Fallback on error
-        };
-
-        img.src = imageUrl;
-
-    } catch (error) {
-        console.warn('Image color extraction error:', error);
-        callback(getAccentFallbackColors());
-    }
-}
-
-/**
- * Simple color clustering to find dominant colors
- */
-function findDominantColors(colors, numColors = 2) {
-    if (colors.length === 0) return [{ r: 29, g: 185, b: 84 }];
-
-    // Simple k-means clustering
-    let centroids = [];
-
-    // Initialize centroids randomly
-    for (let i = 0; i < numColors; i++) {
-        centroids.push(colors[Math.floor(Math.random() * colors.length)]);
-    }
-
-    // Run a few iterations of k-means
-    for (let iteration = 0; iteration < 5; iteration++) {
-        const clusters = Array(numColors).fill().map(() => []);
-
-        // Assign each color to nearest centroid
-        colors.forEach(color => {
-            let minDistance = Infinity;
-            let nearestCluster = 0;
-
-            centroids.forEach((centroid, i) => {
-                const distance = Math.sqrt(
-                    Math.pow(color.r - centroid.r, 2) +
-                    Math.pow(color.g - centroid.g, 2) +
-                    Math.pow(color.b - centroid.b, 2)
-                );
-
-                if (distance < minDistance) {
-                    minDistance = distance;
-                    nearestCluster = i;
-                }
-            });
-
-            clusters[nearestCluster].push(color);
-        });
-
-        // Update centroids
-        centroids = clusters.map(cluster => {
-            if (cluster.length === 0) return centroids[0]; // Fallback
-
-            const avgR = cluster.reduce((sum, c) => sum + c.r, 0) / cluster.length;
-            const avgG = cluster.reduce((sum, c) => sum + c.g, 0) / cluster.length;
-            const avgB = cluster.reduce((sum, c) => sum + c.b, 0) / cluster.length;
-
-            return { r: Math.round(avgR), g: Math.round(avgG), b: Math.round(avgB) };
-        });
-    }
-
-    // Ensure we have vibrant colors by boosting saturation
-    return centroids.map(color => {
-        const max = Math.max(color.r, color.g, color.b);
-        const min = Math.min(color.r, color.g, color.b);
-        const saturation = max === 0 ? 0 : (max - min) / max;
-
-        // Boost low saturation colors
-        if (saturation < 0.4) {
-            const factor = 1.3;
-            return {
-                r: Math.min(255, Math.round(color.r * factor)),
-                g: Math.min(255, Math.round(color.g * factor)),
-                b: Math.min(255, Math.round(color.b * factor))
-            };
-        }
-
-        return color;
-    });
-}
-
-/**
- * Apply dynamic glow effect to a card element
- */
-function applyDynamicGlow(cardElement, colors) {
-    if (!cardElement || colors.length < 2) return;
-
-    const color1 = colors[0];
-    const color2 = colors[1];
-
-    // Add a small delay to make the effect feel more natural
-    setTimeout(() => {
-        // Create CSS custom properties for the dynamic colors
-        cardElement.style.setProperty('--glow-color-1', color1);
-        cardElement.style.setProperty('--glow-color-2', color2);
-        cardElement.classList.add('has-dynamic-glow');
-
-        console.log(`🎨 Applied dynamic glow: ${color1}, ${color2}`);
-    }, Math.random() * 200 + 100); // Random delay between 100-300ms
-}
-
-/**
- * Utility function to escape HTML
- */
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-// --- Service Status and System Stats Functions ---
-
-async function _forceServiceStatusRefresh() {
-    // Force an immediate status refresh (bypasses WebSocket check) — used after settings save
-    try {
-        const response = await fetch('/status');
-        if (!response.ok) return;
-        const data = await response.json();
-        handleServiceStatusUpdate(data);
-    } catch (error) {
-        console.warn('Could not force service status refresh:', error);
-    }
-}
-
-async function fetchAndUpdateServiceStatus() {
-    if (document.hidden) return; // Skip polling when tab is not visible
-    if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll
-    try {
-        const response = await fetch('/status');
-        if (!response.ok) return;
-
-        const data = await response.json();
-
-        // Cache for library status card
-        _lastServiceStatus = data;
-
-        // Update service status indicators and text (dashboard)
-        updateServiceStatus('spotify', data.spotify);
-        updateServiceStatus('media-server', data.media_server);
-        updateServiceStatus('soulseek', data.soulseek);
-
-        // Update sidebar service status indicators
-        updateSidebarServiceStatus('spotify', data.spotify);
-        updateSidebarServiceStatus('media-server', data.media_server);
-        updateSidebarServiceStatus('soulseek', data.soulseek);
-
-        // Update downloads nav badge
-        if (data.active_downloads !== undefined) _updateDlNavBadge(data.active_downloads);
-
-        // Hide sync buttons (not the page) for standalone mode
-        const isSoulsyncStandalone2 = data.media_server?.type === 'soulsync';
-        _isSoulsyncStandalone = isSoulsyncStandalone2;
-        document.querySelectorAll('.sync-to-server-btn, [id$="-sync-btn"], [onclick*="startPlaylistSync"], [onclick*="syncPlaylistToServer"], [onclick*="startDecadeSync"]').forEach(btn => {
-            if (isSoulsyncStandalone2) {
-                btn.dataset.hiddenByStandalone = '1';
-                btn.style.display = 'none';
-            } else if (btn.dataset.hiddenByStandalone) {
-                delete btn.dataset.hiddenByStandalone;
-                btn.style.display = '';
-            }
-        });
-
-        // Update enrichment service cards
-        if (data.enrichment) renderEnrichmentCards(data.enrichment);
-
-        // Check for Spotify rate limit
-        if (data.spotify && data.spotify.rate_limited && data.spotify.rate_limit) {
-            handleSpotifyRateLimit(data.spotify.rate_limit);
-        } else if (_spotifyRateLimitShown) {
-            handleSpotifyRateLimit(null);
-        }
-
-    } catch (error) {
-        console.warn('Could not fetch service status:', error);
-    }
-}
-
-function updateServiceStatus(service, statusData) {
-    const indicator = document.getElementById(`${service}-status-indicator`);
-    const statusText = document.getElementById(`${service}-status-text`);
-
-    if (indicator && statusText) {
-        if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
-            indicator.className = 'service-card-indicator rate-limited';
-            const remaining = statusData.rate_limited
-                ? formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)
-                : formatRateLimitDuration(statusData.post_ban_cooldown);
-            const phase = statusData.rate_limited ? 'paused' : 'recovering';
-            const fallbackLabel = statusData.source === 'deezer' ? 'Deezer' : 'iTunes';
-            statusText.textContent = `${fallbackLabel} (Spotify ${phase} \u2014 ${remaining})`;
-            statusText.className = 'service-card-status-text rate-limited';
-        } else if (statusData.connected) {
-            indicator.className = 'service-card-indicator connected';
-            statusText.textContent = `Connected (${statusData.response_time}ms)`;
-            statusText.className = 'service-card-status-text connected';
-        } else {
-            indicator.className = 'service-card-indicator disconnected';
-            statusText.textContent = 'Disconnected';
-            statusText.className = 'service-card-status-text disconnected';
-        }
-    }
-
-    // Update music source title based on active source
-    if (service === 'spotify' && statusData.source) {
-        const musicSourceTitleElement = document.getElementById('music-source-title');
-        if (musicSourceTitleElement) {
-            const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
-            musicSourceTitleElement.textContent = sourceName;
-            currentMusicSourceName = sourceName;
-        }
-
-        // Show/hide Spotify disconnect button based on connection state
-        const disconnectBtn = document.getElementById('spotify-disconnect-btn');
-        if (disconnectBtn) {
-            disconnectBtn.style.display = statusData.source === 'spotify' ? '' : 'none';
-        }
-    }
-
-    // Update download source title on dashboard card
-    if (service === 'soulseek' && statusData.source) {
-        const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
-        const displayName = sourceNames[statusData.source] || 'Soulseek';
-        const titleEl = document.getElementById('download-source-title');
-        if (titleEl) titleEl.textContent = displayName;
-    }
-}
-
-function updateSidebarServiceStatus(service, statusData) {
-    const indicator = document.getElementById(`${service}-indicator`);
-    if (indicator) {
-        const dot = indicator.querySelector('.status-dot');
-        const nameElement = indicator.querySelector('.status-name');
-
-        if (dot) {
-            if (service === 'spotify' && (statusData.rate_limited || statusData.post_ban_cooldown)) {
-                dot.className = 'status-dot rate-limited';
-                dot.title = statusData.rate_limited
-                    ? `Spotify paused \u2014 ${formatRateLimitDuration(statusData.rate_limit?.remaining_seconds || 0)} remaining`
-                    : `Spotify recovering \u2014 ${formatRateLimitDuration(statusData.post_ban_cooldown)} cooldown`;
-            } else if (statusData.connected) {
-                dot.className = 'status-dot connected';
-                dot.title = '';
-            } else {
-                dot.className = 'status-dot disconnected';
-                dot.title = '';
-            }
-        }
-
-        // Update media server name if it's the media server indicator
-        if (service === 'media-server' && statusData.type) {
-            const mediaServerNameElement = document.getElementById('media-server-name');
-            if (mediaServerNameElement) {
-                const serverName = statusData.type.charAt(0).toUpperCase() + statusData.type.slice(1);
-                mediaServerNameElement.textContent = serverName;
-            }
-        }
-
-        // Update music source name in sidebar based on active source
-        if (service === 'spotify' && statusData.source) {
-            const musicSourceNameElement = document.getElementById('music-source-name');
-            if (musicSourceNameElement) {
-                const sourceName = statusData.source === 'spotify' ? 'Spotify' : statusData.source === 'deezer' ? 'Deezer' : statusData.source === 'discogs' ? 'Discogs' : 'iTunes';
-                musicSourceNameElement.textContent = sourceName;
-            }
-        }
-
-        // Update download source name based on configured mode
-        if (service === 'soulseek' && statusData.source) {
-            const sourceNames = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Hybrid' };
-            const displayName = sourceNames[statusData.source] || 'Soulseek';
-            const sidebarName = document.getElementById('download-source-name');
-            if (sidebarName) sidebarName.textContent = displayName;
-        }
-    }
-}
-
-function renderEnrichmentCards(enrichment) {
-    const grid = document.getElementById('enrichment-status-grid');
-    if (!grid || !enrichment) return;
-
-    // Service display order
-    const serviceOrder = [
-        'musicbrainz', 'spotify_enrichment', 'itunes_enrichment', 'deezer_enrichment',
-        'tidal_enrichment', 'qobuz_enrichment', 'lastfm', 'genius', 'audiodb',
-        'acoustid', 'listenbrainz'
-    ];
-
-    // Map service keys to their settings page selector for click-to-configure
-    const settingsSelectors = {
-        'spotify_enrichment': '.spotify-title',
-        'tidal_enrichment': '.tidal-title',
-        'qobuz_enrichment': '.qobuz-title',
-        'lastfm': '.lastfm-title',
-        'genius': '.genius-title',
-        'acoustid': '.acoustid-title',
-        'listenbrainz': '.listenbrainz-title',
-    };
-
-    const chips = [];
-    for (const key of serviceOrder) {
-        const svc = enrichment[key];
-        if (!svc) continue;
-
-        // Determine status class and text
-        let statusClass, statusLabel;
-        if ('running' in svc) {
-            if (!svc.configured) {
-                statusClass = 'not-configured';
-                statusLabel = 'Set up';
-            } else if (svc.paused) {
-                statusClass = 'paused';
-                statusLabel = svc.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
-            } else if (svc.running) {
-                statusClass = svc.idle ? 'idle' : 'running';
-                statusLabel = svc.idle ? 'Idle' : 'Running';
-            } else {
-                statusClass = 'stopped';
-                statusLabel = 'Stopped';
-            }
-        } else {
-            statusClass = svc.configured ? 'running' : 'not-configured';
-            statusLabel = svc.configured ? 'Ready' : 'Set up';
-        }
-
-        const selector = settingsSelectors[key];
-        const clickAttr = selector
-            ? `onclick="navigateToPage('settings'); setTimeout(() => { switchSettingsTab('connections'); setTimeout(() => { const el = document.querySelector('${selector}'); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); }, 50);"`
-            : '';
-
-        // Build activity display — human-readable, not cryptic numbers
-        let activityHtml = '';
-        let metaHtml = '';
-        const isSpotify = key === 'spotify_enrichment';
-
-        if ('running' in svc && svc.configured) {
-            const c1h = svc.calls_1h || 0;
-            const c24h = svc.calls_24h || 0;
-
-            if (isSpotify && svc.daily_budget) {
-                // Spotify: show budget usage prominently
-                const b = svc.daily_budget;
-                const pct = Math.min(100, Math.round((b.used / b.limit) * 100));
-                const barClass = b.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
-                activityHtml = `<span class="enrichment-chip-activity">${b.used.toLocaleString()} / ${b.limit.toLocaleString()}</span>`;
-                metaHtml = `<div class="enrichment-chip-budget">
-                    <div class="enrichment-chip-budget-bar ${barClass}" style="width: ${pct}%"></div>
-                </div>`;
-            } else if (c24h > 0) {
-                // Other services: show 24h count
-                activityHtml = `<span class="enrichment-chip-activity">${c24h.toLocaleString()} / 24h</span>`;
-            }
-        }
-
-        // Tooltip: full details including 1h breakdown
-        let tooltipLines = [svc.name + ' — ' + statusLabel];
-        if ('running' in svc && svc.configured) {
-            const c1h = svc.calls_1h || 0;
-            const c24h = svc.calls_24h || 0;
-            if (c24h > 0 || c1h > 0) tooltipLines.push('Last hour: ' + c1h + ' · Last 24h: ' + c24h);
-        }
-        if (isSpotify && svc.daily_budget) {
-            const b = svc.daily_budget;
-            tooltipLines.push('Daily budget: ' + b.used + ' / ' + b.limit + (b.exhausted ? ' (exhausted)' : ''));
-        }
-        if (selector && statusClass === 'not-configured') {
-            tooltipLines = ['Click to configure in Settings'];
-        }
-
-        const statusDisplay = statusClass === 'not-configured' && selector ? 'Configure →' : statusLabel;
-
-        chips.push(`
-            <div class="enrichment-chip status-${statusClass}" ${clickAttr} title="${tooltipLines.join('\n')}">
-                <span class="enrichment-chip-dot"></span>
-                <span class="enrichment-chip-name">${svc.name}</span>
-                ${activityHtml}
-                <span class="enrichment-chip-status">${statusDisplay}</span>
-                ${metaHtml}
-            </div>
-        `);
-    }
-
-    grid.innerHTML = chips.join('');
-}
-
-// ===============================
-// == API RATE MONITOR GAUGES   ==
-// ===============================
-
-const _rateMonitorState = {};
-const _RATE_GAUGE_SERVICES = [
-    'spotify', 'itunes', 'deezer', 'lastfm', 'genius',
-    'musicbrainz', 'audiodb', 'tidal', 'qobuz', 'discogs',
-];
-const _RATE_GAUGE_LABELS = {
-    spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer',
-    lastfm: 'Last.fm', genius: 'Genius', musicbrainz: 'MusicBrainz',
-    audiodb: 'AudioDB', tidal: 'Tidal', qobuz: 'Qobuz', discogs: 'Discogs',
-};
-const _RATE_GAUGE_COLORS = {
-    spotify: '#1DB954', itunes: '#FC3C44', deezer: '#A238FF',
-    lastfm: '#D51007', genius: '#FFFF64', musicbrainz: '#BA478F',
-    audiodb: '#00BCD4', tidal: '#00FFFF', qobuz: '#FF6B35', discogs: '#D4A574',
-};
-
-// SVG constants — 240° arc, gap at bottom
-const _G = { size: 160, cx: 80, cy: 84, r: 56, stroke: 8, startAngle: 240, totalArc: 240 };
-
-function _gPt(angle, radius) {
-    const rad = (angle - 90) * Math.PI / 180;
-    const r = radius || _G.r;
-    return { x: _G.cx + r * Math.cos(rad), y: _G.cy + r * Math.sin(rad) };
-}
-
-function _gArc(startDeg, endDeg, radius) {
-    const r = radius || _G.r;
-    const s = _gPt(startDeg, r), e = _gPt(endDeg, r);
-    const sweep = ((endDeg - startDeg + 360) % 360);
-    const large = sweep > 180 ? 1 : 0;
-    return `M${s.x},${s.y} A${r},${r} 0 ${large} 1 ${e.x},${e.y}`;
-}
-
-function _handleRateMonitorUpdate(data) {
-    const grid = document.getElementById('rate-monitor-grid');
-    if (!grid) return;
-
-    if (!grid.children.length) {
-        for (const svc of _RATE_GAUGE_SERVICES) {
-            const div = document.createElement('div');
-            div.className = 'rate-gauge-card';
-            div.id = `rate-gauge-${svc}`;
-            div.onclick = () => _openRateModal(svc);
-            grid.appendChild(div);
-        }
-    }
-
-    for (const svc of _RATE_GAUGE_SERVICES) {
-        const d = data[svc];
-        if (!d) continue;
-        _rateMonitorState[svc] = d;
-        const container = document.getElementById(`rate-gauge-${svc}`);
-        if (!container) continue;
-
-        const value = d.cpm || 0;
-        const max = d.limit || 60;
-        const pct = Math.min(value / max, 1);
-        const accent = _RATE_GAUGE_COLORS[svc] || '#888';
-        const label = _RATE_GAUGE_LABELS[svc] || svc;
-        const worker = d.worker || {};
-        const wStatus = worker.status || 'stopped';
-        const isRateLimited = d.rate_limited === true;
-
-        // Build or update the card content
-        let gaugeWrap = container.querySelector('.gauge-arc-wrap');
-        if (!gaugeWrap) {
-            // Full rebuild
-            container.innerHTML = `
-                <div class="gauge-card-header">
-                    <span class="gauge-card-dot" style="background:${accent}"></span>
-                    <span class="gauge-card-name">${label}</span>
-                    <span class="gauge-card-status" data-status="${wStatus}">${_workerStatusLabel(wStatus, worker)}</span>
-                </div>
-                <div class="gauge-arc-wrap">${_buildGaugeSVG(svc, value, max)}</div>
-                <div class="gauge-card-stats">
-                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${value.toFixed(0)}</span><span class="gauge-card-stat-label">calls/min</span></div>
-                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${worker.calls_1h || 0}</span><span class="gauge-card-stat-label">last hour</span></div>
-                    <div class="gauge-card-stat"><span class="gauge-card-stat-val">${(worker.calls_24h || 0).toLocaleString()}</span><span class="gauge-card-stat-label">24h</span></div>
-                </div>
-                ${svc === 'spotify' && worker.daily_budget ? _buildBudgetBar(worker.daily_budget) : ''}
-                ${isRateLimited ? _buildRateLimitBadge(d) : ''}
-            `;
-        } else {
-            // Fast update — only change values
-            _updateGauge(gaugeWrap, value, max, svc);
-
-            // Update status
-            const statusEl = container.querySelector('.gauge-card-status');
-            if (statusEl) {
-                statusEl.dataset.status = wStatus;
-                statusEl.textContent = _workerStatusLabel(wStatus, worker);
-            }
-
-            // Update stats
-            const statVals = container.querySelectorAll('.gauge-card-stat-val');
-            if (statVals[0]) statVals[0].textContent = value.toFixed(0);
-            if (statVals[1]) statVals[1].textContent = worker.calls_1h || 0;
-            if (statVals[2]) statVals[2].textContent = (worker.calls_24h || 0).toLocaleString();
-
-            // Budget bar (Spotify)
-            if (svc === 'spotify' && worker.daily_budget) {
-                let budgetEl = container.querySelector('.gauge-budget-bar');
-                if (!budgetEl) {
-                    const div = document.createElement('div');
-                    div.innerHTML = _buildBudgetBar(worker.daily_budget);
-                    const statsEl = container.querySelector('.gauge-card-stats');
-                    if (statsEl) statsEl.after(div.firstElementChild);
-                } else {
-                    const b = worker.daily_budget;
-                    const pctB = Math.min(100, Math.round((b.used / b.limit) * 100));
-                    const fill = budgetEl.querySelector('.gauge-budget-fill');
-                    if (fill) { fill.style.width = pctB + '%'; }
-                    const label = budgetEl.querySelector('.gauge-budget-label');
-                    if (label) label.textContent = `${b.used.toLocaleString()} / ${b.limit.toLocaleString()} daily`;
-                }
-            }
-
-            // Rate limit badge
-            let badge = container.querySelector('.gauge-rl-badge');
-            if (isRateLimited) {
-                if (!badge) {
-                    const div = document.createElement('div');
-                    div.innerHTML = _buildRateLimitBadge(d);
-                    container.appendChild(div.firstElementChild);
-                } else {
-                    const mins = Math.ceil((d.rl_remaining || 0) / 60);
-                    const timeEl = badge.querySelector('.gauge-rl-time');
-                    if (timeEl) timeEl.textContent = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
-                }
-            } else if (badge) {
-                badge.remove();
-            }
-        }
-
-        container.classList.toggle('danger', pct > 0.8 || isRateLimited);
-        container.classList.toggle('active', value > 0 || wStatus === 'running');
-        container.classList.toggle('rate-limited', isRateLimited);
-    }
-}
-
-function _workerStatusLabel(status, worker) {
-    if (status === 'not_configured') return 'Not configured';
-    if (status === 'paused') return worker.yield_reason === 'downloads' ? 'Yielding' : 'Paused';
-    if (status === 'idle') return 'Idle';
-    if (status === 'running') return 'Running';
-    return 'Stopped';
-}
-
-function _buildBudgetBar(budget) {
-    const pct = Math.min(100, Math.round((budget.used / budget.limit) * 100));
-    const cls = budget.exhausted ? 'exhausted' : pct > 80 ? 'high' : '';
-    return `<div class="gauge-budget-bar ${cls}">
-        <div class="gauge-budget-fill" style="width:${pct}%"></div>
-        <span class="gauge-budget-label">${budget.used.toLocaleString()} / ${budget.limit.toLocaleString()} daily</span>
-    </div>`;
-}
-
-function _buildRateLimitBadge(d) {
-    const mins = Math.ceil((d.rl_remaining || 0) / 60);
-    const text = mins > 60 ? `${Math.floor(mins / 60)}h ${mins % 60}m` : `${mins}m`;
-    return `<div class="gauge-rl-badge"><span class="gauge-rl-dot"></span>RATE LIMITED<span class="gauge-rl-time">${text}</span></div>`;
-}
-
-function _buildGaugeSVG(svc, value, max) {
-    const { size, cx, cy, r, stroke, startAngle, totalArc } = _G;
-    const label = _RATE_GAUGE_LABELS[svc] || svc;
-    const accent = _RATE_GAUGE_COLORS[svc] || '#888';
-    const pct = Math.min(value / max, 1);
-    const endAngle = startAngle + pct * totalArc;
-    const arcEnd = startAngle + totalArc;
-    const glowId = `glow-${svc}`;
-
-    // Endpoint dot position
-    const dot = pct > 0 ? _gPt(endAngle, r) : null;
-
-    // Gradient ID for the colored arc
-    const gradId = `grad-${svc}`;
-
-    const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
-
-    return `
-        <svg viewBox="0 0 ${size} ${size}" class="rate-gauge-svg">
-            <!-- Background track -->
-            <path d="${_gArc(startAngle, arcEnd)}" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="${stroke}" stroke-linecap="round"/>
-
-            <!-- Danger zone marker (last 20% of arc, subtle) -->
-            <path d="${_gArc(startAngle + totalArc * 0.8, arcEnd)}" fill="none" stroke="rgba(239,68,68,0.1)" stroke-width="${stroke}" stroke-linecap="round"/>
-
-            <!-- Active arc (CSS handles glow via drop-shadow) -->
-            ${pct > 0 ? `<path class="gauge-active-arc" data-color="${color}" d="${_gArc(startAngle, endAngle)}" fill="none" stroke="${color}" stroke-width="${stroke}" stroke-linecap="round" style="filter:drop-shadow(0 0 6px ${color}60)"/>` : ''}
-
-            <!-- Endpoint dot -->
-            ${dot ? `<circle class="gauge-dot" cx="${dot.x}" cy="${dot.y}" r="5" fill="${color}" style="filter:drop-shadow(0 0 4px ${color}80)"/><circle cx="${dot.x}" cy="${dot.y}" r="2.5" fill="#fff" opacity="0.9"/>` : ''}
-
-            <!-- Scale labels: 0 and max -->
-            <text x="${_gPt(startAngle, r + 16).x}" y="${_gPt(startAngle, r + 16).y}" text-anchor="middle" dominant-baseline="middle" fill="rgba(255,255,255,0.2)" font-size="9" font-family="-apple-system,sans-serif">0</text>
-            <text x="${_gPt(arcEnd, r + 16).x}" y="${_gPt(arcEnd, r + 16).y}" text-anchor="middle" dominant-baseline="middle" fill="rgba(255,255,255,0.2)" font-size="9" font-family="-apple-system,sans-serif">${max}</text>
-
-            <!-- Center content -->
-            <text class="gauge-value" x="${cx}" y="${cy - 12}" text-anchor="middle" dominant-baseline="middle">${Math.round(value)}</text>
-            <text class="gauge-unit" x="${cx}" y="${cy + 6}" text-anchor="middle">/min</text>
-
-            <!-- Service label -->
-            <text class="gauge-label" x="${cx}" y="${cy + 28}" text-anchor="middle">${label}</text>
-        </svg>
-    `;
-}
-
-function _updateGauge(container, value, max, svc) {
-    const { r, stroke, startAngle, totalArc } = _G;
-    const accent = _RATE_GAUGE_COLORS[svc] || '#888';
-    const pct = Math.min(value / max, 1);
-    const endAngle = startAngle + pct * totalArc;
-    const color = pct > 0.8 ? '#ef4444' : pct > 0.6 ? '#eab308' : accent;
-
-    // Update center value
-    const valText = container.querySelector('.gauge-value');
-    if (valText) valText.textContent = Math.round(value);
-
-    // Update active arc
-    const activeArc = container.querySelector('.gauge-active-arc');
-    if (pct > 0) {
-        const d = _gArc(startAngle, endAngle);
-        if (activeArc) {
-            activeArc.setAttribute('d', d);
-            activeArc.setAttribute('stroke', color);
-            activeArc.style.filter = `drop-shadow(0 0 6px ${color}60)`;
-        } else {
-            // Rebuild the whole gauge when transitioning from 0 to active
-            container.innerHTML = _buildGaugeSVG(svc, value, max);
-            return;
-        }
-    } else if (activeArc) {
-        activeArc.remove();
-        // Also remove dots
-        container.querySelectorAll('.gauge-dot').forEach(d => d.remove());
-        const innerDot = container.querySelector('.gauge-dot + circle');
-        if (innerDot) innerDot.remove();
-        return;
-    }
-
-    // Update endpoint dot
-    const gaugeDot = container.querySelector('.gauge-dot');
-    if (pct > 0 && gaugeDot) {
-        const dot = _gPt(endAngle, r);
-        gaugeDot.setAttribute('cx', dot.x);
-        gaugeDot.setAttribute('cy', dot.y);
-        gaugeDot.setAttribute('fill', color);
-        gaugeDot.style.filter = `drop-shadow(0 0 4px ${color}80)`;
-        const inner = gaugeDot.nextElementSibling;
-        if (inner && inner.tagName === 'circle') {
-            inner.setAttribute('cx', dot.x);
-            inner.setAttribute('cy', dot.y);
-        }
-    }
-}
-
-// ── Rate Monitor Detail Modal ──
-
-let _rateModalService = null;
-let _rateModalInterval = null;
-
-function _openRateModal(serviceKey) {
-    _rateModalService = serviceKey;
-    const label = _RATE_GAUGE_LABELS[serviceKey] || serviceKey;
-    const accent = _RATE_GAUGE_COLORS[serviceKey] || '#888';
-
-    let overlay = document.getElementById('rate-modal-overlay');
-    if (overlay) overlay.remove();
-
-    overlay = document.createElement('div');
-    overlay.id = 'rate-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) _closeRateModal(); };
-
-    const isSpotify = serviceKey === 'spotify';
-    const currentData = _rateMonitorState[serviceKey] || {};
-
-    overlay.innerHTML = `
-        <div class="rate-modal">
-            <div class="rate-modal-header">
-                <div class="rate-modal-header-info">
-                    <div class="rate-modal-header-dot" style="background:${accent}"></div>
-                    <div>
-                        <h3>${label}</h3>
-                        <span class="rate-modal-header-sub">${currentData.cpm || 0} calls/min — limit ${currentData.limit || '?'}/min</span>
-                    </div>
-                </div>
-                <button class="watch-all-close" onclick="_closeRateModal()">&times;</button>
-            </div>
-            <div class="rate-modal-body">
-                <div class="rate-modal-section-title">24-Hour Call History</div>
-                <div class="rate-modal-chart-wrap">
-                    <canvas id="rate-modal-chart" width="700" height="280"></canvas>
-                    <div class="rate-modal-chart-legend" id="rate-modal-chart-legend"></div>
-                </div>
-                ${isSpotify ? '<div class="rate-modal-section-title">Per-Endpoint Breakdown</div><div class="rate-modal-endpoints" id="rate-modal-endpoints"></div>' : ''}
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Fetch main history + per-endpoint histories for Spotify
-    const historyPromises = [
-        fetch(`/api/rate-monitor/history/${serviceKey}`).then(r => r.json())
-    ];
-    if (isSpotify) {
-        const activeEps = Object.keys(_rateMonitorState.spotify?.endpoints || {});
-        for (const ep of activeEps) {
-            historyPromises.push(
-                fetch(`/api/rate-monitor/history/spotify:${ep}`).then(r => r.json()).catch(() => null)
-            );
-        }
-    }
-    Promise.all(historyPromises).then(results => {
-        const main = results[0];
-        const epHistories = isSpotify ? results.slice(1).filter(Boolean) : [];
-        _renderRateChart(main.history || [], main.rate_limit || 60, accent, epHistories);
-    }).catch(() => { });
-
-    if (isSpotify) {
-        _updateSpotifyEndpoints();
-        _rateModalInterval = setInterval(_updateSpotifyEndpoints, 1000);
-    }
-}
-
-function _closeRateModal() {
-    const overlay = document.getElementById('rate-modal-overlay');
-    if (overlay) overlay.remove();
-    if (_rateModalInterval) { clearInterval(_rateModalInterval); _rateModalInterval = null; }
-    _rateModalService = null;
-}
-
-function _renderRateChart(history, rateLimit, accent, epHistories = []) {
-    const canvas = document.getElementById('rate-modal-chart');
-    if (!canvas) return;
-
-    // HiDPI support
-    const dpr = window.devicePixelRatio || 1;
-    const W = 700, H = 280;
-    canvas.width = W * dpr;
-    canvas.height = H * dpr;
-    canvas.style.width = W + 'px';
-    canvas.style.height = H + 'px';
-    const ctx = canvas.getContext('2d');
-    ctx.scale(dpr, dpr);
-
-    const pad = { top: 24, right: 24, bottom: 36, left: 50 };
-    const plotW = W - pad.left - pad.right;
-    const plotH = H - pad.top - pad.bottom;
-
-    ctx.clearRect(0, 0, W, H);
-
-    // Build data points
-    const now = Math.floor(Date.now() / 1000);
-    const start = now - 86400;
-    const points = [];
-
-    if (history.length > 0) {
-        const histMap = new Map(history.map(h => [h[0], h[1]]));
-        for (let t = start; t <= now; t += 300) {
-            const bucket = Math.floor(t / 60) * 60;
-            let sum = 0;
-            for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
-            points.push({ t, v: sum / 5 });
-        }
-    }
-
-    const maxVal = Math.max(rateLimit * 1.15, ...points.map(p => p.v), 1);
-
-    // Grid lines (horizontal)
-    ctx.strokeStyle = 'rgba(255,255,255,0.04)';
-    ctx.lineWidth = 1;
-    for (let i = 1; i <= 4; i++) {
-        const y = pad.top + plotH * (1 - i / 4);
-        ctx.beginPath();
-        ctx.moveTo(pad.left, y);
-        ctx.lineTo(pad.left + plotW, y);
-        ctx.stroke();
-    }
-
-    // Danger zone band
-    const dangerY = pad.top + plotH * (1 - rateLimit / maxVal);
-    const grad = ctx.createLinearGradient(0, pad.top, 0, dangerY);
-    grad.addColorStop(0, 'rgba(239, 68, 68, 0.08)');
-    grad.addColorStop(1, 'rgba(239, 68, 68, 0.02)');
-    ctx.fillStyle = grad;
-    ctx.fillRect(pad.left, pad.top, plotW, dangerY - pad.top);
-
-    // Rate limit line
-    ctx.strokeStyle = 'rgba(239, 68, 68, 0.5)';
-    ctx.setLineDash([8, 5]);
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    ctx.moveTo(pad.left, dangerY);
-    ctx.lineTo(pad.left + plotW, dangerY);
-    ctx.stroke();
-    ctx.setLineDash([]);
-
-    ctx.fillStyle = 'rgba(239, 68, 68, 0.6)';
-    ctx.font = '10px -apple-system, sans-serif';
-    ctx.textAlign = 'left';
-    ctx.fillText(`Rate limit: ${rateLimit}/min`, pad.left + 6, dangerY - 6);
-
-    // Draw area fill + line
-    if (points.length > 1) {
-        // Area gradient fill
-        const areaGrad = ctx.createLinearGradient(0, pad.top, 0, pad.top + plotH);
-        // Parse accent to rgba
-        areaGrad.addColorStop(0, accent + '30');
-        areaGrad.addColorStop(1, accent + '05');
-
-        ctx.beginPath();
-        points.forEach((p, i) => {
-            const x = pad.left + (i / (points.length - 1)) * plotW;
-            const y = pad.top + plotH * (1 - p.v / maxVal);
-            if (i === 0) ctx.moveTo(x, y);
-            else ctx.lineTo(x, y);
-        });
-        ctx.lineTo(pad.left + plotW, pad.top + plotH);
-        ctx.lineTo(pad.left, pad.top + plotH);
-        ctx.closePath();
-        ctx.fillStyle = areaGrad;
-        ctx.fill();
-
-        // Line
-        ctx.beginPath();
-        points.forEach((p, i) => {
-            const x = pad.left + (i / (points.length - 1)) * plotW;
-            const y = pad.top + plotH * (1 - p.v / maxVal);
-            if (i === 0) ctx.moveTo(x, y);
-            else ctx.lineTo(x, y);
-        });
-        ctx.strokeStyle = accent;
-        ctx.lineWidth = 2;
-        ctx.lineJoin = 'round';
-        ctx.stroke();
-
-        // Glow effect
-        ctx.shadowColor = accent;
-        ctx.shadowBlur = 8;
-        ctx.stroke();
-        ctx.shadowBlur = 0;
-    }
-
-    // Per-endpoint lines (Spotify breakdown)
-    const legendEl = document.getElementById('rate-modal-chart-legend');
-    if (epHistories.length > 0) {
-        const epColors = ['#1DB954', '#FF6B6B', '#4ECDC4', '#FFE66D', '#A78BFA', '#F97316', '#06B6D4', '#EC4899', '#F472B6', '#34D399'];
-        const legendItems = [];
-
-        epHistories.forEach((epData, idx) => {
-            if (!epData || !epData.history || epData.history.length === 0) return;
-            const epName = (epData.service || '').replace('spotify:', '').replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-            const color = epColors[idx % epColors.length];
-            legendItems.push({ name: epName, color });
-
-            const histMap = new Map(epData.history.map(h => [h[0], h[1]]));
-            const epPoints = [];
-            for (let t = start; t <= now; t += 300) {
-                const bucket = Math.floor(t / 60) * 60;
-                let sum = 0;
-                for (let m = bucket; m < bucket + 300; m += 60) sum += histMap.get(m) || 0;
-                epPoints.push({ t, v: sum / 5 });
-            }
-
-            if (epPoints.length > 1) {
-                ctx.beginPath();
-                epPoints.forEach((p, i) => {
-                    const x = pad.left + (i / (epPoints.length - 1)) * plotW;
-                    const y = pad.top + plotH * (1 - p.v / maxVal);
-                    if (i === 0) ctx.moveTo(x, y);
-                    else ctx.lineTo(x, y);
-                });
-                ctx.strokeStyle = color + 'BB';
-                ctx.lineWidth = 1.5;
-                ctx.lineJoin = 'round';
-                ctx.stroke();
-            }
-        });
-
-        // HTML legend below chart
-        if (legendEl && legendItems.length > 0) {
-            legendEl.innerHTML = legendItems.map(item =>
-                `<span class="rate-chart-legend-item"><span class="rate-chart-legend-dot" style="background:${item.color}"></span>${item.name}</span>`
-            ).join('');
-        }
-    } else if (legendEl) {
-        legendEl.innerHTML = '';
-    }
-
-    // X-axis labels
-    ctx.fillStyle = 'rgba(255,255,255,0.3)';
-    ctx.font = '10px -apple-system, sans-serif';
-    ctx.textAlign = 'center';
-    for (let i = 0; i <= 6; i++) {
-        const t = start + (86400 * i / 6);
-        const x = pad.left + (i / 6) * plotW;
-        const d = new Date(t * 1000);
-        const hr = d.getHours();
-        const label = hr === 0 ? '12am' : hr < 12 ? `${hr}am` : hr === 12 ? '12pm' : `${hr - 12}pm`;
-        ctx.fillText(label, x, H - 10);
-        // Subtle vertical grid
-        ctx.strokeStyle = 'rgba(255,255,255,0.03)';
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(x, pad.top);
-        ctx.lineTo(x, pad.top + plotH);
-        ctx.stroke();
-    }
-
-    // Y-axis labels
-    ctx.fillStyle = 'rgba(255,255,255,0.3)';
-    ctx.textAlign = 'right';
-    ctx.font = '10px -apple-system, sans-serif';
-    for (let i = 0; i <= 4; i++) {
-        const v = maxVal * i / 4;
-        const y = pad.top + plotH * (1 - i / 4);
-        ctx.fillText(Math.round(v), pad.left - 8, y + 4);
-    }
-
-    // Empty state
-    if (points.length === 0) {
-        ctx.fillStyle = 'rgba(255,255,255,0.15)';
-        ctx.font = '13px -apple-system, sans-serif';
-        ctx.textAlign = 'center';
-        ctx.fillText('No call history yet — data populates as API calls are made', W / 2, H / 2);
-    }
-}
-
-function _updateSpotifyEndpoints() {
-    const container = document.getElementById('rate-modal-endpoints');
-    if (!container) return;
-    const endpoints = _rateMonitorState.spotify?.endpoints || {};
-    const entries = Object.entries(endpoints).sort((a, b) => b[1] - a[1]);
-
-    if (entries.length === 0) {
-        container.innerHTML = '<div class="rate-modal-ep-empty">No active Spotify endpoints — start an enrichment worker or search to see activity</div>';
-        return;
-    }
-
-    const limit = _rateMonitorState.spotify?.limit || 171;
-    container.innerHTML = entries.map(([ep, cpm]) => {
-        const pct = Math.min(cpm / limit * 100, 100);
-        const name = ep.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-        const color = pct > 80 ? '#ef4444' : pct > 60 ? '#eab308' : '#1DB954';
-        return `<div class="rate-modal-ep">
-            <span class="rate-modal-ep-name">${name}</span>
-            <div class="rate-modal-ep-bar"><div class="rate-modal-ep-fill" style="width:${pct}%;background:${color}"></div></div>
-            <span class="rate-modal-ep-value">${Math.round(cpm)}/min</span>
-        </div>`;
-    }).join('');
-}
-
-async function fetchAndUpdateSystemStats() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/system/stats');
-        if (!response.ok) return;
-
-        const data = await response.json();
-
-        // Update all stat cards
-        updateStatCard('active-downloads-card', data.active_downloads, 'Currently downloading');
-        updateStatCard('finished-downloads-card', data.finished_downloads, 'Completed this session');
-        updateStatCard('download-speed-card', data.download_speed, 'Combined speed');
-        updateStatCard('active-syncs-card', data.active_syncs, 'Playlists syncing');
-        updateStatCard('uptime-card', data.uptime, 'Application runtime');
-        updateStatCard('memory-card', data.memory_usage, 'Current usage');
-
-    } catch (error) {
-        console.warn('Could not fetch system stats:', error);
-    }
-}
-
-function updateStatCard(cardId, value, subtitle) {
-    const card = document.getElementById(cardId);
-    if (card) {
-        const valueElement = card.querySelector('.stat-card-value');
-        const subtitleElement = card.querySelector('.stat-card-subtitle');
-
-        if (valueElement) {
-            valueElement.textContent = value;
-        }
-        if (subtitleElement) {
-            subtitleElement.textContent = subtitle;
-        }
-    }
-}
-
-async function fetchAndUpdateActivityFeed() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/activity/feed');
-        if (!response.ok) {
-            console.warn('Activity feed response not ok:', response.status, response.statusText);
-            return;
-        }
-
-        const data = await response.json();
-        console.log('Activity feed data received:', data);
-        updateActivityFeed(data.activities || []);
-
-    } catch (error) {
-        console.warn('Could not fetch activity feed:', error);
-    }
-}
-
-// Cache last feed signature to avoid unnecessary DOM rebuilds (prevents blink)
-let _lastActivityFeedSig = '';
-
-function updateActivityFeed(activities) {
-    const feedContainer = document.getElementById('dashboard-activity-feed');
-    if (!feedContainer) return;
-
-    if (activities.length === 0) {
-        if (_lastActivityFeedSig === 'empty') return;
-        _lastActivityFeedSig = 'empty';
-        feedContainer.innerHTML = `
-            <div class="activity-item">
-                <span class="activity-icon">📊</span>
-                <div class="activity-text-content">
-                    <p class="activity-title">System Started</p>
-                    <p class="activity-subtitle">Dashboard initialized successfully</p>
-                </div>
-                <p class="activity-time">Just now</p>
-            </div>
-        `;
-        return;
-    }
-
-    const items = activities.slice(0, 5);
-    // Build signature from titles+subtitles to detect actual changes
-    const sig = items.map(a => a.title + a.subtitle).join('|');
-    const feedChanged = sig !== _lastActivityFeedSig;
-    _lastActivityFeedSig = sig;
-
-    if (!feedChanged) {
-        // Just update timestamps without rebuilding DOM
-        const timeEls = feedContainer.querySelectorAll('.activity-time');
-        items.forEach((activity, i) => {
-            if (timeEls[i]) timeEls[i].textContent = timeAgo(activity.time);
-        });
-        return;
-    }
-
-    // Full rebuild only when feed content actually changed
-    feedContainer.innerHTML = '';
-    items.forEach((activity, index) => {
-        const activityElement = document.createElement('div');
-        activityElement.className = 'activity-item';
-        activityElement.innerHTML = `
-            <span class="activity-icon">${escapeHtml(activity.icon)}</span>
-            <div class="activity-text-content">
-                <p class="activity-title">${escapeHtml(activity.title)}</p>
-                <p class="activity-subtitle">${escapeHtml(activity.subtitle)}</p>
-            </div>
-            <p class="activity-time">${timeAgo(activity.time)}</p>
-        `;
-        feedContainer.appendChild(activityElement);
-
-        if (index < items.length - 1) {
-            const separator = document.createElement('div');
-            separator.className = 'activity-separator';
-            feedContainer.appendChild(separator);
-        }
-    });
-}
-
-async function checkForActivityToasts() {
-    if (socketConnected) return; // WebSocket handles this (instant push)
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/activity/toasts');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        const toasts = data.toasts || [];
-
-        toasts.forEach(activity => {
-            // Convert activity to toast type based on icon/title
-            let toastType = 'info';
-            if (activity.icon === '✅' || activity.title.includes('Complete')) {
-                toastType = 'success';
-            } else if (activity.icon === '❌' || activity.title.includes('Failed') || activity.title.includes('Error')) {
-                toastType = 'error';
-            } else if (activity.icon === '🚫' || activity.title.includes('Cancelled')) {
-                toastType = 'warning';
-            }
-
-            // Show toast with activity info
-            showToast(`${activity.title}: ${activity.subtitle}`, toastType);
-        });
-
-    } catch (error) {
-        // Silently fail for toast checking to avoid spam
-    }
-}
-
-// --- Watchlist Functions ---
-
-/**
- * Toggle an artist's watchlist status
- */
-async function toggleWatchlist(event, artistId, artistName) {
-    // Prevent event bubbling to parent card
-    event.stopPropagation();
-
-    const button = event.currentTarget;
-    const icon = button.querySelector('.watchlist-icon');
-    const text = button.querySelector('.watchlist-text');
-
-    // Show loading state
-    const originalText = text.textContent;
-    text.textContent = 'Loading...';
-    button.disabled = true;
-
-    try {
-        // Check current status
-        const checkResponse = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const checkData = await checkResponse.json();
-        if (!checkData.success) {
-            throw new Error(checkData.error || 'Failed to check watchlist status');
-        }
-
-        const isWatching = checkData.is_watching;
-
-        // Toggle watchlist status
-        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
-        const payload = isWatching ?
-            { artist_id: artistId } :
-            { artist_id: artistId, artist_name: artistName };
-
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to update watchlist');
-        }
-
-        // Update button appearance
-        const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
-        if (isWatching) {
-            // Was watching, now removed
-            icon.textContent = '👁️';
-            text.textContent = 'Add to Watchlist';
-            button.classList.remove('watching');
-            if (gearBtn) gearBtn.classList.add('hidden');
-            console.log(`❌ Removed ${artistName} from watchlist`);
-        } else {
-            // Was not watching, now added
-            icon.textContent = '👁️';
-            text.textContent = 'Watching...';
-            button.classList.add('watching');
-            if (gearBtn) gearBtn.classList.remove('hidden');
-            console.log(`✅ Added ${artistName} to watchlist`);
-        }
-
-        // Update dashboard watchlist count
-        updateWatchlistButtonCount();
-
-    } catch (error) {
-        console.error('Error toggling watchlist:', error);
-        text.textContent = originalText;
-
-        // Show error feedback
-        const originalBackground = button.style.background;
-        button.style.background = 'rgba(255, 59, 48, 0.3)';
-        setTimeout(() => {
-            button.style.background = originalBackground;
-        }, 2000);
-    } finally {
-        button.disabled = false;
-    }
-}
-
-/**
- * Update the watchlist button count on dashboard
- */
-async function updateWatchlistButtonCount() {
-    if (document.hidden) return; // Skip polling when tab is not visible
-    if (socketConnected) return; // WebSocket is pushing updates — skip HTTP poll
-    try {
-        const response = await fetch('/api/watchlist/count');
-        const data = await response.json();
-
-        if (data.success) {
-            _updateHeroBtnCount('watchlist-button', 'watchlist-badge', data.count);
-            // Update sidebar nav badge
-            const wlNavBadge = document.getElementById('watchlist-nav-badge');
-            if (wlNavBadge) {
-                wlNavBadge.textContent = data.count;
-                wlNavBadge.classList.toggle('hidden', data.count === 0);
-            }
-            const watchlistButton = document.getElementById('watchlist-button');
-            if (watchlistButton) {
-                const countdownText = data.next_run_in_seconds ? formatCountdownTime(data.next_run_in_seconds) : '';
-                if (countdownText) {
-                    watchlistButton.title = `Next auto-scan in ${countdownText}`;
-                }
-            }
-        }
-    } catch (error) {
-        console.error('Error updating watchlist count:', error);
-    }
-}
-
-/**
- * Check and update watchlist status for all visible artist cards
- */
-async function updateArtistCardWatchlistStatus() {
-    const artistCards = document.querySelectorAll('.artist-card');
-    const artistIds = [];
-    for (const card of artistCards) {
-        const artistId = card.dataset.artistId;
-        if (artistId) artistIds.push(artistId);
-    }
-    if (!artistIds.length) return;
-
-    try {
-        const response = await fetch('/api/watchlist/check-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_ids: artistIds })
-        });
-
-        const data = await response.json();
-        if (data.success && data.results) {
-            for (const card of artistCards) {
-                const artistId = card.dataset.artistId;
-                if (!artistId) continue;
-
-                const button = card.querySelector('.watchlist-toggle-btn');
-                if (!button) continue;
-                const icon = button.querySelector('.watchlist-icon');
-                const text = button.querySelector('.watchlist-text');
-
-                const gearBtn = button.parentElement?.querySelector('.watchlist-settings-btn');
-                if (data.results[artistId]) {
-                    if (icon) icon.textContent = '👁️';
-                    if (text) text.textContent = 'Watching...';
-                    button.classList.add('watching');
-                    if (gearBtn) gearBtn.classList.remove('hidden');
-                } else {
-                    if (icon) icon.textContent = '👁️';
-                    if (text) text.textContent = 'Add to Watchlist';
-                    button.classList.remove('watching');
-                    if (gearBtn) gearBtn.classList.add('hidden');
-                }
-            }
-        }
-    } catch (error) {
-        console.error('Error batch checking watchlist status:', error);
-    }
-}
-
-/**
- * Initialize/refresh the watchlist sidebar page
- */
-async function initializeWatchlistPage() {
-    try {
-        const emptyEl = document.getElementById('watchlist-page-empty');
-        const gridEl = document.getElementById('watchlist-artists-list');
-        const countEl = document.getElementById('watchlist-page-count');
-        const overrideBanner = document.getElementById('watchlist-page-override-banner');
-
-        // Fetch count, artists, scan status, global config in parallel
-        const [countRes, artistsRes, statusRes, globalRes] = await Promise.all([
-            fetch('/api/watchlist/count').then(r => r.json()),
-            fetch('/api/watchlist/artists').then(r => r.json()),
-            fetch('/api/watchlist/scan/status').then(r => r.json()),
-            fetch('/api/watchlist/global-config').then(r => r.json()).catch(() => ({ success: false })),
-        ]);
-
-        const count = countRes.success ? countRes.count : 0;
-        const artists = artistsRes.success ? artistsRes.artists : [];
-        const scanStatus = statusRes.success ? statusRes.status : 'idle';
-        const globalOverrideActive = globalRes.success && globalRes.config && globalRes.config.global_override_enabled;
-
-        // Update count
-        if (countEl) countEl.textContent = `${count} artist${count !== 1 ? 's' : ''}`;
-
-        // Update nav badge
-        const navBadge = document.getElementById('watchlist-nav-badge');
-        if (navBadge) {
-            navBadge.textContent = count;
-            navBadge.classList.toggle('hidden', count === 0);
-        }
-
-        // Empty state
-        if (count === 0) {
-            if (emptyEl) emptyEl.style.display = '';
-            if (gridEl) gridEl.style.display = 'none';
-            watchlistPageState.isInitialized = true;
-            return;
-        }
-        if (emptyEl) emptyEl.style.display = 'none';
-        if (gridEl) gridEl.style.display = '';
-
-        // Store artists for sorting
-        watchlistPageState.artists = artists;
-
-        // Last scan summary strip
-        const scanStrip = document.getElementById('watchlist-last-scan-strip');
-        const scanText = document.getElementById('watchlist-last-scan-text');
-        if (scanStrip && scanText && statusRes.completed_at && statusRes.summary) {
-            const completedDate = new Date(statusRes.completed_at);
-            const ago = _formatTimeAgo(completedDate);
-            const found = statusRes.summary.new_tracks_found || 0;
-            const added = statusRes.summary.tracks_added_to_wishlist || 0;
-            scanText.textContent = `Last scan: ${ago} — ${found} new track${found !== 1 ? 's' : ''} found, ${added} added to wishlist`;
-            scanStrip.style.display = '';
-        } else if (scanStrip) {
-            scanStrip.style.display = 'none';
-        }
-
-        // Global override banner
-        if (overrideBanner) overrideBanner.style.display = globalOverrideActive ? '' : 'none';
-        const settingsBtn = document.getElementById('watchlist-page-settings-btn');
-        if (settingsBtn) {
-            settingsBtn.classList.toggle('watchlist-global-settings-active', globalOverrideActive);
-            settingsBtn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> ${globalOverrideActive ? 'Global Override ON' : 'Global Settings'}`;
-        }
-
-        // Render artist cards
-        if (gridEl) {
-            gridEl.innerHTML = artists.map(artist => {
-                const pills = [];
-                if (artist.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
-                if (artist.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
-                if (artist.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
-                if (artist.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
-                if (artist.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
-                if (artist.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
-                if (artist.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
-                const sourceBadges = [];
-                if (artist.spotify_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-spotify">Spotify</span>');
-                if (artist.itunes_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-itunes">iTunes</span>');
-                if (artist.deezer_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-deezer">Deezer</span>');
-                if (artist.discogs_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-discogs">Discogs</span>');
-                const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id;
-                return `
-                    <div class="watchlist-artist-card"
-                         data-artist-name="${artist.artist_name.toLowerCase().replace(/"/g, '&quot;')}"
-                         data-artist-id="${artistPrimaryId}"
-                         data-last-scan="${artist.last_scan_timestamp || ''}"
-                         data-added="${artist.date_added || ''}">
-                        <label class="watchlist-card-checkbox" onclick="event.stopPropagation();">
-                            <input type="checkbox" class="watchlist-select-cb"
-                                   data-artist-id="${artistPrimaryId}"
-                                   data-artist-name="${escapeHtml(artist.artist_name)}"
-                                   onchange="updateWatchlistBatchBar()">
-                            <span class="watchlist-checkbox-custom"></span>
-                        </label>
-                        <button class="watchlist-card-gear"
-                                data-artist-id="${artistPrimaryId}"
-                                data-artist-name="${escapeHtml(artist.artist_name)}"
-                                onclick="event.stopPropagation();"
-                                title="Artist settings">
-                            <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87a.48.48 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"/></svg>
-                        </button>
-                        <div class="watchlist-card-image">
-                            ${artist.image_url ? `<img src="${artist.image_url}" alt="${escapeHtml(artist.artist_name)}" onerror="if(!this.dataset.retried){this.dataset.retried='1';this.src=this.src;}else{this.parentElement.innerHTML='<div class=\\'watchlist-card-image-fallback\\'>🎤</div>';}">` : '<div class="watchlist-card-image-fallback">🎤</div>'}
-                        </div>
-                        <div class="watchlist-card-info">
-                            <span class="watchlist-card-name">${escapeHtml(artist.artist_name)}</span>
-                            <span class="watchlist-card-meta">${formatRelativeScanTime(artist.last_scan_timestamp)}</span>
-                        </div>
-                        ${sourceBadges.length > 0 ? `<div class="watchlist-card-sources">${sourceBadges.join('')}</div>` : ''}
-                        ${pills.length > 0 ? `<div class="watchlist-card-pills">${pills.join('')}</div>` : ''}
-                    </div>
-                `;
-            }).join('');
-
-            // Wire up gear buttons
-            gridEl.querySelectorAll('.watchlist-card-gear').forEach(button => {
-                button.addEventListener('click', () => {
-                    openWatchlistArtistConfigModal(button.getAttribute('data-artist-id'), button.getAttribute('data-artist-name'));
-                });
-            });
-
-            // Wire up artist card clicks
-            gridEl.querySelectorAll('.watchlist-artist-card').forEach(item => {
-                item.addEventListener('click', (e) => {
-                    if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) return;
-                    const artistId = item.getAttribute('data-artist-id');
-                    const artistName = item.querySelector('.watchlist-card-name').textContent;
-                    openWatchlistArtistDetailView(artistId, artistName);
-                });
-            });
-        }
-
-        // Scan status
-        const scanStatusEl = document.getElementById('watchlist-scan-status');
-        const liveActivityEl = document.getElementById('watchlist-live-activity');
-        const scanBtn = document.getElementById('scan-watchlist-btn');
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-
-        if (scanStatus === 'scanning') {
-            if (scanStatusEl) scanStatusEl.style.display = '';
-            if (liveActivityEl) liveActivityEl.style.display = 'flex';
-            if (scanBtn) { scanBtn.disabled = true; scanBtn.classList.add('btn-processing'); scanBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> Scanning...'; }
-            if (cancelBtn) cancelBtn.style.display = '';
-            pollWatchlistScanStatus();
-        } else {
-            if (scanStatusEl && statusRes.summary) {
-                scanStatusEl.style.display = '';
-                const summaryEl = document.getElementById('watchlist-page-scan-summary');
-                if (summaryEl) {
-                    summaryEl.style.display = '';
-                    summaryEl.innerHTML = `<span class="sync-stat">Artists: ${statusRes.summary.total_artists || 0}</span><span class="sync-separator"> • </span><span class="sync-stat">New tracks: ${statusRes.summary.new_tracks_found || 0}</span><span class="sync-separator"> • </span><span class="sync-stat">Added to wishlist: ${statusRes.summary.tracks_added_to_wishlist || 0}</span>`;
-                }
-            }
-        }
-
-        // Start countdown timer
-        const nextRunSeconds = countRes.next_run_in_seconds || 0;
-        startWatchlistCountdownTimer(nextRunSeconds);
-
-        watchlistPageState.isInitialized = true;
-
-    } catch (error) {
-        console.error('Error initializing watchlist page:', error);
-        showToast('Failed to load watchlist', 'error');
-    }
-}
-
-/**
- * Initialize/refresh the wishlist sidebar page
- */
-async function initializeWishlistPage() {
-    try {
-        const emptyEl = document.getElementById('wishlist-page-empty');
-        const nebulaEl = document.getElementById('wishlist-nebula');
-        const countEl = document.getElementById('wishlist-page-count');
-        const tracksSection = document.getElementById('wishlist-category-tracks');
-        const statsStrip = document.getElementById('wishlist-stats-strip');
-
-        const [statsRes, cycleRes, albumRes, singleRes, watchlistRes] = await Promise.all([
-            fetch('/api/wishlist/stats').then(r => r.json()),
-            fetch('/api/wishlist/cycle').then(r => r.json()),
-            fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
-            fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
-            fetch('/api/watchlist/artists').then(r => r.json()).catch(() => ({ success: false })),
-        ]);
-
-        // Build artist name → image URL map from watchlist
-        const _artistImageMap = new Map();
-        if (watchlistRes.success && watchlistRes.artists) {
-            for (const wa of watchlistRes.artists) {
-                if (wa.artist_name && wa.image_url) _artistImageMap.set(wa.artist_name.toLowerCase(), wa.image_url);
-            }
-        }
-
-        const { singles = 0, albums = 0, total = 0 } = statsRes;
-        const currentCycle = cycleRes.cycle || 'albums';
-
-        if (countEl) countEl.textContent = `${total} track${total !== 1 ? 's' : ''}`;
-        const navBadge = document.getElementById('wishlist-nav-badge');
-        if (navBadge) { navBadge.textContent = total; navBadge.classList.toggle('hidden', total === 0); }
-
-        const statAlbums = document.getElementById('wishlist-stat-albums');
-        const statSingles = document.getElementById('wishlist-stat-singles');
-        const statCycle = document.getElementById('wishlist-stat-cycle');
-        if (statAlbums) statAlbums.textContent = albums;
-        if (statSingles) statSingles.textContent = singles;
-        if (statCycle) statCycle.textContent = currentCycle === 'albums' ? 'Albums/EPs' : 'Singles';
-
-        if (total === 0) {
-            if (emptyEl) emptyEl.style.display = '';
-            if (nebulaEl) nebulaEl.style.display = 'none';
-            if (tracksSection) tracksSection.style.display = 'none';
-            if (statsStrip) statsStrip.style.display = 'none';
-            wishlistPageState.isInitialized = true;
-            return;
-        }
-        if (emptyEl) emptyEl.style.display = 'none';
-        if (nebulaEl) nebulaEl.style.display = '';
-        if (tracksSection) tracksSection.style.display = 'none';
-        if (statsStrip) statsStrip.style.display = '';
-
-        _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], _artistImageMap, currentCycle);
-        startWishlistCountdownTimer(currentCycle, statsRes.next_run_in_seconds || 0);
-
-        // Live processing: check if wishlist download is active and start polling
-        _startNebulaLivePolling(currentCycle, _artistImageMap);
-
-        wishlistPageState.isInitialized = true;
-
-    } catch (error) {
-        console.error('Error initializing wishlist page:', error);
-        showToast('Failed to load wishlist', 'error');
-    }
-}
-
-/* ═══════════════════════════════════════════════════════════════════
-   WISHLIST NEBULA — Artist orbs with album/single satellites
-   ═══════════════════════════════════════════════════════════════════ */
-
-function _renderWishlistNebula(albumTracks, singleTracks, artistImageMap, currentCycle) {
-    const field = document.getElementById('wl-nebula-field');
-    if (!field) return;
-    artistImageMap = artistImageMap || new Map();
-
-    const artistMap = new Map();
-    function _parse(track, type) {
-        let sd = track.spotify_data;
-        if (typeof sd === 'string') { try { sd = JSON.parse(sd); } catch (e) { return null; } }
-        if (!sd) return null;
-        const raw = sd.album;
-        const albumName = (typeof raw === 'string' ? raw : raw?.name) || 'Unknown';
-        const albumImage = (typeof raw === 'object' && raw?.images?.[0]?.url) || '';
-        let artist = 'Unknown Artist';
-        if (sd.artists?.[0]?.name) artist = sd.artists[0].name;
-        else if (typeof sd.artists?.[0] === 'string') artist = sd.artists[0];
-        return { track: sd.name || 'Unknown', artist, album: albumName, image: albumImage, type, id: track.spotify_track_id || track.id || '' };
-    }
-
-    for (const t of albumTracks) { const p = _parse(t, 'album'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); const a = artistMap.get(p.artist); if (!a.albums.has(p.album)) a.albums.set(p.album, { image: p.image, tracks: [] }); a.albums.get(p.album).tracks.push(p); } }
-    for (const t of singleTracks) { const p = _parse(t, 'single'); if (p) { if (!artistMap.has(p.artist)) artistMap.set(p.artist, { albums: new Map(), singles: [] }); artistMap.get(p.artist).singles.push(p); } }
-
-    if (artistMap.size === 0) { field.innerHTML = '<div class="wl-nebula-empty">Your wishlist is empty</div>'; return; }
-
-    const sorted = [...artistMap.entries()].sort((a, b) => {
-        const ac = [...a[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + a[1].singles.length;
-        const bc = [...b[1].albums.values()].reduce((s, al) => s + al.tracks.length, 0) + b[1].singles.length;
-        return bc - ac;
-    });
-
-    function _hue(n) { let h = 0; for (let i = 0; i < n.length; i++) h = n.charCodeAt(i) + ((h << 5) - h); return Math.abs(h) % 360; }
-
-    let html = '';
-    sorted.forEach(([name, data], idx) => {
-        const total = [...data.albums.values()].reduce((s, a) => s + a.tracks.length, 0) + data.singles.length;
-        const hasAlbums = data.albums.size > 0;
-        const hue = _hue(name);
-        const sz = total >= 10 ? 'orb-lg' : total >= 4 ? 'orb-md' : 'orb-sm';
-
-        // Enhancement 1: prefer watchlist artist photo over album cover
-        let img = artistImageMap.get(name.toLowerCase()) || '';
-        if (!img) { for (const [, ad] of data.albums) { if (ad.image) { img = ad.image; break; } } }
-        if (!img && data.singles.length) img = data.singles[0].image || '';
-
-        // Enhancement 3: pulse if this artist has albums and current cycle is albums
-        const pulseClass = (hasAlbums && currentCycle === 'albums') ? ' orb-pulse' : '';
-
-        // Enhancement 7: staggered entry animation
-        const delay = Math.min(idx * 60, 800);
-
-        html += `<div class="wl-orb-group" data-artist="${escapeHtml(name)}" style="animation-delay:${delay}ms">`;
-
-        // Enhancement 2: hover tooltip
-        html += `<div class="wl-orb-tooltip">${escapeHtml(name)}<br><span>${total} track${total !== 1 ? 's' : ''}</span></div>`;
-
-        html += `<div class="wl-orb ${sz}${pulseClass}" style="--orb-hue:${hue}" onclick="_toggleOrbExpand(this)">`;
-        html += `<div class="wl-orb-glow"></div>`;
-        html += img ? `<img class="wl-orb-img" src="${img}" alt="">` : `<div class="wl-orb-initials">${escapeHtml(name.substring(0, 2).toUpperCase())}</div>`;
-        html += `<div class="wl-orb-ring"></div>`;
-
-        // Enhancement 5: album art ring (show up to 6 album covers around the orb)
-        const ringCovers = [];
-        for (const [, ad] of data.albums) { if (ad.image && ringCovers.length < 6) ringCovers.push(ad.image); }
-        for (const s of data.singles) { if (s.image && ringCovers.length < 6) ringCovers.push(s.image); }
-        if (ringCovers.length >= 3) {
-            html += `<div class="wl-orb-art-ring">`;
-            ringCovers.forEach((url, i) => {
-                const angle = (360 / ringCovers.length) * i;
-                html += `<img class="wl-art-ring-item" src="${url}" style="--ring-angle:${angle}deg" alt="">`;
-            });
-            html += `</div>`;
-        }
-
-        html += `</div>`; // /orb
-
-        // Enhancement 8: clickable artist name → navigate to artist detail
-        html += `<div class="wl-orb-label" onclick="event.stopPropagation(); _navigateToArtistFromWishlist('${escapeHtml(name)}')" title="View artist">${escapeHtml(name)}</div>`;
-        html += `<div class="wl-orb-meta">${total} track${total !== 1 ? 's' : ''}</div>`;
-
-        // Expanded content
-        html += `<div class="wl-orb-expanded">`;
-        if (data.albums.size > 0) {
-            html += `<div class="wl-album-fan">`;
-            for (const [an, ad] of data.albums) {
-                const tileId = 'wl-tile-' + an.replace(/\W/g, '_') + '_' + idx;
-                html += `<div class="wl-album-tile" data-album="${escapeHtml(an)}" onclick="_toggleAlbumTile(this)">`;
-                html += `<div class="wl-album-tile-art">${ad.image ? `<img src="${ad.image}" alt="">` : `<div class="wl-album-tile-fallback">&#128191;</div>`}</div>`;
-                html += `<div class="wl-album-tile-info"><div class="wl-album-tile-name">${escapeHtml(an)}</div><div class="wl-album-tile-count">${ad.tracks.length} track${ad.tracks.length !== 1 ? 's' : ''}</div></div>`;
-                html += `<span class="wl-album-tile-badge">${ad.tracks.length}</span>`;
-                html += `<button class="wl-album-tile-remove" onclick="event.stopPropagation();_removeWishlistAlbum('${escapeHtml(an)}')" title="Remove album">&#10005;</button>`;
-                // Track list (hidden until tile clicked)
-                html += `<div class="wl-tile-tracks">`;
-                for (const tr of ad.tracks) {
-                    html += `<div class="wl-tile-track">`;
-                    html += `<span class="wl-tile-track-name">${escapeHtml(tr.track)}</span>`;
-                    html += `<button class="wl-tile-track-remove" onclick="event.stopPropagation();_removeWishlistTrack('${escapeHtml(tr.id)}')" title="Remove track">&#10005;</button>`;
-                    html += `</div>`;
-                }
-                html += `</div>`;
-                html += `</div>`;
-            }
-            html += `</div>`;
-        }
-        if (data.singles.length > 0) {
-            html += `<div class="wl-singles-orbit">`;
-            for (const s of data.singles) {
-                html += `<div class="wl-single-moon" data-track-id="${escapeHtml(s.id)}">`;
-                html += s.image ? `<img src="${s.image}" alt="">` : `<span class="wl-moon-fallback">&#11088;</span>`;
-                html += `<div class="wl-moon-label">${escapeHtml(s.track)}</div>`;
-                html += `<button class="wl-moon-remove-btn" onclick="event.stopPropagation();_removeWishlistTrack('${escapeHtml(s.id)}')" title="Remove">&#10005;</button>`;
-                html += `</div>`;
-            }
-            html += `</div>`;
-        }
-        html += `</div></div>`; // /expanded, /group
-    });
-
-    field.innerHTML = html;
-}
-
-// Enhancement 8: navigate to artist detail from wishlist
-function _navigateToArtistFromWishlist(artistName) {
-    // Try to find the artist in the library DB by searching
-    navigateToPage('artists');
-    setTimeout(() => {
-        const searchInput = document.querySelector('.artist-search-input, #artist-search');
-        if (searchInput) { searchInput.value = artistName; searchInput.dispatchEvent(new Event('input')); }
-    }, 300);
-}
-
-function _toggleAlbumTile(tileEl) {
-    const wasExpanded = tileEl.classList.contains('tile-expanded');
-    // Collapse all tiles in this group
-    tileEl.closest('.wl-album-fan')?.querySelectorAll('.wl-album-tile.tile-expanded').forEach(t => t.classList.remove('tile-expanded'));
-    if (!wasExpanded) tileEl.classList.add('tile-expanded');
-}
-
-function _toggleOrbExpand(el) {
-    const g = el.closest('.wl-orb-group');
-    if (!g) return;
-    const was = g.classList.contains('expanded');
-    document.querySelectorAll('.wl-orb-group.expanded').forEach(o => o.classList.remove('expanded'));
-    if (!was) g.classList.add('expanded');
-}
-
-async function _removeWishlistAlbum(albumName) {
-    if (!await showConfirmDialog({ title: 'Remove Album', message: `Remove all tracks from "${albumName}"?`, confirmText: 'Remove', destructive: true })) return;
-    try {
-        const res = await fetch('/api/wishlist/remove-album', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ album_name: albumName }) });
-        const data = await res.json();
-        if (data.success) { showToast(`Removed "${albumName}"`, 'success'); wishlistPageState.isInitialized = false; await initializeWishlistPage(); await updateWishlistCount(); }
-        else showToast(data.error || 'Failed', 'error');
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-async function _removeWishlistTrack(trackId) {
-    try {
-        const res = await fetch('/api/wishlist/remove-track', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ spotify_track_id: trackId }) });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Removed', 'success');
-            await updateWishlistCount();
-            // Re-render nebula to reflect removal
-            wishlistPageState.isInitialized = false;
-            await initializeWishlistPage();
-        }
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-function _filterNebula() {
-    const q = (document.getElementById('wl-nebula-search')?.value || '').toLowerCase().trim();
-    document.querySelectorAll('.wl-orb-group').forEach(g => {
-        const a = (g.dataset.artist || '').toLowerCase();
-        const albums = [...g.querySelectorAll('.wl-satellite')].map(s => (s.dataset.album || '').toLowerCase());
-        const match = !q || a.includes(q) || albums.some(al => al.includes(q));
-        g.style.display = match ? '' : 'none';
-        if (!match) g.classList.remove('expanded');
-    });
-}
-
-async function _nebulaDownload() {
-    // Check if wishlist is already processing
-    try {
-        const statsResp = await fetch('/api/wishlist/stats');
-        if (statsResp.ok) {
-            const stats = await statsResp.json();
-            if (stats.is_auto_processing) {
-                // Navigate to downloads page so the user can see progress
-                navigateToPage('active-downloads');
-                showToast('Wishlist is currently being auto-processed', 'info');
-                return;
-            }
-        }
-        const procResp = await fetch('/api/active-processes');
-        if (procResp.ok) {
-            const procData = await procResp.json();
-            const wishlistBatch = (procData.active_processes || []).find(p => p.playlist_id === 'wishlist');
-            if (wishlistBatch) {
-                // Show the existing download modal
-                WishlistModalState.clearUserClosed();
-                const clientProcess = activeDownloadProcesses['wishlist'];
-                if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
-                    clientProcess.modalElement.style.display = 'flex';
-                    WishlistModalState.setVisible();
-                } else {
-                    await rehydrateModal(wishlistBatch, true);
-                }
-                return;
-            }
-        }
-    } catch (e) {}
-
-    // No active process — show category choice
-    const choice = await _showNebulaDownloadChoice();
-    if (choice) await openDownloadMissingWishlistModal(choice);
-}
-
-function _showNebulaDownloadChoice() {
-    return new Promise((resolve) => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.display = 'flex';
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-
-        const albumCount = document.getElementById('wishlist-stat-albums')?.textContent || '0';
-        const singleCount = document.getElementById('wishlist-stat-singles')?.textContent || '0';
-
-        overlay.innerHTML = `
-            <div class="delete-group-dialog">
-                <div class="delete-group-icon">
-                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="1.8"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-                </div>
-                <h3 class="delete-group-title">Download Wishlist</h3>
-                <p class="delete-group-message">Choose which category to process</p>
-                <div class="delete-group-actions">
-                    <button class="delete-group-btn delete-group-keep" id="ndc-albums">
-                        &#128191; Albums &amp; EPs <span style="opacity:0.5;margin-left:6px">${albumCount} tracks</span>
-                    </button>
-                    <button class="delete-group-btn delete-group-keep" id="ndc-singles" style="border-color: rgba(var(--accent-rgb), 0.15); background: rgba(var(--accent-rgb), 0.06);">
-                        &#11088; Singles <span style="opacity:0.5;margin-left:6px">${singleCount} tracks</span>
-                    </button>
-                    <button class="delete-group-btn delete-group-cancel" id="ndc-cancel">Cancel</button>
-                </div>
-            </div>
-        `;
-
-        overlay.querySelector('#ndc-albums').onclick = () => { overlay.remove(); resolve('albums'); };
-        overlay.querySelector('#ndc-singles').onclick = () => { overlay.remove(); resolve('singles'); };
-        overlay.querySelector('#ndc-cancel').onclick = () => { overlay.remove(); resolve(null); };
-
-        document.addEventListener('keydown', function esc(e) {
-            if (e.key === 'Escape') { overlay.remove(); resolve(null); document.removeEventListener('keydown', esc); }
-        });
-
-        document.body.appendChild(overlay);
-    });
-}
-
-function _nebulaBack() {
-    const t = document.getElementById('wishlist-category-tracks');
-    const n = document.getElementById('wishlist-nebula');
-    if (t) t.style.display = 'none';
-    if (n) n.style.display = '';
-    window.selectedWishlistCategory = null;
-    wishlistPageState.isInitialized = false;
-    initializeWishlistPage();
-}
-
-// ── Live processing state for nebula ──
-let _nebulaLivePollInterval = null;
-let _nebulaLastTotal = null;
-
-function _startNebulaLivePolling(currentCycle, artistImageMap) {
-    _stopNebulaLivePolling();
-    _nebulaLastTotal = null;
-
-    _nebulaLivePollInterval = setInterval(async () => {
-        if (currentPage !== 'wishlist') { _stopNebulaLivePolling(); return; }
-
-        try {
-            // Use wishlist stats which has is_auto_processing flag
-            const statsResp = await fetch('/api/wishlist/stats');
-            if (!statsResp.ok) return;
-            const stats = await statsResp.json();
-            const isProcessing = stats.is_auto_processing || false;
-            const newTotal = stats.total || 0;
-
-            // Also check for manual wishlist download batches
-            let hasBatch = false;
-            try {
-                const procResp = await fetch('/api/active-processes');
-                if (procResp.ok) {
-                    const procData = await procResp.json();
-                    hasBatch = (procData.active_processes || []).some(p => p.playlist_id === 'wishlist');
-                }
-            } catch (e) {}
-
-            const active = isProcessing || hasBatch;
-            const nebulaField = document.getElementById('wl-nebula-field');
-            if (!nebulaField) return;
-
-            if (active) {
-                nebulaField.classList.add('nebula-processing');
-                document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
-
-                // Tracks completed — re-render
-                if (_nebulaLastTotal !== null && newTotal < _nebulaLastTotal) {
-                    const [albumRes, singleRes] = await Promise.all([
-                        fetch('/api/wishlist/tracks?category=albums').then(r => r.json()),
-                        fetch('/api/wishlist/tracks?category=singles').then(r => r.json()),
-                    ]);
-                    _renderWishlistNebula(albumRes.tracks || [], singleRes.tracks || [], artistImageMap, currentCycle);
-
-                    const countEl = document.getElementById('wishlist-page-count');
-                    if (countEl) countEl.textContent = `${newTotal} track${newTotal !== 1 ? 's' : ''}`;
-                    const sa = document.getElementById('wishlist-stat-albums');
-                    const ss = document.getElementById('wishlist-stat-singles');
-                    if (sa) sa.textContent = stats.albums || 0;
-                    if (ss) ss.textContent = stats.singles || 0;
-
-                    // Re-add processing classes after re-render
-                    document.getElementById('wl-nebula-field')?.classList.add('nebula-processing');
-                    document.querySelectorAll('.wl-orb-group').forEach(g => g.classList.add('orb-processing'));
-                }
-                _nebulaLastTotal = newTotal;
-            } else {
-                nebulaField.classList.remove('nebula-processing');
-                document.querySelectorAll('.wl-orb-group.orb-processing').forEach(g => g.classList.remove('orb-processing'));
-
-                if (_nebulaLastTotal !== null) {
-                    _nebulaLastTotal = null;
-                    wishlistPageState.isInitialized = false;
-                    await initializeWishlistPage();
-                    await updateWishlistCount();
-                }
-            }
-        } catch (e) {}
-    }, 5000);
-}
-
-function _stopNebulaLivePolling() {
-    if (_nebulaLivePollInterval) {
-        clearInterval(_nebulaLivePollInterval);
-        _nebulaLivePollInterval = null;
-    }
-    _nebulaLastTotal = null;
-}
-
-/**
- * Sort the watchlist artist grid by the selected criteria.
- */
-function sortWatchlistArtists(sortBy) {
-    const grid = document.getElementById('watchlist-artists-list');
-    if (!grid) return;
-    const cards = Array.from(grid.querySelectorAll('.watchlist-artist-card'));
-    if (cards.length === 0) return;
-
-    cards.sort((a, b) => {
-        switch (sortBy) {
-            case 'name-asc':
-                return (a.dataset.artistName || '').localeCompare(b.dataset.artistName || '');
-            case 'name-desc':
-                return (b.dataset.artistName || '').localeCompare(a.dataset.artistName || '');
-            case 'scan-oldest': {
-                const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
-                const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
-                return aTime - bTime; // oldest first (never scanned = 0 = top)
-            }
-            case 'scan-newest': {
-                const aTime = a.dataset.lastScan ? new Date(a.dataset.lastScan).getTime() : 0;
-                const bTime = b.dataset.lastScan ? new Date(b.dataset.lastScan).getTime() : 0;
-                return bTime - aTime;
-            }
-            case 'added-newest': {
-                const aTime = a.dataset.added ? new Date(a.dataset.added).getTime() : 0;
-                const bTime = b.dataset.added ? new Date(b.dataset.added).getTime() : 0;
-                return bTime - aTime;
-            }
-            default:
-                return 0;
-        }
-    });
-
-    // Re-append in sorted order (preserves event listeners)
-    cards.forEach(card => grid.appendChild(card));
-}
-
-/**
- * Filter wishlist tracks by search query within the active track list.
- */
-function filterWishlistTracks() {
-    const input = document.getElementById('wishlist-track-search-input');
-    if (!input) return;
-    const query = input.value.toLowerCase().trim();
-    const tracksList = document.getElementById('wishlist-tracks-list');
-    if (!tracksList) return;
-
-    // For albums view: filter album cards by album name or track names within
-    const albumCards = tracksList.querySelectorAll('.wishlist-album-card');
-    if (albumCards.length > 0) {
-        albumCards.forEach(card => {
-            const albumHeader = card.querySelector('.wishlist-album-header');
-            const albumName = (albumHeader?.querySelector('.wishlist-album-name')?.textContent || '').toLowerCase();
-            const artistName = (albumHeader?.querySelector('.wishlist-album-artist')?.textContent || '').toLowerCase();
-            const tracks = card.querySelectorAll('.wishlist-album-track');
-            let albumHasMatch = !query || albumName.includes(query) || artistName.includes(query);
-
-            // Also check individual track names
-            if (!albumHasMatch && tracks.length > 0) {
-                tracks.forEach(track => {
-                    const trackName = (track.textContent || '').toLowerCase();
-                    if (trackName.includes(query)) albumHasMatch = true;
-                });
-            }
-
-            card.style.display = albumHasMatch ? '' : 'none';
-        });
-        return;
-    }
-
-    // For singles view: filter individual track rows
-    const trackRows = tracksList.querySelectorAll('.playlist-track-item-with-image, .playlist-track-item');
-    trackRows.forEach(row => {
-        const text = (row.textContent || '').toLowerCase();
-        row.style.display = (!query || text.includes(query)) ? '' : 'none';
-    });
-}
-
-/**
- * Format a Date object as a relative time string (e.g. "2 hours ago")
- */
-function _formatTimeAgo(date) {
-    const now = new Date();
-    const diffMs = now - date;
-    const diffMins = Math.floor(diffMs / 60000);
-    if (diffMins < 1) return 'just now';
-    if (diffMins < 60) return `${diffMins}m ago`;
-    const diffHours = Math.floor(diffMins / 60);
-    if (diffHours < 24) return `${diffHours}h ago`;
-    const diffDays = Math.floor(diffHours / 24);
-    if (diffDays === 1) return 'yesterday';
-    if (diffDays < 7) return `${diffDays}d ago`;
-    return date.toLocaleDateString();
-}
-
-/**
- * Show watchlist modal (legacy — kept for backward compatibility)
- */
-async function showWatchlistModal() {
-    try {
-        // Check if watchlist has any artists
-        const countResponse = await fetch('/api/watchlist/count');
-        const countData = await countResponse.json();
-
-        if (!countData.success) {
-            console.error('Error getting watchlist count:', countData.error);
-            return;
-        }
-
-        if (countData.count === 0) {
-            // Show empty state message
-            alert('Your watchlist is empty!\n\nAdd artists to your watchlist from the Artists page to monitor them for new releases.');
-            return;
-        }
-
-        // Get watchlist artists
-        const artistsResponse = await fetch('/api/watchlist/artists');
-        const artistsData = await artistsResponse.json();
-
-        if (!artistsData.success) {
-            console.error('Error getting watchlist artists:', artistsData.error);
-            return;
-        }
-
-        // Create modal if it doesn't exist
-        let modal = document.getElementById('watchlist-modal');
-        if (!modal) {
-            modal = document.createElement('div');
-            modal.id = 'watchlist-modal';
-            modal.className = 'modal-overlay';
-            document.body.appendChild(modal);
-        }
-
-        // Get scan status and global config
-        const statusResponse = await fetch('/api/watchlist/scan/status');
-        const statusData = await statusResponse.json();
-        const scanStatus = statusData.success ? statusData.status : 'idle';
-
-        let globalOverrideActive = false;
-        try {
-            const globalConfigResponse = await fetch('/api/watchlist/global-config');
-            const globalConfigData = await globalConfigResponse.json();
-            globalOverrideActive = globalConfigData.success && globalConfigData.config.global_override_enabled;
-        } catch (e) {
-            console.debug('Could not fetch global config:', e);
-        }
-
-        // Format countdown timer
-        const nextRunSeconds = countData.next_run_in_seconds || 0;
-        const countdownText = formatCountdownTime(nextRunSeconds);
-
-        // Build modal content
-        modal.innerHTML = `
-            <div class="modal-container playlist-modal watchlist-fullscreen">
-                <div class="playlist-modal-header">
-                    <div class="playlist-header-content" style="width: 100%;">
-                        <h2><svg class="watchlist-header-icon" width="24" height="24" viewBox="0 0 24 24" fill="rgb(var(--accent-rgb))"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg> Watchlist</h2>
-                        <div class="playlist-quick-info">
-                            <span class="playlist-track-count">${countData.count} artist${countData.count !== 1 ? 's' : ''}</span>
-                            <span class="playlist-owner" id="watchlist-next-auto-timer">Next Auto${countdownText ? ': ' + countdownText : ''}</span>
-                        </div>
-                        <div class="playlist-modal-sync-status" id="watchlist-scan-status" style="display: ${scanStatus !== 'idle' ? 'flex' : 'none'}; flex-direction: column; align-items: center;">
-                            <!-- Live Visual Activity Display -->
-                            <div id="watchlist-live-activity" class="watchlist-live-activity" style="display: ${scanStatus === 'scanning' ? 'flex' : 'none'};">
-                                <!-- Artist Photo -->
-                                <div class="watchlist-live-activity-col">
-                                    <img id="watchlist-artist-img" class="watchlist-live-activity-artist-img" src="" alt="Artist" onerror="this.style.display='none';" />
-                                    <div id="watchlist-artist-name" class="watchlist-live-activity-label">Waiting...</div>
-                                </div>
-
-                                <!-- Album Cover -->
-                                <div class="watchlist-live-activity-col">
-                                    <img id="watchlist-album-img" class="watchlist-live-activity-album-img" src="" alt="Album" onerror="this.style.display='none';" />
-                                    <div id="watchlist-album-name" class="watchlist-live-activity-label">Waiting...</div>
-                                </div>
-
-                                <!-- Track and Wishlist Feed -->
-                                <div class="watchlist-live-activity-feed">
-                                    <div class="watchlist-live-activity-feed-label">Current Track:</div>
-                                    <div id="watchlist-track-name" class="watchlist-live-activity-track">Waiting...</div>
-
-                                    <div class="watchlist-live-activity-feed-label-orange">✨ Recently Added:</div>
-                                    <div id="watchlist-additions-feed" style="max-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 10px;">
-                                        <!-- Populated by JavaScript -->
-                                    </div>
-                                </div>
-                            </div>
-
-                            ${statusData.summary ? `
-                                <div class="scan-status-summary" style="margin-top: 8px; font-size: 13px; opacity: 0.8;">
-                                    <span class="sync-stat">Artists: ${statusData.summary.total_artists || 0}</span>
-                                    <span class="sync-separator"> • </span>
-                                    <span class="sync-stat">New tracks: ${statusData.summary.new_tracks_found || 0}</span>
-                                    <span class="sync-separator"> • </span>
-                                    <span class="sync-stat">Added to wishlist: ${statusData.summary.tracks_added_to_wishlist || 0}</span>
-                                </div>
-                            ` : ''}
-                        </div>
-                    </div>
-                    <span class="playlist-modal-close" onclick="closeWatchlistModal()">&times;</span>
-                </div>
-
-                <div class="playlist-modal-body">
-                    <div class="watchlist-actions" style="margin-bottom: 16px; display: flex; gap: 12px; align-items: center; padding: 12px 32px; flex-wrap: wrap;">
-                        <button class="playlist-modal-btn playlist-modal-btn-primary watchlist-btn-scan ${scanStatus === 'scanning' ? 'btn-processing' : ''}"
-                                id="scan-watchlist-btn"
-                                onclick="startWatchlistScan()"
-                                ${scanStatus === 'scanning' ? 'disabled' : ''}>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
-                            ${scanStatus === 'scanning' ? 'Scanning...' : 'Scan for New Releases'}
-                        </button>
-                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-cancel"
-                                id="cancel-watchlist-scan-btn"
-                                onclick="cancelWatchlistScan()"
-                                style="display: ${scanStatus === 'scanning' ? '' : 'none'};">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
-                            Cancel Scan
-                        </button>
-                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-similar"
-                                id="update-similar-artists-btn"
-                                onclick="updateSimilarArtists()"
-                                ${scanStatus === 'scanning' ? 'disabled' : ''}>
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-                            Update Similar Artists
-                        </button>
-                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-btn-settings ${globalOverrideActive ? 'watchlist-global-settings-active' : ''}"
-                                id="watchlist-global-settings-btn"
-                                onclick="openWatchlistGlobalSettingsModal()">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
-                            ${globalOverrideActive ? 'Global Override ON' : 'Global Settings'}
-                        </button>
-                    </div>
-
-                    ${globalOverrideActive ? `
-                    <div class="watchlist-global-override-banner" style="margin: 0 32px 12px;">
-                        <span>⚠️</span>
-                        <span>Global override is active — per-artist settings are being ignored during scans.</span>
-                    </div>
-                    ` : ''}
-
-                    <!-- Search Bar -->
-                    <div class="watchlist-search-container" style="margin-bottom: 12px;">
-                        <svg class="watchlist-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="rgba(255,255,255,0.35)"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
-                        <input type="text"
-                               id="watchlist-search-input"
-                               class="watchlist-search-input"
-                               placeholder="Search watchlist..."
-                               oninput="filterWatchlistArtists()">
-                    </div>
-
-                    <!-- Batch action bar -->
-                    <div class="watchlist-batch-bar" id="watchlist-batch-bar">
-                        <label class="watchlist-select-all-label" onclick="event.stopPropagation();">
-                            <input type="checkbox" id="watchlist-select-all-cb" onchange="toggleWatchlistSelectAll(this.checked)">
-                            <span>Select All</span>
-                        </label>
-                        <span class="watchlist-batch-count" id="watchlist-batch-count"></span>
-                        <button class="playlist-modal-btn playlist-modal-btn-secondary watchlist-batch-remove-btn"
-                                id="watchlist-batch-remove-btn"
-                                onclick="batchRemoveFromWatchlist()"
-                                style="display: none;">
-                            Remove Selected
-                        </button>
-                    </div>
-
-                    <div class="watchlist-artists-grid" id="watchlist-artists-list">
-                        ${artistsData.artists.map(artist => {
-            const pills = [];
-            if (artist.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
-            if (artist.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
-            if (artist.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
-            if (artist.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
-            if (artist.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
-            if (artist.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
-            if (artist.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
-            const sourceBadges = [];
-            if (artist.spotify_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-spotify">Spotify</span>');
-            if (artist.itunes_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-itunes">iTunes</span>');
-            if (artist.deezer_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-deezer">Deezer</span>');
-            if (artist.discogs_artist_id) sourceBadges.push('<span class="watchlist-source-badge watchlist-source-discogs">Discogs</span>');
-            const artistPrimaryId = artist.spotify_artist_id || artist.itunes_artist_id || artist.deezer_artist_id || artist.discogs_artist_id;
-            return `
-                            <div class="watchlist-artist-card"
-                                 data-artist-name="${artist.artist_name.toLowerCase().replace(/"/g, '&quot;')}"
-                                 data-artist-id="${artistPrimaryId}">
-
-                                <label class="watchlist-card-checkbox" onclick="event.stopPropagation();">
-                                    <input type="checkbox" class="watchlist-select-cb"
-                                           data-artist-id="${artistPrimaryId}"
-                                           data-artist-name="${escapeHtml(artist.artist_name)}"
-                                           onchange="updateWatchlistBatchBar()">
-                                    <span class="watchlist-checkbox-custom"></span>
-                                </label>
-
-                                <button class="watchlist-card-gear"
-                                        data-artist-id="${artistPrimaryId}"
-                                        data-artist-name="${escapeHtml(artist.artist_name)}"
-                                        onclick="event.stopPropagation();"
-                                        title="Artist settings">
-                                    <svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.48.48 0 00-.48-.41h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 00-.59.22L2.74 8.87a.48.48 0 00.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z"/></svg>
-                                </button>
-
-                                <div class="watchlist-card-image">
-                                    ${artist.image_url ? `
-                                        <img src="${artist.image_url}"
-                                             alt="${escapeHtml(artist.artist_name)}"
-                                             loading="lazy"
-                                             onerror="this.parentElement.innerHTML='<div class=\\'watchlist-card-image-fallback\\'>🎤</div>';">
-                                    ` : `
-                                        <div class="watchlist-card-image-fallback">🎤</div>
-                                    `}
-                                </div>
-
-                                <div class="watchlist-card-info">
-                                    <span class="watchlist-card-name">${escapeHtml(artist.artist_name)}</span>
-                                    <span class="watchlist-card-meta">${formatRelativeScanTime(artist.last_scan_timestamp)}</span>
-                                </div>
-                                ${sourceBadges.length > 0 ? `<div class="watchlist-card-sources">${sourceBadges.join('')}</div>` : ''}
-                                ${pills.length > 0 ? `<div class="watchlist-card-pills">${pills.join('')}</div>` : ''}
-                            </div>
-                        `}).join('')}
-                    </div>
-                </div>
-            </div>
-        `;
-
-        // Add event listeners for gear buttons
-        modal.querySelectorAll('.watchlist-card-gear').forEach(button => {
-            button.addEventListener('click', () => {
-                const artistId = button.getAttribute('data-artist-id');
-                const artistName = button.getAttribute('data-artist-name');
-                openWatchlistArtistConfigModal(artistId, artistName);
-            });
-        });
-
-        // Add click handlers to artist cards (except for gear button or checkbox)
-        modal.querySelectorAll('.watchlist-artist-card').forEach(item => {
-            item.addEventListener('click', (e) => {
-                if (e.target.closest('.watchlist-card-gear') || e.target.closest('.watchlist-card-checkbox')) {
-                    return;
-                }
-
-                const artistId = item.getAttribute('data-artist-id');
-                const artistName = item.querySelector('.watchlist-card-name').textContent;
-
-                console.log(`🎵 Artist card clicked: ${artistName} (${artistId})`);
-                openWatchlistArtistDetailView(artistId, artistName);
-            });
-        });
-
-        // Show modal
-        modal.style.display = 'flex';
-
-        // Start countdown timer update interval
-        startWatchlistCountdownTimer(nextRunSeconds);
-
-        // Start polling for scan status if scanning
-        if (scanStatus === 'scanning') {
-            pollWatchlistScanStatus();
-        }
-
-    } catch (error) {
-        console.error('Error showing watchlist modal:', error);
-    }
-}
-
-function startWatchlistCountdownTimer(initialSeconds) {
-    // Clear any existing interval
-    if (watchlistCountdownInterval) {
-        clearInterval(watchlistCountdownInterval);
-    }
-
-    let remainingSeconds = initialSeconds;
-
-    watchlistCountdownInterval = setInterval(async () => {
-        remainingSeconds--;
-
-        if (remainingSeconds <= 0) {
-            // Timer expired, fetch fresh data
-            try {
-                const response = await fetch('/api/watchlist/count');
-                const data = await response.json();
-                remainingSeconds = data.next_run_in_seconds || 0;
-
-                const timerElement = document.getElementById('watchlist-next-auto-timer');
-                if (timerElement) {
-                    const countdownText = formatCountdownTime(remainingSeconds);
-                    timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
-                }
-            } catch (error) {
-                console.debug('Error updating watchlist countdown:', error);
-            }
-        } else {
-            // Update the display
-            const timerElement = document.getElementById('watchlist-next-auto-timer');
-            if (timerElement) {
-                const countdownText = formatCountdownTime(remainingSeconds);
-                timerElement.textContent = `Next Auto${countdownText ? ': ' + countdownText : ''}`;
-            }
-        }
-    }, 1000); // Update every second
-}
-
-/**
- * Close watchlist modal
- */
-function closeWatchlistModal() {
-    // Stop countdown timer
-    if (watchlistCountdownInterval) {
-        clearInterval(watchlistCountdownInterval);
-        watchlistCountdownInterval = null;
-    }
-
-    const modal = document.getElementById('watchlist-modal');
-    if (modal) {
-        modal.style.display = 'none';
-    }
-}
-
-/**
- * Populate the linked provider section in the watchlist config modal.
- * Shows which Spotify/iTunes/Deezer artist is linked and allows changing it.
- */
-function _populateLinkedProviderSection(artistId, artistName, spotifyId, itunesId, artistInfo, deezerId, discogsId) {
-    const section = document.getElementById('watchlist-linked-provider-section');
-    const content = document.getElementById('watchlist-linked-provider-content');
-    if (!section || !content) return;
-
-    section.style.display = '';
-
-    const sources = [
-        { key: 'spotify', label: 'Spotify', icon: '🟢', id: spotifyId || '', color: '#1db954' },
-        { key: 'itunes', label: 'Apple Music', icon: '🔴', id: itunesId || '', color: '#fc3c44' },
-        { key: 'deezer', label: 'Deezer', icon: '🟣', id: deezerId || '', color: '#a238ff' },
-        { key: 'discogs', label: 'Discogs', icon: '🟤', id: discogsId || '', color: '#b08968' },
-    ];
-
-    let html = '<div class="wl-linked-sources">';
-    for (const src of sources) {
-        const matched = !!src.id;
-        const shortId = src.id ? (src.id.length > 16 ? src.id.substring(0, 14) + '...' : src.id) : '';
-        html += `
-            <div class="wl-linked-row ${matched ? 'matched' : 'unmatched'}" data-source="${src.key}">
-                <span class="wl-linked-icon">${src.icon}</span>
-                <span class="wl-linked-label">${src.label}</span>
-                <span class="wl-linked-status">${matched
-                ? `<span class="wl-linked-id" title="${escapeHtml(src.id)}">${shortId}</span>`
-                : '<span class="wl-linked-none">Not matched</span>'
-            }</span>
-                <button class="wl-linked-fix-btn" onclick="_openSourceSearch('${src.key}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(artistName)}')">${matched ? 'Fix' : 'Match'}</button>
-                ${matched ? `<button class="wl-linked-clear-btn" onclick="_clearSourceMatch('${src.key}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(artistName)}')" title="Clear this match">&times;</button>` : ''}
-            </div>`;
-    }
-    html += '</div>';
-
-    // Per-source search panel (hidden, populated on Fix/Match click)
-    html += `<div class="wl-linked-search-panel" id="wl-linked-search-panel" style="display:none">
-        <div class="wl-linked-search-header">
-            <span id="wl-linked-search-title">Search</span>
-            <button class="wl-linked-search-close" onclick="document.getElementById('wl-linked-search-panel').style.display='none'">&times;</button>
-        </div>
-        <div class="wl-linked-search-input-row">
-            <input type="text" id="wl-linked-search-input" class="watchlist-linked-search-input"
-                   placeholder="Search..." value="${escapeHtml(artistName)}">
-            <button class="watchlist-linked-search-btn" id="wl-linked-search-go">Search</button>
-        </div>
-        <div class="wl-linked-search-results" id="wl-linked-search-results"></div>
-    </div>`;
-
-    content.innerHTML = html;
-}
-
-/**
- * Open per-source search panel for fixing a specific provider match.
- */
-function _openSourceSearch(sourceKey, artistId, artistName) {
-    const panel = document.getElementById('wl-linked-search-panel');
-    if (!panel) return;
-    const labels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs' };
-    document.getElementById('wl-linked-search-title').textContent = `Search ${labels[sourceKey] || sourceKey}`;
-    const input = document.getElementById('wl-linked-search-input');
-    input.value = artistName;
-    document.getElementById('wl-linked-search-results').innerHTML = '';
-    panel.style.display = '';
-    panel.dataset.source = sourceKey;
-    panel.dataset.artistId = artistId;
-    panel.dataset.artistName = artistName;
-    input.focus();
-    input.select();
-
-    const doSearch = () => _searchSourceArtists(sourceKey, artistId);
-    document.getElementById('wl-linked-search-go').onclick = doSearch;
-    input.onkeydown = (e) => { if (e.key === 'Enter') doSearch(); };
-}
-
-async function _searchSourceArtists(sourceKey, watchlistArtistId) {
-    const input = document.getElementById('wl-linked-search-input');
-    const container = document.getElementById('wl-linked-search-results');
-    const query = input?.value?.trim();
-    if (!query || !container) return;
-
-    container.innerHTML = '<div style="padding:12px;color:#888;text-align:center">Searching...</div>';
-
-    try {
-        const response = await fetch('/api/library/search-service', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ service: sourceKey, entity_type: 'artist', query })
-        });
-        const data = await response.json();
-        if (!data.success) throw new Error(data.error);
-
-        const results = data.results || [];
-        if (!results.length) {
-            container.innerHTML = '<div style="padding:12px;color:#888;text-align:center">No artists found</div>';
-            return;
-        }
-
-        let html = '';
-        for (const r of results) {
-            html += `<div class="watchlist-linked-search-result" data-id="${escapeHtml(r.id)}" data-name="${escapeHtml(r.name)}">
-                ${r.image ? `<img src="${r.image}" alt="" class="watchlist-linked-result-img">` :
-                    `<div class="watchlist-linked-result-img-placeholder">🎵</div>`}
-                <div class="watchlist-linked-result-info">
-                    <div class="watchlist-linked-result-name">${escapeHtml(r.name)}</div>
-                    <div class="watchlist-linked-result-meta">${escapeHtml(r.extra || '')}</div>
-                </div>
-                <button class="watchlist-linked-select-btn">Select</button>
-            </div>`;
-        }
-        container.innerHTML = html;
-
-        container.querySelectorAll('.watchlist-linked-search-result').forEach(el => {
-            el.querySelector('.watchlist-linked-select-btn').onclick = async (e) => {
-                e.stopPropagation();
-                await _linkSourceArtist(sourceKey, watchlistArtistId, el.dataset.id, el.dataset.name);
-            };
-        });
-    } catch (err) {
-        console.error(`Error searching ${sourceKey}:`, err);
-        container.innerHTML = '<div style="padding:12px;color:#f44;text-align:center">Search error</div>';
-    }
-}
-
-async function _linkSourceArtist(sourceKey, watchlistArtistId, newId, newName) {
-    try {
-        const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ provider_id: newId, provider: sourceKey })
-        });
-        const data = await response.json();
-        if (!data.success) {
-            showToast(`Failed to link: ${data.error}`, 'error');
-            return;
-        }
-        showToast(`Linked to "${newName}" on ${sourceKey}`, 'success');
-        // Refresh the modal
-        const panel = document.getElementById('wl-linked-search-panel');
-        const artistName = panel?.dataset?.artistName || newName;
-        closeWatchlistArtistConfigModal();
-        setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
-    } catch (err) {
-        showToast('Failed to link artist', 'error');
-    }
-}
-
-async function _clearSourceMatch(sourceKey, watchlistArtistId, artistName) {
-    try {
-        const response = await fetch(`/api/watchlist/artist/${watchlistArtistId}/link-provider`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ provider_id: '', provider: sourceKey })
-        });
-        const data = await response.json();
-        if (!data.success) {
-            showToast(`Failed to clear: ${data.error}`, 'error');
-            return;
-        }
-        showToast(`Cleared ${sourceKey} match`, 'success');
-        closeWatchlistArtistConfigModal();
-        setTimeout(() => openWatchlistArtistConfigModal(watchlistArtistId, artistName), 300);
-    } catch (err) {
-        showToast('Failed to clear match', 'error');
-    }
-}
-
-/**
- * Open watchlist artist configuration modal
- * @param {string} artistId - Spotify artist ID
- * @param {string} artistName - Artist name
- */
-async function openWatchlistArtistConfigModal(artistId, artistName) {
-    try {
-        console.log(`🎨 Opening config modal for artist: ${artistName} (${artistId})`);
-
-        // Fetch artist config and info
-        const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
-        const data = await response.json();
-
-        if (!data.success) {
-            console.error('Error loading artist config:', data.error);
-            showToast(`Error loading artist configuration: ${data.error}`, 'error');
-            return;
-        }
-
-        const { config, artist, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id, watchlist_name } = data;
-
-        // Populate linked provider section (use DB watchlist_name for mismatch comparison)
-        _populateLinkedProviderSection(artistId, watchlist_name || artistName, spotify_artist_id, itunes_artist_id, artist, deezer_artist_id, discogs_artist_id);
-
-        // Check if global override is active
-        let globalOverrideActive = false;
-        try {
-            const globalResponse = await fetch('/api/watchlist/global-config');
-            const globalData = await globalResponse.json();
-            globalOverrideActive = globalData.success && globalData.config.global_override_enabled;
-        } catch (e) {
-            console.debug('Could not check global config:', e);
-        }
-
-        // Generate hero section
-        const heroHTML = `
-            ${artist.image_url ? `
-                <img src="${artist.image_url}"
-                     alt="${escapeHtml(artist.name)}"
-                     class="watchlist-artist-config-hero-image"
-                     loading="lazy">
-            ` : ''}
-            <div class="watchlist-artist-config-hero-info">
-                <h2 class="watchlist-artist-config-hero-name">${escapeHtml(artist.name)}</h2>
-                <div class="watchlist-artist-config-hero-stats">
-                    <div class="watchlist-artist-config-stat">
-                        <span class="watchlist-artist-config-stat-value">${formatNumber(artist.followers)}</span>
-                        <span class="watchlist-artist-config-stat-label">Followers</span>
-                    </div>
-                    <div class="watchlist-artist-config-stat">
-                        <span class="watchlist-artist-config-stat-value">${artist.popularity}/100</span>
-                        <span class="watchlist-artist-config-stat-label">Popularity</span>
-                    </div>
-                </div>
-                ${artist.genres && artist.genres.length > 0 ? `
-                    <div class="watchlist-artist-config-hero-genres">
-                        ${artist.genres.slice(0, 3).map(genre =>
-            `<span class="watchlist-artist-config-genre-tag">${escapeHtml(genre)}</span>`
-        ).join('')}
-                    </div>
-                ` : ''}
-            </div>
-        `;
-
-        // Populate hero section
-        const heroContainer = document.getElementById('watchlist-artist-config-hero');
-        if (heroContainer) {
-            heroContainer.innerHTML = heroHTML;
-        }
-
-        // Set checkbox states
-        document.getElementById('config-include-albums').checked = config.include_albums;
-        document.getElementById('config-include-eps').checked = config.include_eps;
-        document.getElementById('config-include-singles').checked = config.include_singles;
-        document.getElementById('config-include-live').checked = config.include_live || false;
-        document.getElementById('config-include-remixes').checked = config.include_remixes || false;
-        document.getElementById('config-include-acoustic').checked = config.include_acoustic || false;
-        document.getElementById('config-include-compilations').checked = config.include_compilations || false;
-        document.getElementById('config-include-instrumentals').checked = config.include_instrumentals || false;
-        document.getElementById('config-lookback-days').value = config.lookback_days != null ? String(config.lookback_days) : '';
-
-        // Populate metadata source selector
-        const sourceSelector = document.getElementById('config-metadata-source-selector');
-        if (sourceSelector) {
-            const sources = [
-                { key: 'spotify', label: 'Spotify', id: spotify_artist_id, color: '#1DB954' },
-                { key: 'deezer', label: 'Deezer', id: deezer_artist_id, color: '#A238FF' },
-                { key: 'itunes', label: 'Apple Music', id: itunes_artist_id, color: '#FC3C44' },
-                { key: 'discogs', label: 'Discogs', id: discogs_artist_id, color: '#333' },
-            ];
-            const globalSource = data.global_metadata_source || 'deezer';
-            const currentOverride = config.preferred_metadata_source;
-            const globalLabel = { spotify: 'Spotify', deezer: 'Deezer', itunes: 'Apple Music', discogs: 'Discogs' }[globalSource] || globalSource;
-
-            let html = `<button class="config-msrc-btn ${!currentOverride ? 'active' : ''}" data-source="" title="Use global default (${globalLabel})">
-                <span class="config-msrc-icon">🌐</span><span class="config-msrc-label">Default (${globalLabel})</span>
-            </button>`;
-            for (const src of sources) {
-                if (!src.id) continue;
-                const isActive = currentOverride === src.key;
-                html += `<button class="config-msrc-btn ${isActive ? 'active' : ''}" data-source="${src.key}" style="${isActive ? 'border-color:' + src.color : ''}" title="${src.label}">
-                    <span class="config-msrc-label">${src.label}</span>
-                </button>`;
-            }
-            sourceSelector.innerHTML = html;
-            sourceSelector.querySelectorAll('.config-msrc-btn').forEach(btn => {
-                btn.addEventListener('click', () => {
-                    sourceSelector.querySelectorAll('.config-msrc-btn').forEach(b => {
-                        b.classList.remove('active');
-                        b.style.borderColor = '';
-                    });
-                    btn.classList.add('active');
-                    const color = sources.find(s => s.key === btn.dataset.source)?.color;
-                    if (color) btn.style.borderColor = color;
-                });
-            });
-        }
-
-        // Show global override notice if active
-        const existingNotice = document.querySelector('.global-override-notice');
-        if (existingNotice) existingNotice.remove();
-
-        if (globalOverrideActive) {
-            const notice = document.createElement('div');
-            notice.className = 'global-override-notice watchlist-global-override-banner';
-            notice.innerHTML = '<span>⚠️</span><span>Global override is active — these per-artist settings are currently ignored during scans.</span>';
-            const configBody = document.querySelector('.watchlist-artist-config-body');
-            if (configBody) configBody.insertBefore(notice, configBody.firstChild);
-        }
-
-        // Store artist ID for saving
-        const modal = document.getElementById('watchlist-artist-config-modal');
-        if (modal) {
-            modal.setAttribute('data-artist-id', artistId);
-        }
-
-        // Show modal
-        const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
-        if (overlay) {
-            overlay.classList.remove('hidden');
-        }
-
-        // Add save button handler
-        const saveBtn = document.getElementById('save-artist-config-btn');
-        if (saveBtn) {
-            // Remove old listeners
-            const newSaveBtn = saveBtn.cloneNode(true);
-            saveBtn.parentNode.replaceChild(newSaveBtn, saveBtn);
-
-            // Add new listener
-            newSaveBtn.addEventListener('click', () => saveWatchlistArtistConfig(artistId));
-        }
-
-    } catch (error) {
-        console.error('Error opening watchlist artist config modal:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Close watchlist artist configuration modal
- */
-function closeWatchlistArtistConfigModal() {
-    const overlay = document.getElementById('watchlist-artist-config-modal-overlay');
-    if (overlay) {
-        overlay.classList.add('hidden');
-    }
-
-    // Clear hero content
-    const heroContainer = document.getElementById('watchlist-artist-config-hero');
-    if (heroContainer) {
-        heroContainer.innerHTML = '';
-    }
-
-    // Clear linked provider section
-    const linkedContent = document.getElementById('watchlist-linked-provider-content');
-    if (linkedContent) linkedContent.innerHTML = '';
-    const linkedSection = document.getElementById('watchlist-linked-provider-section');
-    if (linkedSection) linkedSection.style.display = 'none';
-}
-
-/**
- * Open watchlist artist detail view (slides in from right)
- */
-async function openWatchlistArtistDetailView(artistId, artistName) {
-    try {
-        const response = await fetch(`/api/watchlist/artist/${artistId}/config`);
-        const data = await response.json();
-
-        if (!data.success) {
-            showToast(`Error loading artist info: ${data.error}`, 'error');
-            return;
-        }
-
-        const { config, artist, recent_releases, spotify_artist_id, itunes_artist_id, deezer_artist_id, discogs_artist_id } = data;
-
-        // Remove existing overlay if any
-        const existing = document.querySelector('.watchlist-artist-detail-overlay');
-        if (existing) existing.remove();
-
-        const overlay = document.createElement('div');
-        overlay.className = 'watchlist-artist-detail-overlay';
-
-        // Build pills
-        const pills = [];
-        if (config.include_albums) pills.push('<span class="watchlist-pill watchlist-pill-active">Albums</span>');
-        if (config.include_eps) pills.push('<span class="watchlist-pill watchlist-pill-active">EPs</span>');
-        if (config.include_singles) pills.push('<span class="watchlist-pill watchlist-pill-active">Singles</span>');
-        if (config.include_live) pills.push('<span class="watchlist-pill watchlist-pill-filter">Live</span>');
-        if (config.include_remixes) pills.push('<span class="watchlist-pill watchlist-pill-filter">Remixes</span>');
-        if (config.include_acoustic) pills.push('<span class="watchlist-pill watchlist-pill-filter">Acoustic</span>');
-        if (config.include_compilations) pills.push('<span class="watchlist-pill watchlist-pill-filter">Compilations</span>');
-
-        // Build scan info
-        const scanTimeText = config.last_scan_timestamp ? formatRelativeScanTime(config.last_scan_timestamp) : 'Never scanned';
-        const dateAddedText = config.date_added ? `Added ${new Date(config.date_added).toLocaleDateString()}` : '';
-
-        // Build metadata tags (style, mood, label)
-        const metaTags = [];
-        if (artist.style) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.style)}</span>`);
-        if (artist.mood) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.mood)}</span>`);
-        if (artist.label) metaTags.push(`<span class="watchlist-detail-genre-tag">${escapeHtml(artist.label)}</span>`);
-
-        overlay.innerHTML = `
-            ${artist.banner_url ? `
-                <div class="watchlist-detail-banner">
-                    <img src="${artist.banner_url}" alt="" onerror="this.parentElement.remove();">
-                    <div class="watchlist-detail-banner-fade"></div>
-                </div>
-            ` : ''}
-
-            <div class="watchlist-detail-content ${artist.banner_url ? 'has-banner' : ''}">
-                <button class="watchlist-detail-back watchlist-detail-back-btn">
-                    ← Back to Watchlist
-                </button>
-
-                <div class="watchlist-detail-hero">
-                    ${artist.image_url ? `<img src="${artist.image_url}" alt="${escapeHtml(artist.name)}" onerror="this.style.display='none';">` : ''}
-                    <div class="watchlist-detail-hero-info">
-                        <h2 class="watchlist-detail-hero-name">${escapeHtml(artist.name)}</h2>
-                        ${artist.followers || artist.popularity ? `
-                        <div class="watchlist-detail-hero-stats">
-                            ${artist.followers ? `
-                            <div class="watchlist-detail-stat">
-                                <span class="watchlist-detail-stat-value">${formatNumber(artist.followers)}</span>
-                                <span class="watchlist-detail-stat-label">Followers</span>
-                            </div>` : ''}
-                            ${artist.popularity ? `
-                            <div class="watchlist-detail-stat">
-                                <span class="watchlist-detail-stat-value">${artist.popularity}/100</span>
-                                <span class="watchlist-detail-stat-label">Popularity</span>
-                            </div>` : ''}
-                        </div>
-                        ` : ''}
-                        ${artist.genres && artist.genres.length > 0 ? `
-                            <div class="watchlist-detail-hero-genres">
-                                ${artist.genres.map(g => `<span class="watchlist-detail-genre-tag">${escapeHtml(g)}</span>`).join('')}
-                            </div>
-                        ` : ''}
-                    </div>
-                </div>
-
-                ${artist.summary ? `
-                <div class="watchlist-detail-section">
-                    <div class="watchlist-detail-section-title">About</div>
-                    <p class="watchlist-detail-bio">${escapeHtml(artist.summary)}</p>
-                </div>
-                ` : ''}
-
-                ${metaTags.length > 0 ? `
-                <div class="watchlist-detail-section">
-                    <div class="watchlist-detail-section-title">Info</div>
-                    <div class="watchlist-detail-hero-genres">${metaTags.join('')}</div>
-                </div>
-                ` : ''}
-
-                ${recent_releases && recent_releases.length > 0 ? `
-                <div class="watchlist-detail-section">
-                    <div class="watchlist-detail-section-title">Recent Releases</div>
-                    <div class="watchlist-detail-releases">
-                        ${recent_releases.map(r => `
-                            <div class="watchlist-detail-release">
-                                ${r.album_cover_url ? `<img src="${r.album_cover_url}" alt="" onerror="this.style.display='none';">` : ''}
-                                <div class="watchlist-detail-release-info">
-                                    <span class="watchlist-detail-release-name">${escapeHtml(r.album_name)}</span>
-                                    <span class="watchlist-detail-release-meta">${r.release_date}${r.track_count ? ` · ${r.track_count} tracks` : ''}</span>
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-                ` : ''}
-
-                <div class="watchlist-detail-section">
-                    <div class="watchlist-detail-section-title">Watchlist</div>
-                    <div class="watchlist-detail-watchlist-info">
-                        <span class="watchlist-card-meta">${scanTimeText}</span>
-                        ${dateAddedText ? `<span class="watchlist-detail-info-sep">·</span><span class="watchlist-card-meta">${dateAddedText}</span>` : ''}
-                    </div>
-                    <div class="watchlist-card-pills" style="padding: 0; margin-top: 8px;">
-                        ${pills.length > 0 ? pills.join('') : '<span class="watchlist-card-meta">No release types enabled</span>'}
-                    </div>
-                </div>
-
-                <div class="watchlist-detail-actions">
-                    <button class="watchlist-detail-discog-btn watchlist-detail-discog-action">View Discography</button>
-                    <button class="watchlist-detail-settings-btn watchlist-detail-settings-action">Settings</button>
-                    <button class="watchlist-detail-remove-btn watchlist-detail-remove-action">Remove from Watchlist</button>
-                </div>
-            </div>
-        `;
-
-        // Wire up event listeners (avoids inline onclick escaping issues)
-        overlay.querySelector('.watchlist-detail-back-btn').addEventListener('click', () => {
-            closeWatchlistArtistDetailView();
-        });
-
-        overlay.querySelector('.watchlist-detail-discog-action').addEventListener('click', () => {
-            // Use the ID matching the active metadata source
-            let discogId, source;
-            const activeSrc = (currentMusicSourceName || '').toLowerCase();
-            if (activeSrc.includes('spotify') && spotify_artist_id) {
-                discogId = spotify_artist_id; source = 'spotify';
-            } else if (activeSrc.includes('discogs') && discogs_artist_id) {
-                discogId = discogs_artist_id; source = 'discogs';
-            } else if (activeSrc.includes('deezer') && deezer_artist_id) {
-                discogId = deezer_artist_id; source = 'deezer';
-            } else if (itunes_artist_id) {
-                discogId = itunes_artist_id; source = 'itunes';
-            } else {
-                discogId = spotify_artist_id || discogs_artist_id || deezer_artist_id || itunes_artist_id;
-                source = spotify_artist_id ? 'spotify' : discogs_artist_id ? 'discogs' : deezer_artist_id ? 'deezer' : 'itunes';
-            }
-            if (discogId) {
-                // Close detail overlay and navigate to Artists page
-                closeWatchlistArtistDetailView();
-                // Navigate to Artists page and load discography
-                navigateToPage('artists');
-                setTimeout(() => {
-                    selectArtistForDetail(
-                        { id: discogId, name: artistName, image_url: artist.image_url || '' },
-                        { source: source }
-                    );
-                }, 200);
-            }
-        });
-
-        overlay.querySelector('.watchlist-detail-settings-action').addEventListener('click', () => {
-            // Remove overlay immediately so it doesn't block the config modal
-            const detailOverlay = document.querySelector('.watchlist-artist-detail-overlay');
-            if (detailOverlay) detailOverlay.remove();
-            openWatchlistArtistConfigModal(artistId, artistName);
-        });
-
-        overlay.querySelector('.watchlist-detail-remove-action').addEventListener('click', () => {
-            removeFromWatchlistModal(artistId, artistName);
-        });
-
-        // Append to body as a fixed overlay
-        document.body.appendChild(overlay);
-        // Trigger slide-in animation
-        requestAnimationFrame(() => overlay.classList.add('visible'));
-
-    } catch (error) {
-        console.error('Error opening artist detail view:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Close watchlist artist detail view (slides out)
- */
-function closeWatchlistArtistDetailView() {
-    const overlay = document.querySelector('.watchlist-artist-detail-overlay');
-    if (overlay) {
-        overlay.classList.remove('visible');
-        overlay.addEventListener('transitionend', () => overlay.remove(), { once: true });
-    }
-}
-
-/**
- * Open global watchlist settings modal
- */
-async function openWatchlistGlobalSettingsModal() {
-    try {
-        const response = await fetch('/api/watchlist/global-config');
-        const data = await response.json();
-
-        if (!data.success) {
-            showToast(`Error loading global settings: ${data.error}`, 'error');
-            return;
-        }
-
-        const config = data.config;
-
-        // Populate checkboxes
-        document.getElementById('global-override-enabled').checked = config.global_override_enabled;
-        document.getElementById('global-include-albums').checked = config.include_albums;
-        document.getElementById('global-include-eps').checked = config.include_eps;
-        document.getElementById('global-include-singles').checked = config.include_singles;
-        document.getElementById('global-include-live').checked = config.include_live;
-        document.getElementById('global-include-remixes').checked = config.include_remixes;
-        document.getElementById('global-include-acoustic').checked = config.include_acoustic;
-        document.getElementById('global-include-compilations').checked = config.include_compilations;
-        document.getElementById('global-include-instrumentals').checked = config.include_instrumentals;
-        document.getElementById('global-exclude-terms').value = config.exclude_terms || '';
-
-        // Sync "Include Everything" checkbox
-        syncGlobalIncludeAllCheckbox();
-
-        // Update options visibility based on toggle state
-        toggleGlobalOverrideOptions();
-
-        // Update toggle label border
-        const toggleLabel = document.getElementById('global-override-toggle-label');
-        if (toggleLabel) {
-            toggleLabel.style.border = config.global_override_enabled
-                ? '2px solid rgba(29, 185, 84, 0.5)'
-                : '2px solid rgba(255, 255, 255, 0.1)';
-        }
-
-        // Show modal
-        const overlay = document.getElementById('watchlist-global-config-modal-overlay');
-        if (overlay) overlay.classList.remove('hidden');
-
-    } catch (error) {
-        console.error('Error opening global watchlist settings:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Close global watchlist settings modal
- */
-function closeWatchlistGlobalSettingsModal() {
-    const overlay = document.getElementById('watchlist-global-config-modal-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-/**
- * Toggle global override options visibility
- */
-function toggleGlobalOverrideOptions() {
-    const enabled = document.getElementById('global-override-enabled').checked;
-    const options = document.getElementById('global-override-options');
-    if (options) {
-        options.style.opacity = enabled ? '1' : '0.4';
-        options.style.pointerEvents = enabled ? 'auto' : 'none';
-    }
-
-    // Update toggle label border
-    const toggleLabel = document.getElementById('global-override-toggle-label');
-    if (toggleLabel) {
-        toggleLabel.style.border = enabled
-            ? '2px solid rgba(29, 185, 84, 0.5)'
-            : '2px solid rgba(255, 255, 255, 0.1)';
-    }
-}
-
-/**
- * Toggle all global include checkboxes
- */
-function toggleGlobalIncludeAll() {
-    const checked = document.getElementById('global-include-all').checked;
-    ['global-include-albums', 'global-include-eps', 'global-include-singles',
-        'global-include-live', 'global-include-remixes', 'global-include-acoustic',
-        'global-include-compilations', 'global-include-instrumentals'].forEach(id => {
-            const el = document.getElementById(id);
-            if (el) el.checked = checked;
-        });
-}
-
-/**
- * Sync the "Include Everything" checkbox based on individual checkbox states
- */
-function syncGlobalIncludeAllCheckbox() {
-    const allIds = ['global-include-albums', 'global-include-eps', 'global-include-singles',
-        'global-include-live', 'global-include-remixes', 'global-include-acoustic',
-        'global-include-compilations', 'global-include-instrumentals'];
-    const allChecked = allIds.every(id => {
-        const el = document.getElementById(id);
-        return el && el.checked;
-    });
-    const includeAllEl = document.getElementById('global-include-all');
-    if (includeAllEl) includeAllEl.checked = allChecked;
-}
-
-/**
- * Save global watchlist configuration
- */
-async function saveWatchlistGlobalConfig() {
-    try {
-        const globalOverrideEnabled = document.getElementById('global-override-enabled').checked;
-        const includeAlbums = document.getElementById('global-include-albums').checked;
-        const includeEps = document.getElementById('global-include-eps').checked;
-        const includeSingles = document.getElementById('global-include-singles').checked;
-        const includeLive = document.getElementById('global-include-live').checked;
-        const includeRemixes = document.getElementById('global-include-remixes').checked;
-        const includeAcoustic = document.getElementById('global-include-acoustic').checked;
-        const includeCompilations = document.getElementById('global-include-compilations').checked;
-        const includeInstrumentals = document.getElementById('global-include-instrumentals').checked;
-        const excludeTerms = (document.getElementById('global-exclude-terms').value || '').trim();
-
-        if (globalOverrideEnabled && !includeAlbums && !includeEps && !includeSingles) {
-            showToast('Please select at least one release type', 'error');
-            return;
-        }
-
-        const saveBtn = document.getElementById('save-global-config-btn');
-        if (saveBtn) {
-            saveBtn.disabled = true;
-            saveBtn.textContent = 'Saving...';
-        }
-
-        const response = await fetch('/api/watchlist/global-config', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                global_override_enabled: globalOverrideEnabled,
-                include_albums: includeAlbums,
-                include_eps: includeEps,
-                include_singles: includeSingles,
-                include_live: includeLive,
-                include_remixes: includeRemixes,
-                include_acoustic: includeAcoustic,
-                include_compilations: includeCompilations,
-                include_instrumentals: includeInstrumentals,
-                exclude_terms: excludeTerms,
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast('Global watchlist settings saved', 'success');
-            closeWatchlistGlobalSettingsModal();
-
-            // Refresh the watchlist page to update the grid
-            if (currentPage === 'watchlist') {
-                watchlistPageState.isInitialized = false;
-                await initializeWatchlistPage();
-            }
-        } else {
-            showToast(`Error: ${data.error}`, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error saving global config:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        const saveBtn = document.getElementById('save-global-config-btn');
-        if (saveBtn) {
-            saveBtn.disabled = false;
-            saveBtn.textContent = 'Save Global Settings';
-        }
-    }
-}
-
-/**
- * Save watchlist artist configuration
- * @param {string} artistId - Spotify artist ID
- */
-async function saveWatchlistArtistConfig(artistId) {
-    try {
-        const includeAlbums = document.getElementById('config-include-albums').checked;
-        const includeEps = document.getElementById('config-include-eps').checked;
-        const includeSingles = document.getElementById('config-include-singles').checked;
-        const includeLive = document.getElementById('config-include-live').checked;
-        const includeRemixes = document.getElementById('config-include-remixes').checked;
-        const includeAcoustic = document.getElementById('config-include-acoustic').checked;
-        const includeCompilations = document.getElementById('config-include-compilations').checked;
-        const includeInstrumentals = document.getElementById('config-include-instrumentals').checked;
-        const lookbackDaysVal = document.getElementById('config-lookback-days').value;
-        const lookbackDays = lookbackDaysVal !== '' ? parseInt(lookbackDaysVal) : null;
-        const activeSourceBtn = document.querySelector('#config-metadata-source-selector .config-msrc-btn.active');
-        const preferredMetadataSource = activeSourceBtn ? (activeSourceBtn.dataset.source || null) : null;
-
-        // Validate at least one release type is selected
-        if (!includeAlbums && !includeEps && !includeSingles) {
-            showToast('Please select at least one release type', 'error');
-            return;
-        }
-
-        // Disable save button
-        const saveBtn = document.getElementById('save-artist-config-btn');
-        if (saveBtn) {
-            saveBtn.disabled = true;
-            saveBtn.textContent = 'Saving...';
-        }
-
-        // Send update to backend
-        const response = await fetch(`/api/watchlist/artist/${artistId}/config`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                include_albums: includeAlbums,
-                include_eps: includeEps,
-                include_singles: includeSingles,
-                include_live: includeLive,
-                include_remixes: includeRemixes,
-                include_acoustic: includeAcoustic,
-                include_compilations: includeCompilations,
-                include_instrumentals: includeInstrumentals,
-                lookback_days: lookbackDays,
-                preferred_metadata_source: preferredMetadataSource,
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast('Artist preferences saved successfully', 'success');
-            closeWatchlistArtistConfigModal();
-
-            // Refresh watchlist page if we're on it
-            if (currentPage === 'watchlist') {
-                watchlistPageState.isInitialized = false;
-                await initializeWatchlistPage();
-            }
-        } else {
-            showToast(`Error saving preferences: ${data.error}`, 'error');
-        }
-
-    } catch (error) {
-        console.error('Error saving watchlist artist config:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        // Re-enable save button
-        const saveBtn = document.getElementById('save-artist-config-btn');
-        if (saveBtn) {
-            saveBtn.disabled = false;
-            saveBtn.textContent = 'Save Preferences';
-        }
-    }
-}
-
-/**
- * Format large numbers with commas
- * @param {number} num - Number to format
- * @returns {string} Formatted number
- */
-function formatNumber(num) {
-    if (!num) return '0';
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-}
-
-/**
- * Format last scan timestamp as relative time
- */
-function formatRelativeScanTime(isoString) {
-    if (!isoString) return 'Never scanned';
-    const diff = Date.now() - new Date(isoString).getTime();
-    const mins = Math.floor(diff / 60000);
-    if (mins < 1) return 'Scanned just now';
-    if (mins < 60) return `Scanned ${mins}m ago`;
-    const hrs = Math.floor(mins / 60);
-    if (hrs < 24) return `Scanned ${hrs}h ago`;
-    const days = Math.floor(hrs / 24);
-    if (days < 30) return `Scanned ${days}d ago`;
-    const months = Math.floor(days / 30);
-    return `Scanned ${months}mo ago`;
-}
-
-/**
- * Filter watchlist artists based on search input
- */
-function filterWatchlistArtists() {
-    const searchInput = document.getElementById('watchlist-search-input');
-    const artistsList = document.getElementById('watchlist-artists-list');
-
-    if (!searchInput || !artistsList) return;
-
-    const searchTerm = searchInput.value.toLowerCase().trim();
-    const artistItems = artistsList.querySelectorAll('.watchlist-artist-card');
-
-    artistItems.forEach(item => {
-        const artistName = item.getAttribute('data-artist-name');
-
-        if (!searchTerm || artistName.includes(searchTerm)) {
-            item.style.display = '';
-        } else {
-            item.style.display = 'none';
-        }
-    });
-
-    // Refresh batch bar in case visible selection changed
-    updateWatchlistBatchBar();
-}
-
-/**
- * Start watchlist scan
- */
-async function cancelWatchlistScan() {
-    try {
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-        if (cancelBtn) {
-            cancelBtn.disabled = true;
-            cancelBtn.textContent = 'Cancelling...';
-        }
-
-        const response = await fetch('/api/watchlist/scan/cancel', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to cancel scan');
-        }
-
-        showToast('Cancel request sent — scan will stop after current artist', 'info');
-
-    } catch (error) {
-        console.error('Error cancelling watchlist scan:', error);
-        showToast(`Error cancelling scan: ${error.message}`, 'error');
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-        if (cancelBtn) {
-            cancelBtn.disabled = false;
-            cancelBtn.textContent = 'Cancel Scan';
-        }
-    }
-}
-
-async function startWatchlistScan() {
-    try {
-        const button = document.getElementById('scan-watchlist-btn');
-        button.disabled = true;
-        button.textContent = 'Starting scan...';
-        button.classList.add('btn-processing');
-
-        const response = await fetch('/api/watchlist/scan', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to start scan');
-        }
-
-        button.textContent = 'Scanning...';
-
-        // Show cancel button
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-        if (cancelBtn) {
-            cancelBtn.style.display = '';
-            cancelBtn.disabled = false;
-            cancelBtn.textContent = 'Cancel Scan';
-        }
-
-        // Show scan status
-        const statusDiv = document.getElementById('watchlist-scan-status');
-        if (statusDiv) {
-            statusDiv.style.display = 'flex';
-        }
-
-        // Start polling for updates
-        pollWatchlistScanStatus();
-
-    } catch (error) {
-        console.error('Error starting watchlist scan:', error);
-        const button = document.getElementById('scan-watchlist-btn');
-        button.disabled = false;
-        button.textContent = 'Scan for New Releases';
-        button.classList.remove('btn-processing');
-        alert(`Error starting scan: ${error.message}`);
-    }
-}
-
-/**
- * Poll watchlist scan status
- */
-function handleWatchlistScanData(data) {
-    const button = document.getElementById('scan-watchlist-btn');
-    const liveActivity = document.getElementById('watchlist-live-activity');
-
-    // Show/hide cancel button based on scan status
-    const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-    if (cancelBtn) {
-        cancelBtn.style.display = data.status === 'scanning' ? '' : 'none';
-    }
-
-    // Update live visual activity display
-    if (liveActivity && data.status === 'scanning') {
-        liveActivity.style.display = 'flex';
-
-        // Update artist image and name
-        const artistImg = document.getElementById('watchlist-artist-img');
-        const artistName = document.getElementById('watchlist-artist-name');
-        if (artistImg && data.current_artist_image_url) {
-            artistImg.src = data.current_artist_image_url;
-            artistImg.style.display = 'block';
-        }
-        if (artistName) {
-            artistName.textContent = data.current_artist_name || 'Processing...';
-        }
-
-        // Update album image and name
-        const albumImg = document.getElementById('watchlist-album-img');
-        const albumName = document.getElementById('watchlist-album-name');
-        if (albumImg && data.current_album_image_url) {
-            albumImg.src = data.current_album_image_url;
-            albumImg.style.display = 'block';
-        } else if (albumImg) {
-            albumImg.style.display = 'none';
-        }
-        if (albumName) {
-            albumName.textContent = data.current_album || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
-        }
-
-        // Update current track
-        const trackName = document.getElementById('watchlist-track-name');
-        if (trackName) {
-            trackName.textContent = data.current_track_name || (data.current_phase === 'fetching_discography' ? 'Fetching releases...' : 'Processing...');
-        }
-
-        // Update wishlist additions feed
-        const additionsFeed = document.getElementById('watchlist-additions-feed');
-        if (additionsFeed) {
-            if (data.recent_wishlist_additions && data.recent_wishlist_additions.length > 0) {
-                additionsFeed.innerHTML = data.recent_wishlist_additions.map(item => `
-                    <div class="watchlist-live-addition-item">
-                        <img src="${item.album_image_url || ''}" alt="" onerror="this.style.display='none';" />
-                        <div class="watchlist-live-addition-item-info">
-                            <div class="watchlist-live-addition-item-track">${item.track_name}</div>
-                            <div class="watchlist-live-addition-item-artist">${item.artist_name}</div>
-                        </div>
-                    </div>
-                `).join('');
-            } else {
-                additionsFeed.innerHTML = '<div class="watchlist-live-addition-empty">No tracks added yet...</div>';
-            }
-        }
-    } else if (liveActivity && data.status !== 'scanning') {
-        liveActivity.style.display = 'none';
-    }
-
-    if (data.status === 'completed') {
-        if (button) {
-            button.disabled = false;
-            button.textContent = 'Scan for New Releases';
-            button.classList.remove('btn-processing');
-        }
-
-        // Hide live activity
-        if (liveActivity) {
-            liveActivity.style.display = 'none';
-        }
-
-        // Show completion message in status div
-        const statusDiv = document.getElementById('watchlist-scan-status');
-        if (statusDiv && data.summary) {
-            const newTracks = data.summary.new_tracks_found || 0;
-            const addedTracks = data.summary.tracks_added_to_wishlist || 0;
-            const totalArtists = data.summary.total_artists || 0;
-            const successfulScans = data.summary.successful_scans || 0;
-
-            let completionMessage = `Scan completed: ${successfulScans}/${totalArtists} artists scanned`;
-            if (newTracks > 0) {
-                completionMessage += `, found ${newTracks} new track${newTracks !== 1 ? 's' : ''}`;
-                if (addedTracks > 0) {
-                    completionMessage += `, added ${addedTracks} to wishlist`;
-                }
-            } else {
-                completionMessage += ', no new tracks found';
-            }
-
-            // Update the scan status display with completion message and summary
-            statusDiv.innerHTML = `
-                <div class="watchlist-scan-completion">
-                    <div class="watchlist-scan-completion-message">${completionMessage}</div>
-                    <div style="font-size: 13px; opacity: 0.8;">
-                        <span class="sync-stat">Artists: ${totalArtists}</span>
-                        <span class="sync-separator"> • </span>
-                        <span class="sync-stat">New tracks: ${newTracks}</span>
-                        <span class="sync-separator"> • </span>
-                        <span class="sync-stat">Added to wishlist: ${addedTracks}</span>
-                    </div>
-                </div>
-            `;
-        }
-
-        // Update watchlist count
-        updateWatchlistButtonCount();
-
-        console.log('Watchlist scan completed:', data.summary);
-
-    } else if (data.status === 'cancelled') {
-        if (button) {
-            button.disabled = false;
-            button.textContent = 'Scan for New Releases';
-            button.classList.remove('btn-processing');
-        }
-
-        // Hide cancel button
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-        if (cancelBtn) {
-            cancelBtn.style.display = 'none';
-            cancelBtn.disabled = false;
-            cancelBtn.textContent = 'Cancel Scan';
-        }
-
-        // Hide live activity
-        if (liveActivity) {
-            liveActivity.style.display = 'none';
-        }
-
-        // Show cancellation message
-        const statusDiv = document.getElementById('watchlist-scan-status');
-        if (statusDiv && data.summary) {
-            const scanned = data.summary.total_artists || 0;
-            const newTracks = data.summary.new_tracks_found || 0;
-            const addedTracks = data.summary.tracks_added_to_wishlist || 0;
-
-            statusDiv.innerHTML = `
-                <div class="watchlist-scan-completion">
-                    <div class="watchlist-scan-completion-message">Scan cancelled after ${scanned} artist${scanned !== 1 ? 's' : ''}</div>
-                    <div style="font-size: 13px; opacity: 0.8;">
-                        <span class="sync-stat">Scanned: ${scanned}</span>
-                        <span class="sync-separator"> &bull; </span>
-                        <span class="sync-stat">New tracks: ${newTracks}</span>
-                        <span class="sync-separator"> &bull; </span>
-                        <span class="sync-stat">Added to wishlist: ${addedTracks}</span>
-                    </div>
-                </div>
-            `;
-        }
-
-        // Update watchlist count
-        updateWatchlistButtonCount();
-
-        showToast('Watchlist scan cancelled', 'info');
-        console.log('Watchlist scan cancelled:', data.summary);
-
-    } else if (data.status === 'error') {
-        if (button) {
-            button.disabled = false;
-            button.textContent = 'Scan for New Releases';
-            button.classList.remove('btn-processing');
-        }
-
-        // Hide cancel button
-        const cancelBtn = document.getElementById('cancel-watchlist-scan-btn');
-        if (cancelBtn) {
-            cancelBtn.style.display = 'none';
-        }
-
-        // Hide live activity
-        if (liveActivity) {
-            liveActivity.style.display = 'none';
-        }
-
-        console.error('Watchlist scan error:', data.error);
-    }
-}
-
-async function pollWatchlistScanStatus() {
-    if (socketConnected) return; // Phase 5: WS handles scan updates
-    try {
-        const response = await fetch('/api/watchlist/scan/status');
-        const data = await response.json();
-
-        if (data.success) {
-            handleWatchlistScanData(data);
-            if (data.status === 'completed' || data.status === 'error' || data.status === 'cancelled') {
-                return; // Stop polling
-            }
-        }
-
-        // Continue polling if still scanning
-        if (data.success && data.status === 'scanning') {
-            setTimeout(pollWatchlistScanStatus, 2000); // Poll every 2 seconds
-        }
-
-    } catch (error) {
-        console.error('Error polling watchlist scan status:', error);
-    }
-}
-
-/**
- * Update similar artists for discovery feature
- */
-async function updateSimilarArtists() {
-    try {
-        const button = document.getElementById('update-similar-artists-btn');
-        const scanButton = document.getElementById('scan-watchlist-btn');
-
-        button.disabled = true;
-        button.textContent = 'Updating...';
-        button.classList.add('btn-processing');
-        if (scanButton) scanButton.disabled = true;
-
-        const response = await fetch('/api/watchlist/update-similar-artists', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to update similar artists');
-        }
-
-        showToast('Updating similar artists in background...', 'success');
-
-        // Poll for completion
-        pollSimilarArtistsUpdate();
-
-    } catch (error) {
-        console.error('Error updating similar artists:', error);
-        const button = document.getElementById('update-similar-artists-btn');
-        const scanButton = document.getElementById('scan-watchlist-btn');
-
-        button.disabled = false;
-        button.textContent = 'Update Similar Artists';
-        button.classList.remove('btn-processing');
-        if (scanButton) scanButton.disabled = false;
-
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Poll similar artists update status
- */
-async function pollSimilarArtistsUpdate() {
-    try {
-        const response = await fetch('/api/watchlist/similar-artists-status');
-        const data = await response.json();
-
-        if (data.success) {
-            const button = document.getElementById('update-similar-artists-btn');
-            const scanButton = document.getElementById('scan-watchlist-btn');
-
-            if (data.status === 'completed') {
-                if (button) {
-                    button.disabled = false;
-                    button.textContent = 'Update Similar Artists';
-                    button.classList.remove('btn-processing');
-                }
-                if (scanButton) scanButton.disabled = false;
-
-                showToast(`Updated similar artists for ${data.artists_processed || 0} artists!`, 'success');
-                return; // Stop polling
-
-            } else if (data.status === 'error') {
-                if (button) {
-                    button.disabled = false;
-                    button.textContent = 'Update Similar Artists';
-                    button.classList.remove('btn-processing');
-                }
-                if (scanButton) scanButton.disabled = false;
-
-                showToast('Error updating similar artists', 'error');
-                return; // Stop polling
-            } else if (data.status === 'running') {
-                // Update button text with progress
-                if (button && data.current_artist) {
-                    button.textContent = `Updating... (${data.artists_processed || 0}/${data.total_artists || 0})`;
-                }
-            }
-        }
-
-        // Continue polling if still running
-        if (data.success && data.status === 'running') {
-            setTimeout(pollSimilarArtistsUpdate, 1000); // Poll every 1 second
-        }
-
-    } catch (error) {
-        console.error('Error polling similar artists update:', error);
-        const button = document.getElementById('update-similar-artists-btn');
-        const scanButton = document.getElementById('scan-watchlist-btn');
-
-        if (button) {
-            button.disabled = false;
-            button.textContent = 'Update Similar Artists';
-            button.classList.remove('btn-processing');
-        }
-        if (scanButton) scanButton.disabled = false;
-    }
-}
-
-/**
- * Remove artist from watchlist via modal
- */
-async function removeFromWatchlistModal(artistId, artistName) {
-    try {
-        const response = await fetch('/api/watchlist/remove', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to remove from watchlist');
-        }
-
-        console.log(`❌ Removed ${artistName} from watchlist`);
-
-        // Close detail view if open
-        closeWatchlistArtistDetailView();
-
-        // Refresh the watchlist page
-        watchlistPageState.isInitialized = false;
-        await initializeWatchlistPage();
-
-        // Update button count
-        updateWatchlistButtonCount();
-
-        // Update any visible artist cards
-        updateArtistCardWatchlistStatus();
-
-    } catch (error) {
-        console.error('Error removing from watchlist:', error);
-        alert(`Error removing ${artistName} from watchlist: ${error.message}`);
-    }
-}
-
-
-/**
- * Get visible checked checkboxes (not hidden by search filter)
- */
-function getVisibleCheckedWatchlist() {
-    return Array.from(document.querySelectorAll('.watchlist-select-cb:checked')).filter(cb => {
-        const item = cb.closest('.watchlist-artist-card');
-        return item && item.style.display !== 'none';
-    });
-}
-
-/**
- * Update the batch action bar based on checkbox selection
- */
-function updateWatchlistBatchBar() {
-    const checked = getVisibleCheckedWatchlist();
-    const countEl = document.getElementById('watchlist-batch-count');
-    const removeBtn = document.getElementById('watchlist-batch-remove-btn');
-    const selectAllCb = document.getElementById('watchlist-select-all-cb');
-
-    if (checked.length > 0) {
-        countEl.textContent = `${checked.length} selected`;
-        removeBtn.style.display = '';
-    } else {
-        countEl.textContent = '';
-        removeBtn.style.display = 'none';
-    }
-
-    // Update select-all checkbox state
-    if (selectAllCb) {
-        const visible = Array.from(document.querySelectorAll('.watchlist-select-cb')).filter(cb => {
-            const card = cb.closest('.watchlist-artist-card');
-            return card && card.style.display !== 'none';
-        });
-        selectAllCb.checked = visible.length > 0 && checked.length === visible.length;
-        selectAllCb.indeterminate = checked.length > 0 && checked.length < visible.length;
-    }
-}
-
-function toggleWatchlistSelectAll(checked) {
-    const checkboxes = document.querySelectorAll('.watchlist-select-cb');
-    checkboxes.forEach(cb => {
-        const card = cb.closest('.watchlist-artist-card');
-        if (card && card.style.display !== 'none') {
-            cb.checked = checked;
-        }
-    });
-    updateWatchlistBatchBar();
-}
-
-/**
- * Batch remove selected artists from watchlist
- */
-async function batchRemoveFromWatchlist() {
-    const checked = getVisibleCheckedWatchlist();
-    if (checked.length === 0) return;
-
-    const count = checked.length;
-    if (!await showConfirmDialog({ title: 'Remove Artists', message: `Remove ${count} artist${count !== 1 ? 's' : ''} from your watchlist?`, confirmText: 'Remove', destructive: true })) return;
-
-    const artistIds = checked.map(cb => cb.getAttribute('data-artist-id'));
-
-    try {
-        const response = await fetch('/api/watchlist/remove-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_ids: artistIds })
-        });
-
-        const data = await response.json();
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to remove artists');
-        }
-
-        console.log(`❌ Batch removed ${data.removed} artists from watchlist`);
-
-        // Refresh the watchlist page
-        watchlistPageState.isInitialized = false;
-        await initializeWatchlistPage();
-
-        // Update button count
-        updateWatchlistButtonCount();
-
-        // Update any visible artist cards
-        updateArtistCardWatchlistStatus();
-
-    } catch (error) {
-        console.error('Error batch removing from watchlist:', error);
-        alert(`Error removing artists: ${error.message}`);
-    }
-}
-
-// --- Metadata Updater Functions ---
-
-// Global state for metadata update polling
-let metadataUpdatePolling = false;
-let metadataUpdateInterval = null;
-
-/**
- * Handle metadata update button click
- */
-async function handleMetadataUpdateButtonClick() {
-    const button = document.getElementById('metadata-update-button');
-    const currentAction = button.textContent;
-
-    if (currentAction === 'Begin Update') {
-        // Get refresh interval from dropdown
-        const refreshSelect = document.getElementById('metadata-refresh-interval');
-        const refreshIntervalDays = refreshSelect.value !== undefined ? parseInt(refreshSelect.value) : 30;
-
-        try {
-            button.disabled = true;
-            button.textContent = 'Starting...';
-
-            const response = await fetch('/api/metadata/start', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ refresh_interval_days: refreshIntervalDays })
-            });
-
-            const data = await response.json();
-            if (!data.success) {
-                throw new Error(data.error || 'Failed to start metadata update');
-            }
-
-            showToast('Metadata update started!', 'success');
-
-            // Start polling for status updates
-            startMetadataUpdatePolling();
-
-        } catch (error) {
-            console.error('Error starting metadata update:', error);
-            button.disabled = false;
-            button.textContent = 'Begin Update';
-            showToast(`Error: ${error.message}`, 'error');
-        }
-    } else {
-        // Stop metadata update
-        try {
-            button.disabled = true;
-            button.textContent = 'Stopping...';
-
-            const response = await fetch('/api/metadata/stop', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' }
-            });
-
-            if (!response.ok) {
-                throw new Error('Failed to stop metadata update');
-            }
-
-        } catch (error) {
-            console.error('Error stopping metadata update:', error);
-            button.disabled = false;
-            button.textContent = 'Stop Update';
-        }
-    }
-}
-
-/**
- * Start polling for metadata update status
- */
-function startMetadataUpdatePolling() {
-    if (metadataUpdatePolling) return; // Already polling
-
-    metadataUpdatePolling = true;
-    metadataUpdateInterval = setInterval(checkMetadataUpdateStatus, 1000); // Poll every second
-
-    // Also check immediately
-    checkMetadataUpdateStatus();
-}
-
-/**
- * Stop polling for metadata update status
- */
-function stopMetadataUpdatePolling() {
-    metadataUpdatePolling = false;
-    if (metadataUpdateInterval) {
-        clearInterval(metadataUpdateInterval);
-        metadataUpdateInterval = null;
-    }
-}
-
-/**
- * Check current metadata update status and update UI
- */
-async function checkMetadataUpdateStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/metadata/status');
-        const data = await response.json();
-
-        if (data.success && data.status) {
-            updateMetadataProgressUI(data.status);
-
-            // Stop polling if completed or error
-            if (data.status.status === 'completed' || data.status.status === 'error') {
-                stopMetadataUpdatePolling();
-            }
-        }
-
-    } catch (error) {
-        console.warn('Could not fetch metadata update status:', error);
-    }
-}
-
-function updateMetadataStatusFromData(data) {
-    if (!data.success || !data.status) return;
-    const prev = _lastToolStatus['metadata'];
-    _lastToolStatus['metadata'] = data.status.status;
-    if (prev !== undefined && data.status.status === prev && data.status.status !== 'running' && data.status.status !== 'stopping') return;
-    updateMetadataProgressUI(data.status);
-    if (data.status.status === 'completed' || data.status.status === 'error') {
-        stopMetadataUpdatePolling();
-    }
-}
-
-/**
- * Update metadata progress UI elements
- */
-function updateMetadataProgressUI(status) {
-    const button = document.getElementById('metadata-update-button');
-    const phaseLabel = document.getElementById('metadata-phase-label');
-    const progressLabel = document.getElementById('metadata-progress-label');
-    const progressBar = document.getElementById('metadata-progress-bar');
-    const refreshSelect = document.getElementById('metadata-refresh-interval');
-
-    if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
-
-    if (status.status === 'running') {
-        button.textContent = 'Stop Update';
-        button.disabled = false;
-        refreshSelect.disabled = true;
-
-        // Update current artist display
-        const currentArtist = status.current_artist || 'Processing...';
-        phaseLabel.textContent = `Current Artist: ${currentArtist}`;
-
-        // Update progress
-        const processed = status.processed || 0;
-        const total = status.total || 0;
-        const percentage = status.percentage || 0;
-
-        progressLabel.textContent = `${processed} / ${total} artists (${percentage.toFixed(1)}%)`;
-        progressBar.style.width = `${percentage}%`;
-
-    } else if (status.status === 'stopping') {
-        button.textContent = 'Stopping...';
-        button.disabled = true;
-        phaseLabel.textContent = 'Current Artist: Stopping...';
-
-    } else if (status.status === 'completed') {
-        button.textContent = 'Begin Update';
-        button.disabled = false;
-        refreshSelect.disabled = false;
-
-        phaseLabel.textContent = 'Current Artist: Completed';
-
-        const processed = status.processed || 0;
-        const successful = status.successful || 0;
-        const failed = status.failed || 0;
-
-        progressLabel.textContent = `Completed: ${processed} processed, ${successful} successful, ${failed} failed`;
-        progressBar.style.width = '100%';
-
-        showToast(`Metadata update completed: ${successful} artists updated, ${failed} failed`, 'success');
-
-    } else if (status.status === 'error') {
-        button.textContent = 'Begin Update';
-        button.disabled = false;
-        refreshSelect.disabled = false;
-
-        phaseLabel.textContent = 'Current Artist: Error occurred';
-        progressLabel.textContent = status.error || 'Unknown error';
-        progressBar.style.width = '0%';
-
-    } else {
-        // Idle state
-        button.textContent = 'Begin Update';
-        button.disabled = false;
-        refreshSelect.disabled = false;
-
-        phaseLabel.textContent = 'Current Artist: Not running';
-        progressLabel.textContent = '0 / 0 artists (0.0%)';
-        progressBar.style.width = '0%';
-    }
-}
-
-/**
- * Check active media server and hide metadata updater if not Plex
- */
-async function checkAndHideMetadataUpdaterForNonPlex() {
-    try {
-        const response = await fetch('/api/active-media-server');
-        const data = await response.json();
-
-        if (data.success) {
-            const metadataCard = document.getElementById('metadata-updater-card');
-            if (metadataCard) {
-                // Show metadata updater only for Plex and Jellyfin
-                if (data.active_server === 'plex' || data.active_server === 'jellyfin') {
-                    metadataCard.style.display = 'flex';
-                    console.log(`Metadata updater shown: ${data.active_server} is active server`);
-
-                    // Update the header text to reflect the current server
-                    const headerElement = metadataCard.querySelector('.card-header h3');
-                    if (headerElement) {
-                        const serverDisplayName = data.active_server.charAt(0).toUpperCase() + data.active_server.slice(1);
-                        headerElement.textContent = `${serverDisplayName} Metadata Updater`;
-                    }
-
-                    // Update the description based on the server type
-                    const descElement = metadataCard.querySelector('.metadata-updater-description');
-                    if (descElement) {
-                        if (data.active_server === 'jellyfin') {
-                            descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Jellyfin server for artists without photos.';
-                        } else {
-                            descElement.textContent = 'Download and upload high-quality artist images from Spotify to your Plex server for artists without photos.';
-                        }
-                    }
-                } else {
-                    // Hide metadata updater for Navidrome
-                    metadataCard.style.display = 'none';
-                    console.log(`Metadata updater hidden: ${data.active_server} does not support image uploads`);
-                }
-            }
-        }
-    } catch (error) {
-        console.warn('Could not check active media server for metadata updater visibility:', error);
-    }
-}
-
-async function checkAndShowMediaScanForPlex() {
-    /**
-     * Show media scan tool only for Plex (Jellyfin/Navidrome auto-scan)
-     */
-    try {
-        const response = await fetch('/api/active-media-server');
-        const data = await response.json();
-
-        if (data.success) {
-            const mediaScanCard = document.getElementById('media-scan-card');
-            if (mediaScanCard) {
-                // Show media scan tool only for Plex
-                if (data.active_server === 'plex') {
-                    mediaScanCard.style.display = 'flex';
-                    console.log('Media scan tool shown: Plex is active server');
-                } else {
-                    // Hide for Jellyfin/Navidrome (they auto-scan)
-                    mediaScanCard.style.display = 'none';
-                    console.log(`Media scan tool hidden: ${data.active_server} auto-scans`);
-                }
-            }
-        }
-    } catch (error) {
-        console.warn('Could not check active media server for media scan visibility:', error);
-    }
-}
-
-async function handleMediaScanButtonClick() {
-    /**
-     * Trigger a manual Plex media library scan
-     */
-    const button = document.getElementById('media-scan-button');
-    const phaseLabel = document.getElementById('media-scan-phase-label');
-    const progressBar = document.getElementById('media-scan-progress-bar');
-    const progressLabel = document.getElementById('media-scan-progress-label');
-    const statusValue = document.getElementById('media-scan-status');
-
-    if (!button) return;
-
-    try {
-        // Disable button and update UI
-        button.disabled = true;
-        phaseLabel.textContent = 'Requesting scan...';
-        progressBar.style.width = '30%';
-        progressLabel.textContent = 'Sending scan request to Plex';
-        statusValue.textContent = 'Scanning...';
-        statusValue.style.color = 'rgb(var(--accent-rgb))';
-
-        // Request scan (database update handled by system automation)
-        const response = await fetch('/api/scan/request', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                reason: 'Manual scan triggered from dashboard'
-            })
-        });
-
-        const result = await response.json();
-
-        if (result.success) {
-            // Get delay from API response (graceful fallback to 60 if not provided)
-            const delaySeconds = (result.scan_info && result.scan_info.delay_seconds) || 60;
-            let remainingSeconds = delaySeconds;
-            let countdownInterval = null;
-            let pollInterval = null;
-
-            // Update last scan time
-            const lastTimeEl = document.getElementById('media-scan-last-time');
-            if (lastTimeEl) {
-                const now = new Date();
-                lastTimeEl.textContent = now.toLocaleTimeString();
-            }
-
-            // Start countdown timer (visual feedback during delay)
-            phaseLabel.textContent = 'Scan scheduled...';
-            progressBar.style.width = '0%';
-
-            countdownInterval = setInterval(() => {
-                remainingSeconds--;
-
-                // Update progress bar (0% -> 100% over delay period)
-                const progress = ((delaySeconds - remainingSeconds) / delaySeconds) * 100;
-                progressBar.style.width = `${progress}%`;
-
-                // Update progress label with countdown
-                if (remainingSeconds > 0) {
-                    progressLabel.textContent = `Starting scan in ${remainingSeconds}s...`;
-                } else {
-                    progressLabel.textContent = 'Scan starting now...';
-                }
-
-                // When countdown reaches 0, start polling
-                if (remainingSeconds <= 0) {
-                    clearInterval(countdownInterval);
-
-                    // Transition to scanning phase
-                    phaseLabel.textContent = 'Scan in progress...';
-                    progressBar.style.width = '100%';
-                    progressLabel.textContent = 'Media server is scanning library...';
-                    showToast('📡 Media scan started', 'success', 3000);
-
-                    // Start polling for scan completion (5 minutes = 150 polls × 2s)
-                    let pollCount = 0;
-                    const maxPolls = 150; // 5 minutes
-
-                    pollInterval = setInterval(async () => {
-                        if (socketConnected) return; // Phase 5: WS handles scan status
-                        pollCount++;
-
-                        if (pollCount > maxPolls) {
-                            // Polling timeout after 5 minutes
-                            clearInterval(pollInterval);
-                            button.disabled = false;
-                            phaseLabel.textContent = 'Scan completed';
-                            progressBar.style.width = '0%';
-                            progressLabel.textContent = 'Ready for next scan';
-                            statusValue.textContent = 'Idle';
-                            statusValue.style.color = '#b3b3b3';
-                            showToast('✅ Media scan completed', 'success', 3000);
-                            return;
-                        }
-
-                        try {
-                            const statusResponse = await fetch('/api/scan/status');
-                            const statusData = await statusResponse.json();
-
-                            if (statusData.success && statusData.status) {
-                                const status = statusData.status;
-
-                                // Update status display
-                                if (status.is_scanning) {
-                                    phaseLabel.textContent = 'Media server scanning...';
-                                    progressLabel.textContent = status.progress_message || 'Scan in progress';
-                                } else if (status.status === 'idle') {
-                                    // Scan completed
-                                    clearInterval(pollInterval);
-                                    button.disabled = false;
-                                    phaseLabel.textContent = 'Scan completed successfully';
-                                    progressBar.style.width = '0%';
-                                    progressLabel.textContent = 'Ready for next scan';
-                                    statusValue.textContent = 'Idle';
-                                    statusValue.style.color = '#b3b3b3';
-                                    showToast('✅ Media scan completed', 'success', 3000);
-                                }
-                            }
-                        } catch (pollError) {
-                            console.debug('Scan status poll error:', pollError);
-                        }
-                    }, 2000); // Poll every 2 seconds
-                }
-            }, 1000); // Update countdown every second
-
-        } else {
-            // Error occurred
-            showToast(`❌ Scan request failed: ${result.error}`, 'error', 5000);
-            button.disabled = false;
-            phaseLabel.textContent = 'Scan failed';
-            progressBar.style.width = '0%';
-            progressLabel.textContent = result.error || 'Unknown error';
-            statusValue.textContent = 'Error';
-            statusValue.style.color = '#f44336';
-        }
-
-    } catch (error) {
-        console.error('Error requesting media scan:', error);
-        showToast('❌ Failed to request media scan', 'error', 3000);
-        button.disabled = false;
-        phaseLabel.textContent = 'Error';
-        progressBar.style.width = '0%';
-        progressLabel.textContent = error.message;
-        statusValue.textContent = 'Error';
-        statusValue.style.color = '#f44336';
-    }
-}
-
-/**
- * Check for ongoing metadata update and restore state on page load
- */
-async function checkAndRestoreMetadataUpdateState() {
-    try {
-        const response = await fetch('/api/metadata/status');
-        const data = await response.json();
-
-        if (data.success && data.status) {
-            const status = data.status;
-
-            // If metadata update is running, restore the UI state and start polling
-            if (status.status === 'running') {
-                console.log('Found ongoing metadata update, restoring state...');
-                updateMetadataProgressUI(status);
-                startMetadataUpdatePolling();
-            } else if (status.status === 'completed' || status.status === 'error') {
-                // Show final state but don't start polling
-                updateMetadataProgressUI(status);
-            }
-        }
-    } catch (error) {
-        console.warn('Could not check metadata update state on page load:', error);
-    }
-}
-
-// --- Live Log Viewer Functions ---
-
-// Global state for log polling
-let logPolling = false;
-let logInterval = null;
-let lastLogCount = 0;
-
-/**
- * Initialize the live log viewer for sync page
- */
-function initializeLiveLogViewer() {
-    const logArea = document.getElementById('sync-log-area');
-    if (!logArea) return;
-
-    // Set initial content
-    logArea.value = 'Loading activity feed...';
-
-    // Start log polling
-    startLogPolling();
-
-    // Initial load
-    loadLogs();
-}
-
-/**
- * Start polling for logs
- */
-function startLogPolling() {
-    if (logPolling) return; // Already polling
-
-    logPolling = true;
-    logInterval = setInterval(loadLogs, 3000); // Poll every 3 seconds
-    console.log('📝 Started activity feed polling for sync page');
-}
-
-/**
- * Stop polling for logs
- */
-function stopLogPolling() {
-    logPolling = false;
-    if (logInterval) {
-        clearInterval(logInterval);
-        logInterval = null;
-        console.log('📝 Stopped log polling');
-    }
-}
-
-/**
- * Load and display activity feed as logs
- */
-async function loadLogs() {
-    if (socketConnected) return; // WebSocket handles this
-    try {
-        const response = await fetch('/api/logs');
-        const data = await response.json();
-        updateLogsFromData(data);
-    } catch (error) {
-        console.warn('Could not load activity logs for sync page:', error);
-        const logArea = document.getElementById('sync-log-area');
-        if (logArea && (logArea.value === 'Loading logs...' || logArea.value === '')) {
-            logArea.value = 'Error loading activity feed. Check console for details.';
-        }
-    }
-}
-
-function updateLogsFromData(data) {
-    if (!data.logs || !Array.isArray(data.logs)) return;
-    const logArea = document.getElementById('sync-log-area');
-    if (!logArea) return;
-
-    const logText = data.logs.join('\n');
-
-    // Store current scroll state
-    const wasAtTop = logArea.scrollTop <= 10;
-    const wasUserScrolled = logArea.scrollTop < logArea.scrollHeight - logArea.clientHeight - 10;
-
-    // Update content only if it has changed
-    if (logArea.value !== logText) {
-        logArea.value = logText;
-
-        // Smart scrolling: stay at top for new entries, preserve user position if scrolled
-        if (wasAtTop || !wasUserScrolled) {
-            logArea.scrollTop = 0; // Stay at top since newest entries are now at top
-        }
-    }
-}
-
-/**
- * Stop log polling when leaving sync page
- */
-function cleanupSyncPageLogs() {
-    stopLogPolling();
-}
-
-// --- Global Cleanup on Page Unload ---
-// Note: Automatic wishlist processing now runs server-side and continues even when browser is closed
-// ===============================
-// LIBRARY PAGE FUNCTIONALITY
-// ===============================
-
-// Library page state
-const libraryPageState = {
-    isInitialized: false,
-    currentSearch: "",
-    currentLetter: "all",
-    currentPage: 1,
-    limit: 75,
-    debounceTimer: null,
-    watchlistFilter: "all",
-    sourceFilter: ""
-};
-
-function initializeLibraryPage() {
-    console.log("🔧 Initializing Library page...");
-
-    try {
-        // Initialize search functionality
-        initializeLibrarySearch();
-
-        // Initialize watchlist filter
-        initializeWatchlistFilter();
-
-        // Initialize metadata source filter
-        initializeSourceFilter();
-
-        // Initialize alphabet selector
-        initializeAlphabetSelector();
-
-        // Initialize pagination
-        initializeLibraryPagination();
-
-        // Load initial data
-        loadLibraryArtists();
-
-        // Show download bubbles if any exist
-        showLibraryDownloadsSection();
-
-        libraryPageState.isInitialized = true;
-        console.log("✅ Library page initialized successfully");
-
-    } catch (error) {
-        console.error("❌ Error initializing Library page:", error);
-        showToast("Failed to initialize Library page", "error");
-    }
-}
-
-function initializeLibrarySearch() {
-    const searchInput = document.getElementById("library-search-input");
-    if (!searchInput) return;
-
-    searchInput.addEventListener("input", (e) => {
-        const query = e.target.value.trim();
-
-        // Clear existing debounce timer
-        if (libraryPageState.debounceTimer) {
-            clearTimeout(libraryPageState.debounceTimer);
-        }
-
-        // Debounce search requests
-        libraryPageState.debounceTimer = setTimeout(() => {
-            libraryPageState.currentSearch = query;
-            libraryPageState.currentPage = 1; // Reset to first page
-            loadLibraryArtists();
-        }, 300);
-    });
-
-    // Clear search on Escape key
-    searchInput.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-            searchInput.value = "";
-            libraryPageState.currentSearch = "";
-            libraryPageState.currentPage = 1;
-            loadLibraryArtists();
-        }
-    });
-}
-
-function initializeWatchlistFilter() {
-    const filterButtons = document.querySelectorAll(".watchlist-filter-btn");
-    const watchAllBtn = document.getElementById("library-watchlist-all-btn");
-
-    filterButtons.forEach(button => {
-        button.addEventListener("click", () => {
-            const filter = button.getAttribute("data-filter");
-
-            // Update active state
-            filterButtons.forEach(btn => btn.classList.remove("active"));
-            button.classList.add("active");
-
-            // Show/hide "Watch All Unwatched" button
-            if (watchAllBtn) {
-                if (filter === "unwatched") {
-                    watchAllBtn.classList.remove("hidden");
-                } else {
-                    watchAllBtn.classList.add("hidden");
-                }
-            }
-
-            // Update state and reload
-            libraryPageState.watchlistFilter = filter;
-            libraryPageState.currentPage = 1;
-            loadLibraryArtists();
-        });
-    });
-}
-
-function initializeSourceFilter() {
-    const select = document.getElementById('library-source-filter');
-    if (!select) return;
-    select.addEventListener('change', () => {
-        libraryPageState.sourceFilter = select.value;
-        libraryPageState.currentPage = 1;
-        loadLibraryArtists();
-    });
-}
-
-function initializeAlphabetSelector() {
-    const alphabetButtons = document.querySelectorAll(".alphabet-btn");
-
-    alphabetButtons.forEach(button => {
-        button.addEventListener("click", () => {
-            const letter = button.getAttribute("data-letter");
-
-            // Update active state
-            alphabetButtons.forEach(btn => btn.classList.remove("active"));
-            button.classList.add("active");
-
-            // Update state and load data
-            libraryPageState.currentLetter = letter;
-            libraryPageState.currentPage = 1; // Reset to first page
-            loadLibraryArtists();
-        });
-    });
-}
-
-function initializeLibraryPagination() {
-    const prevBtn = document.getElementById("prev-page-btn");
-    const nextBtn = document.getElementById("next-page-btn");
-
-    if (prevBtn) {
-        prevBtn.addEventListener("click", () => {
-            if (libraryPageState.currentPage > 1) {
-                libraryPageState.currentPage--;
-                loadLibraryArtists();
-            }
-        });
-    }
-
-    if (nextBtn) {
-        nextBtn.addEventListener("click", () => {
-            libraryPageState.currentPage++;
-            loadLibraryArtists();
-        });
-    }
-}
-
-async function loadLibraryArtists() {
-    try {
-        // Show loading state
-        showLibraryLoading(true);
-
-        // Build query parameters
-        const params = new URLSearchParams({
-            search: libraryPageState.currentSearch,
-            letter: libraryPageState.currentLetter,
-            page: libraryPageState.currentPage,
-            limit: libraryPageState.limit,
-            watchlist: libraryPageState.watchlistFilter
-        });
-        if (libraryPageState.sourceFilter) params.set('source_filter', libraryPageState.sourceFilter);
-
-        // Fetch artists from API
-        const response = await fetch(`/api/library/artists?${params}`);
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || "Failed to load artists");
-        }
-
-        // Update UI with artists
-        displayLibraryArtists(data.artists);
-        updateLibraryPagination(data.pagination);
-        updateLibraryStats(data.pagination.total_count);
-
-        // Hide loading state
-        showLibraryLoading(false);
-
-        // Show empty state if no artists
-        if (data.artists.length === 0) {
-            showLibraryEmpty(true);
-        } else {
-            showLibraryEmpty(false);
-        }
-
-    } catch (error) {
-        console.error("❌ Error loading library artists:", error);
-        showToast("Failed to load artists", "error");
-        showLibraryLoading(false);
-        showLibraryEmpty(true);
-    }
-}
-
-function displayLibraryArtists(artists) {
-    const grid = document.getElementById("library-artists-grid");
-    if (!grid) return;
-
-    // Build all cards as HTML string for single DOM write (much faster than createElement loop)
-    grid.innerHTML = artists.map((artist, i) => {
-        try { return buildLibraryArtistCardHTML(artist, i); }
-        catch (e) { console.error('Failed to render artist card:', artist.name, e); return ''; }
-    }).join('');
-
-    // Attach click handlers via event delegation (single listener vs 75+ individual)
-    grid.onclick = (e) => {
-        // Ignore clicks on badge icons (they open external links / toggle watchlist)
-        const badge = e.target.closest('.source-card-icon');
-        if (badge) {
-            e.stopPropagation();
-            const url = badge.dataset.url;
-            if (url) { window.open(url, '_blank'); return; }
-            // Watchlist toggle
-            if (badge.classList.contains('watch-card-icon') && badge.dataset.unwatched) {
-                const card = badge.closest('.library-artist-card');
-                if (card) {
-                    const artistId = card.dataset.artistId;
-                    const artistName = card.dataset.artistName;
-                    const artist = artists.find(a => String(a.id) === artistId);
-                    if (artist) toggleLibraryCardWatchlist(badge, artist);
-                }
-            }
-            return;
-        }
-        const card = e.target.closest('.library-artist-card');
-        if (card) {
-            navigateToArtistDetail(card.dataset.artistId, card.dataset.artistName);
-        }
-    };
-}
-
-function buildLibraryArtistCardHTML(artist, index) {
-    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    const delay = Math.min(index * 20, 600); // Cap at 600ms so last cards don't wait too long
-
-    // Build badge icons
-    const badges = [];
-    if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify', url: `https://open.spotify.com/artist/${artist.spotify_artist_id}` });
-    if (artist.musicbrainz_id) badges.push({ logo: MUSICBRAINZ_LOGO_URL, fb: 'MB', title: 'MusicBrainz', url: `https://musicbrainz.org/artist/${artist.musicbrainz_id}` });
-    if (artist.deezer_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer', url: `https://www.deezer.com/artist/${artist.deezer_id}` });
-    if (artist.audiodb_id) {
-        const slug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
-        badges.push({ logo: typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', fb: 'ADB', title: 'AudioDB', url: `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${slug}` });
-    }
-    if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music', url: `https://music.apple.com/artist/${artist.itunes_artist_id}` });
-    if (artist.lastfm_url) badges.push({ logo: LASTFM_LOGO_URL, fb: 'LFM', title: 'Last.fm', url: artist.lastfm_url });
-    if (artist.genius_url) badges.push({ logo: GENIUS_LOGO_URL, fb: 'GEN', title: 'Genius', url: artist.genius_url });
-    if (artist.tidal_id) badges.push({ logo: TIDAL_LOGO_URL, fb: 'TD', title: 'Tidal', url: `https://tidal.com/browse/artist/${artist.tidal_id}` });
-    if (artist.qobuz_id) badges.push({ logo: QOBUZ_LOGO_URL, fb: 'Qz', title: 'Qobuz', url: `https://www.qobuz.com/artist/${artist.qobuz_id}` });
-    if (artist.discogs_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs', url: `https://www.discogs.com/artist/${artist.discogs_id}` });
-    if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push({ logo: '/static/trans2.png', fb: 'SS', title: `SoulID: ${artist.soul_id}`, url: null });
-
-    // Watchlist badge
-    const hasActiveSourceId = currentMusicSourceName === 'iTunes'
-        ? (artist.itunes_artist_id || artist.spotify_artist_id)
-        : (artist.spotify_artist_id || artist.itunes_artist_id);
-    let watchBadgeHTML = '';
-    if (artist.is_watched) {
-        watchBadgeHTML = `<div class="watch-card-icon watched source-card-icon" title="On your watchlist"><span class="watch-icon-emoji">👁️</span><span class="watch-icon-label">Watching</span></div>`;
-    } else if (hasActiveSourceId) {
-        watchBadgeHTML = `<div class="watch-card-icon source-card-icon" data-unwatched="1" title="Add to Watchlist" style="opacity:0.4"><span class="watch-icon-emoji">👁️</span><span class="watch-icon-label">Watch</span></div>`;
-    }
-
-    const maxPerColumn = 6;
-    const needsOverflow = badges.length > maxPerColumn;
-    const badgeIcon = (b) => `<div class="source-card-icon" title="${_esc(b.title)}" ${b.url ? `data-url="${_esc(b.url)}"` : ''}>${b.logo ? `<img src="${_esc(b.logo)}" style="width:16px;height:auto;display:block" onerror="this.parentNode.textContent='${b.fb}'">` : `<span style="font-size:9px;font-weight:700">${b.fb}</span>`}</div>`;
-
-    let badgeContainerHTML = '';
-    if (badges.length > 0 || watchBadgeHTML) {
-        if (needsOverflow) {
-            badgeContainerHTML = `<div class="card-badge-container">
-                <div class="badge-overflow-column">${watchBadgeHTML}${badges.slice(maxPerColumn).map(badgeIcon).join('')}</div>
-                <div class="badge-primary-column">${badges.slice(0, maxPerColumn).map(badgeIcon).join('')}</div>
-            </div>`;
-        } else {
-            badgeContainerHTML = `<div class="card-badge-container">${badges.map(badgeIcon).join('')}${watchBadgeHTML}</div>`;
-        }
-    }
-
-    // Image
-    const hasImage = artist.image_url && artist.image_url.trim() !== '';
-    const deezerFallback = artist.deezer_id ? `if(!this.dataset.triedDeezer){this.dataset.triedDeezer='true';this.src='https://api.deezer.com/artist/${artist.deezer_id}/image?size=big'}else{this.parentNode.innerHTML='<div class=\\'library-artist-image-fallback\\'>🎵</div>'}` : `this.parentNode.innerHTML='<div class=\\'library-artist-image-fallback\\'>🎵</div>'`;
-    const imageHTML = hasImage
-        ? `<div class="library-artist-image"><img src="${_esc(artist.image_url)}" alt="${_esc(artist.name)}" loading="lazy" onerror="${deezerFallback}"></div>`
-        : `<div class="library-artist-image"><div class="library-artist-image-fallback">🎵</div></div>`;
-
-    // Track stats
-    const trackStat = artist.track_count > 0 ? `<span class="library-artist-stat">${artist.track_count} track${artist.track_count !== 1 ? 's' : ''}</span>` : '';
-
-    return `<div class="library-artist-card" data-artist-id="${_esc(String(artist.id))}" data-artist-name="${_esc(artist.name)}" style="position:relative;animation:cardFadeIn 0.35s cubic-bezier(0.4,0,0.2,1) ${delay}ms both">
-        ${badgeContainerHTML}
-        ${imageHTML}
-        <div class="library-artist-info">
-            <h3 class="library-artist-name" title="${_esc(artist.name)}">${_esc(artist.name)}</h3>
-            <div class="library-artist-stats">${trackStat}</div>
-        </div>
-    </div>`;
-}
-
-function updateLibraryPagination(pagination) {
-    const prevBtn = document.getElementById("prev-page-btn");
-    const nextBtn = document.getElementById("next-page-btn");
-    const pageInfo = document.getElementById("page-info");
-    const paginationContainer = document.getElementById("library-pagination");
-
-    if (!paginationContainer) return;
-
-    // Update button states
-    if (prevBtn) {
-        prevBtn.disabled = !pagination.has_prev;
-    }
-
-    if (nextBtn) {
-        nextBtn.disabled = !pagination.has_next;
-    }
-
-    // Update page info
-    if (pageInfo) {
-        pageInfo.textContent = `Page ${pagination.page} of ${pagination.total_pages}`;
-    }
-
-    // Show/hide pagination based on total pages
-    if (pagination.total_pages > 1) {
-        paginationContainer.classList.remove("hidden");
-    } else {
-        paginationContainer.classList.add("hidden");
-    }
-}
-
-function updateLibraryStats(totalCount) {
-    const countElement = document.getElementById("library-artist-count");
-    if (countElement) {
-        countElement.textContent = totalCount;
-    }
-}
-
-function showLibraryLoading(show) {
-    const loadingElement = document.getElementById("library-loading");
-    if (loadingElement) {
-        if (show) {
-            loadingElement.classList.remove("hidden");
-        } else {
-            loadingElement.classList.add("hidden");
-        }
-    }
-}
-
-function showLibraryEmpty(show) {
-    const emptyElement = document.getElementById("library-empty");
-    if (emptyElement) {
-        if (show) {
-            emptyElement.classList.remove("hidden");
-        } else {
-            emptyElement.classList.add("hidden");
-        }
-    }
-}
-
-async function openWatchAllUnwatchedModal() {
-    if (document.getElementById('watch-all-modal-overlay')) return;
-
-    const sourceIdField = currentMusicSourceName === 'iTunes' ? 'itunes_artist_id'
-        : currentMusicSourceName === 'Deezer' ? 'deezer_id' : 'spotify_artist_id';
-    const sourceName = currentMusicSourceName || 'Spotify';
-
-    const overlay = document.createElement('div');
-    overlay.id = 'watch-all-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) closeWatchAllUnwatchedModal(); };
-
-    overlay.innerHTML = `
-        <div class="watch-all-modal">
-            <div class="watch-all-header">
-                <div class="watch-all-header-content">
-                    <div class="watch-all-header-icon">&#128065;</div>
-                    <div>
-                        <h2 class="watch-all-title">Watch All Unwatched</h2>
-                        <p class="watch-all-subtitle">Add unwatched artists with ${_esc(sourceName)} IDs to your watchlist</p>
-                    </div>
-                </div>
-                <button class="watch-all-close" onclick="closeWatchAllUnwatchedModal()">&times;</button>
-            </div>
-            <div class="watch-all-body">
-                <div class="watch-all-loading-state">
-                    <div class="watch-all-loading-spinner"></div>
-                    <div class="watch-all-loading-text">Loading unwatched artists...</div>
-                    <div class="watch-all-loading-count" id="watch-all-load-count"></div>
-                </div>
-            </div>
-            <div class="watch-all-footer">
-                <button class="watch-all-btn watch-all-btn-cancel" onclick="closeWatchAllUnwatchedModal()">Cancel</button>
-                <button class="watch-all-btn watch-all-btn-primary" id="watch-all-confirm-btn" disabled>Watch All</button>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Fetch all unwatched artists paginated (SQLite variable limit safe)
-    try {
-        const eligible = [];
-        const ineligible = [];
-        let page = 1;
-        const pageSize = 400;
-        const countEl = document.getElementById('watch-all-load-count');
-
-        while (true) {
-            if (!document.getElementById('watch-all-modal-overlay')) return;
-            if (countEl) countEl.textContent = `${eligible.length + ineligible.length} artists loaded...`;
-
-            const params = new URLSearchParams({ search: '', letter: 'all', page, limit: pageSize, watchlist: 'unwatched' });
-            const response = await fetch(`/api/library/artists?${params}`);
-            const data = await response.json();
-            if (!data.success) throw new Error(data.error || 'Failed to load artists');
-
-            for (const a of (data.artists || [])) {
-                if (a[sourceIdField]) eligible.push(a);
-                else ineligible.push(a);
-            }
-
-            if (!data.pagination.has_next) break;
-            page++;
-        }
-
-        _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName);
-    } catch (error) {
-        console.error('Error loading unwatched artists:', error);
-        const body = overlay.querySelector('.watch-all-body');
-        if (body) body.innerHTML = `<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#9888;</div><div>Failed to load artists</div><a href="#" onclick="closeWatchAllUnwatchedModal(); openWatchAllUnwatchedModal(); return false;" class="watch-all-retry-link">Retry</a></div>`;
-    }
-}
-
-function _renderWatchAllModalContent(overlay, eligible, ineligible, sourceName) {
-    const body = overlay.querySelector('.watch-all-body');
-    const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
-
-    if (eligible.length === 0 && ineligible.length === 0) {
-        body.innerHTML = '<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#127925;</div><div>No unwatched artists found</div></div>';
-        return;
-    }
-
-    // Store data for search filtering
-    overlay._watchAllEligible = eligible;
-    overlay._watchAllIneligible = ineligible;
-
-    let html = '';
-
-    // Summary bar (sticky)
-    html += '<div class="watch-all-stats">';
-    html += `<div class="watch-all-stat-card eligible"><div class="watch-all-stat-value">${eligible.length}</div><div class="watch-all-stat-label">Ready to watch</div></div>`;
-    html += `<div class="watch-all-stat-card ineligible"><div class="watch-all-stat-value">${ineligible.length}</div><div class="watch-all-stat-label">No ${_esc(sourceName)} ID</div></div>`;
-    html += `<div class="watch-all-stat-card total"><div class="watch-all-stat-value">${eligible.length + ineligible.length}</div><div class="watch-all-stat-label">Total unwatched</div></div>`;
-    html += '</div>';
-
-    // Search filter
-    if (eligible.length > 10) {
-        html += '<div class="watch-all-search-wrap"><input type="text" class="watch-all-search" id="watch-all-search" placeholder="Search artists..." oninput="_filterWatchAllList(this.value)"></div>';
-    }
-
-    // Eligible grid
-    if (eligible.length > 0) {
-        html += '<div class="watch-all-section-label">Artists to be watched</div>';
-        html += '<div class="watch-all-grid" id="watch-all-eligible-grid">';
-        html += _buildWatchAllRows(eligible, false);
-        html += '</div>';
-    }
-
-    // Ineligible section
-    if (ineligible.length > 0) {
-        html += `<div class="watch-all-ineligible">
-            <div class="watch-all-ineligible-header" onclick="this.parentElement.classList.toggle('expanded')">
-                <div class="watch-all-ineligible-label">
-                    <span class="watch-all-ineligible-icon">&#9888;</span>
-                    <span>${ineligible.length} artist${ineligible.length !== 1 ? 's' : ''} without ${_esc(sourceName)} ID</span>
-                </div>
-                <span class="watch-all-chevron">&#9660;</span>
-            </div>
-            <div class="watch-all-ineligible-body">
-                <div class="watch-all-ineligible-hint">These artists haven't been matched to ${_esc(sourceName)} yet. The background enrichment worker will match them over time.</div>
-                <div class="watch-all-grid" id="watch-all-ineligible-grid">${_buildWatchAllRows(ineligible, true)}</div>
-            </div>
-        </div>`;
-    }
-
-    if (eligible.length === 0) {
-        html += `<div class="watch-all-empty-state"><div class="watch-all-empty-icon">&#128268;</div><div>None of your unwatched artists have a ${_esc(sourceName)} ID yet</div><div class="watch-all-empty-hint">The background enrichment worker will match them over time.</div></div>`;
-    }
-
-    body.innerHTML = html;
-
-    if (eligible.length > 0 && confirmBtn) {
-        confirmBtn.textContent = `Watch All (${eligible.length})`;
-        confirmBtn.disabled = false;
-        confirmBtn.onclick = () => _confirmWatchAllUnwatched(overlay, eligible.length);
-    }
-}
-
-function _buildWatchAllRows(artists, dimmed) {
-    let html = '';
-    for (const a of artists) {
-        const img = a.image_url
-            ? `<img src="${_esc(a.image_url)}" alt="" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" loading="lazy"><div class="watch-all-cell-placeholder" style="display:none">&#127925;</div>`
-            : `<div class="watch-all-cell-placeholder">&#127925;</div>`;
-        html += `<div class="watch-all-cell${dimmed ? ' dimmed' : ''}" data-name="${_esc(a.name.toLowerCase())}">
-            <div class="watch-all-cell-img">${img}</div>
-            <div class="watch-all-cell-name" title="${_esc(a.name)}">${_esc(a.name)}</div>
-            <div class="watch-all-cell-meta">${a.track_count || 0} tracks</div>
-        </div>`;
-    }
-    return html;
-}
-
-function _filterWatchAllList(query) {
-    const q = query.toLowerCase().trim();
-    document.querySelectorAll('#watch-all-eligible-grid .watch-all-cell').forEach(cell => {
-        cell.style.display = !q || cell.dataset.name.includes(q) ? '' : 'none';
-    });
-}
-
-async function _confirmWatchAllUnwatched(overlay, expectedCount) {
-    const confirmBtn = overlay.querySelector('#watch-all-confirm-btn');
-    const cancelBtn = overlay.querySelector('.watch-all-btn-cancel');
-    if (confirmBtn) { confirmBtn.disabled = true; confirmBtn.textContent = 'Adding...'; }
-    if (cancelBtn) cancelBtn.disabled = true;
-
-    try {
-        const response = await fetch('/api/library/watchlist-all-unwatched', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' }
-        });
-        const data = await response.json();
-
-        if (data.success) {
-            const body = overlay.querySelector('.watch-all-body');
-            body.innerHTML = `<div class="watch-all-results">
-                <div class="watch-all-results-icon">&#10003;</div>
-                <div class="watch-all-results-title">Added ${data.added} artist${data.added !== 1 ? 's' : ''} to watchlist</div>
-                ${data.skipped_already > 0 ? `<div class="watch-all-results-detail">${data.skipped_already} already watched</div>` : ''}
-                ${data.skipped_no_id > 0 ? `<div class="watch-all-results-detail">${data.skipped_no_id} skipped (no external ID)</div>` : ''}
-            </div>`;
-
-            if (confirmBtn) confirmBtn.style.display = 'none';
-            if (cancelBtn) { cancelBtn.disabled = false; cancelBtn.textContent = 'Close'; }
-            overlay.dataset.needsRefresh = 'true';
-        } else {
-            throw new Error(data.error || 'Failed to add artists');
-        }
-    } catch (error) {
-        console.error('Error in watch all:', error);
-        if (confirmBtn) { confirmBtn.disabled = false; confirmBtn.textContent = `Watch All (${expectedCount})`; }
-        if (cancelBtn) cancelBtn.disabled = false;
-        showToast('Failed to add artists to watchlist', 'error');
-    }
-}
-
-function closeWatchAllUnwatchedModal() {
-    const overlay = document.getElementById('watch-all-modal-overlay');
-    if (!overlay) return;
-    const needsRefresh = overlay.dataset.needsRefresh === 'true';
-    overlay.remove();
-    if (needsRefresh) loadLibraryArtists();
-}
-
-async function toggleLibraryCardWatchlist(btn, artist) {
-    if (btn.disabled) return;
-    btn.disabled = true;
-
-    // Support both badge-style (.watch-icon-label) and button-style (.watchlist-text)
-    const label = btn.querySelector('.watch-icon-label') || btn.querySelector('.watchlist-text');
-    const isWatching = btn.classList.contains('watched') || btn.classList.contains('watching');
-
-    if (label) label.textContent = '...';
-
-    try {
-        // Use the ID matching the active metadata source
-        const artistId = currentMusicSourceName === 'iTunes'
-            ? (artist.itunes_artist_id || artist.spotify_artist_id)
-            : (artist.spotify_artist_id || artist.itunes_artist_id);
-        if (!artistId) throw new Error('No iTunes or Spotify ID available for this artist');
-
-        if (isWatching) {
-            const response = await fetch('/api/watchlist/remove', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: artistId })
-            });
-            const data = await response.json();
-            if (!data.success) throw new Error(data.error);
-
-            btn.classList.remove('watched', 'watching');
-            btn.style.opacity = '0.4';
-            btn.title = 'Add to Watchlist';
-            if (label) label.textContent = 'Watch';
-            showToast(`Removed ${artist.name} from watchlist`, 'success');
-        } else {
-            const response = await fetch('/api/watchlist/add', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: artistId, artist_name: artist.name })
-            });
-            const data = await response.json();
-            if (!data.success) throw new Error(data.error);
-
-            btn.classList.add('watched');
-            btn.style.opacity = '';
-            btn.title = 'Remove from Watchlist';
-            if (label) label.textContent = 'Watching';
-            showToast(`Added ${artist.name} to watchlist`, 'success');
-        }
-
-        if (typeof updateWatchlistCount === 'function') {
-            updateWatchlistCount();
-        }
-    } catch (error) {
-        console.error('Error toggling library card watchlist:', error);
-        if (label) label.textContent = isWatching ? 'Watching' : 'Watch';
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        btn.disabled = false;
-    }
-}
-
-// ===============================================
-// Artist Detail Page Functions
-// ===============================================
-
-// Artist detail page state
-let artistDetailPageState = {
-    isInitialized: false,
-    currentArtistId: null,
-    currentArtistName: null,
-    enhancedView: false,
-    enhancedData: null,
-    expandedAlbums: new Set(),
-    selectedTracks: new Set(),
-    editingCell: null,
-    enhancedTrackSort: {}
-};
-
-// Discography filter state
-let discographyFilterState = {
-    categories: { albums: true, eps: true, singles: true },
-    content: { live: true, compilations: true, featured: true },
-    ownership: 'all'  // 'all', 'owned', 'missing'
-};
-
-function navigateToArtistDetail(artistId, artistName) {
-    console.log(`🎵 Navigating to artist detail: ${artistName} (ID: ${artistId})`);
-
-    // Abort any in-progress completion stream
-    if (artistDetailPageState.completionController) {
-        artistDetailPageState.completionController.abort();
-        artistDetailPageState.completionController = null;
-    }
-
-    // Cancel any active inline edit and close manual match modal before resetting state
-    cancelInlineEdit();
-    const existingMatchOverlay = document.getElementById('enhanced-manual-match-overlay');
-    if (existingMatchOverlay) existingMatchOverlay.remove();
-
-    // Store current artist info and reset enhanced view state
-    artistDetailPageState.currentArtistId = artistId;
-    artistDetailPageState.currentArtistName = artistName;
-    artistDetailPageState.enhancedData = null;
-    artistDetailPageState.expandedAlbums = new Set();
-    artistDetailPageState.selectedTracks = new Set();
-    artistDetailPageState.enhancedTrackSort = {};
-    artistDetailPageState.enhancedView = false;
-
-    // Reset enhanced view toggle to standard
-    const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
-    toggleBtns.forEach(btn => {
-        btn.classList.toggle('active', btn.getAttribute('data-view') === 'standard');
-    });
-    const enhancedContainer = document.getElementById('enhanced-view-container');
-    if (enhancedContainer) enhancedContainer.classList.add('hidden');
-    const standardSections = document.querySelector('.discography-sections');
-    if (standardSections) standardSections.classList.remove('hidden');
-    // Restore standard view filter groups
-    const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
-    filterGroups.forEach(group => {
-        const label = group.querySelector('.filter-label');
-        if (label && label.textContent !== 'View') group.style.display = '';
-    });
-    const dividers = document.querySelectorAll('#discography-filters .filter-divider');
-    dividers.forEach(d => d.style.display = '');
-    // Hide bulk bar
-    const bulkBar = document.getElementById('enhanced-bulk-bar');
-    if (bulkBar) bulkBar.classList.remove('visible');
-
-    // Navigate to artist detail page
-    navigateToPage('artist-detail');
-
-    // Initialize if needed and load data
-    if (!artistDetailPageState.isInitialized) {
-        initializeArtistDetailPage();
-    }
-
-    // Load artist data
-    loadArtistDetailData(artistId, artistName);
-}
-
-function initializeArtistDetailPage() {
-    console.log("🔧 Initializing Artist Detail page...");
-
-    // Initialize back button
-    const backBtn = document.getElementById("artist-detail-back-btn");
-    if (backBtn) {
-        backBtn.addEventListener("click", () => {
-            console.log("🔙 Returning to Library page");
-            // Abort any in-progress completion stream
-            if (artistDetailPageState.completionController) {
-                artistDetailPageState.completionController.abort();
-                artistDetailPageState.completionController = null;
-            }
-            // Clear artist detail state so we go back to the list view
-            artistDetailPageState.currentArtistId = null;
-            artistDetailPageState.currentArtistName = null;
-            navigateToPage('library');
-        });
-    }
-
-    // Initialize retry button
-    const retryBtn = document.getElementById("artist-detail-retry-btn");
-    if (retryBtn) {
-        retryBtn.addEventListener("click", () => {
-            if (artistDetailPageState.currentArtistId && artistDetailPageState.currentArtistName) {
-                loadArtistDetailData(artistDetailPageState.currentArtistId, artistDetailPageState.currentArtistName);
-            }
-        });
-    }
-
-    // Initialize discography filter buttons
-    initializeDiscographyFilters();
-
-    artistDetailPageState.isInitialized = true;
-    console.log("✅ Artist Detail page initialized successfully");
-}
-
-async function loadArtistDetailData(artistId, artistName) {
-    console.log(`🔄 Loading artist detail data for: ${artistName} (ID: ${artistId})`);
-
-    // Reset discography filters to defaults
-    resetDiscographyFilters();
-
-    // Show loading state and hide all content
-    showArtistDetailLoading(true);
-    showArtistDetailError(false);
-    showArtistDetailMain(false);
-    showArtistDetailHero(false);
-
-    // Don't update header until data loads to avoid showing stale data
-
-    try {
-        // Call API to get artist discography data
-        const response = await fetch(`/api/artist-detail/${artistId}`);
-
-        if (!response.ok) {
-            throw new Error(`Failed to load artist data: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to load artist data');
-        }
-
-        console.log(`✅ Loaded artist detail data:`, data);
-
-        // Hide loading and show all content
-        showArtistDetailLoading(false);
-        showArtistDetailMain(true);
-        showArtistDetailHero(true);
-
-        console.log(`🎨 Main content visibility:`, document.getElementById('artist-detail-main'));
-        console.log(`🎨 Albums section:`, document.getElementById('albums-section'));
-
-        // Populate the page with data (which updates the hero section and sets textContent)
-        populateArtistDetailPage(data);
-
-        // Update header with artist name and MusicBrainz link LAST to avoid overwrite
-        updateArtistDetailPageHeaderWithData(data.artist);
-
-        // Render per-artist enrichment coverage
-        renderArtistEnrichmentCoverage(data.enrichment_coverage);
-
-        // Start streaming ownership checks if we have Spotify discography with checking state
-        if (data.discography && data.discography.albums) {
-            const hasChecking = [...(data.discography.albums || []), ...(data.discography.eps || []), ...(data.discography.singles || [])]
-                .some(r => r.owned === null);
-            if (hasChecking) {
-                // Store discography for stream updates
-                artistDetailPageState.currentDiscography = data.discography;
-                checkLibraryCompletion(data.artist.name, data.discography);
-            }
-        }
-
-        // Check if artist has tracks eligible for quality enhancement
-        checkArtistEnhanceEligibility(artistId);
-
-    } catch (error) {
-        console.error(`❌ Error loading artist detail data:`, error);
-
-        // Show error state (keep hero section hidden)
-        showArtistDetailLoading(false);
-        showArtistDetailError(true, error.message);
-        showArtistDetailHero(false);
-
-        showToast(`Failed to load artist details: ${error.message}`, "error");
-    }
-}
-
-function updateArtistDetailPageHeader(artistName) {
-    // Update header title
-    const headerTitle = document.getElementById("artist-detail-name");
-    if (headerTitle) {
-        headerTitle.textContent = artistName;
-    }
-
-    // Update main artist name
-    const mainTitle = document.getElementById("artist-info-name");
-    if (mainTitle) {
-        mainTitle.textContent = artistName;
-    }
-}
-
-function updateArtistDetailPageHeaderWithData(artist) {
-    // Update name
-    const mainTitle = document.getElementById("artist-detail-name");
-    if (mainTitle) {
-        mainTitle.textContent = artist.name;
-        // Remove any old source links that were appended to the h1
-        mainTitle.querySelectorAll('.source-link-btn').forEach(el => el.remove());
-    }
-
-    // Render badges in dedicated container
-    const badgesContainer = document.getElementById("artist-hero-badges");
-    if (badgesContainer) {
-        const _hb = (logo, fallback, title, url) => {
-            const inner = logo
-                ? `<img src="${logo}" alt="${fallback}" onerror="this.parentNode.textContent='${fallback}'">`
-                : `<span style="font-size:9px;font-weight:700;">${fallback}</span>`;
-            if (url) return `<a class="artist-hero-badge" title="${title}" href="${url}" target="_blank" rel="noopener noreferrer">${inner}</a>`;
-            return `<div class="artist-hero-badge" title="${title}">${inner}</div>`;
-        };
-
-        const adbSlug = artist.name ? artist.name.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '') : '';
-        const badges = [];
-        if (artist.spotify_artist_id) badges.push(_hb(SPOTIFY_LOGO_URL, 'SP', 'Spotify', `https://open.spotify.com/artist/${artist.spotify_artist_id}`));
-        if (artist.musicbrainz_id) badges.push(_hb(MUSICBRAINZ_LOGO_URL, 'MB', 'MusicBrainz', `https://musicbrainz.org/artist/${artist.musicbrainz_id}`));
-        if (artist.deezer_id) badges.push(_hb(DEEZER_LOGO_URL, 'Dz', 'Deezer', `https://www.deezer.com/artist/${artist.deezer_id}`));
-        if (artist.audiodb_id) badges.push(_hb(typeof getAudioDBLogoURL === 'function' ? getAudioDBLogoURL() : '', 'ADB', 'AudioDB', `https://www.theaudiodb.com/artist/${artist.audiodb_id}-${adbSlug}`));
-        if (artist.itunes_artist_id) badges.push(_hb(ITUNES_LOGO_URL, 'IT', 'Apple Music', `https://music.apple.com/artist/${artist.itunes_artist_id}`));
-        if (artist.lastfm_url) badges.push(_hb(LASTFM_LOGO_URL, 'LFM', 'Last.fm', artist.lastfm_url));
-        if (artist.genius_url) badges.push(_hb(GENIUS_LOGO_URL, 'GEN', 'Genius', artist.genius_url));
-        if (artist.tidal_id) badges.push(_hb(TIDAL_LOGO_URL, 'TD', 'Tidal', `https://tidal.com/browse/artist/${artist.tidal_id}`));
-        if (artist.qobuz_id) badges.push(_hb(QOBUZ_LOGO_URL, 'Qz', 'Qobuz', `https://www.qobuz.com/artist/${artist.qobuz_id}`));
-        if (artist.discogs_id) badges.push(_hb(DISCOGS_LOGO_URL, 'DC', 'Discogs', `https://www.discogs.com/artist/${artist.discogs_id}`));
-        if (artist.soul_id && !String(artist.soul_id).startsWith('soul_unnamed_')) badges.push(_hb('/static/trans2.png', 'SS', `SoulID: ${artist.soul_id}`, null));
-
-        badgesContainer.innerHTML = badges.join('');
-    }
-}
-
-function renderArtistEnrichmentCoverage(enrichment) {
-    const el = document.getElementById('artist-enrichment-coverage');
-    if (!el) return;
-
-    if (!enrichment || !enrichment.total_tracks) {
-        el.style.display = 'none';
-        return;
-    }
-
-    const services = [
-        { name: 'Spotify', key: 'spotify', color: '#1db954' },
-        { name: 'MusicBrainz', key: 'musicbrainz', color: '#ba55d3' },
-        { name: 'Deezer', key: 'deezer', color: '#a238ff' },
-        { name: 'Last.fm', key: 'lastfm', color: '#d51007' },
-        { name: 'iTunes', key: 'itunes', color: '#fc3c44' },
-        { name: 'AudioDB', key: 'audiodb', color: '#1a9fff' },
-        { name: 'Discogs', key: 'discogs', color: '#D4A574' },
-        { name: 'Genius', key: 'genius', color: '#ffff64' },
-        { name: 'Tidal', key: 'tidal', color: '#00ffff' },
-        { name: 'Qobuz', key: 'qobuz', color: '#4285f4' },
-    ];
-
-    const r = 20, circ = 2 * Math.PI * r;
-
-    el.style.display = '';
-    el.innerHTML = `
-        <div class="artist-enrich-title">Enrichment Coverage</div>
-        <div class="artist-enrich-grid">
-            ${services.map((s, i) => {
-        const pct = enrichment[s.key] || 0;
-        const offset = circ - (circ * pct / 100);
-        const delay = (i * 0.08).toFixed(2);
-        return `<div class="artist-enrich-circle">
-                    <div class="artist-enrich-ring" style="--ring-color:${s.color}">
-                        <svg viewBox="0 0 48 48">
-                            <circle class="ring-bg" cx="24" cy="24" r="${r}"/>
-                            <circle class="ring-fill" cx="24" cy="24" r="${r}"
-                                stroke="${s.color}" stroke-dasharray="${circ.toFixed(1)}"
-                                style="--ring-circ:${circ.toFixed(1)};--ring-offset:${offset.toFixed(1)};stroke-dashoffset:${offset.toFixed(1)};animation:ringFillIn 1s cubic-bezier(0.4,0,0.2,1) ${delay}s both"/>
-                        </svg>
-                        <span class="ring-pct" style="animation:ringPctFade 0.8s ease ${(parseFloat(delay) + 0.3).toFixed(2)}s both">${Math.round(pct)}</span>
-                    </div>
-                    <span class="artist-enrich-label">${s.name}</span>
-                </div>`;
-    }).join('')}
-        </div>
-    `;
-}
-
-function populateArtistDetailPage(data) {
-    const artist = data.artist;
-    const discography = data.discography;
-
-    console.log(`🎨 Populating artist detail page for: ${artist.name}`);
-    console.log(`📀 Discography data:`, discography);
-    console.log(`📀 Albums:`, discography.albums);
-    console.log(`📀 EPs:`, discography.eps);
-    console.log(`📀 Singles:`, discography.singles);
-
-    // Update hero section with image, name, and stats
-    updateArtistHeroSection(artist, discography);
-
-    // Update genres (if element exists)
-    updateArtistGenres(artist.genres);
-
-    // Update summary stats (if element exists)
-    updateArtistSummaryStats(discography);
-
-    // Populate discography sections
-    populateDiscographySections(discography);
-
-    // Initialize library watchlist button if it exists (for library page)
-    const libraryWatchlistBtn = document.getElementById('library-artist-watchlist-btn');
-    if (libraryWatchlistBtn && data.spotify_artist && data.spotify_artist.spotify_artist_id) {
-        initializeLibraryWatchlistButton(data.spotify_artist.spotify_artist_id, data.spotify_artist.spotify_artist_name);
-    }
-}
-
-function updateArtistDetailImage(imageUrl, artistName) {
-    const imageElement = document.getElementById("artist-detail-image");
-    const fallbackElement = document.getElementById("artist-image-fallback");
-
-    if (imageUrl && imageUrl.trim() !== "") {
-        imageElement.src = imageUrl;
-        imageElement.alt = artistName;
-        imageElement.classList.remove("hidden");
-        fallbackElement.classList.add("hidden");
-
-        imageElement.onerror = () => {
-            console.log(`Failed to load artist image for ${artistName}: ${imageUrl}`);
-            // Replace with fallback on error
-            imageElement.classList.add("hidden");
-            fallbackElement.classList.remove("hidden");
-        };
-
-        imageElement.onload = () => {
-            console.log(`Successfully loaded artist image for ${artistName}: ${imageUrl}`);
-        };
-    } else {
-        console.log(`No image URL for ${artistName}: '${imageUrl}'`);
-        imageElement.classList.add("hidden");
-        fallbackElement.classList.remove("hidden");
-    }
-}
-
-function updateArtistGenres(genres) {
-    const genresContainer = document.getElementById("artist-genres");
-    if (!genresContainer) return;
-
-    genresContainer.innerHTML = "";
-
-    // Clear any previous artist format tags (they arrive later via streaming)
-    const oldFormats = genresContainer.parentElement?.querySelector('.artist-formats');
-    if (oldFormats) oldFormats.remove();
-
-    if (genres && genres.length > 0) {
-        genres.forEach(genre => {
-            const genreTag = document.createElement("span");
-            genreTag.className = "genre-tag";
-            genreTag.textContent = genre;
-            genresContainer.appendChild(genreTag);
-        });
-    }
-}
-
-function updateArtistSummaryStats(discography) {
-    const allReleases = [...discography.albums, ...discography.eps, ...discography.singles];
-    const hasChecking = allReleases.some(r => r.owned === null);
-
-    const ownedAlbums = discography.albums.filter(album => album.owned === true).length;
-    const missingAlbums = discography.albums.filter(album => album.owned === false).length;
-    const totalAlbums = discography.albums.length;
-    const completionPercentage = totalAlbums > 0 ? Math.round((ownedAlbums / totalAlbums) * 100) : 0;
-
-    // Update owned albums count
-    const ownedElement = document.getElementById("owned-albums-count");
-    if (ownedElement) {
-        ownedElement.textContent = hasChecking ? '...' : ownedAlbums;
-    }
-
-    // Update missing albums count
-    const missingElement = document.getElementById("missing-albums-count");
-    if (missingElement) {
-        missingElement.textContent = hasChecking ? '...' : missingAlbums;
-    }
-
-    // Update completion percentage
-    const completionElement = document.getElementById("completion-percentage");
-    if (completionElement) {
-        completionElement.textContent = hasChecking ? 'Checking...' : `${completionPercentage}%`;
-    }
-}
-
-function updateArtistHeaderStats(albumCount, trackCount) {
-    // This function is deprecated - now using updateArtistHeroSection
-    console.log("📊 Using new hero section instead of old header stats");
-}
-
-function updateArtistHeroSection(artist, discography) {
-    console.log("🖼️ Updating artist hero section");
-
-    // Update artist image with detailed debugging
-    const imageElement = document.getElementById("artist-detail-image");
-    const fallbackElement = document.getElementById("artist-detail-image-fallback");
-
-    console.log(`🖼️ Debug Artist image info:`);
-    console.log(`   - URL: '${artist.image_url}'`);
-    console.log(`   - Type: ${typeof artist.image_url}`);
-    console.log(`   - Full artist object:`, artist);
-    console.log(`   - Image element:`, imageElement);
-    console.log(`   - Fallback element:`, fallbackElement);
-
-    if (artist.image_url && artist.image_url.trim() !== "" && artist.image_url !== "null") {
-        console.log(`✅ Setting image src to: ${artist.image_url}`);
-        imageElement.src = artist.image_url;
-        imageElement.alt = artist.name;
-        imageElement.style.display = "block";
-        if (fallbackElement) {
-            fallbackElement.style.display = "none";
-        }
-
-        imageElement.onload = () => {
-            console.log(`✅ Successfully loaded artist image: ${artist.image_url}`);
-        };
-
-        imageElement.onerror = () => {
-            console.error(`❌ Failed to load artist image: ${artist.image_url}`);
-            // Try Deezer fallback before emoji
-            if (artist.deezer_id && !imageElement.dataset.triedDeezer) {
-                imageElement.dataset.triedDeezer = 'true';
-                imageElement.src = `https://api.deezer.com/artist/${artist.deezer_id}/image?size=big`;
-            } else {
-                imageElement.style.display = "none";
-                if (fallbackElement) {
-                    fallbackElement.style.display = "flex";
-                }
-            }
-        };
-    } else {
-        console.log(`🖼️ No valid image URL - showing fallback for ${artist.name}`);
-        imageElement.style.display = "none";
-        if (fallbackElement) {
-            fallbackElement.style.display = "flex";
-        }
-    }
-
-    // Update artist name
-    const nameElement = document.getElementById("artist-detail-name");
-    if (nameElement) {
-        nameElement.textContent = artist.name;
-    }
-
-    // Calculate and update stats for each category
-    updateCategoryStats('albums', discography.albums);
-    updateCategoryStats('eps', discography.eps);
-    updateCategoryStats('singles', discography.singles);
-
-    // Show Download Discography button(s) if there are any releases
-    const _totalReleases = (discography.albums?.length || 0) + (discography.eps?.length || 0) + (discography.singles?.length || 0);
-    const _discogWrap = document.getElementById('discog-download-wrap');
-    if (_discogWrap) _discogWrap.style.display = _totalReleases > 0 ? '' : 'none';
-    const _discogBtnArtists = document.getElementById('discog-download-btn-artists');
-    if (_discogBtnArtists) _discogBtnArtists.style.display = _totalReleases > 0 ? '' : 'none';
-
-    // Last.fm stats (listeners / playcount)
-    const _fmtNum = (n) => {
-        if (!n || n <= 0) return '0';
-        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-        return n.toLocaleString();
-    };
-
-    const listenersEl = document.getElementById('artist-hero-listeners');
-    if (listenersEl) {
-        if (artist.lastfm_listeners) {
-            listenersEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_listeners);
-            listenersEl.style.display = '';
-        } else {
-            listenersEl.style.display = 'none';
-        }
-    }
-
-    const playcountEl = document.getElementById('artist-hero-playcount');
-    if (playcountEl) {
-        if (artist.lastfm_playcount) {
-            playcountEl.querySelector('.hero-stat-value').textContent = _fmtNum(artist.lastfm_playcount);
-            playcountEl.style.display = '';
-        } else {
-            playcountEl.style.display = 'none';
-        }
-    }
-
-    // Last.fm bio
-    const bioEl = document.getElementById('artist-hero-bio');
-    if (bioEl) {
-        const bio = artist.lastfm_bio;
-        if (bio && bio.trim()) {
-            // Strip HTML tags and "Read more on Last.fm" links
-            let cleanBio = bio.replace(/<a\b[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
-            if (cleanBio) {
-                bioEl.innerHTML = `<span class="bio-text">${cleanBio}</span>
-                    <span class="artist-hero-bio-toggle" onclick="this.parentElement.classList.toggle('expanded');this.textContent=this.parentElement.classList.contains('expanded')?'Show less':'Read more'">Read more</span>`;
-                bioEl.style.display = '';
-            } else {
-                bioEl.style.display = 'none';
-            }
-        } else {
-            bioEl.style.display = 'none';
-        }
-    }
-
-    // Last.fm tags — merge with existing genres (deduplicate)
-    if (artist.lastfm_tags) {
-        try {
-            let lfmTags = typeof artist.lastfm_tags === 'string' ? JSON.parse(artist.lastfm_tags) : artist.lastfm_tags;
-            if (Array.isArray(lfmTags) && lfmTags.length > 0) {
-                const existingGenres = new Set((artist.genres || []).map(g => g.toLowerCase()));
-                const newTags = lfmTags.filter(t => !existingGenres.has(t.toLowerCase())).slice(0, 5);
-                if (newTags.length > 0) {
-                    const genresContainer = document.getElementById('artist-genres');
-                    if (genresContainer) {
-                        newTags.forEach(tag => {
-                            const el = document.createElement('span');
-                            el.className = 'genre-tag';
-                            el.textContent = tag;
-                            el.style.opacity = '0.6';
-                            genresContainer.appendChild(el);
-                        });
-                    }
-                }
-            }
-        } catch (e) {
-            console.debug('Failed to parse Last.fm tags:', e);
-        }
-    }
-
-    // Lazy-load top tracks sidebar
-    if (artist.lastfm_url || artist.lastfm_listeners) {
-        _loadArtistTopTracks(artist.name);
-    }
-}
-
-async function _loadArtistTopTracks(artistName) {
-    const sidebar = document.getElementById('artist-hero-sidebar');
-    const container = document.getElementById('hero-top-tracks');
-    if (!sidebar || !container) return;
-
-    try {
-        const resp = await fetch(`/api/artist/0/lastfm-top-tracks?name=${encodeURIComponent(artistName)}`);
-        const data = await resp.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            sidebar.style.display = 'none';
-            return;
-        }
-
-        const _fmtNum = (n) => {
-            if (!n || n <= 0) return '0';
-            if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-            if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-            return n.toLocaleString();
-        };
-
-        const _escAttr = (s) => (s || '').replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-        container.innerHTML = data.tracks.map((t, i) => `
-            <div class="hero-top-track">
-                <span class="hero-top-track-num">${i + 1}</span>
-                <button class="hero-top-track-play" data-track="${_escAttr(t.name)}" data-artist="${_escAttr(artistName)}" title="Play">▶</button>
-                <span class="hero-top-track-name" title="${_escAttr(t.name)}">${_escAttr(t.name)}</span>
-                <span class="hero-top-track-plays">${_fmtNum(t.playcount)}</span>
-            </div>
-        `).join('');
-
-        // Attach play handlers via delegation (avoids inline JS escaping issues)
-        container.onclick = (e) => {
-            const btn = e.target.closest('.hero-top-track-play');
-            if (btn) {
-                e.stopPropagation();
-                playStatsTrack(btn.dataset.track, btn.dataset.artist, '');
-            }
-        };
-        sidebar.style.display = '';
-    } catch (e) {
-        console.debug('Failed to load top tracks:', e);
-        sidebar.style.display = 'none';
-    }
-}
-
-function updateCategoryStats(category, releases) {
-    const hasChecking = releases.some(r => r.owned === null);
-    const owned = releases.filter(r => r.owned === true).length;
-    const total = releases.length;
-    const completion = total > 0 ? Math.round((owned / total) * 100) : 100;
-
-    // Update stats text (compact: "3/12")
-    const statsElement = document.getElementById(`${category}-stats`);
-    if (statsElement) {
-        statsElement.textContent = hasChecking ? '...' : `${owned}/${total}`;
-    }
-
-    // Update completion bar
-    const fillElement = document.getElementById(`${category}-completion-fill`);
-    if (fillElement) {
-        if (hasChecking) {
-            fillElement.style.width = '100%';
-            fillElement.classList.add('checking');
-        } else {
-            fillElement.style.width = `${completion}%`;
-            fillElement.classList.remove('checking');
-        }
-    }
-}
-
-function populateDiscographySections(discography) {
-    // Populate albums
-    populateReleaseSection('albums', discography.albums);
-
-    // Populate EPs
-    populateReleaseSection('eps', discography.eps);
-
-    // Populate singles
-    populateReleaseSection('singles', discography.singles);
-
-    // Apply any active filters after populating
-    applyDiscographyFilters();
-}
-
-function populateReleaseSection(sectionType, releases) {
-    const gridId = `${sectionType}-grid`;
-    const ownedCountId = `${sectionType}-owned-count`;
-    const missingCountId = `${sectionType}-missing-count`;
-
-    const grid = document.getElementById(gridId);
-    if (!grid) return;
-
-    // Clear existing content
-    grid.innerHTML = "";
-
-    const hasChecking = releases.some(r => r.owned === null);
-    const ownedCount = releases.filter(release => release.owned === true).length;
-    const missingCount = releases.filter(release => release.owned === false).length;
-
-    // Update section stats
-    const ownedElement = document.getElementById(ownedCountId);
-    const missingElement = document.getElementById(missingCountId);
-
-    if (ownedElement) {
-        ownedElement.textContent = hasChecking ? 'Checking...' : `${ownedCount} owned`;
-    }
-
-    if (missingElement) {
-        missingElement.textContent = hasChecking ? '' : `${missingCount} missing`;
-    }
-
-    // Create release cards
-    releases.forEach((release, index) => {
-        const card = createReleaseCard(release);
-        grid.appendChild(card);
-    });
-
-    console.log(`📀 Populated ${sectionType} section: ${ownedCount} owned, ${missingCount} missing`);
-    console.log(`📀 Grid element:`, grid);
-    console.log(`📀 Grid children count:`, grid.children.length);
-}
-
-function createReleaseCard(release) {
-    const card = document.createElement("div");
-    const isChecking = release.owned === null;
-    card.className = `release-card${isChecking ? " checking" : (release.owned ? "" : " missing")}`;
-    const releaseId = release.id || "";
-    card.setAttribute("data-release-id", releaseId);
-    // Store mutable reference so stream updates propagate to click handler
-    card._releaseData = release;
-
-    // Tag card for content-type filtering
-    const titleLower = (release.title || '').toLowerCase();
-    const livePattern = /\b(live)\b|\(live[^)]*\)|\[live[^]]*\]/i;
-    const compilationPattern = /\b(greatest hits|best of|collection|anthology|essential)\b/i;
-    const featuredPattern = /\(?\bfeat\.?\s|\bft\.?\s|\bfeaturing\b/i;
-    const isLive = livePattern.test(release.title || '') || (release.album_type === 'compilation' && livePattern.test(release.title || ''));
-    const isCompilation = (release.album_type === 'compilation') || compilationPattern.test(release.title || '');
-    const isFeatured = featuredPattern.test(release.title || '');
-    card.setAttribute("data-is-live", isLive ? "true" : "false");
-    card.setAttribute("data-is-compilation", isCompilation ? "true" : "false");
-    card.setAttribute("data-is-featured", isFeatured ? "true" : "false");
-
-    // Add MusicBrainz icon if available
-    let mbIcon = null;
-    if (release.musicbrainz_release_id) {
-        mbIcon = document.createElement("div");
-        mbIcon.className = "mb-card-icon";
-        mbIcon.title = "View on MusicBrainz";
-        mbIcon.innerHTML = `<img src="${MUSICBRAINZ_LOGO_URL}" style="width: 20px; height: auto; display: block;">`;
-        mbIcon.onclick = (e) => {
-            e.stopPropagation();
-            window.open(`https://musicbrainz.org/release/${release.musicbrainz_release_id}`, '_blank');
-        };
-    }
-
-    // Create image
-    const imageContainer = document.createElement("div");
-    if (release.image_url && release.image_url.trim() !== "") {
-        const img = document.createElement("img");
-        img.src = release.image_url;
-        img.alt = release.title;
-        img.className = "release-image";
-        img.loading = 'lazy';
-        img.onerror = () => {
-            imageContainer.innerHTML = `<div class="release-image-fallback">💿</div>`;
-        };
-        imageContainer.appendChild(img);
-    } else {
-        imageContainer.innerHTML = `<div class="release-image-fallback">💿</div>`;
-    }
-
-    // Create title
-    const title = document.createElement("h4");
-    title.className = "release-title";
-    title.textContent = release.title;
-    title.title = release.title;
-
-    // Create year - extract from release_date (Spotify format) or fall back to year field
-    const year = document.createElement("div");
-    year.className = "release-year";
-
-    let yearText = "Unknown Year";
-
-    // DEBUG: Log the release data to see what we're working with (remove this after testing)
-    // console.log(`🔍 DEBUG: Release "${release.title}" data:`, {
-    //     title: release.title,
-    //     owned: release.owned,
-    //     year: release.year,
-    //     release_date: release.release_date,
-    //     track_completion: release.track_completion
-    // });
-
-    // First try to extract year from release_date (Spotify format: "YYYY-MM-DD")
-    if (release.release_date) {
-        try {
-            // Extract year directly from string to avoid timezone issues
-            const yearMatch = release.release_date.match(/^(\d{4})/);
-            if (yearMatch) {
-                const releaseYear = parseInt(yearMatch[1]);
-                if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
-                    yearText = releaseYear.toString();
-                }
-            } else {
-                // Fallback to Date parsing if format is different
-                const releaseYear = new Date(release.release_date).getFullYear();
-                if (releaseYear && !isNaN(releaseYear) && releaseYear > 1900 && releaseYear <= new Date().getFullYear() + 1) {
-                    yearText = releaseYear.toString();
-                }
-            }
-        } catch (e) {
-            console.warn('Error parsing release_date:', release.release_date, e);
-        }
-    }
-
-    // Fallback to direct year field if release_date parsing failed
-    if (yearText === "Unknown Year" && release.year) {
-        yearText = release.year.toString();
-    }
-
-    year.textContent = yearText;
-
-    // Create completion info
-    const completion = document.createElement("div");
-    completion.className = "release-completion";
-
-    const completionText = document.createElement("span");
-    const completionBar = document.createElement("div");
-    completionBar.className = "completion-bar";
-
-    const completionFill = document.createElement("div");
-    completionFill.className = "completion-fill";
-
-    if (release.owned === null || release.track_completion === 'checking') {
-        // Checking state - ownership not yet resolved
-        completionText.textContent = "Checking...";
-        completionText.className = "completion-text checking";
-        completionFill.className += " checking";
-        completionFill.style.width = "100%";
-    } else if (release.owned) {
-        // Handle new detailed track completion object
-        if (release.track_completion && typeof release.track_completion === 'object') {
-            const completion = release.track_completion;
-            const percentage = completion.percentage || 100;
-            const ownedTracks = completion.owned_tracks || 0;
-            const totalTracks = completion.total_tracks || 0;
-            const missingTracks = completion.missing_tracks || 0;
-
-            completionFill.style.width = `${percentage}%`;
-
-            if (missingTracks === 0) {
-                completionText.textContent = `Complete (${ownedTracks})`;
-                completionText.className = "completion-text complete";
-                completionFill.className += " complete";
-            } else {
-                completionText.textContent = `${ownedTracks}/${totalTracks} tracks`;
-                completionText.className = "completion-text partial";
-                completionFill.className += " partial";
-
-                // Add missing tracks indicator
-                completionText.title = `Missing ${missingTracks} track${missingTracks !== 1 ? 's' : ''}`;
-            }
-        } else {
-            // Fallback for legacy simple percentage
-            const percentage = release.track_completion || 100;
-            completionFill.style.width = `${percentage}%`;
-
-            if (percentage === 100) {
-                completionText.textContent = "Complete";
-                completionText.className = "completion-text complete";
-                completionFill.className += " complete";
-            } else {
-                completionText.textContent = `${percentage}%`;
-                completionText.className = "completion-text partial";
-                completionFill.className += " partial";
-            }
-        }
-    } else {
-        const totalTr = release.total_tracks || release.track_completion?.total_tracks || 0;
-        completionText.textContent = totalTr > 0 ? `Missing (${totalTr} tracks)` : "Not in library";
-        completionText.className = "completion-text missing";
-        completionFill.className += " missing";
-        completionFill.style.width = "0%";
-    }
-
-    completionBar.appendChild(completionFill);
-    completion.appendChild(completionText);
-    completion.appendChild(completionBar);
-
-    // Assemble card
-    card.appendChild(imageContainer);
-    card.appendChild(title);
-    card.appendChild(year);
-    card.appendChild(completion);
-
-    // Add MusicBrainz icon LAST to ensure it's on top
-    if (release.musicbrainz_release_id && mbIcon) { // Check if mbIcon was created
-        card.appendChild(mbIcon);
-    }
-
-    // Add click handler for release card (uses card._releaseData for mutable reference)
-    card.addEventListener("click", async () => {
-        const rel = card._releaseData;
-        console.log(`Clicked on release: ${rel.title} (Owned: ${rel.owned})`);
-
-        // Still checking - ignore click
-        if (rel.owned === null) {
-            showToast(`Still checking ownership for ${rel.title}...`, "info");
-            return;
-        }
-
-        showLoadingOverlay('Loading album...');
-
-        // For missing or incomplete releases, open wishlist modal
-        try {
-            // Convert release object to album format expected by our function
-            const albumData = {
-                id: rel.id,
-                name: rel.title,
-                image_url: rel.image_url,
-                release_date: rel.year ? `${rel.year}-01-01` : '',
-                album_type: rel.album_type || rel.type || 'album',
-                total_tracks: (rel.track_completion && typeof rel.track_completion === 'object')
-                    ? rel.track_completion.total_tracks : (rel.track_count || 1)
-            };
-
-            // Get current artist from artist detail page state
-            const currentArtist = artistDetailPageState.currentArtistName ? {
-                id: artistDetailPageState.currentArtistId,
-                name: artistDetailPageState.currentArtistName,
-                image_url: getArtistImageFromPage() || '' // Get artist image from page
-            } : null;
-
-            if (!currentArtist) {
-                console.error('❌ No current artist found for release click');
-                showToast('Error: No artist information available', 'error');
-                return;
-            }
-
-            // Load tracks for the album (pass name/artist for Hydrabase support)
-            const _aat2 = new URLSearchParams({ name: albumData.name || '', artist: currentArtist.name || '' });
-            const response = await fetch(`/api/album/${albumData.id}/tracks?${_aat2}`);
-            if (!response.ok) {
-                throw new Error(`Failed to load album tracks: ${response.status}`);
-            }
-
-            const data = await response.json();
-            if (!data.success || !data.tracks || data.tracks.length === 0) {
-                throw new Error('No tracks found for this release');
-            }
-
-            // Use the actual album type from release data
-            const albumType = rel.album_type || rel.type || 'album';
-
-            // Open the Add to Wishlist modal immediately (no waiting for ownership check)
-            hideLoadingOverlay();
-            await openAddToWishlistModal(albumData, currentArtist, data.tracks, albumType);
-
-            // Always lazy-load track ownership + metadata (non-blocking)
-            lazyLoadTrackOwnership(currentArtist.name, data.tracks, card, albumData.name);
-
-        } catch (error) {
-            hideLoadingOverlay();
-            console.error('❌ Error handling release click:', error);
-            showToast(`Error opening wishlist modal: ${error.message}`, 'error');
-        }
-    });
-
-    return card;
-}
-
-/**
- * Helper function to get artist image from the current artist detail page
- */
-function getArtistImageFromPage() {
-    try {
-        // Try to get from artist detail image element
-        const artistDetailImage = document.getElementById('artist-detail-image');
-        if (artistDetailImage && artistDetailImage.src && artistDetailImage.src !== window.location.href) {
-            return artistDetailImage.src;
-        }
-
-        // Try to get from artist hero image
-        const artistImage = document.getElementById('artist-image');
-        if (artistImage) {
-            const bgImage = window.getComputedStyle(artistImage).backgroundImage;
-            if (bgImage && bgImage !== 'none') {
-                // Extract URL from CSS background-image
-                const urlMatch = bgImage.match(/url\(["']?(.*?)["']?\)/);
-                if (urlMatch && urlMatch[1]) {
-                    return urlMatch[1];
-                }
-            }
-        }
-
-        return null;
-    } catch (error) {
-        console.warn('Error getting artist image from page:', error);
-        return null;
-    }
-}
-
-// ================================================================================================
-// LIBRARY COMPLETION STREAMING - Two-phase lazy-load pattern
-// ================================================================================================
-
-async function checkLibraryCompletion(artistName, discography) {
-    // Abort any in-progress check
-    if (artistDetailPageState.completionController) {
-        artistDetailPageState.completionController.abort();
-    }
-    artistDetailPageState.completionController = new AbortController();
-
-    const payload = {
-        artist_name: artistName,
-        albums: discography.albums || [],
-        eps: discography.eps || [],
-        singles: discography.singles || [],
-        source: discography?.source || null
-    };
-
-    try {
-        const response = await fetch('/api/library/completion-stream', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload),
-            signal: artistDetailPageState.completionController.signal
-        });
-
-        if (!response.ok) {
-            console.error(`❌ Completion stream failed: ${response.status}`);
-            return;
-        }
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-        let ownedCounts = { albums: 0, eps: 0, singles: 0 };
-        let totalCounts = { albums: 0, eps: 0, singles: 0 };
-        const artistFormatSet = new Set();
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split('\n');
-            buffer = lines.pop(); // Keep incomplete line in buffer
-
-            for (const line of lines) {
-                if (!line.startsWith('data: ')) continue;
-                try {
-                    const eventData = JSON.parse(line.slice(6));
-                    if (eventData.type === 'completion') {
-                        updateLibraryReleaseCard(eventData);
-                        totalCounts[eventData.category]++;
-                        if (eventData.status !== 'missing' && eventData.status !== 'error') {
-                            ownedCounts[eventData.category]++;
-                            // Accumulate formats for artist-level summary
-                            if (eventData.formats) {
-                                eventData.formats.forEach(f => artistFormatSet.add(f));
-                            }
-                        }
-                        // Update stats incrementally
-                        updateCategoryStatsFromStream(
-                            eventData.category,
-                            ownedCounts[eventData.category],
-                            totalCounts[eventData.category] - ownedCounts[eventData.category]
-                        );
-                    } else if (eventData.type === 'complete') {
-                        console.log(`✅ Library completion stream done: ${eventData.processed_count} items`);
-                        // Final stats recalculation
-                        recalculateSummaryStats(artistFormatSet);
-                    }
-                } catch (parseError) {
-                    console.warn('Error parsing SSE event:', parseError, line);
-                }
-            }
-        }
-    } catch (error) {
-        if (error.name === 'AbortError') {
-            console.log('🛑 Library completion stream aborted (navigation)');
-        } else {
-            console.error('❌ Error in library completion stream:', error);
-        }
-    }
-}
-
-function updateLibraryReleaseCard(data) {
-    const releaseId = data.id || "";
-    const card = document.querySelector(`[data-release-id="${releaseId}"]`);
-    if (!card) return;
-
-    const isOwned = data.status !== 'missing' && data.status !== 'error';
-
-    // Update card class
-    card.classList.remove('checking', 'missing');
-    if (!isOwned) {
-        card.classList.add('missing');
-    }
-
-    // Use real numbers — no rounding or overrides
-    const isComplete = data.owned_tracks >= data.expected_tracks && data.owned_tracks > 0;
-    const effectiveMissing = data.expected_tracks - data.owned_tracks;
-
-    // Update the mutable release data on the card
-    if (card._releaseData) {
-        card._releaseData.owned = isOwned;
-        if (isOwned && data.expected_tracks > 0) {
-            card._releaseData.track_completion = {
-                owned_tracks: data.owned_tracks,
-                total_tracks: isComplete ? data.owned_tracks : data.expected_tracks,
-                percentage: isComplete ? 100 : data.completion_percentage,
-                missing_tracks: effectiveMissing
-            };
-        } else if (isOwned) {
-            card._releaseData.track_completion = {
-                owned_tracks: data.owned_tracks,
-                total_tracks: data.owned_tracks,
-                percentage: 100,
-                missing_tracks: 0
-            };
-        } else {
-            card._releaseData.track_completion = 0;
-        }
-    }
-
-    // Update completion text element in-place
-    const completionText = card.querySelector('.completion-text');
-    if (completionText) {
-        completionText.classList.remove('checking', 'complete', 'partial', 'missing');
-        if (isOwned) {
-            if (effectiveMissing <= 0) {
-                completionText.textContent = `Complete (${data.owned_tracks})`;
-                completionText.className = 'completion-text complete';
-            } else {
-                completionText.textContent = `${data.owned_tracks}/${data.expected_tracks} tracks`;
-                completionText.className = 'completion-text partial';
-                completionText.title = `Missing ${effectiveMissing} track${effectiveMissing !== 1 ? 's' : ''}`;
-            }
-        } else {
-            completionText.textContent = 'Missing';
-            completionText.className = 'completion-text missing';
-        }
-    }
-
-    // Update completion fill bar in-place
-    const completionFill = card.querySelector('.completion-fill');
-    if (completionFill) {
-        completionFill.classList.remove('checking', 'complete', 'partial', 'missing');
-        if (isOwned) {
-            const pct = isComplete ? 100 : (data.completion_percentage || 100);
-            completionFill.style.width = `${pct}%`;
-            completionFill.classList.add(effectiveMissing <= 0 ? 'complete' : 'partial');
-        } else {
-            completionFill.style.width = '0%';
-            completionFill.classList.add('missing');
-        }
-    }
-
-    // Display format tags on owned releases
-    if (isOwned && data.formats && data.formats.length > 0) {
-        // Store formats on release data for modal use
-        if (card._releaseData) {
-            card._releaseData.formats = data.formats;
-        }
-        // Remove any existing format tags
-        const existingFormats = card.querySelector('.release-formats');
-        if (existingFormats) existingFormats.remove();
-
-        const formatsDiv = document.createElement('div');
-        formatsDiv.className = 'release-formats';
-        formatsDiv.innerHTML = data.formats.map(f => `<span class="release-format-tag">${f}</span>`).join('');
-        card.appendChild(formatsDiv);
-    }
-
-    // Re-apply filters so newly resolved cards respect active filters
-    applyDiscographyFilters();
-}
-
-function updateCategoryStatsFromStream(category, ownedCount, missingCount) {
-    const total = ownedCount + missingCount;
-    const completion = total > 0 ? Math.round((ownedCount / total) * 100) : 100;
-
-    const statsElement = document.getElementById(`${category}-stats`);
-    if (statsElement) {
-        statsElement.textContent = `${ownedCount}/${total}`;
-    }
-
-    const fillElement = document.getElementById(`${category}-completion-fill`);
-    if (fillElement) {
-        fillElement.classList.remove('checking');
-        fillElement.style.width = `${completion}%`;
-    }
-}
-
-function recalculateSummaryStats(artistFormatSet) {
-    const disc = artistDetailPageState.currentDiscography;
-    if (!disc) return;
-
-    // Recalculate from the live card data
-    const categories = ['albums', 'eps', 'singles'];
-    for (const cat of categories) {
-        const grid = document.getElementById(`${cat}-grid`);
-        if (!grid) continue;
-        let owned = 0, missing = 0;
-        grid.querySelectorAll('.release-card').forEach(card => {
-            if (card._releaseData) {
-                if (card._releaseData.owned === true) owned++;
-                else if (card._releaseData.owned === false) missing++;
-            }
-        });
-        updateCategoryStatsFromStream(cat, owned, missing);
-    }
-
-    // Update summary stats (albums only, matches original behavior)
-    const albumGrid = document.getElementById('albums-grid');
-    if (albumGrid) {
-        let ownedAlbums = 0, missingAlbums = 0;
-        albumGrid.querySelectorAll('.release-card').forEach(card => {
-            if (card._releaseData) {
-                if (card._releaseData.owned === true) ownedAlbums++;
-                else if (card._releaseData.owned === false) missingAlbums++;
-            }
-        });
-        const total = ownedAlbums + missingAlbums;
-        const pct = total > 0 ? Math.round((ownedAlbums / total) * 100) : 0;
-
-        const ownedEl = document.getElementById("owned-albums-count");
-        if (ownedEl) ownedEl.textContent = ownedAlbums;
-        const missingEl = document.getElementById("missing-albums-count");
-        if (missingEl) missingEl.textContent = missingAlbums;
-        const completionEl = document.getElementById("completion-percentage");
-        if (completionEl) completionEl.textContent = `${pct}%`;
-    }
-
-    // Display artist-level format summary
-    if (artistFormatSet && artistFormatSet.size > 0) {
-        const heroInfo = document.querySelector('.artist-hero-section .artist-info');
-        if (heroInfo) {
-            // Remove any existing artist format tag
-            const existing = heroInfo.querySelector('.artist-formats');
-            if (existing) existing.remove();
-
-            const formatsDiv = document.createElement('div');
-            formatsDiv.className = 'artist-formats';
-            formatsDiv.innerHTML = [...artistFormatSet].sort()
-                .map(f => `<span class="artist-format-tag">${f}</span>`)
-                .join('');
-            // Insert after genres container
-            const genresContainer = heroInfo.querySelector('.artist-genres-container');
-            if (genresContainer && genresContainer.nextSibling) {
-                heroInfo.insertBefore(formatsDiv, genresContainer.nextSibling);
-            } else {
-                heroInfo.appendChild(formatsDiv);
-            }
-        }
-    }
-}
-
-// ===============================================
-// Discography Filter Functions
-// ===============================================
-
-function initializeDiscographyFilters() {
-    const container = document.getElementById('discography-filters');
-    if (!container) return;
-
-    container.addEventListener('click', (e) => {
-        const btn = e.target.closest('.discography-filter-btn');
-        if (!btn) return;
-
-        const filterType = btn.dataset.filter;
-        const value = btn.dataset.value;
-
-        if (filterType === 'category') {
-            // Multi-toggle: toggle this category on/off
-            btn.classList.toggle('active');
-            discographyFilterState.categories[value] = btn.classList.contains('active');
-        } else if (filterType === 'content') {
-            // Multi-toggle: toggle this content type on/off
-            btn.classList.toggle('active');
-            discographyFilterState.content[value] = btn.classList.contains('active');
-        } else if (filterType === 'ownership') {
-            // Single-select: deactivate siblings, activate this one
-            container.querySelectorAll('[data-filter="ownership"]').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            discographyFilterState.ownership = value;
-        }
-
-        applyDiscographyFilters();
-    });
-}
-
-function resetDiscographyFilters() {
-    discographyFilterState.categories = { albums: true, eps: true, singles: true };
-    discographyFilterState.content = { live: true, compilations: true, featured: true };
-    discographyFilterState.ownership = 'all';
-
-    // Reset button visual states
-    const container = document.getElementById('discography-filters');
-    if (!container) return;
-    container.querySelectorAll('.discography-filter-btn').forEach(btn => {
-        const filterType = btn.dataset.filter;
-        const value = btn.dataset.value;
-        if (filterType === 'ownership') {
-            btn.classList.toggle('active', value === 'all');
-        } else {
-            btn.classList.add('active');
-        }
-    });
-}
-
-function applyDiscographyFilters() {
-    const categories = ['albums', 'eps', 'singles'];
-
-    for (const cat of categories) {
-        const section = document.getElementById(`${cat}-section`);
-        if (!section) continue;
-
-        // Category toggle — hide entire section
-        if (!discographyFilterState.categories[cat]) {
-            section.style.display = 'none';
-            continue;
-        }
-        section.style.display = '';
-
-        // Filter individual cards within the section
-        const grid = document.getElementById(`${cat}-grid`);
-        if (!grid) continue;
-
-        let visibleOwned = 0;
-        let visibleMissing = 0;
-        let visibleCount = 0;
-
-        grid.querySelectorAll('.release-card').forEach(card => {
-            let hidden = false;
-
-            // Content filters
-            if (!discographyFilterState.content.live && card.getAttribute('data-is-live') === 'true') {
-                hidden = true;
-            }
-            if (!discographyFilterState.content.compilations && card.getAttribute('data-is-compilation') === 'true') {
-                hidden = true;
-            }
-            if (!discographyFilterState.content.featured && card.getAttribute('data-is-featured') === 'true') {
-                hidden = true;
-            }
-
-            // Ownership filter (only apply if card is not still checking)
-            if (!hidden && discographyFilterState.ownership !== 'all' && card._releaseData) {
-                const owned = card._releaseData.owned;
-                if (owned !== null) {  // Don't hide cards still being checked
-                    if (discographyFilterState.ownership === 'owned' && !owned) hidden = true;
-                    if (discographyFilterState.ownership === 'missing' && owned) hidden = true;
-                }
-            }
-
-            card.style.display = hidden ? 'none' : '';
-
-            // Count visible cards for stats
-            if (!hidden && card._releaseData) {
-                visibleCount++;
-                if (card._releaseData.owned === true) visibleOwned++;
-                else if (card._releaseData.owned === false) visibleMissing++;
-            }
-        });
-
-        // Update section stats to reflect filtered view
-        const ownedEl = document.getElementById(`${cat}-owned-count`);
-        const missingEl = document.getElementById(`${cat}-missing-count`);
-        if (ownedEl) ownedEl.textContent = `${visibleOwned} owned`;
-        if (missingEl) missingEl.textContent = `${visibleMissing} missing`;
-
-        // Hide section entirely if all cards are hidden
-        section.style.display = visibleCount === 0 ? 'none' : '';
-    }
-}
-
-// ==================== Download Discography Modal ====================
-
-async function openDiscographyModal() {
-    // Support both Artists search page and Library artist detail page
-    let artist = artistsPageState.selectedArtist;
-    let discography = artistsPageState.artistDiscography;
-    let completionCache = artistsPageState.cache.completionData;
-
-    // Fallback to Library page state if Artists page has no data for THIS artist
-    const libId = artistDetailPageState.currentArtistId;
-    const libName = artistDetailPageState.currentArtistName;
-    const isLibraryPage = libId && libName;
-    const artistsPageMatchesLibrary = artist && isLibraryPage && artist.name?.toLowerCase() === libName?.toLowerCase();
-
-    if (isLibraryPage && (!artist || !discography || !artistsPageMatchesLibrary)) {
-        // On library page — don't trust stale artistsPageState from a previous Artists page search
-        artist = { id: libId, name: libName, image_url: document.getElementById('artist-detail-image')?.src || '' };
-        discography = null;
-
-        let metadataArtistId = null;
-        try {
-            showToast('Loading discography...', 'info');
-
-            // Fetch the artist's metadata IDs from the DB (enhanced view may not be loaded)
-            let lookupId = libId;
-            try {
-                const idRes = await fetch(`/api/library/artist/${libId}/enhanced`);
-                const idData = await idRes.json();
-                if (idData.success && idData.artist) {
-                    const a = idData.artist;
-                    metadataArtistId = a.spotify_artist_id || a.itunes_artist_id || a.deezer_id || null;
-                    lookupId = metadataArtistId || libId;
-                }
-            } catch (e) {
-                console.debug('[Discography] Could not fetch artist IDs, using DB id');
-            }
-
-            const res = await fetch(`/api/artist/${encodeURIComponent(lookupId)}/discography?artist_name=${encodeURIComponent(libName)}`);
-            const data = await res.json();
-
-            if (!data.error) {
-                discography = { albums: data.albums || [], singles: data.singles || [] };
-                if (discography.albums.length > 0 || discography.singles.length > 0) {
-                    artistsPageState.artistDiscography = discography;
-                    // Use metadata source ID for the modal (needed for download API calls)
-                    if (metadataArtistId) artist.id = metadataArtistId;
-                    artistsPageState.selectedArtist = artist;
-                } else {
-                    discography = null;
-                }
-            }
-        } catch (e) {
-            console.error('Failed to load discography:', e);
-        }
-    }
-
-    if (!artist || !discography) {
-        showToast('No discography found. Try searching this artist on the Artists page instead.', 'error');
-        return;
-    }
-
-    const completionData = (completionCache || {})[artist.id] || {};
-    const allReleases = [
-        ...(discography.albums || []).map(a => ({ ...a, _type: 'album' })),
-        ...(discography.eps || []).map(a => ({ ...a, _type: 'ep' })),
-        ...(discography.singles || []).map(a => ({ ...a, _type: 'single' })),
-    ];
-
-    // Build modal
-    const overlay = document.createElement('div');
-    overlay.className = 'discog-modal-overlay';
-    overlay.id = 'discog-modal-overlay';
-
-    const artistImg = artist.image_url || '';
-
-    overlay.innerHTML = `
-        <div class="discog-modal">
-            <div class="discog-modal-hero" ${artistImg ? `style="background-image:url('${artistImg}')"` : ''}>
-                <div class="discog-modal-hero-overlay"></div>
-                <div class="discog-modal-hero-content">
-                    <h2 class="discog-modal-title">Download Discography</h2>
-                    <p class="discog-modal-artist">${_esc(artist.name)}</p>
-                </div>
-                <button class="discog-modal-close" onclick="closeDiscographyModal()">&times;</button>
-            </div>
-            <div class="discog-filter-bar">
-                <div class="discog-filters">
-                    <button class="discog-filter active" data-type="album" onclick="toggleDiscogFilter(this)">Albums</button>
-                    <button class="discog-filter active" data-type="ep" onclick="toggleDiscogFilter(this)">EPs</button>
-                    <button class="discog-filter active" data-type="single" onclick="toggleDiscogFilter(this)">Singles</button>
-                </div>
-                <div class="discog-select-actions">
-                    <button class="discog-select-btn" onclick="discogSelectAll(true)">Select All</button>
-                    <button class="discog-select-btn" onclick="discogSelectAll(false)">Deselect All</button>
-                </div>
-            </div>
-            <div class="discog-grid" id="discog-grid">
-                ${allReleases.map((r, i) => _renderDiscogCard(r, i, completionData)).join('')}
-            </div>
-            <div class="discog-progress" id="discog-progress" style="display:none;"></div>
-            <div class="discog-footer" id="discog-footer">
-                <div class="discog-footer-info" id="discog-footer-info"></div>
-                <div class="discog-footer-actions">
-                    <button class="discog-cancel-btn" onclick="closeDiscographyModal()">Cancel</button>
-                    <button class="discog-submit-btn" id="discog-submit-btn">
-                        <span class="discog-submit-icon">⬇</span>
-                        <span id="discog-submit-text">Add to Wishlist</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-    requestAnimationFrame(() => overlay.classList.add('visible'));
-    _updateDiscogFooterCount();
-
-    // Bind submit button (avoids onclick being intercepted by helper system)
-    document.getElementById('discog-submit-btn')?.addEventListener('click', (e) => {
-        e.stopPropagation();
-        startDiscographyDownload();
-    });
-}
-
-function _esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
-
-function _renderDiscogCard(release, index, completionData) {
-    const comp = completionData?.albums?.find(c => c.id === release.id) || completionData?.singles?.find(c => c.id === release.id);
-    const status = comp?.status || 'unknown';
-    const isOwned = status === 'completed';
-    const isPartial = status === 'partial' || status === 'nearly_complete';
-    const year = release.release_date ? release.release_date.substring(0, 4) : '';
-    const tracks = release.total_tracks || 0;
-    const img = release.image_url || '';
-    const checked = !isOwned;
-    const statusClass = isOwned ? 'owned' : isPartial ? 'partial' : '';
-    const statusIcon = isOwned ? '✓' : isPartial ? '◐' : '';
-
-    return `
-        <label class="discog-card ${statusClass}" data-type="${release._type}" style="animation-delay:${index * 0.03}s">
-            <input type="checkbox" class="discog-card-cb" data-album-id="${release.id}" data-tracks="${tracks}" ${checked ? 'checked' : ''} onchange="_updateDiscogFooterCount()">
-            <div class="discog-card-art">
-                ${img ? `<img src="${img}" alt="" loading="lazy">` : '<div class="discog-card-art-placeholder">🎵</div>'}
-                ${statusIcon ? `<span class="discog-card-status">${statusIcon}</span>` : ''}
-            </div>
-            <div class="discog-card-info">
-                <div class="discog-card-title">${_esc(release.name)}</div>
-                <div class="discog-card-meta">${year}${year && tracks ? ' · ' : ''}${tracks ? tracks + ' tracks' : ''}</div>
-            </div>
-            <div class="discog-card-check"></div>
-        </label>
-    `;
-}
-
-function toggleDiscogFilter(btn) {
-    btn.classList.toggle('active');
-    const type = btn.dataset.type;
-    document.querySelectorAll(`.discog-card[data-type="${type}"]`).forEach(card => {
-        card.style.display = btn.classList.contains('active') ? '' : 'none';
-    });
-    _updateDiscogFooterCount();
-}
-
-function discogSelectAll(select) {
-    document.querySelectorAll('.discog-card-cb').forEach(cb => {
-        if (cb.closest('.discog-card').style.display !== 'none') {
-            cb.checked = select;
-        }
-    });
-    _updateDiscogFooterCount();
-}
-
-function _updateDiscogFooterCount() {
-    const checked = document.querySelectorAll('.discog-card-cb:checked');
-    let releases = 0, tracks = 0;
-    checked.forEach(cb => {
-        if (cb.closest('.discog-card').style.display !== 'none') {
-            releases++;
-            tracks += parseInt(cb.dataset.tracks) || 0;
-        }
-    });
-    const info = document.getElementById('discog-footer-info');
-    const btn = document.getElementById('discog-submit-text');
-    if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
-    if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
-    const submitBtn = document.getElementById('discog-submit-btn');
-    if (submitBtn) submitBtn.disabled = releases === 0;
-}
-
-async function startDiscographyDownload() {
-    let artist = artistsPageState.selectedArtist;
-    // Fallback to library page state
-    if (!artist && artistDetailPageState.currentArtistId) {
-        artist = { id: artistDetailPageState.currentArtistId, name: artistDetailPageState.currentArtistName || 'Unknown' };
-    }
-    if (!artist || !artist.id) {
-        showToast('No artist data available', 'error');
-        return;
-    }
-
-    const checked = document.querySelectorAll('.discog-card-cb:checked');
-    const albumEntries = [];
-    checked.forEach(cb => {
-        if (cb.closest('.discog-card').style.display !== 'none') {
-            albumEntries.push({
-                id: cb.dataset.albumId,
-                tracks: parseInt(cb.dataset.tracks) || 0
-            });
-        }
-    });
-    // Sort by track count descending — process Deluxe/expanded editions first
-    // so their tracks get added before standard editions (which then get deduped)
-    albumEntries.sort((a, b) => b.tracks - a.tracks);
-    const albumIds = albumEntries.map(e => e.id);
-
-    if (albumIds.length === 0) return;
-
-    // Switch to progress view
-    const grid = document.getElementById('discog-grid');
-    const progress = document.getElementById('discog-progress');
-    const footer = document.getElementById('discog-footer');
-    const filterBar = document.querySelector('.discog-filter-bar');
-
-    if (grid) grid.style.display = 'none';
-    if (filterBar) filterBar.style.display = 'none';
-    if (progress) {
-        progress.style.display = '';
-        progress.innerHTML = '';
-    }
-
-    // Build progress items
-    const albumMap = {};
-    checked.forEach(cb => {
-        if (cb.closest('.discog-card').style.display !== 'none') {
-            const card = cb.closest('.discog-card');
-            const id = cb.dataset.albumId;
-            const title = card.querySelector('.discog-card-title')?.textContent || '';
-            const img = card.querySelector('.discog-card-art img')?.src || '';
-            albumMap[id] = { title, img };
-
-            const item = document.createElement('div');
-            item.className = 'discog-progress-item';
-            item.id = `discog-prog-${id}`;
-            item.innerHTML = `
-                <div class="discog-prog-art">${img ? `<img src="${img}">` : '🎵'}</div>
-                <div class="discog-prog-info">
-                    <div class="discog-prog-title">${_esc(title)}</div>
-                    <div class="discog-prog-status">Waiting...</div>
-                </div>
-                <div class="discog-prog-icon"><div class="discog-spinner"></div></div>
-            `;
-            progress.appendChild(item);
-        }
-    });
-
-    // Update footer
-    const submitBtn = document.getElementById('discog-submit-btn');
-    if (submitBtn) submitBtn.style.display = 'none';
-    if (footer) {
-        const info = document.getElementById('discog-footer-info');
-        if (info) info.textContent = 'Processing... this may take a moment';
-    }
-
-    // Mark all items as active
-    document.querySelectorAll('.discog-progress-item').forEach(item => item.classList.add('active'));
-
-    try {
-        const response = await fetch(`/api/artist/${artist.id}/download-discography`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ album_ids: albumIds, artist_name: artist.name })
-        });
-
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split('\n');
-            buffer = lines.pop(); // Keep incomplete line in buffer
-
-            for (const line of lines) {
-                if (!line.trim()) continue;
-                try {
-                    const data = JSON.parse(line);
-
-                    if (data.status === 'complete') {
-                        _handleDiscogProgress({ type: 'complete', total_added: data.total_added, total_skipped: data.total_skipped });
-                    } else {
-                        // Per-album update
-                        const item = document.getElementById(`discog-prog-${data.album_id}`);
-                        if (!item) continue;
-
-                        const statusEl = item.querySelector('.discog-prog-status');
-                        const iconEl = item.querySelector('.discog-prog-icon');
-                        item.classList.remove('active');
-
-                        if (data.status === 'done') {
-                            const parts = [];
-                            if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
-                            if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
-                            statusEl.textContent = parts.join(', ') || 'No new tracks';
-                            iconEl.innerHTML = data.tracks_added > 0 ? '<span class="discog-check">✓</span>' : '<span class="discog-skip">—</span>';
-                            item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
-                        } else if (data.status === 'error') {
-                            statusEl.textContent = data.message || 'Error';
-                            iconEl.innerHTML = '<span class="discog-error">✗</span>';
-                            item.classList.add('error');
-                        }
-                    }
-                } catch (e) { /* skip malformed line */ }
-            }
-        }
-    } catch (err) {
-        showToast(`Discography download failed: ${err.message}`, 'error');
-    }
-}
-
-function _handleDiscogProgress(data) {
-    if (data.type === 'album') {
-        const item = document.getElementById(`discog-prog-${data.album_id}`);
-        if (!item) return;
-
-        const statusEl = item.querySelector('.discog-prog-status');
-        const iconEl = item.querySelector('.discog-prog-icon');
-
-        if (data.status === 'processing') {
-            statusEl.textContent = `Processing ${data.tracks_total} tracks...`;
-            item.classList.add('active');
-        } else if (data.status === 'done') {
-            const parts = [];
-            if (data.tracks_added > 0) parts.push(`${data.tracks_added} added`);
-            if (data.tracks_skipped > 0) parts.push(`${data.tracks_skipped} skipped`);
-            statusEl.textContent = parts.join(', ') || 'No new tracks';
-            iconEl.innerHTML = data.tracks_added > 0 ? '<span class="discog-check">✓</span>' : '<span class="discog-skip">—</span>';
-            item.classList.remove('active');
-            item.classList.add(data.tracks_added > 0 ? 'done' : 'skipped');
-        } else if (data.status === 'error') {
-            statusEl.textContent = data.message || 'Error';
-            iconEl.innerHTML = '<span class="discog-error">✗</span>';
-            item.classList.add('error');
-        }
-    } else if (data.type === 'complete') {
-        const info = document.getElementById('discog-footer-info');
-        if (info) info.textContent = `Done — ${data.total_added} tracks added, ${data.total_skipped} skipped`;
-
-        // Show "Process Wishlist" button
-        const footer = document.querySelector('.discog-footer-actions');
-        if (footer && data.total_added > 0) {
-            footer.innerHTML = `
-                <button class="discog-cancel-btn" onclick="closeDiscographyModal()">Close</button>
-                <button class="discog-submit-btn" onclick="closeDiscographyModal();fetch('/api/wishlist/process',{method:'POST'});showToast('Wishlist processing started','success')">
-                    <span class="discog-submit-icon">🚀</span>
-                    <span>Process Wishlist Now</span>
-                </button>
-            `;
-        } else if (footer) {
-            footer.innerHTML = '<button class="discog-cancel-btn" onclick="closeDiscographyModal()">Close</button>';
-        }
-    }
-}
-
-function closeDiscographyModal() {
-    const overlay = document.getElementById('discog-modal-overlay');
-    if (overlay) {
-        overlay.classList.remove('visible');
-        setTimeout(() => overlay.remove(), 300);
-    }
-}
-
-// ==================== Enhanced Library Management View ====================
-
-function isEnhancedAdmin() {
-    return currentProfile && currentProfile.is_admin;
-}
-
-function toggleEnhancedView(enabled) {
-
-    const standardSections = document.querySelector('.discography-sections');
-    const enhancedContainer = document.getElementById('enhanced-view-container');
-    const toggleBtns = document.querySelectorAll('.enhanced-view-toggle-btn');
-
-    if (!standardSections || !enhancedContainer) return;
-
-    artistDetailPageState.enhancedView = enabled;
-
-    // Update toggle button states
-    toggleBtns.forEach(btn => {
-        const view = btn.getAttribute('data-view');
-        btn.classList.toggle('active', (view === 'enhanced') === enabled);
-    });
-
-    // Hide/show standard filter groups (not relevant in enhanced view)
-    const filterGroups = document.querySelectorAll('#discography-filters .filter-group');
-    filterGroups.forEach(group => {
-        const label = group.querySelector('.filter-label');
-        if (label && label.textContent !== 'View') {
-            group.style.display = enabled ? 'none' : '';
-        }
-    });
-    const dividers = document.querySelectorAll('#discography-filters .filter-divider');
-    dividers.forEach((d, i) => {
-        if (i < dividers.length - 1) d.style.display = enabled ? 'none' : '';
-    });
-
-    if (enabled) {
-        standardSections.classList.add('hidden');
-        enhancedContainer.classList.remove('hidden');
-
-        if (!artistDetailPageState.enhancedData) {
-            loadEnhancedViewData(artistDetailPageState.currentArtistId);
-        } else {
-            renderEnhancedView();
-        }
-    } else {
-        standardSections.classList.remove('hidden');
-        enhancedContainer.classList.add('hidden');
-        const bulkBar = document.getElementById('enhanced-bulk-bar');
-        if (bulkBar) bulkBar.classList.remove('visible');
-    }
-}
-
-async function loadEnhancedViewData(artistId) {
-    const container = document.getElementById('enhanced-view-container');
-    if (!container) return;
-
-    container.innerHTML = '<div class="enhanced-loading">Loading library data...</div>';
-
-    try {
-        const response = await fetch(`/api/library/artist/${artistId}/enhanced`);
-        const data = await response.json();
-
-        if (!data.success) throw new Error(data.error || 'Failed to load enhanced data');
-
-        artistDetailPageState.enhancedData = data;
-        artistDetailPageState.expandedAlbums = new Set();
-        artistDetailPageState.selectedTracks = new Set();
-        artistDetailPageState.enhancedTrackSort = {};
-        artistDetailPageState.serverType = data.server_type || null;
-        _tagPreviewServerType = data.server_type || null;
-        _rebuildAlbumMap();
-        renderEnhancedView();
-
-    } catch (error) {
-        console.error('Error loading enhanced view data:', error);
-        container.innerHTML = `<div class="enhanced-loading" style="color: #ff6b6b;">Failed to load: ${escapeHtml(error.message)}</div>`;
-    }
-}
-
-function renderEnhancedView() {
-    const container = document.getElementById('enhanced-view-container');
-    const data = artistDetailPageState.enhancedData;
-    if (!container || !data) return;
-
-    container.innerHTML = '';
-
-    // Artist metadata card (visual + editable)
-    container.appendChild(renderArtistMetaPanel(data.artist));
-
-    // Library stats summary bar
-    container.appendChild(renderEnhancedStatsBar(data));
-
-    // Group albums by type
-    const grouped = { album: [], ep: [], single: [] };
-    (data.albums || []).forEach(album => {
-        const type = (album.record_type || 'album').toLowerCase();
-        if (grouped[type]) grouped[type].push(album);
-        else grouped[type] = [album];
-    });
-
-    const sectionLabels = { album: 'Albums', ep: 'EPs', single: 'Singles' };
-    for (const [type, label] of Object.entries(sectionLabels)) {
-        const albums = grouped[type] || [];
-        if (albums.length === 0) continue;
-        container.appendChild(renderEnhancedSection(type, label, albums));
-    }
-}
-
-function renderEnhancedStatsBar(data) {
-    const bar = document.createElement('div');
-    bar.className = 'enhanced-stats-bar';
-
-    const albums = data.albums || [];
-    const totalAlbums = albums.filter(a => (a.record_type || 'album') === 'album').length;
-    const totalEps = albums.filter(a => a.record_type === 'ep').length;
-    const totalSingles = albums.filter(a => a.record_type === 'single').length;
-    const totalTracks = albums.reduce((s, a) => s + (a.tracks ? a.tracks.length : 0), 0);
-
-    // Calculate total duration
-    let totalDurationMs = 0;
-    albums.forEach(a => (a.tracks || []).forEach(t => { totalDurationMs += (t.duration || 0); }));
-    const totalHours = Math.floor(totalDurationMs / 3600000);
-    const totalMins = Math.floor((totalDurationMs % 3600000) / 60000);
-
-    // Calculate format breakdown
-    const formatCounts = {};
-    albums.forEach(a => (a.tracks || []).forEach(t => {
-        const fmt = extractFormat(t.file_path);
-        if (fmt !== '-') formatCounts[fmt] = (formatCounts[fmt] || 0) + 1;
-    }));
-
-    const statsItems = [
-        { value: totalAlbums, label: 'Albums', icon: '&#128191;' },
-        { value: totalEps, label: 'EPs', icon: '&#128192;' },
-        { value: totalSingles, label: 'Singles', icon: '&#9834;' },
-        { value: totalTracks, label: 'Tracks', icon: '&#127925;' },
-        { value: totalHours > 0 ? `${totalHours}h ${totalMins}m` : `${totalMins}m`, label: 'Duration', icon: '&#9202;' },
-    ];
-
-    let statsHtml = statsItems.map(s =>
-        `<div class="enhanced-stat-item">
-            <span class="enhanced-stat-value">${s.value}</span>
-            <span class="enhanced-stat-label">${s.label}</span>
-        </div>`
-    ).join('');
-
-    // Format badges
-    const formatBadges = Object.entries(formatCounts)
-        .sort((a, b) => b[1] - a[1])
-        .map(([fmt, count]) => {
-            const cls = fmt === 'FLAC' ? 'flac' : (fmt === 'MP3' ? 'mp3' : 'other');
-            return `<span class="enhanced-format-badge ${cls}">${fmt} (${count})</span>`;
-        }).join('');
-
-    bar.innerHTML = `
-        <div class="enhanced-stats-items">${statsHtml}</div>
-        <div class="enhanced-stats-formats">${formatBadges}</div>
-    `;
-
-    return bar;
-}
-
-function renderArtistMetaPanel(artist) {
-    const panel = document.createElement('div');
-    panel.className = 'enhanced-artist-meta';
-    panel.id = 'enhanced-artist-meta';
-
-    // Build using DOM to avoid innerHTML escaping issues
-    const header = document.createElement('div');
-    header.className = 'enhanced-artist-meta-header';
-
-    // Left side: artist image + name display
-    const headerLeft = document.createElement('div');
-    headerLeft.className = 'enhanced-artist-meta-header-left';
-
-    if (artist.thumb_url) {
-        const img = document.createElement('img');
-        img.className = 'enhanced-artist-meta-image';
-        img.src = artist.thumb_url;
-        img.alt = artist.name || '';
-        img.onerror = function () { this.style.display = 'none'; };
-        headerLeft.appendChild(img);
-    }
-
-    const headerInfo = document.createElement('div');
-    headerInfo.className = 'enhanced-artist-meta-info';
-    const artistTitle = document.createElement('div');
-    artistTitle.className = 'enhanced-artist-meta-name';
-    artistTitle.textContent = artist.name || 'Unknown Artist';
-    headerInfo.appendChild(artistTitle);
-
-    // ID badges row (clickable links)
-    const idBadges = document.createElement('div');
-    idBadges.className = 'enhanced-artist-id-badges';
-    const idSources = [
-        { key: 'spotify_artist_id', label: 'Spotify', svc: 'spotify' },
-        { key: 'musicbrainz_id', label: 'MusicBrainz', svc: 'musicbrainz' },
-        { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
-        { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
-        { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
-        { key: 'itunes_artist_id', label: 'iTunes', svc: 'itunes' },
-        { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
-        { key: 'genius_url', label: 'Genius', svc: 'genius' },
-        { key: 'tidal_id', label: 'Tidal', svc: 'tidal' },
-        { key: 'qobuz_id', label: 'Qobuz', svc: 'qobuz' },
-    ];
-    idSources.forEach(src => {
-        if (artist[src.key]) {
-            idBadges.appendChild(makeClickableBadge(src.svc, 'artist', artist[src.key], src.label));
-        }
-    });
-    headerInfo.appendChild(idBadges);
-    headerLeft.appendChild(headerInfo);
-    header.appendChild(headerLeft);
-
-    // Right side: admin actions
-    const headerRight = document.createElement('div');
-    headerRight.className = 'enhanced-artist-meta-actions';
-
-    if (isEnhancedAdmin()) {
-        const editToggle = document.createElement('button');
-        editToggle.className = 'enhanced-meta-edit-toggle';
-        editToggle.textContent = 'Edit Metadata';
-        editToggle.onclick = () => {
-            const form = document.getElementById('enhanced-artist-meta-form');
-            if (form) {
-                const isVisible = !form.classList.contains('hidden');
-                form.classList.toggle('hidden');
-                editToggle.textContent = isVisible ? 'Edit Metadata' : 'Hide Editor';
-                editToggle.classList.toggle('active', !isVisible);
-            }
-        };
-        headerRight.appendChild(editToggle);
-
-        // Enrich dropdown button
-        const enrichWrap = document.createElement('div');
-        enrichWrap.className = 'enhanced-enrich-wrap';
-        const enrichBtn = document.createElement('button');
-        enrichBtn.className = 'enhanced-enrich-btn';
-        enrichBtn.textContent = 'Enrich ▾';
-        enrichBtn.onclick = (e) => {
-            e.stopPropagation();
-            enrichMenu.classList.toggle('visible');
-        };
-        enrichWrap.appendChild(enrichBtn);
-
-        const enrichMenu = document.createElement('div');
-        enrichMenu.className = 'enhanced-enrich-menu';
-        const services = [
-            { id: 'spotify', label: 'Spotify', icon: '🟢' },
-            { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
-            { id: 'deezer', label: 'Deezer', icon: '🟣' },
-            { id: 'discogs', label: 'Discogs', icon: '🟤' },
-            { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
-            { id: 'itunes', label: 'iTunes', icon: '🔴' },
-            { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
-            { id: 'genius', label: 'Genius', icon: '🟡' },
-            { id: 'tidal', label: 'Tidal', icon: '⬛' },
-            { id: 'qobuz', label: 'Qobuz', icon: '🔷' },
-        ];
-        services.forEach(svc => {
-            const item = document.createElement('div');
-            item.className = 'enhanced-enrich-menu-item';
-            item.textContent = `${svc.icon} ${svc.label}`;
-            item.onclick = (e) => {
-                e.stopPropagation();
-                enrichMenu.classList.remove('visible');
-                runEnrichment('artist', artist.id, svc.id, artist.name, '', artist.id);
-            };
-            enrichMenu.appendChild(item);
-        });
-        enrichWrap.appendChild(enrichMenu);
-        headerRight.appendChild(enrichWrap);
-    }
-
-    // Sync / Validate button
-    const syncBtn = document.createElement('button');
-    syncBtn.className = 'enhanced-sync-btn';
-    syncBtn.innerHTML = '&#x1f504; Sync';
-    syncBtn.title = 'Validate files — removes stale entries for tracks no longer on disk';
-    syncBtn.onclick = async (e) => {
-        e.stopPropagation();
-        syncBtn.disabled = true;
-        syncBtn.textContent = 'Syncing...';
-        try {
-            const res = await fetch(`/api/library/artist/${artist.id}/sync`, { method: 'POST' });
-            const data = await res.json();
-            if (data.success) {
-                const parts = [];
-                if (data.new_albums > 0) parts.push(`+${data.new_albums} albums`);
-                if (data.new_tracks > 0) parts.push(`+${data.new_tracks} tracks`);
-                if (data.stale_removed > 0) parts.push(`${data.stale_removed} stale removed`);
-                if (data.empty_albums_removed > 0) parts.push(`${data.empty_albums_removed} empty albums cleaned`);
-                if (data.name_updated) parts.push('name updated');
-                if (parts.length === 0) parts.push('Already in sync');
-                showToast(`${data.artist_name}: ${parts.join(', ')}`, 'success');
-                // Refresh enhanced view if anything changed
-                if (data.stale_removed > 0 || data.empty_albums_removed > 0) {
-                    loadEnhancedViewData(artist.id);
-                }
-            } else {
-                showToast(`Sync failed: ${data.error}`, 'error');
-            }
-        } catch (err) {
-            showToast(`Sync failed: ${err.message}`, 'error');
-        }
-        syncBtn.disabled = false;
-        syncBtn.innerHTML = '&#x1f504; Sync';
-    };
-    headerRight.appendChild(syncBtn);
-
-    const reorgAllBtn = document.createElement('button');
-    reorgAllBtn.className = 'enhanced-sync-btn';
-    reorgAllBtn.innerHTML = '&#128193; Reorganize All';
-    reorgAllBtn.title = 'Reorganize all albums for this artist using path template';
-    reorgAllBtn.onclick = () => _showReorganizeAllModal();
-    headerRight.appendChild(reorgAllBtn);
-
-    header.appendChild(headerRight);
-
-    panel.appendChild(header);
-
-    // Match status row (clickable to rematch)
-    const statusRow = document.createElement('div');
-    statusRow.className = 'enhanced-match-status-row';
-    const statusServices = [
-        { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
-        { key: 'musicbrainz_match_status', label: 'MusicBrainz', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
-        { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
-        { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
-        { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
-        { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
-        { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
-        { key: 'genius_match_status', label: 'Genius', attempted: 'genius_last_attempted', svc: 'genius' },
-        { key: 'tidal_match_status', label: 'Tidal', attempted: 'tidal_last_attempted', svc: 'tidal' },
-        { key: 'qobuz_match_status', label: 'Qobuz', attempted: 'qobuz_last_attempted', svc: 'qobuz' },
-    ];
-    statusServices.forEach(s => {
-        const status = artist[s.key];
-        const attempted = artist[s.attempted];
-        const chip = document.createElement('span');
-        chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
-        chip.textContent = `${s.label}: ${status || 'pending'}`;
-        const tipParts = [];
-        if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
-        tipParts.push('Click to rematch');
-        chip.title = tipParts.join(' · ');
-        chip.onclick = () => openManualMatchModal('artist', artist.id, s.svc, artist.name, artist.id);
-        statusRow.appendChild(chip);
-    });
-    panel.appendChild(statusRow);
-
-    // Collapsible edit form (hidden by default)
-    const form = document.createElement('div');
-    form.className = 'enhanced-artist-meta-form hidden';
-    form.id = 'enhanced-artist-meta-form';
-
-    const editableFields = [
-        { key: 'name', label: 'Artist Name', type: 'text' },
-        { key: 'genres', label: 'Genres (comma separated)', type: 'text', isArray: true },
-        { key: 'label', label: 'Label', type: 'text' },
-        { key: 'style', label: 'Style', type: 'text' },
-        { key: 'mood', label: 'Mood', type: 'text' },
-        { key: 'summary', label: 'Summary / Bio', type: 'textarea', wide: true },
-    ];
-
-    const grid = document.createElement('div');
-    grid.className = 'enhanced-artist-meta-grid';
-
-    editableFields.forEach(f => {
-        const fieldDiv = document.createElement('div');
-        fieldDiv.className = 'enhanced-meta-field' + (f.wide ? ' wide' : '');
-
-        const label = document.createElement('label');
-        label.className = 'enhanced-meta-field-label';
-        label.textContent = f.label;
-        fieldDiv.appendChild(label);
-
-        const val = f.isArray
-            ? (Array.isArray(artist[f.key]) ? artist[f.key].join(', ') : (artist[f.key] || ''))
-            : (artist[f.key] || '');
-
-        if (f.type === 'textarea') {
-            const ta = document.createElement('textarea');
-            ta.className = 'enhanced-meta-field-input';
-            ta.dataset.field = f.key;
-            ta.placeholder = f.label + '...';
-            ta.textContent = val;
-            fieldDiv.appendChild(ta);
-        } else {
-            const inp = document.createElement('input');
-            inp.type = 'text';
-            inp.className = 'enhanced-meta-field-input';
-            inp.dataset.field = f.key;
-            inp.value = val;
-            inp.placeholder = f.label + '...';
-            fieldDiv.appendChild(inp);
-        }
-
-        grid.appendChild(fieldDiv);
-    });
-
-    form.appendChild(grid);
-
-    // Save/revert buttons
-    const formActions = document.createElement('div');
-    formActions.className = 'enhanced-artist-form-actions';
-    const revertBtn = document.createElement('button');
-    revertBtn.className = 'enhanced-meta-cancel-btn';
-    revertBtn.textContent = 'Revert';
-    revertBtn.onclick = () => revertArtistMetadata();
-    const saveBtn = document.createElement('button');
-    saveBtn.className = 'enhanced-meta-save-btn';
-    saveBtn.textContent = 'Save Changes';
-    saveBtn.onclick = () => saveArtistMetadata();
-    formActions.appendChild(revertBtn);
-    formActions.appendChild(saveBtn);
-    form.appendChild(formActions);
-
-    panel.appendChild(form);
-
-    return panel;
-}
-
-function renderEnhancedSection(type, label, albums) {
-    const section = document.createElement('div');
-    section.className = 'enhanced-section';
-
-    const totalTracks = albums.reduce((sum, a) => sum + (a.tracks ? a.tracks.length : 0), 0);
-
-    const sectionHeader = document.createElement('div');
-    sectionHeader.className = 'enhanced-section-header';
-    sectionHeader.innerHTML = `
-        <span class="enhanced-section-title">${label}</span>
-        <span class="enhanced-section-count">${albums.length} release${albums.length !== 1 ? 's' : ''} &middot; ${totalTracks} tracks</span>
-    `;
-    section.appendChild(sectionHeader);
-
-    const grid = document.createElement('div');
-    grid.className = 'enhanced-album-grid';
-
-    albums.forEach(album => {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'enhanced-album-wrapper';
-        wrapper.id = `enhanced-album-wrapper-${album.id}`;
-        const isExpanded = artistDetailPageState.expandedAlbums.has(album.id);
-        if (isExpanded) wrapper.classList.add('expanded');
-
-        wrapper.appendChild(renderAlbumRow(album, type));
-
-        const tracksPanel = document.createElement('div');
-        tracksPanel.className = 'enhanced-tracks-panel';
-        tracksPanel.id = `enhanced-tracks-panel-${album.id}`;
-        if (isExpanded) tracksPanel.classList.add('visible');
-        const inner = document.createElement('div');
-        inner.className = 'enhanced-tracks-panel-inner';
-        if (isExpanded) {
-            inner.dataset.rendered = 'true';
-            inner.appendChild(renderExpandedAlbumHeader(album));
-            inner.appendChild(renderAlbumMetaRow(album));
-            inner.appendChild(renderTrackTable(album));
-        }
-        tracksPanel.appendChild(inner);
-        wrapper.appendChild(tracksPanel);
-
-        grid.appendChild(wrapper);
-    });
-    section.appendChild(grid);
-
-    return section;
-}
-
-function renderAlbumRow(album, type) {
-    const row = document.createElement('div');
-    row.className = 'enhanced-album-row';
-    row.id = `enhanced-album-row-${album.id}`;
-
-    if (artistDetailPageState.expandedAlbums.has(album.id)) row.classList.add('expanded');
-
-    const trackCount = album.tracks ? album.tracks.length : 0;
-    const typeClass = (type || 'album').toLowerCase();
-
-    // Total duration for this album
-    let albumDurMs = 0;
-    (album.tracks || []).forEach(t => { albumDurMs += (t.duration || 0); });
-    const albumDur = formatDurationMs(albumDurMs);
-
-    // Format breakdown for this album
-    const fmts = {};
-    (album.tracks || []).forEach(t => {
-        const f = extractFormat(t.file_path);
-        if (f !== '-') fmts[f] = (fmts[f] || 0) + 1;
-    });
-    const primaryFormat = Object.keys(fmts).sort((a, b) => fmts[b] - fmts[a])[0] || '';
-
-    // Build with DOM for safety
-    const expandIcon = document.createElement('span');
-    expandIcon.className = 'enhanced-album-expand-icon';
-    expandIcon.innerHTML = '&#9654;';
-    row.appendChild(expandIcon);
-
-    // Album art - larger, prominent
-    const artWrap = document.createElement('div');
-    artWrap.className = 'enhanced-album-art-wrap';
-    if (album.thumb_url) {
-        const img = document.createElement('img');
-        img.className = 'enhanced-album-thumb';
-        img.src = album.thumb_url;
-        img.alt = '';
-        img.loading = 'lazy';
-        img.onerror = function () {
-            const fallback = document.createElement('div');
-            fallback.className = 'enhanced-album-thumb-fallback';
-            fallback.innerHTML = '&#127925;';
-            this.replaceWith(fallback);
-        };
-        artWrap.appendChild(img);
-    } else {
-        const fallback = document.createElement('div');
-        fallback.className = 'enhanced-album-thumb-fallback';
-        fallback.innerHTML = '&#127925;';
-        artWrap.appendChild(fallback);
-    }
-    row.appendChild(artWrap);
-
-    // Info block (title + meta line)
-    const infoBlock = document.createElement('div');
-    infoBlock.className = 'enhanced-album-info-block';
-
-    const titleEl = document.createElement('span');
-    titleEl.className = 'enhanced-album-title';
-    titleEl.textContent = album.title || 'Unknown';
-    titleEl.title = album.title || '';
-    infoBlock.appendChild(titleEl);
-
-    const metaLine = document.createElement('span');
-    metaLine.className = 'enhanced-album-meta-line';
-    const metaParts = [];
-    if (album.year) metaParts.push(String(album.year));
-    metaParts.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
-    if (albumDur !== '-') metaParts.push(albumDur);
-    if (album.label) metaParts.push(album.label);
-    metaLine.textContent = metaParts.join(' \u00B7 ');
-    infoBlock.appendChild(metaLine);
-
-    row.appendChild(infoBlock);
-
-    // Type badge
-    const badge = document.createElement('span');
-    badge.className = `enhanced-album-type-badge ${typeClass}`;
-    badge.textContent = type;
-    row.appendChild(badge);
-
-    // Format badge inline
-    if (primaryFormat) {
-        const fmtBadge = document.createElement('span');
-        const fmtClass = primaryFormat === 'FLAC' ? 'flac' : (primaryFormat === 'MP3' ? 'mp3' : 'other');
-        fmtBadge.className = `enhanced-format-badge ${fmtClass}`;
-        fmtBadge.textContent = primaryFormat;
-        row.appendChild(fmtBadge);
-    }
-
-    row.addEventListener('click', () => toggleAlbumExpand(album.id));
-
-    return row;
-}
-
-function toggleAlbumExpand(albumId) {
-    const row = document.getElementById(`enhanced-album-row-${albumId}`);
-    const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
-    const wrapper = document.getElementById(`enhanced-album-wrapper-${albumId}`);
-    if (!row || !panel) return;
-
-    const isExpanded = artistDetailPageState.expandedAlbums.has(albumId);
-
-    if (isExpanded) {
-        artistDetailPageState.expandedAlbums.delete(albumId);
-        row.classList.remove('expanded');
-        panel.classList.remove('visible');
-        if (wrapper) wrapper.classList.remove('expanded');
-    } else {
-        artistDetailPageState.expandedAlbums.add(albumId);
-        row.classList.add('expanded');
-        panel.classList.add('visible');
-        if (wrapper) wrapper.classList.add('expanded');
-
-        // Lazy render
-        const inner = panel.querySelector('.enhanced-tracks-panel-inner');
-        if (inner && !inner.dataset.rendered) {
-            const album = findEnhancedAlbum(albumId);
-            if (album) {
-                inner.innerHTML = '';
-                inner.appendChild(renderExpandedAlbumHeader(album));
-                inner.appendChild(renderAlbumMetaRow(album));
-                inner.appendChild(renderTrackTable(album));
-                inner.dataset.rendered = 'true';
-            }
-        }
-    }
-}
-
-function findEnhancedAlbum(albumId) {
-    // Use cached map for O(1) lookups instead of O(n) array scan
-    if (artistDetailPageState._albumMap) {
-        return artistDetailPageState._albumMap.get(String(albumId)) || null;
-    }
-    const data = artistDetailPageState.enhancedData;
-    if (!data || !data.albums) return null;
-    return data.albums.find(a => String(a.id) === String(albumId));
-}
-
-function _rebuildAlbumMap() {
-    const data = artistDetailPageState.enhancedData;
-    if (!data || !data.albums) { artistDetailPageState._albumMap = null; return; }
-    const map = new Map();
-    data.albums.forEach(a => map.set(String(a.id), a));
-    artistDetailPageState._albumMap = map;
-}
-
-function renderExpandedAlbumHeader(album) {
-    const header = document.createElement('div');
-    header.className = 'enhanced-expanded-header';
-
-    // Large album art
-    if (album.thumb_url) {
-        const img = document.createElement('img');
-        img.className = 'enhanced-expanded-art';
-        img.src = album.thumb_url;
-        img.alt = album.title || '';
-        img.onerror = function () { this.style.display = 'none'; };
-        header.appendChild(img);
-    }
-
-    const info = document.createElement('div');
-    info.className = 'enhanced-expanded-info';
-
-    const title = document.createElement('div');
-    title.className = 'enhanced-expanded-title';
-    title.textContent = album.title || 'Unknown';
-    info.appendChild(title);
-
-    const meta = document.createElement('div');
-    meta.className = 'enhanced-expanded-meta';
-
-    const details = [];
-    if (album.year) details.push(String(album.year));
-    const trackCount = album.tracks ? album.tracks.length : 0;
-    details.push(`${trackCount} track${trackCount !== 1 ? 's' : ''}`);
-    let durMs = 0;
-    (album.tracks || []).forEach(t => { durMs += (t.duration || 0); });
-    if (durMs > 0) details.push(formatDurationMs(durMs));
-    if (album.label) details.push(album.label);
-    if (album.record_type) details.push(album.record_type.toUpperCase());
-
-    meta.textContent = details.join(' \u00B7 ');
-    info.appendChild(meta);
-
-    // Genre tags
-    const genres = Array.isArray(album.genres) ? album.genres : [];
-    if (genres.length > 0) {
-        const genreRow = document.createElement('div');
-        genreRow.className = 'enhanced-expanded-genres';
-        genres.forEach(g => {
-            const tag = document.createElement('span');
-            tag.className = 'enhanced-genre-tag';
-            tag.textContent = g;
-            genreRow.appendChild(tag);
-        });
-        info.appendChild(genreRow);
-    }
-
-    // External ID badges (clickable links)
-    const ids = document.createElement('div');
-    ids.className = 'enhanced-expanded-ids';
-    const idFields = [
-        { key: 'spotify_album_id', label: 'Spotify', svc: 'spotify' },
-        { key: 'musicbrainz_release_id', label: 'MusicBrainz', svc: 'musicbrainz' },
-        { key: 'deezer_id', label: 'Deezer', svc: 'deezer' },
-        { key: 'audiodb_id', label: 'AudioDB', svc: 'audiodb' },
-        { key: 'discogs_id', label: 'Discogs', svc: 'discogs' },
-        { key: 'itunes_album_id', label: 'iTunes', svc: 'itunes' },
-        { key: 'lastfm_url', label: 'Last.fm', svc: 'lastfm' },
-    ];
-    idFields.forEach(f => {
-        if (album[f.key]) {
-            ids.appendChild(makeClickableBadge(f.svc, 'album', album[f.key], f.label));
-        }
-    });
-    if (ids.children.length > 0) info.appendChild(ids);
-
-    // Resolve artist name for enrichment calls
-    const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-
-    // Match status chips (clickable to rematch)
-    const statusRow = document.createElement('div');
-    statusRow.className = 'enhanced-match-status-row compact';
-    const statusSvcs = [
-        { key: 'spotify_match_status', label: 'Spotify', attempted: 'spotify_last_attempted', svc: 'spotify' },
-        { key: 'musicbrainz_match_status', label: 'MB', attempted: 'musicbrainz_last_attempted', svc: 'musicbrainz' },
-        { key: 'deezer_match_status', label: 'Deezer', attempted: 'deezer_last_attempted', svc: 'deezer' },
-        { key: 'audiodb_match_status', label: 'AudioDB', attempted: 'audiodb_last_attempted', svc: 'audiodb' },
-        { key: 'discogs_match_status', label: 'Discogs', attempted: 'discogs_last_attempted', svc: 'discogs' },
-        { key: 'itunes_match_status', label: 'iTunes', attempted: 'itunes_last_attempted', svc: 'itunes' },
-        { key: 'lastfm_match_status', label: 'Last.fm', attempted: 'lastfm_last_attempted', svc: 'lastfm' },
-    ];
-    statusSvcs.forEach(s => {
-        const status = album[s.key];
-        const attempted = album[s.attempted];
-        const chip = document.createElement('span');
-        chip.className = `enhanced-match-chip clickable ${status === 'matched' ? 'matched' : (status === 'not_found' ? 'not-found' : 'pending')}`;
-        chip.textContent = `${s.label}: ${status || '—'}`;
-        const tipParts = [];
-        if (attempted) tipParts.push(`Last: ${new Date(attempted).toLocaleString()}`);
-        tipParts.push('Click to rematch');
-        chip.title = tipParts.join(' · ');
-        chip.onclick = (e) => {
-            e.stopPropagation();
-            const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
-            openManualMatchModal('album', album.id, s.svc, album.title || '', aId);
-        };
-        statusRow.appendChild(chip);
-    });
-    info.appendChild(statusRow);
-
-    // Action buttons row
-    const enrichRow = document.createElement('div');
-    enrichRow.className = 'enhanced-expanded-actions';
-
-    if (isEnhancedAdmin()) {
-        const albumEnrichWrap = document.createElement('div');
-        albumEnrichWrap.className = 'enhanced-enrich-wrap';
-        const albumEnrichBtn = document.createElement('button');
-        albumEnrichBtn.className = 'enhanced-enrich-btn small';
-        albumEnrichBtn.textContent = 'Enrich Album ▾';
-        albumEnrichBtn.onclick = (e) => { e.stopPropagation(); albumEnrichMenu.classList.toggle('visible'); };
-        albumEnrichWrap.appendChild(albumEnrichBtn);
-        const albumEnrichMenu = document.createElement('div');
-        albumEnrichMenu.className = 'enhanced-enrich-menu';
-        [
-            { id: 'spotify', label: 'Spotify', icon: '🟢' },
-            { id: 'musicbrainz', label: 'MusicBrainz', icon: '🟠' },
-            { id: 'deezer', label: 'Deezer', icon: '🟣' },
-            { id: 'discogs', label: 'Discogs', icon: '🟤' },
-            { id: 'audiodb', label: 'AudioDB', icon: '🔵' },
-            { id: 'itunes', label: 'iTunes', icon: '🔴' },
-            { id: 'lastfm', label: 'Last.fm', icon: '⚪' },
-            { id: 'genius', label: 'Genius', icon: '🟡' },
-        ].forEach(svc => {
-            const item = document.createElement('div');
-            item.className = 'enhanced-enrich-menu-item';
-            item.textContent = `${svc.icon} ${svc.label}`;
-            item.onclick = (e) => {
-                e.stopPropagation();
-                albumEnrichMenu.classList.remove('visible');
-                const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : '';
-                runEnrichment('album', album.id, svc.id, album.title || '', artistName, aId);
-            };
-            albumEnrichMenu.appendChild(item);
-        });
-        albumEnrichWrap.appendChild(albumEnrichMenu);
-        enrichRow.appendChild(albumEnrichWrap);
-
-        const writeTagsBtn = document.createElement('button');
-        writeTagsBtn.className = 'enhanced-write-tags-album-btn';
-        writeTagsBtn.innerHTML = '&#9998; Write All Tags';
-        writeTagsBtn.title = 'Write DB metadata to file tags for all tracks in this album';
-        writeTagsBtn.onclick = (e) => { e.stopPropagation(); writeAlbumTags(album.id); };
-        enrichRow.appendChild(writeTagsBtn);
-
-        const rgAlbumBtn = document.createElement('button');
-        rgAlbumBtn.className = 'enhanced-rg-album-btn';
-        rgAlbumBtn.innerHTML = '&#9835; ReplayGain';
-        rgAlbumBtn.title = 'Analyze ReplayGain for all tracks in this album (writes track + album gain)';
-        rgAlbumBtn.dataset.albumId = album.id;
-        rgAlbumBtn.onclick = (e) => { e.stopPropagation(); analyzeAlbumReplayGain(album.id, rgAlbumBtn); };
-        enrichRow.appendChild(rgAlbumBtn);
-
-        const reorganizeBtn = document.createElement('button');
-        reorganizeBtn.className = 'enhanced-reorganize-album-btn';
-        reorganizeBtn.innerHTML = '&#128193; Reorganize';
-        reorganizeBtn.title = 'Reorganize album files using a custom path template';
-        reorganizeBtn.onclick = (e) => { e.stopPropagation(); showReorganizeModal(album.id); };
-        enrichRow.appendChild(reorganizeBtn);
-
-        const redownloadBtn = document.createElement('button');
-        redownloadBtn.className = 'enhanced-redownload-album-btn';
-        redownloadBtn.innerHTML = '&#8635; Redownload';
-        redownloadBtn.title = 'Redownload this album (opens Download Missing modal with force-download)';
-        redownloadBtn.onclick = (e) => {
-            e.stopPropagation();
-            const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-            redownloadLibraryAlbum(album, aName, redownloadBtn);
-        };
-        enrichRow.appendChild(redownloadBtn);
-
-        const deleteAlbumBtn = document.createElement('button');
-        deleteAlbumBtn.className = 'enhanced-delete-album-btn';
-        deleteAlbumBtn.textContent = 'Delete Album';
-        deleteAlbumBtn.onclick = (e) => { e.stopPropagation(); deleteLibraryAlbum(album.id); };
-        enrichRow.appendChild(deleteAlbumBtn);
-    }
-
-    // Report Issue button (available to all users)
-    const reportBtn = document.createElement('button');
-    reportBtn.className = 'enhanced-report-issue-btn';
-    reportBtn.innerHTML = '&#9873; Report Issue';
-    reportBtn.title = 'Report a problem with this album';
-    reportBtn.onclick = (e) => {
-        e.stopPropagation();
-        const aName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-        showReportIssueModal('album', album.id, album.title || '', aName);
-    };
-    enrichRow.appendChild(reportBtn);
-
-    info.appendChild(enrichRow);
-
-    header.appendChild(info);
-    return header;
-}
-
-function renderAlbumMetaRow(album) {
-    const row = document.createElement('div');
-    row.className = 'enhanced-album-meta-row';
-    row.id = `enhanced-album-meta-${album.id}`;
-
-    const fields = [
-        { key: 'title', label: 'Title', value: album.title || '' },
-        { key: 'year', label: 'Year', value: album.year || '', type: 'number' },
-        { key: 'genres', label: 'Genres', value: Array.isArray(album.genres) ? album.genres.join(', ') : (album.genres || '') },
-        { key: 'label', label: 'Label', value: album.label || '' },
-        { key: 'style', label: 'Style', value: album.style || '' },
-        { key: 'mood', label: 'Mood', value: album.mood || '' },
-        { key: 'record_type', label: 'Type', value: album.record_type || 'album' },
-        { key: 'explicit', label: 'Explicit', value: album.explicit ? '1' : '0' },
-    ];
-
-    const admin = isEnhancedAdmin();
-    fields.forEach(f => {
-        const fieldDiv = document.createElement('div');
-        fieldDiv.className = 'enhanced-album-meta-field';
-        const label = document.createElement('label');
-        label.className = 'enhanced-album-meta-label';
-        label.textContent = f.label;
-        fieldDiv.appendChild(label);
-        if (admin) {
-            const input = document.createElement('input');
-            input.className = 'enhanced-album-meta-input';
-            input.type = f.type || 'text';
-            input.dataset.albumId = album.id;
-            input.dataset.field = f.key;
-            input.value = String(f.value);
-            input.addEventListener('click', e => e.stopPropagation());
-            fieldDiv.appendChild(input);
-        } else {
-            const span = document.createElement('span');
-            span.className = 'enhanced-album-meta-value';
-            span.textContent = String(f.value) || '—';
-            fieldDiv.appendChild(span);
-        }
-        row.appendChild(fieldDiv);
-    });
-
-    if (admin) {
-        const saveDiv = document.createElement('div');
-        saveDiv.className = 'enhanced-album-meta-field';
-        const spacer = document.createElement('label');
-        spacer.className = 'enhanced-album-meta-label';
-        spacer.innerHTML = '&nbsp;';
-        saveDiv.appendChild(spacer);
-        const saveBtn = document.createElement('button');
-        saveBtn.className = 'enhanced-album-save-btn';
-        saveBtn.textContent = 'Save Album';
-        saveBtn.onclick = (e) => { e.stopPropagation(); saveAlbumMetadata(album.id); };
-        saveDiv.appendChild(saveBtn);
-        row.appendChild(saveDiv);
-    }
-
-    return row;
-}
-
-function _buildTrackRow(track, album, admin) {
-    const tr = document.createElement('tr');
-    tr.dataset.trackId = track.id;
-    tr.dataset.albumId = album.id;
-    if (artistDetailPageState.selectedTracks.has(String(track.id))) tr.classList.add('selected');
-
-    // Checkbox (admin only)
-    if (admin) {
-        const cbTd = document.createElement('td');
-        const cb = document.createElement('input');
-        cb.type = 'checkbox';
-        cb.className = 'enhanced-track-checkbox';
-        cb.checked = artistDetailPageState.selectedTracks.has(String(track.id));
-        cbTd.appendChild(cb);
-        tr.appendChild(cbTd);
-    }
-
-    // Play button
-    const playTd = document.createElement('td');
-    playTd.className = 'col-play';
-    const playBtn = document.createElement('button');
-    playBtn.className = 'enhanced-play-btn';
-    playBtn.innerHTML = '&#9654;';
-    playBtn.title = track.file_path ? 'Play track' : 'No file available';
-    if (!track.file_path) playBtn.disabled = true;
-    playTd.appendChild(playBtn);
-    tr.appendChild(playTd);
-
-    // Track number
-    const numTd = document.createElement('td');
-    numTd.className = 'col-num' + (admin ? ' editable' : '');
-    numTd.textContent = track.track_number || '-';
-    tr.appendChild(numTd);
-
-    // Disc number
-    const discTd = document.createElement('td');
-    discTd.className = 'col-disc';
-    discTd.textContent = track.disc_number || '-';
-    tr.appendChild(discTd);
-
-    // Title
-    const titleTd = document.createElement('td');
-    titleTd.className = 'col-title' + (admin ? ' editable' : '');
-    titleTd.textContent = track.title || 'Unknown';
-    tr.appendChild(titleTd);
-
-    // Duration
-    const durTd = document.createElement('td');
-    durTd.className = 'col-duration';
-    durTd.textContent = formatDurationMs(track.duration);
-    tr.appendChild(durTd);
-
-    // Format
-    const fmtTd = document.createElement('td');
-    fmtTd.className = 'col-format';
-    const format = extractFormat(track.file_path);
-    const fmtSpan = document.createElement('span');
-    const fmtClass = format === 'FLAC' ? 'flac' : (format === 'MP3' ? 'mp3' : 'other');
-    fmtSpan.className = `enhanced-format-badge ${fmtClass}`;
-    fmtSpan.textContent = format;
-    fmtTd.appendChild(fmtSpan);
-    tr.appendChild(fmtTd);
-
-    // Bitrate
-    const brTd = document.createElement('td');
-    brTd.className = 'col-bitrate';
-    const brSpan = document.createElement('span');
-    const brClass = (track.bitrate || 0) >= 320 ? 'high' : ((track.bitrate || 0) >= 192 ? 'medium' : 'low');
-    brSpan.className = `enhanced-bitrate ${brClass}`;
-    brSpan.textContent = track.bitrate ? track.bitrate + ' kbps' : '-';
-    brTd.appendChild(brSpan);
-    tr.appendChild(brTd);
-
-    // BPM
-    const bpmTd = document.createElement('td');
-    bpmTd.className = 'col-bpm' + (admin ? ' editable' : '');
-    bpmTd.textContent = track.bpm || '-';
-    tr.appendChild(bpmTd);
-
-    // File path
-    const pathTd = document.createElement('td');
-    pathTd.className = 'col-path';
-    const filePath = track.file_path || '-';
-    const fileName = filePath !== '-' ? filePath.split(/[\\/]/).pop() : '-';
-    pathTd.textContent = fileName;
-    pathTd.title = filePath;
-    tr.appendChild(pathTd);
-
-    // Match status chips
-    const matchTd = document.createElement('td');
-    matchTd.className = 'col-match';
-    const matchCell = document.createElement('div');
-    matchCell.className = 'enhanced-track-match-cell';
-    const trackServices = [
-        { svc: 'spotify', col: 'spotify_track_id', label: 'SP' },
-        { svc: 'musicbrainz', col: 'musicbrainz_recording_id', label: 'MB' },
-        { svc: 'deezer', col: 'deezer_id', label: 'Dz' },
-        { svc: 'audiodb', col: 'audiodb_id', label: 'ADB' },
-        { svc: 'itunes', col: 'itunes_track_id', label: 'iT' },
-        { svc: 'lastfm', col: 'lastfm_url', label: 'LFM' },
-        { svc: 'genius', col: 'genius_id', label: 'Gen' },
-    ];
-    trackServices.forEach(s => {
-        const hasId = !!track[s.col];
-        const chip = document.createElement('span');
-        chip.className = 'enhanced-track-match-chip' + (hasId ? ' matched' : ' not-found');
-        chip.textContent = s.label;
-        chip.title = hasId ? `${s.svc}: ${track[s.col]}` : `${s.svc}: no match`;
-        chip.dataset.service = s.svc;
-        matchCell.appendChild(chip);
-    });
-    matchTd.appendChild(matchCell);
-    tr.appendChild(matchTd);
-
-    // Add to Queue button
-    const queueTd = document.createElement('td');
-    queueTd.className = 'col-queue';
-    if (track.file_path) {
-        const queueBtn = document.createElement('button');
-        queueBtn.className = 'enhanced-queue-btn';
-        queueBtn.innerHTML = '&#43;';
-        queueBtn.title = 'Add to queue';
-        queueTd.appendChild(queueBtn);
-    }
-    tr.appendChild(queueTd);
-
-    if (admin) {
-        // Write Tags button (admin only)
-        const tagTd = document.createElement('td');
-        tagTd.className = 'col-writetag';
-        if (track.file_path) {
-            const tagBtn = document.createElement('button');
-            tagBtn.className = 'enhanced-write-tag-btn';
-            tagBtn.innerHTML = '&#9998;';
-            tagBtn.title = 'Write tags to file';
-            tagTd.appendChild(tagBtn);
-
-            const rgBtn = document.createElement('button');
-            rgBtn.className = 'enhanced-rg-btn';
-            rgBtn.textContent = 'RG';
-            rgBtn.title = 'Analyze & write ReplayGain (track gain)';
-            tagTd.appendChild(rgBtn);
-        }
-        tr.appendChild(tagTd);
-
-        // Track actions cell — source info, redownload, delete (admin only)
-        const actionsTd = document.createElement('td');
-        actionsTd.className = 'col-track-actions';
-        actionsTd.innerHTML = `
-            <div class="enhanced-track-actions-group">
-                <button class="enhanced-source-info-btn" title="View download source info">ℹ</button>
-                <button class="enhanced-redownload-btn" title="Redownload this track">&#8635;</button>
-                <button class="enhanced-delete-btn" title="Delete track from library">&#10005;</button>
-            </div>
-        `;
-        tr.appendChild(actionsTd);
-    } else {
-        // Report Issue button per track (non-admin)
-        const reportTd = document.createElement('td');
-        reportTd.className = 'col-report';
-        const reportBtn = document.createElement('button');
-        reportBtn.className = 'enhanced-track-report-btn';
-        reportBtn.innerHTML = '&#9873;';
-        reportBtn.title = 'Report issue with this track';
-        reportTd.appendChild(reportBtn);
-        tr.appendChild(reportTd);
-    }
-
-    // Mobile actions column (visible only on mobile via CSS)
-    const mobileTd = document.createElement('td');
-    mobileTd.className = 'col-mobile-actions';
-    const mobileBtn = document.createElement('button');
-    mobileBtn.className = 'enhanced-mobile-actions-btn';
-    mobileBtn.innerHTML = '⋯';
-    mobileBtn.title = 'Actions';
-    mobileTd.appendChild(mobileBtn);
-    tr.appendChild(mobileTd);
-
-    return tr;
-}
-
-function _getTrackDataFromRow(tr) {
-    const trackId = tr.dataset.trackId;
-    const albumId = tr.dataset.albumId;
-    const album = findEnhancedAlbum(albumId);
-    if (!album) return null;
-    const track = (album.tracks || []).find(t => String(t.id) === String(trackId));
-    return track ? { track, album, trackId, albumId } : null;
-}
-
-function _attachTableDelegation(table, album) {
-    // Single click handler for the entire table — replaces 12-16 per-row handlers
-    const admin = isEnhancedAdmin();
-    table.addEventListener('click', (e) => {
-        const target = e.target;
-        const tr = target.closest('tr[data-track-id]');
-
-        // Header checkbox (select all)
-        if (target.closest('thead') && target.classList.contains('enhanced-track-checkbox')) {
-            toggleSelectAllTracks(album.id, target.checked);
-            return;
-        }
-
-        // Sort header click
-        const th = target.closest('th[data-sort-field]');
-        if (th) {
-            cancelInlineEdit();
-            const sortField = th.dataset.sortField;
-            const current = artistDetailPageState.enhancedTrackSort[album.id];
-            const ascending = current && current.field === sortField ? !current.ascending : true;
-            artistDetailPageState.enhancedTrackSort[album.id] = { field: sortField, ascending };
-            sortEnhancedTracks(album, sortField, ascending);
-            _rebuildTbody(table, album);
-            // Update header sort indicators
-            table.querySelectorAll('th[data-sort-field]').forEach(h => {
-                const sf = h.dataset.sortField;
-                const baseLabel = h.dataset.label || '';
-                const sort = artistDetailPageState.enhancedTrackSort[album.id];
-                h.textContent = sort && sort.field === sf ? baseLabel + (sort.ascending ? ' \u25B2' : ' \u25BC') : baseLabel;
-            });
-            return;
-        }
-
-        if (!tr) return;
-        const info = _getTrackDataFromRow(tr);
-        if (!info) return;
-        const { track, trackId } = info;
-
-        // Checkbox
-        if (target.classList.contains('enhanced-track-checkbox')) {
-            toggleTrackSelection(String(trackId));
-            return;
-        }
-
-        // Play button
-        if (target.closest('.enhanced-play-btn')) {
-            e.stopPropagation();
-            if (track.file_path) {
-                const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-                playLibraryTrack(track, album.title || '', artistName);
-            }
-            return;
-        }
-
-        // Inline editable cells (admin)
-        if (admin) {
-            const cell = target.closest('td.editable');
-            if (cell) {
-                e.stopPropagation();
-                if (cell.classList.contains('col-num')) {
-                    startInlineEdit(cell, 'track', track.id, 'track_number', track.track_number || '');
-                } else if (cell.classList.contains('col-title')) {
-                    startInlineEdit(cell, 'track', track.id, 'title', track.title || '');
-                } else if (cell.classList.contains('col-bpm')) {
-                    startInlineEdit(cell, 'track', track.id, 'bpm', track.bpm || '');
-                }
-                return;
-            }
-        }
-
-        // Match chip click (admin — open manual match modal)
-        if (admin) {
-            const chip = target.closest('.enhanced-track-match-chip');
-            if (chip) {
-                e.stopPropagation();
-                const svc = chip.dataset.service;
-                const aId = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null;
-                openManualMatchModal('track', track.id, svc, track.title || '', aId);
-                return;
-            }
-        }
-
-        // Queue button
-        if (target.closest('.enhanced-queue-btn')) {
-            e.stopPropagation();
-            if (track.file_path) {
-                const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-                let albumArt = album.thumb_url || null;
-                if (!albumArt && artistDetailPageState.enhancedData) {
-                    albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
-                }
-                addToQueue({
-                    title: track.title || 'Unknown Track',
-                    artist: artistName || 'Unknown Artist',
-                    album: album.title || 'Unknown Album',
-                    file_path: track.file_path,
-                    filename: track.file_path,
-                    is_library: true,
-                    image_url: albumArt,
-                    id: track.id,
-                    artist_id: artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.id : null,
-                    album_id: album.id,
-                    bitrate: track.bitrate,
-                    sample_rate: track.sample_rate
-                });
-            }
-            return;
-        }
-
-        // Write tags button (admin)
-        if (target.closest('.enhanced-write-tag-btn')) {
-            e.stopPropagation();
-            showTagPreview(track.id);
-            return;
-        }
-
-        // ReplayGain analyze button (admin)
-        if (target.closest('.enhanced-rg-btn')) {
-            e.stopPropagation();
-            analyzeTrackReplayGain(track.id, target.closest('.enhanced-rg-btn'));
-            return;
-        }
-
-        // Source info button (admin)
-        if (target.closest('.enhanced-source-info-btn')) {
-            e.stopPropagation();
-            showTrackSourceInfo(track, target.closest('.enhanced-source-info-btn'));
-            return;
-        }
-
-        // Redownload button (admin)
-        if (target.closest('.enhanced-redownload-btn')) {
-            e.stopPropagation();
-            showTrackRedownloadModal(track, album);
-            return;
-        }
-
-        // Delete button (admin)
-        if (target.closest('.enhanced-delete-btn')) {
-            e.stopPropagation();
-            deleteLibraryTrack(track.id, album.id);
-            return;
-        }
-
-        // Report button (non-admin)
-        if (target.closest('.enhanced-track-report-btn')) {
-            e.stopPropagation();
-            const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-            showReportIssueModal('track', track.id, track.title || 'Unknown', artistName, album.title || '');
-            return;
-        }
-
-        // Mobile actions button (⋯)
-        if (target.closest('.enhanced-mobile-actions-btn')) {
-            e.stopPropagation();
-            _showMobileTrackActions(track, album);
-            return;
-        }
-    });
-}
-
-function _showMobileTrackActions(track, album) {
-    // Remove any existing popover
-    document.querySelectorAll('.mobile-popover-overlay, .enhanced-mobile-actions-popover').forEach(el => el.remove());
-
-    const overlay = document.createElement('div');
-    overlay.className = 'mobile-popover-overlay';
-
-    const popover = document.createElement('div');
-    popover.className = 'enhanced-mobile-actions-popover';
-
-    const title = document.createElement('div');
-    title.className = 'popover-title';
-    title.textContent = track.title || 'Track';
-    popover.appendChild(title);
-
-    const admin = isEnhancedAdmin();
-    const artistName = artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist.name : '';
-    const albumArt = album.thumb_url || (artistDetailPageState.enhancedData ? artistDetailPageState.enhancedData.artist?.thumb_url : null);
-
-    const actions = [];
-    if (track.file_path) {
-        actions.push({
-            icon: '▶', label: 'Play', action: () => {
-                playLibraryTrack({ id: track.id, title: track.title, file_path: track.file_path, bitrate: track.bitrate, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id }, album.title || '', artistName);
-            }
-        });
-        actions.push({
-            icon: '+', label: 'Add to Queue', action: () => {
-                addToQueue({ title: track.title || 'Unknown', artist: artistName, album: album.title || '', file_path: track.file_path, filename: track.file_path, is_library: true, image_url: albumArt, id: track.id, artist_id: artistDetailPageState.enhancedData?.artist?.id, album_id: album.id, bitrate: track.bitrate });
-            }
-        });
-    }
-    if (admin && track.file_path) {
-        actions.push({ icon: '✎', label: 'Write Tags', action: () => showTagPreview(track.id) });
-    }
-    if (admin) {
-        actions.push({ icon: 'ℹ', label: 'Source Info', action: () => showTrackSourceInfo(track, null) });
-        actions.push({ icon: '↻', label: 'Redownload Track', action: () => showTrackRedownloadModal(track, album) });
-        actions.push({ icon: '✕', label: 'Delete Track', cls: 'popover-delete', action: () => deleteLibraryTrack(track.id, album.id) });
-    }
-
-    actions.forEach(a => {
-        const btn = document.createElement('button');
-        if (a.cls) btn.className = a.cls;
-        btn.innerHTML = `<span class="popover-icon">${a.icon}</span>${a.label}`;
-        btn.addEventListener('click', () => { close(); a.action(); });
-        popover.appendChild(btn);
-    });
-
-    const cancelBtn = document.createElement('button');
-    cancelBtn.className = 'popover-cancel';
-    cancelBtn.textContent = 'Cancel';
-    cancelBtn.addEventListener('click', close);
-    popover.appendChild(cancelBtn);
-
-    function close() {
-        overlay.remove();
-        popover.remove();
-    }
-    overlay.addEventListener('click', close);
-
-    document.body.appendChild(overlay);
-    document.body.appendChild(popover);
-}
-
-function _rebuildTbody(table, album) {
-    // Replace only the tbody — keeps thead and event delegation intact
-    const admin = isEnhancedAdmin();
-    const oldTbody = table.querySelector('tbody');
-    const newTbody = document.createElement('tbody');
-    (album.tracks || []).forEach(track => {
-        newTbody.appendChild(_buildTrackRow(track, album, admin));
-    });
-    if (oldTbody) table.replaceChild(newTbody, oldTbody);
-    else table.appendChild(newTbody);
-}
-
-function renderTrackTable(album) {
-    const wrapper = document.createElement('div');
-    const tracks = album.tracks || [];
-
-    // Re-apply stored sort order if any
-    const activeSort = artistDetailPageState.enhancedTrackSort[album.id];
-    if (activeSort) {
-        sortEnhancedTracks(album, activeSort.field, activeSort.ascending);
-    }
-
-    if (tracks.length === 0) {
-        wrapper.innerHTML = '<div class="enhanced-no-tracks">No tracks in database</div>';
-        return wrapper;
-    }
-
-    const table = document.createElement('table');
-    table.className = 'enhanced-track-table';
-    table.dataset.albumId = album.id;
-
-    const admin = isEnhancedAdmin();
-    // Clear stale selections for non-admin to prevent ghost state
-    if (!admin) {
-        artistDetailPageState.selectedTracks.clear();
-    }
-
-    // Header
-    const thead = document.createElement('thead');
-    const headRow = document.createElement('tr');
-    if (admin) {
-        const selectAllTh = document.createElement('th');
-        const selectAllCb = document.createElement('input');
-        selectAllCb.type = 'checkbox';
-        selectAllCb.className = 'enhanced-track-checkbox';
-        selectAllTh.appendChild(selectAllCb);
-        headRow.appendChild(selectAllTh);
-    }
-
-    const columns = [
-        { label: '', cls: 'col-play' },
-        { label: '#', cls: 'col-num', sortField: 'track_number' },
-        { label: 'Disc', cls: 'col-disc', sortField: 'disc_number' },
-        { label: 'Title', cls: 'col-title', sortField: 'title' },
-        { label: 'Duration', cls: 'col-duration', sortField: 'duration' },
-        { label: 'Format', cls: 'col-format', sortField: 'format' },
-        { label: 'Bitrate', cls: 'col-bitrate', sortField: 'bitrate' },
-        { label: 'BPM', cls: 'col-bpm', sortField: 'bpm' },
-        { label: 'File', cls: 'col-path' },
-        { label: 'Match', cls: 'col-match' },
-        { label: '', cls: 'col-queue' },
-        ...(admin ? [
-            { label: '', cls: 'col-writetag' },
-            { label: '', cls: 'col-delete' },
-        ] : [
-            { label: '', cls: 'col-report' },
-        ]),
-        { label: '', cls: 'col-mobile-actions' },
-    ];
-    const currentSort = artistDetailPageState.enhancedTrackSort[album.id];
-    columns.forEach(col => {
-        const th = document.createElement('th');
-        th.className = col.cls;
-        if (col.sortField) {
-            let headerText = col.label;
-            if (currentSort && currentSort.field === col.sortField) {
-                headerText += currentSort.ascending ? ' \u25B2' : ' \u25BC';
-            }
-            th.textContent = headerText;
-            th.style.cursor = 'pointer';
-            th.dataset.sortField = col.sortField;
-            th.dataset.label = col.label;
-        } else {
-            th.textContent = col.label;
-        }
-        headRow.appendChild(th);
-    });
-    thead.appendChild(headRow);
-    table.appendChild(thead);
-
-    // Body
-    const tbody = document.createElement('tbody');
-    tracks.forEach(track => {
-        tbody.appendChild(_buildTrackRow(track, album, admin));
-    });
-    table.appendChild(tbody);
-
-    // Single delegated event listener for the whole table
-    _attachTableDelegation(table, album);
-
-    wrapper.appendChild(table);
-    return wrapper;
-}
-
-function sortEnhancedTracks(album, field, ascending) {
-    const tracks = album.tracks || [];
-    tracks.sort((a, b) => {
-        let valA, valB;
-        if (field === 'format') {
-            valA = extractFormat(a.file_path);
-            valB = extractFormat(b.file_path);
-        } else {
-            valA = a[field];
-            valB = b[field];
-        }
-        if (valA == null) return 1;
-        if (valB == null) return -1;
-        if (['track_number', 'disc_number', 'bpm', 'bitrate', 'duration'].includes(field)) {
-            return ascending ? (Number(valA) - Number(valB)) : (Number(valB) - Number(valA));
-        }
-        valA = String(valA).toLowerCase();
-        valB = String(valB).toLowerCase();
-        return ascending ? valA.localeCompare(valB) : valB.localeCompare(valA);
-    });
-}
-
-async function deleteLibraryTrack(trackId, albumId) {
-    cancelInlineEdit();
-
-    // Smart delete dialog — three options
-    const choice = await _showSmartDeleteDialog();
-    if (!choice) return;
-
-    const params = new URLSearchParams();
-    if (choice === 'delete_file') params.set('delete_file', 'true');
-
-    try {
-        const response = await fetch(`/api/library/track/${trackId}?${params}`, { method: 'DELETE' });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        let msg = 'Track removed from library';
-        let toastType = 'success';
-        if (result.file_deleted) {
-            msg = 'Track deleted from library and disk';
-        } else if (result.file_error) {
-            msg = 'Track removed from library but file could not be deleted';
-            toastType = 'warning';
-        }
-        if (result.blacklisted) msg += ' (source blacklisted)';
-        showToast(msg, toastType);
-        if (result.file_error) {
-            showToast(result.file_error, 'error', 8000);
-        }
-
-        if (artistDetailPageState.enhancedData) {
-            const albums = artistDetailPageState.enhancedData.albums || [];
-            const album = albums.find(a => a.id === albumId);
-            if (album) {
-                album.tracks = (album.tracks || []).filter(t => t.id !== trackId);
-            }
-        }
-        artistDetailPageState.selectedTracks.delete(String(trackId));
-        renderEnhancedView();
-    } catch (error) {
-        showToast(`Delete failed: ${error.message}`, 'error');
-    }
-}
-
-function _showSmartDeleteDialog() {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-
-        const close = (val) => { overlay.remove(); resolve(val); };
-        overlay.onclick = e => { if (e.target === overlay) close(null); };
-
-        overlay.innerHTML = `
-            <div class="smart-delete-modal">
-                <div class="smart-delete-header">
-                    <h3>Delete Track</h3>
-                    <button class="smart-delete-close">&times;</button>
-                </div>
-                <p class="smart-delete-desc">How should this track be deleted?</p>
-                <div class="smart-delete-options">
-                    <button class="smart-delete-option" data-choice="db_only">
-                        <div class="smart-delete-option-icon">📋</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title">Remove from Library</div>
-                            <div class="smart-delete-option-desc">Remove the database entry only. File stays on disk.</div>
-                        </div>
-                    </button>
-                    <button class="smart-delete-option destructive" data-choice="delete_file">
-                        <div class="smart-delete-option-icon">🗑️</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title">Delete File Too</div>
-                            <div class="smart-delete-option-desc">Remove from library and delete the audio file from disk.</div>
-                        </div>
-                    </button>
-                    <!-- Blacklisting is done from Source Info (ℹ) where real download source data is available -->
-                </div>
-            </div>
-        `;
-
-        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
-            btn.addEventListener('click', () => close(btn.dataset.choice));
-        });
-        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
-
-        // Escape to close
-        const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
-        document.addEventListener('keydown', escHandler);
-
-        document.body.appendChild(overlay);
-    });
-}
-
-// ==================================================================================
-// TRACK SOURCE INFO — View download provenance and blacklist sources
-// ==================================================================================
-
-async function showTrackSourceInfo(track, anchorEl) {
-    // Remove existing popover
-    const existing = document.getElementById('source-info-popover');
-    if (existing) existing.remove();
-
-    const popover = document.createElement('div');
-    popover.id = 'source-info-popover';
-    popover.className = 'source-info-popover';
-    popover.innerHTML = '<div class="source-info-loading"><div class="server-search-spinner"></div>Loading source info...</div>';
-
-    document.body.appendChild(popover);
-
-    // Position near the button or center on mobile
-    if (anchorEl) {
-        const rect = anchorEl.getBoundingClientRect();
-        const popW = 360;
-        let left = rect.left - popW - 8;
-        if (left < 10) left = rect.right + 8;
-        let top = rect.top - 20;
-        if (top + 300 > window.innerHeight) top = window.innerHeight - 310;
-        popover.style.left = `${left}px`;
-        popover.style.top = `${Math.max(10, top)}px`;
-    } else {
-        popover.style.left = '50%';
-        popover.style.top = '50%';
-        popover.style.transform = 'translate(-50%, -50%)';
-    }
-
-    requestAnimationFrame(() => popover.classList.add('visible'));
-
-    // Close on outside click
-    const closeHandler = e => {
-        if (!popover.contains(e.target) && e.target !== anchorEl) {
-            popover.remove();
-            document.removeEventListener('click', closeHandler);
-        }
-    };
-    setTimeout(() => document.addEventListener('click', closeHandler), 100);
-
-    // Escape to close
-    const escH = e => { if (e.key === 'Escape') { popover.remove(); document.removeEventListener('keydown', escH); document.removeEventListener('click', closeHandler); } };
-    document.addEventListener('keydown', escH);
-
-    try {
-        const res = await fetch(`/api/library/track/${track.id}/source-info`);
-        const data = await res.json();
-
-        if (!data.success || !data.downloads || data.downloads.length === 0) {
-            popover.innerHTML = `
-                <div class="source-info-header">
-                    <span class="source-info-title">Source Info</span>
-                    <button class="source-info-close" onclick="document.getElementById('source-info-popover')?.remove()">&times;</button>
-                </div>
-                <div class="source-info-empty">No download source data available for this track. Source tracking starts with new downloads.</div>
-            `;
-            return;
-        }
-
-        const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer: '💜' };
-        const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer: 'Deezer' };
-
-        const dl = data.downloads[0]; // Most recent download
-        const icon = serviceIcons[dl.source_service] || '📦';
-        const label = serviceLabels[dl.source_service] || dl.source_service;
-        const displayFile = dl.source_filename ? dl.source_filename.replace(/\\/g, '/').split('/').pop() : 'Unknown';
-        const sizeStr = dl.source_size ? `${(dl.source_size / 1048576).toFixed(1)} MB` : '';
-        const dateStr = dl.created_at ? timeAgo(dl.created_at) : '';
-
-        popover.innerHTML = `
-            <div class="source-info-header">
-                <span class="source-info-title">Source Info</span>
-                <button class="source-info-close" onclick="document.getElementById('source-info-popover')?.remove()">&times;</button>
-            </div>
-            <div class="source-info-body">
-                <div class="source-info-row">
-                    <span class="source-info-label">Service</span>
-                    <span class="source-info-value">${icon} ${label}</span>
-                </div>
-                ${dl.source_service === 'soulseek' && dl.source_username ? `<div class="source-info-row">
-                    <span class="source-info-label">User</span>
-                    <span class="source-info-value source-info-mono">${_esc(dl.source_username)}</span>
-                </div>` : ''}
-                <div class="source-info-row">
-                    <span class="source-info-label">Original File</span>
-                    <span class="source-info-value source-info-mono source-info-ellipsis" title="${_esc(dl.source_filename || '')}">${_esc(displayFile)}</span>
-                </div>
-                ${sizeStr ? `<div class="source-info-row">
-                    <span class="source-info-label">Size</span>
-                    <span class="source-info-value">${sizeStr}</span>
-                </div>` : ''}
-                ${dl.audio_quality ? `<div class="source-info-row">
-                    <span class="source-info-label">Quality</span>
-                    <span class="source-info-value">${_esc(dl.audio_quality)}</span>
-                </div>` : ''}
-                ${dl.bit_depth || dl.sample_rate || dl.bitrate ? `<div class="source-info-row">
-                    <span class="source-info-label">Audio</span>
-                    <span class="source-info-value">${[dl.bit_depth ? `${dl.bit_depth}-bit` : '', dl.sample_rate ? `${(dl.sample_rate / 1000).toFixed(1)}kHz` : '', dl.bitrate ? `${Math.round(dl.bitrate / 1000)}kbps` : ''].filter(Boolean).join(' · ')}</span>
-                </div>` : ''}
-                ${dateStr ? `<div class="source-info-row">
-                    <span class="source-info-label">Downloaded</span>
-                    <span class="source-info-value">${dateStr}</span>
-                </div>` : ''}
-                ${dl.status !== 'completed' ? `<div class="source-info-row">
-                    <span class="source-info-label">Status</span>
-                    <span class="source-info-value" style="color:#ef5350">${dl.status}</span>
-                </div>` : ''}
-            </div>
-            ${dl.source_username && dl.source_filename ? `
-            <div class="source-info-actions">
-                <button class="source-info-blacklist-btn" id="source-info-blacklist-btn">⛔ Blacklist This Source</button>
-            </div>` : ''}
-            ${data.downloads.length > 1 ? `<div class="source-info-history">${data.downloads.length} download records for this track</div>` : ''}
-        `;
-
-        // Blacklist button handler
-        const blBtn = document.getElementById('source-info-blacklist-btn');
-        if (blBtn) {
-            blBtn.addEventListener('click', async () => {
-                if (!await showConfirmDialog({ title: 'Blacklist Source', message: `Blacklist "${displayFile}" from ${dl.source_service === 'soulseek' ? dl.source_username : label}? This source will be skipped in future downloads.`, confirmText: 'Blacklist', destructive: true })) return;
-
-                try {
-                    const db_res = await fetch('/api/library/blacklist', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            track_title: dl.track_title || track.title,
-                            track_artist: dl.track_artist || '',
-                            blocked_filename: dl.source_filename,
-                            blocked_username: dl.source_username,
-                            reason: 'user_rejected'
-                        })
-                    });
-                    const result = await db_res.json();
-                    if (result.success) {
-                        showToast('Source blacklisted', 'success');
-                        blBtn.disabled = true;
-                        blBtn.textContent = '⛔ Blacklisted';
-                    } else {
-                        showToast(result.error || 'Failed to blacklist', 'error');
-                    }
-                } catch (e) {
-                    showToast('Error: ' + e.message, 'error');
-                }
-            });
-        }
-
-    } catch (e) {
-        popover.innerHTML = `<div class="source-info-empty">Error loading source info: ${_esc(e.message)}</div>`;
-    }
-}
-
-
-// ==================================================================================
-// TRACK REDOWNLOAD MODAL — Multi-step: metadata selection → source selection → download
-// ==================================================================================
-
-async function showTrackRedownloadModal(track, album) {
-    const overlay = document.createElement('div');
-    overlay.id = 'redownload-overlay';
-    overlay.className = 'redownload-overlay';
-    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
-
-    const artistName = artistDetailPageState.enhancedData?.artist?.name || '';
-    const ext = (track.file_path || '').split('.').pop().toUpperCase();
-    const fmt = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'WAV'].includes(ext) ? ext : '';
-
-    overlay.innerHTML = `
-        <div class="redownload-modal">
-            <div class="redownload-header">
-                <div>
-                    <h3>Redownload Track</h3>
-                    <p class="redownload-header-sub">Find the correct version and download from your preferred source</p>
-                </div>
-                <button class="redownload-close" onclick="document.getElementById('redownload-overlay')?.remove()">&times;</button>
-            </div>
-            <div class="redownload-current" id="redownload-current">
-                <div class="redownload-current-art" id="redownload-current-art">
-                    <div class="redownload-art-empty">🎵</div>
-                </div>
-                <div class="redownload-current-info">
-                    <div class="redownload-current-title">${_esc(track.title)}</div>
-                    <div class="redownload-current-meta">${_esc(artistName)} · ${_esc(album?.title || '')}</div>
-                </div>
-                <div class="redownload-current-badges">
-                    ${fmt ? `<span class="redownload-badge fmt">${fmt}</span>` : ''}
-                    ${track.bitrate ? `<span class="redownload-badge bitrate">${track.bitrate}k</span>` : ''}
-                </div>
-            </div>
-            <div class="redownload-steps">
-                <div class="redownload-step active" data-step="1"><span class="redownload-step-num">1</span> Choose Metadata</div>
-                <div class="redownload-step-line"></div>
-                <div class="redownload-step" data-step="2"><span class="redownload-step-num">2</span> Choose Source</div>
-                <div class="redownload-step-line"></div>
-                <div class="redownload-step" data-step="3"><span class="redownload-step-num">3</span> Downloading</div>
-            </div>
-            <div class="redownload-body" id="redownload-body">
-                <div class="redownload-loading">
-                    <div class="server-search-spinner"></div>
-                    Searching metadata sources...
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Escape to close
-    const escH = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escH); overlay.remove(); } };
-    document.addEventListener('keydown', escH);
-
-    document.body.appendChild(overlay);
-
-    // Auto-search metadata
-    try {
-        const res = await fetch(`/api/library/track/${track.id}/redownload/search-metadata`, { method: 'POST' });
-        const data = await res.json();
-        if (!data.success) throw new Error(data.error);
-
-        // Set album art in header if available
-        const artEl = document.getElementById('redownload-current-art');
-        if (artEl && data.current_track?.thumb_url) {
-            artEl.innerHTML = `<img src="${data.current_track.thumb_url}" alt="">`;
-        }
-
-        _renderRedownloadStep1(overlay, track, data);
-    } catch (e) {
-        document.getElementById('redownload-body').innerHTML = `<div class="redownload-error">Error: ${_esc(e.message)}</div>`;
-    }
-}
-
-function _renderRedownloadStep1(overlay, track, data) {
-    const body = document.getElementById('redownload-body');
-    if (!body) return;
-
-    const sources = Object.keys(data.metadata_results);
-    if (sources.length === 0) {
-        body.innerHTML = '<div class="redownload-error">No metadata sources available. Check your Spotify/iTunes/Deezer connections.</div>';
-        return;
-    }
-
-    const bestSource = data.best_match?.source || sources[0];
-    const sourceIcons = { spotify: '🟢', itunes: '🍎', deezer: '🟣', hydrabase: '🔷' };
-    const sourceLabels = { spotify: 'Spotify', itunes: 'Apple Music', deezer: 'Deezer', discogs: 'Discogs', hydrabase: 'Hydrabase' };
-
-    // Build columns — one per source, side by side
-    const columnsHtml = sources.map(source => {
-        const results = data.metadata_results[source] || [];
-        const icon = sourceIcons[source] || '📋';
-        const label = sourceLabels[source] || source;
-
-        let itemsHtml;
-        if (results.length === 0) {
-            itemsHtml = `<div class="redownload-col-empty">No results</div>`;
-        } else {
-            itemsHtml = results.slice(0, 8).map((r, i) => {
-                const pct = Math.round((r.match_score || 0) * 100);
-                const cls = pct >= 90 ? 'high' : pct >= 70 ? 'medium' : 'low';
-                const dur = r.duration_ms ? `${Math.floor(r.duration_ms / 60000)}:${String(Math.floor((r.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
-                const checked = (source === bestSource && i === 0) ? 'checked' : '';
-                return `
-                    <label class="redownload-result" data-source="${source}" data-index="${i}">
-                        <input type="radio" name="metadata-choice" value="${source}|${i}" ${checked}>
-                        <div class="redownload-result-art">${r.image_url ? `<img src="${r.image_url}" loading="lazy">` : '<div class="redownload-art-empty"></div>'}</div>
-                        <div class="redownload-result-info">
-                            <div class="redownload-result-title">${_esc(r.name)}${r.is_current_match ? ' <span class="redownload-current-badge">current</span>' : ''}</div>
-                            <div class="redownload-result-meta">${_esc(r.artist)}${r.album ? ` · ${_esc(r.album)}` : ''}</div>
-                        </div>
-                        <div class="redownload-result-right">
-                            <div class="redownload-result-score ${cls}">${pct}%</div>
-                            ${dur ? `<div class="redownload-result-dur">${dur}</div>` : ''}
-                        </div>
-                    </label>`;
-            }).join('');
-        }
-
-        return `
-            <div class="redownload-source-col">
-                <div class="redownload-col-header">
-                    <span class="redownload-col-icon">${icon}</span>
-                    <span class="redownload-col-label">${label}</span>
-                    <span class="redownload-col-count">${results.length}</span>
-                </div>
-                <div class="redownload-col-results">${itemsHtml}</div>
-            </div>`;
-    }).join('');
-
-    body.innerHTML = `<div class="redownload-columns">${columnsHtml}</div>`;
-
-    // Add sticky footer for Step 1
-    const modal = overlay.querySelector('.redownload-modal');
-    const oldFooter = modal.querySelector('.redownload-sticky-footer');
-    if (oldFooter) oldFooter.remove();
-    const footer = document.createElement('div');
-    footer.className = 'redownload-sticky-footer';
-    footer.innerHTML = `
-        <div class="redownload-actions">
-            <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
-            <button class="redownload-btn primary" id="redownload-next-btn">Search Download Sources →</button>
-        </div>
-    `;
-    modal.appendChild(footer);
-
-    // Next button
-    document.getElementById('redownload-next-btn').addEventListener('click', async () => {
-        const checked = body.querySelector('input[name="metadata-choice"]:checked');
-        if (!checked) { showToast('Select a metadata source first', 'error'); return; }
-        const [source, idx] = checked.value.split('|');
-        selectedMeta = data.metadata_results[source][parseInt(idx)];
-        selectedMeta._source = source;
-
-        // Update step indicator
-        overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
-        overlay.querySelector('.redownload-step[data-step="2"]').classList.add('active');
-
-        // Stream results from all download sources — columns appear as each source responds
-        // Body gets the scrollable content, footer is sticky outside the scroll
-        body.innerHTML = `
-            <div class="rdl-src-columns" id="rdl-src-columns">
-                <div class="redownload-loading" id="rdl-src-loading"><div class="server-search-spinner"></div>Searching download sources...</div>
-            </div>
-        `;
-        // Add sticky footer outside the scrollable body
-        const existingFooter = overlay.querySelector('.redownload-sticky-footer');
-        if (existingFooter) existingFooter.remove();
-        const modal = overlay.querySelector('.redownload-modal');
-        const footer = document.createElement('div');
-        footer.className = 'redownload-sticky-footer';
-        footer.innerHTML = `
-            <label class="redownload-delete-old">
-                <input type="checkbox" id="redownload-delete-old-check" checked>
-                Delete old file after successful download
-            </label>
-            <div class="redownload-actions">
-                <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
-                <button class="redownload-btn primary" id="redownload-start-btn" disabled>Waiting for results...</button>
-            </div>
-        `;
-        modal.appendChild(footer);
-
-        // Wire up download button IMMEDIATELY (before streaming starts)
-        // so it works as soon as results appear
-        window._redownloadCandidates = [];
-        window._redownloadMetadata = selectedMeta;
-        document.getElementById('redownload-start-btn').addEventListener('click', async () => {
-            const checked = document.querySelector('input[name="source-choice"]:checked');
-            if (!checked) { showToast('Select a download source', 'error'); return; }
-            const cand = window._redownloadCandidates[parseInt(checked.value)];
-            if (!cand) { showToast('Invalid selection', 'error'); return; }
-            const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
-
-            overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
-            overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
-
-            // Remove sticky footer for step 3
-            const ft = overlay.querySelector('.redownload-sticky-footer');
-            if (ft) ft.remove();
-
-            const body = document.getElementById('redownload-body');
-            body.innerHTML = `
-                <div class="redownload-progress">
-                    <div class="redownload-progress-title">Downloading: ${_esc(cand.display_name)}</div>
-                    <div class="redownload-progress-from">from ${_esc(cand.source_service === 'soulseek' ? cand.username : (cand.source_service || 'unknown'))}</div>
-                    <div class="redownload-progress-bar-wrap"><div class="redownload-progress-bar" id="redownload-progress-bar"></div></div>
-                    <div class="redownload-progress-status" id="redownload-progress-status">Starting download...</div>
-                </div>
-            `;
-
-            try {
-                const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ metadata: window._redownloadMetadata, candidate: cand, delete_old_file: deleteOld })
-                });
-                const startData = await res.json();
-                if (!startData.success) throw new Error(startData.error);
-                _pollRedownloadProgress(startData.task_id, overlay);
-            } catch (e) {
-                body.innerHTML = `<div class="redownload-error">Download failed: ${_esc(e.message)}</div>`;
-            }
-        });
-
-        _streamRedownloadSources(overlay, track, selectedMeta);
-    });
-}
-
-async function _streamRedownloadSources(overlay, track, metadata) {
-    const columnsEl = document.getElementById('rdl-src-columns');
-    const loadingEl = document.getElementById('rdl-src-loading');
-    const startBtn = document.getElementById('redownload-start-btn');
-    if (!columnsEl) return;
-
-    const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
-    const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
-
-    let allCandidates = [];
-    let firstResult = true;
-    let bestGlobalIdx = -1;
-
-    try {
-        const res = await fetch(`/api/library/track/${track.id}/redownload/search-sources`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ metadata })
-        });
-
-        const reader = res.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            buffer += decoder.decode(value, { stream: true });
-
-            const lines = buffer.split('\n');
-            buffer = lines.pop(); // keep incomplete line
-
-            for (const line of lines) {
-                if (!line.trim()) continue;
-                try {
-                    const data = JSON.parse(line);
-                    if (data.done) continue;
-
-                    const svc = data.source;
-                    const candidates = data.candidates || [];
-
-                    // Remove loading spinner on first result
-                    if (firstResult && loadingEl) { loadingEl.remove(); firstResult = false; }
-
-                    // Assign global indices
-                    const startIdx = allCandidates.length;
-                    candidates.forEach((c, i) => { c._globalIdx = startIdx + i; });
-                    allCandidates.push(...candidates);
-                    window._redownloadCandidates = allCandidates; // Keep global ref updated for button handler
-
-                    // Find best overall candidate
-                    bestGlobalIdx = -1;
-                    let bestConf = 0;
-                    allCandidates.forEach((c, i) => {
-                        if (!c.blacklisted && c.confidence > bestConf) { bestConf = c.confidence; bestGlobalIdx = i; }
-                    });
-
-                    // Render column for this source
-                    const icon = serviceIcons[svc] || '📦';
-                    const label = serviceLabels[svc] || svc;
-
-                    const itemsHtml = candidates.length === 0
-                        ? '<div class="rdl-src-col-empty">No results</div>'
-                        : candidates.slice(0, 10).map(c => {
-                            const confPct = Math.round((c.confidence || 0) * 100);
-                            const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
-                            const isRec = c._globalIdx === bestGlobalIdx;
-                            const blClass = c.blacklisted ? ' blacklisted' : '';
-                            const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
-                            return `
-                                <label class="rdl-src-item${blClass}${isRec ? ' recommended' : ''}">
-                                    ${c.blacklisted ? '<div class="rdl-src-radio-placeholder"></div>' : `<input type="radio" name="source-choice" value="${c._globalIdx}" ${isRec ? 'checked' : ''}>`}
-                                    <div class="rdl-src-item-body">
-                                        <div class="rdl-src-item-top">
-                                            <div class="rdl-src-item-name" title="${_esc(c.filename)}">${_esc(c.display_name)}</div>
-                                            ${isRec ? '<span class="rdl-src-recommended">Best</span>' : ''}
-                                        </div>
-                                        <div class="rdl-src-item-details">
-                                            ${c.quality ? `<span class="rdl-src-fmt">${c.quality}</span>` : ''}
-                                            ${c.bitrate ? `<span class="rdl-src-detail">${c.bitrate}k</span>` : ''}
-                                            <span class="rdl-src-detail">${c.size_display}</span>
-                                            ${dur ? `<span class="rdl-src-detail">${dur}</span>` : ''}
-                                            ${svc === 'soulseek' ? `<span class="rdl-src-detail rdl-src-user">${_esc(c.username)}</span>` : ''}
-                                            ${svc === 'soulseek' && c.free_upload_slots != null ? `<span class="rdl-src-detail">${c.free_upload_slots} slots</span>` : ''}
-                                        </div>
-                                        <div class="rdl-src-conf-bar"><div class="rdl-src-conf-fill ${confCls}" style="width:${confPct}%"></div></div>
-                                    </div>
-                                    <div class="rdl-src-conf-pct ${confCls}">${confPct}%</div>
-                                    ${c.blacklisted ? '<span class="rdl-src-bl">Blacklisted</span>' : ''}
-                                </label>`;
-                        }).join('');
-
-                    const colEl = document.createElement('div');
-                    colEl.className = 'rdl-src-col';
-                    colEl.style.animation = 'fadeSlideUp 0.3s ease both';
-                    colEl.innerHTML = `
-                        <div class="rdl-src-col-header">
-                            <span class="rdl-src-col-icon">${icon}</span>
-                            <span class="rdl-src-col-label">${label}</span>
-                            <span class="rdl-src-col-count">${candidates.length}</span>
-                        </div>
-                        <div class="rdl-src-col-body">${itemsHtml}</div>
-                    `;
-                    columnsEl.appendChild(colEl);
-
-                    // Enable the download button
-                    if (startBtn && allCandidates.some(c => !c.blacklisted)) {
-                        startBtn.disabled = false;
-                        startBtn.textContent = 'Download Selected';
-                    }
-
-                } catch (e) { /* skip malformed lines */ }
-            }
-        }
-    } catch (e) {
-        if (loadingEl) loadingEl.innerHTML = `<div class="redownload-error">Error: ${_esc(e.message)}</div>`;
-    }
-
-    // If no results at all
-    if (allCandidates.length === 0 && loadingEl) {
-        loadingEl.innerHTML = '<div class="rdl-src-col-empty">No download sources found for this track.</div>';
-    }
-
-    // Update the shared candidates array (button handler reads from window._redownloadCandidates)
-    window._redownloadCandidates = allCandidates;
-}
-
-/* _renderRedownloadStep2 removed — replaced by _streamRedownloadSources above */
-if (false) {
-    const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜', hybrid: '⚡' };
-    const serviceLabels = { soulseek: 'Soulseek', youtube: 'YouTube', tidal: 'Tidal', qobuz: 'Qobuz', hifi: 'HiFi', deezer_dl: 'Deezer', hybrid: 'Auto' };
-
-    // Group candidates by source service
-    const grouped = {};
-    candidates.forEach((c, i) => {
-        c._origIdx = i; // preserve original index for radio value
-        const svc = c.source_service || 'unknown';
-        if (!grouped[svc]) grouped[svc] = [];
-        grouped[svc].push(c);
-    });
-
-    // Build columns — one per source
-    const sourceColumnsHtml = Object.entries(grouped).map(([svc, items]) => {
-        const icon = serviceIcons[svc] || '📦';
-        const label = serviceLabels[svc] || svc;
-
-        const itemsHtml = items.slice(0, 10).map(c => {
-            const confPct = Math.round((c.confidence || 0) * 100);
-            const confCls = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
-            const isRecommended = c._origIdx === bestIdx && !c.blacklisted;
-            const checked = isRecommended ? 'checked' : '';
-            const blClass = c.blacklisted ? ' blacklisted' : '';
-            const dur = c.duration ? `${Math.floor(c.duration / 60000)}:${String(Math.floor((c.duration % 60000) / 1000)).padStart(2, '0')}` : '';
-
-            return `
-                <label class="rdl-src-item${blClass}${isRecommended ? ' recommended' : ''}" data-index="${c._origIdx}">
-                    ${c.blacklisted ? '<div class="rdl-src-radio-placeholder"></div>' : `<input type="radio" name="source-choice" value="${c._origIdx}" ${checked}>`}
-                    <div class="rdl-src-item-body">
-                        <div class="rdl-src-item-top">
-                            <div class="rdl-src-item-name" title="${_esc(c.filename)}">${_esc(c.display_name)}</div>
-                            ${isRecommended ? '<span class="rdl-src-recommended">Best Match</span>' : ''}
-                        </div>
-                        <div class="rdl-src-item-details">
-                            ${c.quality ? `<span class="rdl-src-fmt">${c.quality}</span>` : ''}
-                            ${c.bitrate ? `<span class="rdl-src-detail">${c.bitrate}k</span>` : ''}
-                            <span class="rdl-src-detail">${c.size_display}</span>
-                            ${dur ? `<span class="rdl-src-detail">${dur}</span>` : ''}
-                            ${svc === 'soulseek' ? `<span class="rdl-src-detail rdl-src-user">${_esc(c.username)}</span>` : ''}
-                            ${svc === 'soulseek' ? `<span class="rdl-src-detail">${c.free_upload_slots || 0} slots</span>` : ''}
-                        </div>
-                        <div class="rdl-src-conf-bar">
-                            <div class="rdl-src-conf-fill ${confCls}" style="width:${confPct}%"></div>
-                        </div>
-                    </div>
-                    <div class="rdl-src-conf-pct ${confCls}">${confPct}%</div>
-                    ${c.blacklisted ? '<span class="rdl-src-bl">Blacklisted</span>' : ''}
-                </label>`;
-        }).join('');
-
-        return `
-            <div class="rdl-src-col">
-                <div class="rdl-src-col-header">
-                    <span class="rdl-src-col-icon">${icon}</span>
-                    <span class="rdl-src-col-label">${label}</span>
-                    <span class="rdl-src-col-count">${items.length}</span>
-                </div>
-                <div class="rdl-src-col-body">${itemsHtml}</div>
-            </div>`;
-    }).join('');
-
-    body.innerHTML = `
-        <div class="rdl-src-columns">${sourceColumnsHtml}</div>
-        <label class="redownload-delete-old">
-            <input type="checkbox" id="redownload-delete-old-check" checked>
-            Delete old file after successful download
-        </label>
-        <div class="redownload-actions">
-            <button class="redownload-btn secondary" onclick="document.getElementById('redownload-overlay')?.remove()">Cancel</button>
-            <button class="redownload-btn primary" id="redownload-start-btn">Download Selected</button>
-        </div>
-    `;
-
-    document.getElementById('redownload-start-btn').addEventListener('click', async () => {
-        const checked = body.querySelector('input[name="source-choice"]:checked');
-        if (!checked) { showToast('Select a download source', 'error'); return; }
-        const candidate = candidates[parseInt(checked.value)];
-        const deleteOld = document.getElementById('redownload-delete-old-check')?.checked ?? true;
-
-        // Update step indicator
-        overlay.querySelectorAll('.redownload-step').forEach(s => s.classList.remove('active'));
-        overlay.querySelector('.redownload-step[data-step="3"]').classList.add('active');
-
-        body.innerHTML = `
-            <div class="redownload-progress">
-                <div class="redownload-progress-title">Downloading: ${_esc(candidate.display_name)}</div>
-                <div class="redownload-progress-from">from ${_esc(candidate.username)}</div>
-                <div class="redownload-progress-bar-wrap"><div class="redownload-progress-bar" id="redownload-progress-bar"></div></div>
-                <div class="redownload-progress-status" id="redownload-progress-status">Starting download...</div>
-            </div>
-        `;
-
-        try {
-            const res = await fetch(`/api/library/track/${track.id}/redownload/start`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ metadata, candidate, delete_old_file: deleteOld })
-            });
-            const startData = await res.json();
-            if (!startData.success) throw new Error(startData.error);
-
-            // Poll for progress
-            _pollRedownloadProgress(startData.task_id, overlay);
-        } catch (e) {
-            body.innerHTML = `<div class="redownload-error">Download failed: ${_esc(e.message)}</div>`;
-        }
-    });
-}
-
-function _pollRedownloadProgress(taskId, overlay) {
-    let completed = false;
-
-    const poll = setInterval(async () => {
-        if (completed) return;
-
-        // Get fresh DOM references every tick (in case DOM was rebuilt)
-        const bar = document.getElementById('redownload-progress-bar');
-        const status = document.getElementById('redownload-progress-status');
-
-        try {
-            // Poll real download progress from /api/downloads/status
-            const dlRes = await fetch('/api/downloads/status');
-            const dlData = await dlRes.json();
-            const transfers = dlData.transfers || [];
-
-            // Find any active transfer
-            let bestTransfer = null;
-            for (const t of transfers) {
-                const st = (t.state || '').toLowerCase();
-                if (st.includes('inprogress') || st.includes('queued') || st.includes('initializing')) {
-                    bestTransfer = t;
-                    break;
-                }
-            }
-
-            if (bestTransfer) {
-                const pct = bestTransfer.percentComplete || 0;
-                const transferred = bestTransfer.bytesTransferred || 0;
-                const total = bestTransfer.size || 0;
-                const transferredMB = (transferred / 1048576).toFixed(1);
-                const totalMB = (total / 1048576).toFixed(1);
-
-                if (bar) bar.style.width = `${Math.min(95, pct)}%`;
-                if (status) {
-                    status.textContent = total > 0
-                        ? `Downloading... ${Math.round(pct)}% (${transferredMB} / ${totalMB} MB)`
-                        : `Downloading... ${Math.round(pct)}%`;
-                }
-            } else {
-                // No active slskd transfer — streaming source or post-processing
-                if (bar) bar.style.width = '80%';
-                if (status) status.textContent = 'Processing...';
-            }
-
-            // Check for batch completion
-            const procRes = await fetch('/api/active-processes');
-            const procData = await procRes.json();
-            const procs = procData.active_processes || [];
-            const ourBatch = procs.find(p => p.batch_id && p.batch_id.includes('redownload_batch_'));
-
-            if (!ourBatch) {
-                completed = true;
-                clearInterval(poll);
-                if (bar) bar.style.width = '100%';
-                if (status) status.textContent = 'Complete! File replaced successfully.';
-                showToast('Track redownloaded successfully', 'success');
-                setTimeout(() => {
-                    overlay.remove();
-                    if (artistDetailPageState.enhancedData?.artist?.id) {
-                        loadEnhancedViewData(artistDetailPageState.enhancedData.artist.id);
-                    }
-                }, 2000);
-            }
-        } catch (e) { /* ignore poll errors */ }
-    }, 1500);
-
-    // Safety timeout — 5 minutes
-    setTimeout(() => {
-        if (!completed) {
-            clearInterval(poll);
-            const status = document.getElementById('redownload-progress-status');
-            if (status) status.textContent = 'Download may still be in progress. Check the dashboard.';
-        }
-    }, 300000);
-}
-
-async function deleteLibraryAlbum(albumId) {
-    const choice = await _showAlbumDeleteDialog();
-    if (!choice) return;
-
-    const deleteFiles = choice === 'delete_files';
-    const params = deleteFiles ? '?delete_files=true' : '';
-
-    try {
-        const response = await fetch(`/api/library/album/${albumId}${params}`, { method: 'DELETE' });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        let msg = `Album removed from library (${result.tracks_deleted || 0} tracks)`;
-        let toastType = 'success';
-        if (deleteFiles) {
-            if (result.files_deleted > 0) {
-                msg = `Album deleted — ${result.files_deleted} files removed from disk`;
-            }
-            if (result.files_failed > 0) {
-                msg += ` (${result.files_failed} files could not be deleted)`;
-                toastType = 'warning';
-            }
-        }
-        showToast(msg, toastType);
-
-        if (artistDetailPageState.enhancedData) {
-            const album = (artistDetailPageState.enhancedData.albums || []).find(a => a.id === albumId);
-            if (album && album.tracks) {
-                album.tracks.forEach(t => artistDetailPageState.selectedTracks.delete(String(t.id)));
-            }
-            artistDetailPageState.enhancedData.albums = (artistDetailPageState.enhancedData.albums || []).filter(a => a.id !== albumId);
-            _rebuildAlbumMap();
-        }
-        artistDetailPageState.expandedAlbums.delete(albumId);
-        delete artistDetailPageState.enhancedTrackSort[albumId];
-        renderEnhancedView();
-    } catch (error) {
-        showToast(`Delete failed: ${error.message}`, 'error');
-    }
-}
-
-function _showAlbumDeleteDialog() {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-
-        const close = (val) => { overlay.remove(); resolve(val); };
-        overlay.onclick = e => { if (e.target === overlay) close(null); };
-
-        overlay.innerHTML = `
-            <div class="smart-delete-modal">
-                <div class="smart-delete-header">
-                    <h3>Delete Album</h3>
-                    <button class="smart-delete-close">&times;</button>
-                </div>
-                <p class="smart-delete-desc">How should this album be deleted?</p>
-                <div class="smart-delete-options">
-                    <button class="smart-delete-option" data-choice="db_only">
-                        <div class="smart-delete-option-icon">📋</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title">Remove from Library</div>
-                            <div class="smart-delete-option-desc">Remove the album and all tracks from the database. Files on disk are not affected.</div>
-                        </div>
-                    </button>
-                    <button class="smart-delete-option destructive" data-choice="delete_files">
-                        <div class="smart-delete-option-icon">🗑️</div>
-                        <div class="smart-delete-option-info">
-                            <div class="smart-delete-option-title">Delete Files Too</div>
-                            <div class="smart-delete-option-desc">Remove from library and delete all audio files from disk. Empty album folder will be cleaned up.</div>
-                        </div>
-                    </button>
-                </div>
-            </div>
-        `;
-
-        overlay.querySelectorAll('.smart-delete-option').forEach(btn => {
-            btn.addEventListener('click', () => close(btn.dataset.choice));
-        });
-        overlay.querySelector('.smart-delete-close').addEventListener('click', () => close(null));
-
-        const escHandler = e => { if (e.key === 'Escape') { document.removeEventListener('keydown', escHandler); close(null); } };
-        document.addEventListener('keydown', escHandler);
-
-        document.body.appendChild(overlay);
-    });
-}
-
-function extractFormat(filePath) {
-    if (!filePath) return '-';
-    const ext = filePath.split('.').pop().toLowerCase();
-    const formatMap = { mp3: 'MP3', flac: 'FLAC', m4a: 'AAC', ogg: 'OGG', opus: 'OPUS', wav: 'WAV', wma: 'WMA', aac: 'AAC' };
-    return formatMap[ext] || ext.toUpperCase();
-}
-
-function formatDurationMs(ms) {
-    if (!ms) return '-';
-    const totalSeconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(totalSeconds / 60);
-    const seconds = totalSeconds % 60;
-    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-}
-
-function getServiceUrl(service, entityType, id) {
-    if (!id) return null;
-    const urls = {
-        spotify: {
-            artist: `https://open.spotify.com/artist/${id}`,
-            album: `https://open.spotify.com/album/${id}`,
-            track: `https://open.spotify.com/track/${id}`,
-        },
-        musicbrainz: {
-            artist: `https://musicbrainz.org/artist/${id}`,
-            album: `https://musicbrainz.org/release/${id}`,
-            track: `https://musicbrainz.org/recording/${id}`,
-        },
-        deezer: {
-            artist: `https://www.deezer.com/artist/${id}`,
-            album: `https://www.deezer.com/album/${id}`,
-            track: `https://www.deezer.com/track/${id}`,
-        },
-        audiodb: {
-            artist: `https://www.theaudiodb.com/artist/${id}`,
-            album: `https://www.theaudiodb.com/album/${id}`,
-            track: `https://www.theaudiodb.com/track/${id}`,
-        },
-        itunes: {
-            artist: `https://music.apple.com/artist/${id}`,
-            album: `https://music.apple.com/album/${id}`,
-            track: `https://music.apple.com/song/${id}`,
-        },
-        lastfm: {
-            artist: id,  // lastfm_url is already a full URL
-            album: id,
-            track: id,
-        },
-        genius: {
-            artist: id,  // genius_url is already a full URL
-            track: id,   // genius_url on tracks is already a full URL
-        },
-        tidal: {
-            artist: `https://tidal.com/browse/artist/${id}`,
-            album: `https://tidal.com/browse/album/${id}`,
-            track: `https://tidal.com/browse/track/${id}`,
-        },
-        qobuz: {
-            artist: `https://www.qobuz.com/artist/${id}`,
-            album: `https://www.qobuz.com/album/${id}`,
-            track: `https://www.qobuz.com/track/${id}`,
-        },
-    };
-    return urls[service] && urls[service][entityType] || null;
-}
-
-function makeClickableBadge(service, entityType, id, label) {
-    const url = getServiceUrl(service, entityType, id);
-    if (url) {
-        const a = document.createElement('a');
-        a.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
-        a.href = url;
-        a.target = '_blank';
-        a.rel = 'noopener noreferrer';
-        a.textContent = label;
-        a.title = `${label}: ${id} (click to open)`;
-        a.onclick = (e) => e.stopPropagation();
-        return a;
-    }
-    const span = document.createElement('span');
-    span.className = `enhanced-id-badge ${service === 'musicbrainz' ? 'mb' : service}`;
-    span.textContent = label;
-    span.title = `${label}: ${id}`;
-    return span;
-}
-
-// ---- Inline Editing ----
-
-function startInlineEdit(cell, type, id, field, currentValue) {
-    if (cell.querySelector('.enhanced-inline-input')) return;
-    cancelInlineEdit();
-
-    const isNumeric = ['track_number', 'bpm'].includes(field);
-    const originalContent = cell.innerHTML;
-    cell.dataset.originalContent = originalContent;
-
-    const input = document.createElement('input');
-    input.type = isNumeric ? 'number' : 'text';
-    input.className = 'enhanced-inline-input' + (isNumeric ? ' num' : '');
-    input.value = currentValue || '';
-    if (field === 'bpm') input.step = '0.1';
-    if (field === 'track_number') { input.min = '1'; input.step = '1'; }
-
-    cell.innerHTML = '';
-    cell.appendChild(input);
-    input.focus();
-    input.select();
-
-    artistDetailPageState.editingCell = { cell, type, id, field, originalContent };
-
-    input.addEventListener('click', e => e.stopPropagation());
-    input.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            saveInlineEdit(type, id, field, input.value);
-        } else if (e.key === 'Escape') {
-            cancelInlineEdit();
-        }
-        e.stopPropagation();
-    });
-    input.addEventListener('blur', () => {
-        setTimeout(() => {
-            if (artistDetailPageState.editingCell && artistDetailPageState.editingCell.cell === cell) {
-                saveInlineEdit(type, id, field, input.value);
-            }
-        }, 150);
-    });
-}
-
-async function saveInlineEdit(type, id, field, newValue) {
-    const editInfo = artistDetailPageState.editingCell;
-    if (!editInfo) return;
-    artistDetailPageState.editingCell = null;
-
-    let parsedValue = newValue;
-    if (field === 'track_number') parsedValue = parseInt(newValue) || null;
-    else if (field === 'bpm') parsedValue = parseFloat(newValue) || null;
-    else if (field === 'explicit') parsedValue = parseInt(newValue) || 0;
-
-    const url = type === 'track' ? `/api/library/track/${id}` : `/api/library/album/${id}`;
-
-    try {
-        const response = await fetch(url, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ [field]: parsedValue })
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        const displayValue = parsedValue !== null && parsedValue !== '' ? String(parsedValue) : '-';
-        editInfo.cell.textContent = displayValue;
-        updateLocalEnhancedData(type, id, field, parsedValue);
-        showToast(`Updated ${field}`, 'success');
-    } catch (error) {
-        console.error('Failed to save inline edit:', error);
-        editInfo.cell.innerHTML = editInfo.originalContent;
-        showToast(`Failed to update: ${error.message}`, 'error');
-    }
-}
-
-function cancelInlineEdit() {
-    const editInfo = artistDetailPageState.editingCell;
-    if (!editInfo) return;
-    editInfo.cell.innerHTML = editInfo.originalContent;
-    artistDetailPageState.editingCell = null;
-}
-
-function updateLocalEnhancedData(type, id, field, value) {
-    const data = artistDetailPageState.enhancedData;
-    if (!data) return;
-
-    if (type === 'track') {
-        for (const album of data.albums) {
-            const track = (album.tracks || []).find(t => String(t.id) === String(id));
-            if (track) { track[field] = value; break; }
-        }
-    } else if (type === 'album') {
-        const album = data.albums.find(a => String(a.id) === String(id));
-        if (album) album[field] = value;
-    } else if (type === 'artist') {
-        data.artist[field] = value;
-    }
-}
-
-// ---- Track Selection & Bulk Operations ----
-
-function toggleTrackSelection(trackId) {
-    trackId = String(trackId);
-    if (artistDetailPageState.selectedTracks.has(trackId)) {
-        artistDetailPageState.selectedTracks.delete(trackId);
-    } else {
-        artistDetailPageState.selectedTracks.add(trackId);
-    }
-    const row = document.querySelector(`tr[data-track-id="${trackId}"]`);
-    if (row) row.classList.toggle('selected', artistDetailPageState.selectedTracks.has(trackId));
-    updateBulkBar();
-}
-
-function toggleSelectAllTracks(albumId, checked) {
-    const album = findEnhancedAlbum(albumId);
-    if (!album || !album.tracks) return;
-
-    // Batch update state
-    album.tracks.forEach(track => {
-        const tid = String(track.id);
-        if (checked) artistDetailPageState.selectedTracks.add(tid);
-        else artistDetailPageState.selectedTracks.delete(tid);
-    });
-
-    // Scoped DOM query — only search within this album's panel, not entire document
-    const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
-    if (panel) {
-        panel.querySelectorAll('tr[data-track-id]').forEach(row => {
-            row.classList.toggle('selected', checked);
-            const cb = row.querySelector('.enhanced-track-checkbox');
-            if (cb) cb.checked = checked;
-        });
-    }
-    updateBulkBar();
-}
-
-function clearTrackSelection() {
-    // Scoped batch clear — query the container once instead of per-track
-    const container = document.getElementById('enhanced-view-container');
-    if (container) {
-        container.querySelectorAll('tr[data-track-id].selected').forEach(row => {
-            row.classList.remove('selected');
-            const cb = row.querySelector('.enhanced-track-checkbox');
-            if (cb) cb.checked = false;
-        });
-        container.querySelectorAll('.enhanced-track-table thead .enhanced-track-checkbox').forEach(cb => cb.checked = false);
-    }
-    artistDetailPageState.selectedTracks.clear();
-    updateBulkBar();
-}
-
-function updateBulkBar() {
-    const bar = document.getElementById('enhanced-bulk-bar');
-    const count = document.getElementById('enhanced-bulk-count');
-    if (!bar || !count) return;
-    if (!isEnhancedAdmin()) {
-        bar.classList.remove('visible');
-        return;
-    }
-    const n = artistDetailPageState.selectedTracks.size;
-    count.textContent = n;
-    bar.classList.toggle('visible', n > 0);
-}
-
-function showBulkEditModal() {
-    const overlay = document.getElementById('enhanced-bulk-edit-overlay');
-    const body = document.getElementById('enhanced-bulk-modal-body');
-    const title = document.getElementById('enhanced-bulk-modal-title');
-    if (!overlay || !body) return;
-
-    const count = artistDetailPageState.selectedTracks.size;
-    title.textContent = `Batch Edit ${count} Track${count !== 1 ? 's' : ''}`;
-
-    body.innerHTML = `
-        <div class="enhanced-bulk-modal-field">
-            <label>Track Number (leave blank to skip)</label>
-            <input type="number" id="bulk-edit-track-number" placeholder="Track number..." min="1">
-        </div>
-        <div class="enhanced-bulk-modal-field">
-            <label>BPM (leave blank to skip)</label>
-            <input type="number" id="bulk-edit-bpm" placeholder="BPM..." step="0.1">
-        </div>
-        <div class="enhanced-bulk-modal-field">
-            <label>Style (leave blank to skip)</label>
-            <input type="text" id="bulk-edit-style" placeholder="Style...">
-        </div>
-        <div class="enhanced-bulk-modal-field">
-            <label>Mood (leave blank to skip)</label>
-            <input type="text" id="bulk-edit-mood" placeholder="Mood...">
-        </div>
-        <div class="enhanced-bulk-modal-field">
-            <label>Explicit</label>
-            <select id="bulk-edit-explicit">
-                <option value="">-- No change --</option>
-                <option value="0">No</option>
-                <option value="1">Yes</option>
-            </select>
-        </div>
-    `;
-
-    overlay.classList.remove('hidden');
-}
-
-function closeBulkEditModal() {
-    const overlay = document.getElementById('enhanced-bulk-edit-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-async function executeBulkEdit() {
-    const trackIds = Array.from(artistDetailPageState.selectedTracks);
-    if (trackIds.length === 0) return;
-
-    const updates = {};
-    const trackNum = document.getElementById('bulk-edit-track-number');
-    const bpm = document.getElementById('bulk-edit-bpm');
-    const style = document.getElementById('bulk-edit-style');
-    const mood = document.getElementById('bulk-edit-mood');
-    const explicit = document.getElementById('bulk-edit-explicit');
-
-    if (trackNum && trackNum.value !== '') updates.track_number = parseInt(trackNum.value);
-    if (bpm && bpm.value !== '') updates.bpm = parseFloat(bpm.value);
-    if (style && style.value !== '') updates.style = style.value;
-    if (mood && mood.value !== '') updates.mood = mood.value;
-    if (explicit && explicit.value !== '') updates.explicit = parseInt(explicit.value);
-
-    if (Object.keys(updates).length === 0) {
-        showToast('No changes to apply', 'error');
-        return;
-    }
-
-    try {
-        const response = await fetch('/api/library/tracks/batch', {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_ids: trackIds, updates })
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        showToast(`Updated ${result.updated_count} tracks`, 'success');
-        closeBulkEditModal();
-
-        for (const [field, val] of Object.entries(updates)) {
-            trackIds.forEach(tid => updateLocalEnhancedData('track', tid, field, val));
-        }
-
-        reRenderExpandedPanels();
-        clearTrackSelection();
-
-    } catch (error) {
-        console.error('Bulk edit failed:', error);
-        showToast(`Bulk edit failed: ${error.message}`, 'error');
-    }
-}
-
-// ---- Save Artist / Album Metadata ----
-
-async function saveArtistMetadata() {
-    const form = document.getElementById('enhanced-artist-meta-form');
-    if (!form) return;
-
-    const inputs = form.querySelectorAll('.enhanced-meta-field-input');
-    const updates = {};
-    const original = artistDetailPageState.enhancedData.artist;
-
-    inputs.forEach(input => {
-        const field = input.dataset.field;
-        if (!field) return;
-        let value = (input.tagName === 'TEXTAREA' ? input.value : input.value).trim();
-
-        let origVal = original[field];
-        if (field === 'genres') {
-            const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
-            const origGenres = Array.isArray(origVal) ? origVal : [];
-            if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
-        } else {
-            if ((value || '') !== (origVal || '')) updates[field] = value || null;
-        }
-    });
-
-    if (Object.keys(updates).length === 0) {
-        showToast('No changes to save', 'error');
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/library/artist/${original.id}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(updates)
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        for (const [field, value] of Object.entries(updates)) {
-            artistDetailPageState.enhancedData.artist[field] = value;
-        }
-
-        // Update the display name in the header
-        if (updates.name) {
-            const nameEl = document.querySelector('.enhanced-artist-meta-name');
-            if (nameEl) nameEl.textContent = updates.name;
-        }
-
-        showToast(`Artist metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
-    } catch (error) {
-        console.error('Failed to save artist metadata:', error);
-        showToast(`Failed to save: ${error.message}`, 'error');
-    }
-}
-
-function revertArtistMetadata() {
-    const data = artistDetailPageState.enhancedData;
-    if (!data) return;
-
-    const panel = document.getElementById('enhanced-artist-meta');
-    if (!panel) return;
-
-    const parent = panel.parentNode;
-    const newPanel = renderArtistMetaPanel(data.artist);
-    parent.replaceChild(newPanel, panel);
-    showToast('Reverted to saved values', 'success');
-}
-
-async function saveAlbumMetadata(albumId) {
-    const metaRow = document.getElementById(`enhanced-album-meta-${albumId}`);
-    if (!metaRow) return;
-
-    const album = findEnhancedAlbum(albumId);
-    if (!album) return;
-
-    const inputs = metaRow.querySelectorAll('.enhanced-album-meta-input');
-    const updates = {};
-
-    inputs.forEach(input => {
-        const field = input.dataset.field;
-        if (!field) return;
-        let value = input.value.trim();
-
-        if (field === 'genres') {
-            const newGenres = value ? value.split(',').map(g => g.trim()).filter(Boolean) : [];
-            const origGenres = Array.isArray(album.genres) ? album.genres : [];
-            if (JSON.stringify(newGenres) !== JSON.stringify(origGenres)) updates[field] = newGenres;
-        } else if (field === 'year' || field === 'explicit' || field === 'track_count') {
-            const numVal = value !== '' ? parseInt(value) : null;
-            if (numVal !== (album[field] || null)) updates[field] = numVal;
-        } else {
-            if ((value || '') !== (album[field] || '')) updates[field] = value || null;
-        }
-    });
-
-    if (Object.keys(updates).length === 0) {
-        showToast('No album changes to save', 'error');
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/library/album/${albumId}`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(updates)
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        for (const [field, value] of Object.entries(updates)) {
-            album[field] = value;
-        }
-
-        // Update album row display
-        const albumRow = document.getElementById(`enhanced-album-row-${albumId}`);
-        if (albumRow) {
-            if (updates.title) {
-                const titleEl = albumRow.querySelector('.enhanced-album-title');
-                if (titleEl) { titleEl.textContent = updates.title; titleEl.title = updates.title; }
-            }
-            if (updates.year !== undefined) {
-                const yearEl = albumRow.querySelector('.enhanced-album-year');
-                if (yearEl) yearEl.textContent = updates.year || '-';
-            }
-        }
-
-        showToast(`Album metadata saved (${(result.updated_fields || []).join(', ')})`, 'success');
-    } catch (error) {
-        console.error('Failed to save album metadata:', error);
-        showToast(`Failed to save: ${error.message}`, 'error');
-    }
-}
-
-function reRenderExpandedPanels() {
-    artistDetailPageState.expandedAlbums.forEach(albumId => {
-        const panel = document.getElementById(`enhanced-tracks-panel-${albumId}`);
-        if (!panel) return;
-        const inner = panel.querySelector('.enhanced-tracks-panel-inner');
-        if (!inner) return;
-
-        const album = findEnhancedAlbum(albumId);
-        if (album) {
-            inner.innerHTML = '';
-            inner.appendChild(renderExpandedAlbumHeader(album));
-            inner.appendChild(renderAlbumMetaRow(album));
-            inner.appendChild(renderTrackTable(album));
-        }
-    });
-}
-
-// ---- Manual Match Modal ----
-
-function openManualMatchModal(entityType, entityId, service, defaultQuery, artistId) {
-    // Remove existing modal if any
-    const existing = document.getElementById('enhanced-manual-match-overlay');
-    if (existing) existing.remove();
-
-    const serviceLabels = {
-        spotify: 'Spotify', musicbrainz: 'MusicBrainz', deezer: 'Deezer',
-        audiodb: 'AudioDB', itunes: 'iTunes', lastfm: 'Last.fm', genius: 'Genius'
-    };
-
-    const overlay = document.createElement('div');
-    overlay.id = 'enhanced-manual-match-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    const modal = document.createElement('div');
-    modal.className = 'enhanced-manual-match-modal';
-
-    // Header
-    const header = document.createElement('div');
-    header.className = 'enhanced-bulk-modal-header';
-    const title = document.createElement('h3');
-    title.textContent = `Match ${entityType} on ${serviceLabels[service] || service}`;
-    header.appendChild(title);
-    const closeBtn = document.createElement('button');
-    closeBtn.className = 'enhanced-bulk-modal-close';
-    closeBtn.innerHTML = '&times;';
-    closeBtn.onclick = () => overlay.remove();
-    header.appendChild(closeBtn);
-    modal.appendChild(header);
-
-    // Search bar
-    const searchRow = document.createElement('div');
-    searchRow.className = 'enhanced-match-search-row';
-    const searchInput = document.createElement('input');
-    searchInput.type = 'text';
-    searchInput.className = 'enhanced-match-search-input';
-    searchInput.placeholder = `Search ${serviceLabels[service] || service}...`;
-    searchInput.value = defaultQuery;
-    searchRow.appendChild(searchInput);
-    const searchBtn = document.createElement('button');
-    searchBtn.className = 'enhanced-enrich-btn';
-    searchBtn.textContent = 'Search';
-    searchBtn.onclick = () => doManualMatchSearch(service, entityType, searchInput.value, resultsContainer, entityId, artistId);
-    searchRow.appendChild(searchBtn);
-
-    // Clear Match button — lets user revert a wrong match to not_found
-    const clearBtn = document.createElement('button');
-    clearBtn.className = 'enhanced-enrich-btn';
-    clearBtn.style.cssText = 'background:rgba(255,80,80,0.12);color:#ff6b6b;margin-left:6px';
-    clearBtn.textContent = 'Clear Match';
-    clearBtn.title = 'Remove the current match — reverts to Not Found';
-    clearBtn.onclick = async () => {
-        if (!confirm(`Clear ${serviceLabels[service] || service} match for this ${entityType}? It will revert to "Not Found".`)) return;
-        try {
-            const res = await fetch('/api/library/clear-match', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ entity_type: entityType, entity_id: entityId, service, artist_id: artistId })
-            });
-            const data = await res.json();
-            if (data.success) {
-                showToast(`Cleared ${serviceLabels[service] || service} match`, 'success');
-                overlay.remove();
-                if (data.updated_data) {
-                    artistDetailPageState.enhancedData = data.updated_data;
-                    renderEnhancedArtistView(data.updated_data, true);
-                }
-            } else {
-                showToast(data.error || 'Failed to clear match', 'error');
-            }
-        } catch (e) {
-            showToast('Error clearing match', 'error');
-        }
-    };
-    searchRow.appendChild(clearBtn);
-
-    modal.appendChild(searchRow);
-
-    // Handle Enter key
-    searchInput.onkeydown = (e) => {
-        if (e.key === 'Enter') searchBtn.click();
-    };
-
-    // Results container
-    const resultsContainer = document.createElement('div');
-    resultsContainer.className = 'enhanced-match-results';
-    resultsContainer.innerHTML = '<div class="enhanced-match-results-hint">Press Search or Enter to find matches</div>';
-    modal.appendChild(resultsContainer);
-
-    overlay.appendChild(modal);
-    document.body.appendChild(overlay);
-
-    // Auto-search on open
-    searchInput.focus();
-    searchBtn.click();
-}
-
-async function doManualMatchSearch(service, entityType, query, container, entityId, artistId) {
-    if (!query.trim()) {
-        container.innerHTML = '<div class="enhanced-match-results-hint">Enter a search term</div>';
-        return;
-    }
-
-    container.innerHTML = '<div class="enhanced-loading">Searching...</div>';
-
-    try {
-        const response = await fetch('/api/library/search-service', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ service, entity_type: entityType, query: query.trim() })
-        });
-
-        const data = await response.json();
-        if (!data.success) throw new Error(data.error);
-
-        const results = data.results || [];
-        container.innerHTML = '';
-
-        if (results.length === 0) {
-            container.innerHTML = '<div class="enhanced-match-results-hint">No results found. Try a different search.</div>';
-            return;
-        }
-
-        results.forEach(result => {
-            const row = document.createElement('div');
-            row.className = 'enhanced-match-result-row';
-
-            if (result.image) {
-                const img = document.createElement('img');
-                img.className = 'enhanced-match-result-img';
-                img.src = result.image;
-                img.alt = '';
-                img.onerror = function () { this.style.display = 'none'; };
-                row.appendChild(img);
-            } else {
-                const placeholder = document.createElement('div');
-                placeholder.className = 'enhanced-match-result-img-placeholder';
-                placeholder.innerHTML = '&#127925;';
-                row.appendChild(placeholder);
-            }
-
-            const info = document.createElement('div');
-            info.className = 'enhanced-match-result-info';
-            const name = document.createElement('div');
-            name.className = 'enhanced-match-result-name';
-            name.textContent = result.name || 'Unknown';
-            info.appendChild(name);
-            if (result.extra) {
-                const extra = document.createElement('div');
-                extra.className = 'enhanced-match-result-extra';
-                extra.textContent = result.extra;
-                info.appendChild(extra);
-            }
-            const idLine = document.createElement('div');
-            idLine.className = 'enhanced-match-result-id';
-            const providerLabel = result.provider && result.provider !== service ? ` (${result.provider})` : '';
-            idLine.textContent = `ID: ${result.id}${providerLabel}`;
-            info.appendChild(idLine);
-            row.appendChild(info);
-
-            const matchBtn = document.createElement('button');
-            matchBtn.className = 'enhanced-meta-save-btn';
-            matchBtn.textContent = 'Match';
-            matchBtn.onclick = () => applyManualMatch(entityType, entityId, result.provider || service, result.id, artistId);
-            row.appendChild(matchBtn);
-
-            container.appendChild(row);
-        });
-
-    } catch (error) {
-        container.innerHTML = `<div class="enhanced-match-results-hint" style="color:#ff6b6b;">Error: ${escapeHtml(error.message)}</div>`;
-    }
-}
-
-async function applyManualMatch(entityType, entityId, service, serviceId, artistId) {
-    try {
-        showToast(`Matching ${entityType} to ${service}...`, 'info');
-
-        const response = await fetch('/api/library/manual-match', {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                entity_type: entityType,
-                entity_id: entityId,
-                service: service,
-                service_id: serviceId,
-                artist_id: artistId
-            })
-        });
-
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        showToast(`Manually matched to ${service} ID: ${serviceId}`, 'success');
-
-        // Close modal
-        const overlay = document.getElementById('enhanced-manual-match-overlay');
-        if (overlay) overlay.remove();
-
-        // Update view with fresh data
-        if (result.updated_data && result.updated_data.success) {
-            artistDetailPageState.enhancedData = result.updated_data;
-            _rebuildAlbumMap();
-            renderEnhancedView();
-        } else if (artistDetailPageState.currentArtistId) {
-            await loadEnhancedViewData(artistDetailPageState.currentArtistId);
-        }
-
-    } catch (error) {
-        showToast(`Match failed: ${error.message}`, 'error');
-    }
-}
-
-// ---- Enrichment ----
-
-let _enrichmentInFlight = false;
-
-async function runEnrichment(entityType, entityId, service, name, artistName, artistId) {
-    if (_enrichmentInFlight) {
-        showToast('An enrichment is already in progress', 'error');
-        return;
-    }
-
-    _enrichmentInFlight = true;
-
-    // Add loading class to all match chips for this service
-    const chipPrefixes = {
-        'spotify': ['spotify', 'sp'],
-        'musicbrainz': ['musicbrainz', 'mb'],
-        'deezer': ['deezer', 'dz'],
-        'audiodb': ['audiodb', 'adb'],
-        'itunes': ['itunes', 'it'],
-        'lastfm': ['last.fm', 'lfm'],
-        'genius': ['genius', 'gen'],
-    };
-    const prefixes = chipPrefixes[service] || [service];
-    document.querySelectorAll('.enhanced-match-chip').forEach(chip => {
-        const chipText = chip.textContent.toLowerCase();
-        if (prefixes.some(p => chipText.startsWith(p))) {
-            chip.classList.add('loading');
-        }
-    });
-
-    showToast(`Enriching ${entityType} from ${service}...`, 'info');
-
-    try {
-        const response = await fetch('/api/library/enrich', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                entity_type: entityType,
-                entity_id: entityId,
-                service: service,
-                name: name,
-                artist_name: artistName,
-                artist_id: artistId
-            })
-        });
-
-        const result = await response.json();
-
-        if (response.status === 429) {
-            showToast(result.error || 'Another enrichment is in progress', 'error');
-            return;
-        }
-
-        if (!result.success) {
-            throw new Error(result.error || 'Enrichment failed');
-        }
-
-        // Show per-service results
-        const results = result.results || {};
-        const successes = Object.entries(results).filter(([, r]) => r.success).map(([s]) => s);
-        const failures = Object.entries(results).filter(([, r]) => !r.success).map(([s, r]) => `${s}: ${r.error}`);
-
-        if (successes.length > 0) {
-            showToast(`Enriched from: ${successes.join(', ')}`, 'success');
-        }
-        if (failures.length > 0) {
-            showToast(`Failed: ${failures.join('; ')}`, 'error');
-        }
-
-        // Update local data with fresh response and re-render (preserves expanded state)
-        if (result.updated_data && result.updated_data.success) {
-            artistDetailPageState.enhancedData = result.updated_data;
-            _rebuildAlbumMap();
-            renderEnhancedView();
-        } else if (artistDetailPageState.currentArtistId) {
-            await loadEnhancedViewData(artistDetailPageState.currentArtistId);
-        }
-
-    } catch (error) {
-        console.error('Enrichment error:', error);
-        showToast(`Enrichment error: ${error.message}`, 'error');
-    } finally {
-        _enrichmentInFlight = false;
-        document.querySelectorAll('.enhanced-match-chip.loading').forEach(c => c.classList.remove('loading'));
-    }
-}
-
-// Close enrich dropdowns when clicking outside (early bail when enhanced view isn't active)
-document.addEventListener('click', (e) => {
-    if (!artistDetailPageState.enhancedView) return;
-    if (!e.target.closest('.enhanced-enrich-wrap')) {
-        document.querySelectorAll('.enhanced-enrich-menu.visible').forEach(m => m.classList.remove('visible'));
-    }
-});
-
-// ---- Write Tags to File ----
-
-let _tagPreviewTrackId = null;
-let _tagPreviewServerType = null;
-
-async function showTagPreview(trackId) {
-    _tagPreviewTrackId = trackId;
-    _tagPreviewServerType = null;
-    const overlay = document.getElementById('tag-preview-overlay');
-    const body = document.getElementById('tag-preview-body');
-    const title = document.getElementById('tag-preview-title');
-    if (!overlay || !body) return;
-
-    title.textContent = 'Write Tags to File';
-    body.innerHTML = '<div class="tag-preview-loading">Loading tag comparison...</div>';
-    overlay.classList.remove('hidden');
-
-    // Hide sync checkbox until we know server type
-    const syncLabel = document.getElementById('tag-preview-sync-label');
-    if (syncLabel) syncLabel.classList.add('hidden');
-
-    try {
-        const response = await fetch(`/api/library/track/${trackId}/tag-preview`);
-        const result = await response.json();
-        if (!result.success) {
-            body.innerHTML = `<div class="tag-preview-error">${escapeHtml(result.error)}</div>`;
-            return;
-        }
-
-        const diff = result.diff || [];
-        const hasChanges = result.has_changes;
-
-        // Show server sync checkbox if a server is connected (not navidrome — it auto-detects)
-        _tagPreviewServerType = result.server_type || null;
-        if (syncLabel && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome') {
-            const syncText = document.getElementById('tag-preview-sync-text');
-            if (syncText) syncText.textContent = `Sync to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
-            syncLabel.classList.remove('hidden');
-        }
-
-        let html = '<table class="tag-preview-table"><thead><tr>';
-        html += '<th>Field</th><th>Current File Tag</th><th></th><th>DB Value</th>';
-        html += '</tr></thead><tbody>';
-
-        diff.forEach(d => {
-            const rowClass = d.changed ? 'tag-diff-changed' : 'tag-diff-same';
-            const arrow = d.changed ? '<span class="tag-diff-arrow">&rarr;</span>' : '<span class="tag-diff-check">&#10003;</span>';
-            html += `<tr class="${rowClass}">`;
-            html += `<td class="tag-field-name">${d.field}</td>`;
-            html += `<td class="tag-file-value">${escapeHtml(d.file_value) || '<span class="tag-empty">empty</span>'}</td>`;
-            html += `<td class="tag-diff-indicator">${arrow}</td>`;
-            html += `<td class="tag-db-value">${escapeHtml(d.db_value) || '<span class="tag-empty">empty</span>'}</td>`;
-            html += '</tr>';
-        });
-
-        html += '</tbody></table>';
-
-        if (!hasChanges) {
-            html += '<div class="tag-preview-no-changes">File tags already match DB metadata</div>';
-        }
-
-        body.innerHTML = html;
-
-        const writeBtn = document.getElementById('tag-preview-write-btn');
-        if (writeBtn) {
-            writeBtn.disabled = !hasChanges && !document.getElementById('tag-preview-embed-cover')?.checked;
-        }
-
-    } catch (error) {
-        body.innerHTML = `<div class="tag-preview-error">Failed to load preview: ${escapeHtml(error.message)}</div>`;
-    }
-}
-
-function closeTagPreviewModal() {
-    const overlay = document.getElementById('tag-preview-overlay');
-    if (overlay) overlay.classList.add('hidden');
-    _tagPreviewTrackId = null;
-}
-
-async function executeWriteTags() {
-    if (!_tagPreviewTrackId) return;
-
-    const writeBtn = document.getElementById('tag-preview-write-btn');
-    if (writeBtn) {
-        writeBtn.disabled = true;
-        writeBtn.textContent = 'Writing...';
-    }
-
-    const embedCover = document.getElementById('tag-preview-embed-cover')?.checked ?? true;
-    const syncToServer = document.getElementById('tag-preview-sync-server')?.checked && _tagPreviewServerType && _tagPreviewServerType !== 'navidrome';
-
-    try {
-        const response = await fetch(`/api/library/track/${_tagPreviewTrackId}/write-tags`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ embed_cover: embedCover, sync_to_server: syncToServer })
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        const fieldCount = (result.written_fields || []).length;
-        let msg = `Tags written successfully (${fieldCount} fields)`;
-        if (result.server_sync) {
-            const ss = result.server_sync;
-            if (ss.synced > 0) msg += ` — synced to ${_tagPreviewServerType === 'plex' ? 'Plex' : 'Jellyfin'}`;
-            else if (ss.failed > 0) msg += ` — server sync failed`;
-        }
-        showToast(msg, 'success');
-        closeTagPreviewModal();
-
-    } catch (error) {
-        showToast(`Failed to write tags: ${error.message}`, 'error');
-    } finally {
-        if (writeBtn) {
-            writeBtn.disabled = false;
-            writeBtn.textContent = 'Write Tags';
-        }
-    }
-}
-
-async function writeAlbumTags(albumId) {
-    const album = findEnhancedAlbum(albumId);
-    if (!album) return;
-
-    const tracks = (album.tracks || []).filter(t => t.file_path);
-    if (tracks.length === 0) {
-        showToast('No tracks with files in this album', 'error');
-        return;
-    }
-
-    await showBatchTagPreview(tracks.map(t => t.id), album.title);
-}
-
-async function batchWriteTagsSelected() {
-    const trackIds = Array.from(artistDetailPageState.selectedTracks);
-    if (trackIds.length === 0) return;
-
-    await showBatchTagPreview(trackIds, null);
-}
-
-async function showBatchTagPreview(trackIds, albumTitle) {
-    const overlay = document.getElementById('batch-tag-preview-overlay');
-    const body = document.getElementById('batch-tag-preview-body');
-    const titleEl = document.getElementById('batch-tag-preview-title');
-    const summary = document.getElementById('batch-tag-preview-summary');
-    const writeBtn = document.getElementById('batch-tag-preview-write-btn');
-    if (!overlay || !body) return;
-
-    titleEl.textContent = albumTitle ? `Write Tags — ${albumTitle}` : `Write Tags — ${trackIds.length} Tracks`;
-    body.innerHTML = '<div class="tag-preview-loading">Loading tag previews...</div>';
-    summary.innerHTML = '';
-    writeBtn.disabled = true;
-    overlay.classList.remove('hidden');
-
-    // Hide sync checkbox until we know server type
-    const syncLabel = document.getElementById('batch-tag-preview-sync-label');
-    if (syncLabel) syncLabel.classList.add('hidden');
-
-    try {
-        const response = await fetch('/api/library/tracks/tag-preview-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_ids: trackIds })
-        });
-        const result = await response.json();
-        if (!result.success) {
-            body.innerHTML = `<div class="tag-preview-error">${escapeHtml(result.error)}</div>`;
-            return;
-        }
-
-        const tracks = result.tracks || [];
-        const serverType = result.server_type || null;
-
-        // Show sync checkbox if server connected
-        if (syncLabel && serverType && serverType !== 'navidrome') {
-            const syncText = document.getElementById('batch-tag-preview-sync-text');
-            if (syncText) syncText.textContent = `Sync to ${serverType === 'plex' ? 'Plex' : 'Jellyfin'}`;
-            syncLabel.classList.remove('hidden');
-        }
-
-        // Categorize tracks
-        const withChanges = tracks.filter(t => t.has_changes);
-        const noChanges = tracks.filter(t => !t.error && !t.has_changes);
-        const errors = tracks.filter(t => t.error);
-
-        // Summary bar
-        let summaryHtml = '<div class="batch-tag-summary">';
-        if (withChanges.length > 0) summaryHtml += `<span class="batch-tag-stat changed">${withChanges.length} with changes</span>`;
-        if (noChanges.length > 0) summaryHtml += `<span class="batch-tag-stat unchanged">${noChanges.length} unchanged</span>`;
-        if (errors.length > 0) summaryHtml += `<span class="batch-tag-stat errored">${errors.length} unavailable</span>`;
-        summaryHtml += '</div>';
-        summary.innerHTML = summaryHtml;
-
-        // Build track accordion
-        let html = '';
-
-        // Tracks with changes (expanded by default)
-        withChanges.forEach(track => {
-            html += _renderBatchTrackDiff(track, true);
-        });
-
-        // Errors
-        errors.forEach(track => {
-            html += `<div class="batch-tag-track error">`;
-            html += `<div class="batch-tag-track-header">`;
-            html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
-            html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
-            html += `<span class="batch-tag-track-status error">${escapeHtml(track.error)}</span>`;
-            html += `</div></div>`;
-        });
-
-        // Unchanged tracks (collapsed)
-        if (noChanges.length > 0) {
-            html += `<div class="batch-tag-unchanged-group">`;
-            html += `<div class="batch-tag-unchanged-header" onclick="this.parentElement.classList.toggle('expanded')">`;
-            html += `<span>${noChanges.length} track${noChanges.length !== 1 ? 's' : ''} already up to date</span>`;
-            html += `<span class="batch-tag-chevron">&#9662;</span>`;
-            html += `</div>`;
-            html += `<div class="batch-tag-unchanged-list">`;
-            noChanges.forEach(track => {
-                html += `<div class="batch-tag-track-row unchanged">`;
-                html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
-                html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
-                html += `<span class="batch-tag-track-status ok">✓ Tags match</span>`;
-                html += `</div>`;
-            });
-            html += `</div></div>`;
-        }
-
-        if (withChanges.length === 0 && errors.length === 0) {
-            html += '<div class="tag-preview-no-changes">All file tags already match DB metadata</div>';
-        }
-
-        body.innerHTML = html;
-
-        // Store state for write action
-        overlay._batchTrackIds = trackIds;
-        overlay._batchServerType = serverType;
-        writeBtn.disabled = withChanges.length === 0;
-
-    } catch (error) {
-        body.innerHTML = `<div class="tag-preview-error">Failed to load previews: ${escapeHtml(error.message)}</div>`;
-    }
-}
-
-function _renderBatchTrackDiff(track, expanded) {
-    let html = `<div class="batch-tag-track${expanded ? ' expanded' : ''}">`;
-    html += `<div class="batch-tag-track-header" onclick="this.parentElement.classList.toggle('expanded')">`;
-    html += `<span class="batch-tag-track-number">${track.track_number || '—'}</span>`;
-    html += `<span class="batch-tag-track-title">${escapeHtml(track.title)}</span>`;
-    html += `<span class="batch-tag-track-status changed">${track.changed_count} field${track.changed_count !== 1 ? 's' : ''} changed</span>`;
-    html += `<span class="batch-tag-chevron">&#9662;</span>`;
-    html += `</div>`;
-    html += `<div class="batch-tag-track-diff">`;
-    html += '<table class="tag-preview-table"><thead><tr>';
-    html += '<th>Field</th><th>Current File</th><th></th><th>New Value</th>';
-    html += '</tr></thead><tbody>';
-
-    (track.diff || []).forEach(d => {
-        if (!d.changed) return; // Only show changed fields in batch view
-        html += `<tr class="tag-diff-changed">`;
-        html += `<td class="tag-field-name">${d.field}</td>`;
-        html += `<td class="tag-file-value">${escapeHtml(d.file_value) || '<span class="tag-empty">empty</span>'}</td>`;
-        html += `<td class="tag-diff-indicator"><span class="tag-diff-arrow">&rarr;</span></td>`;
-        html += `<td class="tag-db-value">${escapeHtml(d.db_value) || '<span class="tag-empty">empty</span>'}</td>`;
-        html += '</tr>';
-    });
-
-    html += '</tbody></table></div></div>';
-    return html;
-}
-
-function closeBatchTagPreviewModal() {
-    const overlay = document.getElementById('batch-tag-preview-overlay');
-    if (overlay) {
-        overlay.classList.add('hidden');
-        overlay._batchTrackIds = null;
-        overlay._batchServerType = null;
-    }
-}
-
-async function executeBatchWriteTags() {
-    const overlay = document.getElementById('batch-tag-preview-overlay');
-    const trackIds = overlay?._batchTrackIds;
-    if (!trackIds || trackIds.length === 0) return;
-
-    const writeBtn = document.getElementById('batch-tag-preview-write-btn');
-    if (writeBtn) {
-        writeBtn.disabled = true;
-        writeBtn.textContent = 'Writing...';
-    }
-
-    const embedCover = document.getElementById('batch-tag-preview-embed-cover')?.checked ?? true;
-    const serverType = overlay._batchServerType;
-    const syncToServer = document.getElementById('batch-tag-preview-sync-server')?.checked && serverType && serverType !== 'navidrome';
-
-    closeBatchTagPreviewModal();
-    await _startBatchWriteTags(trackIds, embedCover, syncToServer);
-
-    if (writeBtn) {
-        writeBtn.disabled = false;
-        writeBtn.textContent = 'Write Tags';
-    }
-}
-
-async function _startBatchWriteTags(trackIds, embedCover, syncToServer = false) {
-    try {
-        const response = await fetch('/api/library/tracks/write-tags-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_ids: trackIds, embed_cover: embedCover, sync_to_server: syncToServer })
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        showToast(`Writing tags for ${trackIds.length} tracks...`, 'info');
-        _pollBatchWriteTagsStatus();
-
-    } catch (error) {
-        showToast(`Failed to start tag write: ${error.message}`, 'error');
-    }
-}
-
-let _batchWriteTagsPollTimer = null;
-
-function _pollBatchWriteTagsStatus() {
-    if (_batchWriteTagsPollTimer) clearTimeout(_batchWriteTagsPollTimer);
-
-    async function poll() {
-        try {
-            const response = await fetch('/api/library/tracks/write-tags-batch/status');
-            const state = await response.json();
-
-            if (state.status === 'running') {
-                if (state.sync_phase === 'syncing') {
-                    const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
-                    showToast(`Syncing to ${serverName}...`, 'info');
-                } else {
-                    const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
-                    showToast(`Writing tags: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
-                }
-                _batchWriteTagsPollTimer = setTimeout(poll, 1000);
-            } else if (state.status === 'done') {
-                let msg = `Tags written: ${state.written} succeeded, ${state.failed} failed`;
-                if (state.sync_phase === 'done') {
-                    const serverName = state.sync_server === 'plex' ? 'Plex' : state.sync_server === 'jellyfin' ? 'Jellyfin' : state.sync_server;
-                    if (state.sync_synced > 0 && state.sync_failed === 0) {
-                        msg += ` — synced to ${serverName}`;
-                    } else if (state.sync_failed > 0) {
-                        msg += ` — ${serverName} sync: ${state.sync_synced} synced, ${state.sync_failed} failed`;
-                    }
-                }
-                // Surface the first error reason so users can diagnose (e.g. "File not found")
-                if (state.failed > 0 && state.errors && state.errors.length > 0) {
-                    const firstErr = state.errors[0].error || 'Unknown error';
-                    msg += ` (${firstErr})`;
-                }
-                showToast(msg, state.failed > 0 || state.sync_failed > 0 ? 'warning' : 'success');
-                _batchWriteTagsPollTimer = null;
-            }
-        } catch (error) {
-            console.error('Poll write-tags status failed:', error);
-            _batchWriteTagsPollTimer = null;
-        }
-    }
-
-    _batchWriteTagsPollTimer = setTimeout(poll, 800);
-}
-
-// ── ReplayGain Analysis ──
-
-let _rgBatchPollTimer = null;
-let _rgAlbumPollTimer = null;
-
-/**
- * Analyze a single track and write track-level ReplayGain tags.
- * Synchronous on the server side (~1–3 s). Shows spinner on the button.
- */
-async function analyzeTrackReplayGain(trackId, btn) {
-    if (btn) {
-        btn.disabled = true;
-        btn.textContent = '…';
-    }
-    try {
-        const res = await fetch(`/api/library/track/${trackId}/analyze-replaygain`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`ReplayGain written: ${data.track_gain} (${data.lufs} LUFS)`, 'success');
-        } else {
-            showToast(`ReplayGain failed: ${data.error}`, 'error');
-        }
-    } catch (err) {
-        showToast('ReplayGain analysis failed', 'error');
-    } finally {
-        if (btn) {
-            btn.disabled = false;
-            btn.textContent = 'RG';
-        }
-    }
-}
-
-/**
- * Analyze all tracks in an album and write track + album ReplayGain tags.
- * Kicks off a background job; polls for progress.
- */
-async function analyzeAlbumReplayGain(albumId, btn) {
-    if (btn) {
-        btn.disabled = true;
-        btn.innerHTML = '&#9835; Analyzing…';
-    }
-    try {
-        const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain`, { method: 'POST' });
-        const data = await res.json();
-        if (!data.success) {
-            showToast(`ReplayGain: ${data.error}`, 'error');
-            if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
-            return;
-        }
-        showToast('Album ReplayGain analysis started…', 'info');
-        _pollAlbumRgStatus(albumId, btn);
-    } catch (err) {
-        showToast('Failed to start album ReplayGain analysis', 'error');
-        if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
-    }
-}
-
-function _pollAlbumRgStatus(albumId, btn) {
-    if (_rgAlbumPollTimer) clearTimeout(_rgAlbumPollTimer);
-
-    async function poll() {
-        try {
-            const res = await fetch(`/api/library/album/${albumId}/analyze-replaygain/status`);
-            const state = await res.json();
-
-            if (state.status === 'running') {
-                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
-                showToast(`ReplayGain: ${state.processed}/${state.total} tracks (${pct}%)`, 'info');
-                _rgAlbumPollTimer = setTimeout(poll, 1200);
-            } else if (state.status === 'done') {
-                const msg = `ReplayGain done: ${state.analyzed} analyzed, ${state.failed} failed`;
-                showToast(msg, state.failed > 0 ? 'warning' : 'success');
-                if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
-                _rgAlbumPollTimer = null;
-            }
-        } catch (err) {
-            console.error('ReplayGain album poll failed:', err);
-            if (btn) { btn.disabled = false; btn.innerHTML = '&#9835; ReplayGain'; }
-            _rgAlbumPollTimer = null;
-        }
-    }
-
-    _rgAlbumPollTimer = setTimeout(poll, 1000);
-}
-
-/**
- * Analyze selected tracks (track gain only — they may span albums).
- */
-async function batchAnalyzeReplayGainSelected() {
-    const trackIds = Array.from(artistDetailPageState.selectedTracks);
-    if (trackIds.length === 0) return;
-
-    try {
-        const res = await fetch('/api/library/tracks/analyze-replaygain-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_ids: trackIds }),
-        });
-        const data = await res.json();
-        if (!data.success) {
-            showToast(`ReplayGain: ${data.error}`, 'error');
-            return;
-        }
-        showToast(`ReplayGain analysis started for ${trackIds.length} tracks…`, 'info');
-        _pollBatchRgStatus();
-    } catch (err) {
-        showToast('Failed to start batch ReplayGain analysis', 'error');
-    }
-}
-
-function _pollBatchRgStatus() {
-    if (_rgBatchPollTimer) clearTimeout(_rgBatchPollTimer);
-
-    async function poll() {
-        try {
-            const res = await fetch('/api/library/tracks/analyze-replaygain-batch/status');
-            const state = await res.json();
-
-            if (state.status === 'running') {
-                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
-                showToast(`ReplayGain: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
-                _rgBatchPollTimer = setTimeout(poll, 1000);
-            } else if (state.status === 'done') {
-                const msg = `ReplayGain done: ${state.analyzed} written, ${state.failed} failed`;
-                showToast(msg, state.failed > 0 ? 'warning' : 'success');
-                _rgBatchPollTimer = null;
-            }
-        } catch (err) {
-            console.error('ReplayGain batch poll failed:', err);
-            _rgBatchPollTimer = null;
-        }
-    }
-
-    _rgBatchPollTimer = setTimeout(poll, 800);
-}
-
-// ── Reorganize Album Files ──
-
-let _reorganizeAlbumId = null;
-let _reorganizePollTimer = null;
-
-async function showReorganizeModal(albumId) {
-    _reorganizeAlbumId = albumId;
-    const overlay = document.getElementById('reorganize-overlay');
-    const body = document.getElementById('reorganize-modal-body');
-    const title = document.getElementById('reorganize-modal-title');
-    const applyBtn = document.getElementById('reorganize-apply-btn');
-    if (!overlay || !body) return;
-
-    // Find album data from enhanced view state
-    let albumData = null;
-    let artistName = '';
-    if (artistDetailPageState.enhancedData) {
-        artistName = artistDetailPageState.enhancedData.artist.name || '';
-        const allAlbums = artistDetailPageState.enhancedData.albums || [];
-        albumData = allAlbums.find(a => String(a.id) === String(albumId));
-    }
-
-    title.textContent = `Reorganize: ${albumData ? albumData.title : 'Album'}`;
-    if (applyBtn) {
-        applyBtn.disabled = true;
-        applyBtn.textContent = 'Apply';
-        applyBtn.onclick = () => executeReorganize();
-    }
-
-    // Build modal content
-    const variables = [
-        { var: '$artist', desc: 'Track artist', example: artistName || 'Artist' },
-        { var: '$albumartist', desc: 'Album artist', example: artistName || 'Album Artist' },
-        { var: '$artistletter', desc: 'First letter of artist', example: (artistName || 'A')[0].toUpperCase() },
-        { var: '$album', desc: 'Album title', example: albumData ? albumData.title : 'Album' },
-        { var: '$albumtype', desc: 'Album/EP/Single', example: 'Album' },
-        { var: '$title', desc: 'Track title', example: 'Track Name' },
-        { var: '$track', desc: 'Track number (zero-padded)', example: '01' },
-        { var: '$disc', desc: 'Disc number (filename only)', example: '01' },
-        { var: '$cdnum', desc: 'CD label — "CD01" on multi-disc, empty otherwise', example: 'CD01' },
-        { var: '$year', desc: 'Release year', example: albumData && albumData.year ? String(albumData.year) : '2024' },
-        { var: '$quality', desc: 'Audio quality (filename only)', example: 'FLAC 16bit/44kHz' },
-    ];
-
-    let html = '<div class="reorganize-content">';
-
-    // Template input
-    html += '<div class="reorganize-template-section">';
-    html += '<label class="reorganize-label">Path Template</label>';
-    html += '<div class="reorganize-template-hint">Use <code>/</code> to separate folders. The last segment becomes the filename.</div>';
-    // Load saved template from settings, fall back to default
-    let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
-    try {
-        const settingsResp = await fetch('/api/settings');
-        if (settingsResp.ok) {
-            const settings = await settingsResp.json();
-            savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
-        }
-    } catch (_) { }
-    html += '<input type="text" id="reorganize-template-input" class="reorganize-template-input" ';
-    html += `value="${savedTemplate.replace(/"/g, '&quot;')}" `;
-    html += 'placeholder="$albumartist/$album/$track - $title" spellcheck="false">';
-    html += '</div>';
-
-    // Variables reference
-    html += '<div class="reorganize-variables">';
-    html += '<label class="reorganize-label">Available Variables</label>';
-    html += '<div class="reorganize-var-grid">';
-    variables.forEach(v => {
-        html += `<div class="reorganize-var-chip" onclick="insertReorganizeVar('${v.var}')" title="${escapeHtml(v.desc)} — e.g. ${escapeHtml(v.example)}">`;
-        html += `<code>${v.var}</code><span class="reorganize-var-desc">${v.desc}</span>`;
-        html += '</div>';
-    });
-    html += '</div></div>';
-
-    // Preview area
-    html += '<div class="reorganize-preview-section">';
-    html += '<div class="reorganize-preview-header">';
-    html += '<label class="reorganize-label">Preview</label>';
-    html += '<button class="reorganize-preview-btn" onclick="loadReorganizePreview()">Generate Preview</button>';
-    html += '</div>';
-    html += '<div id="reorganize-preview-body" class="reorganize-preview-body">';
-    html += '<div class="reorganize-preview-hint">Click "Generate Preview" to see how files will be reorganized.</div>';
-    html += '</div></div>';
-
-    html += '</div>';
-    body.innerHTML = html;
-    overlay.classList.remove('hidden');
-
-    // Wire up live preview on enter key
-    setTimeout(() => {
-        const input = document.getElementById('reorganize-template-input');
-        if (input) {
-            input.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    loadReorganizePreview();
-                }
-            });
-            input.focus();
-        }
-    }, 50);
-}
-
-function insertReorganizeVar(varName) {
-    const input = document.getElementById('reorganize-template-input');
-    if (!input) return;
-    const start = input.selectionStart;
-    const end = input.selectionEnd;
-    const val = input.value;
-    input.value = val.substring(0, start) + varName + val.substring(end);
-    input.focus();
-    const newPos = start + varName.length;
-    input.setSelectionRange(newPos, newPos);
-}
-
-function closeReorganizeModal() {
-    const overlay = document.getElementById('reorganize-overlay');
-    if (overlay) overlay.classList.add('hidden');
-    _reorganizeAlbumId = null;
-}
-
-async function loadReorganizePreview() {
-    const template = document.getElementById('reorganize-template-input')?.value?.trim();
-    const previewBody = document.getElementById('reorganize-preview-body');
-    const applyBtn = document.getElementById('reorganize-apply-btn');
-    if (!template || !previewBody || !_reorganizeAlbumId) return;
-
-    if (applyBtn) applyBtn.disabled = true;
-    previewBody.innerHTML = '<div class="reorganize-preview-loading">Loading preview...</div>';
-
-    try {
-        const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize/preview`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ template })
-        });
-        const result = await response.json();
-        if (!result.success) {
-            previewBody.innerHTML = `<div class="reorganize-preview-error">${escapeHtml(result.error || 'Preview failed')}</div>`;
-            return;
-        }
-
-        const tracks = result.tracks || [];
-        if (tracks.length === 0) {
-            previewBody.innerHTML = '<div class="reorganize-preview-hint">No tracks found.</div>';
-            return;
-        }
-
-        let hasChanges = false;
-        let hasCollisions = false;
-        let html = '<table class="reorganize-preview-table"><thead><tr>';
-        html += '<th>#</th><th>Title</th><th>Current Path</th><th></th><th>New Path</th>';
-        html += '</tr></thead><tbody>';
-
-        tracks.forEach(t => {
-            const unchanged = t.unchanged;
-            const noFile = !t.file_exists;
-            const collision = t.collision;
-            if (!unchanged && t.file_exists) hasChanges = true;
-            if (collision) hasCollisions = true;
-
-            const rowClass = collision ? 'reorganize-row-collision' : noFile ? 'reorganize-row-missing' : unchanged ? 'reorganize-row-unchanged' : 'reorganize-row-changed';
-            html += `<tr class="${rowClass}">`;
-            html += `<td>${t.track_number || ''}</td>`;
-            html += `<td>${escapeHtml(t.title)}</td>`;
-            html += `<td class="reorganize-path">${noFile ? '<em>File not found</em>' : escapeHtml(t.current_path)}</td>`;
-            html += `<td class="reorganize-arrow">${collision ? '!!' : unchanged ? '=' : noFile ? '' : '→'}</td>`;
-            html += `<td class="reorganize-path">${noFile ? '' : escapeHtml(t.new_path)}${collision ? ' <em>(collision)</em>' : ''}</td>`;
-            html += '</tr>';
-        });
-
-        html += '</tbody></table>';
-
-        const changedCount = tracks.filter(t => !t.unchanged && t.file_exists && !t.collision).length;
-        const skippedCount = tracks.filter(t => t.unchanged).length;
-        const missingCount = tracks.filter(t => !t.file_exists).length;
-        const collisionCount = tracks.filter(t => t.collision).length;
-
-        let summary = `<div class="reorganize-preview-summary">`;
-        if (changedCount > 0) summary += `<span class="reorganize-stat changed">${changedCount} will move</span>`;
-        if (skippedCount > 0) summary += `<span class="reorganize-stat unchanged">${skippedCount} unchanged</span>`;
-        if (missingCount > 0) summary += `<span class="reorganize-stat missing">${missingCount} missing</span>`;
-        if (collisionCount > 0) summary += `<span class="reorganize-stat collision">${collisionCount} collision${collisionCount !== 1 ? 's' : ''} — add $track or $disc to fix</span>`;
-        summary += '</div>';
-
-        previewBody.innerHTML = summary + html;
-
-        // Block apply if collisions exist
-        if (applyBtn) applyBtn.disabled = !hasChanges || hasCollisions;
-
-    } catch (error) {
-        previewBody.innerHTML = `<div class="reorganize-preview-error">Error: ${escapeHtml(error.message)}</div>`;
-    }
-}
-
-async function executeReorganize() {
-    const template = document.getElementById('reorganize-template-input')?.value?.trim();
-    if (!template || !_reorganizeAlbumId) return;
-
-    const applyBtn = document.getElementById('reorganize-apply-btn');
-    if (applyBtn) {
-        applyBtn.disabled = true;
-        applyBtn.textContent = 'Reorganizing...';
-    }
-
-    try {
-        const response = await fetch(`/api/library/album/${_reorganizeAlbumId}/reorganize`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ template })
-        });
-        const result = await response.json();
-        if (!result.success) throw new Error(result.error);
-
-        closeReorganizeModal();
-        showToast(`Reorganizing ${result.total} tracks...`, 'info');
-        _pollReorganizeStatus();
-
-    } catch (error) {
-        showToast(`Reorganize failed: ${error.message}`, 'error');
-        if (applyBtn) {
-            applyBtn.disabled = false;
-            applyBtn.textContent = 'Apply';
-        }
-    }
-}
-
-function _pollReorganizeStatus() {
-    if (_reorganizePollTimer) clearTimeout(_reorganizePollTimer);
-
-    async function poll() {
-        try {
-            const response = await fetch('/api/library/album/reorganize/status');
-            const state = await response.json();
-
-            if (state.status === 'running') {
-                const pct = state.total > 0 ? Math.round(state.processed / state.total * 100) : 0;
-                showToast(`Reorganizing: ${state.processed}/${state.total} (${pct}%) — ${state.current_track}`, 'info');
-                _reorganizePollTimer = setTimeout(poll, 800);
-            } else if (state.status === 'done') {
-                let msg = `Reorganized: ${state.moved} moved`;
-                if (state.skipped > 0) msg += `, ${state.skipped} skipped`;
-                if (state.failed > 0) msg += `, ${state.failed} failed`;
-                if (state.failed > 0 && state.errors && state.errors.length > 0) {
-                    msg += ` (${state.errors[0].error})`;
-                }
-                showToast(msg, state.failed > 0 ? 'warning' : 'success');
-                _reorganizePollTimer = null;
-
-                // Refresh the enhanced view to show updated paths
-                if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
-                    loadEnhancedViewData(artistDetailPageState.currentArtistId);
-                }
-            }
-        } catch (error) {
-            console.error('Poll reorganize status failed:', error);
-            _reorganizePollTimer = null;
-        }
-    }
-
-    _reorganizePollTimer = setTimeout(poll, 600);
-}
-
-// ── Reorganize All Albums for Artist ──
-
-let _reorganizeAllRunning = false;
-
-async function _showReorganizeAllModal() {
-    if (!artistDetailPageState.enhancedData) {
-        showToast('No album data loaded', 'error');
-        return;
-    }
-    const albums = artistDetailPageState.enhancedData.albums || [];
-    const artistName = artistDetailPageState.enhancedData.artist.name || 'Artist';
-
-    if (albums.length === 0) {
-        showToast('No albums to reorganize', 'error');
-        return;
-    }
-
-    const overlay = document.getElementById('reorganize-overlay');
-    const body = document.getElementById('reorganize-modal-body');
-    const title = document.getElementById('reorganize-modal-title');
-    const applyBtn = document.getElementById('reorganize-apply-btn');
-    if (!overlay || !body) return;
-
-    title.textContent = `Reorganize All Albums — ${artistName}`;
-
-    // Load saved template
-    let savedTemplate = '$albumartist/$albumartist - $album/$track - $title';
-    try {
-        const settingsResp = await fetch('/api/settings');
-        if (settingsResp.ok) {
-            const settings = await settingsResp.json();
-            savedTemplate = settings.file_organization?.templates?.album_path || savedTemplate;
-        }
-    } catch (_) { }
-
-    let html = '<div class="reorganize-content">';
-
-    // Template input
-    html += '<div class="reorganize-template-section">';
-    html += '<label class="reorganize-label">Path Template</label>';
-    html += '<div class="reorganize-template-hint">This template will be applied to all albums below. Use <code>/</code> to separate folders.</div>';
-    html += `<input type="text" id="reorganize-template-input" class="reorganize-template-input" value="${savedTemplate.replace(/"/g, '&quot;')}" placeholder="$albumartist/$album/$track - $title" spellcheck="false">`;
-    html += '</div>';
-
-    // Album list
-    html += '<div style="margin-top:14px;">';
-    html += `<label class="reorganize-label">${albums.length} album${albums.length !== 1 ? 's' : ''} will be reorganized:</label>`;
-    html += '<div style="max-height:200px;overflow-y:auto;margin-top:6px;border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:6px 10px;">';
-    albums.forEach((a, i) => {
-        const trackCount = a.tracks ? a.tracks.length : '?';
-        html += `<div style="padding:4px 0;font-size:0.88em;color:rgba(255,255,255,0.7);border-bottom:${i < albums.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none'};">`;
-        html += `${escapeHtml(a.title)} <span style="color:rgba(255,255,255,0.3);">(${trackCount} tracks)</span>`;
-        html += '</div>';
-    });
-    html += '</div></div>';
-
-    html += '</div>';
-    body.innerHTML = html;
-
-    // Wire apply button for bulk mode
-    if (applyBtn) {
-        applyBtn.disabled = false;
-        applyBtn.textContent = 'Reorganize All';
-        applyBtn.onclick = () => _executeReorganizeAll();
-    }
-
-    overlay.classList.remove('hidden');
-}
-
-async function _executeReorganizeAll() {
-    if (_reorganizeAllRunning) return;
-
-    const templateInput = document.getElementById('reorganize-template-input');
-    const template = templateInput ? templateInput.value.trim() : '';
-    if (!template) {
-        showToast('Template cannot be empty', 'error');
-        return;
-    }
-
-    const albums = artistDetailPageState.enhancedData.albums || [];
-    const total = albums.length;
-    const artistName = artistDetailPageState.enhancedData.artist?.name || 'this artist';
-
-    const confirmed = await showConfirmDialog({
-        title: 'Reorganize All Albums',
-        message: `This will reorganize ${total} album${total !== 1 ? 's' : ''} for ${artistName} using the template:\n\n${template}\n\nFiles will be moved and renamed. This cannot be undone.`,
-        confirmText: 'Reorganize All',
-        destructive: false,
-    });
-    if (!confirmed) return;
-
-    _reorganizeAllRunning = true;
-    const applyBtn = document.getElementById('reorganize-apply-btn');
-    if (applyBtn) { applyBtn.disabled = true; applyBtn.textContent = 'Working...'; }
-
-    // Close modal
-    const overlay = document.getElementById('reorganize-overlay');
-    if (overlay) overlay.classList.add('hidden');
-
-    let succeeded = 0, failed = 0;
-
-    for (let i = 0; i < total; i++) {
-        const album = albums[i];
-        showToast(`Reorganizing album ${i + 1}/${total}: ${album.title}`, 'info');
-
-        try {
-            const resp = await fetch(`/api/library/album/${album.id}/reorganize`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ template }),
-            });
-            const result = await resp.json();
-            if (!result.success) {
-                showToast(`Failed: ${album.title} — ${result.error || 'unknown error'}`, 'error');
-                failed++;
-                continue;
-            }
-
-            // Wait for this album to finish
-            await _waitForReorganizeComplete();
-            succeeded++;
-        } catch (err) {
-            showToast(`Error: ${album.title} — ${err.message}`, 'error');
-            failed++;
-        }
-    }
-
-    let msg = `Reorganized ${succeeded} of ${total} album${total !== 1 ? 's' : ''}`;
-    if (failed > 0) msg += ` (${failed} failed)`;
-    showToast(msg, failed > 0 ? 'warning' : 'success');
-
-    _reorganizeAllRunning = false;
-    if (applyBtn) { applyBtn.disabled = false; applyBtn.textContent = 'Reorganize All'; }
-
-    // Refresh enhanced view
-    if (artistDetailPageState.currentArtistId && artistDetailPageState.enhancedView) {
-        loadEnhancedViewData(artistDetailPageState.currentArtistId);
-    }
-}
-
-function _waitForReorganizeComplete() {
-    return new Promise(resolve => {
-        const poll = setInterval(async () => {
-            try {
-                const resp = await fetch('/api/library/album/reorganize/status');
-                const state = await resp.json();
-                if (state.status === 'done' || state.status === 'idle') {
-                    clearInterval(poll);
-                    resolve();
-                }
-            } catch {
-                clearInterval(poll);
-                resolve();
-            }
-        }, 800);
-    });
-}
-
-async function playLibraryTrack(track, albumTitle, artistName) {
-    if (!track.file_path) {
-        showToast('No file available for this track', 'error');
-        return;
-    }
-
-    try {
-        // Stop any current playback first
-        if (audioPlayer && !audioPlayer.paused) {
-            audioPlayer.pause();
-        }
-
-        // Get album art from enhanced data if available
-        let albumArt = null;
-        if (artistDetailPageState.enhancedData) {
-            const albums = artistDetailPageState.enhancedData.albums || [];
-            for (const a of albums) {
-                if ((a.tracks || []).some(t => t.id === track.id)) {
-                    albumArt = a.thumb_url;
-                    break;
-                }
-            }
-            if (!albumArt) albumArt = artistDetailPageState.enhancedData.artist?.thumb_url;
-        }
-        if (!albumArt && track._stats_image) albumArt = track._stats_image;
-
-        // Set track info in the media player UI
-        setTrackInfo({
-            title: track.title || 'Unknown Track',
-            artist: artistName || 'Unknown Artist',
-            album: albumTitle || 'Unknown Album',
-            filename: track.file_path,
-            is_library: true,
-            image_url: albumArt,
-            id: track.id,
-            artist_id: track.artist_id,
-            album_id: track.album_id,
-            bitrate: track.bitrate,
-            sample_rate: track.sample_rate
-        });
-
-        // Show loading state
-        showLoadingAnimation();
-        const loadingText = document.querySelector('.loading-text');
-        if (loadingText) {
-            loadingText.textContent = 'Loading library track...';
-        }
-
-        // POST to library play endpoint
-        const response = await fetch('/api/library/play', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                file_path: track.file_path,
-                title: track.title || '',
-                artist: artistName || '',
-                album: albumTitle || ''
-            })
-        });
-
-        const result = await response.json();
-        if (!result.success) {
-            // File not on disk — fall back to streaming from configured source
-            console.warn('Library file not found, falling back to stream source');
-            hideLoadingAnimation();
-            const streamRes = await fetch('/api/enhanced-search/stream-track', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    track_name: track.title || '',
-                    artist_name: artistName || '',
-                    album_name: albumTitle || '',
-                })
-            });
-            const streamData = await streamRes.json();
-            if (streamData.success && streamData.result) {
-                streamData.result.artist = artistName;
-                streamData.result.title = track.title;
-                streamData.result.album = albumTitle;
-                streamData.result.image_url = track._stats_image || null;
-                startStream(streamData.result);
-                return;
-            }
-            throw new Error(result.error || 'Failed to start library playback');
-        }
-
-        // Re-apply repeat-one loop property
-        if (audioPlayer) audioPlayer.loop = (npRepeatMode === 'one');
-        // Stream state is already "ready" — start audio playback directly
-        await startAudioPlayback();
-
-    } catch (error) {
-        console.error('Library playback error:', error);
-        showToast(`Playback error: ${error.message}`, 'error');
-        hideLoadingAnimation();
-        clearTrack();
-    }
-}
-
-// ==================== End Enhanced Library Management View ====================
-
-// UI state management functions
-function showArtistDetailLoading(show) {
-    const loadingElement = document.getElementById("artist-detail-loading");
-    if (loadingElement) {
-        if (show) {
-            loadingElement.classList.remove("hidden");
-        } else {
-            loadingElement.classList.add("hidden");
-        }
-    }
-}
-
-function showArtistDetailError(show, message = "") {
-    const errorElement = document.getElementById("artist-detail-error");
-    const errorMessageElement = document.getElementById("artist-detail-error-message");
-
-    if (errorElement) {
-        if (show) {
-            errorElement.classList.remove("hidden");
-            if (errorMessageElement && message) {
-                errorMessageElement.textContent = message;
-            }
-        } else {
-            errorElement.classList.add("hidden");
-        }
-    }
-}
-
-function showArtistDetailMain(show) {
-    const mainElement = document.getElementById("artist-detail-main");
-    if (mainElement) {
-        if (show) {
-            mainElement.classList.remove("hidden");
-        } else {
-            mainElement.classList.add("hidden");
-        }
-    }
-}
-
-function showArtistDetailHero(show) {
-    const heroElement = document.getElementById("artist-hero-section");
-    if (heroElement) {
-        if (show) {
-            heroElement.classList.remove("hidden");
-        } else {
-            heroElement.classList.add("hidden");
-        }
-    }
-}
-
-/**
- * Initialize the library page watchlist button
- */
-async function initializeLibraryWatchlistButton(artistId, artistName) {
-    const button = document.getElementById('library-artist-watchlist-btn');
-    if (!button) return;
-
-    console.log(`🔧 Initializing library watchlist button for: ${artistName} (${artistId})`);
-
-    // Reset button state
-    button.disabled = false;
-    button.classList.remove('watching');
-
-    // Set up click handler
-    button.onclick = (e) => toggleLibraryWatchlist(e, artistId, artistName);
-
-    // Check and update current status
-    await updateLibraryWatchlistButtonStatus(artistId);
-}
-
-/**
- * Toggle watchlist status for library page
- */
-async function toggleLibraryWatchlist(event, artistId, artistName) {
-    event.preventDefault();
-
-    const button = document.getElementById('library-artist-watchlist-btn');
-    const icon = button.querySelector('.watchlist-icon');
-    const text = button.querySelector('.watchlist-text');
-
-    // Show loading state
-    const originalText = text.textContent;
-    text.textContent = 'Loading...';
-    button.disabled = true;
-
-    try {
-        // Check current status
-        const checkResponse = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const checkData = await checkResponse.json();
-        if (!checkData.success) {
-            throw new Error(checkData.error || 'Failed to check watchlist status');
-        }
-
-        const isWatching = checkData.is_watching;
-
-        // Toggle watchlist status
-        const endpoint = isWatching ? '/api/watchlist/remove' : '/api/watchlist/add';
-        const payload = isWatching ?
-            { artist_id: artistId } :
-            { artist_id: artistId, artist_name: artistName };
-
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(payload)
-        });
-
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to update watchlist');
-        }
-
-        // Update button state based on new status
-        if (isWatching) {
-            // Was watching, now removed
-            icon.textContent = '👁️';
-            text.textContent = 'Add to Watchlist';
-            button.classList.remove('watching');
-            console.log(`❌ Removed ${artistName} from watchlist`);
-        } else {
-            // Was not watching, now added
-            icon.textContent = '👁️';
-            text.textContent = 'Watching...';
-            button.classList.add('watching');
-            console.log(`✅ Added ${artistName} to watchlist`);
-        }
-
-        // Update dashboard watchlist count if function exists
-        if (typeof updateWatchlistCount === 'function') {
-            updateWatchlistCount();
-        }
-
-        showToast(data.message, 'success');
-
-    } catch (error) {
-        console.error('Error toggling library watchlist:', error);
-
-        // Restore button state
-        text.textContent = originalText;
-        showToast(`Error: ${error.message}`, 'error');
-
-    } finally {
-        button.disabled = false;
-    }
-}
-
-/**
- * Update library watchlist button status based on current state
- */
-async function updateLibraryWatchlistButtonStatus(artistId) {
-    const button = document.getElementById('library-artist-watchlist-btn');
-    if (!button) return;
-
-    try {
-        const response = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            const icon = button.querySelector('.watchlist-icon');
-            const text = button.querySelector('.watchlist-text');
-
-            if (data.is_watching) {
-                icon.textContent = '👁️';
-                text.textContent = 'Watching...';
-                button.classList.add('watching');
-            } else {
-                icon.textContent = '👁️';
-                text.textContent = 'Add to Watchlist';
-                button.classList.remove('watching');
-            }
-        }
-    } catch (error) {
-        console.warn('Failed to check library watchlist status:', error);
-    }
-}
-
-// =================================
-// BEATPORT REBUILD SLIDER FUNCTIONALITY
-// =================================
-
-let beatportRebuildSliderState = {
-    currentSlide: 0,
-    totalSlides: 4,
-    autoPlayInterval: null,
-    autoPlayDelay: 5000
-};
-
-/**
- * Initialize the beatport rebuild slider functionality
- */
-function initializeBeatportRebuildSlider() {
-    console.log('🔄 Initializing beatport rebuild slider...');
-
-    const slider = document.getElementById('beatport-rebuild-slider');
-    if (!slider) {
-        console.warn('Beatport rebuild slider not found');
-        return;
-    }
-
-    // Check if already initialized to prevent duplicate event listeners
-    if (slider.dataset.initialized === 'true') {
-        console.log('Beatport rebuild slider already initialized, skipping...');
-        startBeatportRebuildSliderAutoPlay(); // Just restart autoplay
-        return;
-    }
-
-    // Mark as initialized
-    slider.dataset.initialized = 'true';
-
-    // Load real Beatport data first
-    loadBeatportHeroTracks();
-
-    console.log('✅ Beatport rebuild slider initialized successfully');
-}
-
-/**
- * Load real Beatport hero tracks and populate the slider
- */
-async function loadBeatportHeroTracks() {
-    console.log('🎯 Loading real Beatport hero tracks...');
-
-    try {
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/hero-tracks', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success && data.tracks && data.tracks.length > 0) {
-            console.log(`✅ Loaded ${data.tracks.length} Beatport tracks`);
-            populateBeatportSlider(data.tracks);
-        } else {
-            console.warn('❌ No tracks received from Beatport API, using placeholder data');
-            setupBeatportSliderWithPlaceholders();
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return;
-        console.error('❌ Error loading Beatport tracks:', error);
-        setupBeatportSliderWithPlaceholders();
-    }
-}
-
-/**
- * Populate the slider with real Beatport track data
- */
-function populateBeatportSlider(tracks) {
-    const sliderTrack = document.getElementById('beatport-rebuild-slider-track');
-    const indicatorsContainer = document.querySelector('.beatport-rebuild-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.warn('Slider elements not found');
-        return;
-    }
-
-    // Clear existing content
-    sliderTrack.innerHTML = '';
-    indicatorsContainer.innerHTML = '';
-
-    // Update state
-    beatportRebuildSliderState.totalSlides = tracks.length;
-    beatportRebuildSliderState.currentSlide = 0;
-
-    // Generate slides HTML
-    tracks.forEach((track, index) => {
-        const slideHtml = `
-            <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
-                 data-slide="${index}"
-                 data-url="${track.url}"
-                 data-image="${track.image_url}"
-                 style="--slide-bg-image: url('${track.image_url}')">
-                <div class="beatport-rebuild-slide-background">
-                    <div class="beatport-rebuild-slide-gradient"></div>
-                </div>
-                <div class="beatport-rebuild-slide-content">
-                    <div class="beatport-rebuild-track-info">
-                        <h2 class="beatport-rebuild-track-title">${track.title}</h2>
-                        <p class="beatport-rebuild-artist-name">${track.artist}</p>
-                        <p class="beatport-rebuild-album-name">New on Beatport</p>
-                    </div>
-                </div>
-            </div>
-        `;
-        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
-
-        // Add indicator
-        const indicatorHtml = `<button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>`;
-        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
-    });
-
-    // Now set up all the functionality
-    setupBeatportSliderFunctionality();
-
-    // Add individual click handlers for each slide (like top 10 releases pattern)
-    setupHeroSliderIndividualClickHandlers(tracks);
-
-    console.log(`✅ Populated slider with ${tracks.length} real Beatport tracks`);
-}
-
-/**
- * Set up individual click handlers for hero slider slides (like top 10 releases)
- */
-function setupHeroSliderIndividualClickHandlers(tracks) {
-    const slides = document.querySelectorAll('.beatport-rebuild-slide[data-url]');
-
-    slides.forEach((slide, index) => {
-        const releaseUrl = slide.getAttribute('data-url');
-        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
-            // Create release data object from the track data (similar to top 10 releases)
-            const track = tracks[index];
-            if (track) {
-                const releaseData = {
-                    url: releaseUrl,
-                    title: track.title || 'Unknown Title',
-                    artist: track.artist || 'Unknown Artist',
-                    label: track.label || 'Unknown Label',
-                    image_url: track.image_url || ''
-                };
-
-                // Add click handler that mimics the top 10 releases behavior
-                slide.addEventListener('click', (event) => {
-                    // Prevent navigation button clicks from triggering this
-                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
-                        event.target.closest('.beatport-rebuild-indicator')) {
-                        return;
-                    }
-
-                    console.log(`🎯 Hero slider slide clicked: ${releaseData.title} by ${releaseData.artist}`);
-                    handleBeatportReleaseCardClick(slide, releaseData);
-                });
-
-                slide.style.cursor = 'pointer';
-            }
-        }
-    });
-
-    console.log(`✅ Set up individual click handlers for ${slides.length} hero slider slides`);
-}
-
-/**
- * Set up placeholder data if API fails
- */
-function setupBeatportSliderWithPlaceholders() {
-    console.log('🔄 Setting up slider with placeholder data...');
-
-    // The HTML already has placeholder slides, just set up functionality
-    setupBeatportSliderFunctionality();
-}
-
-/**
- * Set up all slider functionality after content is loaded
- */
-function setupBeatportSliderFunctionality() {
-    // Set up navigation buttons
-    setupBeatportRebuildSliderNavigation();
-
-    // Set up indicators
-    setupBeatportRebuildSliderIndicators();
-
-
-    // Start auto-play
-    startBeatportRebuildSliderAutoPlay();
-
-    // Set up pause on hover
-    setupBeatportRebuildSliderHoverPause();
-}
-
-/**
- * Set up navigation button functionality
- */
-function setupBeatportRebuildSliderNavigation() {
-    const prevBtn = document.getElementById('beatport-rebuild-prev-btn');
-    const nextBtn = document.getElementById('beatport-rebuild-next-btn');
-
-    if (prevBtn) {
-        prevBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Previous button clicked, current slide:', beatportRebuildSliderState.currentSlide);
-            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide - 1);
-            resetBeatportRebuildSliderAutoPlay();
-        });
-    }
-
-    if (nextBtn) {
-        nextBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Next button clicked, current slide:', beatportRebuildSliderState.currentSlide);
-            goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
-            resetBeatportRebuildSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Set up indicator functionality
- */
-function setupBeatportRebuildSliderIndicators() {
-    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
-
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            goToBeatportRebuildSlide(index);
-            resetBeatportRebuildSliderAutoPlay();
-        });
-    });
-}
-
-/**
- * Navigate to a specific slide
- */
-function goToBeatportRebuildSlide(slideIndex) {
-    console.log('goToBeatportRebuildSlide called with:', slideIndex, 'current:', beatportRebuildSliderState.currentSlide);
-
-    // Wrap around if out of bounds
-    if (slideIndex < 0) {
-        slideIndex = beatportRebuildSliderState.totalSlides - 1;
-    } else if (slideIndex >= beatportRebuildSliderState.totalSlides) {
-        slideIndex = 0;
-    }
-
-    console.log('After wrapping, slideIndex:', slideIndex);
-
-    // Update current slide
-    beatportRebuildSliderState.currentSlide = slideIndex;
-
-    // Update slide visibility
-    const slides = document.querySelectorAll('.beatport-rebuild-slide');
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-
-        if (index === slideIndex) {
-            slide.classList.add('active');
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('.beatport-rebuild-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log('Slide updated to:', beatportRebuildSliderState.currentSlide);
-}
-
-/**
- * Start auto-play functionality
- */
-function startBeatportRebuildSliderAutoPlay() {
-    if (beatportRebuildSliderState.autoPlayInterval) {
-        clearInterval(beatportRebuildSliderState.autoPlayInterval);
-    }
-
-    beatportRebuildSliderState.autoPlayInterval = setInterval(() => {
-        goToBeatportRebuildSlide(beatportRebuildSliderState.currentSlide + 1);
-    }, beatportRebuildSliderState.autoPlayDelay);
-}
-
-/**
- * Reset auto-play timer
- */
-function resetBeatportRebuildSliderAutoPlay() {
-    startBeatportRebuildSliderAutoPlay();
-}
-
-/**
- * Set up hover pause functionality
- */
-function setupBeatportRebuildSliderHoverPause() {
-    const sliderContainer = document.querySelector('.beatport-rebuild-slider-container');
-
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (beatportRebuildSliderState.autoPlayInterval) {
-                clearInterval(beatportRebuildSliderState.autoPlayInterval);
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            startBeatportRebuildSliderAutoPlay();
-        });
-    }
-}
-
-
-/**
- * Clean up beatport rebuild slider when switching away
- */
-function cleanupBeatportRebuildSlider() {
-    if (beatportRebuildSliderState.autoPlayInterval) {
-        clearInterval(beatportRebuildSliderState.autoPlayInterval);
-        beatportRebuildSliderState.autoPlayInterval = null;
-    }
-}
-
-// ===================================
-// BEATPORT NEW RELEASES SLIDER
-// ===================================
-
-// State management for new releases slider (copied from hero slider)
-let beatportReleasesSliderState = {
-    currentSlide: 0,
-    totalSlides: 0,
-    autoPlayInterval: null,
-    autoPlayDelay: 8000,
-    isInitialized: false
-};
-
-/**
- * Initialize the beatport new releases slider functionality (based on hero slider)
- */
-function initializeBeatportReleasesSlider() {
-    console.log('🆕 Initializing beatport new releases slider...');
-
-    const slider = document.getElementById('beatport-releases-slider');
-    if (!slider) {
-        console.warn('Beatport releases slider not found');
-        return;
-    }
-
-    // Prevent double initialization
-    if (slider.dataset.initialized === 'true') {
-        console.log('Releases slider already initialized');
-        return;
-    }
-
-    const sliderTrack = document.getElementById('beatport-releases-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.warn('Releases slider elements not found');
-        return;
-    }
-
-    // Load data and initialize
-    loadBeatportNewReleases().then(success => {
-        if (success) {
-            setupBeatportReleasesSliderNavigation();
-            setupBeatportReleasesSliderIndicators();
-            setupBeatportReleasesSliderHoverPause();
-            startBeatportReleasesSliderAutoPlay();
-            slider.dataset.initialized = 'true';
-            beatportReleasesSliderState.isInitialized = true;
-            console.log('✅ New releases slider initialized successfully');
-        }
-    });
-}
-
-/**
- * Load new releases data from API
- */
-async function loadBeatportNewReleases() {
-    try {
-        console.log('📡 Fetching new releases data...');
-
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/new-releases', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success && data.releases && data.releases.length > 0) {
-            console.log(`📀 Loaded ${data.releases.length} releases`);
-            populateBeatportReleasesSlider(data.releases);
-            return true;
-        } else {
-            console.error('Failed to load releases:', data.error || 'No releases found');
-            showBeatportReleasesError(data.error || 'No releases available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('Error loading new releases:', error);
-        showBeatportReleasesError('Failed to load releases');
-        return false;
-    }
-}
-
-/**
- * Populate the releases slider with data (based on hero slider)
- */
-function populateBeatportReleasesSlider(releases) {
-    const sliderTrack = document.getElementById('beatport-releases-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-releases-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) return;
-
-    // Calculate slides needed (10 cards per slide)
-    const cardsPerSlide = 10;
-    const totalSlides = Math.ceil(releases.length / cardsPerSlide);
-
-    // Clear existing content
-    sliderTrack.innerHTML = '';
-    indicatorsContainer.innerHTML = '';
-
-    // Update state
-    beatportReleasesSliderState.totalSlides = totalSlides;
-    beatportReleasesSliderState.currentSlide = 0;
-
-    console.log(`🎯 Creating ${totalSlides} slides with ${cardsPerSlide} cards each`);
-
-    // Generate slides HTML (similar to hero slider)
-    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
-        const startIndex = slideIndex * cardsPerSlide;
-        const endIndex = Math.min(startIndex + cardsPerSlide, releases.length);
-        const slideReleases = releases.slice(startIndex, endIndex);
-
-        // Create grid HTML for this slide
-        let gridHtml = '';
-        for (let i = 0; i < cardsPerSlide; i++) {
-            if (i < slideReleases.length) {
-                const release = slideReleases[i];
-                gridHtml += `
-                    <div class="beatport-release-card" data-url="${release.url}" style="--card-bg-image: url('${release.image_url}')">
-                        <div class="beatport-release-card-content">
-                            <div class="beatport-release-artwork">
-                                ${release.image_url ? `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` : ''}
-                            </div>
-                            <div class="beatport-release-info">
-                                <div class="beatport-release-title" title="${release.title}">${release.title}</div>
-                                <div class="beatport-release-artist" title="${release.artist}">${release.artist}</div>
-                                <div class="beatport-release-label" title="${release.label}">${release.label}</div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            } else {
-                // Placeholder card
-                gridHtml += `
-                    <div class="beatport-release-card beatport-release-placeholder">
-                        <div class="beatport-release-card-content">
-                            <div class="beatport-release-artwork">
-                                <div class="placeholder-icon">📀</div>
-                            </div>
-                            <div class="beatport-release-info">
-                                <div class="beatport-release-title">More Releases</div>
-                                <div class="beatport-release-artist">Coming Soon</div>
-                                <div class="beatport-release-label">Beatport</div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }
-        }
-
-        const slideHtml = `
-            <div class="beatport-releases-slide ${slideIndex === 0 ? 'active' : ''}"
-                 data-slide="${slideIndex}">
-                <div class="beatport-releases-grid">
-                    ${gridHtml}
-                </div>
-            </div>
-        `;
-
-        sliderTrack.innerHTML += slideHtml;
-
-        // Create indicator
-        const indicatorHtml = `<button class="beatport-releases-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
-        indicatorsContainer.innerHTML += indicatorHtml;
-    }
-
-    console.log(`✅ Created ${totalSlides} slides for releases slider`);
-
-    // Add click handlers for individual release discovery (matching Top 10 Releases pattern)
-    const releaseCards = sliderTrack.querySelectorAll('.beatport-release-card[data-url]:not(.beatport-release-placeholder)');
-    releaseCards.forEach((card) => {
-        const releaseUrl = card.getAttribute('data-url');
-        if (releaseUrl && releaseUrl !== '#') {
-            // Find the corresponding release data
-            const releaseData = releases.find(release => release.url === releaseUrl);
-            if (releaseData) {
-                card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
-                card.style.cursor = 'pointer';
-            }
-        }
-    });
-}
-
-/**
- * Set up navigation functionality (copied from hero slider)
- */
-function setupBeatportReleasesSliderNavigation() {
-    const prevBtn = document.getElementById('beatport-releases-prev-btn');
-    const nextBtn = document.getElementById('beatport-releases-next-btn');
-
-    if (prevBtn) {
-        // Clone button to remove all existing event listeners
-        const newPrevBtn = prevBtn.cloneNode(true);
-        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
-
-        newPrevBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Previous releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
-            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide - 1);
-            resetBeatportReleasesSliderAutoPlay();
-        });
-    }
-
-    if (nextBtn) {
-        // Clone button to remove all existing event listeners
-        const newNextBtn = nextBtn.cloneNode(true);
-        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
-
-        newNextBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Next releases button clicked, current slide:', beatportReleasesSliderState.currentSlide);
-            goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
-            resetBeatportReleasesSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Set up indicator functionality (copied from hero slider)
- */
-function setupBeatportReleasesSliderIndicators() {
-    const indicators = document.querySelectorAll('.beatport-releases-indicator');
-
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => {
-            goToBeatportReleasesSlide(index);
-            resetBeatportReleasesSliderAutoPlay();
-        });
-    });
-}
-
-/**
- * Navigate to a specific slide (copied from hero slider)
- */
-function goToBeatportReleasesSlide(slideIndex) {
-    console.log('goToBeatportReleasesSlide called with:', slideIndex, 'current:', beatportReleasesSliderState.currentSlide);
-
-    // Wrap around if out of bounds
-    if (slideIndex < 0) {
-        slideIndex = beatportReleasesSliderState.totalSlides - 1;
-    } else if (slideIndex >= beatportReleasesSliderState.totalSlides) {
-        slideIndex = 0;
-    }
-
-    console.log('After wrapping, slideIndex:', slideIndex);
-
-    // Update current slide
-    beatportReleasesSliderState.currentSlide = slideIndex;
-
-    // Update slide visibility
-    const slides = document.querySelectorAll('.beatport-releases-slide');
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-
-        if (index === slideIndex) {
-            slide.classList.add('active');
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('.beatport-releases-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log('Releases slide updated to:', beatportReleasesSliderState.currentSlide);
-}
-
-/**
- * Start auto-play functionality (copied from hero slider)
- */
-function startBeatportReleasesSliderAutoPlay() {
-    if (beatportReleasesSliderState.autoPlayInterval) {
-        clearInterval(beatportReleasesSliderState.autoPlayInterval);
-    }
-
-    beatportReleasesSliderState.autoPlayInterval = setInterval(() => {
-        goToBeatportReleasesSlide(beatportReleasesSliderState.currentSlide + 1);
-    }, beatportReleasesSliderState.autoPlayDelay);
-}
-
-/**
- * Reset auto-play timer (copied from hero slider)
- */
-function resetBeatportReleasesSliderAutoPlay() {
-    startBeatportReleasesSliderAutoPlay();
-}
-
-/**
- * Set up hover pause functionality (copied from hero slider)
- */
-function setupBeatportReleasesSliderHoverPause() {
-    const sliderContainer = document.querySelector('.beatport-releases-slider-container');
-
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (beatportReleasesSliderState.autoPlayInterval) {
-                clearInterval(beatportReleasesSliderState.autoPlayInterval);
-                beatportReleasesSliderState.autoPlayInterval = null;
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            startBeatportReleasesSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Show error state
- */
-function showBeatportReleasesError(errorMessage) {
-    const sliderTrack = document.getElementById('beatport-releases-slider-track');
-    if (!sliderTrack) return;
-
-    sliderTrack.innerHTML = `
-        <div class="beatport-releases-loading">
-            <div class="beatport-releases-loading-content">
-                <h3>❌ Error Loading Releases</h3>
-                <p>${errorMessage}</p>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Clean up releases slider when switching away (copied from hero slider)
- */
-function cleanupBeatportReleasesSlider() {
-    if (beatportReleasesSliderState.autoPlayInterval) {
-        clearInterval(beatportReleasesSliderState.autoPlayInterval);
-        beatportReleasesSliderState.autoPlayInterval = null;
-    }
-}
-
-// ===================================
-// BEATPORT HYPE PICKS SLIDER
-// ===================================
-
-// Hype Picks Slider State
-let beatportHypePicksSliderState = {
-    currentSlide: 0,
-    totalSlides: 0,
-    autoPlayInterval: null,
-    autoPlayDelay: 4000,
-    isInitialized: false
-};
-
-/**
- * Initialize the beatport hype picks slider functionality (based on releases slider)
- */
-function initializeBeatportHypePicksSlider() {
-    console.log('🔥 Initializing beatport hype picks slider...');
-
-    const slider = document.getElementById('beatport-hype-picks-slider');
-    if (!slider) {
-        console.warn('Beatport hype picks slider not found');
-        return;
-    }
-
-    // Check if already initialized
-    if (beatportHypePicksSliderState.isInitialized) {
-        console.log('Beatport hype picks slider already initialized, skipping...');
-        startBeatportHypePicksSliderAutoPlay(); // Just restart autoplay
-        return;
-    }
-
-    // Mark as initialized
-    beatportHypePicksSliderState.isInitialized = true;
-
-    // Reset state
-    beatportHypePicksSliderState.currentSlide = 0;
-    beatportHypePicksSliderState.totalSlides = 0;
-
-    // Load data and initialize
-    loadBeatportHypePicks().then(success => {
-        if (success) {
-            setupBeatportHypePicksSliderNavigation();
-            setupBeatportHypePicksSliderIndicators();
-            setupBeatportHypePicksSliderHoverPause();
-            startBeatportHypePicksSliderAutoPlay();
-        }
-    });
-
-    console.log('✅ Beatport hype picks slider initialized successfully');
-}
-
-/**
- * Load hype picks data from API
- */
-async function loadBeatportHypePicks() {
-    try {
-        console.log('🔥 Fetching hype picks data...');
-
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/hype-picks', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success && data.releases && data.releases.length > 0) {
-            console.log(`🔥 Loaded ${data.releases.length} hype picks releases`);
-            populateBeatportHypePicksSlider(data.releases);
-            return true;
-        } else {
-            console.error('Failed to load hype picks:', data.error || 'No hype picks found');
-            showBeatportHypePicksError(data.error || 'No hype picks available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('Error loading hype picks:', error);
-        showBeatportHypePicksError('Failed to load hype picks');
-        return false;
-    }
-}
-
-/**
- * Populate the hype picks slider with data (based on releases slider)
- */
-function populateBeatportHypePicksSlider(releases) {
-    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-hype-picks-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) return;
-
-    // Clear existing content
-    sliderTrack.innerHTML = '';
-    indicatorsContainer.innerHTML = '';
-
-    // Group releases into slides (10 releases per slide in 5x2 grid)
-    const releasesPerSlide = 10;
-    const slides = [];
-    for (let i = 0; i < releases.length; i += releasesPerSlide) {
-        slides.push(releases.slice(i, i + releasesPerSlide));
-    }
-
-    console.log(`🔥 Hype Picks: Got ${releases.length} releases, creating ${slides.length} slides`);
-    beatportHypePicksSliderState.totalSlides = slides.length;
-    beatportHypePicksSliderState.currentSlide = 0;
-
-    // Create slides
-    slides.forEach((slideReleases, slideIndex) => {
-        const slideHtml = `
-            <div class="beatport-hype-picks-slide ${slideIndex === 0 ? 'active' : ''}"
-                 data-slide="${slideIndex}">
-                <div class="beatport-hype-picks-grid">
-                    ${slideReleases.map(release => createBeatportHypePickCard(release)).join('')}
-                    ${slideReleases.length < releasesPerSlide ?
-                Array(releasesPerSlide - slideReleases.length).fill(0).map(() =>
-                    `<div class="beatport-hype-pick-card beatport-hype-pick-placeholder">
-                                <div class="placeholder-icon">🔥</div>
-                            </div>`
-                ).join('') : ''
-            }
-                </div>
-            </div>
-        `;
-        sliderTrack.insertAdjacentHTML('beforeend', slideHtml);
-        console.log(`🔥 Created slide ${slideIndex + 1}/${slides.length} with ${slideReleases.length} releases`);
-
-        // Create indicator
-        const indicatorHtml = `<button class="beatport-hype-picks-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
-        indicatorsContainer.insertAdjacentHTML('beforeend', indicatorHtml);
-    });
-
-    // Add click handlers to track cards
-    setupBeatportHypePickCardHandlers();
-}
-
-/**
- * Create a hype pick card HTML (for release cards, same as new releases)
- */
-function createBeatportHypePickCard(release) {
-    const artworkUrl = release.image_url || '';
-    const bgStyle = artworkUrl ? `style="--card-bg-image: url('${artworkUrl}')"` : '';
-
-    return `
-        <div class="beatport-hype-pick-card" data-url="${release.url || ''}" ${bgStyle}>
-            <div class="beatport-hype-pick-card-content">
-                <div class="beatport-hype-pick-artwork">
-                    ${artworkUrl ? `<img src="${artworkUrl}" alt="${release.title || 'Release'}" loading="lazy">` : ''}
-                </div>
-                <div class="beatport-hype-pick-info">
-                    <div class="beatport-hype-pick-title">${release.title || 'Unknown Title'}</div>
-                    <div class="beatport-hype-pick-artist">${release.artist || 'Unknown Artist'}</div>
-                    <div class="beatport-hype-pick-label">${release.label || 'Hype Pick'}</div>
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-/**
- * Setup navigation for hype picks slider (same pattern as releases)
- */
-function setupBeatportHypePicksSliderNavigation() {
-    const prevBtn = document.getElementById('beatport-hype-picks-prev-btn');
-    const nextBtn = document.getElementById('beatport-hype-picks-next-btn');
-
-    if (prevBtn) {
-        // Clone button to remove all existing event listeners
-        const newPrevBtn = prevBtn.cloneNode(true);
-        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
-
-        newPrevBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Previous hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
-            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide - 1);
-            resetBeatportHypePicksSliderAutoPlay();
-        });
-    }
-
-    if (nextBtn) {
-        // Clone button to remove all existing event listeners
-        const newNextBtn = nextBtn.cloneNode(true);
-        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
-
-        newNextBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Next hype picks button clicked, current slide:', beatportHypePicksSliderState.currentSlide);
-            goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
-            resetBeatportHypePicksSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Setup indicators for hype picks slider
- */
-function setupBeatportHypePicksSliderIndicators() {
-    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
-
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => {
-            goToBeatportHypePicksSlide(index);
-            resetBeatportHypePicksSliderAutoPlay();
-        });
-    });
-}
-
-/**
- * Navigate to specific slide
- */
-function goToBeatportHypePicksSlide(slideIndex) {
-    console.log('goToBeatportHypePicksSlide called with:', slideIndex, 'current:', beatportHypePicksSliderState.currentSlide);
-
-    // Handle wrap around
-    if (slideIndex < 0) {
-        slideIndex = beatportHypePicksSliderState.totalSlides - 1;
-    } else if (slideIndex >= beatportHypePicksSliderState.totalSlides) {
-        slideIndex = 0;
-    }
-
-    // Update current slide
-    beatportHypePicksSliderState.currentSlide = slideIndex;
-
-    // Update slides
-    const slides = document.querySelectorAll('.beatport-hype-picks-slide');
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-        if (index === slideIndex) {
-            slide.classList.add('active');
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('.beatport-hype-picks-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log('Slide updated to:', beatportHypePicksSliderState.currentSlide);
-}
-
-/**
- * Start auto-play for hype picks slider
- */
-function startBeatportHypePicksSliderAutoPlay() {
-    if (beatportHypePicksSliderState.autoPlayInterval) {
-        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
-    }
-
-    beatportHypePicksSliderState.autoPlayInterval = setInterval(() => {
-        goToBeatportHypePicksSlide(beatportHypePicksSliderState.currentSlide + 1);
-    }, beatportHypePicksSliderState.autoPlayDelay);
-
-    console.log('🔥 Hype picks slider autoplay started');
-}
-
-/**
- * Reset auto-play for hype picks slider
- */
-function resetBeatportHypePicksSliderAutoPlay() {
-    startBeatportHypePicksSliderAutoPlay();
-}
-
-/**
- * Setup hover pause for hype picks slider
- */
-function setupBeatportHypePicksSliderHoverPause() {
-    const sliderContainer = document.querySelector('.beatport-hype-picks-slider-container');
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (beatportHypePicksSliderState.autoPlayInterval) {
-                clearInterval(beatportHypePicksSliderState.autoPlayInterval);
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            startBeatportHypePicksSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Setup click handlers for hype pick cards
- */
-function setupBeatportHypePickCardHandlers() {
-    const cards = document.querySelectorAll('.beatport-hype-pick-card:not(.beatport-hype-pick-placeholder)');
-
-    cards.forEach(card => {
-        const releaseUrl = card.getAttribute('data-url');
-        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
-            // Extract release data from the card elements
-            const titleElement = card.querySelector('.beatport-hype-pick-title');
-            const artistElement = card.querySelector('.beatport-hype-pick-artist');
-            const labelElement = card.querySelector('.beatport-hype-pick-label');
-            const imageElement = card.querySelector('.beatport-hype-pick-artwork img');
-
-            const releaseData = {
-                url: releaseUrl,
-                title: titleElement ? titleElement.textContent.trim() : 'Unknown Title',
-                artist: artistElement ? artistElement.textContent.trim() : 'Unknown Artist',
-                label: labelElement ? labelElement.textContent.trim() : 'Unknown Label',
-                image_url: imageElement ? imageElement.src : ''
-            };
-
-            card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releaseData));
-            card.style.cursor = 'pointer';
-        }
-    });
-}
-
-/**
- * Show error state for hype picks slider
- */
-function showBeatportHypePicksError(errorMessage) {
-    const sliderTrack = document.getElementById('beatport-hype-picks-slider-track');
-    if (sliderTrack) {
-        sliderTrack.innerHTML = `
-        <div class="beatport-hype-picks-loading">
-            <div class="beatport-hype-picks-loading-content">
-                <h3>❌ Error Loading Hype Picks</h3>
-                <p>${errorMessage}</p>
-            </div>
-        </div>
-        `;
-    }
-}
-
-/**
- * Clean up hype picks slider when switching away
- */
-function cleanupBeatportHypePicksSlider() {
-    if (beatportHypePicksSliderState.autoPlayInterval) {
-        clearInterval(beatportHypePicksSliderState.autoPlayInterval);
-        beatportHypePicksSliderState.autoPlayInterval = null;
-    }
-}
-
-// ===================================
-// BEATPORT FEATURED CHARTS SLIDER
-// ===================================
-
-// State management for featured charts slider (copied from releases slider)
-let beatportChartsSliderState = {
-    currentSlide: 0,
-    totalSlides: 0,
-    autoPlayInterval: null,
-    autoPlayDelay: 10000,  // Slightly longer auto-play for charts
-    isInitialized: false
-};
-
-/**
- * Initialize the beatport featured charts slider functionality (based on releases slider)
- */
-function initializeBeatportChartsSlider() {
-    console.log('🔥 Initializing beatport featured charts slider...');
-
-    const slider = document.getElementById('beatport-charts-slider');
-    if (!slider) {
-        console.warn('Beatport charts slider not found');
-        return;
-    }
-
-    // Prevent double initialization
-    if (slider.dataset.initialized === 'true') {
-        console.log('Charts slider already initialized');
-        return;
-    }
-
-    const sliderTrack = document.getElementById('beatport-charts-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.warn('Charts slider elements not found');
-        return;
-    }
-
-    // Load data and initialize
-    loadBeatportFeaturedCharts().then(success => {
-        if (success) {
-            setupBeatportChartsSliderNavigation();
-            setupBeatportChartsSliderIndicators();
-            setupBeatportChartsSliderHoverPause();
-            startBeatportChartsSliderAutoPlay();
-            slider.dataset.initialized = 'true';
-            beatportChartsSliderState.isInitialized = true;
-            console.log('✅ Featured charts slider initialized successfully');
-        }
-    });
-}
-
-/**
- * Load featured charts data from API
- */
-async function loadBeatportFeaturedCharts() {
-    try {
-        console.log('📊 Loading featured charts data...');
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/featured-charts', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success && data.charts && data.charts.length > 0) {
-            console.log(`📈 Loaded ${data.charts.length} featured charts`);
-            createBeatportChartsSlides(data.charts);
-            return true;
-        } else {
-            console.warn('No featured charts data available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('❌ Error loading featured charts:', error);
-        return false;
-    }
-}
-
-/**
- * Create chart slides with grid layout (copied from releases slider)
- */
-function createBeatportChartsSlides(charts) {
-    const sliderTrack = document.getElementById('beatport-charts-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-charts-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.error('Charts slider elements not found');
-        return;
-    }
-
-    const cardsPerSlide = 10; // 5x2 grid
-    const totalSlides = Math.ceil(charts.length / cardsPerSlide);
-
-    // Clear existing content
-    sliderTrack.innerHTML = '';
-    indicatorsContainer.innerHTML = '';
-
-    // Update state
-    beatportChartsSliderState.totalSlides = totalSlides;
-    beatportChartsSliderState.currentSlide = 0;
-
-    console.log(`🎯 Creating ${totalSlides} chart slides with ${cardsPerSlide} cards each`);
-
-    // Generate slides HTML
-    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
-        const startIndex = slideIndex * cardsPerSlide;
-        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
-        const slideCharts = charts.slice(startIndex, endIndex);
-
-        // Create grid HTML for this slide
-        const gridHtml = slideCharts.map(chart => {
-            const bgImageStyle = chart.image ? `--chart-bg-image: url('${chart.image}')` : '';
-            return `
-                <div class="beatport-chart-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
-                    <div class="beatport-chart-card-content">
-                        <div class="beatport-chart-name">${chart.name || 'Unknown Chart'}</div>
-                        <div class="beatport-chart-creator">${chart.creator || 'Unknown Creator'}</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        // Create slide HTML
-        const slideHtml = `
-            <div class="beatport-charts-slide ${slideIndex === 0 ? 'active' : ''}">
-                <div class="beatport-charts-grid">
-                    ${gridHtml}
-                </div>
-            </div>
-        `;
-
-        sliderTrack.innerHTML += slideHtml;
-
-        // Create indicator
-        const indicatorHtml = `<button class="beatport-charts-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
-        indicatorsContainer.innerHTML += indicatorHtml;
-    }
-
-    console.log(`✅ Created ${totalSlides} chart slides`);
-
-    // Add click handlers for individual chart discovery (matching chart pattern)
-    const chartCards = sliderTrack.querySelectorAll('.beatport-chart-card[data-url]');
-    chartCards.forEach((card) => {
-        const chartUrl = card.getAttribute('data-url');
-        if (chartUrl && chartUrl !== '') {
-            // Find the corresponding chart data
-            const chartData = charts.find(chart => chart.url === chartUrl);
-            if (chartData) {
-                card.addEventListener('click', () => handleBeatportChartCardClick(card, chartData));
-                card.style.cursor = 'pointer';
-            }
-        }
-    });
-}
-
-/**
- * Set up navigation functionality (copied from releases slider with button cloning)
- */
-function setupBeatportChartsSliderNavigation() {
-    const prevBtn = document.getElementById('beatport-charts-prev-btn');
-    const nextBtn = document.getElementById('beatport-charts-next-btn');
-
-    if (prevBtn) {
-        // Clone button to remove all existing event listeners
-        const newPrevBtn = prevBtn.cloneNode(true);
-        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
-
-        newPrevBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Previous charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
-            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide - 1);
-            resetBeatportChartsSliderAutoPlay();
-        });
-    }
-
-    if (nextBtn) {
-        // Clone button to remove all existing event listeners
-        const newNextBtn = nextBtn.cloneNode(true);
-        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
-
-        newNextBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Next charts button clicked, current slide:', beatportChartsSliderState.currentSlide);
-            goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
-            resetBeatportChartsSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Set up indicator functionality (copied from releases slider)
- */
-function setupBeatportChartsSliderIndicators() {
-    const indicators = document.querySelectorAll('.beatport-charts-indicator');
-
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => {
-            goToBeatportChartsSlide(index);
-            resetBeatportChartsSliderAutoPlay();
-        });
-    });
-}
-
-/**
- * Navigate to a specific slide (copied from releases slider)
- */
-function goToBeatportChartsSlide(slideIndex) {
-    console.log('goToBeatportChartsSlide called with:', slideIndex, 'current:', beatportChartsSliderState.currentSlide);
-
-    // Wrap around if out of bounds
-    if (slideIndex < 0) {
-        slideIndex = beatportChartsSliderState.totalSlides - 1;
-    } else if (slideIndex >= beatportChartsSliderState.totalSlides) {
-        slideIndex = 0;
-    }
-
-    console.log('After wrapping, slideIndex:', slideIndex);
-
-    // Update current slide
-    beatportChartsSliderState.currentSlide = slideIndex;
-
-    // Update slide visibility
-    const slides = document.querySelectorAll('.beatport-charts-slide');
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-
-        if (index === slideIndex) {
-            slide.classList.add('active');
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('.beatport-charts-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log('Charts slide updated to:', beatportChartsSliderState.currentSlide);
-}
-
-/**
- * Start auto-play functionality (copied from releases slider)
- */
-function startBeatportChartsSliderAutoPlay() {
-    if (beatportChartsSliderState.autoPlayInterval) {
-        clearInterval(beatportChartsSliderState.autoPlayInterval);
-    }
-
-    beatportChartsSliderState.autoPlayInterval = setInterval(() => {
-        goToBeatportChartsSlide(beatportChartsSliderState.currentSlide + 1);
-    }, beatportChartsSliderState.autoPlayDelay);
-}
-
-/**
- * Reset auto-play timer (copied from releases slider)
- */
-function resetBeatportChartsSliderAutoPlay() {
-    startBeatportChartsSliderAutoPlay();
-}
-
-/**
- * Set up hover pause functionality (copied from releases slider)
- */
-function setupBeatportChartsSliderHoverPause() {
-    const sliderContainer = document.querySelector('.beatport-charts-slider-container');
-
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (beatportChartsSliderState.autoPlayInterval) {
-                clearInterval(beatportChartsSliderState.autoPlayInterval);
-                beatportChartsSliderState.autoPlayInterval = null;
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            startBeatportChartsSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Clean up charts slider when switching away (copied from releases slider)
- */
-function cleanupBeatportChartsSlider() {
-    if (beatportChartsSliderState.autoPlayInterval) {
-        clearInterval(beatportChartsSliderState.autoPlayInterval);
-        beatportChartsSliderState.autoPlayInterval = null;
-    }
-}
-
-// ===================================
-// BEATPORT DJ CHARTS SLIDER
-// ===================================
-
-// State management for DJ charts slider (3 cards per slide)
-let beatportDJSliderState = {
-    currentSlide: 0,
-    totalSlides: 0,
-    autoPlayInterval: null,
-    autoPlayDelay: 12000,  // Longer auto-play for DJ charts
-    isInitialized: false
-};
-
-/**
- * Initialize the beatport DJ charts slider functionality (based on charts slider)
- */
-function initializeBeatportDJSlider() {
-    console.log('🎧 Initializing beatport DJ charts slider...');
-
-    const slider = document.getElementById('beatport-dj-slider');
-    if (!slider) {
-        console.warn('Beatport DJ slider not found');
-        return;
-    }
-
-    // Prevent double initialization
-    if (slider.dataset.initialized === 'true') {
-        console.log('DJ slider already initialized');
-        return;
-    }
-
-    const sliderTrack = document.getElementById('beatport-dj-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.warn('DJ slider elements not found');
-        return;
-    }
-
-    // Load data and initialize
-    loadBeatportDJCharts().then(success => {
-        if (success) {
-            setupBeatportDJSliderNavigation();
-            setupBeatportDJSliderIndicators();
-            setupBeatportDJSliderHoverPause();
-            startBeatportDJSliderAutoPlay();
-            slider.dataset.initialized = 'true';
-            beatportDJSliderState.isInitialized = true;
-            console.log('✅ DJ charts slider initialized successfully');
-        }
-    });
-}
-
-/**
- * Load DJ charts data from API
- */
-async function loadBeatportDJCharts() {
-    try {
-        console.log('🎧 Loading DJ charts data...');
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/dj-charts', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success && data.charts && data.charts.length > 0) {
-            console.log(`📈 Loaded ${data.charts.length} DJ charts`);
-            createBeatportDJSlides(data.charts);
-            return true;
-        } else {
-            console.warn('No DJ charts data available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('❌ Error loading DJ charts:', error);
-        return false;
-    }
-}
-
-/**
- * Create DJ chart slides with 3 cards per slide layout
- */
-function createBeatportDJSlides(charts) {
-    const sliderTrack = document.getElementById('beatport-dj-slider-track');
-    const indicatorsContainer = document.getElementById('beatport-dj-slider-indicators');
-
-    if (!sliderTrack || !indicatorsContainer) {
-        console.error('DJ slider elements not found');
-        return;
-    }
-
-    const cardsPerSlide = 3; // 3 cards per slide for DJ charts
-    const totalSlides = Math.ceil(charts.length / cardsPerSlide);
-
-    // Clear existing content
-    sliderTrack.innerHTML = '';
-    indicatorsContainer.innerHTML = '';
-
-    // Update state
-    beatportDJSliderState.totalSlides = totalSlides;
-    beatportDJSliderState.currentSlide = 0;
-
-    console.log(`🎯 Creating ${totalSlides} DJ chart slides with ${cardsPerSlide} cards each`);
-
-    // Generate slides HTML
-    for (let slideIndex = 0; slideIndex < totalSlides; slideIndex++) {
-        const startIndex = slideIndex * cardsPerSlide;
-        const endIndex = Math.min(startIndex + cardsPerSlide, charts.length);
-        const slideCharts = charts.slice(startIndex, endIndex);
-
-        // Create grid HTML for this slide
-        const gridHtml = slideCharts.map(chart => {
-            const bgImageStyle = chart.image ? `--dj-bg-image: url('${chart.image}')` : '';
-            return `
-                <div class="beatport-dj-card" style="${bgImageStyle}" data-url="${chart.url || ''}">
-                    <div class="beatport-dj-card-content">
-                        <div class="beatport-dj-name">${chart.name || 'Unknown Chart'}</div>
-                        <div class="beatport-dj-creator">${chart.creator || 'Unknown Creator'}</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-        // Create slide HTML
-        const slideHtml = `
-            <div class="beatport-dj-slide ${slideIndex === 0 ? 'active' : ''}">
-                <div class="beatport-dj-grid">
-                    ${gridHtml}
-                </div>
-            </div>
-        `;
-
-        sliderTrack.innerHTML += slideHtml;
-
-        // Create indicator
-        const indicatorHtml = `<button class="beatport-dj-indicator ${slideIndex === 0 ? 'active' : ''}" data-slide="${slideIndex}"></button>`;
-        indicatorsContainer.innerHTML += indicatorHtml;
-    }
-
-    console.log(`✅ Created ${totalSlides} DJ chart slides`);
-
-    // Add click handlers for individual DJ chart discovery (matching chart pattern)
-    const djChartCards = sliderTrack.querySelectorAll('.beatport-dj-card[data-url]');
-    djChartCards.forEach((card) => {
-        const chartUrl = card.getAttribute('data-url');
-        if (chartUrl && chartUrl !== '') {
-            // Find the corresponding chart data
-            const chartData = charts.find(chart => chart.url === chartUrl);
-            if (chartData) {
-                card.addEventListener('click', () => handleBeatportDJChartCardClick(card, chartData));
-                card.style.cursor = 'pointer';
-            }
-        }
-    });
-}
-
-/**
- * Set up navigation functionality (copied from charts slider with button cloning)
- */
-function setupBeatportDJSliderNavigation() {
-    const prevBtn = document.getElementById('beatport-dj-prev-btn');
-    const nextBtn = document.getElementById('beatport-dj-next-btn');
-
-    if (prevBtn) {
-        // Clone button to remove all existing event listeners
-        const newPrevBtn = prevBtn.cloneNode(true);
-        prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
-
-        newPrevBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Previous DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
-            goToBeatportDJSlide(beatportDJSliderState.currentSlide - 1);
-            resetBeatportDJSliderAutoPlay();
-        });
-    }
-
-    if (nextBtn) {
-        // Clone button to remove all existing event listeners
-        const newNextBtn = nextBtn.cloneNode(true);
-        nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
-
-        newNextBtn.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            console.log('Next DJ button clicked, current slide:', beatportDJSliderState.currentSlide);
-            goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
-            resetBeatportDJSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Set up indicator functionality (copied from charts slider)
- */
-function setupBeatportDJSliderIndicators() {
-    const indicators = document.querySelectorAll('.beatport-dj-indicator');
-
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => {
-            goToBeatportDJSlide(index);
-            resetBeatportDJSliderAutoPlay();
-        });
-    });
-}
-
-/**
- * Navigate to a specific slide (copied from charts slider)
- */
-function goToBeatportDJSlide(slideIndex) {
-    console.log('goToBeatportDJSlide called with:', slideIndex, 'current:', beatportDJSliderState.currentSlide);
-
-    // Wrap around if out of bounds
-    if (slideIndex < 0) {
-        slideIndex = beatportDJSliderState.totalSlides - 1;
-    } else if (slideIndex >= beatportDJSliderState.totalSlides) {
-        slideIndex = 0;
-    }
-
-    console.log('After wrapping, slideIndex:', slideIndex);
-
-    // Update current slide
-    beatportDJSliderState.currentSlide = slideIndex;
-
-    // Update slide visibility
-    const slides = document.querySelectorAll('.beatport-dj-slide');
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-
-        if (index === slideIndex) {
-            slide.classList.add('active');
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('.beatport-dj-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log('DJ slide updated to:', beatportDJSliderState.currentSlide);
-}
-
-/**
- * Start auto-play functionality (copied from charts slider)
- */
-function startBeatportDJSliderAutoPlay() {
-    if (beatportDJSliderState.autoPlayInterval) {
-        clearInterval(beatportDJSliderState.autoPlayInterval);
-    }
-
-    beatportDJSliderState.autoPlayInterval = setInterval(() => {
-        goToBeatportDJSlide(beatportDJSliderState.currentSlide + 1);
-    }, beatportDJSliderState.autoPlayDelay);
-}
-
-/**
- * Reset auto-play timer (copied from charts slider)
- */
-function resetBeatportDJSliderAutoPlay() {
-    startBeatportDJSliderAutoPlay();
-}
-
-/**
- * Set up hover pause functionality (copied from charts slider)
- */
-function setupBeatportDJSliderHoverPause() {
-    const sliderContainer = document.querySelector('.beatport-dj-slider-container');
-
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (beatportDJSliderState.autoPlayInterval) {
-                clearInterval(beatportDJSliderState.autoPlayInterval);
-                beatportDJSliderState.autoPlayInterval = null;
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            startBeatportDJSliderAutoPlay();
-        });
-    }
-}
-
-/**
- * Clean up DJ slider when switching away (copied from charts slider)
- */
-function cleanupBeatportDJSlider() {
-    if (beatportDJSliderState.autoPlayInterval) {
-        clearInterval(beatportDJSliderState.autoPlayInterval);
-        beatportDJSliderState.autoPlayInterval = null;
-    }
-}
-
-/**
- * Load top 10 lists data from API and populate both lists
- */
-async function loadBeatportTop10Lists() {
-    try {
-        console.log('🏆 Loading top 10 lists data...');
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/homepage/top-10-lists', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`🎵 Loaded ${data.beatport_count} Beatport Top 10 + ${data.hype_count} Hype Top 10 tracks`);
-
-            // Populate both lists
-            populateBeatportTop10List(data.beatport_top10);
-            populateHypeTop10List(data.hype_top10);
-            return true;
-        } else {
-            console.error('Failed to load top 10 lists:', data.error);
-            showTop10ListsError(data.error || 'No data available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('Error loading top 10 lists:', error);
-        showTop10ListsError('Failed to load top 10 lists');
-        return false;
-    }
-}
-
-/**
- * Clean track/artist text for proper spacing
- */
-function cleanTrackText(text) {
-    if (!text) return text;
-
-    // Fix common spacing issues
-    text = text.replace(/([a-z$!@#%&*])([A-Z])/g, '$1 $2');  // Add space between lowercase/symbols and uppercase
-    text = text.replace(/([a-zA-Z]),([a-zA-Z])/g, '$1, $2');  // Add space after comma
-    text = text.replace(/([a-zA-Z])(Mix|Remix|Extended|Version)\b/g, '$1 $2');  // Fix mix types
-    text = text.replace(/\s+/g, ' ');  // Collapse multiple spaces
-    text = text.trim();
-
-    return text;
-}
-
-/**
- * Populate Beatport Top 10 list with data
- */
-function populateBeatportTop10List(tracks) {
-    const container = document.getElementById('beatport-top10-list');
-    if (!container || !tracks || tracks.length === 0) return;
-
-    // Generate HTML for the tracks
-    let tracksHtml = `
-        <div class="beatport-top10-list-header">
-            <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
-            <p class="beatport-top10-list-subtitle">Most popular tracks on Beatport</p>
-        </div>
-        <div class="beatport-top10-tracks">
-    `;
-
-    tracks.forEach((track, index) => {
-        // Clean the text data before injection
-        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
-        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
-        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
-
-        tracksHtml += `
-            <div class="beatport-top10-card" data-url="${track.url || '#'}">
-                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
-                <div class="beatport-top10-card-artwork">
-                    ${track.artwork_url ?
-                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
-                '<div class="beatport-top10-card-placeholder">🎵</div>'
-            }
-                </div>
-                <div class="beatport-top10-card-info">
-                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
-                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
-                    <p class="beatport-top10-card-label">${cleanLabel}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    tracksHtml += '</div>';
-    container.innerHTML = tracksHtml;
-}
-
-/**
- * Populate Hype Top 10 list with data
- */
-function populateHypeTop10List(tracks) {
-    const container = document.getElementById('beatport-hype10-list');
-    if (!container || !tracks || tracks.length === 0) return;
-
-    // Generate HTML for the tracks
-    let tracksHtml = `
-        <div class="beatport-hype10-list-header">
-            <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
-            <p class="beatport-hype10-list-subtitle">Editor's trending picks</p>
-        </div>
-        <div class="beatport-hype10-tracks">
-    `;
-
-    tracks.forEach((track, index) => {
-        // Clean the text data before injection
-        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
-        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
-        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
-
-        tracksHtml += `
-            <div class="beatport-hype10-card" data-url="${track.url || '#'}">
-                <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
-                <div class="beatport-hype10-card-artwork">
-                    ${track.artwork_url ?
-                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
-                '<div class="beatport-hype10-card-placeholder">🔥</div>'
-            }
-                </div>
-                <div class="beatport-hype10-card-info">
-                    <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
-                    <p class="beatport-hype10-card-artist">${cleanArtist}</p>
-                    <p class="beatport-hype10-card-label">${cleanLabel}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    tracksHtml += '</div>';
-    container.innerHTML = tracksHtml;
-}
-
-/**
- * Show error message for top 10 lists
- */
-function showTop10ListsError(errorMessage) {
-    const beatportContainer = document.getElementById('beatport-top10-list');
-    const hypeContainer = document.getElementById('beatport-hype10-list');
-
-    const errorHtml = `
-        <div class="beatport-top10-error">
-            <h3>❌ Error Loading Data</h3>
-            <p>${errorMessage}</p>
-        </div>
-    `;
-
-    if (beatportContainer) beatportContainer.innerHTML = errorHtml;
-    if (hypeContainer) hypeContainer.innerHTML = errorHtml;
-}
-
-/**
- * Load top 10 releases data from API and populate the list
- */
-async function loadBeatportTop10Releases() {
-    try {
-        console.log('💿 Loading top 10 releases data...');
-        const signal = getBeatportContentSignal();
-        const response = await fetch('/api/beatport/homepage/top-10-releases-cards', signal ? { signal } : undefined);
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`💿 Loaded ${data.releases_count} Top 10 Releases`);
-            populateBeatportTop10Releases(data.releases);
-            return true;
-        } else {
-            console.error('Failed to load top 10 releases:', data.error);
-            showTop10ReleasesError(data.error || 'No data available');
-            return false;
-        }
-    } catch (error) {
-        if (error && error.name === 'AbortError') return false;
-        console.error('Error loading top 10 releases:', error);
-        showTop10ReleasesError('Failed to load top 10 releases');
-        return false;
-    }
-}
-
-/**
- * Populate Top 10 Releases list with data
- */
-function populateBeatportTop10Releases(releases) {
-    const container = document.getElementById('beatport-releases-top10-list');
-    if (!container || !releases || releases.length === 0) return;
-
-    // Generate HTML for the releases
-    let releasesHtml = `
-        <div class="beatport-releases-top10-tracks">
-    `;
-
-    releases.forEach((release, index) => {
-        releasesHtml += `
-            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
-                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
-                <div class="beatport-releases-top10-card-artwork">
-                    ${release.image_url ?
-                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
-                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
-            }
-                </div>
-                <div class="beatport-releases-top10-card-info">
-                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
-                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
-                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    releasesHtml += '</div>';
-    container.innerHTML = releasesHtml;
-
-    // Set background images for cards
-    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
-    cards.forEach(card => {
-        const bgImage = card.getAttribute('data-bg-image');
-        if (bgImage) {
-            // Transform image URL from 95x95 to 500x500 for higher quality background
-            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
-            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
-            card.style.backgroundSize = 'cover';
-            card.style.backgroundPosition = 'center';
-        }
-    });
-
-    // Add click handlers for individual release discovery
-    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
-    releaseCards.forEach((card, index) => {
-        card.addEventListener('click', () => handleBeatportReleaseCardClick(card, releases[index]));
-        card.style.cursor = 'pointer';
-    });
-}
-
-/**
- * Show error message for top 10 releases
- */
-function showTop10ReleasesError(errorMessage) {
-    const container = document.getElementById('beatport-releases-top10-list');
-
-    const errorHtml = `
-        <div class="beatport-releases-top10-error">
-            <h3>❌ Error Loading Releases</h3>
-            <p>${errorMessage}</p>
-        </div>
-    `;
-
-    if (container) container.innerHTML = errorHtml;
-}
-
-/**
- * Handle click on individual Top 10 Release card - create discovery process for single release
- */
-async function handleBeatportReleaseCardClick(cardElement, release) {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-
-    console.log(`💿 Individual release card clicked: ${release.title} by ${release.artist}`);
-
-    if (!release.url || release.url === '#') {
-        _beatportModalOpening = false;
-        showToast('No release URL available', 'error');
-        return;
-    }
-
-    try {
-        showToast(`Loading ${release.title}...`, 'info');
-        showLoadingOverlay(`Getting tracks from ${release.title}...`);
-
-        // Fetch structured release metadata for direct download modal
-        console.log(`🎵 Fetching release metadata: ${release.url}`);
-        const response = await fetch('/api/beatport/release-metadata', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ release_url: release.url })
-        });
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(data.error || 'No tracks found in this release');
-        }
-
-        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
-
-        // Format artists as array of strings for compatibility with download modal
-        const formattedTracks = data.tracks.map(track => ({
-            ...track,
-            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
-        }));
-
-        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        const playlistName = data.album.name;
-
-        // Open download modal directly - same as clicking an album on the Artists page
-        await openDownloadMissingModalForArtistAlbum(
-            virtualPlaylistId,
-            playlistName,
-            formattedTracks,
-            data.album,
-            data.artist,
-            false
-        );
-
-        // Register Beatport download bubble for releases (albums, EPs, singles)
-        const releaseImage = (data.album.images && data.album.images.length > 0) ? data.album.images[0].url : (release.image_url || '');
-        registerBeatportDownload(playlistName, releaseImage, virtualPlaylistId);
-
-        hideLoadingOverlay();
-        _beatportModalOpening = false;
-        console.log(`✅ Opened download modal for ${playlistName}`);
-
-    } catch (error) {
-        console.error(`❌ Error handling release click for ${release.title}:`, error);
-        hideLoadingOverlay();
-        _beatportModalOpening = false;
-        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Convert scraped Beatport tracks into download-modal-compatible format and open the modal.
- * Used by all chart/playlist handlers (Top 100, Hype 100, Featured Charts, DJ Charts, genre charts).
- * Charts open as compilations — each track is searched independently on Soulseek.
- */
-// Guard against multiple rapid clicks opening duplicate modals
-let _beatportModalOpening = false;
-
-/**
- * Enrich tracks via a single batch request to the backend.
- * Progress is reported via WebSocket (beatport:enrich_progress) and updates the loading overlay.
- * Returns the enriched tracks array.
- */
-async function _enrichTracksWithProgress(tracks, chartName) {
-    const enrichmentId = `enrich_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
-
-    try {
-        const resp = await fetch('/api/beatport/enrich-tracks', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ tracks, enrichment_id: enrichmentId })
-        });
-        const data = await resp.json();
-
-        // Synchronous path — all tracks were cached, results returned inline
-        if (data.success && data.tracks) {
-            return data.tracks;
-        }
-
-        // Async path — poll for progress until done
-        if (data.success && data.async) {
-            while (true) {
-                await new Promise(r => setTimeout(r, 800));
-                try {
-                    const progressResp = await fetch(`/api/beatport/enrich-progress/${enrichmentId}?_=${Date.now()}`);
-                    const progress = await progressResp.json();
-                    if (!progress.success) break;
-
-                    // Update loading overlay with live progress
-                    const overlayText = document.querySelector('#loading-overlay .loading-message');
-                    if (overlayText) {
-                        overlayText.textContent = `Fetching track metadata... (${progress.completed}/${progress.total}) ${progress.current_track || ''}`;
-                    }
-
-                    if (progress.done) {
-                        if (progress.tracks) {
-                            return progress.tracks;
-                        }
-                        console.warn('⚠️ Async enrichment failed:', progress.error);
-                        return tracks;
-                    }
-                } catch (pollErr) {
-                    console.warn('⚠️ Progress poll error:', pollErr);
-                }
-            }
-        }
-
-        console.warn('⚠️ Enrichment failed, returning original tracks');
-        return tracks;
-    } catch (e) {
-        console.warn('⚠️ Failed to enrich tracks:', e);
-        return tracks;
-    }
-}
-
-function parseBeatportDuration(raw) {
-    if (!raw) return 0;
-    if (typeof raw === 'string' && raw.includes(':')) {
-        const parts = raw.split(':');
-        return (parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10)) * 1000 || 0;
-    }
-    return (parseInt(raw, 10) || 0) * 1000;
-}
-
-function openBeatportChartAsDownloadModal(tracks, chartName, chartImage) {
-    // Note: callers already guard against double-clicks via _beatportModalOpening.
-    // Reset the flag here so the modal can open even after fast (cached) enrichment.
-    _beatportModalOpening = false;
-
-    const albumObj = {
-        id: `beatport_chart_${Date.now()}`,
-        name: chartName,
-        album_type: 'compilation',
-        images: chartImage ? [{ url: chartImage }] : [],
-        total_tracks: tracks.length
-    };
-
-    const formattedTracks = tracks.map((track, index) => {
-        // Use per-track release metadata if available (from JSON extraction)
-        const hasRelease = track.release_name && track.release_name.length > 0;
-        const trackAlbum = hasRelease ? {
-            id: `beatport_release_${track.release_id || index}`,
-            name: cleanTrackText(track.release_name),
-            album_type: 'single',
-            images: track.release_image ? [{ url: track.release_image }] : [],
-            release_date: track.release_date || '',
-            total_tracks: 1
-        } : albumObj;
-
-        // Combine title + mix_name
-        let trackName = cleanTrackText(track.title || 'Unknown Title');
-        if (track.mix_name && track.mix_name.toLowerCase() !== 'original mix') {
-            trackName = `${trackName} (${cleanTrackText(track.mix_name)})`;
-        }
-
-        // Split combined artist string into individual names for proper folder structure
-        const rawArtist = cleanTrackText(track.artist || 'Unknown Artist');
-        const artistList = rawArtist.includes(',')
-            ? rawArtist.split(',').map(a => a.trim()).filter(a => a)
-            : [rawArtist];
-
-        return {
-            id: `beatport_chart_${index}`,
-            name: trackName,
-            artists: artistList,
-            duration_ms: parseBeatportDuration(track.duration),
-            track_number: index + 1,
-            disc_number: 1,
-            album: trackAlbum
-        };
-    });
-
-    const virtualPlaylistId = `beatport_chart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-    // Compilation artist
-    const artistObj = { id: 'beatport_various', name: 'Various Artists' };
-
-    openDownloadMissingModalForArtistAlbum(
-        virtualPlaylistId,
-        chartName,
-        formattedTracks,
-        albumObj,
-        artistObj,
-        false,
-        'playlist'
-    );
-
-    // Register Beatport download bubble
-    registerBeatportDownload(chartName, chartImage, virtualPlaylistId);
-}
-
-/**
- * Handle click on individual chart card - open download modal directly
- */
-async function handleBeatportChartCardClick(cardElement, chart) {
-    console.log(`📊 Individual chart card clicked: ${chart.name} by ${chart.creator}`);
-
-    if (!chart.url || chart.url === '') {
-        showToast('No chart URL available', 'error');
-        return;
-    }
-
-    try {
-        const chartName = `${chart.name} - ${chart.creator}`;
-        showToast(`Loading ${chart.name}...`, 'info');
-        showLoadingOverlay(`Scraping ${chart.name}...`);
-
-        const response = await fetch('/api/beatport/chart/extract', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                chart_url: chart.url,
-                chart_name: `Featured Chart: ${chart.name}`,
-                limit: 100,
-                enrich: false
-            })
-        });
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error('No tracks found in this chart');
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
-        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
-
-    } catch (error) {
-        console.error(`❌ Error handling chart click for ${chart.name}:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Handle click on individual DJ chart card - open download modal directly
- */
-async function handleBeatportDJChartCardClick(cardElement, chart) {
-    console.log(`🎧 Individual DJ chart card clicked: ${chart.name} by ${chart.creator}`);
-
-    if (!chart.url || chart.url === '') {
-        showToast('No DJ chart URL available', 'error');
-        return;
-    }
-
-    try {
-        const chartName = `${chart.name} - ${chart.creator}`;
-        showToast(`Loading ${chart.name}...`, 'info');
-        showLoadingOverlay(`Scraping ${chart.name}...`);
-
-        const response = await fetch('/api/beatport/chart/extract', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                chart_url: chart.url,
-                chart_name: `DJ Chart: ${chart.name}`,
-                limit: 100,
-                enrich: false
-            })
-        });
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error('No tracks found in this DJ chart');
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} raw tracks from ${chart.name}, enriching...`);
-        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, chartName, chart.image);
-
-    } catch (error) {
-        console.error(`❌ Error handling DJ chart click for ${chart.name}:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chart.name}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Handle click on Beatport Top 100 button - open download modal directly
- */
-async function handleBeatportTop100Click() {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-    setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
-    console.log('💯 Beatport Top 100 button clicked');
-
-    try {
-        showLoadingOverlay('Scraping Beatport Top 100...');
-
-        // Fetch track list without enrichment (fast)
-        const response = await fetch('/api/beatport/top-100?enrich=false', { method: 'GET' });
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error('No tracks found in Beatport Top 100');
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
-
-        // Enrich one-by-one with live progress
-        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Beatport Top 100');
-
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, 'Beatport Top 100', null);
-
-    } catch (error) {
-        console.error('❌ Error handling Beatport Top 100 click:', error);
-        hideLoadingOverlay();
-        showToast(`Error loading Beatport Top 100: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Handle click on Hype Top 100 button - open download modal directly
- */
-async function handleHypeTop100Click() {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-    setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
-    console.log('🔥 Hype Top 100 button clicked');
-
-    try {
-        showLoadingOverlay('Scraping Hype Top 100...');
-
-        // Fetch track list without enrichment (fast)
-        const response = await fetch('/api/beatport/hype-top-100?enrich=false', { method: 'GET' });
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error('No tracks found in Hype Top 100');
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
-
-        // Enrich one-by-one with live progress
-        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, 'Hype Top 100');
-
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, 'Hype Top 100', null);
-
-    } catch (error) {
-        console.error('❌ Error handling Hype Top 100 click:', error);
-        hideLoadingOverlay();
-        showToast(`Error loading Hype Top 100: ${error.message}`, 'error');
-    }
-}
-
-// ================================= //
-// GENRE BROWSER MODAL FUNCTIONS    //
-// ================================= //
-
-// Cache for genre browser data to avoid re-loading
-let genreBrowserCache = {
-    genres: null,
-    imagesLoaded: false,
-    lastLoaded: null,
-    imageLoadingActive: false,
-    imageWorkers: null
-};
-
-function initializeGenreBrowserModal() {
-    console.log('🎵 Initializing Genre Browser Modal...');
-
-    // Browse by Genre button click handler
-    const browseByGenreBtn = document.getElementById('browse-by-genre-btn');
-    if (browseByGenreBtn) {
-        browseByGenreBtn.addEventListener('click', () => {
-            console.log('🎵 Browse by Genre button clicked');
-            openGenreBrowserModal();
-        });
-    }
-
-    // Modal close button handler
-    const modalCloseBtn = document.getElementById('genre-browser-modal-close');
-    if (modalCloseBtn) {
-        modalCloseBtn.addEventListener('click', closeGenreBrowserModal);
-    }
-
-    // Click outside modal to close
-    const modalOverlay = document.getElementById('genre-browser-modal');
-    if (modalOverlay) {
-        modalOverlay.addEventListener('click', (e) => {
-            if (e.target === modalOverlay) {
-                closeGenreBrowserModal();
-            }
-        });
-    }
-
-    // Search functionality
-    const searchInput = document.getElementById('genre-browser-search');
-    if (searchInput) {
-        searchInput.addEventListener('input', (e) => {
-            filterGenreBrowserCards(e.target.value);
-        });
-    }
-
-    // ESC key to close modal
-    document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && isGenreBrowserModalOpen()) {
-            closeGenreBrowserModal();
-        }
-    });
-
-    console.log('✅ Genre Browser Modal initialized');
-}
-
-function openGenreBrowserModal() {
-    console.log('🎵 Opening Genre Browser Modal...');
-
-    const modal = document.getElementById('genre-browser-modal');
-    if (modal) {
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // Prevent background scrolling
-
-        // Check cache before loading genres
-        if (genreBrowserCache.genres && genreBrowserCache.genres.length > 0) {
-            console.log('💾 Using cached genres data');
-            displayCachedGenres();
-        } else {
-            console.log('🔄 No cached data, loading genres...');
-            loadGenreBrowserGenres();
-        }
-
-        console.log('✅ Genre Browser Modal opened');
-    }
-}
-
-function closeGenreBrowserModal() {
-    console.log('🎵 Closing Genre Browser Modal...');
-
-    const modal = document.getElementById('genre-browser-modal');
-    if (modal) {
-        modal.classList.remove('active');
-        document.body.style.overflow = ''; // Restore scrolling
-
-        // Clear search input but keep the genre data cached
-        const searchInput = document.getElementById('genre-browser-search');
-        if (searchInput) {
-            searchInput.value = '';
-            // Also reset the display filter to show all genres
-            filterGenreBrowserCards('');
-        }
-
-        // Pause image loading workers if they're running
-        if (genreBrowserCache.imageLoadingActive) {
-            console.log('⏸️ Pausing image loading workers...');
-            genreBrowserCache.imageLoadingActive = false;
-        }
-
-        console.log('✅ Genre Browser Modal closed (data preserved in cache)');
-    }
-}
-
-function isGenreBrowserModalOpen() {
-    const modal = document.getElementById('genre-browser-modal');
-    return modal && modal.classList.contains('active');
-}
-
-async function loadGenreBrowserGenres() {
-    console.log('🔍 Loading genres for Genre Browser Modal...');
-
-    const genresGrid = document.getElementById('genre-browser-genres-grid');
-    if (!genresGrid) {
-        console.error('❌ Genre browser grid not found');
-        return;
-    }
-
-    // Show loading state
-    genresGrid.innerHTML = `
-        <div class="genre-browser-loading-container">
-            <div class="genre-browser-loading-spinner"></div>
-            <p class="genre-browser-loading-text">🔍 Discovering current Beatport genres...</p>
-        </div>
-    `;
-
-    try {
-        // First, fetch genres quickly without images
-        console.log('🚀 Fetching genres without images for fast loading...');
-        const fastResponse = await fetch('/api/beatport/genres');
-        if (!fastResponse.ok) {
-            throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
-        }
-
-        const fastData = await fastResponse.json();
-        const genres = fastData.genres || [];
-
-        if (genres.length === 0) {
-            genresGrid.innerHTML = `
-                <div class="genre-browser-loading-container">
-                    <p style="color: rgba(255, 255, 255, 0.7);">⚠️ No genres available</p>
-                    <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
-                </div>
-            `;
-            return;
-        }
-
-        // Filter out unwanted genres (section titles, etc.)
-        const filteredGenres = genres.filter(genre => {
-            const name = genre.name.toLowerCase().trim();
-            const unwantedGenres = [
-                'open format',
-                'electronic',
-                'genres',
-                'browse',
-                'charts',
-                'new releases',
-                'trending',
-                'featured',
-                'popular'
-            ];
-
-            const isUnwanted = unwantedGenres.includes(name);
-            if (isUnwanted) {
-                console.log(`🚫 Filtered out unwanted genre: "${genre.name}"`);
-            }
-            return !isUnwanted;
-        });
-
-        console.log(`📋 Filtered genres: ${genres.length} → ${filteredGenres.length} (removed ${genres.length - filteredGenres.length} unwanted)`);
-
-        // Generate genre cards dynamically (without images first)
-        const genreCardsHTML = filteredGenres.map(genre => `
-            <div class="genre-browser-card genre-browser-card-fallback"
-                 data-genre-slug="${genre.slug}"
-                 data-genre-id="${genre.id}"
-                 data-genre-name="${genre.name}"
-                 data-url="${genre.url}">
-                <div class="genre-browser-card-image">🎵</div>
-                <div class="genre-browser-card-content">
-                    <h3 class="genre-browser-card-title">${genre.name}</h3>
-                    <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
-                </div>
-            </div>
-        `).join('');
-
-        genresGrid.innerHTML = genreCardsHTML;
-
-        // Add click event listeners to genre cards
-        addGenreBrowserCardClickListeners();
-
-        // Cache the filtered genres data
-        genreBrowserCache.genres = filteredGenres;
-        genreBrowserCache.lastLoaded = new Date();
-        genreBrowserCache.imagesLoaded = false;
-
-        console.log(`✅ Loaded ${filteredGenres.length} Beatport genres for modal (fast mode)`);
-        console.log(`💾 Cached ${filteredGenres.length} genres for future use`);
-        showToast(`Loaded ${filteredGenres.length} genres for browsing`, 'success');
-
-        // Now fetch images progressively in the background
-        if (filteredGenres.length > 5) {
-            console.log('🖼️ Loading genre images progressively for modal...');
-            loadGenreBrowserImagesProgressively(filteredGenres);
-        }
-
-    } catch (error) {
-        console.error('❌ Error loading genres for modal:', error);
-        genresGrid.innerHTML = `
-            <div class="genre-browser-loading-container">
-                <p style="color: rgba(255, 255, 255, 0.7);">❌ Failed to load genres: ${error.message}</p>
-                <button onclick="loadGenreBrowserGenres()" style="margin-top: 10px; padding: 10px 20px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 20, 20, 0.8); color: white; border-radius: 8px; cursor: pointer;">🔄 Retry</button>
-            </div>
-        `;
-        showToast(`Error loading genres: ${error.message}`, 'error');
-    }
-}
-
-function displayCachedGenres() {
-    console.log('💾 Displaying cached genres...');
-
-    const genresGrid = document.getElementById('genre-browser-genres-grid');
-    if (!genresGrid) {
-        console.error('❌ Genre browser grid not found');
-        return;
-    }
-
-    const genres = genreBrowserCache.genres;
-    if (!genres || genres.length === 0) {
-        console.error('❌ No cached genres available');
-        return;
-    }
-
-    // Generate genre cards from cached data
-    const genreCardsHTML = genres.map(genre => `
-        <div class="genre-browser-card genre-browser-card-fallback"
-             data-genre-slug="${genre.slug}"
-             data-genre-id="${genre.id}"
-             data-genre-name="${genre.name}"
-             data-url="${genre.url}">
-            <div class="genre-browser-card-image">🎵</div>
-            <div class="genre-browser-card-content">
-                <h3 class="genre-browser-card-title">${genre.name}</h3>
-                <p class="genre-browser-card-subtitle">Top 10 & Top 100 Charts</p>
-            </div>
-        </div>
-    `).join('');
-
-    genresGrid.innerHTML = genreCardsHTML;
-
-    // Add click event listeners to genre cards
-    addGenreBrowserCardClickListeners();
-
-    console.log(`✅ Displayed ${genres.length} cached genres instantly`);
-
-    // Handle image loading based on current state
-    if (genreBrowserCache.imagesLoaded) {
-        console.log('🖼️ Images already loaded, restoring them...');
-        restoreCachedImages(genres);
-    } else if (!genreBrowserCache.imageLoadingActive && genres.length > 5) {
-        // Resume or start image loading
-        const cachedCount = genres.filter(g => g.imageUrl).length;
-        if (cachedCount > 0) {
-            console.log(`🔄 Resuming image loading (${cachedCount}/${genres.length} already cached)...`);
-            restoreCachedImages(genres); // Show already cached images
-        } else {
-            console.log('🖼️ Starting fresh image loading for cached genres...');
-        }
-        loadGenreBrowserImagesProgressively(genres);
-    } else {
-        console.log('📷 Image loading in progress, showing cached images...');
-        restoreCachedImages(genres);
-    }
-}
-
-function restoreCachedImages(genres) {
-    // Restore images that were already loaded in previous sessions
-    genres.forEach(genre => {
-        if (genre.imageUrl) {
-            const genreCard = document.querySelector(
-                `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
-            );
-
-            if (genreCard) {
-                const imageElement = genreCard.querySelector('.genre-browser-card-image');
-                if (imageElement) {
-                    imageElement.innerHTML = `<img src="${genre.imageUrl}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
-                    genreCard.classList.remove('genre-browser-card-fallback');
-                }
-            }
-        }
-    });
-}
-
-async function loadGenreBrowserImagesProgressively(genres) {
-    // Load genre images with 2 concurrent workers for faster loading
-    // Only process genres that don't already have cached images
-    const imageQueue = genres.filter(genre => !genre.imageUrl);
-    let imagesLoaded = 0;
-    const maxWorkers = 2;
-
-    // Mark loading as active
-    genreBrowserCache.imageLoadingActive = true;
-
-    console.log(`🖼️ Starting progressive image loading for modal with ${maxWorkers} workers for ${imageQueue.length} remaining genres (${genres.length - imageQueue.length} already cached)`);
-
-    // If all images are already cached, mark as complete
-    if (imageQueue.length === 0) {
-        console.log('✅ All images already cached, marking as complete');
-        genreBrowserCache.imagesLoaded = true;
-        genreBrowserCache.imageLoadingActive = false;
-        return;
-    }
-
-    // Function to process a single image
-    async function processImage(genre) {
-        try {
-            // Fetch individual genre image from backend
-            const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);
-
-            if (response.ok) {
-                const data = await response.json();
-
-                if (data.success && data.image_url) {
-                    // Cache the image URL in the genre object
-                    genre.imageUrl = data.image_url;
-
-                    // Find the genre card in the modal
-                    const genreCard = document.querySelector(
-                        `.genre-browser-card[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
-                    );
-
-                    if (genreCard) {
-                        const imageElement = genreCard.querySelector('.genre-browser-card-image');
-                        if (imageElement) {
-                            // Replace the fallback emoji with the actual image
-                            imageElement.innerHTML = `<img src="${data.image_url}" alt="${genre.name}" loading="lazy" style="width: 100%; height: 100%; object-fit: cover;">`;
-                            genreCard.classList.remove('genre-browser-card-fallback');
-
-                            console.log(`✅ Loaded and cached image for ${genre.name} in modal`);
-                        }
-                    }
-                }
-            }
-
-            imagesLoaded++;
-            console.log(`📷 Progress: ${imagesLoaded}/${genres.length} images loaded for modal`);
-
-        } catch (error) {
-            console.log(`⚠️ Could not load image for ${genre.name} in modal: ${error.message}`);
-            imagesLoaded++;
-        }
-    }
-
-    // Worker function to process images from the queue
-    async function worker() {
-        while (imageQueue.length > 0 && genreBrowserCache.imageLoadingActive) {
-            const genre = imageQueue.shift();
-            if (genre) {
-                await processImage(genre);
-                // Small delay to prevent overwhelming the server
-                await new Promise(resolve => setTimeout(resolve, 100));
-            }
-
-            // Check if we should pause
-            if (!genreBrowserCache.imageLoadingActive) {
-                console.log('⏸️ Worker paused - modal closed');
-                break;
-            }
-        }
-    }
-
-    // Start the workers
-    const workers = [];
-    for (let i = 0; i < maxWorkers; i++) {
-        workers.push(worker());
-    }
-
-    // Wait for all workers to complete
-    await Promise.all(workers);
-
-    // Check if loading was completed or paused
-    if (genreBrowserCache.imageLoadingActive) {
-        // Completed successfully
-        genreBrowserCache.imagesLoaded = true;
-        genreBrowserCache.imageLoadingActive = false;
-        console.log(`🎉 Completed loading all genre images for modal (${imagesLoaded}/${genres.length})`);
-        console.log(`💾 Marked images as loaded in cache`);
-    } else {
-        // Was paused
-        console.log(`⏸️ Image loading paused (${imagesLoaded}/${genres.length} completed)`);
-        console.log(`💾 Partial progress saved in cache`);
-    }
-}
-
-function filterGenreBrowserCards(searchTerm) {
-    const genreCards = document.querySelectorAll('.genre-browser-card');
-    const searchLower = searchTerm.toLowerCase();
-
-    genreCards.forEach(card => {
-        const genreName = card.dataset.genreName?.toLowerCase() || '';
-        const shouldShow = genreName.includes(searchLower);
-
-        card.style.display = shouldShow ? 'block' : 'none';
-    });
-
-    console.log(`🔍 Filtered genre cards with search term: "${searchTerm}"`);
-}
-
-// === GENRE BROWSER CARD CLICK HANDLERS ===
-
-function addGenreBrowserCardClickListeners() {
-    const genreCards = document.querySelectorAll('.genre-browser-card');
-    genreCards.forEach(card => {
-        card.addEventListener('click', () => {
-            const genreSlug = card.dataset.genreSlug;
-            const genreId = card.dataset.genreId;
-            const genreName = card.dataset.genreName;
-
-            console.log(`🎵 Genre card clicked: ${genreName} (${genreSlug})`);
-            handleGenreBrowserCardClick(genreSlug, genreId, genreName);
-        });
-    });
-
-    console.log(`🔗 Added click listeners to ${genreCards.length} genre browser cards`);
-}
-
-async function handleGenreBrowserCardClick(genreSlug, genreId, genreName) {
-    console.log(`🎠 Loading hero slider for ${genreName}...`);
-
-    try {
-        // Show the genre page view
-        showGenrePageView(genreSlug, genreId, genreName);
-
-        // Load the hero slider data
-        // Load hero slider, Top 10 lists, and Top 10 releases in parallel
-        await Promise.all([
-            loadGenreHeroSlider(genreSlug, genreId, genreName),
-            loadGenreTop10Lists(genreSlug, genreId, genreName),
-            loadGenreTop10Releases(genreSlug, genreId, genreName)
-        ]);
-
-    } catch (error) {
-        console.error(`❌ Error loading genre page for ${genreName}:`, error);
-        showToast(`Error loading ${genreName}: ${error.message}`, 'error');
-
-        // Return to genre list on error
-        showGenreListView();
-    }
-}
-
-function showGenrePageView(genreSlug, genreId, genreName) {
-    console.log(`🎯 Showing genre page view for ${genreName}`);
-
-    // CRITICAL: Stop all other slider auto-play to prevent conflicts
-    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
-        clearInterval(beatportRebuildSliderState.autoPlayInterval);
-        console.log('🛑 Stopped main slider auto-play to prevent conflicts');
-    }
-
-    const modal = document.getElementById('genre-browser-modal');
-    if (!modal) return;
-
-    // Hide genre list elements
-    const searchSection = modal.querySelector('.genre-browser-search-section');
-    const genresSection = modal.querySelector('.genre-browser-genres-section');
-
-    if (searchSection) searchSection.style.display = 'none';
-    if (genresSection) genresSection.style.display = 'none';
-
-    // Create or show genre page content
-    let genrePageContent = modal.querySelector('.genre-page-content');
-    if (!genrePageContent) {
-        genrePageContent = document.createElement('div');
-        genrePageContent.className = 'genre-page-content';
-        genrePageContent.innerHTML = `
-            <div class="genre-page-header">
-                <button class="genre-back-button" id="genre-back-button">
-                    <span class="back-icon">←</span> Back to Genres
-                </button>
-                <h2 class="genre-page-title"></h2>
-            </div>
-            <div class="genre-hero-slider-container" id="genre-hero-slider-container">
-                <div class="genre-loading-container">
-                    <div class="genre-loading-spinner"></div>
-                    <p class="genre-loading-text">🎠 Loading hero releases...</p>
-                </div>
-            </div>
-            <div class="genre-nav-buttons-section">
-                <div class="genre-nav-buttons-container">
-                    <button class="beatport-nav-button" id="genre-top100-btn">
-                        <span class="beatport-nav-icon top100-icon"></span>
-                        <span class="beatport-nav-text">Beatport Top 100</span>
-                    </button>
-                </div>
-            </div>
-            <div class="genre-top10-lists-container" id="genre-top10-lists-container">
-                <div class="genre-top10-loading-container">
-                    <div class="genre-loading-spinner"></div>
-                    <p class="genre-loading-text">🎵 Loading Top 10 lists...</p>
-                </div>
-            </div>
-            <div class="genre-top10-releases-container" id="genre-top10-releases-container">
-                <div class="genre-top10-releases-loading-container">
-                    <div class="genre-loading-spinner"></div>
-                    <p class="genre-loading-text">💿 Loading Top 10 releases...</p>
-                </div>
-            </div>
-        `;
-
-        modal.querySelector('.genre-browser-modal-content').appendChild(genrePageContent);
-
-        // Add back button listener
-        const backButton = genrePageContent.querySelector('#genre-back-button');
-        if (backButton) {
-            backButton.addEventListener('click', showGenreListView);
-        }
-
-        // Add genre top 100 button listener
-        const genreTop100Button = genrePageContent.querySelector('#genre-top100-btn');
-        if (genreTop100Button) {
-            genreTop100Button.addEventListener('click', () => {
-                handleGenreTop100Click(genreSlug, genreId, genreName);
-            });
-        }
-    }
-
-    // Update title and show genre page
-    const titleElement = genrePageContent.querySelector('.genre-page-title');
-    if (titleElement) titleElement.textContent = genreName;
-
-    genrePageContent.style.display = 'block';
-
-    // Store current genre info for potential back navigation
-    genrePageContent.dataset.genreSlug = genreSlug;
-    genrePageContent.dataset.genreId = genreId;
-    genrePageContent.dataset.genreName = genreName;
-}
-
-function showGenreListView() {
-    console.log(`🔙 Returning to genre list view`);
-
-    // Clean up genre hero slider
-    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
-        clearInterval(window.genreHeroSliderState.autoPlayInterval);
-        console.log('🧹 Cleaned up genre hero slider auto-play');
-    }
-
-    // CRITICAL: Restart main slider auto-play
-    if (typeof beatportRebuildSliderState !== 'undefined' && !beatportRebuildSliderState.autoPlayInterval) {
-        if (typeof startBeatportRebuildSliderAutoPlay === 'function') {
-            startBeatportRebuildSliderAutoPlay();
-            console.log('🔄 Restarted main slider auto-play');
-        }
-    }
-
-    const modal = document.getElementById('genre-browser-modal');
-    if (!modal) return;
-
-    // Show genre list elements
-    const searchSection = modal.querySelector('.genre-browser-search-section');
-    const genresSection = modal.querySelector('.genre-browser-genres-section');
-    const genrePageContent = modal.querySelector('.genre-page-content');
-
-    if (searchSection) searchSection.style.display = 'block';
-    if (genresSection) genresSection.style.display = 'block';
-    if (genrePageContent) genrePageContent.style.display = 'none';
-}
-
-async function loadGenreHeroSlider(genreSlug, genreId, genreName) {
-    console.log(`🎠 Loading hero slider data for ${genreName}...`);
-
-    const container = document.getElementById('genre-hero-slider-container');
-    if (!container) return;
-
-    try {
-        // Show loading state
-        container.innerHTML = `
-            <div class="genre-loading-container">
-                <div class="genre-loading-spinner"></div>
-                <p class="genre-loading-text">🎠 Loading ${genreName} hero releases...</p>
-            </div>
-        `;
-
-        // Fetch hero slider data from API
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/hero`);
-        if (!response.ok) {
-            throw new Error(`API returned ${response.status}: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        if (!data.success || !data.releases || data.releases.length === 0) {
-            throw new Error(data.message || 'No hero releases found');
-        }
-
-        console.log(`✅ Loaded ${data.count} hero releases for ${genreName} (cached: ${data.cached})`);
-
-        // Create hero slider HTML
-        const heroSliderHTML = createGenreHeroSliderHTML(data.releases, genreName);
-        container.innerHTML = heroSliderHTML;
-
-        // Add click handlers to individual releases (for future download functionality)
-        addGenreHeroReleaseClickHandlers(data.releases);
-
-        showToast(`Loaded ${data.count} ${genreName} releases`, 'success');
-
-    } catch (error) {
-        console.error(`❌ Error loading hero slider for ${genreName}:`, error);
-
-        container.innerHTML = `
-            <div class="genre-error-container">
-                <p class="genre-error-text">❌ Failed to load ${genreName} releases</p>
-                <p class="genre-error-details">${error.message}</p>
-                <button class="genre-retry-button" onclick="loadGenreHeroSlider('${genreSlug}', '${genreId}', '${genreName}')">
-                    🔄 Retry
-                </button>
-            </div>
-        `;
-
-        throw error;
-    }
-}
-
-function createGenreHeroSliderHTML(releases, genreName) {
-    const slidesHTML = releases.map((release, index) => {
-        // Convert relative URL to absolute URL
-        const absoluteUrl = release.url.startsWith('http')
-            ? release.url
-            : `https://www.beatport.com${release.url}`;
-
-        return `
-        <div class="beatport-rebuild-slide ${index === 0 ? 'active' : ''}"
-             data-slide="${index}"
-             data-url="${absoluteUrl}"
-             data-image="${release.image_url}"
-             style="--slide-bg-image: url('${release.image_url}')">
-            <div class="beatport-rebuild-slide-background">
-                <div class="beatport-rebuild-slide-gradient"></div>
-            </div>
-            <div class="beatport-rebuild-slide-content">
-                <div class="beatport-rebuild-track-info">
-                    <h2 class="beatport-rebuild-track-title">${release.title}</h2>
-                    <p class="beatport-rebuild-artist-name">${release.artists_string}</p>
-                    <p class="beatport-rebuild-album-name">${release.label || genreName + ' Hero Release'}</p>
-                </div>
-            </div>
-        </div>`;
-    }).join('');
-
-    const indicatorsHTML = releases.map((_, index) => `
-        <button class="beatport-rebuild-indicator ${index === 0 ? 'active' : ''}" data-slide="${index}"></button>
-    `).join('');
-
-    return `
-        <div class="beatport-rebuild-slider-container">
-            <div class="beatport-rebuild-slider" id="genre-hero-slider">
-                <div class="beatport-rebuild-slider-track" id="genre-hero-slider-track">
-                    ${slidesHTML}
-                </div>
-
-                <!-- Slider Navigation -->
-                <div class="beatport-rebuild-slider-nav">
-                    <button class="beatport-rebuild-nav-btn beatport-rebuild-prev-btn" id="genre-hero-prev-btn">‹</button>
-                    <button class="beatport-rebuild-nav-btn beatport-rebuild-next-btn" id="genre-hero-next-btn">›</button>
-                </div>
-
-                <!-- Slider Indicators -->
-                <div class="beatport-rebuild-slider-indicators">
-                    ${indicatorsHTML}
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-function addGenreHeroReleaseClickHandlers(releases) {
-    // Clear any existing intervals first
-    if (window.genreHeroSliderState && window.genreHeroSliderState.autoPlayInterval) {
-        clearInterval(window.genreHeroSliderState.autoPlayInterval);
-        console.log('🧹 Cleared previous genre hero auto-play interval');
-    }
-
-    // CRITICAL: Clear ALL possible conflicting intervals
-    if (typeof beatportRebuildSliderState !== 'undefined' && beatportRebuildSliderState.autoPlayInterval) {
-        clearInterval(beatportRebuildSliderState.autoPlayInterval);
-        console.log('🛑 Cleared main rebuild slider auto-play interval');
-    }
-
-    // Initialize global slider state for genre hero slider
-    window.genreHeroSliderState = {
-        currentSlide: 0,
-        totalSlides: releases.length,
-        autoPlayInterval: null
-    };
-
-    console.log(`🎠 Initializing genre hero slider with ${releases.length} slides`);
-
-    // Set up navigation button handlers
-    const prevBtn = document.getElementById('genre-hero-prev-btn');
-    const nextBtn = document.getElementById('genre-hero-next-btn');
-
-    if (prevBtn) {
-        prevBtn.addEventListener('click', () => {
-            window.genreHeroSliderState.currentSlide = window.genreHeroSliderState.currentSlide > 0
-                ? window.genreHeroSliderState.currentSlide - 1
-                : window.genreHeroSliderState.totalSlides - 1;
-            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
-            console.log(`⬅️ Previous: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
-        });
-    }
-
-    if (nextBtn) {
-        nextBtn.addEventListener('click', () => {
-            window.genreHeroSliderState.currentSlide = (window.genreHeroSliderState.currentSlide + 1) % window.genreHeroSliderState.totalSlides;
-            updateGenreHeroSlide(window.genreHeroSliderState.currentSlide);
-            console.log(`➡️ Next: Moving to slide ${window.genreHeroSliderState.currentSlide}`);
-        });
-    }
-
-    // Set up indicator handlers
-    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.addEventListener('click', () => {
-            window.genreHeroSliderState.currentSlide = index;
-            updateGenreHeroSlide(index);
-            console.log(`🎯 Indicator: Jumping to slide ${index}`);
-        });
-    });
-
-    // Set up individual slide click handlers (like the main hero slider)
-    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide[data-url]');
-    console.log(`🔗 Found ${slides.length} slides to set up click handlers for`);
-
-    slides.forEach((slide, index) => {
-        const releaseUrl = slide.getAttribute('data-url');
-        if (releaseUrl && releaseUrl !== '#' && releaseUrl !== '') {
-            const release = releases[index];
-            if (release) {
-                // Ensure we use the absolute URL and match the expected data structure
-                const releaseData = {
-                    url: releaseUrl, // This is already the absolute URL from data-url
-                    title: release.title || 'Unknown Title',
-                    artist: release.artists_string || 'Unknown Artist', // handleBeatportReleaseCardClick expects 'artist'
-                    label: release.label || 'Unknown Label',
-                    image_url: release.image_url || '',
-                    // Include all original data for completeness
-                    artists_string: release.artists_string,
-                    type: release.type,
-                    source: release.source,
-                    badges: release.badges || []
-                };
-
-                slide.addEventListener('click', async (event) => {
-                    // Prevent navigation button clicks from triggering this
-                    if (event.target.closest('.beatport-rebuild-nav-btn') ||
-                        event.target.closest('.beatport-rebuild-indicator')) {
-                        return;
-                    }
-
-                    console.log(`🎵 Genre hero slide clicked: ${releaseData.title} by ${releaseData.artist}`);
-
-                    // Use the exact same functionality as the main hero slider
-                    await handleBeatportReleaseCardClick(slide, releaseData);
-                });
-
-                slide.style.cursor = 'pointer';
-            }
-        }
-    });
-
-    // Ensure first slide is active BEFORE starting auto-play
-    updateGenreHeroSlide(0);
-
-    // Delay auto-play start to let DOM settle
-    setTimeout(() => {
-        startGenreHeroSliderAutoPlay();
-    }, 100);
-
-    // Pause on hover
-    const sliderContainer = document.querySelector('#genre-hero-slider');
-    if (sliderContainer) {
-        sliderContainer.addEventListener('mouseenter', () => {
-            if (window.genreHeroSliderState.autoPlayInterval) {
-                clearInterval(window.genreHeroSliderState.autoPlayInterval);
-                console.log('⏸️ Paused auto-play on hover');
-            }
-        });
-
-        sliderContainer.addEventListener('mouseleave', () => {
-            // Delay restart to avoid rapid state changes
-            setTimeout(() => {
-                startGenreHeroSliderAutoPlay();
-            }, 100);
-            console.log('▶️ Resumed auto-play after hover');
-        });
-    }
-
-    console.log(`✅ Set up slider functionality for ${releases.length} genre hero releases`);
-}
-
-function updateGenreHeroSlide(slideIndex) {
-    if (!window.genreHeroSliderState) {
-        console.error('❌ Genre hero slider state not initialized');
-        return;
-    }
-
-    // First update the state
-    window.genreHeroSliderState.currentSlide = slideIndex;
-
-    // Update slide visibility - use the exact same logic as main slider
-    const slides = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-slide');
-    console.log(`🔄 Updating slide to index ${slideIndex}, found ${slides.length} slides`);
-
-    if (slideIndex >= slides.length || slideIndex < 0) {
-        console.error(`❌ Invalid slide index ${slideIndex}, max is ${slides.length - 1}`);
-        return;
-    }
-
-    slides.forEach((slide, index) => {
-        slide.classList.remove('active', 'prev', 'next');
-
-        if (index === slideIndex) {
-            slide.classList.add('active');
-            console.log(`✅ Activated slide ${index}: ${slide.getAttribute('data-slide')} - Title: ${slide.querySelector('.beatport-rebuild-track-title')?.textContent}`);
-        } else if (index < slideIndex) {
-            slide.classList.add('prev');
-        } else {
-            slide.classList.add('next');
-        }
-    });
-
-    // Update indicators
-    const indicators = document.querySelectorAll('#genre-hero-slider .beatport-rebuild-indicator');
-    indicators.forEach((indicator, index) => {
-        indicator.classList.toggle('active', index === slideIndex);
-    });
-
-    console.log(`Genre slide updated to: ${window.genreHeroSliderState.currentSlide}`);
-}
-
-function startGenreHeroSliderAutoPlay() {
-    if (!window.genreHeroSliderState) {
-        console.error('❌ Cannot start auto-play: Genre hero slider state not initialized');
-        return;
-    }
-
-    // Clear any existing intervals first
-    if (window.genreHeroSliderState.autoPlayInterval) {
-        clearInterval(window.genreHeroSliderState.autoPlayInterval);
-        console.log('🧹 Cleared existing auto-play interval');
-    }
-
-    window.genreHeroSliderState.autoPlayInterval = setInterval(() => {
-        if (!window.genreHeroSliderState) {
-            console.error('❌ Auto-play fired but state is gone, clearing interval');
-            clearInterval(window.genreHeroSliderState.autoPlayInterval);
-            return;
-        }
-
-        const currentSlide = window.genreHeroSliderState.currentSlide;
-        const totalSlides = window.genreHeroSliderState.totalSlides;
-        const nextSlide = (currentSlide + 1) % totalSlides;
-
-        console.log(`⏰ Auto-play: Current=${currentSlide}, Total=${totalSlides}, Next=${nextSlide}`);
-
-        // Validate the next slide index
-        if (nextSlide >= 0 && nextSlide < totalSlides) {
-            updateGenreHeroSlide(nextSlide);
-        } else {
-            console.error(`❌ Invalid nextSlide calculated: ${nextSlide}, resetting to 0`);
-            updateGenreHeroSlide(0);
-        }
-    }, 5000); // 5 second intervals like the main slider
-
-    console.log(`▶️ Started auto-play for genre hero slider (${window.genreHeroSliderState.totalSlides} slides)`);
-}
-
-/**
- * Load Top 10 lists for a specific genre (Beatport + Hype)
- */
-async function loadGenreTop10Lists(genreSlug, genreId, genreName) {
-    console.log(`🎵 Loading Top 10 lists for ${genreName}...`);
-
-    const container = document.getElementById('genre-top10-lists-container');
-    if (!container) {
-        console.error('❌ Genre Top 10 lists container not found');
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-lists`);
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to load Top 10 lists');
-        }
-
-        console.log(`✅ Loaded ${data.beatport_count} Beatport + ${data.hype_count} Hype Top 10 tracks for ${genreName}`);
-
-        // Generate HTML using exact same structure as main page (but unique IDs)
-        const top10ListsHTML = createGenreTop10ListsHTML(data, genreName);
-        container.innerHTML = top10ListsHTML;
-
-        // Add container-level click handlers exactly like main page
-        addGenreTop10ClickHandlers();
-
-        console.log(`✅ Successfully populated genre Top 10 lists for ${genreName}`);
-
-    } catch (error) {
-        console.error(`❌ Error loading Top 10 lists for ${genreName}:`, error);
-
-        // Show error state
-        container.innerHTML = `
-            <div class="genre-top10-error">
-                <h3>❌ Error Loading Top 10 Lists</h3>
-                <p>Could not load Top 10 tracks for ${genreName}</p>
-                <p class="error-detail">${error.message}</p>
-            </div>
-        `;
-    }
-}
-
-/**
- * Create HTML for genre Top 10 lists (exact structure as main page, unique IDs)
- */
-function createGenreTop10ListsHTML(data, genreName) {
-    const { beatport_top10, hype_top10, has_hype_section } = data;
-
-    // Use exact same structure as main page but with genre-specific IDs
-    let html = `
-        <div class="beatport-top10-section">
-            <div class="beatport-top10-header">
-                <h2 class="beatport-top10-title">🏆 ${genreName} Top 10 Lists</h2>
-                <p class="beatport-top10-subtitle">Current trending ${genreName.toLowerCase()} tracks</p>
-            </div>
-
-            <div class="beatport-top10-container"${!has_hype_section ? ' style="grid-template-columns: 1fr; justify-items: center; max-width: 700px;"' : ''}>
-                <!-- Beatport Top 10 List (same classes, unique ID) -->
-                <div class="beatport-top10-list" id="genre-beatport-top10-list">
-                    <div class="beatport-top10-list-header">
-                        <h3 class="beatport-top10-list-title">🎵 Beatport Top 10</h3>
-                        <p class="beatport-top10-list-subtitle">Most popular ${genreName.toLowerCase()} tracks</p>
-                    </div>
-                    <div class="beatport-top10-tracks">
-    `;
-
-    // Add Beatport Top 10 tracks (same classes as main page)
-    beatport_top10.forEach((track, index) => {
-        const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
-        const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
-        const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
-
-        html += `
-            <div class="beatport-top10-card" data-url="${track.url || '#'}">
-                <div class="beatport-top10-card-rank">${track.rank || index + 1}</div>
-                <div class="beatport-top10-card-artwork">
-                    ${track.artwork_url ?
-                `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
-                '<div class="beatport-top10-card-placeholder">🎵</div>'
-            }
-                </div>
-                <div class="beatport-top10-card-info">
-                    <h4 class="beatport-top10-card-title">${cleanTitle}</h4>
-                    <p class="beatport-top10-card-artist">${cleanArtist}</p>
-                    <p class="beatport-top10-card-label">${cleanLabel}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    html += `
-                    </div>
-                </div>
-    `;
-
-    // Add Hype Top 10 section (same classes, unique ID)
-    if (has_hype_section && hype_top10.length > 0) {
-        html += `
-                <!-- Hype Top 10 List (same classes, unique ID) -->
-                <div class="beatport-hype10-list" id="genre-beatport-hype10-list">
-                    <div class="beatport-hype10-list-header">
-                        <h3 class="beatport-hype10-list-title">🔥 Hype Top 10</h3>
-                        <p class="beatport-hype10-list-subtitle">Editor's trending ${genreName.toLowerCase()} picks</p>
-                    </div>
-                    <div class="beatport-hype10-tracks">
-        `;
-
-        // Add Hype Top 10 tracks (same classes as main page)
-        hype_top10.forEach((track, index) => {
-            const cleanTitle = cleanTrackText(track.title || 'Unknown Title');
-            const cleanArtist = cleanTrackText(track.artist || 'Unknown Artist');
-            const cleanLabel = cleanTrackText(track.label || 'Unknown Label');
-
-            html += `
-                <div class="beatport-hype10-card" data-url="${track.url || '#'}">
-                    <div class="beatport-hype10-card-rank">${track.rank || index + 1}</div>
-                    <div class="beatport-hype10-card-artwork">
-                        ${track.artwork_url ?
-                    `<img src="${track.artwork_url}" alt="${cleanTitle}" loading="lazy">` :
-                    '<div class="beatport-hype10-card-placeholder">🔥</div>'
-                }
-                    </div>
-                    <div class="beatport-hype10-card-info">
-                        <h4 class="beatport-hype10-card-title">${cleanTitle}</h4>
-                        <p class="beatport-hype10-card-artist">${cleanArtist}</p>
-                        <p class="beatport-hype10-card-label">${cleanLabel}</p>
-                    </div>
-                </div>
-            `;
-        });
-
-        html += `
-                    </div>
-                </div>
-        `;
-    }
-    // No else block - completely hide hype section when no hype tracks available
-
-    html += `
-            </div>
-        </div>
-    `;
-
-    return html;
-}
-
-/**
- * Add container-level click handlers for genre Top 10 lists (exact parity with main page)
- */
-function addGenreTop10ClickHandlers() {
-    console.log('🔗 Adding container-level click handlers for genre Top 10 lists...');
-
-    // Add container-level click handler for Beatport Top 10 (exact match to main page)
-    const beatportContainer = document.getElementById('genre-beatport-top10-list');
-    if (beatportContainer) {
-        beatportContainer.addEventListener('click', () => {
-            console.log('🎵 Genre Beatport Top 10 container clicked');
-            handleGenreBeatportTop10Click();
-        });
-        console.log('✅ Added Beatport Top 10 container click handler');
-    }
-
-    // Add container-level click handler for Hype Top 10 (exact match to main page)
-    const hypeContainer = document.getElementById('genre-beatport-hype10-list');
-    if (hypeContainer) {
-        hypeContainer.addEventListener('click', () => {
-            console.log('🔥 Genre Hype Top 10 container clicked');
-            handleGenreHypeTop10Click();
-        });
-        console.log('✅ Added Hype Top 10 container click handler');
-    }
-
-    console.log(`✅ Set up container-level click handlers for genre Top 10 lists`);
-}
-
-/**
- * Handle genre Beatport Top 10 container click (exact parity with main page)
- */
-async function handleGenreBeatportTop10Click() {
-    console.log('🎵 Handling Genre Beatport Top 10 click');
-
-    // Get the actual genre name from the page title
-    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
-
-    // Use actual genre name in chart title
-    await handleGenreChartClick('genre_beatport_top10', `${genreName} Beatport Top 10`, 'genre_beatport_top10');
-}
-
-/**
- * Handle genre Hype Top 10 container click (exact parity with main page)
- */
-async function handleGenreHypeTop10Click() {
-    console.log('🔥 Handling Genre Hype Top 10 click');
-
-    // Get the actual genre name from the page title
-    const genreName = document.querySelector('.genre-page-title')?.textContent?.trim() || 'Genre';
-
-    // Use actual genre name in chart title
-    await handleGenreChartClick('genre_hype_top10', `${genreName} Hype Top 10`, 'genre_hype_top10');
-}
-
-/**
- * Handle genre chart click (based on main page handleRebuildChartClick)
- */
-async function handleGenreChartClick(trackDataKey, chartName, chartType) {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-    setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
-    try {
-        // Extract track data from DOM cards
-        const trackData = await getGenrePageTrackData(trackDataKey);
-        if (!trackData || trackData.length === 0) {
-            throw new Error(`No track data found for ${chartName}`);
-        }
-
-        console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
-        showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
-
-        const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
-
-        console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
-    } catch (error) {
-        hideLoadingOverlay();
-        console.error(`❌ Error handling ${chartName} click:`, error);
-        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Extract track data from genre page DOM (based on main page getRebuildPageTrackData)
- */
-async function getGenrePageTrackData(trackDataKey) {
-    console.log(`🔍 Extracting ${trackDataKey} data from genre page DOM`);
-
-    let containerSelector, cardSelector;
-    if (trackDataKey === 'genre_beatport_top10') {
-        containerSelector = '#genre-beatport-top10-list';
-        cardSelector = '.beatport-top10-card[data-url]';
-    } else if (trackDataKey === 'genre_hype_top10') {
-        containerSelector = '#genre-beatport-hype10-list';
-        cardSelector = '.beatport-hype10-card[data-url]';
-    } else {
-        throw new Error(`Unknown track data key: ${trackDataKey}`);
-    }
-
-    const container = document.querySelector(containerSelector);
-    if (!container) {
-        throw new Error(`Container ${containerSelector} not found`);
-    }
-
-    const trackCards = container.querySelectorAll(cardSelector);
-    if (trackCards.length === 0) {
-        throw new Error(`No track cards found in ${containerSelector}`);
-    }
-
-    // Extract track data from DOM cards (exact same pattern as main page)
-    const tracks = Array.from(trackCards).map(card => {
-        const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
-        const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
-        const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
-        const url = card.getAttribute('data-url') || '';
-        const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
-
-        return {
-            title: title,
-            artist: artist,
-            label: label,
-            url: url,
-            rank: rank
-        };
-    });
-
-    console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
-    return tracks;
-}
-
-/**
- * Handle genre-specific Top 100 button click - create discovery process for genre top 100 tracks
- */
-async function handleGenreTop100Click(genreSlug, genreId, genreName) {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-    setTimeout(() => { _beatportModalOpening = false; }, 2000);
-
-    console.log(`💯 Genre Top 100 button clicked for ${genreName}`);
-
-    const chartName = `${genreName} Top 100`;
-
-    try {
-        showLoadingOverlay(`Scraping ${chartName}...`);
-
-        // Use the genre tracks endpoint without enrichment
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/tracks?enrich=false`, { method: 'GET' });
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(`No tracks found in ${chartName}`);
-        }
-
-        console.log(`✅ Fetched ${data.tracks.length} tracks, enriching one-by-one...`);
-
-        // Enrich one-by-one with live progress
-        const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
-
-        hideLoadingOverlay();
-        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
-
-    } catch (error) {
-        console.error(`❌ Error handling ${chartName} click:`, error);
-        hideLoadingOverlay();
-        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Load Top 10 releases for a specific genre
- */
-async function loadGenreTop10Releases(genreSlug, genreId, genreName) {
-    console.log(`💿 Loading Top 10 releases for ${genreName}...`);
-
-    const container = document.getElementById('genre-top10-releases-container');
-    if (!container) {
-        console.error('❌ Genre Top 10 releases container not found');
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/top-10-releases`);
-        const data = await response.json();
-
-        if (!data.success) {
-            throw new Error(data.error || 'Failed to load Top 10 releases');
-        }
-
-        console.log(`💿 Loaded ${data.releases.length} Top 10 releases for ${genreName}`);
-        createGenreTop10ReleasesHTML(data.releases, genreName);
-
-    } catch (error) {
-        console.error(`❌ Error loading Top 10 releases for ${genreName}:`, error);
-        showGenreTop10ReleasesError(error.message || 'Failed to load Top 10 releases');
-    }
-}
-
-/**
- * Create HTML for genre Top 10 releases section (exact parity with main page)
- */
-function createGenreTop10ReleasesHTML(releases, genreName) {
-    const container = document.getElementById('genre-top10-releases-container');
-    if (!container || !releases || releases.length === 0) return;
-
-    // Create section with unique ID but exact same structure as main page
-    const sectionHtml = `
-        <div class="beatport-releases-top10-section">
-            <div class="beatport-releases-top10-header">
-                <h2 class="beatport-releases-top10-title">💿 Top 10 ${genreName} Releases</h2>
-                <p class="beatport-releases-top10-subtitle">Most popular albums and EPs for ${genreName}</p>
-            </div>
-            <div class="beatport-releases-top10-container">
-                <div class="beatport-releases-top10-list" id="genre-beatport-releases-top10-list">
-                    ${createGenreTop10ReleasesCardsHTML(releases)}
-                </div>
-            </div>
-        </div>
-    `;
-
-    container.innerHTML = sectionHtml;
-
-    // Add background images and click handlers
-    addGenreTop10ReleasesInteractivity(releases);
-}
-
-/**
- * Create release cards HTML for genre Top 10 releases
- */
-function createGenreTop10ReleasesCardsHTML(releases) {
-    let cardsHtml = '<div class="beatport-releases-top10-tracks">';
-
-    releases.forEach((release, index) => {
-        cardsHtml += `
-            <div class="beatport-releases-top10-card" data-url="${release.url || '#'}" data-bg-image="${release.image_url || ''}">
-                <div class="beatport-releases-top10-card-rank">${release.rank || index + 1}</div>
-                <div class="beatport-releases-top10-card-artwork">
-                    ${release.image_url ?
-                `<img src="${release.image_url}" alt="${release.title}" loading="lazy">` :
-                '<div class="beatport-releases-top10-card-placeholder">💿</div>'
-            }
-                </div>
-                <div class="beatport-releases-top10-card-info">
-                    <h4 class="beatport-releases-top10-card-title">${release.title || 'Unknown Title'}</h4>
-                    <p class="beatport-releases-top10-card-artist">${release.artist || 'Unknown Artist'}</p>
-                    <p class="beatport-releases-top10-card-label">${release.label || 'Unknown Label'}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    cardsHtml += '</div>';
-    return cardsHtml;
-}
-
-/**
- * Add interactivity to genre Top 10 releases cards
- */
-function addGenreTop10ReleasesInteractivity(releases) {
-    const container = document.getElementById('genre-beatport-releases-top10-list');
-    if (!container) return;
-
-    // Set background images for cards
-    const cards = container.querySelectorAll('.beatport-releases-top10-card[data-bg-image]');
-    cards.forEach(card => {
-        const bgImage = card.getAttribute('data-bg-image');
-        if (bgImage) {
-            // Transform image URL from 95x95 to 500x500 for higher quality background
-            const highResImage = bgImage.replace('/image_size/95x95/', '/image_size/500x500/');
-            card.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), url('${highResImage}')`;
-            card.style.backgroundSize = 'cover';
-            card.style.backgroundPosition = 'center';
-        }
-    });
-
-    // Add click handlers for individual release discovery (exact same pattern as main page)
-    const releaseCards = container.querySelectorAll('.beatport-releases-top10-card[data-url]');
-    releaseCards.forEach((card, index) => {
-        card.addEventListener('click', () => handleGenreReleaseCardClick(card, releases[index]));
-        card.style.cursor = 'pointer';
-    });
-}
-
-/**
- * Handle click on individual genre Top 10 Release card (exact parity with main page)
- */
-async function handleGenreReleaseCardClick(cardElement, release) {
-    if (_beatportModalOpening) return;
-    _beatportModalOpening = true;
-
-    console.log(`💿 Individual genre release card clicked: ${release.title} by ${release.artist}`);
-
-    if (!release.url || release.url === '#') {
-        _beatportModalOpening = false;
-        showToast('No release URL available', 'error');
-        return;
-    }
-
-    try {
-        showToast(`Loading ${release.title}...`, 'info');
-        showLoadingOverlay(`Getting tracks from ${release.title}...`);
-
-        // Fetch structured release metadata for direct download modal
-        console.log(`🎵 Fetching release metadata: ${release.url}`);
-        const response = await fetch('/api/beatport/release-metadata', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ release_url: release.url })
-        });
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            throw new Error(data.error || 'No tracks found in this release');
-        }
-
-        console.log(`✅ Got ${data.tracks.length} tracks from ${data.album.name}`);
-
-        const formattedTracks = data.tracks.map(track => ({
-            ...track,
-            artists: track.artists.map(a => typeof a === 'object' ? a.name : a)
-        }));
-
-        const virtualPlaylistId = `beatport_release_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-        const playlistName = data.album.name;
-
-        await openDownloadMissingModalForArtistAlbum(
-            virtualPlaylistId,
-            playlistName,
-            formattedTracks,
-            data.album,
-            data.artist,
-            false
-        );
-
-        hideLoadingOverlay();
-        _beatportModalOpening = false;
-        console.log(`✅ Opened download modal for ${playlistName}`);
-
-    } catch (error) {
-        console.error(`❌ Error handling release click for ${release.title}:`, error);
-        hideLoadingOverlay();
-        _beatportModalOpening = false;
-        showToast(`Error loading ${release.title}: ${error.message}`, 'error');
-    }
-}
-
-/**
- * Show error message for genre Top 10 releases
- */
-function showGenreTop10ReleasesError(errorMessage) {
-    const container = document.getElementById('genre-top10-releases-container');
-
-    const errorHtml = `
-        <div class="beatport-releases-top10-section">
-            <div class="beatport-releases-top10-header">
-                <h2 class="beatport-releases-top10-title">💿 Top 10 Releases</h2>
-                <p class="beatport-releases-top10-subtitle">Error loading releases</p>
-            </div>
-            <div class="beatport-releases-top10-container">
-                <div class="beatport-releases-top10-error">
-                    <h3>❌ Error Loading Releases</h3>
-                    <p>${errorMessage}</p>
-                </div>
-            </div>
-        </div>
-    `;
-
-    if (container) container.innerHTML = errorHtml;
-}
-
-// Initialize the Genre Browser Modal when the page loads
-document.addEventListener('DOMContentLoaded', () => {
-    initializeGenreBrowserModal();
-});
-
-// ============ Plex Music Library Selection ============
-
-async function loadPlexMusicLibraries() {
-    try {
-        const response = await fetch('/api/plex/music-libraries');
-        const data = await response.json();
-
-        if (data.success && data.libraries && data.libraries.length > 0) {
-            const selector = document.getElementById('plex-music-library');
-            const container = document.getElementById('plex-library-selector-container');
-
-            // Clear existing options
-            selector.innerHTML = '';
-
-            // Add options for each library
-            data.libraries.forEach(library => {
-                const option = document.createElement('option');
-                option.value = library.title;
-                option.textContent = library.title;
-
-                // Mark the currently selected library
-                if (library.title === data.current || library.title === data.selected) {
-                    option.selected = true;
-                }
-
-                selector.appendChild(option);
-            });
-
-            // Show the container
-            container.style.display = 'block';
-        } else {
-            // Hide if no libraries found or not connected
-            document.getElementById('plex-library-selector-container').style.display = 'none';
-        }
-    } catch (error) {
-        console.error('Error loading Plex music libraries:', error);
-        document.getElementById('plex-library-selector-container').style.display = 'none';
-    }
-}
-
-async function selectPlexLibrary() {
-    const selector = document.getElementById('plex-music-library');
-    const selectedLibrary = selector.value;
-
-    if (!selectedLibrary) return;
-
-    try {
-        const response = await fetch('/api/plex/select-music-library', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                library_name: selectedLibrary
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`Plex music library switched to: ${selectedLibrary}`);
-        } else {
-            console.error('Failed to switch library:', data.error);
-            alert(`Failed to switch library: ${data.error}`);
-        }
-    } catch (error) {
-        console.error('Error selecting Plex library:', error);
-        alert('Error selecting library. Please try again.');
-    }
-}
-
-// ============ Jellyfin User Selection ============
-
-async function loadJellyfinUsers() {
-    try {
-        const response = await fetch('/api/jellyfin/users');
-        const data = await response.json();
-
-        if (data.success && data.users && data.users.length > 0) {
-            const selector = document.getElementById('jellyfin-user');
-            const container = document.getElementById('jellyfin-user-selector-container');
-
-            // Clear existing options
-            selector.innerHTML = '';
-
-            // Add options for each user
-            data.users.forEach(user => {
-                const option = document.createElement('option');
-                option.value = user.name;
-                option.textContent = user.name;
-
-                // Mark the currently selected user
-                if (user.name === data.current || user.name === data.selected) {
-                    option.selected = true;
-                }
-
-                selector.appendChild(option);
-            });
-
-            // Show the container
-            container.style.display = 'block';
-        } else {
-            // Hide if no users found or not connected
-            document.getElementById('jellyfin-user-selector-container').style.display = 'none';
-        }
-    } catch (error) {
-        console.error('Error loading Jellyfin users:', error);
-        document.getElementById('jellyfin-user-selector-container').style.display = 'none';
-    }
-}
-
-async function selectJellyfinUser() {
-    const selector = document.getElementById('jellyfin-user');
-    const selectedUser = selector.value;
-
-    if (!selectedUser) return;
-
-    try {
-        const response = await fetch('/api/jellyfin/select-user', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                username: selectedUser
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`Jellyfin user switched to: ${selectedUser}`);
-            // Refresh library dropdown for the new user
-            loadJellyfinMusicLibraries();
-        } else {
-            console.error('Failed to switch user:', data.error);
-            alert(`Failed to switch user: ${data.error}`);
-        }
-    } catch (error) {
-        console.error('Error selecting Jellyfin user:', error);
-        alert('Error selecting user. Please try again.');
-    }
-}
-
-// ============ Jellyfin Music Library Selection ============
-
-async function loadJellyfinMusicLibraries() {
-    try {
-        const response = await fetch('/api/jellyfin/music-libraries');
-        const data = await response.json();
-
-        if (data.success && data.libraries && data.libraries.length > 0) {
-            const selector = document.getElementById('jellyfin-music-library');
-            const container = document.getElementById('jellyfin-library-selector-container');
-
-            // Clear existing options
-            selector.innerHTML = '';
-
-            // Add options for each library
-            data.libraries.forEach(library => {
-                const option = document.createElement('option');
-                option.value = library.title;
-                option.textContent = library.title;
-
-                // Mark the currently selected library
-                if (library.title === data.current || library.title === data.selected) {
-                    option.selected = true;
-                }
-
-                selector.appendChild(option);
-            });
-
-            // Show the container
-            container.style.display = 'block';
-        } else {
-            // Hide if no libraries found or not connected
-            document.getElementById('jellyfin-library-selector-container').style.display = 'none';
-        }
-    } catch (error) {
-        console.error('Error loading Jellyfin music libraries:', error);
-        document.getElementById('jellyfin-library-selector-container').style.display = 'none';
-    }
-}
-
-async function selectJellyfinLibrary() {
-    const selector = document.getElementById('jellyfin-music-library');
-    const selectedLibrary = selector.value;
-
-    if (!selectedLibrary) return;
-
-    try {
-        const response = await fetch('/api/jellyfin/select-music-library', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-                library_name: selectedLibrary
-            })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            console.log(`Jellyfin music library switched to: ${selectedLibrary}`);
-        } else {
-            console.error('Failed to switch library:', data.error);
-            alert(`Failed to switch library: ${data.error}`);
-        }
-    } catch (error) {
-        console.error('Error selecting Jellyfin library:', error);
-        alert('Error selecting library. Please try again.');
-    }
-}
-
-// ============ Navidrome Music Folder Selection ============
-
-async function loadNavidromeMusicFolders() {
-    try {
-        const response = await fetch('/api/navidrome/music-folders');
-        const data = await response.json();
-
-        if (data.success && data.folders && data.folders.length > 0) {
-            const selector = document.getElementById('navidrome-music-folder');
-            const container = document.getElementById('navidrome-folder-selector-container');
-
-            selector.innerHTML = '<option value="">All Libraries</option>';
-
-            data.folders.forEach(folder => {
-                const option = document.createElement('option');
-                option.value = folder.title;
-                option.textContent = folder.title;
-
-                if (folder.title === data.current || folder.title === data.selected) {
-                    option.selected = true;
-                }
-
-                selector.appendChild(option);
-            });
-
-            container.style.display = 'block';
-        } else {
-            document.getElementById('navidrome-folder-selector-container').style.display = 'none';
-        }
-    } catch (error) {
-        console.error('Error loading Navidrome music folders:', error);
-        document.getElementById('navidrome-folder-selector-container').style.display = 'none';
-    }
-}
-
-async function selectNavidromeMusicFolder() {
-    const selector = document.getElementById('navidrome-music-folder');
-    const selectedFolder = selector.value;
-
-    try {
-        const response = await fetch('/api/navidrome/select-music-folder', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ folder_name: selectedFolder })
-        });
-
-        const data = await response.json();
-
-        if (data.success) {
-            showToast(data.message, 'success');
-        } else {
-            console.error('Failed to set music folder:', data.error);
-            showToast(`Failed to set music folder: ${data.error}`, 'error', 'set-media');
-        }
-    } catch (error) {
-        console.error('Error selecting Navidrome music folder:', error);
-        showToast('Error selecting music folder. Please try again.', 'error', 'set-media');
-    }
-}
-
-// ============================================
-// == DISCOVER PAGE                          ==
-// ============================================
-
-let discoverHeroIndex = 0;
-let discoverHeroArtists = [];
-let discoverHeroInterval = null;
-let discoverPageInitialized = false;
-
-// Store discover playlist tracks for download/sync functionality
-let discoverReleaseRadarTracks = [];
-let discoverWeeklyTracks = [];
-let discoverRecentAlbums = [];
-let discoverSeasonalAlbums = [];
-let discoverSeasonalTracks = [];
-let currentSeasonKey = null;
-
-// Personalized playlists storage
-let personalizedRecentlyAdded = [];
-let personalizedTopTracks = [];
-let personalizedForgottenFavorites = [];
-let personalizedPopularPicks = [];
-let personalizedHiddenGems = [];
-let personalizedDailyMixes = [];
-let personalizedDiscoveryShuffle = [];
-let personalizedFamiliarFavorites = [];
-let buildPlaylistSelectedArtists = [];
-
-async function loadDiscoverPage() {
-    console.log('Loading discover page...');
-
-    // Load all sections
-    await Promise.all([
-        loadDiscoverHero(),
-        loadYourArtists(),
-        loadYourAlbums(),
-        loadSpotifyLibrarySection(),
-        loadDiscoverRecentReleases(),
-        loadSeasonalContent(),  // Seasonal discovery
-        loadPersonalizedRecentlyAdded(),  // NEW: Recently added from library
-        // loadPersonalizedDailyMixes(),  // NEW: Daily Mix playlists (HIDDEN)
-        loadDiscoverReleaseRadar(),
-        loadDiscoverWeekly(),
-        loadPersonalizedPopularPicks(),  // NEW: Popular picks from discovery pool
-        loadPersonalizedHiddenGems(),  // NEW: Hidden gems from discovery pool
-        loadPersonalizedTopTracks(),  // NEW: Your top tracks
-        loadPersonalizedForgottenFavorites(),  // NEW: Forgotten favorites
-        loadDiscoveryShuffle(),  // NEW: Discovery Shuffle
-        loadFamiliarFavorites(),  // NEW: Familiar Favorites
-        loadBecauseYouListenTo(),  // Personalized by listening stats
-        loadCacheUndiscoveredAlbums(),  // From metadata cache
-        loadCacheGenreNewReleases(),    // From metadata cache
-        loadCacheLabelExplorer(),       // From metadata cache
-        loadCacheDeepCuts(),            // From metadata cache
-        loadCacheGenreExplorer(),       // From metadata cache
-        initializeLastfmRadioSection(),  // Last.fm Radio section (gated on API key)
-        initializeListenBrainzTabs(),  // ListenBrainz playlists (tabbed)
-        loadDecadeBrowserTabs(),  // Time Machine (tabbed by decade)
-        loadGenreBrowserTabs(),  // Browse by Genre (tabbed by genre)
-        loadListenBrainzPlaylistsFromBackend(),  // Load ListenBrainz playlist states for persistence
-        loadDiscoveryBlacklist()  // Blocked artists list
-    ]);
-
-    // Check for active syncs after page load
-    checkForActiveDiscoverSyncs();
-}
-
-async function checkForActiveDiscoverSyncs() {
-    // Check if Fresh Tape sync is active
-    try {
-        const releaseRadarResponse = await fetch('/api/sync/status/discover_release_radar');
-        if (releaseRadarResponse.ok) {
-            const data = await releaseRadarResponse.json();
-            if (data.status === 'syncing' || data.status === 'starting') {
-                console.log('🔄 Resuming Fresh Tape sync polling after page refresh');
-
-                // Show status display
-                const statusDisplay = document.getElementById('release-radar-sync-status');
-                if (statusDisplay) {
-                    statusDisplay.style.display = 'block';
-                }
-
-                // Disable button
-                const syncButton = document.getElementById('release-radar-sync-btn');
-                if (syncButton) {
-                    syncButton.disabled = true;
-                    syncButton.style.opacity = '0.5';
-                    syncButton.style.cursor = 'not-allowed';
-                }
-
-                // Resume polling
-                startDiscoverSyncPolling('release_radar', 'discover_release_radar');
-            }
-        }
-    } catch (error) {
-        // Sync not active, ignore
-    }
-
-    // Check if The Archives sync is active
-    try {
-        const discoveryWeeklyResponse = await fetch('/api/sync/status/discover_discovery_weekly');
-        if (discoveryWeeklyResponse.ok) {
-            const data = await discoveryWeeklyResponse.json();
-            if (data.status === 'syncing' || data.status === 'starting') {
-                console.log('🔄 Resuming The Archives sync polling after page refresh');
-
-                // Show status display
-                const statusDisplay = document.getElementById('discovery-weekly-sync-status');
-                if (statusDisplay) {
-                    statusDisplay.style.display = 'block';
-                }
-
-                // Disable button
-                const syncButton = document.getElementById('discovery-weekly-sync-btn');
-                if (syncButton) {
-                    syncButton.disabled = true;
-                    syncButton.style.opacity = '0.5';
-                    syncButton.style.cursor = 'not-allowed';
-                }
-
-                // Resume polling
-                startDiscoverSyncPolling('discovery_weekly', 'discover_discovery_weekly');
-            }
-        }
-    } catch (error) {
-        // Sync not active, ignore
-    }
-
-    // Check if Seasonal Playlist sync is active
-    try {
-        const seasonalResponse = await fetch('/api/sync/status/discover_seasonal_playlist');
-        if (seasonalResponse.ok) {
-            const data = await seasonalResponse.json();
-            if (data.status === 'syncing' || data.status === 'starting') {
-                console.log('🔄 Resuming Seasonal Playlist sync polling after page refresh');
-
-                const statusDisplay = document.getElementById('seasonal-playlist-sync-status');
-                if (statusDisplay) {
-                    statusDisplay.style.display = 'block';
-                }
-
-                const syncButton = document.getElementById('seasonal-playlist-sync-btn');
-                if (syncButton) {
-                    syncButton.disabled = true;
-                    syncButton.style.opacity = '0.5';
-                    syncButton.style.cursor = 'not-allowed';
-                }
-
-                startDiscoverSyncPolling('seasonal_playlist', 'discover_seasonal_playlist');
-            }
-        }
-    } catch (error) {
-        // Sync not active, ignore
-    }
-}
-
-async function loadDiscoverHero() {
-    try {
-        const response = await fetch('/api/discover/hero');
-        if (!response.ok) {
-            console.error('Failed to fetch discover hero');
-            return;
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.artists || data.artists.length === 0) {
-            console.log('No hero artists available');
-            showDiscoverHeroEmpty();
-            return;
-        }
-
-        discoverHeroArtists = data.artists;
-        discoverHeroIndex = 0;
-
-        // Display first artist
-        displayDiscoverHeroArtist(discoverHeroArtists[0]);
-
-        // Start slideshow (change every 8 seconds)
-        if (discoverHeroInterval) {
-            clearInterval(discoverHeroInterval);
-        }
-        if (discoverHeroArtists.length > 1) {
-            discoverHeroInterval = setInterval(() => {
-                discoverHeroIndex = (discoverHeroIndex + 1) % discoverHeroArtists.length;
-                displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
-            }, 8000);
-        }
-
-        // Check if all hero artists are already watched
-        checkAllHeroWatchlistStatus();
-
-    } catch (error) {
-        console.error('Error loading discover hero:', error);
-        showDiscoverHeroEmpty();
-    }
-}
-
-function displayDiscoverHeroArtist(artist) {
-    const titleEl = document.getElementById('discover-hero-title');
-    const subtitleEl = document.getElementById('discover-hero-subtitle');
-    const metaEl = document.getElementById('discover-hero-meta');
-    const imageEl = document.getElementById('discover-hero-image');
-    const bgEl = document.getElementById('discover-hero-bg');
-
-    if (titleEl) {
-        titleEl.textContent = artist.artist_name;
-    }
-
-    if (subtitleEl) {
-        // Show recommendation context based on occurrence count
-        let subtitle = '';
-        if (artist.occurrence_count > 1) {
-            subtitle = `Similar to ${artist.occurrence_count} artists in your watchlist`;
-        } else {
-            subtitle = 'Similar to an artist in your watchlist';
-        }
-        subtitleEl.textContent = subtitle;
-    }
-
-    // Build metadata section with popularity and genres
-    if (metaEl) {
-        let metaHTML = '<div class="discover-hero-meta-content">';
-
-        // Add popularity indicator
-        if (artist.popularity !== undefined && artist.popularity > 0) {
-            const popularityClass = artist.popularity >= 80 ? 'high' :
-                artist.popularity >= 50 ? 'medium' : 'low';
-            metaHTML += `
-                <div class="hero-meta-item hero-popularity ${popularityClass}">
-                    <span class="meta-icon">⭐</span>
-                    <span class="meta-value">${artist.popularity}/100</span>
-                    <span class="meta-label">Popularity</span>
-                </div>
-            `;
-        }
-
-        // Add genre tags
-        if (artist.genres && artist.genres.length > 0) {
-            metaHTML += '<div class="hero-meta-item hero-genres">';
-            artist.genres.slice(0, 3).forEach(genre => {
-                metaHTML += `<span class="genre-tag">${genre}</span>`;
-            });
-            metaHTML += '</div>';
-        }
-
-        metaHTML += '</div>';
-        metaEl.innerHTML = metaHTML;
-    }
-
-    if (imageEl && artist.image_url) {
-        imageEl.innerHTML = `<img src="${artist.image_url}" alt="${artist.artist_name}">`;
-    } else if (imageEl) {
-        imageEl.innerHTML = '<div class="hero-image-placeholder">🎧</div>';
-    }
-
-    if (bgEl && artist.image_url) {
-        bgEl.style.backgroundImage = `url('${artist.image_url}')`;
-        bgEl.style.backgroundSize = 'cover';
-        bgEl.style.backgroundPosition = 'center';
-    }
-
-    // Store artist ID for both buttons and update watchlist state
-    // Use artist_id which is set by the backend to the appropriate ID for the active source
-    const addBtn = document.getElementById('discover-hero-add');
-    const discographyBtn = document.getElementById('discover-hero-discography');
-    const artistId = artist.artist_id || artist.spotify_artist_id || artist.itunes_artist_id;
-
-    if (addBtn && artistId) {
-        addBtn.setAttribute('data-artist-id', artistId);
-        addBtn.setAttribute('data-artist-name', artist.artist_name);
-        // Also store both IDs for cross-source operations
-        if (artist.spotify_artist_id) addBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
-        if (artist.itunes_artist_id) addBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
-
-        // Check if this artist is already in watchlist and update button appearance
-        checkAndUpdateDiscoverHeroWatchlistButton(artistId);
-    }
-
-    if (discographyBtn && artistId) {
-        discographyBtn.setAttribute('data-artist-id', artistId);
-        discographyBtn.setAttribute('data-artist-name', artist.artist_name);
-        // Also store both IDs for cross-source operations
-        if (artist.spotify_artist_id) discographyBtn.setAttribute('data-spotify-id', artist.spotify_artist_id);
-        if (artist.itunes_artist_id) discographyBtn.setAttribute('data-itunes-id', artist.itunes_artist_id);
-    }
-
-    // Update slideshow indicators
-    updateDiscoverHeroIndicators();
-}
-
-async function checkAndUpdateDiscoverHeroWatchlistButton(artistId) {
-    try {
-        const response = await fetch('/api/watchlist/check', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_id: artistId })
-        });
-
-        const data = await response.json();
-        if (!data.success) return;
-
-        const addBtn = document.getElementById('discover-hero-add');
-        if (!addBtn) return;
-
-        const icon = addBtn.querySelector('.watchlist-icon');
-        const text = addBtn.querySelector('.watchlist-text');
-
-        if (data.is_watching) {
-            // Artist is in watchlist
-            if (icon) icon.textContent = '👁️';
-            if (text) text.textContent = 'Watching...';
-            addBtn.classList.add('watching');
-        } else {
-            // Artist not in watchlist
-            if (icon) icon.textContent = '👁️';
-            if (text) text.textContent = 'Add to Watchlist';
-            addBtn.classList.remove('watching');
-        }
-    } catch (error) {
-        console.error('Error checking watchlist status for hero:', error);
-    }
-}
-
-function toggleDiscoverHeroWatchlist(event) {
-    event.stopPropagation();
-
-    const button = document.getElementById('discover-hero-add');
-    if (!button) return;
-
-    const artistId = button.getAttribute('data-artist-id');
-    const artistName = button.getAttribute('data-artist-name');
-
-    if (!artistId || !artistName) {
-        console.error('No artist data found on discover hero button');
-        return;
-    }
-
-    // Call the existing toggleWatchlist function
-    toggleWatchlist(event, artistId, artistName);
-}
-
-async function watchAllHeroArtists(btn) {
-    if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
-    if (btn.classList.contains('all-watched')) return;
-
-    const textEl = btn.querySelector('.watch-all-text');
-    const originalText = textEl ? textEl.textContent : '';
-
-    // Loading state
-    btn.disabled = true;
-    if (textEl) textEl.textContent = 'Adding...';
-
-    try {
-        const artists = discoverHeroArtists.map(a => ({
-            artist_id: a.artist_id,
-            artist_name: a.artist_name
-        }));
-
-        const response = await fetch('/api/watchlist/add-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artists })
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            if (textEl) textEl.textContent = 'All Watched';
-            btn.classList.add('all-watched');
-            btn.disabled = true;
-
-            // Sync the per-slide watchlist button for current artist
-            const currentArtist = discoverHeroArtists[discoverHeroIndex];
-            if (currentArtist) {
-                checkAndUpdateDiscoverHeroWatchlistButton(currentArtist.artist_id);
-            }
-
-            // Update watchlist count badge
-            if (typeof updateWatchlistButtonCount === 'function') {
-                updateWatchlistButtonCount();
-            }
-        } else {
-            if (textEl) textEl.textContent = originalText;
-            btn.disabled = false;
-        }
-    } catch (error) {
-        console.error('Error watching all hero artists:', error);
-        if (textEl) textEl.textContent = originalText;
-        btn.disabled = false;
-    }
-}
-
-// Cache for recommended artists data so reopening is instant
-let _recommendedArtistsCache = null;
-
-async function openRecommendedArtistsModal() {
-    let modal = document.getElementById('recommended-artists-modal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'recommended-artists-modal';
-        modal.className = 'modal-overlay';
-        document.body.appendChild(modal);
-
-        modal.addEventListener('click', function (e) {
-            if (e.target === modal) closeRecommendedArtistsModal();
-        });
-    }
-
-    // If cached, render instantly and refresh watchlist statuses
-    if (_recommendedArtistsCache) {
-        modal.style.display = 'flex';
-        renderRecommendedArtistsModal(modal, _recommendedArtistsCache);
-        checkRecommendedWatchlistStatuses(_recommendedArtistsCache);
-        return;
-    }
-
-    // Show loading
-    modal.innerHTML = `
-        <div class="modal-container playlist-modal recommended-modal">
-            <div class="playlist-modal-header">
-                <div class="playlist-header-content" style="width: 100%;">
-                    <h2>Recommended Artists</h2>
-                    <div class="playlist-quick-info">
-                        <span class="playlist-track-count">Loading...</span>
-                    </div>
-                </div>
-                <span class="playlist-modal-close" onclick="closeRecommendedArtistsModal()">&times;</span>
-            </div>
-            <div class="playlist-modal-body">
-                <div class="recommended-loading">Loading recommended artists...</div>
-            </div>
-        </div>
-    `;
-    modal.style.display = 'flex';
-
-    try {
-        // Phase 1: Fetch basic data (instant — no API enrichment)
-        const response = await fetch('/api/discover/similar-artists');
-        const data = await response.json();
-
-        if (!data.success || !data.artists || data.artists.length === 0) {
-            modal.querySelector('.playlist-modal-body').innerHTML = `
-                <div class="recommended-empty-state">
-                    No recommended artists yet.<br>
-                    Run a watchlist scan to generate recommendations.
-                </div>
-            `;
-            modal.querySelector('.playlist-track-count').textContent = '0 artists';
-            return;
-        }
-
-        // Render cards immediately with fallback images
-        _recommendedArtistsCache = data.artists;
-        renderRecommendedArtistsModal(modal, data.artists);
-
-        // Phase 2: Enrich with images/genres progressively in batches of 50
-        // Skip artists that already have cached metadata from the initial response
-        const source = data.source || 'spotify';
-        const idKey = source === 'spotify' ? 'spotify_artist_id' : source === 'deezer' ? 'deezer_artist_id' : 'itunes_artist_id';
-        const allIds = data.artists
-            .filter(a => !a.image_url)  // Only enrich artists without cached images
-            .map(a => a[idKey]).filter(Boolean);
-
-        for (let i = 0; i < allIds.length; i += 50) {
-            const batchIds = allIds.slice(i, i + 50);
-            try {
-                const enrichResp = await fetch('/api/discover/similar-artists/enrich', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ artist_ids: batchIds, source })
-                });
-                const enrichData = await enrichResp.json();
-                if (enrichData.success && enrichData.artists) {
-                    // Update cards and cache as each batch arrives
-                    for (const [aid, info] of Object.entries(enrichData.artists)) {
-                        // Update the card in DOM
-                        const card = modal.querySelector(`.recommended-artist-card[data-artist-id="${aid}"]`);
-                        if (card && info.image_url) {
-                            const imgContainer = card.querySelector('.recommended-card-image');
-                            if (imgContainer) {
-                                imgContainer.innerHTML = `<img src="${info.image_url}" alt="" loading="lazy"
-                                    onerror="this.parentElement.innerHTML='<div class=\\'recommended-card-image-fallback\\'>🎤</div>';">`;
-                            }
-                        }
-                        if (card && info.genres && info.genres.length > 0) {
-                            const genresContainer = card.querySelector('.recommended-card-genres');
-                            if (genresContainer) {
-                                genresContainer.innerHTML = info.genres.map(g =>
-                                    `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
-                                ).join('');
-                            } else {
-                                const infoDiv = card.querySelector('.recommended-card-info');
-                                if (infoDiv) {
-                                    const genreDiv = document.createElement('div');
-                                    genreDiv.className = 'recommended-card-genres';
-                                    genreDiv.innerHTML = info.genres.map(g =>
-                                        `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
-                                    ).join('');
-                                    infoDiv.appendChild(genreDiv);
-                                }
-                            }
-                        }
-
-                        // Update cache
-                        const cached = _recommendedArtistsCache.find(a => a.artist_id === aid || a.spotify_artist_id === aid || a.itunes_artist_id === aid);
-                        if (cached) {
-                            if (info.image_url) cached.image_url = info.image_url;
-                            if (info.genres) cached.genres = info.genres;
-                            if (info.artist_name) cached.artist_name = info.artist_name;
-                        }
-                    }
-                }
-            } catch (enrichErr) {
-                console.error('Error enriching batch:', enrichErr);
-            }
-        }
-
-        // Phase 3: Check watchlist statuses
-        checkRecommendedWatchlistStatuses(data.artists);
-
-    } catch (error) {
-        console.error('Error loading recommended artists:', error);
-        modal.querySelector('.playlist-modal-body').innerHTML = `
-            <div class="recommended-empty-state">Error loading recommended artists.</div>
-        `;
-    }
-}
-
-function renderRecommendedArtistsModal(modal, artists) {
-    modal.innerHTML = `
-        <div class="modal-container playlist-modal recommended-modal">
-            <div class="playlist-modal-header">
-                <div class="playlist-header-content" style="width: 100%;">
-                    <h2>Recommended Artists</h2>
-                    <div class="playlist-quick-info">
-                        <span class="playlist-track-count">${artists.length} artist${artists.length !== 1 ? 's' : ''}</span>
-                    </div>
-                </div>
-                <span class="playlist-modal-close" onclick="closeRecommendedArtistsModal()">&times;</span>
-            </div>
-            <div class="playlist-modal-body">
-                <div class="recommended-actions-bar">
-                    <div class="recommended-search-container">
-                        <input type="text"
-                               class="recommended-search-input"
-                               id="recommended-search-input"
-                               placeholder="Search recommended artists..."
-                               oninput="filterRecommendedArtists()">
-                    </div>
-                    <button class="recommended-add-all-btn" id="recommended-add-all-btn"
-                            onclick="addAllRecommendedToWatchlist(this)">
-                        Add All to Watchlist
-                    </button>
-                </div>
-                <div class="recommended-artists-grid" id="recommended-artists-grid">
-                    ${artists.map(artist => {
-        const genreTags = (artist.genres || []).slice(0, 3).map(g =>
-            `<span class="recommended-card-genre">${escapeHtml(g)}</span>`
-        ).join('');
-        const similarText = artist.occurrence_count > 1
-            ? `Similar to ${artist.occurrence_count} in your watchlist`
-            : 'Similar to an artist in your watchlist';
-        return `
-                            <div class="recommended-artist-card"
-                                 data-artist-name="${escapeHtml(artist.artist_name).toLowerCase()}"
-                                 data-artist-id="${artist.artist_id}">
-                                <button class="recommended-card-watchlist-btn"
-                                        data-artist-id="${artist.artist_id}"
-                                        data-artist-name="${escapeHtml(artist.artist_name)}">
-                                    Add to Watchlist
-                                </button>
-                                <div class="recommended-card-image">
-                                    ${artist.image_url ? `
-                                        <img src="${artist.image_url}"
-                                             alt="${escapeHtml(artist.artist_name)}"
-                                             loading="lazy"
-                                             onerror="this.parentElement.innerHTML='<div class=\\'recommended-card-image-fallback\\'>🎤</div>';">
-                                    ` : `
-                                        <div class="recommended-card-image-fallback">🎤</div>
-                                    `}
-                                </div>
-                                <div class="recommended-card-info">
-                                    <span class="recommended-card-name">${escapeHtml(artist.artist_name)}</span>
-                                    <span class="recommended-card-similarity">${similarText}</span>
-                                    <div class="recommended-card-genres">${genreTags}</div>
-                                </div>
-                            </div>
-                        `;
-    }).join('')}
-                </div>
-            </div>
-        </div>
-    `;
-
-    // Event delegation for card clicks and watchlist buttons
-    const grid = modal.querySelector('#recommended-artists-grid');
-    if (grid) {
-        grid.addEventListener('click', function (e) {
-            const watchlistBtn = e.target.closest('.recommended-card-watchlist-btn');
-            if (watchlistBtn) {
-                e.stopPropagation();
-                toggleRecommendedWatchlist(watchlistBtn);
-                return;
-            }
-
-            const card = e.target.closest('.recommended-artist-card');
-            if (card) {
-                const artistId = card.getAttribute('data-artist-id');
-                const nameEl = card.querySelector('.recommended-card-name');
-                const artistName = nameEl ? nameEl.textContent : '';
-                viewRecommendedArtistDiscography(artistId, artistName);
-            }
-        });
-    }
-}
-
-async function addAllRecommendedToWatchlist(btn) {
-    if (!_recommendedArtistsCache || _recommendedArtistsCache.length === 0) return;
-    if (btn.classList.contains('all-added')) return;
-
-    const originalText = btn.textContent;
-    btn.disabled = true;
-    btn.textContent = 'Adding...';
-
-    try {
-        const artists = _recommendedArtistsCache.map(a => ({
-            artist_id: a.artist_id,
-            artist_name: a.artist_name
-        }));
-
-        const resp = await fetch('/api/watchlist/add-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artists })
-        });
-        const data = await resp.json();
-
-        if (data.success) {
-            btn.textContent = `All Added (${data.added} new)`;
-            btn.classList.add('all-added');
-            btn.disabled = true;
-
-            // Update all watchlist buttons in the modal to "Watching"
-            document.querySelectorAll('.recommended-card-watchlist-btn').forEach(wBtn => {
-                wBtn.classList.add('watching');
-                wBtn.textContent = 'Watching';
-            });
-
-            if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
-        } else {
-            btn.textContent = originalText;
-            btn.disabled = false;
-        }
-    } catch (error) {
-        console.error('Error adding all recommended to watchlist:', error);
-        btn.textContent = originalText;
-        btn.disabled = false;
-    }
-}
-
-function closeRecommendedArtistsModal() {
-    const modal = document.getElementById('recommended-artists-modal');
-    if (modal) modal.style.display = 'none';
-}
-
-function filterRecommendedArtists() {
-    const query = (document.getElementById('recommended-search-input')?.value || '').toLowerCase();
-    const cards = document.querySelectorAll('.recommended-artist-card');
-    cards.forEach(card => {
-        const name = card.getAttribute('data-artist-name') || '';
-        card.style.display = name.includes(query) ? '' : 'none';
-    });
-}
-
-async function toggleRecommendedWatchlist(btn) {
-    const artistId = btn.getAttribute('data-artist-id');
-    const artistName = btn.getAttribute('data-artist-name');
-    if (!artistId || !artistName) return;
-
-    btn.disabled = true;
-    const wasWatching = btn.classList.contains('watching');
-
-    try {
-        if (wasWatching) {
-            const resp = await fetch('/api/watchlist/remove', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: artistId })
-            });
-            const data = await resp.json();
-            if (data.success) {
-                btn.classList.remove('watching');
-                btn.textContent = 'Add to Watchlist';
-            }
-        } else {
-            const resp = await fetch('/api/watchlist/add', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: artistId, artist_name: artistName })
-            });
-            const data = await resp.json();
-            if (data.success) {
-                btn.classList.add('watching');
-                btn.textContent = 'Watching';
-            }
-        }
-        if (typeof updateWatchlistButtonCount === 'function') updateWatchlistButtonCount();
-    } catch (error) {
-        console.error('Error toggling recommended watchlist:', error);
-    } finally {
-        btn.disabled = false;
-    }
-}
-
-async function checkRecommendedWatchlistStatuses(artists) {
-    try {
-        const artistIds = artists.map(a => a.artist_id).filter(Boolean);
-        if (!artistIds.length) return;
-
-        const resp = await fetch('/api/watchlist/check-batch', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_ids: artistIds })
-        });
-        const data = await resp.json();
-        if (data.success && data.results) {
-            for (const [aid, isWatching] of Object.entries(data.results)) {
-                if (isWatching) {
-                    const btn = document.querySelector(`.recommended-card-watchlist-btn[data-artist-id="${aid}"]`);
-                    if (btn) {
-                        btn.classList.add('watching');
-                        btn.textContent = 'Watching';
-                    }
-                }
-            }
-        }
-    } catch (e) {
-        // Non-critical
-    }
-}
-
-async function viewRecommendedArtistDiscography(artistId, artistName) {
-    closeRecommendedArtistsModal();
-
-    const artist = {
-        id: artistId,
-        name: artistName
-    };
-
-    // Use same navigation pattern as hero slider
-    navigateToPage('artists');
-    await new Promise(resolve => setTimeout(resolve, 100));
-    await selectArtistForDetail(artist);
-}
-
-async function checkAllHeroWatchlistStatus() {
-    const btn = document.getElementById('discover-hero-watch-all');
-    if (!btn || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
-
-    try {
-        let allWatched = true;
-        for (const artist of discoverHeroArtists) {
-            const response = await fetch('/api/watchlist/check', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: artist.artist_id })
-            });
-            const data = await response.json();
-            if (!data.success || !data.is_watching) {
-                allWatched = false;
-                break;
-            }
-        }
-
-        const textEl = btn.querySelector('.watch-all-text');
-        if (allWatched) {
-            if (textEl) textEl.textContent = 'All Watched';
-            btn.classList.add('all-watched');
-            btn.disabled = true;
-        } else {
-            if (textEl) textEl.textContent = 'Watch All';
-            btn.classList.remove('all-watched');
-            btn.disabled = false;
-        }
-    } catch (error) {
-        console.error('Error checking hero watchlist status:', error);
-    }
-}
-
-function navigateDiscoverHero(direction) {
-    if (!discoverHeroArtists || discoverHeroArtists.length === 0) return;
-
-    // Update index with wrapping
-    discoverHeroIndex = (discoverHeroIndex + direction + discoverHeroArtists.length) % discoverHeroArtists.length;
-
-    // Display the artist
-    displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
-
-    // Update indicators
-    updateDiscoverHeroIndicators();
-}
-
-function updateDiscoverHeroIndicators() {
-    const indicatorsContainer = document.getElementById('discover-hero-indicators');
-    if (!indicatorsContainer || !discoverHeroArtists || discoverHeroArtists.length === 0) return;
-
-    // Create indicator dots
-    indicatorsContainer.innerHTML = discoverHeroArtists.map((_, index) => `
-        <button class="hero-indicator ${index === discoverHeroIndex ? 'active' : ''}"
-                onclick="jumpToDiscoverHeroSlide(${index})"
-                aria-label="Go to slide ${index + 1}"></button>
-    `).join('');
-}
-
-function jumpToDiscoverHeroSlide(index) {
-    if (!discoverHeroArtists || index < 0 || index >= discoverHeroArtists.length) return;
-
-    discoverHeroIndex = index;
-    displayDiscoverHeroArtist(discoverHeroArtists[discoverHeroIndex]);
-    updateDiscoverHeroIndicators();
-}
-
-async function viewDiscoverHeroDiscography() {
-    const button = document.getElementById('discover-hero-discography');
-    if (!button) return;
-
-    const artistId = button.getAttribute('data-artist-id');
-    const artistName = button.getAttribute('data-artist-name');
-
-    if (!artistId || !artistName) {
-        console.error('No artist data found for discography view');
-        return;
-    }
-
-    // Create artist object matching the expected format
-    const artist = {
-        id: artistId,
-        name: artistName,
-        image_url: discoverHeroArtists[discoverHeroIndex]?.image_url || '',
-        genres: discoverHeroArtists[discoverHeroIndex]?.genres || [],
-        popularity: discoverHeroArtists[discoverHeroIndex]?.popularity || 0
-    };
-
-    console.log(`🎵 Navigating to artist detail for: ${artistName}`);
-
-    // Navigate to Artists page
-    navigateToPage('artists');
-
-    // Small delay to let the page load
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    // Load the artist details
-    await selectArtistForDetail(artist);
-}
-
-function showDiscoverHeroEmpty() {
-    const titleEl = document.getElementById('discover-hero-title');
-    const subtitleEl = document.getElementById('discover-hero-subtitle');
-
-    if (titleEl) titleEl.textContent = 'No Recommendations Yet';
-    if (subtitleEl) subtitleEl.textContent = 'Run a watchlist scan to generate personalized recommendations';
-}
-
-async function loadDiscoverRecentReleases() {
-    try {
-        const carousel = document.getElementById('recent-releases-carousel');
-        if (!carousel) return;
-
-        carousel.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading recent releases...</p></div>';
-
-        const response = await fetch('/api/discover/recent-releases');
-        if (!response.ok) {
-            throw new Error('Failed to fetch recent releases');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.albums || data.albums.length === 0) {
-            carousel.innerHTML = '<div class="discover-empty"><p>No recent releases found</p></div>';
-            return;
-        }
-
-        // Store albums for download functionality
-        discoverRecentAlbums = data.albums;
-
-        // Build carousel HTML
-        let html = '';
-        data.albums.forEach((album, index) => {
-            const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
-            html += `
-                <div class="discover-card" onclick="openDownloadModalForRecentAlbum(${index})" style="cursor: pointer;">
-                    <div class="discover-card-image">
-                        <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
-                    </div>
-                    <div class="discover-card-info">
-                        <h4 class="discover-card-title">${album.album_name}</h4>
-                        <p class="discover-card-subtitle">${album.artist_name}</p>
-                        <p class="discover-card-meta">${album.release_date}</p>
-                    </div>
-                </div>
-            `;
-        });
-
-        carousel.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading recent releases:', error);
-        const carousel = document.getElementById('recent-releases-carousel');
-        if (carousel) {
-            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load recent releases</p></div>';
-        }
-    }
-}
-
-// ===============================
-// ===============================
-// YOUR ALBUMS SECTION
-// ===============================
-
-let yourAlbums = [];
-let yourAlbumsPage = 1;
-let yourAlbumsTotal = 0;
-const YOUR_ALBUMS_PAGE_SIZE = 48;
-let _yourAlbumsSearchTimeout = null;
-
-function debouncedYourAlbumsSearch() {
-    clearTimeout(_yourAlbumsSearchTimeout);
-    _yourAlbumsSearchTimeout = setTimeout(() => {
-        yourAlbumsPage = 1;
-        loadYourAlbumsGrid();
-    }, 400);
-}
-
-async function loadYourAlbums() {
-    const section = document.getElementById('your-albums-section');
-    if (!section) return;
-    try {
-        const resp = await fetch('/api/discover/your-albums?page=1&per_page=48&status=all');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success) return;
-
-        const totalCount = (data.stats && data.stats.total) || 0;
-        if (totalCount === 0 && !data.stale) return; // Nothing to show yet
-
-        section.style.display = '';
-        yourAlbums = data.albums || [];
-        yourAlbumsTotal = data.total || 0;
-        yourAlbumsPage = 1;
-
-        const subtitle = document.getElementById('your-albums-subtitle');
-        if (subtitle && data.stats) {
-            const s = data.stats;
-            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
-        }
-
-        const filters = document.getElementById('your-albums-filters');
-        if (filters && totalCount > 0) filters.style.display = '';
-
-        const downloadBtn = document.getElementById('your-albums-download-btn');
-        if (downloadBtn && data.stats && data.stats.missing > 0) downloadBtn.style.display = '';
-
-        _renderYourAlbumsGrid(yourAlbums);
-        _renderYourAlbumsPagination(yourAlbumsTotal, yourAlbumsPage);
-
-        if (data.stale && totalCount === 0) {
-            const grid = document.getElementById('your-albums-grid');
-            if (grid) grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Fetching your albums from connected services...</p></div>';
-            _pollYourAlbums();
-        }
-    } catch (e) {
-        console.error('Error loading your albums:', e);
-    }
-}
-
-function _pollYourAlbums() {
-    let attempts = 0;
-    const poll = setInterval(async () => {
-        attempts++;
-        if (attempts > 12) { clearInterval(poll); return; }
-        try {
-            const resp = await fetch('/api/discover/your-albums?page=1&per_page=48&status=all');
-            if (!resp.ok) return;
-            const data = await resp.json();
-            if (!data.success) return;
-            const total = (data.stats && data.stats.total) || 0;
-            if (total > 0) {
-                clearInterval(poll);
-                loadYourAlbums();
-            }
-        } catch (e) { }
-    }, 5000);
-}
-
-async function loadYourAlbumsGrid() {
-    const grid = document.getElementById('your-albums-grid');
-    if (!grid) return;
-    grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading...</p></div>';
-    try {
-        const search = (document.getElementById('your-albums-search')?.value || '').trim();
-        const status = document.getElementById('your-albums-status-filter')?.value || 'all';
-        const sort = document.getElementById('your-albums-sort')?.value || 'artist_name';
-        const params = new URLSearchParams({ page: yourAlbumsPage, per_page: YOUR_ALBUMS_PAGE_SIZE, sort, status });
-        if (search) params.set('search', search);
-        const resp = await fetch(`/api/discover/your-albums?${params}`);
-        const data = await resp.json();
-        if (!data.success) throw new Error(data.error);
-        yourAlbums = data.albums || [];
-        yourAlbumsTotal = data.total || 0;
-        const subtitle = document.getElementById('your-albums-subtitle');
-        if (subtitle && data.stats) {
-            const s = data.stats;
-            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
-        }
-        _renderYourAlbumsGrid(yourAlbums);
-        _renderYourAlbumsPagination(yourAlbumsTotal, yourAlbumsPage);
-    } catch (e) {
-        console.error('Error loading your albums grid:', e);
-        grid.innerHTML = '<div class="spotify-library-empty"><p>Failed to load albums</p></div>';
-    }
-}
-
-function _renderYourAlbumsGrid(albums) {
-    const grid = document.getElementById('your-albums-grid');
-    if (!grid) return;
-    if (!albums || albums.length === 0) {
-        grid.innerHTML = '<div class="spotify-library-empty"><p>No albums found</p></div>';
-        return;
-    }
-    let html = '';
-    albums.forEach((album, index) => {
-        const coverUrl = album.image_url || '/static/placeholder-album.png';
-        const year = album.release_date ? album.release_date.substring(0, 4) : '';
-        const badgeClass = album.in_library ? 'owned' : 'missing';
-        const badgeIcon = album.in_library ? '\u2713' : '\u2193';
-        const trackInfo = album.total_tracks ? `${album.total_tracks} tracks` : '';
-        const meta = [year, trackInfo].filter(Boolean).join(' \u00B7 ');
-        const sources = (album.source_services || []).join(', ');
-        html += `
-            <div class="spotify-library-card" onclick="openYourAlbumDownload(${index})" title="${escapeHtml(album.album_name)} \u2014 ${escapeHtml(album.artist_name)}">
-                <div class="spotify-library-card-img">
-                    <img src="${coverUrl}" alt="${escapeHtml(album.album_name)}" loading="lazy">
-                    <div class="spotify-library-card-badge ${badgeClass}">${badgeIcon}</div>
-                </div>
-                <div class="spotify-library-card-info">
-                    <p class="spotify-library-card-title">${escapeHtml(album.album_name)}</p>
-                    <p class="spotify-library-card-artist">${escapeHtml(album.artist_name)}</p>
-                    <p class="spotify-library-card-meta">${escapeHtml(meta)}</p>
-                </div>
-            </div>`;
-    });
-    grid.innerHTML = html;
-}
-
-function _renderYourAlbumsPagination(total, page) {
-    const container = document.getElementById('your-albums-pagination');
-    if (!container) return;
-    if (total <= YOUR_ALBUMS_PAGE_SIZE) { container.style.display = 'none'; return; }
-    container.style.display = '';
-    const totalPages = Math.ceil(total / YOUR_ALBUMS_PAGE_SIZE);
-    const start = (page - 1) * YOUR_ALBUMS_PAGE_SIZE + 1;
-    const end = Math.min(page * YOUR_ALBUMS_PAGE_SIZE, total);
-    container.innerHTML = `
-        <button class="spotify-library-page-btn" onclick="_yourAlbumsPrevPage()" ${page <= 1 ? 'disabled' : ''}>&larr; Previous</button>
-        <span class="spotify-library-page-info">${start}\u2013${end} of ${total}</span>
-        <button class="spotify-library-page-btn" onclick="_yourAlbumsNextPage()" ${page >= totalPages ? 'disabled' : ''}>Next &rarr;</button>
-    `;
-}
-
-function _yourAlbumsPrevPage() {
-    if (yourAlbumsPage > 1) { yourAlbumsPage--; loadYourAlbumsGrid(); }
-}
-function _yourAlbumsNextPage() {
-    const totalPages = Math.ceil(yourAlbumsTotal / YOUR_ALBUMS_PAGE_SIZE);
-    if (yourAlbumsPage < totalPages) { yourAlbumsPage++; loadYourAlbumsGrid(); }
-}
-
-async function openYourAlbumDownload(index) {
-    const album = yourAlbums[index];
-    if (!album) { showToast('Album data not found', 'error'); return; }
-    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
-    try {
-        // Prefer Spotify ID, fall back to Deezer, then search by name
-        let albumData = null;
-        const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-        if (album.spotify_album_id) {
-            const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
-            if (r.ok) albumData = await r.json();
-        }
-        if (!albumData && album.deezer_album_id) {
-            const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
-            if (r.ok) albumData = await r.json();
-        }
-        if (!albumData) {
-            // Last resort — search by name
-            const r = await fetch(`/api/discover/album/spotify/search?${nameParams}`);
-            if (r.ok) albumData = await r.json();
-        }
-        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-            throw new Error('No tracks found for this album');
-        }
-        const tracks = albumData.tracks.map(track => {
-            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-            if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
-            return {
-                id: track.id, name: track.name, artists,
-                album: {
-                    id: albumData.id, name: albumData.name,
-                    album_type: albumData.album_type || 'album',
-                    total_tracks: albumData.total_tracks || 0,
-                    release_date: albumData.release_date || '',
-                    images: albumData.images || []
-                },
-                duration_ms: track.duration_ms || 0,
-                track_number: track.track_number || 0
-            };
-        });
-        const virtualId = `discover_album_${album.spotify_album_id || album.deezer_album_id || album.tidal_album_id || index}`;
-        const albumObj = {
-            id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
-            total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
-            images: albumData.images || [], artists: [{ name: album.artist_name }]
-        };
-        const artistObj = { id: null, name: album.artist_name };
-        await openDownloadMissingModalForArtistAlbum(virtualId, albumData.name, tracks, albumObj, artistObj, false);
-        hideLoadingOverlay();
-    } catch (e) {
-        console.error('Error opening your album download:', e);
-        showToast(`Failed to load album: ${e.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-async function refreshYourAlbums() {
-    const btn = document.getElementById('your-albums-refresh-btn');
-    if (btn) btn.disabled = true;
-    const subtitle = document.getElementById('your-albums-subtitle');
-    if (subtitle) subtitle.textContent = 'Refreshing from connected services...';
-    try {
-        await fetch('/api/discover/your-albums/refresh?clear=true', { method: 'POST' });
-        showToast('Refresh started — checking for new albums...', 'info');
-        const poll = setInterval(async () => {
-            try {
-                const resp = await fetch('/api/discover/your-albums?page=1&per_page=48');
-                const data = await resp.json();
-                if (data.success && data.stats && data.stats.total > 0) {
-                    clearInterval(poll);
-                    loadYourAlbums();
-                    if (btn) btn.disabled = false;
-                }
-            } catch (e) { }
-        }, 4000);
-        setTimeout(() => { clearInterval(poll); if (btn) btn.disabled = false; }, 60000);
-    } catch (e) {
-        showToast('Failed to start refresh', 'error');
-        if (btn) btn.disabled = false;
-    }
-}
-
-async function openYourAlbumsSourcesModal() {
-    const existing = document.getElementById('ya-albums-sources-modal-overlay');
-    if (existing) existing.remove();
-
-    let enabled = ['spotify', 'tidal', 'deezer'];
-    let connected = [];
-    try {
-        const resp = await fetch('/api/discover/your-albums/sources');
-        if (resp.ok) {
-            const data = await resp.json();
-            if (data.enabled) enabled = data.enabled;
-            if (data.connected) connected = data.connected;
-        }
-    } catch (e) { }
-
-    const sourceInfo = [
-        { id: 'spotify', label: 'Spotify', icon: '\uD83C\uDFB5' },
-        { id: 'tidal', label: 'Tidal', icon: '\uD83C\uDF0A' },
-        { id: 'deezer', label: 'Deezer', icon: '\uD83C\uDFB6' },
-    ];
-    const state = {};
-    sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
-
-    const overlay = document.createElement('div');
-    overlay.id = 'ya-albums-sources-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    const rows = sourceInfo.map(s => {
-        const isConnected = connected.includes(s.id);
-        const isOn = state[s.id];
-        return `
-            <div class="ya-source-row${isConnected ? '' : ' disconnected'}" data-yaa-source="${s.id}" onclick="_yaaSourceRowClick('${s.id}')">
-                <div class="ya-source-row-left">
-                    <span style="font-size:18px">${s.icon}</span>
-                    <div>
-                        <div class="ya-source-name">${s.label}</div>
-                        <div class="ya-source-status">${isConnected ? 'Connected' : 'Not connected'}</div>
-                    </div>
-                </div>
-                <button class="ya-source-toggle${isOn ? ' on' : ''}" id="yaa-toggle-${s.id}" onclick="event.stopPropagation();_yaaSourceToggle('${s.id}')"></button>
-            </div>`;
-    }).join('');
-
-    overlay.innerHTML = `
-        <div class="ya-sources-modal">
-            <h2>Your Albums Sources</h2>
-            <p class="ya-sources-desc">Choose which connected services contribute albums to this section.</p>
-            <div class="ya-sources-list">${rows}</div>
-            <div class="ya-sources-footer">
-                <button class="ya-sources-cancel-btn" onclick="document.getElementById('ya-albums-sources-modal-overlay').remove()">Cancel</button>
-                <button class="ya-sources-save-btn" onclick="_yaaSourcesSave()">Save</button>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-    window._yaaSourcesState = state;
-}
-
-function _yaaSourceRowClick(id) {
-    const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
-    if (row && row.classList.contains('disconnected')) return;
-    _yaaSourceToggle(id);
-}
-function _yaaSourceToggle(id) {
-    const row = document.querySelector(`.ya-source-row[data-yaa-source="${id}"]`);
-    if (row && row.classList.contains('disconnected')) return;
-    window._yaaSourcesState[id] = !window._yaaSourcesState[id];
-    const btn = document.getElementById(`yaa-toggle-${id}`);
-    if (btn) btn.classList.toggle('on', window._yaaSourcesState[id]);
-}
-async function _yaaSourcesSave() {
-    const enabledArr = Object.entries(window._yaaSourcesState).filter(([, v]) => v).map(([k]) => k);
-    if (enabledArr.length === 0) { showToast('Select at least one source', 'error'); return; }
-    try {
-        const resp = await fetch('/api/settings', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ discover: { your_albums_sources: enabledArr.join(',') } })
-        });
-        if (resp.ok) {
-            document.getElementById('ya-albums-sources-modal-overlay')?.remove();
-            showToast('Sources saved — refresh to apply', 'success');
-            const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer' };
-            const subtitle = document.getElementById('your-albums-subtitle');
-            if (subtitle) {
-                const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
-                subtitle.textContent = `Albums you\u2019ve saved on ${names}`;
-            }
-        } else {
-            showToast('Failed to save sources', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to save sources', 'error');
-    }
-}
-
-async function downloadMissingYourAlbums() {
-    try {
-        const resp = await fetch('/api/discover/your-albums?page=1&per_page=1000&status=missing');
-        const data = await resp.json();
-        if (!data.success || !data.albums || data.albums.length === 0) {
-            showToast('No missing albums to download', 'info');
-            return;
-        }
-        const missing = data.albums.filter(a => !a.in_library);
-        if (missing.length === 0) { showToast('All albums are already in your library!', 'success'); return; }
-        if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your saved albums?`)) return;
-        showToast(`Starting download for ${missing.length} albums...`, 'info');
-        for (let i = 0; i < missing.length; i++) {
-            const album = missing[i];
-            try {
-                showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
-                const nameParams = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-                let albumData = null;
-                if (album.spotify_album_id) {
-                    const r = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${nameParams}`);
-                    if (r.ok) albumData = await r.json();
-                }
-                if (!albumData && album.deezer_album_id) {
-                    const r = await fetch(`/api/discover/album/deezer/${album.deezer_album_id}?${nameParams}`);
-                    if (r.ok) albumData = await r.json();
-                }
-                if (!albumData || !albumData.tracks || albumData.tracks.length === 0) continue;
-                const tracks = albumData.tracks.map(track => {
-                    let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-                    if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
-                    return {
-                        id: track.id, name: track.name, artists,
-                        album: {
-                            id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
-                            total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
-                            images: albumData.images || []
-                        },
-                        duration_ms: track.duration_ms || 0, track_number: track.track_number || 0
-                    };
-                });
-                const virtualId = `your_albums_${album.spotify_album_id || album.deezer_album_id || i}`;
-                await openDownloadMissingModalForYouTube(virtualId, albumData.name, tracks,
-                    { name: album.artist_name, source: albumData.source || 'spotify' },
-                    {
-                        id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
-                        total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
-                        images: albumData.images || []
-                    }
-                );
-            } catch (err) { console.error(`Error queuing ${album.album_name}:`, err); }
-        }
-    } catch (e) {
-        console.error('Error downloading missing your albums:', e);
-        showToast(`Error: ${e.message}`, 'error');
-    }
-}
-
-// ===============================
-// SPOTIFY LIBRARY SECTION
-// ===============================
-
-let spotifyLibraryAlbums = [];
-let spotifyLibraryPage = 0;
-let spotifyLibraryTotal = 0;
-const SPOTIFY_LIBRARY_PAGE_SIZE = 48;
-let _spotifyLibrarySearchTimeout = null;
-
-function debouncedSpotifyLibrarySearch() {
-    clearTimeout(_spotifyLibrarySearchTimeout);
-    _spotifyLibrarySearchTimeout = setTimeout(() => {
-        spotifyLibraryPage = 0;
-        loadSpotifyLibraryAlbums();
-    }, 400);
-}
-
-async function loadSpotifyLibrarySection() {
-    try {
-        const section = document.getElementById('spotify-library-section');
-        if (!section) return;
-
-        const response = await fetch(`/api/discover/spotify-library?offset=0&limit=${SPOTIFY_LIBRARY_PAGE_SIZE}`);
-        if (!response.ok) throw new Error('Failed to fetch');
-
-        const data = await response.json();
-        if (!data.success || !data.albums || data.albums.length === 0) {
-            section.style.display = 'none';
-            return;
-        }
-
-        section.style.display = '';
-        spotifyLibraryAlbums = data.albums;
-        spotifyLibraryTotal = data.total;
-        spotifyLibraryPage = 0;
-
-        // Update subtitle with stats
-        const subtitle = document.getElementById('spotify-library-subtitle');
-        if (subtitle && data.stats) {
-            const s = data.stats;
-            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
-        }
-
-        // Show download missing button if there are missing albums
-        const dlBtn = document.getElementById('spotify-library-download-missing-btn');
-        if (dlBtn && data.stats && data.stats.missing > 0) {
-            dlBtn.style.display = '';
-        }
-
-        // Show filters
-        const filters = document.getElementById('spotify-library-filters');
-        if (filters) filters.style.display = '';
-
-        renderSpotifyLibraryGrid(data.albums);
-        renderSpotifyLibraryPagination(data.total, 0);
-
-    } catch (error) {
-        console.error('Error loading Spotify library section:', error);
-        const section = document.getElementById('spotify-library-section');
-        if (section) section.style.display = 'none';
-    }
-}
-
-async function loadSpotifyLibraryAlbums() {
-    const grid = document.getElementById('spotify-library-grid');
-    if (!grid) return;
-
-    grid.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading...</p></div>';
-
-    try {
-        const search = (document.getElementById('spotify-library-search')?.value || '').trim();
-        const status = document.getElementById('spotify-library-status-filter')?.value || 'all';
-        const sort = document.getElementById('spotify-library-sort')?.value || 'date_saved';
-        const offset = spotifyLibraryPage * SPOTIFY_LIBRARY_PAGE_SIZE;
-
-        const params = new URLSearchParams({
-            offset, limit: SPOTIFY_LIBRARY_PAGE_SIZE, sort, sort_dir: 'desc', status
-        });
-        if (search) params.set('search', search);
-
-        const response = await fetch(`/api/discover/spotify-library?${params}`);
-        const data = await response.json();
-
-        if (!data.success) throw new Error(data.error);
-
-        spotifyLibraryAlbums = data.albums;
-        spotifyLibraryTotal = data.total;
-
-        // Update subtitle
-        const subtitle = document.getElementById('spotify-library-subtitle');
-        if (subtitle && data.stats) {
-            const s = data.stats;
-            subtitle.textContent = `${s.total} albums \u00B7 ${s.owned} owned \u00B7 ${s.missing} missing`;
-        }
-
-        renderSpotifyLibraryGrid(data.albums);
-        renderSpotifyLibraryPagination(data.total, offset);
-
-    } catch (error) {
-        console.error('Error loading Spotify library albums:', error);
-        grid.innerHTML = '<div class="spotify-library-empty"><p>Failed to load albums</p></div>';
-    }
-}
-
-function renderSpotifyLibraryGrid(albums) {
-    const grid = document.getElementById('spotify-library-grid');
-    if (!grid) return;
-
-    if (!albums || albums.length === 0) {
-        grid.innerHTML = '<div class="spotify-library-empty"><p>No albums found</p></div>';
-        return;
-    }
-
-    let html = '';
-    albums.forEach((album, index) => {
-        const coverUrl = album.image_url || '/static/placeholder-album.png';
-        const year = album.release_date ? album.release_date.substring(0, 4) : '';
-        const badgeClass = album.in_library ? 'owned' : 'missing';
-        const badgeIcon = album.in_library ? '\u2713' : '\u2193';
-        const trackInfo = album.total_tracks ? `${album.total_tracks} tracks` : '';
-        const meta = [year, trackInfo].filter(Boolean).join(' \u00B7 ');
-
-        html += `
-            <div class="spotify-library-card" onclick="openSpotifyLibraryAlbumDownload(${index})" title="${album.album_name} — ${album.artist_name}">
-                <div class="spotify-library-card-img">
-                    <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
-                    <div class="spotify-library-card-badge ${badgeClass}">${badgeIcon}</div>
-                </div>
-                <div class="spotify-library-card-info">
-                    <p class="spotify-library-card-title">${album.album_name}</p>
-                    <p class="spotify-library-card-artist">${album.artist_name}</p>
-                    <p class="spotify-library-card-meta">${meta}</p>
-                </div>
-            </div>
-        `;
-    });
-
-    grid.innerHTML = html;
-}
-
-function renderSpotifyLibraryPagination(total, offset) {
-    const container = document.getElementById('spotify-library-pagination');
-    if (!container) return;
-
-    if (total <= SPOTIFY_LIBRARY_PAGE_SIZE) {
-        container.style.display = 'none';
-        return;
-    }
-
-    container.style.display = '';
-    const totalPages = Math.ceil(total / SPOTIFY_LIBRARY_PAGE_SIZE);
-    const currentPage = Math.floor(offset / SPOTIFY_LIBRARY_PAGE_SIZE) + 1;
-    const showEnd = Math.min(offset + SPOTIFY_LIBRARY_PAGE_SIZE, total);
-
-    container.innerHTML = `
-        <button class="spotify-library-page-btn" onclick="spotifyLibraryPrevPage()" ${currentPage <= 1 ? 'disabled' : ''}>&larr; Previous</button>
-        <span class="spotify-library-page-info">${offset + 1}\u2013${showEnd} of ${total}</span>
-        <button class="spotify-library-page-btn" onclick="spotifyLibraryNextPage()" ${currentPage >= totalPages ? 'disabled' : ''}>Next &rarr;</button>
-    `;
-}
-
-function spotifyLibraryPrevPage() {
-    if (spotifyLibraryPage > 0) {
-        spotifyLibraryPage--;
-        loadSpotifyLibraryAlbums();
-    }
-}
-
-function spotifyLibraryNextPage() {
-    const totalPages = Math.ceil(spotifyLibraryTotal / SPOTIFY_LIBRARY_PAGE_SIZE);
-    if (spotifyLibraryPage < totalPages - 1) {
-        spotifyLibraryPage++;
-        loadSpotifyLibraryAlbums();
-    }
-}
-
-async function openSpotifyLibraryAlbumDownload(index) {
-    const album = spotifyLibraryAlbums[index];
-    if (!album) {
-        showToast('Album data not found', 'error');
-        return;
-    }
-
-    console.log(`\u{1F4E5} Opening download modal for Spotify library album: ${album.album_name}`);
-    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
-
-    try {
-        const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-        const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
-        if (!response.ok) throw new Error('Failed to fetch album tracks');
-
-        const albumData = await response.json();
-        if (!albumData.tracks || albumData.tracks.length === 0) {
-            throw new Error('No tracks found in album');
-        }
-
-        const spotifyTracks = albumData.tracks.map(track => {
-            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-            if (Array.isArray(artists)) {
-                artists = artists.map(a => a.name || a);
-            }
-            return {
-                id: track.id,
-                name: track.name,
-                artists: artists,
-                album: {
-                    id: albumData.id,
-                    name: albumData.name,
-                    album_type: albumData.album_type || 'album',
-                    total_tracks: albumData.total_tracks || 0,
-                    release_date: albumData.release_date || '',
-                    images: albumData.images || []
-                },
-                duration_ms: track.duration_ms || 0,
-                track_number: track.track_number || 0
-            };
-        });
-
-        const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
-        const artistContext = {
-            id: album.artist_id,
-            name: album.artist_name,
-            source: 'spotify'
-        };
-        const albumContext = {
-            id: albumData.id,
-            name: albumData.name,
-            album_type: albumData.album_type || 'album',
-            total_tracks: albumData.total_tracks || 0,
-            release_date: albumData.release_date || '',
-            images: albumData.images || []
-        };
-
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error('Error opening Spotify library album download:', error);
-        showToast(`Failed to load album: ${error.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-async function refreshSpotifyLibraryCache() {
-    try {
-        showToast('Refreshing Spotify library...', 'info');
-        const response = await fetch('/api/discover/spotify-library/refresh', { method: 'POST' });
-        const data = await response.json();
-        if (data.success) {
-            showToast('Spotify library refresh started — will update shortly', 'success');
-            // Reload after a delay to let the sync run
-            setTimeout(() => loadSpotifyLibrarySection(), 10000);
-        } else {
-            showToast(`Error: ${data.error}`, 'error');
-        }
-    } catch (error) {
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-async function downloadMissingSpotifyLibraryAlbums() {
-    // Fetch all missing albums (no pagination limit)
-    try {
-        const response = await fetch('/api/discover/spotify-library?status=missing&limit=500&offset=0');
-        const data = await response.json();
-        if (!data.success || !data.albums || data.albums.length === 0) {
-            showToast('No missing albums to download', 'info');
-            return;
-        }
-
-        const missing = data.albums.filter(a => !a.in_library);
-        if (missing.length === 0) {
-            showToast('All albums are already in your library!', 'success');
-            return;
-        }
-
-        if (!confirm(`Download ${missing.length} missing album${missing.length > 1 ? 's' : ''} from your Spotify library?`)) {
-            return;
-        }
-
-        showToast(`Starting download for ${missing.length} albums...`, 'info');
-
-        // Download one at a time to avoid overwhelming the system
-        for (let i = 0; i < missing.length; i++) {
-            const album = missing[i];
-            try {
-                showToast(`Queuing ${i + 1}/${missing.length}: ${album.album_name}`, 'info');
-
-                const _params = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-                const response = await fetch(`/api/discover/album/spotify/${album.spotify_album_id}?${_params}`);
-                if (!response.ok) continue;
-
-                const albumData = await response.json();
-                if (!albumData.tracks || albumData.tracks.length === 0) continue;
-
-                const spotifyTracks = albumData.tracks.map(track => {
-                    let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-                    if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
-                    return {
-                        id: track.id,
-                        name: track.name,
-                        artists: artists,
-                        album: {
-                            id: albumData.id,
-                            name: albumData.name,
-                            album_type: albumData.album_type || 'album',
-                            total_tracks: albumData.total_tracks || 0,
-                            release_date: albumData.release_date || '',
-                            images: albumData.images || []
-                        },
-                        duration_ms: track.duration_ms || 0,
-                        track_number: track.track_number || 0
-                    };
-                });
-
-                const virtualPlaylistId = `spotify_library_${album.spotify_album_id}`;
-                await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, {
-                    id: album.artist_id, name: album.artist_name, source: 'spotify'
-                }, {
-                    id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album',
-                    total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '',
-                    images: albumData.images || []
-                });
-
-            } catch (err) {
-                console.error(`Error downloading album ${album.album_name}:`, err);
-            }
-        }
-
-    } catch (error) {
-        console.error('Error downloading missing Spotify library albums:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-async function loadDiscoverReleaseRadar() {
-    try {
-        const playlistContainer = document.getElementById('release-radar-playlist');
-        if (!playlistContainer) return;
-
-        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading release radar...</p></div>';
-
-        const response = await fetch('/api/discover/release-radar');
-        if (!response.ok) {
-            throw new Error('Failed to fetch release radar');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>No new releases available</p></div>';
-            return;
-        }
-
-        // Store tracks for download/sync functionality
-        discoverReleaseRadarTracks = data.tracks;
-
-        // Build compact playlist HTML
-        let html = '<div class="discover-playlist-tracks-compact">';
-        data.tracks.forEach((track, index) => {
-            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
-            const durationMin = Math.floor(track.duration_ms / 60000);
-            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
-            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-
-            html += `
-                <div class="discover-playlist-track-compact" data-track-index="${index}">
-                    <div class="track-compact-number">${index + 1}</div>
-                    <div class="track-compact-image">
-                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
-                    </div>
-                    <div class="track-compact-info">
-                        <div class="track-compact-name">${track.track_name}</div>
-                        <div class="track-compact-artist">${track.artist_name}</div>
-                    </div>
-                    <div class="track-compact-album">${track.album_name}</div>
-                    <div class="track-compact-duration">${duration}</div>
-                </div>
-            `;
-        });
-        html += '</div>';
-
-        playlistContainer.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading release radar:', error);
-        const playlistContainer = document.getElementById('release-radar-playlist');
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load release radar</p></div>';
-        }
-    }
-}
-
-async function loadDiscoverWeekly() {
-    try {
-        const playlistContainer = document.getElementById('discovery-weekly-playlist');
-        if (!playlistContainer) return;
-
-        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Curating your discovery playlist...</p></div>';
-
-        const response = await fetch('/api/discover/weekly');
-        if (!response.ok) {
-            throw new Error('Failed to fetch discovery weekly');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available yet</p></div>';
-            return;
-        }
-
-        // Store tracks for download/sync functionality
-        discoverWeeklyTracks = data.tracks;
-
-        // Build compact playlist HTML
-        let html = '<div class="discover-playlist-tracks-compact">';
-        data.tracks.forEach((track, index) => {
-            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
-            const durationMin = Math.floor(track.duration_ms / 60000);
-            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
-            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-
-            html += `
-                <div class="discover-playlist-track-compact" data-track-index="${index}">
-                    <div class="track-compact-number">${index + 1}</div>
-                    <div class="track-compact-image">
-                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
-                    </div>
-                    <div class="track-compact-info">
-                        <div class="track-compact-name">${track.track_name}</div>
-                        <div class="track-compact-artist">${track.artist_name}</div>
-                    </div>
-                    <div class="track-compact-album">${track.album_name}</div>
-                    <div class="track-compact-duration">${duration}</div>
-                </div>
-            `;
-        });
-        html += '</div>';
-
-        playlistContainer.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading discovery weekly:', error);
-        const playlistContainer = document.getElementById('discovery-weekly-playlist');
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load discovery weekly</p></div>';
-        }
-    }
-}
-
-// ===============================
-// DECADE BROWSER
-// ===============================
-
-let selectedDecade = null;
-let decadeTracks = [];
-
-async function loadDecadeBrowser() {
-    try {
-        const carousel = document.getElementById('decade-browser-carousel');
-        if (!carousel) return;
-
-        // Fetch available decades from backend
-        const response = await fetch('/api/discover/decades/available');
-        if (!response.ok) {
-            throw new Error('Failed to fetch available decades');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.decades || data.decades.length === 0) {
-            carousel.innerHTML = '<div class="discover-empty"><p>No decade content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
-            return;
-        }
-
-        // Build decade cards matching Recent Releases style
-        let html = '';
-        data.decades.forEach(decade => {
-            const icon = getDecadeIcon(decade.year);
-            const label = `${decade.year}s`;
-            html += `
-                <div class="discover-card decade-card-modern" onclick="openDecadePlaylist(${decade.year})">
-                    <div class="discover-card-image decade-card-image">
-                        <div class="decade-icon-large">${icon}</div>
-                    </div>
-                    <div class="discover-card-info">
-                        <h4 class="discover-card-title">${label}</h4>
-                        <p class="discover-card-subtitle">${decade.track_count} tracks</p>
-                        <p class="discover-card-meta">Classics</p>
-                    </div>
-                </div>
-            `;
-        });
-
-        carousel.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading decade browser:', error);
-        const carousel = document.getElementById('decade-browser-carousel');
-        if (carousel) {
-            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load decades</p></div>';
-        }
-    }
-}
-
-function getDecadeIcon(year) {
-    const icons = {
-        1950: '🎺',
-        1960: '🎸',
-        1970: '🕺',
-        1980: '📻',
-        1990: '💿',
-        2000: '📱',
-        2010: '🎧',
-        2020: '🌐'
-    };
-    return icons[year] || '🎵';
-}
-
-async function openDecadePlaylist(decade) {
-    try {
-        showLoadingOverlay(`Loading ${decade}s playlist...`);
-
-        const response = await fetch(`/api/discover/decade/${decade}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch decade playlist');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            const message = data.message || `No tracks found for the ${decade}s`;
-            showToast(message, 'info');
-            hideLoadingOverlay();
-            return;
-        }
-
-        selectedDecade = decade;
-        decadeTracks = data.tracks;
-
-        // Open download modal
-        const playlistName = `${decade}s Classics`;
-        const virtualPlaylistId = `decade_${decade}`;
-
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, data.tracks);
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error(`Error opening ${decade}s playlist:`, error);
-        showToast(`Failed to load ${decade}s playlist`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-// ===============================
-// GENRE BROWSER
-// ===============================
-
-let selectedGenre = null;
-let genreTracks = [];
-
-async function loadGenreBrowser() {
-    try {
-        const carousel = document.getElementById('genre-browser-carousel');
-        if (!carousel) return;
-
-        // Fetch available genres from backend
-        const response = await fetch('/api/discover/genres/available');
-        if (!response.ok) {
-            throw new Error('Failed to fetch available genres');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.genres || data.genres.length === 0) {
-            carousel.innerHTML = '<div class="discover-empty"><p>No genre content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
-            return;
-        }
-
-        // Build genre cards matching Recent Releases style
-        let html = '';
-        data.genres.forEach(genre => {
-            const icon = getGenreIcon(genre.name);
-            const displayName = capitalizeGenre(genre.name);
-            html += `
-                <div class="discover-card genre-card-modern" onclick="openGenrePlaylist('${escapeForInlineJs(genre.name)}')">
-                    <div class="discover-card-image genre-card-image">
-                        <div class="genre-icon-large">${icon}</div>
-                    </div>
-                    <div class="discover-card-info">
-                        <h4 class="discover-card-title">${displayName}</h4>
-                        <p class="discover-card-subtitle">${genre.track_count} tracks</p>
-                        <p class="discover-card-meta">Curated</p>
-                    </div>
-                </div>
-            `;
-        });
-
-        carousel.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading genre browser:', error);
-        const carousel = document.getElementById('genre-browser-carousel');
-        if (carousel) {
-            carousel.innerHTML = '<div class="discover-empty"><p>Failed to load genres</p></div>';
-        }
-    }
-}
-
-function getGenreIcon(genreName) {
-    const genre = genreName.toLowerCase();
-
-    // Parent genre exact matches (consolidated categories)
-    if (genre === 'electronic/dance') return '🎹';
-    if (genre === 'hip hop/rap') return '🎤';
-    if (genre === 'rock') return '🎸';
-    if (genre === 'pop') return '🎵';
-    if (genre === 'r&b/soul') return '🎙️';
-    if (genre === 'jazz') return '🎺';
-    if (genre === 'classical') return '🎻';
-    if (genre === 'metal') return '🤘';
-    if (genre === 'country') return '🪕';
-    if (genre === 'folk/indie') return '🎧';
-    if (genre === 'latin') return '💃';
-    if (genre === 'reggae/dancehall') return '🌴';
-    if (genre === 'world') return '🌍';
-    if (genre === 'alternative') return '🎭';
-    if (genre === 'blues') return '🎸';
-    if (genre === 'funk/disco') return '🕺';
-
-    // Fallback: partial matching for specific genres
-    if (genre.includes('house') || genre.includes('techno') || genre.includes('edm') ||
-        genre.includes('electro') || genre.includes('trance') || genre.includes('electronic')) {
-        return '🎹';
-    }
-    if (genre.includes('hip hop') || genre.includes('rap') || genre.includes('trap')) {
-        return '🎤';
-    }
-    if (genre.includes('rock') || genre.includes('punk')) {
-        return '🎸';
-    }
-    if (genre.includes('metal')) {
-        return '🤘';
-    }
-    if (genre.includes('jazz') || genre.includes('blues')) {
-        return '🎺';
-    }
-    if (genre.includes('pop')) {
-        return '🎵';
-    }
-    if (genre.includes('r&b') || genre.includes('soul')) {
-        return '🎙️';
-    }
-    if (genre.includes('country') || genre.includes('folk')) {
-        return '🪕';
-    }
-    if (genre.includes('classical') || genre.includes('orchestra')) {
-        return '🎻';
-    }
-    if (genre.includes('indie') || genre.includes('alternative')) {
-        return '🎧';
-    }
-    if (genre.includes('latin') || genre.includes('reggaeton') || genre.includes('salsa')) {
-        return '💃';
-    }
-    if (genre.includes('reggae') || genre.includes('dancehall')) {
-        return '🌴';
-    }
-    if (genre.includes('funk') || genre.includes('disco')) {
-        return '🕺';
-    }
-
-    // Default
-    return '🎶';
-}
-
-function capitalizeGenre(genre) {
-    // Capitalize each word in genre, handling both spaces and slashes
-    return genre.split(/(\s|\/)/g)
-        .map(part => {
-            if (part === ' ' || part === '/') return part;
-            return part.charAt(0).toUpperCase() + part.slice(1);
-        })
-        .join('');
-}
-
-function escapeHtml(text) {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-async function openGenrePlaylist(genre) {
-    try {
-        showLoadingOverlay(`Loading ${capitalizeGenre(genre)} playlist...`);
-
-        const response = await fetch(`/api/discover/genre/${encodeURIComponent(genre)}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch genre playlist');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            const message = data.message || `No tracks found for ${genre}`;
-            showToast(message, 'info');
-            hideLoadingOverlay();
-            return;
-        }
-
-        selectedGenre = genre;
-        genreTracks = data.tracks;
-
-        // Open download modal
-        const playlistName = `${capitalizeGenre(genre)} Mix`;
-        const virtualPlaylistId = `genre_${genre.replace(/\s+/g, '_')}`;
-
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, data.tracks);
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error(`Error opening ${genre} playlist:`, error);
-        showToast(`Failed to load ${genre} playlist`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-// ===============================
-// TIME MACHINE (TABBED BY DECADE)
-// ===============================
-
-let decadeTracksCache = {}; // Store tracks for each decade
-let activeDecade = null;
-
-async function loadDecadeBrowserTabs() {
-    try {
-        const tabsContainer = document.getElementById('decade-tabs');
-        const contentsContainer = document.getElementById('decade-tab-contents');
-
-        if (!tabsContainer || !contentsContainer) return;
-
-        // Fetch available decades from backend
-        const response = await fetch('/api/discover/decades/available');
-        if (!response.ok) {
-            throw new Error('Failed to fetch available decades');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.decades || data.decades.length === 0) {
-            tabsContainer.innerHTML = '<div class="discover-empty"><p>No decade content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
-            return;
-        }
-
-        // Build decade tabs
-        let tabsHTML = '';
-        let contentsHTML = '';
-
-        data.decades.forEach((decade, index) => {
-            const isActive = index === 0;
-            const icon = getDecadeIcon(decade.year);
-            const tabId = `decade-${decade.year}`;
-
-            // Tab button
-            tabsHTML += `
-                <button class="decade-tab ${isActive ? 'active' : ''}"
-                        data-decade="${decade.year}"
-                        onclick="switchDecadeTab(${decade.year})">
-                    ${icon} ${decade.year}s
-                </button>
-            `;
-
-            // Tab content
-            contentsHTML += `
-                <div class="decade-tab-content ${isActive ? 'active' : ''}" id="${tabId}-content">
-                    <!-- Action Buttons -->
-                    <div class="decade-actions">
-                        <div class="discover-section-header">
-                            <div>
-                                <h3 style="margin: 0; color: #fff; font-size: 18px;">${decade.year}s Classics</h3>
-                                <p id="${tabId}-subtitle" style="margin: 4px 0 0 0; color: #999; font-size: 13px;">${decade.track_count} tracks</p>
-                            </div>
-                            <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForDecade(${decade.year})" title="Download missing tracks">
-                                    <span class="button-icon">↓</span>
-                                    <span class="button-text">Download</span>
-                                </button>
-                                <button class="action-button primary" id="${tabId}-sync-btn" onclick="startDecadeSync(${decade.year})" title="Sync to media server">
-                                    <span class="button-icon">⟳</span>
-                                    <span class="button-text">Sync</span>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Sync Status Display -->
-                        <div class="discover-sync-status" id="${tabId}-sync-status" style="display: none;">
-                            <div class="sync-status-content">
-                                <div class="sync-status-label">
-                                    <span class="sync-icon">⟳</span>
-                                    <span>Syncing to media server...</span>
-                                </div>
-                                <div class="sync-status-stats">
-                                    <span class="sync-stat">✓ <span id="${tabId}-sync-completed">0</span></span>
-                                    <span class="sync-stat">⏳ <span id="${tabId}-sync-pending">0</span></span>
-                                    <span class="sync-stat">✗ <span id="${tabId}-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="${tabId}-sync-percentage">0</span>%)</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Track List -->
-                    <div class="discover-playlist-container compact" id="${tabId}-playlist">
-                        <div class="discover-loading"><div class="loading-spinner"></div><p>Loading ${decade.year}s tracks...</p></div>
-                    </div>
-                </div>
-            `;
-        });
-
-        tabsContainer.innerHTML = tabsHTML;
-        contentsContainer.innerHTML = contentsHTML;
-
-        // Load first decade's tracks
-        if (data.decades.length > 0) {
-            await loadDecadeTracks(data.decades[0].year);
-        }
-
-    } catch (error) {
-        console.error('Error loading decade browser tabs:', error);
-        const tabsContainer = document.getElementById('decade-tabs');
-        if (tabsContainer) {
-            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load decades</p></div>';
-        }
-    }
-}
-
-function switchDecadeTab(decade) {
-    // Update tab buttons
-    const tabs = document.querySelectorAll('.decade-tab');
-    tabs.forEach(tab => {
-        if (parseInt(tab.getAttribute('data-decade')) === decade) {
-            tab.classList.add('active');
-        } else {
-            tab.classList.remove('active');
-        }
-    });
-
-    // Update tab content
-    const tabContents = document.querySelectorAll('.decade-tab-content');
-    tabContents.forEach(content => {
-        if (content.id === `decade-${decade}-content`) {
-            content.classList.add('active');
-        } else {
-            content.classList.remove('active');
-        }
-    });
-
-    // Load tracks if not already loaded
-    if (!decadeTracksCache[decade]) {
-        loadDecadeTracks(decade);
-    }
-}
-
-async function loadDecadeTracks(decade) {
-    try {
-        const playlistContainer = document.getElementById(`decade-${decade}-playlist`);
-        if (!playlistContainer) return;
-
-        const response = await fetch(`/api/discover/decade/${decade}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch decade playlist');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks found for the ' + decade + 's</p></div>';
-            return;
-        }
-
-        // Store tracks in cache
-        decadeTracksCache[decade] = data.tracks;
-        activeDecade = decade;
-
-        // Build compact playlist HTML
-        let html = '<div class="discover-playlist-tracks-compact">';
-        data.tracks.forEach((track, index) => {
-            // Extract track data from track_data_json if available
-            let trackData = track;
-            if (track.track_data_json) {
-                trackData = track.track_data_json;
-            }
-
-            // Get track properties with fallbacks
-            const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
-            const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
-            const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
-            const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
-            const durationMs = trackData.duration_ms || track.duration_ms || 0;
-
-            const durationMin = Math.floor(durationMs / 60000);
-            const durationSec = Math.floor((durationMs % 60000) / 1000);
-            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-
-            html += `
-                <div class="discover-playlist-track-compact" data-track-index="${index}">
-                    <div class="track-compact-number">${index + 1}</div>
-                    <div class="track-compact-image">
-                        <img src="${coverUrl}" alt="${albumName}" loading="lazy">
-                    </div>
-                    <div class="track-compact-info">
-                        <div class="track-compact-name">${trackName}</div>
-                        <div class="track-compact-artist">${artistName}</div>
-                    </div>
-                    <div class="track-compact-album">${albumName}</div>
-                    <div class="track-compact-duration">${duration}</div>
-                </div>
-            `;
-        });
-        html += '</div>';
-
-        playlistContainer.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading decade tracks:', error);
-        const playlistContainer = document.getElementById(`decade-${decade}-playlist`);
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load decade tracks</p></div>';
-        }
-    }
-}
-
-async function startDecadeSync(decade) {
-    const tracks = decadeTracksCache[decade];
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks available for this decade', 'warning');
-        return;
-    }
-
-    // Convert to format expected by sync API
-    const spotifyTracks = tracks.map(track => {
-        // Extract track data from track_data_json if available
-        let trackData = track;
-        if (track.track_data_json) {
-            trackData = track.track_data_json;
-        }
-
-        // Build properly formatted Spotify track object
-        let spotifyTrack = {
-            id: trackData.id || track.spotify_track_id,
-            name: trackData.name || trackData.track_name || track.track_name,
-            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
-            album: trackData.album || {
-                name: trackData.album_name || track.album_name,
-                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
-            },
-            duration_ms: trackData.duration_ms || track.duration_ms || 0
-        };
-
-        // Normalize artists to array of strings for sync compatibility
-        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-        }
-
-        return spotifyTrack;
-    });
-
-    const virtualPlaylistId = `discover_decade_${decade}`;
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: `${decade}s Classics`,
-        track_count: spotifyTracks.length
-    };
-
-    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
-        spotifyPlaylists.push(virtualPlaylist);
-    }
-
-    // Show sync status display
-    const statusDisplay = document.getElementById(`decade-${decade}-sync-status`);
-    if (statusDisplay) statusDisplay.style.display = 'block';
-
-    // Disable sync button
-    const syncButton = document.getElementById(`decade-${decade}-sync-btn`);
-    if (syncButton) {
-        syncButton.disabled = true;
-        syncButton.style.opacity = '0.5';
-        syncButton.style.cursor = 'not-allowed';
-    }
-
-    // Start sync
-    await startPlaylistSync(virtualPlaylistId);
-
-    // Start polling
-    startDecadeSyncPolling(decade, virtualPlaylistId);
-}
-
-function startDecadeSyncPolling(decade, virtualPlaylistId) {
-    const pollerId = `decade_${decade}`;
-
-    if (discoverSyncPollers[pollerId]) {
-        clearInterval(discoverSyncPollers[pollerId]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
-        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
-            const el = (id) => document.getElementById(id);
-            if (el(`decade-${decade}-sync-completed`)) el(`decade-${decade}-sync-completed`).textContent = matched;
-            if (el(`decade-${decade}-sync-pending`)) el(`decade-${decade}-sync-pending`).textContent = pending;
-            if (el(`decade-${decade}-sync-failed`)) el(`decade-${decade}-sync-failed`).textContent = failed;
-            if (el(`decade-${decade}-sync-percentage`)) el(`decade-${decade}-sync-percentage`).textContent = pct;
-            if (data.status === 'finished') {
-                if (discoverSyncPollers[pollerId]) { clearInterval(discoverSyncPollers[pollerId]); delete discoverSyncPollers[pollerId]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
-                delete _syncProgressCallbacks[virtualPlaylistId];
-                const syncButton = el(`decade-${decade}-sync-btn`);
-                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
-                showToast(`${decade}s Classics sync complete!`, 'success');
-                setTimeout(() => { const sd = el(`decade-${decade}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
-            }
-        };
-    }
-
-    discoverSyncPollers[pollerId] = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
-            if (!response.ok) return;
-
-            const data = await response.json();
-            const progress = data.progress || {};
-
-            const completedEl = document.getElementById(`decade-${decade}-sync-completed`);
-            const pendingEl = document.getElementById(`decade-${decade}-sync-pending`);
-            const failedEl = document.getElementById(`decade-${decade}-sync-failed`);
-            const percentageEl = document.getElementById(`decade-${decade}-sync-percentage`);
-
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-            if (completedEl) completedEl.textContent = matched;
-            if (pendingEl) pendingEl.textContent = pending;
-            if (failedEl) failedEl.textContent = failed;
-            if (percentageEl) percentageEl.textContent = completionPercentage;
-
-            if (data.status === 'finished') {
-                clearInterval(discoverSyncPollers[pollerId]);
-                delete discoverSyncPollers[pollerId];
-
-                const syncButton = document.getElementById(`decade-${decade}-sync-btn`);
-                if (syncButton) {
-                    syncButton.disabled = false;
-                    syncButton.style.opacity = '1';
-                    syncButton.style.cursor = 'pointer';
-                }
-
-                showToast(`${decade}s Classics sync complete!`, 'success');
-
-                setTimeout(() => {
-                    const statusDisplay = document.getElementById(`decade-${decade}-sync-status`);
-                    if (statusDisplay) statusDisplay.style.display = 'none';
-                }, 3000);
-            }
-        } catch (error) {
-            console.error(`Error polling sync status for decade ${decade}:`, error);
-        }
-    }, 500);
-}
-
-async function openDownloadModalForDecade(decade) {
-    const tracks = decadeTracksCache[decade];
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks available for this decade', 'warning');
-        return;
-    }
-
-    // Convert to format expected by download modal
-    const spotifyTracks = tracks.map(track => {
-        // Extract track data from track_data_json if available
-        let trackData = track;
-        if (track.track_data_json) {
-            trackData = track.track_data_json;
-        }
-
-        // Build properly formatted Spotify track object
-        let spotifyTrack = {
-            id: trackData.id || track.spotify_track_id,
-            name: trackData.name || trackData.track_name || track.track_name,
-            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
-            album: trackData.album || {
-                name: trackData.album_name || track.album_name,
-                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
-            },
-            duration_ms: trackData.duration_ms || track.duration_ms || 0
-        };
-
-        return spotifyTrack;
-    });
-
-    const playlistName = `${decade}s Classics`;
-    const virtualPlaylistId = `decade_${decade}`;
-
-    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-}
-
-// ===============================
-// BROWSE BY GENRE (TABBED BY GENRE)
-// ===============================
-
-let genreTracksCache = {}; // Store tracks for each genre
-let activeGenre = null;
-let availableGenres = [];
-
-async function loadGenreBrowserTabs() {
-    try {
-        const tabsContainer = document.getElementById('genre-tabs');
-        const contentsContainer = document.getElementById('genre-tab-contents');
-
-        if (!tabsContainer || !contentsContainer) return;
-
-        // Fetch available genres from backend
-        const response = await fetch('/api/discover/genres/available');
-        if (!response.ok) {
-            throw new Error('Failed to fetch available genres');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.genres || data.genres.length === 0) {
-            tabsContainer.innerHTML = '<div class="discover-empty"><p>No genre content available yet. Run a watchlist scan to populate your discovery pool!</p></div>';
-            return;
-        }
-
-        availableGenres = data.genres;
-
-        // Build genre tabs (limit to first 8-10 to avoid overcrowding)
-        const displayGenres = data.genres.slice(0, 10);
-        let tabsHTML = '';
-        let contentsHTML = '';
-
-        displayGenres.forEach((genre, index) => {
-            const isActive = index === 0;
-            const icon = getGenreIcon(genre.name);
-            const genreName = genre.name;
-            const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
-            const tabId = `genre-${genreId}`;
-
-            // Tab button
-            tabsHTML += `
-                <button class="genre-tab ${isActive ? 'active' : ''}"
-                        data-genre="${escapeHtml(genreName)}"
-                        onclick="switchGenreTab('${escapeForInlineJs(genreName)}')">
-                    ${icon} ${capitalizeGenre(genreName)}
-                </button>
-            `;
-
-            // Tab content
-            contentsHTML += `
-                <div class="genre-tab-content ${isActive ? 'active' : ''}" id="${tabId}-content" data-genre="${escapeHtml(genreName)}">
-                    <!-- Action Buttons -->
-                    <div class="genre-actions">
-                        <div class="discover-section-header">
-                            <div>
-                                <h3 style="margin: 0; color: #fff; font-size: 18px;">${capitalizeGenre(genreName)} Mix</h3>
-                                <p id="${tabId}-subtitle" style="margin: 4px 0 0 0; color: #999; font-size: 13px;">${genre.track_count} tracks</p>
-                            </div>
-                            <div class="discover-section-actions">
-                                <button class="action-button secondary" onclick="openDownloadModalForGenre('${escapeForInlineJs(genreName)}')" title="Download missing tracks">
-                                    <span class="button-icon">↓</span>
-                                    <span class="button-text">Download</span>
-                                </button>
-                                <button class="action-button primary" id="${tabId}-sync-btn" onclick="startGenreSync('${escapeForInlineJs(genreName)}')" title="Sync to media server">
-                                    <span class="button-icon">⟳</span>
-                                    <span class="button-text">Sync</span>
-                                </button>
-                            </div>
-                        </div>
-
-                        <!-- Sync Status Display -->
-                        <div class="discover-sync-status" id="${tabId}-sync-status" style="display: none;">
-                            <div class="sync-status-content">
-                                <div class="sync-status-label">
-                                    <span class="sync-icon">⟳</span>
-                                    <span>Syncing to media server...</span>
-                                </div>
-                                <div class="sync-status-stats">
-                                    <span class="sync-stat">✓ <span id="${tabId}-sync-completed">0</span></span>
-                                    <span class="sync-stat">⏳ <span id="${tabId}-sync-pending">0</span></span>
-                                    <span class="sync-stat">✗ <span id="${tabId}-sync-failed">0</span></span>
-                                    <span class="sync-stat">(<span id="${tabId}-sync-percentage">0</span>%)</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Track List -->
-                    <div class="discover-playlist-container compact" id="${tabId}-playlist">
-                        <div class="discover-loading"><div class="loading-spinner"></div><p>Loading ${capitalizeGenre(genreName)} tracks...</p></div>
-                    </div>
-                </div>
-            `;
-        });
-
-        tabsContainer.innerHTML = tabsHTML;
-        contentsContainer.innerHTML = contentsHTML;
-
-        // Load first genre's tracks
-        if (displayGenres.length > 0) {
-            await loadGenreTracks(displayGenres[0].name);
-        }
-
-    } catch (error) {
-        console.error('Error loading genre browser tabs:', error);
-        const tabsContainer = document.getElementById('genre-tabs');
-        if (tabsContainer) {
-            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load genres</p></div>';
-        }
-    }
-}
-
-function switchGenreTab(genreName) {
-    // Update tab buttons
-    const tabs = document.querySelectorAll('.genre-tab');
-    tabs.forEach(tab => {
-        if (tab.getAttribute('data-genre') === genreName) {
-            tab.classList.add('active');
-        } else {
-            tab.classList.remove('active');
-        }
-    });
-
-    // Update tab content
-    const tabContents = document.querySelectorAll('.genre-tab-content');
-    tabContents.forEach(content => {
-        if (content.getAttribute('data-genre') === genreName) {
-            content.classList.add('active');
-        } else {
-            content.classList.remove('active');
-        }
-    });
-
-    // Load tracks if not already loaded
-    if (!genreTracksCache[genreName]) {
-        loadGenreTracks(genreName);
-    }
-}
-
-async function loadGenreTracks(genreName) {
-    try {
-        const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
-        const playlistContainer = document.getElementById(`genre-${genreId}-playlist`);
-        if (!playlistContainer) return;
-
-        const response = await fetch(`/api/discover/genre/${encodeURIComponent(genreName)}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch genre playlist');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = `<div class="discover-empty"><p>No tracks found for ${capitalizeGenre(genreName)}</p></div>`;
-            return;
-        }
-
-        // Store tracks in cache
-        genreTracksCache[genreName] = data.tracks;
-        activeGenre = genreName;
-
-        // Build compact playlist HTML
-        let html = '<div class="discover-playlist-tracks-compact">';
-        data.tracks.forEach((track, index) => {
-            // Extract track data from track_data_json if available
-            let trackData = track;
-            if (track.track_data_json) {
-                trackData = track.track_data_json;
-            }
-
-            // Get track properties with fallbacks
-            const trackName = trackData.name || trackData.track_name || track.track_name || 'Unknown Track';
-            const artistName = trackData.artists?.[0]?.name || trackData.artists?.[0] || trackData.artist_name || track.artist_name || 'Unknown Artist';
-            const albumName = trackData.album?.name || trackData.album_name || track.album_name || 'Unknown Album';
-            const coverUrl = trackData.album?.images?.[0]?.url || track.album_cover_url || '/static/placeholder-album.png';
-            const durationMs = trackData.duration_ms || track.duration_ms || 0;
-
-            const durationMin = Math.floor(durationMs / 60000);
-            const durationSec = Math.floor((durationMs % 60000) / 1000);
-            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-
-            html += `
-                <div class="discover-playlist-track-compact" data-track-index="${index}">
-                    <div class="track-compact-number">${index + 1}</div>
-                    <div class="track-compact-image">
-                        <img src="${coverUrl}" alt="${albumName}" loading="lazy">
-                    </div>
-                    <div class="track-compact-info">
-                        <div class="track-compact-name">${trackName}</div>
-                        <div class="track-compact-artist">${artistName}</div>
-                    </div>
-                    <div class="track-compact-album">${albumName}</div>
-                    <div class="track-compact-duration">${duration}</div>
-                </div>
-            `;
-        });
-        html += '</div>';
-
-        playlistContainer.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading genre tracks:', error);
-        const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
-        const playlistContainer = document.getElementById(`genre-${genreId}-playlist`);
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load genre tracks</p></div>';
-        }
-    }
-}
-
-async function startGenreSync(genreName) {
-    const tracks = genreTracksCache[genreName];
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks available for this genre', 'warning');
-        return;
-    }
-
-    const genreId = genreName.replace(/\s+/g, '-').replace(/[^a-zA-Z0-9-]/g, '');
-
-    // Convert to format expected by sync API
-    const spotifyTracks = tracks.map(track => {
-        // Extract track data from track_data_json if available
-        let trackData = track;
-        if (track.track_data_json) {
-            trackData = track.track_data_json;
-        }
-
-        // Build properly formatted Spotify track object
-        let spotifyTrack = {
-            id: trackData.id || track.spotify_track_id,
-            name: trackData.name || trackData.track_name || track.track_name,
-            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
-            album: trackData.album || {
-                name: trackData.album_name || track.album_name,
-                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
-            },
-            duration_ms: trackData.duration_ms || track.duration_ms || 0
-        };
-
-        // Normalize artists to array of strings for sync compatibility
-        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-        }
-
-        return spotifyTrack;
-    });
-
-    const virtualPlaylistId = `discover_genre_${genreName.replace(/\s+/g, '_')}`;
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: `${capitalizeGenre(genreName)} Mix`,
-        track_count: spotifyTracks.length
-    };
-
-    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
-        spotifyPlaylists.push(virtualPlaylist);
-    }
-
-    // Show sync status display
-    const statusDisplay = document.getElementById(`genre-${genreId}-sync-status`);
-    if (statusDisplay) statusDisplay.style.display = 'block';
-
-    // Disable sync button
-    const syncButton = document.getElementById(`genre-${genreId}-sync-btn`);
-    if (syncButton) {
-        syncButton.disabled = true;
-        syncButton.style.opacity = '0.5';
-        syncButton.style.cursor = 'not-allowed';
-    }
-
-    // Start sync
-    await startPlaylistSync(virtualPlaylistId);
-
-    // Start polling
-    startGenreSyncPolling(genreName, genreId, virtualPlaylistId);
-}
-
-function startGenreSyncPolling(genreName, genreId, virtualPlaylistId) {
-    const pollerId = `genre_${genreId}`;
-
-    if (discoverSyncPollers[pollerId]) {
-        clearInterval(discoverSyncPollers[pollerId]);
-    }
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
-        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
-            const progress = data.progress || {};
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
-            const el = (id) => document.getElementById(id);
-            if (el(`genre-${genreId}-sync-completed`)) el(`genre-${genreId}-sync-completed`).textContent = matched;
-            if (el(`genre-${genreId}-sync-pending`)) el(`genre-${genreId}-sync-pending`).textContent = pending;
-            if (el(`genre-${genreId}-sync-failed`)) el(`genre-${genreId}-sync-failed`).textContent = failed;
-            if (el(`genre-${genreId}-sync-percentage`)) el(`genre-${genreId}-sync-percentage`).textContent = pct;
-            if (data.status === 'finished') {
-                if (discoverSyncPollers[pollerId]) { clearInterval(discoverSyncPollers[pollerId]); delete discoverSyncPollers[pollerId]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
-                delete _syncProgressCallbacks[virtualPlaylistId];
-                const syncButton = el(`genre-${genreId}-sync-btn`);
-                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
-                showToast(`${capitalizeGenre(genreName)} Mix sync complete!`, 'success');
-                setTimeout(() => { const sd = el(`genre-${genreId}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
-            }
-        };
-    }
-
-    discoverSyncPollers[pollerId] = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
-            if (!response.ok) return;
-
-            const data = await response.json();
-            const progress = data.progress || {};
-
-            const completedEl = document.getElementById(`genre-${genreId}-sync-completed`);
-            const pendingEl = document.getElementById(`genre-${genreId}-sync-pending`);
-            const failedEl = document.getElementById(`genre-${genreId}-sync-failed`);
-            const percentageEl = document.getElementById(`genre-${genreId}-sync-percentage`);
-
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-            if (completedEl) completedEl.textContent = matched;
-            if (pendingEl) pendingEl.textContent = pending;
-            if (failedEl) failedEl.textContent = failed;
-            if (percentageEl) percentageEl.textContent = completionPercentage;
-
-            if (data.status === 'finished') {
-                clearInterval(discoverSyncPollers[pollerId]);
-                delete discoverSyncPollers[pollerId];
-
-                const syncButton = document.getElementById(`genre-${genreId}-sync-btn`);
-                if (syncButton) {
-                    syncButton.disabled = false;
-                    syncButton.style.opacity = '1';
-                    syncButton.style.cursor = 'pointer';
-                }
-
-                showToast(`${capitalizeGenre(genreName)} Mix sync complete!`, 'success');
-
-                setTimeout(() => {
-                    const statusDisplay = document.getElementById(`genre-${genreId}-sync-status`);
-                    if (statusDisplay) statusDisplay.style.display = 'none';
-                }, 3000);
-            }
-        } catch (error) {
-            console.error(`Error polling sync status for genre ${genreName}:`, error);
-        }
-    }, 500);
-}
-
-async function openDownloadModalForGenre(genreName) {
-    const tracks = genreTracksCache[genreName];
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks available for this genre', 'warning');
-        return;
-    }
-
-    // Convert to format expected by download modal
-    const spotifyTracks = tracks.map(track => {
-        // Extract track data from track_data_json if available
-        let trackData = track;
-        if (track.track_data_json) {
-            trackData = track.track_data_json;
-        }
-
-        // Build properly formatted Spotify track object
-        let spotifyTrack = {
-            id: trackData.id || track.spotify_track_id,
-            name: trackData.name || trackData.track_name || track.track_name,
-            artists: trackData.artists || [{ name: trackData.artist_name || track.artist_name }],
-            album: trackData.album || {
-                name: trackData.album_name || track.album_name,
-                images: trackData.album?.images || (track.album_cover_url ? [{ url: track.album_cover_url }] : [])
-            },
-            duration_ms: trackData.duration_ms || track.duration_ms || 0
-        };
-
-        return spotifyTrack;
-    });
-
-    const playlistName = `${capitalizeGenre(genreName)} Mix`;
-    const virtualPlaylistId = `genre_${genreName.replace(/\s+/g, '_')}`;
-
-    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-}
-
-// ===============================
-// LISTENBRAINZ PLAYLISTS
-// ===============================
-
-let listenbrainzPlaylistsCache = {}; // Store playlists by type
-let listenbrainzTracksCache = {}; // Store tracks for each playlist
-let activeListenBrainzTab = 'recommendations'; // Track active tab
-let activeListenBrainzSubTab = null; // Track active sub-tab within recommendations
-
-// ── Last.fm Track Radio ──────────────────────────────────────────────────────
-
-let _lastfmRadioDebounceTimer = null;
-let _lastfmRadioSelected = null; // {name, artist}
-
-function debouncedLastfmTrackSearch(query) {
-    clearTimeout(_lastfmRadioDebounceTimer);
-    const q = (query || '').trim();
-    if (!q) {
-        document.getElementById('lastfm-radio-dropdown').style.display = 'none';
-        return;
-    }
-    _lastfmRadioDebounceTimer = setTimeout(() => _runLastfmTrackSearch(q), 400);
-}
-
-async function _runLastfmTrackSearch(q) {
-    if (q.length < 2) return;
-    const dropdown = document.getElementById('lastfm-radio-dropdown');
-    // Show a mini spinner while fetching
-    dropdown.innerHTML = '<div class="lastfm-radio-searching"><div class="server-search-spinner" style="width:14px;height:14px;margin:0 auto;"></div></div>';
-    dropdown.style.display = 'block';
-    try {
-        const res = await fetch(`/api/lastfm/search/tracks?q=${encodeURIComponent(q)}`);
-        if (!res.ok) { dropdown.style.display = 'none'; return; }
-        const data = await res.json();
-        if (!data.results || data.results.length === 0) {
-            dropdown.style.display = 'none';
-            return;
-        }
-        dropdown.innerHTML = data.results.map(t => {
-            const imgHtml = t.image_url
-                ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.parentElement.innerHTML='<div class=\\'lastfm-radio-art-empty\\'></div>'">`
-                : '<div class="lastfm-radio-art-empty"></div>';
-            const listeners = t.listeners > 0
-                ? `<span class="lastfm-radio-result-listeners">${(t.listeners / 1000).toFixed(0)}k listeners</span>`
-                : '';
-            return `
-                <div class="lastfm-radio-result" onclick="selectLastfmRadioTrack(decodeURIComponent('${encodeURIComponent(t.name)}'), decodeURIComponent('${encodeURIComponent(t.artist)}'))">
-                    <div class="lastfm-radio-result-art">${imgHtml}</div>
-                    <div class="lastfm-radio-result-meta">
-                        <span class="lastfm-radio-result-track">${t.name}</span>
-                        <span class="lastfm-radio-result-artist">${t.artist}${listeners ? ' · ' + t.listeners.toLocaleString() + ' listeners' : ''}</span>
-                    </div>
-                </div>`;
-        }).join('');
-        dropdown.style.display = 'block';
-    } catch (e) {
-        console.error('Last.fm search error:', e);
-        dropdown.style.display = 'none';
-    }
-}
-
-function selectLastfmRadioTrack(name, artist) {
-    // Close dropdown and update input to show selection
-    document.getElementById('lastfm-radio-dropdown').style.display = 'none';
-    document.getElementById('lastfm-radio-input').value = `${name} — ${artist}`;
-    document.getElementById('lastfm-radio-input').blur();
-    // Immediately kick off generation
-    _generateLastfmRadioFor(name, artist);
-}
-
-function clearLastfmRadioSelection() {
-    document.getElementById('lastfm-radio-input').value = '';
-    document.getElementById('lastfm-radio-dropdown').style.display = 'none';
-}
-
-// Keep generateLastfmRadio as public alias (called by nothing now but harmless)
-async function generateLastfmRadio() {
-    const input = (document.getElementById('lastfm-radio-input').value || '').trim();
-    if (!input) return;
-    // Parse "Track — Artist" format if present
-    const parts = input.split(' — ');
-    if (parts.length >= 2) {
-        await _generateLastfmRadioFor(parts[0].trim(), parts[1].trim());
-    }
-}
-
-async function _generateLastfmRadioFor(name, artist) {
-    const container = document.getElementById('lastfm-radio-playlists');
-    const input = document.getElementById('lastfm-radio-input');
-
-    // Show loading state in the playlists area
-    if (container) {
-        container.innerHTML = `
-            <div class="lastfm-radio-generating">
-                <div class="server-search-spinner"></div>
-                <p>Building radio for <strong>${name}</strong> by <strong>${artist}</strong>…</p>
-            </div>`;
-    }
-    if (input) input.disabled = true;
-
-    try {
-        const res = await fetch('/api/lastfm/radio/generate', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_name: name, artist_name: artist }),
-        });
-        const data = await res.json();
-        if (!data.success) {
-            if (container) container.innerHTML = '';
-            showToast(data.error || 'Failed to generate radio', 'error');
-            return;
-        }
-        // Reload all radio playlist cards
-        await _loadLastfmRadioPlaylists();
-    } catch (e) {
-        if (container) container.innerHTML = '';
-        showToast('Error generating Last.fm radio', 'error');
-        console.error(e);
-    } finally {
-        if (input) input.disabled = false;
-    }
-}
-
-async function initializeLastfmRadioSection() {
-    try {
-        const cfgRes = await fetch('/api/lastfm/configured');
-        if (!cfgRes.ok) return;
-        const { configured } = await cfgRes.json();
-        const section = document.getElementById('lastfm-radio-section');
-        if (!section) return;
-        if (!configured) {
-            section.style.display = 'none';
-            return;
-        }
-        section.style.display = '';
-        await _loadLastfmRadioPlaylists();
-    } catch (e) {
-        console.error('Error initializing Last.fm Radio section:', e);
-    }
-}
-
-async function _loadLastfmRadioPlaylists() {
-    const container = document.getElementById('lastfm-radio-playlists');
-    if (!container) return;
-    try {
-        const res = await fetch('/api/discover/listenbrainz/lastfm-radio');
-        if (!res.ok) return;
-        const data = await res.json();
-        if (!data.success || !data.playlists || data.playlists.length === 0) {
-            container.innerHTML = '';
-            return;
-        }
-        // Reuse the same LB playlist card builder — cards are identical
-        container.innerHTML = buildListenBrainzPlaylistsHtml(data.playlists, 'lastfm_radio');
-        loadTracksForPlaylists(data.playlists);
-    } catch (e) {
-        console.error('Error loading Last.fm radio playlists:', e);
-    }
-}
-
-// Close dropdown when clicking outside
-document.addEventListener('click', (e) => {
-    const section = document.getElementById('lastfm-radio-search-section');
-    if (section && !section.contains(e.target)) {
-        const dd = document.getElementById('lastfm-radio-dropdown');
-        if (dd) dd.style.display = 'none';
-    }
-});
-
-// ────────────────────────────────────────────────────────────────────────────
-
-async function initializeListenBrainzTabs() {
-    try {
-        console.log('🧠 Initializing ListenBrainz tabs...');
-
-        // Fetch all playlist types
-        const [createdForRes, userPlaylistsRes, collaborativeRes] = await Promise.all([
-            fetch('/api/discover/listenbrainz/created-for'),
-            fetch('/api/discover/listenbrainz/user-playlists'),
-            fetch('/api/discover/listenbrainz/collaborative'),
-        ]);
-
-        console.log('📡 API Responses:', {
-            createdFor: createdForRes.status,
-            userPlaylists: userPlaylistsRes.status,
-            collaborative: collaborativeRes.status,
-        });
-
-        const tabs = [
-            { id: 'recommendations', label: '🎁 Recommendations', hasData: false },
-            { id: 'user', label: '📚 Your Playlists', hasData: false },
-            { id: 'collaborative', label: '🤝 Collaborative', hasData: false },
-        ];
-
-        // Track LB username for header display
-        let lbUsername = null;
-
-        // Check which tabs have data
-        if (createdForRes.ok) {
-            const data = await createdForRes.json();
-            console.log('📋 Created For data:', data);
-            if (data.username) lbUsername = data.username;
-            if (data.success && data.playlists && data.playlists.length > 0) {
-                listenbrainzPlaylistsCache['recommendations'] = data.playlists;
-                tabs[0].hasData = true;
-                console.log(`✅ Found ${data.playlists.length} recommendation playlists`);
-            }
-        }
-
-        if (userPlaylistsRes.ok) {
-            const data = await userPlaylistsRes.json();
-            console.log('📚 User Playlists data:', data);
-            if (data.username && !lbUsername) lbUsername = data.username;
-            if (data.success && data.playlists && data.playlists.length > 0) {
-                listenbrainzPlaylistsCache['user'] = data.playlists;
-                tabs[1].hasData = true;
-                console.log(`✅ Found ${data.playlists.length} user playlists`);
-            }
-        }
-
-        if (collaborativeRes.ok) {
-            const data = await collaborativeRes.json();
-            console.log('🤝 Collaborative data:', data);
-            if (data.username && !lbUsername) lbUsername = data.username;
-            if (data.success && data.playlists && data.playlists.length > 0) {
-                listenbrainzPlaylistsCache['collaborative'] = data.playlists;
-                tabs[2].hasData = true;
-                console.log(`✅ Found ${data.playlists.length} collaborative playlists`);
-            }
-        }
-
-        // Build tabs HTML
-        const tabsContainer = document.getElementById('listenbrainz-tabs');
-        console.log('🔧 Building tabs. Available tabs:', tabs.filter(t => t.hasData).map(t => t.label));
-
-        let tabsHtml = '<div class="decade-tabs-inner">'; // Reuse decade tabs styling
-
-        tabs.forEach(tab => {
-            if (tab.hasData) {
-                const isActive = tab.id === activeListenBrainzTab;
-                tabsHtml += `
-                    <button class="decade-tab${isActive ? ' active' : ''}"
-                            onclick="switchListenBrainzTab('${tab.id}')"
-                            data-tab="${tab.id}">
-                        ${tab.label}
-                    </button>
-                `;
-            }
-        });
-        tabsHtml += '</div>';
-
-        if (tabs.every(t => !t.hasData)) {
-            console.log('⚠️ No tabs have data');
-            tabsContainer.innerHTML = `
-                <div class="lb-empty-state">
-                    <div class="lb-empty-icon">&#129504;</div>
-                    <h3>Connect ListenBrainz</h3>
-                    <p>Link your ListenBrainz account to see personalized playlists, recommendations, and collaborative playlists.</p>
-                    <button class="action-button primary lb-connect-btn" onclick="openPersonalSettings()">
-                        Connect ListenBrainz
-                    </button>
-                    <p class="lb-empty-help">Get your token from <a href="https://listenbrainz.org/profile/" target="_blank">listenbrainz.org/profile</a></p>
-                </div>`;
-            return;
-        }
-
-        tabsContainer.innerHTML = tabsHtml;
-
-        // Update section subtitle with username
-        const lbSubtitle = document.getElementById('listenbrainz-section-subtitle');
-        if (lbSubtitle) {
-            lbSubtitle.textContent = lbUsername ? `Playlists for ${lbUsername}` : 'Playlists from ListenBrainz';
-        }
-
-        // Load first available tab
-        const firstTab = tabs.find(t => t.hasData);
-        if (firstTab) {
-            console.log(`🎯 Loading first tab: ${firstTab.label} (${firstTab.id})`);
-            activeListenBrainzTab = firstTab.id;
-            loadListenBrainzTabContent(firstTab.id);
-        } else {
-            console.log('❌ No first tab found');
-        }
-
-    } catch (error) {
-        console.error('Error initializing ListenBrainz tabs:', error);
-        const tabsContainer = document.getElementById('listenbrainz-tabs');
-        if (tabsContainer) {
-            tabsContainer.innerHTML = '<div class="discover-empty"><p>Failed to load playlists</p></div>';
-        }
-    }
-}
-
-function switchListenBrainzTab(tabId) {
-    // Update active tab
-    activeListenBrainzTab = tabId;
-
-    // Update tab buttons
-    const tabs = document.querySelectorAll('#listenbrainz-tabs .decade-tab');
-    tabs.forEach(tab => {
-        if (tab.dataset.tab === tabId) {
-            tab.classList.add('active');
-        } else {
-            tab.classList.remove('active');
-        }
-    });
-
-    // Load content
-    loadListenBrainzTabContent(tabId);
-}
-
-function groupListenBrainzPlaylists(playlists) {
-    const groups = {};
-    const groupOrder = [];
-
-    playlists.forEach(playlist => {
-        const playlistData = playlist.playlist || playlist;
-        const title = (playlistData.title || '').toLowerCase();
-
-        let groupName;
-        if (title.includes('weekly jams')) {
-            groupName = 'Weekly Jams';
-        } else if (title.includes('weekly exploration')) {
-            groupName = 'Weekly Exploration';
-        } else if (title.includes('top discoveries')) {
-            groupName = 'Top Discoveries';
-        } else if (title.includes('top missed recordings')) {
-            groupName = 'Top Missed Recordings';
-        } else if (title.includes('daily jams')) {
-            groupName = 'Daily Jams';
-        } else {
-            groupName = 'Other';
-        }
-
-        if (!groups[groupName]) {
-            groups[groupName] = [];
-            groupOrder.push(groupName);
-        }
-        groups[groupName].push(playlist);
-    });
-
-    // Move "Other" to the end if it exists
-    const otherIdx = groupOrder.indexOf('Other');
-    if (otherIdx !== -1 && otherIdx !== groupOrder.length - 1) {
-        groupOrder.splice(otherIdx, 1);
-        groupOrder.push('Other');
-    }
-
-    return { groups, groupOrder };
-}
-
-function buildListenBrainzPlaylistsHtml(playlists, tabId) {
-    let html = '';
-    playlists.forEach((playlist, index) => {
-        const playlistData = playlist.playlist || playlist;
-        const identifier = playlistData.identifier?.split('/').pop() || '';
-        console.log(`📋 Playlist ${index}:`, {
-            title: playlistData.title,
-            fullIdentifier: playlistData.identifier,
-            extractedIdentifier: identifier
-        });
-        const title = playlistData.title || 'Untitled Playlist';
-        const creator = playlistData.creator || 'ListenBrainz';
-
-        let trackCount = 50;
-        if (playlistData.annotation?.track_count && playlistData.annotation.track_count > 0) {
-            trackCount = playlistData.annotation.track_count;
-        } else if (playlistData.track && Array.isArray(playlistData.track) && playlistData.track.length > 0) {
-            trackCount = playlistData.track.length;
-        }
-
-        const playlistId = `discover-lb-playlist-${identifier}`;  // Use consistent MBID-based ID
-        const virtualPlaylistId = `discover_lb_${tabId}_${identifier}`;
-
-        html += `
-            <div class="discover-section-subsection">
-                <div class="discover-section-header">
-                    <div>
-                        <h3 class="discover-section-subtitle-large">${title}</h3>
-                        <p class="discover-section-meta" id="${playlistId}-meta">by ${creator} • Loading tracks...</p>
-                    </div>
-                    <div class="discover-section-actions">
-                        <button class="action-button secondary"
-                                onclick="openDownloadModalForListenBrainzPlaylist('${identifier}', '${escapeForInlineJs(title)}')"
-                                title="Download missing tracks">
-                            <span class="button-icon">↓</span>
-                            <span class="button-text">Download</span>
-                        </button>
-                        <span class="wing-it-wrap">
-                        <button class="action-button wing-it-btn-sm"
-                                onclick="_toggleWingItDropdownLB(this, '${identifier}', '${escapeForInlineJs(title)}')"
-                                title="Download or sync using raw track names — no metadata discovery">
-                            <span class="button-icon">⚡</span>
-                            <span class="button-text">Wing It</span>
-                        </button>
-                        </span>
-                        <button class="action-button primary"
-                                id="${playlistId}-sync-btn"
-                                onclick="startListenBrainzPlaylistSync('${identifier}')"
-                                title="Sync to media server"
-                                style="display: none;">
-                            <span class="button-icon">⟳</span>
-                            <span class="button-text">Sync</span>
-                        </button>
-                    </div>
-                </div>
-                <!-- Sync Status Display -->
-                <div class="discover-sync-status" id="${playlistId}-sync-status" style="display: none;">
-                    <div class="sync-status-content">
-                        <div class="sync-status-label">
-                            <span class="sync-icon">⟳</span>
-                            <span>Syncing to media server...</span>
-                        </div>
-                        <div class="sync-status-stats">
-                            <span class="sync-stat">♪ <span id="${playlistId}-sync-total">0</span></span>
-                            <span class="sync-separator">/</span>
-                            <span class="sync-stat">✓ <span id="${playlistId}-sync-matched">0</span></span>
-                            <span class="sync-separator">/</span>
-                            <span class="sync-stat">✗ <span id="${playlistId}-sync-failed">0</span></span>
-                            <span class="sync-stat">(<span id="${playlistId}-sync-percentage">0</span>%)</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="discover-playlist-container compact" id="${playlistId}-playlist">
-                    <div class="discover-loading"><div class="loading-spinner"></div><p>Loading tracks...</p></div>
-                </div>
-            </div>
-        `;
-    });
-    return html;
-}
-
-function loadTracksForPlaylists(playlists) {
-    playlists.forEach((playlist) => {
-        const playlistData = playlist.playlist || playlist;
-        const identifier = playlistData.identifier?.split('/').pop() || '';
-        const playlistId = `discover-lb-playlist-${identifier}`;
-        loadListenBrainzPlaylistTracks(identifier, playlistId);
-    });
-}
-
-function switchListenBrainzSubTab(groupId) {
-    activeListenBrainzSubTab = groupId;
-
-    // Update sub-tab buttons
-    const subTabs = document.querySelectorAll('#lb-subtabs-bar .lb-subtab');
-    subTabs.forEach(tab => {
-        if (tab.dataset.group === groupId) {
-            tab.classList.add('active');
-        } else {
-            tab.classList.remove('active');
-        }
-    });
-
-    // Show/hide sub-tab content panels
-    const panels = document.querySelectorAll('.lb-subtab-panel');
-    panels.forEach(panel => {
-        if (panel.dataset.group === groupId) {
-            panel.style.display = 'block';
-            // Load tracks for playlists in this panel if not already loaded
-            const unloaded = panel.querySelectorAll('.discover-loading');
-            if (unloaded.length > 0) {
-                const groupPlaylists = panel._playlists;
-                if (groupPlaylists) {
-                    loadTracksForPlaylists(groupPlaylists);
-                }
-            }
-        } else {
-            panel.style.display = 'none';
-        }
-    });
-}
-
-async function loadListenBrainzTabContent(tabId) {
-    const container = document.getElementById('listenbrainz-tab-content');
-    if (!container) return;
-
-    const playlists = listenbrainzPlaylistsCache[tabId] || [];
-    if (playlists.length === 0) {
-        container.innerHTML = '<div class="discover-empty"><p>No playlists in this category</p></div>';
-        return;
-    }
-
-    // For recommendations tab with multiple playlists, group into sub-tabs
-    if (tabId === 'recommendations' && playlists.length > 1) {
-        const { groups, groupOrder } = groupListenBrainzPlaylists(playlists);
-
-        // If only one group, no need for sub-tabs
-        if (groupOrder.length <= 1) {
-            const html = buildListenBrainzPlaylistsHtml(playlists, tabId);
-            container.innerHTML = html;
-            loadTracksForPlaylists(playlists);
-            return;
-        }
-
-        // Build sub-tabs bar
-        const firstGroup = activeListenBrainzSubTab && groupOrder.includes(activeListenBrainzSubTab)
-            ? activeListenBrainzSubTab
-            : groupOrder[0];
-        activeListenBrainzSubTab = firstGroup;
-
-        let subTabsHtml = '<div class="decade-tabs-inner" id="lb-subtabs-bar" style="margin-bottom: 16px;">';
-        groupOrder.forEach(groupName => {
-            const isActive = groupName === firstGroup;
-            const count = groups[groupName].length;
-            subTabsHtml += `
-                <button class="decade-tab lb-subtab${isActive ? ' active' : ''}"
-                        onclick="switchListenBrainzSubTab('${groupName}')"
-                        data-group="${groupName}"
-                        style="font-size: 13px; padding: 8px 16px;">
-                    ${groupName} (${count})
-                </button>
-            `;
-        });
-        subTabsHtml += '</div>';
-
-        // Build content panels for each group
-        let panelsHtml = '';
-        groupOrder.forEach(groupName => {
-            const isActive = groupName === firstGroup;
-            panelsHtml += `<div class="lb-subtab-panel" data-group="${groupName}" style="display: ${isActive ? 'block' : 'none'};">`;
-            panelsHtml += buildListenBrainzPlaylistsHtml(groups[groupName], tabId);
-            panelsHtml += '</div>';
-        });
-
-        container.innerHTML = subTabsHtml + panelsHtml;
-
-        // Store playlist references on panels for lazy loading
-        groupOrder.forEach(groupName => {
-            const panel = container.querySelector(`.lb-subtab-panel[data-group="${groupName}"]`);
-            if (panel) {
-                panel._playlists = groups[groupName];
-            }
-        });
-
-        // Load tracks only for the active sub-tab
-        loadTracksForPlaylists(groups[firstGroup]);
-        return;
-    }
-
-    // Default: flat list for user/collaborative tabs (or single-group recommendations)
-    const html = buildListenBrainzPlaylistsHtml(playlists, tabId);
-    container.innerHTML = html;
-    loadTracksForPlaylists(playlists);
-}
-
-async function loadListenBrainzPlaylistTracks(identifier, playlistId) {
-    try {
-        const playlistContainer = document.getElementById(`${playlistId}-playlist`);
-        if (!playlistContainer) return;
-
-        // Check cache first
-        if (listenbrainzTracksCache[identifier]) {
-            displayListenBrainzTracks(listenbrainzTracksCache[identifier], playlistId);
-            return;
-        }
-
-        console.log(`🔄 Fetching tracks for playlist: ${identifier}`);
-        const response = await fetch(`/api/discover/listenbrainz/playlist/${identifier}`);
-        console.log(`📡 Response status: ${response.status}`);
-
-        if (!response.ok) {
-            const errorText = await response.text();
-            console.error(`❌ Failed to fetch playlist: ${response.status} - ${errorText}`);
-            throw new Error('Failed to fetch playlist tracks');
-        }
-
-        const data = await response.json();
-        console.log(`📋 Received data:`, data);
-        console.log(`📊 Tracks count: ${data.tracks?.length || 0}`);
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available</p></div>';
-            return;
-        }
-
-        // Cache the tracks
-        listenbrainzTracksCache[identifier] = data.tracks;
-
-        // Display tracks
-        displayListenBrainzTracks(data.tracks, playlistId);
-
-    } catch (error) {
-        console.error('Error loading ListenBrainz playlist tracks:', error);
-        const playlistContainer = document.getElementById(`${playlistId}-playlist`);
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load tracks</p></div>';
-        }
-    }
-}
-
-/**
- * Clean artist name by removing featured artists
- * e.g., "Blackstreet feat. Dr. Dre & Queen Pen" -> "Blackstreet"
- */
-function cleanArtistName(artistName) {
-    if (!artistName) return artistName;
-
-    // Remove everything after common featuring patterns (case insensitive)
-    const patterns = [
-        /\s+feat\.?\s+.*/i,      // "feat." or "feat"
-        /\s+featuring\s+.*/i,    // "featuring"
-        /\s+ft\.?\s+.*/i,        // "ft." or "ft"
-        /\s+with\s+.*/i,         // "with"
-        /\s+x\s+.*/i             // " x " (common in collaborations)
-    ];
-
-    let cleaned = artistName;
-    for (const pattern of patterns) {
-        cleaned = cleaned.replace(pattern, '');
-    }
-
-    return cleaned.trim();
-}
-
-function displayListenBrainzTracks(tracks, playlistId) {
-    const playlistContainer = document.getElementById(`${playlistId}-playlist`);
-    if (!playlistContainer) return;
-
-    console.log(`🎨 Displaying ${tracks.length} tracks for ${playlistId}`);
-    if (tracks.length > 0) {
-        console.log('Sample track data:', tracks[0]);
-    }
-
-    // Update track count in the metadata section
-    const metaElement = document.getElementById(`${playlistId}-meta`);
-    if (metaElement) {
-        // Extract creator from existing text (before the bullet)
-        const currentText = metaElement.textContent;
-        const creatorMatch = currentText.match(/by (.+?) •/);
-        const creator = creatorMatch ? creatorMatch[1] : 'ListenBrainz';
-        metaElement.textContent = `by ${creator} • ${tracks.length} track${tracks.length !== 1 ? 's' : ''}`;
-    }
-
-    // Simple SVG placeholder for missing album art (music note icon)
-    const placeholderImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiMyYTJhMmEiLz48cGF0aCBkPSJNMjQgMTJ2MTIuNUEzLjUgMy41IDAgMSAxIDIwLjUgMjFWMTZsLTUgMXY5YTMuNSAzLjUgMCAxIDEtMy41LTMuNVYxM2wxMi0zeiIgZmlsbD0iIzU1NSIvPjwvc3ZnPg==';
-
-    let html = '<div class="discover-playlist-tracks-compact">';
-    tracks.forEach((track, index) => {
-        const coverUrl = track.album_cover_url || placeholderImage;
-        const durationMin = Math.floor(track.duration_ms / 60000);
-        const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
-        const duration = track.duration_ms > 0 ? `${durationMin}:${durationSec.toString().padStart(2, '0')}` : '';
-
-        const albumName = track.album_name ? escapeHtml(track.album_name) : '';
-
-        html += `
-            <div class="discover-playlist-track-compact" data-track-index="${index}">
-                <div class="track-compact-number">${index + 1}</div>
-                <div class="track-compact-image">
-                    <img src="${coverUrl}" alt="${albumName}" loading="lazy" onerror="this.src='${placeholderImage}'">
-                </div>
-                <div class="track-compact-info">
-                    <div class="track-compact-name">${escapeHtml(track.track_name || 'Unknown Track')}</div>
-                    <div class="track-compact-artist">${escapeHtml(cleanArtistName(track.artist_name) || 'Unknown Artist')}</div>
-                </div>
-                <div class="track-compact-album">${albumName}</div>
-                <div class="track-compact-duration">${duration}</div>
-            </div>
-        `;
-    });
-    html += '</div>';
-
-    playlistContainer.innerHTML = html;
-}
-
-function _toggleWingItDropdownLB(btn, identifier, title) {
-    const existing = document.querySelector('.wing-it-dropdown.visible');
-    if (existing) { existing.classList.remove('visible'); setTimeout(() => existing.remove(), 150); return; }
-
-    const wrap = btn.closest('.wing-it-wrap');
-    if (!wrap) return;
-
-    const dropdown = document.createElement('div');
-    dropdown.className = 'wing-it-dropdown';
-    dropdown.innerHTML = `
-        <button class="wing-it-dropdown-item" data-action="download">
-            <span class="wing-it-dropdown-icon">⬇️</span>
-            <span class="wing-it-dropdown-label">Download</span>
-            <span class="wing-it-dropdown-hint">Raw names</span>
-        </button>
-        <button class="wing-it-dropdown-item" data-action="sync">
-            <span class="wing-it-dropdown-icon">🔄</span>
-            <span class="wing-it-dropdown-label">Sync to Server</span>
-            <span class="wing-it-dropdown-hint">Best-effort</span>
-        </button>
-    `;
-
-    dropdown.querySelectorAll('.wing-it-dropdown-item').forEach(item => {
-        item.addEventListener('click', () => {
-            dropdown.classList.remove('visible');
-            setTimeout(() => dropdown.remove(), 150);
-            const tracks = listenbrainzTracksCache[identifier];
-            if (!tracks || tracks.length === 0) {
-                showToast('No tracks cached. Try opening the playlist first.', 'error');
-                return;
-            }
-            if (item.dataset.action === 'download') {
-                wingItDownload(tracks, title, 'ListenBrainz', identifier, true);
-            } else {
-                _wingItSync(tracks, title, 'ListenBrainz', identifier);
-            }
-        });
-    });
-
-    const btnRect2 = btn.getBoundingClientRect();
-    if (btnRect2.top < 200) dropdown.classList.add('flip-down');
-
-    wrap.appendChild(dropdown);
-    requestAnimationFrame(() => dropdown.classList.add('visible'));
-
-    setTimeout(() => {
-        const closeHandler = e => {
-            if (!dropdown.contains(e.target) && e.target !== btn) {
-                dropdown.classList.remove('visible');
-                setTimeout(() => dropdown.remove(), 150);
-                document.removeEventListener('click', closeHandler);
-            }
-        };
-        document.addEventListener('click', closeHandler);
-    }, 50);
-}
-
-async function _wingItFromLBCard(identifier, title) {
-    // Legacy — kept for backward compat
-    const tracks = listenbrainzTracksCache[identifier];
-    if (!tracks || tracks.length === 0) {
-        showToast('No tracks cached for this playlist. Try opening the discovery modal first.', 'error');
-        return;
-    }
-    wingItDownload(tracks, title, 'ListenBrainz', identifier);
-}
-
-async function openDownloadModalForListenBrainzPlaylist(identifier, title) {
-    try {
-        const tracks = listenbrainzTracksCache[identifier];
-        if (!tracks || tracks.length === 0) {
-            showToast('No tracks to download', 'error');
-            return;
-        }
-
-        console.log(`🎵 Opening ListenBrainz discovery modal: ${title}`);
-        console.log(`🔍 Looking for existing state with identifier: ${identifier}`);
-        console.log(`📋 All ListenBrainz states:`, Object.keys(listenbrainzPlaylistStates));
-
-        // Check if state already exists from backend hydration (like Beatport does)
-        const existingState = listenbrainzPlaylistStates[identifier];
-        console.log(`🔍 Existing state found:`, existingState ? `Phase: ${existingState.phase}` : 'None');
-
-        if (existingState && existingState.phase !== 'fresh') {
-            // State exists - rehydrate the modal with existing data
-            console.log(`🔄 Rehydrating existing ListenBrainz state (Phase: ${existingState.phase})`);
-
-            // If downloading/download_complete, rehydrate download modal instead
-            if ((existingState.phase === 'downloading' || existingState.phase === 'download_complete') &&
-                existingState.convertedSpotifyPlaylistId && existingState.download_process_id) {
-
-                console.log(`📥 Rehydrating download modal for ListenBrainz playlist: ${title}`);
-
-                // Implement download modal rehydration (like Beatport does)
-                const convertedPlaylistId = existingState.convertedSpotifyPlaylistId;
-
-                try {
-                    // Check if modal already exists (user just closed it)
-                    if (activeDownloadProcesses[convertedPlaylistId]) {
-                        console.log(`✅ Download modal already exists, just showing it`);
-                        const process = activeDownloadProcesses[convertedPlaylistId];
-                        if (process.modalElement) {
-                            process.modalElement.style.display = 'flex';
-                        }
-                        return;
-                    }
-
-                    // Create the download modal using the ListenBrainz state
-                    console.log(`🆕 Creating new download modal for rehydration`);
-                    // Get tracks from the existing state
-                    let spotifyTracks = [];
-
-                    if (existingState && existingState.discovery_results) {
-                        spotifyTracks = existingState.discovery_results
-                            .filter(result => result.spotify_data)
-                            .map(result => {
-                                const track = result.spotify_data;
-                                // Ensure artists is an array of strings
-                                if (track.artists && Array.isArray(track.artists)) {
-                                    track.artists = track.artists.map(artist =>
-                                        typeof artist === 'string' ? artist : (artist.name || artist)
-                                    );
-                                } else if (track.artists && typeof track.artists === 'string') {
-                                    track.artists = [track.artists];
-                                } else {
-                                    track.artists = ['Unknown Artist'];
-                                }
-                                return {
-                                    id: track.id,
-                                    name: track.name,
-                                    artists: track.artists,
-                                    album: track.album || 'Unknown Album',
-                                    duration_ms: track.duration_ms || 0,
-                                    external_urls: track.external_urls || {}
-                                };
-                            });
-                    }
-
-                    if (spotifyTracks.length > 0) {
-                        await openDownloadMissingModalForYouTube(
-                            convertedPlaylistId,
-                            title,
-                            spotifyTracks
-                        );
-
-                        // Set the modal to running state with the correct batch ID
-                        const process = activeDownloadProcesses[convertedPlaylistId];
-                        if (process) {
-                            process.status = existingState.phase === 'download_complete' ? 'complete' : 'running';
-                            process.batchId = existingState.download_process_id;
-
-                            // Update UI to running state
-                            const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
-                            const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
-                            if (beginBtn) beginBtn.style.display = 'none';
-                            if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                            // Start polling for this process
-                            startModalDownloadPolling(convertedPlaylistId);
-
-                            // Add to discover download sidebar if this has discoverMetadata
-                            if (process.discoverMetadata) {
-                                const playlistName = title;
-                                const imageUrl = process.discoverMetadata.imageUrl;
-                                const type = process.discoverMetadata.type || 'album';
-                                addDiscoverDownload(convertedPlaylistId, playlistName, type, imageUrl);
-                                console.log(`📥 [REHYDRATION] Added ListenBrainz download to sidebar: ${playlistName}`);
-                            }
-
-                            // Show modal since user clicked the download button (different from background rehydration)
-                            if (process.modalElement) {
-                                process.modalElement.style.display = 'flex';
-                            }
-                            console.log(`✅ Rehydrated download modal for ListenBrainz playlist: ${title}`);
-                        }
-                    } else {
-                        console.warn(`⚠️ No Spotify tracks found for ListenBrainz download modal: ${title}`);
-                    }
-                } catch (error) {
-                    console.warn(`⚠️ Error setting up download process for ListenBrainz playlist "${title}":`, error.message);
-                }
-
-                return;
-            }
-
-            // Open discovery modal with existing state
-            openYouTubeDiscoveryModal(identifier);
-
-            // If still discovering, resume polling
-            if (existingState.phase === 'discovering') {
-                console.log(`🔄 Resuming discovery polling for: ${title}`);
-                startListenBrainzDiscoveryPolling(identifier);
-            }
-
-            return;
-        }
-
-        // No existing state - create fresh state and start discovery
-        console.log(`🆕 Creating fresh ListenBrainz state for: ${title}`);
-
-        // Create YouTube-style state entry for this ListenBrainz playlist (like Beatport does)
-        const listenbrainzState = {
-            phase: 'fresh',
-            playlist: {
-                name: title,
-                tracks: tracks.map(track => ({
-                    track_name: track.track_name,
-                    artist_name: track.artist_name,
-                    album_name: track.album_name,
-                    duration_ms: track.duration_ms || 0,
-                    mbid: track.mbid,
-                    release_mbid: track.release_mbid,
-                    album_cover_url: track.album_cover_url
-                })),
-                description: `${tracks.length} tracks from ${title}`,
-                source: 'listenbrainz'
-            },
-            is_listenbrainz_playlist: true,
-            playlist_mbid: identifier,  // Link to ListenBrainz playlist
-            // Initialize discovery state properties (both naming conventions for modal compatibility)
-            discovery_results: [],
-            discoveryResults: [],
-            discovery_progress: 0,
-            discoveryProgress: 0,
-            spotify_matches: 0,
-            spotifyMatches: 0,
-            spotify_total: tracks.length,
-            spotifyTotal: tracks.length
-        };
-
-        // Store in ListenBrainz playlist states
-        listenbrainzPlaylistStates[identifier] = listenbrainzState;
-
-        // Start discovery automatically (like Beatport and Tidal do)
-        try {
-            console.log(`🔍 Starting ListenBrainz discovery for: ${title}`);
-
-            // Call the discovery start endpoint with playlist data
-            const response = await fetch(`/api/listenbrainz/discovery/start/${identifier}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    playlist: listenbrainzState.playlist
-                })
-            });
-
-            const result = await response.json();
-            if (result.success) {
-                // Update state to discovering
-                listenbrainzPlaylistStates[identifier].phase = 'discovering';
-
-                // Start polling for progress
-                startListenBrainzDiscoveryPolling(identifier);
-
-                console.log(`✅ Started ListenBrainz discovery for: ${title}`);
-            } else {
-                console.error('❌ Error starting ListenBrainz discovery:', result.error);
-                showToast(`Error starting discovery: ${result.error}`, 'error');
-            }
-        } catch (error) {
-            console.error('❌ Error starting ListenBrainz discovery:', error);
-            showToast(`Error starting discovery: ${error.message}`, 'error');
-        }
-
-        // Open the existing YouTube discovery modal infrastructure
-        openYouTubeDiscoveryModal(identifier);
-
-        console.log(`✅ ListenBrainz discovery modal opened for ${title} with ${tracks.length} tracks`);
-
-    } catch (error) {
-        console.error('Error opening discovery modal for ListenBrainz playlist:', error);
-        showToast('Failed to open discovery modal', 'error');
-    }
-}
-
-async function openListenBrainzPlaylist(playlistMbid, playlistName) {
-    try {
-        showLoadingOverlay(`Loading ${playlistName}...`);
-
-        const response = await fetch(`/api/discover/listenbrainz/playlist/${playlistMbid}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch playlist');
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.playlist) {
-            showToast('Failed to load playlist', 'error');
-            hideLoadingOverlay();
-            return;
-        }
-
-        const playlist = data.playlist;
-        const tracks = playlist.tracks || [];
-
-        if (tracks.length === 0) {
-            showToast('This playlist is empty', 'info');
-            hideLoadingOverlay();
-            return;
-        }
-
-        // Convert to Spotify-like format for compatibility with download modal
-        const spotifyTracks = tracks.map(track => ({
-            id: track.recording_mbid || `listenbrainz_${track.title}_${track.creator}`.replace(/[^a-z0-9]/gi, '_'),  // Generate ID if missing
-            name: track.title || 'Unknown',
-            artists: [{ name: cleanArtistName(track.creator || 'Unknown') }], // Proper Spotify format
-            album: {
-                name: track.album || 'Unknown Album',
-                images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-            },
-            duration_ms: track.duration_ms || 0,
-            listenbrainz_metadata: track.additional_metadata
-        }));
-
-        const virtualPlaylistId = `listenbrainz_${playlistMbid}`;
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error(`Error opening ListenBrainz playlist:`, error);
-        showToast(`Failed to load playlist`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-async function refreshListenBrainzPlaylists() {
-    const button = document.getElementById('listenbrainz-refresh-btn');
-    if (!button) return;
-
-    try {
-        // Show loading state on button
-        const originalContent = button.innerHTML;
-        button.disabled = true;
-        button.innerHTML = '<span class="button-icon">⏳</span><span class="button-text">Refreshing...</span>';
-
-        console.log('🔄 Refreshing ListenBrainz playlists...');
-        showToast('Refreshing ListenBrainz playlists...', 'info');
-
-        const response = await fetch('/api/discover/listenbrainz/refresh', {
-            method: 'POST'
-        });
-
-        if (!response.ok) {
-            throw new Error(`Failed to refresh: ${response.statusText}`);
-        }
-
-        const data = await response.json();
-
-        if (data.success) {
-            const summary = data.summary || {};
-            let message = 'ListenBrainz playlists refreshed!';
-
-            // Build summary message
-            const updates = [];
-            for (const [type, stats] of Object.entries(summary)) {
-                const total = (stats.new || 0) + (stats.updated || 0);
-                if (total > 0) {
-                    updates.push(`${total} ${type}`);
-                }
-            }
-
-            if (updates.length > 0) {
-                message += ` Updated: ${updates.join(', ')}`;
-            } else {
-                message = 'All playlists are up to date';
-            }
-
-            console.log('✅ Refresh complete:', data.summary);
-            showToast(message, 'success');
-
-            // Reload the tabs to show updated data
-            await initializeListenBrainzTabs();
-
-        } else {
-            throw new Error(data.error || 'Unknown error');
-        }
-
-        // Restore button
-        button.disabled = false;
-        button.innerHTML = originalContent;
-
-    } catch (error) {
-        console.error('Error refreshing ListenBrainz playlists:', error);
-        showToast(`Failed to refresh: ${error.message}`, 'error');
-
-        // Restore button
-        button.disabled = false;
-        button.innerHTML = '<span class="button-icon">🔄</span><span class="button-text">Refresh</span>';
-    }
-}
-
-// ===============================
-// SEASONAL DISCOVERY
-// ===============================
-
-async function loadSeasonalContent() {
-    try {
-        const response = await fetch('/api/discover/seasonal/current');
-        if (!response.ok) {
-            console.error('Failed to fetch seasonal content');
-            return;
-        }
-
-        const data = await response.json();
-
-        // If no active season, hide seasonal sections
-        if (!data.success || !data.season) {
-            hideSeasonalSections();
-            return;
-        }
-
-        currentSeasonKey = data.season;
-
-        // Load seasonal albums
-        await loadSeasonalAlbums(data);
-
-        // Load seasonal playlist if available
-        if (data.playlist_available) {
-            await loadSeasonalPlaylist(data);
-        }
-
-    } catch (error) {
-        console.error('Error loading seasonal content:', error);
-        hideSeasonalSections();
-    }
-}
-
-async function loadSeasonalAlbums(seasonData) {
-    try {
-        const carousel = document.getElementById('seasonal-albums-carousel');
-        if (!carousel) return;
-
-        // Show seasonal section
-        const seasonalSection = document.getElementById('seasonal-albums-section');
-        if (seasonalSection) {
-            seasonalSection.style.display = 'block';
-        }
-
-        // Update header
-        const seasonalTitle = document.getElementById('seasonal-albums-title');
-        const seasonalSubtitle = document.getElementById('seasonal-albums-subtitle');
-
-        if (seasonalTitle) {
-            seasonalTitle.textContent = `${seasonData.icon} ${seasonData.name}`;
-        }
-        if (seasonalSubtitle) {
-            seasonalSubtitle.textContent = seasonData.description;
-        }
-
-        // Store albums for download functionality
-        discoverSeasonalAlbums = seasonData.albums || [];
-
-        if (discoverSeasonalAlbums.length === 0) {
-            carousel.innerHTML = '<div class="discover-empty"><p>No seasonal albums found</p></div>';
-            return;
-        }
-
-        // Build carousel HTML
-        let html = '';
-        discoverSeasonalAlbums.forEach((album, index) => {
-            const coverUrl = album.album_cover_url || '/static/placeholder-album.png';
-            html += `
-                <div class="discover-card" onclick="openDownloadModalForSeasonalAlbum(${index})" style="cursor: pointer;">
-                    <div class="discover-card-image">
-                        <img src="${coverUrl}" alt="${album.album_name}" loading="lazy">
-                    </div>
-                    <div class="discover-card-info">
-                        <h4 class="discover-card-title">${album.album_name}</h4>
-                        <p class="discover-card-subtitle">${album.artist_name}</p>
-                        ${album.release_date ? `<p class="discover-card-meta">${album.release_date}</p>` : ''}
-                    </div>
-                </div>
-            `;
-        });
-
-        carousel.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading seasonal albums:', error);
-    }
-}
-
-async function loadSeasonalPlaylist(seasonData) {
-    try {
-        const playlistContainer = document.getElementById('seasonal-playlist');
-        if (!playlistContainer) return;
-
-        // Show seasonal playlist section
-        const seasonalPlaylistSection = document.getElementById('seasonal-playlist-section');
-        if (seasonalPlaylistSection) {
-            seasonalPlaylistSection.style.display = 'block';
-        }
-
-        // Update header
-        const playlistTitle = document.getElementById('seasonal-playlist-title');
-        const playlistSubtitle = document.getElementById('seasonal-playlist-subtitle');
-
-        if (playlistTitle) {
-            playlistTitle.textContent = `${seasonData.icon} ${seasonData.name} Mix`;
-        }
-        if (playlistSubtitle) {
-            playlistSubtitle.textContent = `Curated playlist for ${seasonData.name.toLowerCase()}`;
-        }
-
-        playlistContainer.innerHTML = '<div class="discover-loading"><div class="loading-spinner"></div><p>Loading playlist...</p></div>';
-
-        // Fetch playlist tracks
-        const response = await fetch(`/api/discover/seasonal/${currentSeasonKey}/playlist`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch seasonal playlist');
-        }
-
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>No tracks available yet</p></div>';
-            return;
-        }
-
-        // Store tracks for download/sync functionality
-        discoverSeasonalTracks = data.tracks;
-
-        // Build compact playlist HTML
-        let html = '<div class="discover-playlist-tracks-compact">';
-        data.tracks.forEach((track, index) => {
-            const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
-            const durationMin = Math.floor(track.duration_ms / 60000);
-            const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
-            const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-
-            html += `
-                <div class="discover-playlist-track-compact" data-track-index="${index}">
-                    <div class="track-compact-number">${index + 1}</div>
-                    <div class="track-compact-image">
-                        <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
-                    </div>
-                    <div class="track-compact-info">
-                        <div class="track-compact-name">${track.track_name}</div>
-                        <div class="track-compact-artist">${track.artist_name}</div>
-                    </div>
-                    <div class="track-compact-album">${track.album_name}</div>
-                    <div class="track-compact-duration">${duration}</div>
-                </div>
-            `;
-        });
-        html += '</div>';
-
-        playlistContainer.innerHTML = html;
-
-    } catch (error) {
-        console.error('Error loading seasonal playlist:', error);
-        const playlistContainer = document.getElementById('seasonal-playlist');
-        if (playlistContainer) {
-            playlistContainer.innerHTML = '<div class="discover-empty"><p>Failed to load playlist</p></div>';
-        }
-    }
-}
-
-function hideSeasonalSections() {
-    const seasonalAlbumsSection = document.getElementById('seasonal-albums-section');
-    const seasonalPlaylistSection = document.getElementById('seasonal-playlist-section');
-
-    if (seasonalAlbumsSection) {
-        seasonalAlbumsSection.style.display = 'none';
-    }
-    if (seasonalPlaylistSection) {
-        seasonalPlaylistSection.style.display = 'none';
-    }
-}
-
-async function openDownloadModalForSeasonalAlbum(albumIndex) {
-    const album = discoverSeasonalAlbums[albumIndex];
-    if (!album) {
-        showToast('Album data not found', 'error');
-        return;
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for seasonal album: ${album.album_name}`);
-    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
-
-    try {
-        // Determine source and album ID - use source-agnostic endpoint (matches Recent Releases)
-        const source = album.source || (album.spotify_album_id && !album.spotify_album_id.match(/^\d+$/) ? 'spotify' : 'itunes');
-        const albumId = album.spotify_album_id;
-
-        if (!albumId) {
-            throw new Error('No album ID available');
-        }
-
-        // Fetch album tracks from appropriate source (pass name/artist for Hydrabase support)
-        const _dap1 = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-        const response = await fetch(`/api/discover/album/${source}/${albumId}?${_dap1}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch album tracks');
-        }
-
-        const albumData = await response.json();
-        if (!albumData.tracks || albumData.tracks.length === 0) {
-            throw new Error('No tracks found in album');
-        }
-
-        // Convert to expected format with full album context (matches Recent Releases)
-        const spotifyTracks = albumData.tracks.map(track => {
-            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-            if (Array.isArray(artists)) {
-                artists = artists.map(a => a.name || a);
-            }
-
-            return {
-                id: track.id,
-                name: track.name,
-                artists: artists,
-                album: {
-                    id: albumData.id,
-                    name: albumData.name,
-                    album_type: albumData.album_type || 'album',
-                    total_tracks: albumData.total_tracks || 0,
-                    release_date: albumData.release_date || '',
-                    images: albumData.images || []
-                },
-                duration_ms: track.duration_ms || 0,
-                track_number: track.track_number || 0
-            };
-        });
-
-        // Create virtual playlist ID
-        const virtualPlaylistId = `seasonal_album_${albumId}`;
-
-        // Pass proper artist/album context for album download (1 worker + source reuse)
-        const artistContext = {
-            name: album.artist_name,
-            source: source
-        };
-
-        const albumContext = {
-            id: albumData.id,
-            name: albumData.name,
-            album_type: albumData.album_type || 'album',
-            total_tracks: albumData.total_tracks || 0,
-            release_date: albumData.release_date || '',
-            images: albumData.images || []
-        };
-
-        // Open download modal with album context (same as Recent Releases)
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
-
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error(`Error loading seasonal album: ${error.message}`);
-        hideLoadingOverlay();
-        showToast(`Failed to load album tracks: ${error.message}`, 'error');
-    }
-}
-
-async function openDownloadModalForSeasonalPlaylist() {
-    if (!discoverSeasonalTracks || discoverSeasonalTracks.length === 0) {
-        alert('No seasonal tracks available');
-        return;
-    }
-
-    // Convert to track format expected by modal
-    const tracks = discoverSeasonalTracks.map(track => ({
-        id: track.spotify_track_id,
-        name: track.track_name,
-        artists: [{ name: track.artist_name }],
-        album: { name: track.album_name }
-    }));
-
-    openDownloadMissingModal(tracks, `${currentSeasonKey} Seasonal Mix`);
-}
-
-async function syncSeasonalPlaylist() {
-    if (!currentSeasonKey) {
-        alert('No active season');
-        return;
-    }
-
-    // Use the same sync logic as other discover playlists
-    // Create a virtual playlist ID for tracking
-    const virtualPlaylistId = `discover_seasonal_${currentSeasonKey}`;
-
-    // Build playlist data from seasonal tracks
-    const playlistData = {
-        id: virtualPlaylistId,
-        name: `${currentSeasonKey.charAt(0).toUpperCase() + currentSeasonKey.slice(1)} Mix`,
-        tracks: discoverSeasonalTracks.map(track => ({
-            id: track.spotify_track_id,
-            name: track.track_name,
-            artists: [{ name: track.artist_name }],
-            album: { name: track.album_name },
-            duration_ms: track.duration_ms
-        }))
-    };
-
-    // Trigger sync (reuse existing sync infrastructure)
-    await syncPlaylistToLibrary(playlistData);
-}
-
-// ===============================
-// PERSONALIZED PLAYLISTS
-// ===============================
-
-async function loadPersonalizedRecentlyAdded() {
-    try {
-        const container = document.getElementById('personalized-recently-added');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/recently-added');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedRecentlyAdded = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading recently added:', error);
-    }
-}
-
-async function loadPersonalizedTopTracks() {
-    try {
-        const container = document.getElementById('personalized-top-tracks');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/top-tracks');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedTopTracks = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading top tracks:', error);
-    }
-}
-
-async function loadPersonalizedForgottenFavorites() {
-    try {
-        const container = document.getElementById('personalized-forgotten-favorites');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/forgotten-favorites');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedForgottenFavorites = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading forgotten favorites:', error);
-    }
-}
-
-async function loadPersonalizedPopularPicks() {
-    try {
-        const container = document.getElementById('personalized-popular-picks');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/popular-picks');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedPopularPicks = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading popular picks:', error);
-    }
-}
-
-async function loadPersonalizedHiddenGems() {
-    try {
-        const container = document.getElementById('personalized-hidden-gems');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/hidden-gems');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedHiddenGems = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading hidden gems:', error);
-    }
-}
-
-async function loadPersonalizedDailyMixes() {
-    try {
-        const container = document.getElementById('daily-mixes-grid');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/daily-mixes');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.mixes || data.mixes.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedDailyMixes = data.mixes;
-
-        // Render Daily Mix cards
-        let html = '';
-        data.mixes.forEach((mix, index) => {
-            const coverUrl = mix.tracks && mix.tracks.length > 0 ?
-                (mix.tracks[0].album_cover_url || '/static/placeholder-album.png') :
-                '/static/placeholder-album.png';
-
-            html += `
-                <div class="discover-playlist-card" onclick="openDailyMix(${index})">
-                    <div class="discover-playlist-cover">
-                        <img src="${coverUrl}" alt="${mix.name}" loading="lazy">
-                        <div class="playlist-play-overlay">▶</div>
-                    </div>
-                    <div class="discover-playlist-info">
-                        <h4 class="discover-playlist-name">${mix.name}</h4>
-                        <p class="discover-playlist-description">${mix.description}</p>
-                        <p class="discover-playlist-count">${mix.track_count} tracks</p>
-                    </div>
-                </div>
-            `;
-        });
-
-        container.innerHTML = html;
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading daily mixes:', error);
-    }
-}
-
-function renderCompactPlaylist(container, tracks) {
-    let html = '<div class="discover-playlist-tracks-compact">';
-
-    tracks.forEach((track, index) => {
-        const coverUrl = track.album_cover_url || '/static/placeholder-album.png';
-        const durationMin = Math.floor(track.duration_ms / 60000);
-        const durationSec = Math.floor((track.duration_ms % 60000) / 1000);
-        const duration = `${durationMin}:${durationSec.toString().padStart(2, '0')}`;
-        const artistEsc = (track.artist_name || '').replace(/'/g, "\\'").replace(/"/g, '&quot;');
-
-        html += `
-            <div class="discover-playlist-track-compact" data-track-index="${index}">
-                <div class="track-compact-number">${index + 1}</div>
-                <div class="track-compact-image">
-                    <img src="${coverUrl}" alt="${track.album_name}" loading="lazy">
-                </div>
-                <div class="track-compact-info">
-                    <div class="track-compact-name">${track.track_name}</div>
-                    <div class="track-compact-artist">${track.artist_name}</div>
-                </div>
-                <div class="track-compact-album">${track.album_name}</div>
-                <div class="track-compact-duration">${duration}</div>
-                <button class="track-compact-block" onclick="event.stopPropagation(); blockDiscoveryArtist('${artistEsc}')" title="Block ${artistEsc} from discovery">✕</button>
-            </div>
-        `;
-    });
-
-    html += '</div>';
-    container.innerHTML = html;
-}
-
-async function blockDiscoveryArtist(artistName) {
-    if (!confirm(`Block "${artistName}" from all discovery playlists?`)) return;
-    try {
-        const res = await fetch('/api/discover/artist-blacklist', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_name: artistName })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Blocked ${artistName} from discovery`, 'success');
-            // Refresh all discovery sections to remove the artist
-            loadPersonalizedHiddenGems();
-            loadDiscoveryShuffle();
-            loadPersonalizedDailyMixes();
-        } else {
-            showToast(data.error || 'Failed to block artist', 'error');
-        }
-    } catch (e) {
-        showToast('Error blocking artist', 'error');
-    }
-}
-
-async function openDiscoveryBlacklistModal() {
-    if (document.getElementById('discovery-blacklist-modal-overlay')) return;
-
-    const overlay = document.createElement('div');
-    overlay.id = 'discovery-blacklist-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="discover-blacklist-modal">
-            <div class="discover-blacklist-modal-header">
-                <h2>Blocked Artists</h2>
-                <p>These artists won't appear in any discovery playlist across all sources</p>
-                <button class="watch-all-close" onclick="document.getElementById('discovery-blacklist-modal-overlay').remove()">&times;</button>
-            </div>
-            <div class="discover-blacklist-modal-search">
-                <input type="text" id="dbl-search-input" placeholder="Search for an artist to block..." autocomplete="off">
-                <div id="dbl-search-results" class="dbl-search-results" style="display:none"></div>
-            </div>
-            <div class="discover-blacklist-modal-list" id="dbl-list">
-                <div class="discover-blacklist-empty">Loading...</div>
-            </div>
-            <div class="discover-blacklist-modal-footer">
-                <button class="watch-all-btn watch-all-btn-cancel" onclick="document.getElementById('discovery-blacklist-modal-overlay').remove()">Close</button>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Wire up search
-    let searchTimer = null;
-    const input = document.getElementById('dbl-search-input');
-    input.addEventListener('input', () => {
-        clearTimeout(searchTimer);
-        const q = input.value.trim();
-        if (q.length < 2) { document.getElementById('dbl-search-results').style.display = 'none'; return; }
-        searchTimer = setTimeout(() => _dblSearch(q), 300);
-    });
-
-    _dblLoadList();
-}
-
-async function _dblSearch(query) {
-    const resultsEl = document.getElementById('dbl-search-results');
-    if (!resultsEl) return;
-    try {
-        // Use existing enhanced search to find artists
-        const res = await fetch('/api/enhanced-search', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ query, limit: 8 })
-        });
-        const data = await res.json();
-        const artists = data.spotify_artists || data.artists || [];
-        if (artists.length === 0) {
-            resultsEl.innerHTML = '<div class="dbl-search-empty">No artists found</div>';
-            resultsEl.style.display = 'block';
-            return;
-        }
-        resultsEl.innerHTML = artists.map(a => {
-            const name = _escToast(a.name || '');
-            const img = a.image_url ? `<img src="${a.image_url}" class="dbl-search-img">` : '<div class="dbl-search-img-placeholder">🎤</div>';
-            return `<div class="dbl-search-item" onclick="_dblBlockFromSearch('${name.replace(/'/g, "\\'")}')">
-                ${img}
-                <span class="dbl-search-name">${name}</span>
-                <span class="dbl-search-action">Block</span>
-            </div>`;
-        }).join('');
-        resultsEl.style.display = 'block';
-    } catch (e) {
-        resultsEl.style.display = 'none';
-    }
-}
-
-async function _dblBlockFromSearch(artistName) {
-    try {
-        const res = await fetch('/api/discover/artist-blacklist', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ artist_name: artistName })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Blocked ${artistName} from discovery`, 'success');
-            document.getElementById('dbl-search-results').style.display = 'none';
-            const input = document.getElementById('dbl-search-input');
-            if (input) input.value = '';
-            _dblLoadList();
-        }
-    } catch (e) {
-        showToast('Error blocking artist', 'error');
-    }
-}
-
-async function _dblLoadList() {
-    const container = document.getElementById('dbl-list');
-    if (!container) return;
-    try {
-        const res = await fetch('/api/discover/artist-blacklist');
-        const data = await res.json();
-        if (!data.success || !data.entries || data.entries.length === 0) {
-            container.innerHTML = '<div class="discover-blacklist-empty">No blocked artists yet — search above to block one</div>';
-            return;
-        }
-        container.innerHTML = data.entries.map(e => `
-            <div class="discover-blacklist-item">
-                <span class="discover-blacklist-name">${_escToast(e.artist_name)}</span>
-                <span class="discover-blacklist-date">${e.created_at ? new Date(e.created_at).toLocaleDateString() : ''}</span>
-                <button class="discover-blacklist-remove" onclick="unblockDiscoveryArtist(${e.id}, '${_escAttr(e.artist_name)}')" title="Unblock">✕</button>
-            </div>
-        `).join('');
-    } catch (e) {
-        container.innerHTML = '<div class="discover-blacklist-empty">Failed to load</div>';
-    }
-}
-
-async function unblockDiscoveryArtist(id, name) {
-    try {
-        const res = await fetch(`/api/discover/artist-blacklist/${id}`, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Unblocked ${name}`, 'success');
-            _dblLoadList();
-        }
-    } catch (e) {
-        showToast('Error unblocking artist', 'error');
-    }
-}
-
-// Backwards compat — called during page init but now a no-op (modal handles it)
-// ── Your Artists (Liked Artists Pool) ──
-
-async function loadYourArtists() {
-    const section = document.getElementById('your-artists-section');
-    const carousel = document.getElementById('your-artists-carousel');
-    const subtitle = document.getElementById('your-artists-subtitle');
-    if (!section || !carousel) return;
-
-    try {
-        const resp = await fetch('/api/discover/your-artists');
-        if (!resp.ok) return;
-        const data = await resp.json();
-
-        if (!data.artists || data.artists.length === 0) {
-            if (data.stale) {
-                // First load — show section with loading state, poll until ready
-                section.style.display = '';
-                if (subtitle) subtitle.textContent = 'Discovering your artists across connected services...';
-                carousel.innerHTML = `
-                    <div class="ya-loading">
-                        <div class="watch-all-loading-spinner"></div>
-                        <span>Fetching and matching artists from your services...</span>
-                    </div>
-                `;
-                _pollYourArtists();
-            } else {
-                section.style.display = 'none';
-            }
-            return;
-        }
-
-        // Show section
-        section.style.display = '';
-
-        // Update subtitle with source info
-        const sources = new Set();
-        data.artists.forEach(a => (a.source_services || []).forEach(s => sources.add(s)));
-        const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
-        const sourceList = [...sources].map(s => sourceNames[s] || s).join(' and ');
-        if (subtitle) subtitle.textContent = `Artists you follow on ${sourceList || 'your music services'}`;
-
-        if (data.stale) {
-            if (subtitle) subtitle.textContent += ' (updating...)';
-            _pollYourArtists();
-        }
-
-        // Store for modal access and render carousel cards
-        window._yaArtists = {};
-        window._yaActiveSource = data.active_source || 'spotify';
-        data.artists.forEach(a => { window._yaArtists[a.id] = a; });
-        carousel.innerHTML = data.artists.map(a => _renderYourArtistCard(a)).join('');
-
-    } catch (err) {
-        console.error('Error loading Your Artists:', err);
-    }
-}
-
-function _pollYourArtists() {
-    // Poll every 5s until artists appear, then stop
-    if (window._yaPoller) clearInterval(window._yaPoller);
-    let attempts = 0;
-    window._yaPoller = setInterval(async () => {
-        attempts++;
-        if (attempts > 60) { clearInterval(window._yaPoller); window._yaPoller = null; return; }
-        try {
-            const resp = await fetch('/api/discover/your-artists');
-            if (!resp.ok) return;
-            const data = await resp.json();
-            if (data.artists && data.artists.length > 0) {
-                clearInterval(window._yaPoller);
-                window._yaPoller = null;
-                loadYourArtists(); // Re-render with real data
-            }
-        } catch (e) { }
-    }, 5000);
-}
-
-function _renderYourArtistCard(artist) {
-    const _esc = (s) => escapeHtml(s || '');
-    const img = artist.image_url || '';
-
-    // Build metadata source badges (same pattern as library page)
-    const badges = [];
-    if (artist.spotify_artist_id) badges.push({ logo: SPOTIFY_LOGO_URL, fb: 'SP', title: 'Spotify' });
-    if (artist.itunes_artist_id) badges.push({ logo: ITUNES_LOGO_URL, fb: 'IT', title: 'Apple Music' });
-    if (artist.deezer_artist_id) badges.push({ logo: DEEZER_LOGO_URL, fb: 'Dz', title: 'Deezer' });
-    if (artist.discogs_artist_id) badges.push({ logo: DISCOGS_LOGO_URL, fb: 'DC', title: 'Discogs' });
-    const badgeHTML = badges.map(b =>
-        `<div class="ya-badge" title="${b.title}">${b.logo ? `<img src="${b.logo}" onerror="this.parentNode.textContent='${b.fb}'">` : `<span>${b.fb}</span>`}</div>`
-    ).join('');
-
-    // Origin dots (which services the artist came from)
-    const sources = artist.source_services || [];
-    const sourceColors = { spotify: '#1DB954', lastfm: '#D51007', tidal: '#00FFFF', deezer: '#A238FF' };
-    const originDots = sources.map(s =>
-        `<span class="ya-origin-dot" style="background:${sourceColors[s] || '#666'}" title="From ${s}"></span>`
-    ).join('');
-
-    const watchlistClass = artist.on_watchlist ? 'active' : '';
-    const hasId = artist.active_source_id && artist.active_source_id !== '';
-
-    // Navigate to artist page (name click)
-    const navAction = hasId
-        ? `event.stopPropagation(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(artist.active_source_id)}', name:'${escapeForInlineJs(artist.artist_name)}', image_url:'${escapeForInlineJs(img)}'}), 200)`
-        : '';
-
-    // Open info modal (card body click) — pass pool ID so we can look up all data
-    const infoAction = hasId
-        ? `openYourArtistInfoModal(${artist.id})`
-        : '';
-
-    // Deezer fallback for images
-    const deezerFb = artist.deezer_artist_id ? `onerror="if(!this.dataset.tried){this.dataset.tried='1';this.src='https://api.deezer.com/artist/${artist.deezer_artist_id}/image?size=big'}else{this.style.display='none';this.nextElementSibling.style.display='flex'}"` : `onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"`;
-
-    return `
-        <div class="ya-card" ${infoAction ? `onclick="${infoAction}"` : ''}>
-            <div class="ya-card-img">
-                ${img ? `<img src="${img}" alt="" loading="lazy" ${deezerFb}>` : ''}
-                <div class="ya-card-placeholder" ${img ? 'style="display:none"' : ''}>&#9835;</div>
-            </div>
-            <div class="ya-card-gradient"></div>
-            <div class="ya-card-badges">${badgeHTML}</div>
-            <button class="ya-watchlist-btn ${watchlistClass}" title="${artist.on_watchlist ? 'On watchlist' : 'Add to watchlist'}"
-                    onclick="event.stopPropagation(); toggleYourArtistWatchlist(${artist.id}, '${escapeForInlineJs(artist.artist_name)}', '${escapeForInlineJs(artist.active_source_id || '')}', '${escapeForInlineJs(artist.active_source || '')}', this)">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="${artist.on_watchlist ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2">
-                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
-                </svg>
-            </button>
-            <div class="ya-card-info">
-                <div class="ya-card-info-row">
-                    <div class="ya-origin-dots">${originDots}</div>
-                </div>
-                <div class="ya-card-name" ${navAction ? `onclick="${navAction}"` : ''}>${_esc(artist.artist_name)}</div>
-            </div>
-        </div>
-    `;
-}
-
-async function openYourArtistInfoModal(poolId) {
-    const pool = (window._yaArtists || {})[poolId];
-    if (!pool) return;
-
-    const artistId = pool.active_source_id;
-    const artistName = pool.artist_name;
-    const imageUrl = pool.image_url || '';
-
-    const existing = document.getElementById('ya-info-modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'ya-info-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.style.zIndex = '10001';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    // Build matched source badges from pool data
-    const _mb = (logo, fb, title) => `<div class="ya-info-badge" title="${title}">${logo ? `<img src="${logo}" onerror="this.parentNode.textContent='${fb}'">` : `<span>${fb}</span>`}</div>`;
-    const matchBadges = [];
-    if (pool.spotify_artist_id) matchBadges.push(_mb(SPOTIFY_LOGO_URL, 'SP', 'Matched on Spotify'));
-    if (pool.itunes_artist_id) matchBadges.push(_mb(ITUNES_LOGO_URL, 'IT', 'Matched on Apple Music'));
-    if (pool.deezer_artist_id) matchBadges.push(_mb(DEEZER_LOGO_URL, 'Dz', 'Matched on Deezer'));
-    if (pool.discogs_artist_id) matchBadges.push(_mb(DISCOGS_LOGO_URL, 'DC', 'Matched on Discogs'));
-
-    // Origin info
-    const sources = pool.source_services || [];
-    const sourceNames = { spotify: 'Spotify', lastfm: 'Last.fm', tidal: 'Tidal', deezer: 'Deezer' };
-    const originText = sources.map(s => sourceNames[s] || s).join(', ');
-
-    overlay.innerHTML = `
-        <div class="ya-info-modal">
-            <button class="watch-all-close" onclick="document.getElementById('ya-info-modal-overlay').remove()">&times;</button>
-            <div class="ya-info-hero">
-                <div class="ya-info-hero-bg" ${imageUrl ? `style="background-image:url('${escapeHtml(imageUrl)}')"` : ''}></div>
-                <div class="ya-info-hero-content">
-                    <div class="ya-info-hero-img">
-                        ${imageUrl ? `<img src="${escapeHtml(imageUrl)}" alt="">` : '<div class="ya-info-img-fallback">&#9835;</div>'}
-                    </div>
-                    <div class="ya-info-hero-text">
-                        <h2 class="ya-info-name">${escapeHtml(artistName)}</h2>
-                        <div class="ya-info-badges">${matchBadges.join('')}</div>
-                        ${originText ? `<div class="ya-info-origin">Followed on ${escapeHtml(originText)}</div>` : ''}
-                    </div>
-                </div>
-            </div>
-            <div class="ya-info-body" id="ya-info-body">
-                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading artist info...</div></div>
-            </div>
-            <div class="ya-info-footer" id="ya-info-footer"></div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Fetch enrichment data (with timeout)
-    try {
-        const controller = new AbortController();
-        const timeout = setTimeout(() => controller.abort(), 8000);
-        const lookupId = artistId || encodeURIComponent(artistName);
-        const resp = await fetch(`/api/discover/your-artists/info/${lookupId}?name=${encodeURIComponent(artistName)}`, { signal: controller.signal });
-        clearTimeout(timeout);
-        const artist = resp.ok ? await resp.json() : {};
-        const bodyEl = document.getElementById('ya-info-body');
-        const footerEl = document.getElementById('ya-info-footer');
-
-        const genres = artist.genres || [];
-        const bio = artist.summary || '';
-        const listeners = artist.lastfm_listeners || artist.followers || 0;
-        const playcount = artist.lastfm_playcount || 0;
-        const popularity = artist.popularity || 0;
-
-        let bodyHTML = '';
-
-        // Stats
-        if (listeners || playcount || popularity) {
-            bodyHTML += `<div class="ya-info-stats">
-                ${listeners ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${Number(listeners).toLocaleString()}</span><span class="ya-info-stat-label">listeners</span></div>` : ''}
-                ${playcount ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${Number(playcount).toLocaleString()}</span><span class="ya-info-stat-label">plays</span></div>` : ''}
-                ${popularity ? `<div class="ya-info-stat"><span class="ya-info-stat-value">${popularity}</span><span class="ya-info-stat-label">popularity</span></div>` : ''}
-            </div>`;
-        }
-
-        // Genres
-        if (genres.length > 0) {
-            bodyHTML += `<div class="ya-info-section">
-                <div class="ya-info-genres">${genres.map(g => `<span class="ya-info-genre">${escapeHtml(g)}</span>`).join('')}</div>
-            </div>`;
-        }
-
-        // Bio
-        if (bio) {
-            const cleanBio = bio.replace(/<a[^>]*>.*?<\/a>/gi, '').replace(/<[^>]+>/g, '').trim();
-            if (cleanBio) {
-                bodyHTML += `<div class="ya-info-section">
-                    <div class="ya-info-section-title">About</div>
-                    <div class="ya-info-bio">${escapeHtml(cleanBio.length > 600 ? cleanBio.substring(0, 600) + '...' : cleanBio)}</div>
-                </div>`;
-            }
-        }
-
-        // Related artists from map connections
-        const related = pool._related || [];
-        if (related.length > 0) {
-            const relLabel = pool.on_watchlist ? 'Similar Artists' : 'Connected To';
-            bodyHTML += `<div class="ya-info-section">
-                <div class="ya-info-section-title">${relLabel}</div>
-                <div class="ya-info-related">
-                    ${related.slice(0, 12).map(r => {
-                const rImg = r.image_url || '';
-                const rType = r.type === 'watchlist';
-                return `<div class="ya-info-related-item" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); setTimeout(() => openYourArtistInfoModal_direct(${JSON.stringify({
-                    id: r.id, name: r.name, image_url: rImg,
-                    spotify_id: r.spotify_id || '', itunes_id: r.itunes_id || '',
-                    deezer_id: r.deezer_id || '', discogs_id: r.discogs_id || '',
-                    type: r.type
-                }).replace(/"/g, '&quot;')}), 100)">
-                            <div class="ya-info-related-img">
-                                ${rImg ? `<img src="${escapeHtml(rImg)}" alt="">` : '<span>&#9835;</span>'}
-                            </div>
-                            <div class="ya-info-related-text">
-                                <div class="ya-info-related-name">${escapeHtml(r.name)}</div>
-                                ${rType ? '<div class="ya-info-related-badge">★ Watchlist</div>' : ''}
-                            </div>
-                        </div>`;
-            }).join('')}
-                    ${related.length > 12 ? `<div class="ya-info-related-more">+${related.length - 12} more</div>` : ''}
-                </div>
-            </div>`;
-        }
-
-        if (!bodyHTML) bodyHTML = '<div class="ya-info-empty">No additional info available</div>';
-        if (bodyEl) bodyEl.innerHTML = bodyHTML;
-
-        // Footer
-        if (footerEl) {
-            const watchBtn = pool.on_watchlist
-                ? `<button class="ya-header-btn" onclick="toggleYourArtistWatchlist(${pool.id}, '${escapeForInlineJs(artistName)}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(pool.active_source || '')}', this); this.textContent='Done'; this.disabled=true">Remove from Watchlist</button>`
-                : `<button class="ya-header-btn" onclick="toggleYourArtistWatchlist(${pool.id}, '${escapeForInlineJs(artistName)}', '${escapeForInlineJs(artistId)}', '${escapeForInlineJs(pool.active_source || '')}', this); this.textContent='Added!'; this.disabled=true">Add to Watchlist</button>`;
-            footerEl.innerHTML = `
-                ${watchBtn}
-                <button class="ya-header-btn" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); document.getElementById('your-artists-modal-overlay')?.remove(); openArtistMapExplorerDirect('${escapeForInlineJs(artistName)}')">
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-                    <span>Explore</span>
-                </button>
-                <button class="ya-header-btn ya-viewall-btn" onclick="document.getElementById('ya-info-modal-overlay')?.remove(); document.getElementById('your-artists-modal-overlay')?.remove(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(artistId)}', name:'${escapeForInlineJs(artistName)}', image_url:'${escapeForInlineJs(imageUrl)}'}, {source:'${escapeForInlineJs(pool.active_source || '')}'}), 200)">
-                    <span>View Discography</span>
-                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
-                </button>
-            `;
-        }
-    } catch (err) {
-        console.error('[Artist Info] Error loading artist info:', err);
-        const bodyEl = document.getElementById('ya-info-body');
-        if (bodyEl) bodyEl.innerHTML = `<div class="ya-info-empty">Could not load artist info</div>`;
-    }
-}
-
-async function toggleYourArtistWatchlist(poolId, artistName, sourceId, source, btnEl) {
-    const isWatched = btnEl && btnEl.classList.contains('active');
-    try {
-        if (isWatched) {
-            const resp = await fetch('/api/watchlist/remove', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: sourceId })
-            });
-            if (resp.ok) {
-                if (btnEl) {
-                    btnEl.classList.remove('active');
-                    const svg = btnEl.querySelector('svg');
-                    if (svg) svg.setAttribute('fill', 'none');
-                }
-                showToast(`Removed ${artistName} from watchlist`, 'info');
-                // Sync card eye icon
-                _syncYaCardWatchlist(poolId, false);
-            }
-        } else {
-            const resp = await fetch('/api/watchlist/add', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ artist_id: sourceId, artist_name: artistName, source: source })
-            });
-            if (resp.ok) {
-                if (btnEl) {
-                    btnEl.classList.add('active');
-                    const svg = btnEl.querySelector('svg');
-                    if (svg) svg.setAttribute('fill', 'currentColor');
-                }
-                showToast(`Added ${artistName} to watchlist`, 'success');
-                _syncYaCardWatchlist(poolId, true);
-            }
-        }
-    } catch (err) {
-        showToast('Failed to update watchlist', 'error');
-    }
-}
-
-function _syncYaCardWatchlist(poolId, watched) {
-    // Sync the card's eye icon with watchlist state (covers modal → card sync)
-    document.querySelectorAll('.ya-card .ya-watchlist-btn').forEach(btn => {
-        const card = btn.closest('.ya-card');
-        if (!card) return;
-        // Match by onclick containing the poolId
-        const onclick = btn.getAttribute('onclick') || '';
-        if (onclick.includes(`(${poolId},`)) {
-            if (watched) {
-                btn.classList.add('active');
-                const svg = btn.querySelector('svg');
-                if (svg) svg.setAttribute('fill', 'currentColor');
-            } else {
-                btn.classList.remove('active');
-                const svg = btn.querySelector('svg');
-                if (svg) svg.setAttribute('fill', 'none');
-            }
-        }
-    });
-    // Update pool data
-    if (window._yaArtists && window._yaArtists[poolId]) {
-        window._yaArtists[poolId].on_watchlist = watched ? 1 : 0;
-    }
-}
-
-async function refreshYourArtists() {
-    const btn = document.getElementById('your-artists-refresh-btn');
-    if (btn) { btn.disabled = true; btn.style.opacity = '0.5'; }
-    const subtitle = document.getElementById('your-artists-subtitle');
-    if (subtitle) subtitle.textContent = 'Refreshing from your services...';
-
-    try {
-        await fetch('/api/discover/your-artists/refresh?clear=true', { method: 'POST' });
-        // Poll until done
-        let attempts = 0;
-        const poll = setInterval(async () => {
-            attempts++;
-            if (attempts > 60) { clearInterval(poll); return; } // 5 min max
-            try {
-                const resp = await fetch('/api/discover/your-artists');
-                const data = await resp.json();
-                if (!data.stale && data.artists && data.artists.length > 0) {
-                    clearInterval(poll);
-                    loadYourArtists();
-                    if (btn) { btn.disabled = false; btn.style.opacity = ''; }
-                    showToast(`Found ${data.total} artists from your services`, 'success');
-                }
-            } catch (e) { }
-        }, 5000);
-    } catch (err) {
-        showToast('Failed to start refresh', 'error');
-        if (btn) { btn.disabled = false; btn.style.opacity = ''; }
-    }
-}
-
-async function openYourArtistsSourcesModal() {
-    const existing = document.getElementById('ya-sources-modal-overlay');
-    if (existing) existing.remove();
-
-    // Fetch current config + connected services
-    let enabled = ['spotify', 'tidal', 'lastfm', 'deezer'];
-    let connected = [];
-    try {
-        const resp = await fetch('/api/discover/your-artists/sources');
-        if (resp.ok) {
-            const data = await resp.json();
-            if (data.enabled) enabled = data.enabled;
-            if (data.connected) connected = data.connected;
-        }
-    } catch (e) { }
-
-    const sourceInfo = [
-        { id: 'spotify', label: 'Spotify', icon: '🎵' },
-        { id: 'tidal', label: 'Tidal', icon: '🌊' },
-        { id: 'lastfm', label: 'Last.fm', icon: '📻' },
-        { id: 'deezer', label: 'Deezer', icon: '🎶' },
-    ];
-
-    const state = {};
-    sourceInfo.forEach(s => { state[s.id] = enabled.includes(s.id); });
-
-    const overlay = document.createElement('div');
-    overlay.id = 'ya-sources-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    const rows = sourceInfo.map(s => {
-        const isConnected = connected.includes(s.id);
-        const isOn = state[s.id];
-        return `
-            <div class="ya-source-row${isConnected ? '' : ' disconnected'}" data-source="${s.id}" onclick="_yaSourceRowClick('${s.id}')">
-                <div class="ya-source-row-left">
-                    <span style="font-size:18px">${s.icon}</span>
-                    <div>
-                        <div class="ya-source-name">${s.label}</div>
-                        <div class="ya-source-status">${isConnected ? 'Connected' : 'Not connected'}</div>
-                    </div>
-                </div>
-                <button class="ya-source-toggle${isOn ? ' on' : ''}" id="ya-toggle-${s.id}" onclick="event.stopPropagation();_yaSourceToggle('${s.id}')"></button>
-            </div>`;
-    }).join('');
-
-    overlay.innerHTML = `
-        <div class="ya-sources-modal">
-            <h2>Your Artists Sources</h2>
-            <p class="ya-sources-desc">Choose which connected services contribute artists to this section.</p>
-            <div class="ya-sources-list">${rows}</div>
-            <div class="ya-sources-footer">
-                <button class="ya-sources-cancel-btn" onclick="document.getElementById('ya-sources-modal-overlay').remove()">Cancel</button>
-                <button class="ya-sources-save-btn" onclick="_yaSourcesSave()">Save</button>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-    window._yaSourcesState = state;
-}
-
-function _yaSourceRowClick(id) {
-    // Don't allow toggling disconnected services
-    const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
-    if (row && row.classList.contains('disconnected')) return;
-    _yaSourceToggle(id);
-}
-
-function _yaSourceToggle(id) {
-    // Don't allow toggling disconnected services
-    const row = document.querySelector(`.ya-source-row[data-source="${id}"]`);
-    if (row && row.classList.contains('disconnected')) return;
-    window._yaSourcesState[id] = !window._yaSourcesState[id];
-    const btn = document.getElementById(`ya-toggle-${id}`);
-    if (btn) btn.classList.toggle('on', window._yaSourcesState[id]);
-}
-
-async function _yaSourcesSave() {
-    const enabledArr = Object.entries(window._yaSourcesState)
-        .filter(([, v]) => v).map(([k]) => k);
-    if (enabledArr.length === 0) {
-        showToast('Select at least one source', 'error');
-        return;
-    }
-    const enabled = enabledArr.join(',');
-    try {
-        const resp = await fetch('/api/settings', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ discover: { your_artists_sources: enabled } })
-        });
-        if (resp.ok) {
-            document.getElementById('ya-sources-modal-overlay')?.remove();
-            showToast('Sources saved — refresh to apply', 'success');
-            // Update subtitle immediately
-            const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', lastfm: 'Last.fm', deezer: 'Deezer' };
-            const subtitle = document.getElementById('your-artists-subtitle');
-            if (subtitle) {
-                const names = enabledArr.map(s => sourceNames[s] || s).join(' and ');
-                subtitle.textContent = `Artists you follow on ${names}`;
-            }
-        } else {
-            showToast('Failed to save sources', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to save sources', 'error');
-    }
-}
-
-async function openYourArtistsModal() {
-    const existing = document.getElementById('your-artists-modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'your-artists-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="ya-modal">
-            <div class="ya-modal-header">
-                <div>
-                    <h2 class="ya-modal-title">Your Artists</h2>
-                    <p class="ya-modal-subtitle" id="ya-modal-subtitle">Loading...</p>
-                </div>
-                <button class="watch-all-close" onclick="document.getElementById('your-artists-modal-overlay').remove()">&times;</button>
-            </div>
-            <div class="ya-modal-toolbar">
-                <input type="text" id="ya-modal-search" class="ya-modal-search" placeholder="Search artists...">
-                <div class="ya-modal-filters">
-                    <button class="ya-filter-btn active" data-source="" onclick="_yaFilterSource('')">All</button>
-                    <button class="ya-filter-btn" data-source="spotify" onclick="_yaFilterSource('spotify')">Spotify</button>
-                    <button class="ya-filter-btn" data-source="tidal" onclick="_yaFilterSource('tidal')">Tidal</button>
-                    <button class="ya-filter-btn" data-source="lastfm" onclick="_yaFilterSource('lastfm')">Last.fm</button>
-                    <button class="ya-filter-btn" data-source="deezer" onclick="_yaFilterSource('deezer')">Deezer</button>
-                </div>
-                <select class="ya-modal-sort" id="ya-modal-sort" onchange="_yaLoadModal()">
-                    <option value="name">A-Z</option>
-                    <option value="recent">Recently Added</option>
-                    <option value="source">By Source</option>
-                </select>
-            </div>
-            <div class="ya-modal-body" id="ya-modal-body">
-                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading...</div></div>
-            </div>
-            <div class="ya-modal-footer" id="ya-modal-footer"></div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Search debounce
-    let searchTimer = null;
-    overlay.querySelector('#ya-modal-search').addEventListener('input', () => {
-        clearTimeout(searchTimer);
-        searchTimer = setTimeout(() => _yaLoadModal(), 300);
-    });
-
-    window._yaModalState = { page: 1, source: '', sort: 'name' };
-    _yaLoadModal();
-}
-
-function _yaFilterSource(source) {
-    window._yaModalState.source = source;
-    window._yaModalState.page = 1;
-    document.querySelectorAll('.ya-filter-btn').forEach(b => b.classList.toggle('active', b.dataset.source === source));
-    _yaLoadModal();
-}
-
-async function _yaLoadModal() {
-    const body = document.getElementById('ya-modal-body');
-    const footer = document.getElementById('ya-modal-footer');
-    const subtitle = document.getElementById('ya-modal-subtitle');
-    if (!body) return;
-
-    const state = window._yaModalState || { page: 1, source: '', sort: 'name' };
-    const search = document.getElementById('ya-modal-search')?.value || '';
-    const sort = document.getElementById('ya-modal-sort')?.value || 'name';
-    state.sort = sort;
-
-    const params = new URLSearchParams({ page: state.page, per_page: 60, sort: state.sort });
-    if (state.source) params.set('source', state.source);
-    if (search) params.set('search', search);
-
-    try {
-        const resp = await fetch(`/api/discover/your-artists/all?${params}`);
-        const data = await resp.json();
-
-        if (subtitle) subtitle.textContent = `${data.total} artists matched`;
-
-        if (!data.artists || data.artists.length === 0) {
-            body.innerHTML = '<div class="failed-mb-empty">No artists found</div>';
-            if (footer) footer.innerHTML = '';
-            return;
-        }
-
-        // Store for info modal access
-        if (!window._yaArtists) window._yaArtists = {};
-        data.artists.forEach(a => { window._yaArtists[a.id] = a; });
-        body.innerHTML = `<div class="ya-modal-grid">${data.artists.map(a => _renderYourArtistCard(a)).join('')}</div>`;
-
-        // Pagination
-        const totalPages = Math.ceil(data.total / 60);
-        if (footer && totalPages > 1) {
-            footer.innerHTML = `
-                <div class="failed-mb-pagination">
-                    <button class="failed-mb-btn-sm" ${state.page <= 1 ? 'disabled' : ''} onclick="window._yaModalState.page--; _yaLoadModal()">Prev</button>
-                    <span>Page ${state.page} of ${totalPages}</span>
-                    <button class="failed-mb-btn-sm" ${state.page >= totalPages ? 'disabled' : ''} onclick="window._yaModalState.page++; _yaLoadModal()">Next</button>
-                </div>
-            `;
-        } else if (footer) {
-            footer.innerHTML = '';
-        }
-    } catch (err) {
-        body.innerHTML = '<div class="failed-mb-empty">Failed to load</div>';
-    }
-}
-
-function loadDiscoveryBlacklist() { }
-
-// ── Artist Map — Circle-packed staged canvas visualization ──
-const _artMap = {
-    placed: [],
-    edges: [],
-    images: {},
-    canvas: null, ctx: null,
-    offscreen: null, offCtx: null, // offscreen buffer for fast pan/zoom
-    width: 0, height: 0,
-    offsetX: 0, offsetY: 0, zoom: 0.15,
-    hoveredNode: null, animFrame: null,
-    dirty: true, // true = need to rebuild offscreen buffer
-    WATCHLIST_R: 320,
-    BUFFER: 8,
-};
-
-async function openArtistMap() {
-    const container = document.getElementById('artist-map-container');
-    if (!container) return;
-
-    // Hide discover sections, show map
-    document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
-        el._prevDisplay = el.style.display;
-        el.style.display = 'none';
-    });
-    container.style.display = 'flex';
-
-    const canvas = document.getElementById('artist-map-canvas');
-    _artMap.canvas = canvas;
-    _artMap.ctx = canvas.getContext('2d');
-    _artMap.width = container.clientWidth;
-    _artMap.height = container.clientHeight - 50;
-    canvas.width = _artMap.width * window.devicePixelRatio;
-    canvas.height = _artMap.height * window.devicePixelRatio;
-    canvas.style.width = _artMap.width + 'px';
-    canvas.style.height = _artMap.height + 'px';
-    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    _artMap.offsetX = _artMap.width / 2;
-    _artMap.offsetY = _artMap.height / 2;
-    _artMap.placed = [];
-    _artMap.images = {};
-    _artMap._nodeById = null;
-
-    // Loading screen
-    _artMap.ctx.fillStyle = '#0a0a14';
-    _artMap.ctx.fillRect(0, 0, _artMap.width, _artMap.height);
-    _artMap.ctx.fillStyle = 'rgba(255,255,255,0.3)';
-    _artMap.ctx.font = '14px system-ui';
-    _artMap.ctx.textAlign = 'center';
-    _artMap.ctx.fillText('Building artist map...', _artMap.width / 2, _artMap.height / 2);
-
-    try {
-        const resp = await fetch('/api/discover/artist-map');
-        const data = await resp.json();
-        if (!data.success || !data.nodes.length) {
-            _artMap.ctx.fillText('No watchlist artists. Add artists to your watchlist first.', _artMap.width / 2, _artMap.height / 2 + 30);
-            return;
-        }
-
-        document.getElementById('artist-map-stats').textContent =
-            `${data.watchlist_count} watchlist · ${data.similar_count} similar`;
-
-        _artMap.edges = data.edges;
-        const WR = _artMap.WATCHLIST_R;
-        const BUF = _artMap.BUFFER;
-
-        // ── PHASE 1: Place watchlist artists with guaranteed no-overlap ──
-        const wNodes = data.nodes.filter(n => n.type === 'watchlist');
-        // Minimum center-to-center distance between watchlist nodes
-        const minCenterDist = WR * 3.5; // WR*2 for radii + WR*1.5 gap — similar artists fill the gaps via spiral packing
-
-        // Place watchlist nodes in a spiral — deterministic, guaranteed spacing
-        wNodes.forEach((n, i) => {
-            n.radius = WR;
-            n.opacity = 0;
-            if (i === 0) {
-                n.x = 0; n.y = 0;
-            } else {
-                // Golden angle spiral for even distribution
-                const angle = i * 2.399963; // golden angle in radians
-                const r = minCenterDist * Math.sqrt(i) * 0.7;
-                n.x = Math.cos(angle) * r;
-                n.y = Math.sin(angle) * r;
-            }
-        });
-
-        // Post-process: push apart any watchlist nodes that ended up too close
-        for (let pass = 0; pass < 50; pass++) {
-            let moved = false;
-            for (let i = 0; i < wNodes.length; i++) {
-                for (let j = i + 1; j < wNodes.length; j++) {
-                    const dx = wNodes[j].x - wNodes[i].x;
-                    const dy = wNodes[j].y - wNodes[i].y;
-                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                    if (dist < minCenterDist) {
-                        const push = (minCenterDist - dist) / 2 + 1;
-                        const nx = (dx / dist) * push;
-                        const ny = (dy / dist) * push;
-                        wNodes[i].x -= nx; wNodes[i].y -= ny;
-                        wNodes[j].x += nx; wNodes[j].y += ny;
-                        moved = true;
-                    }
-                }
-            }
-            if (!moved) break;
-        }
-
-        wNodes.forEach(n => { _artMap.placed.push(n); });
-
-        // ── PHASE 2: Place similar artists around their source watchlist nodes ──
-        const sNodes = data.nodes.filter(n => n.type === 'similar');
-        sNodes.forEach(n => {
-            const occ = n.occurrence || 1;
-            const rank = n.rank || 5;
-            // Bigger overall: min 25% of WR, max 55%, scaled by relevance
-            n.radius = Math.min(WR * 0.55, Math.max(WR * 0.25, WR * 0.2 + occ * WR * 0.06 + (10 - rank) * WR * 0.025));
-        });
-        sNodes.sort((a, b) => b.radius - a.radius);
-
-        // Build edge lookup: target_id → source node (O(1) instead of .find())
-        const edgeMap = {};
-        _artMap.edges.forEach(e => { edgeMap[e.target] = e.source; });
-        const nodeById = {};
-        _artMap.placed.forEach(n => { nodeById[n.id] = n; });
-
-        // Spatial grid for fast collision detection
-        // Cell size must cover the largest possible bubble diameter + buffer
-        const CELL = WR * 2 + BUF * 2;
-        const grid = {};
-        function _gridKey(x, y) { return `${Math.floor(x / CELL)},${Math.floor(y / CELL)}`; }
-        function _gridAdd(n) {
-            const k = _gridKey(n.x, n.y);
-            if (!grid[k]) grid[k] = [];
-            grid[k].push(n);
-        }
-        function _gridCheck(x, y, r) {
-            const cx = Math.floor(x / CELL);
-            const cy = Math.floor(y / CELL);
-            // Search wider radius to catch large watchlist bubbles
-            for (let dx = -3; dx <= 3; dx++) {
-                for (let dy = -3; dy <= 3; dy++) {
-                    const cell = grid[`${cx + dx},${cy + dy}`];
-                    if (!cell) continue;
-                    for (const p of cell) {
-                        const ddx = x - p.x, ddy = y - p.y;
-                        const minD = r + p.radius + BUF;
-                        if (ddx * ddx + ddy * ddy < minD * minD) return true;
-                    }
-                }
-            }
-            return false;
-        }
-        // Add watchlist nodes to grid
-        _artMap.placed.forEach(n => _gridAdd(n));
-
-        // Place similar nodes with spatial grid collision
-        for (const sn of sNodes) {
-            const srcId = edgeMap[sn.id];
-            const src = srcId != null ? nodeById[srcId] : null;
-            const cx = src ? src.x : 0;
-            const cy = src ? src.y : 0;
-            const startDist = (src ? src.radius : WR) + sn.radius + BUF;
-
-            let placed = false;
-            for (let dist = startDist; dist < startDist + WR * 3; dist += sn.radius * 0.5) {
-                const steps = Math.max(8, Math.floor(dist * 0.1));
-                const off = Math.random() * Math.PI * 2;
-                for (let a = 0; a < steps; a++) {
-                    const angle = off + (a / steps) * Math.PI * 2;
-                    const tx = cx + Math.cos(angle) * dist;
-                    const ty = cy + Math.sin(angle) * dist;
-                    if (!_gridCheck(tx, ty, sn.radius)) {
-                        sn.x = tx; sn.y = ty; sn.opacity = 0;
-                        _artMap.placed.push(sn);
-                        nodeById[sn.id] = sn;
-                        _gridAdd(sn);
-                        placed = true;
-                        break;
-                    }
-                }
-                if (placed) break;
-            }
-        }
-
-        // Auto-zoom to fit all nodes
-        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-        _artMap.placed.forEach(n => {
-            minX = Math.min(minX, n.x - n.radius);
-            maxX = Math.max(maxX, n.x + n.radius);
-            minY = Math.min(minY, n.y - n.radius);
-            maxY = Math.max(maxY, n.y + n.radius);
-        });
-        const mapW = maxX - minX + 200;
-        const mapH = maxY - minY + 200;
-        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
-        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
-        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
-
-        // Setup interaction
-        _artMapSetupInteraction(canvas);
-
-        // ── PHASE 3: Set all visible, build buffer, render ──
-        // Show loading overlay while buffer builds
-        const loadingEl = document.createElement('div');
-        loadingEl.id = 'artist-map-loading';
-        loadingEl.innerHTML = `
-            <div class="artist-map-loading-content">
-                <div class="watch-all-loading-spinner"></div>
-                <div class="artist-map-loading-text" id="artmap-loading-text">Placing ${_artMap.placed.length} artists on the map...</div>
-            </div>
-        `;
-        container.appendChild(loadingEl);
-
-        // Defer heavy work so loading overlay renders first
-        setTimeout(async () => {
-            _artMap.placed.forEach(n => { n.opacity = 1; });
-
-            // Load images in parallel using createImageBitmap (non-blocking)
-            const loadingText = container.querySelector('.artist-map-loading-text');
-            const imgNodes = _artMap.placed.filter(n => n.image_url);
-            let loaded = 0;
-
-            if (loadingText) loadingText.textContent = `Loading ${imgNodes.length} artist images...`;
-
-            // Batch image loading — 20 concurrent fetches
-            const CONCURRENT = 20;
-            let idx = 0;
-
-            async function loadNextBatch() {
-                const batch = [];
-                while (idx < imgNodes.length && batch.length < CONCURRENT) {
-                    const n = imgNodes[idx++];
-                    if (_artMap.images[n.id]) { loaded++; continue; }
-                    batch.push(
-                        _artMapLoadImage(n.image_url)
-                            .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
-                            .finally(() => {
-                                loaded++;
-                                if (loadingText && loaded % 50 === 0) {
-                                    loadingText.textContent = `Loading images... ${loaded}/${imgNodes.length}`;
-                                }
-                            })
-                    );
-                }
-                if (batch.length) await Promise.all(batch);
-                if (idx < imgNodes.length) return loadNextBatch();
-            }
-
-            await loadNextBatch();
-
-            // Build buffer and render
-            if (loadingText) loadingText.textContent = 'Rendering map...';
-            await new Promise(r => setTimeout(r, 20)); // let text update render
-
-            _artMap.dirty = true;
-            _artMapRender();
-
-            const le = document.getElementById('artist-map-loading');
-            if (le) le.remove();
-        }, 50);
-
-    } catch (err) {
-        console.error('Artist map error:', err);
-    }
-}
-
-function artMapZoom(factor) {
-    const cx = _artMap.width / 2;
-    const cy = _artMap.height / 2;
-    const targetZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
-    const targetOX = cx - (cx - _artMap.offsetX) * (targetZoom / _artMap.zoom);
-    const targetOY = cy - (cy - _artMap.offsetY) * (targetZoom / _artMap.zoom);
-    _artMapAnimateTo(targetZoom, targetOX, targetOY);
-}
-
-function artMapFitToView() {
-    if (!_artMap.placed.length) return;
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    _artMap.placed.forEach(n => {
-        if ((n.opacity || 0) < 0.01) return;
-        minX = Math.min(minX, n.x - n.radius);
-        maxX = Math.max(maxX, n.x + n.radius);
-        minY = Math.min(minY, n.y - n.radius);
-        maxY = Math.max(maxY, n.y + n.radius);
-    });
-    const mapW = maxX - minX + 100;
-    const mapH = maxY - minY + 100;
-    const targetZoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
-    const targetOX = _artMap.width / 2 - ((minX + maxX) / 2) * targetZoom;
-    const targetOY = _artMap.height / 2 - ((minY + maxY) / 2) * targetZoom;
-    _artMapAnimateTo(targetZoom, targetOX, targetOY);
-}
-
-function _artMapAnimateTo(targetZoom, targetOX, targetOY) {
-    if (_artMap._animating) cancelAnimationFrame(_artMap._animating);
-    const startZoom = _artMap.zoom;
-    const startOX = _artMap.offsetX;
-    const startOY = _artMap.offsetY;
-    const duration = 250;
-    const start = performance.now();
-
-    function step(now) {
-        const t = Math.min(1, (now - start) / duration);
-        // Ease out cubic
-        const e = 1 - Math.pow(1 - t, 3);
-        _artMap.zoom = startZoom + (targetZoom - startZoom) * e;
-        _artMap.offsetX = startOX + (targetOX - startOX) * e;
-        _artMap.offsetY = startOY + (targetOY - startOY) * e;
-        _artMapRender(); // blit only, no rebuild
-        if (t < 1) {
-            _artMap._animating = requestAnimationFrame(step);
-        } else {
-            _artMap._animating = null;
-            _artMap.dirty = true;
-            _artMapRender(); // rebuild at final zoom level
-        }
-    }
-    _artMap._animating = requestAnimationFrame(step);
-}
-
-function closeArtistMap() {
-    const container = document.getElementById('artist-map-container');
-    if (container) container.style.display = 'none';
-    const sidebar = document.getElementById('artmap-genre-sidebar');
-    if (sidebar) sidebar.style.display = 'none';
-    if (_artMap.animFrame) cancelAnimationFrame(_artMap.animFrame);
-    if (_artMap._keyHandler) window.removeEventListener('keydown', _artMap._keyHandler);
-    _artMapHideContextMenu();
-
-    // Restore discover sections
-    document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
-        el.style.display = el._prevDisplay !== undefined ? el._prevDisplay : '';
-    });
-}
-
-// No force simulation — layout is pre-computed via circle packing
-
-function _artMapRebuildBuffer() {
-    /**Render ALL nodes once to offscreen canvas. Only called on data changes, not pan/zoom.**/
-    const placed = _artMap.placed;
-    if (!placed.length) return;
-
-    const visible = placed.filter(n => (n.opacity || 0) > 0.01);
-    if (!visible.length) return;
-
-    // World bounds
-    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-    visible.forEach(n => {
-        minX = Math.min(minX, n.x - n.radius - 10);
-        maxX = Math.max(maxX, n.x + n.radius + 10);
-        minY = Math.min(minY, n.y - n.radius - 10);
-        maxY = Math.max(maxY, n.y + n.radius + 10);
-    });
-
-    const bw = maxX - minX;
-    const bh = maxY - minY;
-    // Scale based on zoom — higher zoom = higher res buffer, capped for memory
-    const z = _artMap.zoom || 0.1;
-    const scale = Math.min(z * 2, 1.0, 10240 / Math.max(bw, bh));
-
-    if (!_artMap.offscreen) _artMap.offscreen = document.createElement('canvas');
-    const oc = _artMap.offscreen;
-    oc.width = Math.ceil(bw * scale);
-    oc.height = Math.ceil(bh * scale);
-    const octx = oc.getContext('2d');
-    _artMap._bufferScale = scale;
-    _artMap._bufferMinX = minX;
-    _artMap._bufferMinY = minY;
-
-    octx.scale(scale, scale);
-    octx.translate(-minX, -minY);
-
-    // Build node lookup
-    if (!_artMap._nodeById) {
-        _artMap._nodeById = {};
-        placed.forEach(n => { _artMap._nodeById[n.id] = n; });
-    }
-
-    // Draw edges (connection lines between related nodes)
-    if (_artMap.edges && _artMap.edges.length > 0) {
-        octx.lineWidth = 1;
-        octx.strokeStyle = 'rgba(138,43,226,0.08)';
-        octx.beginPath();
-        for (const edge of _artMap.edges) {
-            const s = _artMap._nodeById[edge.source];
-            const t = _artMap._nodeById[edge.target];
-            if (!s || !t || (s.opacity || 0) < 0.05 || (t.opacity || 0) < 0.05) continue;
-            octx.moveTo(s.x, s.y);
-            octx.lineTo(t.x, t.y);
-        }
-        octx.stroke();
-    }
-
-    // Draw ALL nodes — genre labels first, similar next, watchlist on top
-    const hideSimilar = _artMap._hideSimilar || false;
-    // Pass 0: genre labels, Pass 1: similar/ring2, Pass 2: watchlist/center/ring1
-    for (let pass = 0; pass < 3; pass++) {
-        for (const n of visible) {
-            if (pass === 0 && n._isLabel) { /* draw */ }
-            else if (pass === 1 && !n._isLabel && n.type !== 'watchlist' && n.type !== 'center' && n.ring !== 1) { /* draw */ }
-            else if (pass === 2 && !n._isLabel && (n.type === 'watchlist' || n.type === 'center' || n.ring === 1)) { /* draw */ }
-            else continue;
-            if (hideSimilar && n.type !== 'watchlist' && n.type !== 'center' && !n._isLabel) continue;
-            const op = n.opacity || 0;
-            if (op < 0.01) continue;
-            const r = n.radius;
-            const isW = n.type === 'watchlist' || n.type === 'center';
-            octx.globalAlpha = op;
-
-            // Genre label node — transparent circle with large text
-            if (n._isLabel) {
-                octx.globalAlpha = 0.6;
-                octx.beginPath();
-                octx.arc(n.x, n.y, n.radius, 0, Math.PI * 2);
-                octx.fillStyle = 'rgba(138,43,226,0.04)';
-                octx.fill();
-                octx.strokeStyle = 'rgba(138,43,226,0.08)';
-                octx.lineWidth = 1;
-                octx.stroke();
-                const labelSize = Math.max(12, n.radius * 0.25);
-                octx.font = `800 ${labelSize}px system-ui`;
-                octx.textAlign = 'center';
-                octx.textBaseline = 'middle';
-                octx.fillStyle = 'rgba(138,43,226,0.35)';
-                octx.fillText(n.name, n.x, n.y - labelSize * 0.3);
-                octx.font = `500 ${labelSize * 0.5}px system-ui`;
-                octx.fillStyle = 'rgba(255,255,255,0.15)';
-                octx.fillText(`${n._count || 0} artists`, n.x, n.y + labelSize * 0.5);
-                octx.globalAlpha = 1;
-                continue;
-            }
-
-            // Render quality based on node size in buffer pixels
-            const rScaled = r * scale;
-            const isSmall = rScaled < 8;
-            const isTiny = rScaled < 3;
-
-            // Tiny nodes: just a colored dot (no clip, no image, no text)
-            if (isTiny) {
-                octx.beginPath();
-                octx.arc(n.x, n.y, r, 0, Math.PI * 2);
-                octx.fillStyle = isW ? '#6b21a8' : '#2a2a40';
-                octx.fill();
-                continue;
-            }
-
-            // Small nodes: filled circle + border, no image clip
-            if (isSmall) {
-                octx.beginPath();
-                octx.arc(n.x, n.y, r, 0, Math.PI * 2);
-                const img = _artMap.images[n.id];
-                if (img) {
-                    octx.save(); octx.clip();
-                    octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
-                    octx.restore();
-                } else {
-                    octx.fillStyle = isW ? '#1a0a30' : '#141420';
-                    octx.fill();
-                }
-                octx.strokeStyle = isW ? 'rgba(138,43,226,0.3)' : 'rgba(255,255,255,0.06)';
-                octx.lineWidth = isW ? 1.5 : 0.5;
-                octx.stroke();
-                continue;
-            }
-
-            // Full quality: glow + clip + image + text
-            if (isW) {
-                octx.beginPath();
-                octx.arc(n.x, n.y, r + 4, 0, Math.PI * 2);
-                octx.strokeStyle = 'rgba(138,43,226,0.25)';
-                octx.lineWidth = 5;
-                octx.stroke();
-            }
-
-            octx.save();
-            octx.beginPath();
-            octx.arc(n.x, n.y, r, 0, Math.PI * 2);
-            octx.closePath();
-            octx.clip();
-
-            const img = _artMap.images[n.id];
-            if (img) {
-                octx.drawImage(img, n.x - r, n.y - r, r * 2, r * 2);
-                octx.fillStyle = 'rgba(0,0,0,0.45)';
-                octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
-            } else {
-                octx.fillStyle = isW ? '#1a0a30' : '#141420';
-                octx.fillRect(n.x - r, n.y - r, r * 2, r * 2);
-            }
-            octx.restore();
-
-            octx.beginPath();
-            octx.arc(n.x, n.y, r, 0, Math.PI * 2);
-            octx.strokeStyle = isW ? 'rgba(138,43,226,0.4)' : 'rgba(255,255,255,0.08)';
-            octx.lineWidth = isW ? 2 : 0.5;
-            octx.stroke();
-
-            const fontSize = isW ? Math.max(16, r * 0.14) : Math.max(8, r * 0.3);
-            octx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
-            octx.textAlign = 'center';
-            octx.textBaseline = 'middle';
-            octx.fillStyle = '#fff';
-            const maxC = isW ? 20 : 12;
-            const label = n.name.length > maxC ? n.name.substring(0, maxC - 1) + '…' : n.name;
-            octx.fillText(label, n.x, n.y);
-        }
-    }
-
-    octx.globalAlpha = 1;
-
-    _artMap.dirty = false;
-}
-
-function _artMapRender() {
-    /**Blit offscreen buffer to screen canvas with pan/zoom. Near-zero cost.**/
-    const ctx = _artMap.ctx;
-    const w = _artMap.width;
-    const h = _artMap.height;
-
-    ctx.fillStyle = '#0a0a14';
-    ctx.fillRect(0, 0, w, h);
-
-    if (_artMap.dirty || !_artMap.offscreen) _artMapRebuildBuffer();
-    if (!_artMap.offscreen) return;
-
-    const oc = _artMap.offscreen;
-    const s = _artMap._bufferScale;
-    const mx = _artMap._bufferMinX;
-    const my = _artMap._bufferMinY;
-    const z = _artMap.zoom;
-
-    // Blit offscreen buffer: the buffer was drawn with scale(s) + translate(-minX,-minY)
-    // So buffer pixel (bx,by) corresponds to world (bx/s + minX, by/s + minY)
-    // Screen position of world (wx,wy) = offsetX + wx*zoom, offsetY + wy*zoom
-    // Therefore buffer origin on screen = offsetX + minX*zoom, offsetY + minY*zoom
-    // And buffer is drawn at size (bufferWidth * zoom/s, bufferHeight * zoom/s)
-    ctx.drawImage(oc,
-        _artMap.offsetX + mx * z,
-        _artMap.offsetY + my * z,
-        oc.width * z / s,
-        oc.height * z / s
-    );
-
-    // ── Interactive overlay (drawn on main canvas, not buffer) ──
-    const cFade = _artMap._constellationFade || 0;
-    if (cFade > 0 && (_artMap.hoveredNode || _artMap._constellationCache)) {
-        const n = _artMap.hoveredNode || (_artMap._constellationCache ? (_artMap._nodeById || {})[_artMap._constellationCache.nodeId] : null);
-        if (!n) { _artMap._constellationFade = 0; _artMap._constellationCache = null; }
-        if (n) {
-            ctx.save();
-            ctx.translate(_artMap.offsetX, _artMap.offsetY);
-            ctx.scale(z, z);
-
-            // Cache connected node lookup (don't recompute every frame)
-            if (!_artMap._constellationCache || _artMap._constellationCache.nodeId !== n.id) {
-                const connectedIds = new Set();
-                if (n.type === 'watchlist') {
-                    for (const e of _artMap.edges) {
-                        if (e.source === n.id) connectedIds.add(e.target);
-                    }
-                } else {
-                    const sourceIds = new Set();
-                    for (const e of _artMap.edges) {
-                        if (e.target === n.id) sourceIds.add(e.source);
-                    }
-                    for (const sid of sourceIds) {
-                        connectedIds.add(sid);
-                        for (const e of _artMap.edges) {
-                            if (e.source === sid) connectedIds.add(e.target);
-                        }
-                    }
-                }
-                const nById = _artMap._nodeById || {};
-                _artMap._constellationCache = {
-                    nodeId: n.id,
-                    nodes: [n, ...[...connectedIds].map(id => nById[id]).filter(Boolean)],
-                };
-            }
-
-            const highlightNodes = _artMap._constellationCache.nodes;
-
-            if (highlightNodes.length > 1) {
-                // Semi-transparent dark overlay on entire visible area
-                ctx.save();
-                ctx.resetTransform();
-                ctx.globalAlpha = 0.6 * cFade;
-                ctx.fillStyle = '#0a0a14';
-                ctx.fillRect(0, 0, _artMap.canvas.width, _artMap.canvas.height);
-                ctx.globalAlpha = 1;
-                ctx.restore();
-
-                // Draw glowing connection lines
-                for (const cn of highlightNodes) {
-                    if (cn === n) continue;
-                    ctx.beginPath();
-                    ctx.moveTo(n.x, n.y);
-                    ctx.lineTo(cn.x, cn.y);
-                    // Gradient line
-                    const lineGrad = ctx.createLinearGradient(n.x, n.y, cn.x, cn.y);
-                    lineGrad.addColorStop(0, `rgba(138,43,226,${0.5 * cFade})`);
-                    lineGrad.addColorStop(1, `rgba(138,43,226,${0.15 * cFade})`);
-                    ctx.strokeStyle = lineGrad;
-                    ctx.lineWidth = 2;
-                    ctx.stroke();
-                }
-
-                // Redraw highlighted nodes on top
-                ctx.globalAlpha = cFade;
-                for (const hn of highlightNodes) {
-                    const r = hn.radius;
-                    const isW = hn.type === 'watchlist';
-                    const isHov = hn === n;
-
-                    // Glow
-                    if (isHov) {
-                        ctx.beginPath();
-                        ctx.arc(hn.x, hn.y, r + 8, 0, Math.PI * 2);
-                        ctx.strokeStyle = 'rgba(138,43,226,0.4)';
-                        ctx.lineWidth = 6;
-                        ctx.stroke();
-                    }
-
-                    // Circle + image
-                    ctx.save();
-                    ctx.beginPath();
-                    ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
-                    ctx.closePath();
-                    ctx.clip();
-
-                    const img = _artMap.images[hn.id];
-                    if (img) {
-                        ctx.drawImage(img, hn.x - r, hn.y - r, r * 2, r * 2);
-                        ctx.fillStyle = 'rgba(0,0,0,0.35)';
-                        ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
-                    } else {
-                        ctx.fillStyle = isW ? '#1a0a30' : '#141420';
-                        ctx.fillRect(hn.x - r, hn.y - r, r * 2, r * 2);
-                    }
-                    ctx.restore();
-
-                    // Border
-                    ctx.beginPath();
-                    ctx.arc(hn.x, hn.y, r, 0, Math.PI * 2);
-                    ctx.strokeStyle = isHov ? 'rgba(255,255,255,0.7)' : isW ? 'rgba(138,43,226,0.5)' : 'rgba(255,255,255,0.3)';
-                    ctx.lineWidth = isHov ? 3 : 1.5;
-                    ctx.stroke();
-
-                    // Name
-                    const fontSize = isW ? Math.max(14, r * 0.14) : Math.max(8, r * 0.3);
-                    ctx.font = `${isW ? '700' : '600'} ${fontSize}px system-ui`;
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.fillStyle = '#fff';
-                    const maxC = isW ? 20 : 12;
-                    const label = hn.name.length > maxC ? hn.name.substring(0, maxC - 1) + '…' : hn.name;
-                    ctx.fillText(label, hn.x, hn.y);
-                }
-                ctx.globalAlpha = 1;
-            } else {
-                // Single node, no connections
-                ctx.beginPath();
-                ctx.arc(n.x, n.y, n.radius + 4, 0, Math.PI * 2);
-                ctx.strokeStyle = 'rgba(255,255,255,0.5)';
-                ctx.lineWidth = 3;
-                ctx.stroke();
-            }
-
-            ctx.restore();
-        } // end if(n)
-    } else if (_artMap.hoveredNode && !_artMap._constellationActive) {
-        // Pre-constellation: just show a simple highlight ring (instant, no delay)
-        const n = _artMap.hoveredNode;
-        ctx.save();
-        ctx.translate(_artMap.offsetX, _artMap.offsetY);
-        ctx.scale(z, z);
-        ctx.beginPath();
-        ctx.arc(n.x, n.y, n.radius + 3, 0, Math.PI * 2);
-        ctx.strokeStyle = 'rgba(255,255,255,0.35)';
-        ctx.lineWidth = 2;
-        ctx.stroke();
-        ctx.restore();
-    }
-
-    // Click ripple animation
-    if (_artMap._ripple) {
-        const rip = _artMap._ripple;
-        const elapsed = performance.now() - rip.start;
-        const progress = elapsed / 400; // 400ms duration
-        if (progress < 1) {
-            ctx.save();
-            ctx.translate(_artMap.offsetX, _artMap.offsetY);
-            ctx.scale(z, z);
-            const ripR = rip.radius + rip.radius * progress * 0.5;
-            ctx.beginPath();
-            ctx.arc(rip.x, rip.y, ripR, 0, Math.PI * 2);
-            ctx.strokeStyle = `rgba(138,43,226,${0.5 * (1 - progress)})`;
-            ctx.lineWidth = 3 * (1 - progress);
-            ctx.stroke();
-            ctx.restore();
-            requestAnimationFrame(() => _artMapRender());
-        } else {
-            _artMap._ripple = null;
-        }
-    }
-}
-
-function artMapSearch(query) {
-    const results = document.getElementById('artist-map-search-results');
-    if (!results) return;
-    if (!query || query.length < 2) { results.style.display = 'none'; return; }
-
-    const q = query.toLowerCase();
-    const matches = _artMap.placed.filter(n => (n.opacity || 0) > 0.5 && n.name.toLowerCase().includes(q)).slice(0, 8);
-
-    if (!matches.length) { results.style.display = 'none'; return; }
-
-    results.style.display = 'block';
-    results.innerHTML = matches.map(n =>
-        `<div class="artist-map-search-item" onclick="artMapZoomToNode(${n.id})">
-            <span class="artist-map-search-type ${n.type}">${n.type === 'watchlist' ? '★' : '○'}</span>
-            ${escapeHtml(n.name)}
-        </div>`
-    ).join('');
-}
-
-function artMapZoomToNode(nodeId) {
-    const n = _artMap.placed.find(p => p.id === nodeId);
-    if (!n) return;
-    // Zoom to show this node centered, at a comfortable zoom level
-    const targetZoom = Math.max(0.3, Math.min(1, 200 / n.radius));
-    const targetOX = _artMap.width / 2 - n.x * targetZoom;
-    const targetOY = _artMap.height / 2 - n.y * targetZoom;
-    _artMapAnimateTo(targetZoom, targetOX, targetOY);
-    // Highlight briefly after animation
-    setTimeout(() => { _artMap.hoveredNode = n; _artMapRender(); }, 300);
-    setTimeout(() => { _artMap.hoveredNode = null; _artMapRender(); }, 2500);
-    // Close search
-    const results = document.getElementById('artist-map-search-results');
-    if (results) results.style.display = 'none';
-    const input = document.getElementById('artist-map-search');
-    if (input) input.value = '';
-}
-
-function _artMapShowTooltip(e, node) {
-    const tip = document.getElementById('artist-map-tooltip');
-    if (!tip) return;
-    if (!node) { tip.style.display = 'none'; return; }
-
-    const img = node.image_url ? `<img class="artmap-tip-img" src="${escapeHtml(node.image_url)}" alt="">` : '<div class="artmap-tip-img artmap-tip-img-fallback">&#9835;</div>';
-    const genres = (node.genres || []).slice(0, 3);
-    const genreHTML = genres.length ? `<div class="artmap-tip-genres">${genres.map(g => `<span>${escapeHtml(g)}</span>`).join('')}</div>` : '';
-    const typeLabel = node.type === 'watchlist' ? '<span class="artmap-tip-badge">★ Watchlist</span>' : '';
-
-    tip.innerHTML = `
-        <div class="artmap-tip-row">
-            ${img}
-            <div class="artmap-tip-info">
-                <div class="artmap-tip-name">${escapeHtml(node.name)}</div>
-                ${typeLabel}
-                ${genreHTML}
-            </div>
-        </div>
-    `;
-    tip.style.display = 'block';
-
-    // Position — keep on screen
-    const x = Math.min(e.clientX + 16, window.innerWidth - tip.offsetWidth - 10);
-    const y = Math.min(e.clientY - 10, window.innerHeight - tip.offsetHeight - 10);
-    tip.style.left = x + 'px';
-    tip.style.top = y + 'px';
-}
-
-function _artMapAnimateConstellation() {
-    if (_artMap._constellationActive && _artMap._constellationFade < 1) {
-        _artMap._constellationFade = Math.min(1, (_artMap._constellationFade || 0) + 0.08);
-        _artMapRender();
-        requestAnimationFrame(_artMapAnimateConstellation);
-    } else if (!_artMap._constellationActive && _artMap._constellationFade > 0) {
-        _artMap._constellationFade = Math.max(0, _artMap._constellationFade - 0.1);
-        _artMapRender();
-        if (_artMap._constellationFade > 0) {
-            requestAnimationFrame(_artMapAnimateConstellation);
-        } else {
-            _artMap._constellationCache = null;
-        }
-    }
-}
-
-function artMapShowShortcuts() {
-    const existing = document.getElementById('artmap-shortcuts-overlay');
-    if (existing) { existing.remove(); return; }
-
-    const overlay = document.createElement('div');
-    overlay.id = 'artmap-shortcuts-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.style.zIndex = '10002';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="artmap-shortcuts-modal">
-            <div class="artmap-shortcuts-header">
-                <h3>Keyboard Shortcuts</h3>
-                <button class="watch-all-close" onclick="document.getElementById('artmap-shortcuts-overlay').remove()">&times;</button>
-            </div>
-            <div class="artmap-shortcuts-grid">
-                <div class="artmap-shortcut"><kbd>Esc</kbd><span>Close map</span></div>
-                <div class="artmap-shortcut"><kbd>+</kbd> / <kbd>-</kbd><span>Zoom in / out</span></div>
-                <div class="artmap-shortcut"><kbd>F</kbd><span>Fit to view</span></div>
-                <div class="artmap-shortcut"><kbd>S</kbd><span>Focus search</span></div>
-                <div class="artmap-shortcut"><kbd>H</kbd><span>Toggle similar artists</span></div>
-                <div class="artmap-shortcut"><kbd>Scroll</kbd><span>Zoom at cursor</span></div>
-                <div class="artmap-shortcut"><kbd>Click</kbd><span>Artist info</span></div>
-                <div class="artmap-shortcut"><kbd>Right-click</kbd><span>Context menu</span></div>
-                <div class="artmap-shortcut"><kbd>Drag</kbd><span>Pan around</span></div>
-                <div class="artmap-shortcut"><kbd>Hover 1s</kbd><span>Show connections</span></div>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-}
-
-async function openArtistMapGenre() {
-    // Show picker immediately — uses lightweight genre list endpoint
-    const genre = await _showGenrePickerModal();
-    if (!genre) return;
-    _openGenreMapWithSelection(genre);
-}
-
-async function _showGenrePickerModal() {
-    return new Promise(resolve => {
-        const existing = document.getElementById('artmap-genre-picker');
-        if (existing) existing.remove();
-
-        const overlay = document.createElement('div');
-        overlay.id = 'artmap-genre-picker';
-        overlay.className = 'modal-overlay';
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-
-        overlay.innerHTML = `
-            <div class="artmap-genre-picker-modal">
-                <div class="artmap-genre-picker-header">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                        <circle cx="12" cy="12" r="10"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/><line x1="2" y1="12" x2="22" y2="12"/>
-                    </svg>
-                    <div>
-                        <h3>Select a Genre</h3>
-                        <p>Choose a genre to explore its artists</p>
-                    </div>
-                </div>
-                <input type="text" class="artmap-genre-picker-search" placeholder="Filter genres..." oninput="_filterGenrePicker(this.value)">
-                <div class="artmap-genre-picker-list" id="artmap-genre-picker-list">
-                    <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading genres...</div></div>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-
-        // Use cached data or fetch
-        const renderGenreList = (data) => {
-            if (!data?.success || !data?.genres?.length) {
-                document.getElementById('artmap-genre-picker-list').innerHTML = '<div class="ya-info-empty">No genres found</div>';
-                return;
-            }
-            const list = document.getElementById('artmap-genre-picker-list');
-            list.innerHTML = data.genres.map(g => `
-                <div class="artmap-genre-picker-item" data-genre="${escapeHtml(g.name)}" onclick="document.getElementById('artmap-genre-picker')._resolve('${escapeForInlineJs(g.name)}')">
-                    <div class="artmap-genre-picker-name">${escapeHtml(g.name)}</div>
-                    <div class="artmap-genre-picker-count">${g.count} artists</div>
-                </div>
-            `).join('');
-        };
-
-        if (window._artMapGenreList) {
-            renderGenreList(window._artMapGenreList);
-        } else {
-            fetch('/api/discover/artist-map/genre-list')
-                .then(r => r.json())
-                .then(data => { window._artMapGenreList = data; renderGenreList(data); })
-                .catch(() => { document.getElementById('artmap-genre-picker-list').innerHTML = '<div class="ya-info-empty">Error loading genres</div>'; });
-        }
-
-        overlay._resolve = (genre) => { overlay.remove(); resolve(genre); };
-    });
-}
-
-function _switchGenre(genre) {
-    _artMap._skipSectionToggle = true;
-    _openGenreMapWithSelection(genre);
-}
-
-function _filterGenreSidebar(query) {
-    const q = query.toLowerCase();
-    document.querySelectorAll('.artmap-genre-sidebar-item').forEach(el => {
-        el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
-    });
-}
-
-async function _changeGenre() {
-    const genre = await _showGenrePickerModal();
-    if (!genre) return;
-    _artMap._skipSectionToggle = true;
-    _openGenreMapWithSelection(genre);
-}
-
-function _filterGenrePicker(query) {
-    const q = query.toLowerCase();
-    document.querySelectorAll('.artmap-genre-picker-item').forEach(el => {
-        el.style.display = el.dataset.genre.toLowerCase().includes(q) ? '' : 'none';
-    });
-}
-
-async function _openGenreMapWithSelection(selectedGenre) {
-    const container = document.getElementById('artist-map-container');
-    if (!container) return;
-
-    const skipToggle = _artMap._skipSectionToggle;
-    _artMap._skipSectionToggle = false;
-
-    if (!skipToggle) {
-        document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
-            el._prevDisplay = el.style.display;
-            el.style.display = 'none';
-        });
-    }
-    container.style.display = 'flex';
-
-    // Show + populate genre sidebar
-    const sidebar = document.getElementById('artmap-genre-sidebar');
-    const genreListData = window._artMapGenreList || window._artMapGenreData;
-    if (sidebar && genreListData?.genres) {
-        sidebar.style.display = 'flex';
-        const list = document.getElementById('artmap-genre-sidebar-list');
-        if (list) {
-            list.innerHTML = genreListData.genres.map(g => `
-                <div class="artmap-genre-sidebar-item ${g.name === selectedGenre ? 'active' : ''}"
-                     data-genre="${escapeHtml(g.name)}"
-                     onclick="_switchGenre('${escapeForInlineJs(g.name)}')">
-                    <span class="artmap-genre-sidebar-name">${escapeHtml(g.name)}</span>
-                    <span class="artmap-genre-sidebar-count">${g.count}</span>
-                </div>
-            `).join('');
-        }
-    }
-
-    const canvas = document.getElementById('artist-map-canvas');
-    const contentRow = canvas.parentElement;
-    _artMap.canvas = canvas;
-    _artMap.ctx = canvas.getContext('2d');
-    _artMap.width = canvas.clientWidth || (container.clientWidth - (sidebar?.offsetWidth || 0));
-    _artMap.height = contentRow?.clientHeight || (container.clientHeight - 50);
-    canvas.width = _artMap.width * window.devicePixelRatio;
-    canvas.height = _artMap.height * window.devicePixelRatio;
-    canvas.style.width = _artMap.width + 'px';
-    canvas.style.height = _artMap.height + 'px';
-    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    _artMap.offsetX = _artMap.width / 2;
-    _artMap.offsetY = _artMap.height / 2;
-    _artMap.placed = [];
-    _artMap.edges = [];
-    _artMap.images = {};
-    _artMap._nodeById = null;
-    _artMap.dirty = true;
-
-    // Show loading
-    const loadingEl = document.createElement('div');
-    loadingEl.id = 'artist-map-loading';
-    loadingEl.innerHTML = `<div class="artist-map-loading-content"><div class="watch-all-loading-spinner"></div><div class="artist-map-loading-text" id="artmap-genre-loading-text">Loading genre map...</div></div>`;
-    container.appendChild(loadingEl);
-
-    // Update toolbar
-    document.querySelector('.artmap-brand-text').textContent = 'Genre Map';
-    document.getElementById('artist-map-stats').textContent = 'Loading...';
-
-    try {
-        // Use cached data from picker or fetch fresh
-        const data = window._artMapGenreData || await fetch('/api/discover/artist-map/genres').then(r => r.json());
-        const loadingText = document.getElementById('artmap-genre-loading-text');
-        if (!data.success || !data.nodes.length) {
-            if (loadingText) loadingText.textContent = 'No artists with genre data found.';
-            return;
-        }
-
-        // Find the selected genre + closely related genres (high artist overlap)
-        const allGenres = data.genres;
-        const primary = allGenres.find(g => g.name === selectedGenre);
-        if (!primary) {
-            if (loadingText) loadingText.textContent = `Genre "${selectedGenre}" not found.`;
-            return;
-        }
-        const primarySet = new Set(primary.artist_ids);
-
-        // Find up to 4 related genres by artist overlap
-        const related = allGenres
-            .filter(g => g.name !== selectedGenre)
-            .map(g => {
-                const overlap = g.artist_ids.filter(id => primarySet.has(id)).length;
-                return { ...g, overlap };
-            })
-            .filter(g => g.overlap > primarySet.size * 0.1) // At least 10% overlap
-            .sort((a, b) => b.overlap - a.overlap)
-            .slice(0, 4);
-
-        const genres = [primary, ...related];
-        const totalArtists = genres.reduce((sum, g) => sum + g.artist_ids.length, 0);
-
-        document.getElementById('artist-map-stats').innerHTML =
-            `<span class="artmap-genre-change" onclick="event.stopPropagation(); _changeGenre()" title="Change genre">${escapeHtml(selectedGenre)} ▾</span> · ${genres.length} genre${genres.length > 1 ? 's' : ''} · ${totalArtists} artists`;
-
-        const WR = _artMap.WATCHLIST_R;
-        const BUF = _artMap.BUFFER;
-
-        const maxPerGenre = 500;
-        const nodeR = WR * 0.2;
-
-        // Calculate actual cluster radius for each genre based on ring count
-        function getClusterRadius(artistCount) {
-            const count = Math.min(artistCount, maxPerGenre);
-            let ringDist = WR + nodeR * 2 + BUF;
-            let placed = 0;
-            while (placed < count) {
-                const circ = 2 * Math.PI * ringDist;
-                const inRing = Math.max(1, Math.floor(circ / (nodeR * 2 + BUF)));
-                placed += Math.min(inRing, count - placed);
-                ringDist += nodeR * 2 + BUF;
-            }
-            return ringDist;
-        }
-
-        // Pre-compute cluster radii
-        genres.forEach(g => { g._clusterR = getClusterRadius(g.artist_ids.length); });
-
-        // Golden spiral placement
-        genres.forEach((g, i) => {
-            if (i === 0) { g._cx = 0; g._cy = 0; }
-            else {
-                const angle = i * 2.399963;
-                const r = g._clusterR * Math.sqrt(i) * 0.9;
-                g._cx = Math.cos(angle) * r;
-                g._cy = Math.sin(angle) * r;
-            }
-        });
-
-        // Push apart using actual cluster radii — no overlap possible
-        for (let pass = 0; pass < 80; pass++) {
-            let moved = false;
-            for (let i = 0; i < genres.length; i++) {
-                for (let j = i + 1; j < genres.length; j++) {
-                    const dx = genres[j]._cx - genres[i]._cx;
-                    const dy = genres[j]._cy - genres[i]._cy;
-                    const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                    const minDist = genres[i]._clusterR + genres[j]._clusterR + BUF * 4;
-                    if (dist < minDist) {
-                        const push = (minDist - dist) / 2 + 1;
-                        genres[i]._cx -= (dx / dist) * push; genres[i]._cy -= (dy / dist) * push;
-                        genres[j]._cx += (dx / dist) * push; genres[j]._cy += (dy / dist) * push;
-                        moved = true;
-                    }
-                }
-            }
-            if (!moved) break;
-        }
-
-        let placedCount = 0;
-
-        // Place genre labels as big watchlist-style bubbles
-        for (const g of genres) {
-            _artMap.placed.push({
-                id: `genre_${g.name}`, name: g.name.toUpperCase(),
-                x: g._cx, y: g._cy, radius: WR, opacity: 1,
-                type: 'genre_label', image_url: '', genres: [g.name],
-                _isLabel: true, _count: g.count
-            });
-        }
-
-        // Place artists in concentric rings — deterministic O(1) per node, handles 10K+ instantly
-        let genreIdx = 0;
-
-        async function placeGenreArtists() {
-            for (; genreIdx < genres.length; genreIdx++) {
-                const genre = genres[genreIdx];
-                const artists = genre.artist_ids.slice(0, maxPerGenre);
-                const sorted = artists.map(nid => data.nodes[nid]).filter(Boolean).sort((a, b) => (b.popularity || 0) - (a.popularity || 0));
-
-                let ringDist = WR + nodeR * 2 + BUF;
-                let ringNum = 0;
-                let placed = 0;
-
-                while (placed < sorted.length) {
-                    const circumference = 2 * Math.PI * ringDist;
-                    const nodesInRing = Math.max(1, Math.floor(circumference / (nodeR * 2 + BUF)));
-                    const count = Math.min(nodesInRing, sorted.length - placed);
-                    const angleStep = (2 * Math.PI) / nodesInRing;
-                    const angleOffset = ringNum * 0.618;
-
-                    for (let i = 0; i < count; i++) {
-                        const n = sorted[placed + i];
-                        if (!n) continue;
-                        const isW = n.type === 'watchlist' || n.type === 'center';
-                        const r = isW ? nodeR * 1.5 : nodeR;
-                        const angle = angleOffset + i * angleStep;
-
-                        _artMap.placed.push({
-                            id: placedCount + 1000, _origId: n.id, name: n.name,
-                            x: genre._cx + Math.cos(angle) * ringDist,
-                            y: genre._cy + Math.sin(angle) * ringDist,
-                            radius: r, opacity: 1,
-                            type: isW ? 'watchlist' : 'similar',
-                            image_url: n.image_url || '', genres: n.genres || [],
-                            spotify_id: n.spotify_id || '', itunes_id: n.itunes_id || '',
-                            deezer_id: n.deezer_id || '', discogs_id: n.discogs_id || '',
-                        });
-                        placedCount++;
-                    }
-                    placed += count;
-                    ringDist += nodeR * 2 + BUF;
-                    ringNum++;
-                }
-
-                if (loadingText) loadingText.textContent = `Placing artists... ${genreIdx + 1}/${genres.length} genres (${placedCount} placed)`;
-                if (genreIdx % 5 === 0) await new Promise(r => setTimeout(r, 0));
-            }
-        }
-        await placeGenreArtists();
-
-        // Build edges: connect artists that appear in multiple genre clusters
-        _artMap.edges = [];
-        const artistNodes = {};
-        _artMap.placed.forEach(n => {
-            if (n._origId != null) {
-                if (!artistNodes[n._origId]) artistNodes[n._origId] = [];
-                artistNodes[n._origId].push(n.id);
-            }
-        });
-        Object.values(artistNodes).forEach(ids => {
-            if (ids.length > 1) {
-                for (let i = 0; i < ids.length - 1; i++) {
-                    _artMap.edges.push({ source: ids[i], target: ids[i + 1], weight: 5 });
-                }
-            }
-        });
-
-        _artMap._nodeById = {};
-        _artMap.placed.forEach(n => { _artMap._nodeById[n.id] = n; });
-
-        // Auto-zoom
-        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-        _artMap.placed.forEach(n => {
-            minX = Math.min(minX, n.x - n.radius);
-            maxX = Math.max(maxX, n.x + n.radius);
-            minY = Math.min(minY, n.y - n.radius);
-            maxY = Math.max(maxY, n.y + n.radius);
-        });
-        const mapW = maxX - minX + 200, mapH = maxY - minY + 200;
-        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
-        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
-        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
-
-        _artMapSetupInteraction(canvas);
-
-        // Load images + render
-        if (loadingText) loadingText.textContent = `Rendering ${placedCount} artists...`;
-
-        setTimeout(async () => {
-            const imgNodes = _artMap.placed.filter(n => n.image_url && !n._isLabel);
-            let loaded = 0;
-            const CONCURRENT = 20;
-            let idx = 0;
-            async function loadBatch() {
-                const batch = [];
-                while (idx < imgNodes.length && batch.length < CONCURRENT) {
-                    const n = imgNodes[idx++];
-                    batch.push(_artMapLoadImage(n.image_url)
-                        .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
-                        .finally(() => { loaded++; }));
-                }
-                if (batch.length) await Promise.all(batch);
-                if (idx < imgNodes.length) return loadBatch();
-            }
-            await loadBatch();
-            _artMap.dirty = true;
-            _artMapRender();
-            const le = document.getElementById('artist-map-loading');
-            if (le) le.remove();
-        }, 50);
-
-        _artMap.dirty = true;
-        _artMapRender();
-
-    } catch (err) {
-        console.error('Genre map error:', err);
-        const lt = container.querySelector('.artist-map-loading-text');
-        if (lt) lt.textContent = 'Error loading genre map';
-    }
-}
-
-function openArtistMapExplorerDirect(name) {
-    if (!name) return;
-    // Already in map — just reload with new data, don't re-hide sections
-    _artMap._skipSectionToggle = true;
-    _openArtistMapExplorerWithName(name);
-}
-
-async function openArtistMapExplorer() {
-    const name = await _showArtistMapSearchPrompt();
-    if (!name) return;
-    _openArtistMapExplorerWithName(name);
-}
-
-async function _openArtistMapExplorerWithName(name) {
-
-    const container = document.getElementById('artist-map-container');
-    if (!container) return;
-
-    const skipToggle = _artMap._skipSectionToggle;
-    _artMap._skipSectionToggle = false;
-
-    if (!skipToggle) {
-        document.querySelectorAll('#discover-page > .discover-container > *:not(#artist-map-container)').forEach(el => {
-            el._prevDisplay = el.style.display;
-            el.style.display = 'none';
-        });
-    }
-    container.style.display = 'flex';
-
-    const canvas = document.getElementById('artist-map-canvas');
-    _artMap.canvas = canvas;
-    _artMap.ctx = canvas.getContext('2d');
-    _artMap.width = container.clientWidth;
-    _artMap.height = container.clientHeight - 50;
-    canvas.width = _artMap.width * window.devicePixelRatio;
-    canvas.height = _artMap.height * window.devicePixelRatio;
-    canvas.style.width = _artMap.width + 'px';
-    canvas.style.height = _artMap.height + 'px';
-    _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    _artMap.offsetX = _artMap.width / 2;
-    _artMap.offsetY = _artMap.height / 2;
-    _artMap.placed = [];
-    _artMap.edges = [];
-    _artMap.images = {};
-    _artMap._nodeById = null;
-    _artMap.dirty = true;
-
-    const loadingEl = document.createElement('div');
-    loadingEl.id = 'artist-map-loading';
-    loadingEl.innerHTML = `<div class="artist-map-loading-content"><div class="watch-all-loading-spinner"></div><div class="artist-map-loading-text">Exploring ${escapeHtml(name)}...</div></div>`;
-    container.appendChild(loadingEl);
-
-    document.querySelector('.artmap-brand-text').textContent = 'Artist Explorer';
-
-    try {
-        const resp = await fetch(`/api/discover/artist-map/explore?name=${encodeURIComponent(name.trim())}`);
-        const data = await resp.json();
-        if (!data.success || !data.nodes.length) {
-            const lt = document.querySelector('.artist-map-loading-text');
-            if (lt) {
-                lt.textContent = resp.status === 404
-                    ? `"${name}" doesn't appear to be a real artist. Try a different name.`
-                    : `No data found for "${name}". Try a different artist.`;
-            }
-            setTimeout(() => {
-                const le = document.getElementById('artist-map-loading');
-                if (le) le.remove();
-                closeArtistMap();
-            }, 2500);
-            return;
-        }
-
-        const ring1Count = data.nodes.filter(n => n.ring === 1).length;
-        const ring2Count = data.nodes.filter(n => n.ring === 2).length;
-        document.getElementById('artist-map-stats').textContent =
-            `${data.center} · ${ring1Count} similar · ${ring2Count} extended`;
-
-        _artMap.edges = data.edges;
-        const WR = _artMap.WATCHLIST_R;
-        const BUF = _artMap.BUFFER;
-
-        // Layout: center node at origin, ring 1 in circle around it, ring 2 around ring 1
-        const centerNode = data.nodes[0];
-        centerNode.x = 0; centerNode.y = 0;
-        centerNode.radius = WR * 1.2; // Extra large center
-        centerNode.opacity = 1;
-        centerNode.type = 'center';
-        _artMap.placed.push(centerNode);
-
-        const CELL = WR * 2 + BUF * 2;
-        const grid = {};
-        function _gk(x, y) { return `${Math.floor(x / CELL)},${Math.floor(y / CELL)}`; }
-        function _ga(n) { const k = _gk(n.x, n.y); if (!grid[k]) grid[k] = []; grid[k].push(n); }
-        function _gc(x, y, r) {
-            const cx = Math.floor(x / CELL), cy = Math.floor(y / CELL);
-            for (let dx = -3; dx <= 3; dx++) for (let dy = -3; dy <= 3; dy++) {
-                const cell = grid[`${cx + dx},${cy + dy}`];
-                if (!cell) continue;
-                for (const p of cell) {
-                    const ddx = x - p.x, ddy = y - p.y;
-                    if (ddx * ddx + ddy * ddy < (r + p.radius + BUF) * (r + p.radius + BUF)) return true;
-                }
-            }
-            return false;
-        }
-        _ga(centerNode);
-
-        // Place ring 1 in a circle
-        const ring1 = data.nodes.filter(n => n.ring === 1);
-        const ring1Dist = WR * 2.5;
-        ring1.forEach((n, i) => {
-            const angle = (i / ring1.length) * Math.PI * 2;
-            const rank = n.rank || 5;
-            n.radius = WR * 0.4 + (10 - rank) * WR * 0.03;
-            n.opacity = 1;
-
-            // Find non-colliding position near ideal
-            let placed = false;
-            for (let dist = ring1Dist; dist < ring1Dist + WR * 3; dist += n.radius * 0.5) {
-                for (let ao = 0; ao < 6; ao++) {
-                    const a = angle + (ao * 0.1 * (ao % 2 ? 1 : -1));
-                    const tx = Math.cos(a) * dist;
-                    const ty = Math.sin(a) * dist;
-                    if (!_gc(tx, ty, n.radius)) {
-                        n.x = tx; n.y = ty;
-                        _artMap.placed.push(n);
-                        _ga(n);
-                        placed = true;
-                        break;
-                    }
-                }
-                if (placed) break;
-            }
-        });
-
-        // Place ring 2 around their ring 1 sources
-        const ring2 = data.nodes.filter(n => n.ring === 2);
-        const nodeById = {};
-        _artMap.placed.forEach(n => { nodeById[n.id] = n; });
-
-        ring2.forEach(n => {
-            // Find the ring 1 node that connects to this
-            const edge = data.edges.find(e => e.target === n.id);
-            const src = edge ? nodeById[edge.source] : null;
-            const cx = src ? src.x : 0;
-            const cy = src ? src.y : 0;
-
-            n.radius = WR * 0.2 + (n.popularity || 0) / 100 * WR * 0.1;
-            n.opacity = 1;
-
-            const startDist = (src ? src.radius : WR) + n.radius + BUF;
-            let placed = false;
-            for (let dist = startDist; dist < startDist + WR * 2; dist += n.radius * 0.5) {
-                const steps = Math.max(8, Math.floor(dist * 0.08));
-                const off = Math.random() * Math.PI * 2;
-                for (let a = 0; a < steps; a++) {
-                    const angle = off + (a / steps) * Math.PI * 2;
-                    const tx = cx + Math.cos(angle) * dist;
-                    const ty = cy + Math.sin(angle) * dist;
-                    if (!_gc(tx, ty, n.radius)) {
-                        n.x = tx; n.y = ty;
-                        _artMap.placed.push(n);
-                        _ga(n);
-                        placed = true;
-                        break;
-                    }
-                }
-                if (placed) break;
-            }
-        });
-
-        // Build node lookup for edges
-        _artMap._nodeById = {};
-        _artMap.placed.forEach(n => { _artMap._nodeById[n.id] = n; });
-
-        // Auto-zoom
-        let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
-        _artMap.placed.forEach(n => {
-            minX = Math.min(minX, n.x - n.radius);
-            maxX = Math.max(maxX, n.x + n.radius);
-            minY = Math.min(minY, n.y - n.radius);
-            maxY = Math.max(maxY, n.y + n.radius);
-        });
-        const mapW = maxX - minX + 200, mapH = maxY - minY + 200;
-        _artMap.zoom = Math.min(_artMap.width / mapW, _artMap.height / mapH, 1);
-        _artMap.offsetX = _artMap.width / 2 - ((minX + maxX) / 2) * _artMap.zoom;
-        _artMap.offsetY = _artMap.height / 2 - ((minY + maxY) / 2) * _artMap.zoom;
-
-        _artMapSetupInteraction(canvas);
-
-        // Load images
-        const loadingText = container.querySelector('.artist-map-loading-text');
-        if (loadingText) loadingText.textContent = `Loading ${_artMap.placed.length} artists...`;
-
-        setTimeout(async () => {
-            const imgNodes = _artMap.placed.filter(n => n.image_url);
-            let loaded = 0;
-            const CONCURRENT = 20;
-            let idx = 0;
-            async function loadBatch() {
-                const batch = [];
-                while (idx < imgNodes.length && batch.length < CONCURRENT) {
-                    const n = imgNodes[idx++];
-                    batch.push(_artMapLoadImage(n.image_url)
-                        .then(bmp => { if (bmp) _artMap.images[n.id] = bmp; })
-                        .finally(() => { loaded++; }));
-                }
-                if (batch.length) await Promise.all(batch);
-                if (idx < imgNodes.length) return loadBatch();
-            }
-            await loadBatch();
-            _artMap.dirty = true;
-            _artMapRender();
-            const le = document.getElementById('artist-map-loading');
-            if (le) le.remove();
-        }, 50);
-
-        _artMap.dirty = true;
-        _artMapRender();
-
-    } catch (err) {
-        console.error('Artist explorer error:', err);
-        const lt = container.querySelector('.artist-map-loading-text');
-        if (lt) lt.textContent = 'Error loading explorer';
-    }
-}
-
-function _showArtistMapSearchPrompt() {
-    return new Promise(resolve => {
-        const existing = document.getElementById('artmap-search-prompt');
-        if (existing) existing.remove();
-
-        const overlay = document.createElement('div');
-        overlay.id = 'artmap-search-prompt';
-        overlay.className = 'modal-overlay';
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-
-        overlay.innerHTML = `
-            <div class="artmap-search-prompt-modal">
-                <div class="artmap-search-prompt-header">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
-                        <line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/>
-                    </svg>
-                    <div>
-                        <h3>Artist Explorer</h3>
-                        <p>Enter an artist to explore their connections</p>
-                    </div>
-                </div>
-                <input type="text" id="artmap-explore-input" class="artmap-explore-input" placeholder="Artist name..." autofocus>
-                <div class="artmap-search-prompt-actions">
-                    <button class="ya-header-btn" onclick="document.getElementById('artmap-search-prompt').remove()">Cancel</button>
-                    <button class="ya-header-btn ya-viewall-btn" id="artmap-explore-go">
-                        <span>Explore</span>
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>
-                    </button>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-
-        const input = overlay.querySelector('#artmap-explore-input');
-        const goBtn = overlay.querySelector('#artmap-explore-go');
-
-        const submit = () => {
-            const val = input.value.trim();
-            overlay.remove();
-            resolve(val || null);
-        };
-
-        goBtn.onclick = submit;
-        input.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit(); });
-        setTimeout(() => input.focus(), 50);
-    });
-}
-
-function artMapToggleSimilar() {
-    _artMap._hideSimilar = !_artMap._hideSimilar;
-    _artMap.dirty = true;
-    _artMapRender();
-    const btn = document.getElementById('artmap-toggle-similar');
-    if (btn) btn.style.opacity = _artMap._hideSimilar ? '0.4' : '1';
-    showToast(_artMap._hideSimilar ? 'Showing watchlist only' : 'Showing all artists', 'info', 1500);
-}
-
-function _artMapLoadImage(url) {
-    // Try direct CORS fetch first (zero server load, works for Spotify/iTunes/Discogs)
-    return fetch(url, { mode: 'cors' })
-        .then(r => r.ok ? r.blob() : Promise.reject('not ok'))
-        .then(b => createImageBitmap(b))
-        .catch(() => {
-            // Fallback: server proxy for CDNs without CORS headers
-            return fetch('/api/image-proxy?url=' + encodeURIComponent(url))
-                .then(r => r.ok ? r.blob() : null)
-                .then(b => b ? createImageBitmap(b) : null)
-                .catch(() => null);
-        });
-}
-
-function _artMapHideContextMenu() {
-    const m = document.getElementById('artist-map-context');
-    if (m) m.style.display = 'none';
-}
-
-function _artMapSetupInteraction(canvas) {
-    // Prevent stacking listeners on repeated opens
-    if (canvas._artMapListenersAttached) return;
-    canvas._artMapListenersAttached = true;
-
-    let isPanning = false, panStartX = 0, panStartY = 0;
-
-    canvas.addEventListener('wheel', (e) => {
-        e.preventDefault();
-        const delta = e.deltaY > 0 ? 0.9 : 1.1;
-        const newZoom = Math.max(0.02, Math.min(5, _artMap.zoom * delta));
-        // Zoom toward mouse
-        const rect = canvas.getBoundingClientRect();
-        const mx = e.clientX - rect.left;
-        const my = e.clientY - rect.top;
-        _artMap.offsetX = mx - (mx - _artMap.offsetX) * (newZoom / _artMap.zoom);
-        _artMap.offsetY = my - (my - _artMap.offsetY) * (newZoom / _artMap.zoom);
-        _artMap.zoom = newZoom;
-        _artMapRender(); // fast blit
-        // Debounce hi-res rebuild after zoom settles
-        clearTimeout(_artMap._zoomRebuild);
-        _artMap._zoomRebuild = setTimeout(() => { _artMap.dirty = true; _artMapRender(); }, 300);
-    }, { passive: false });
-
-    let clickStart = null;
-
-    // Keyboard shortcuts
-    function _artMapKeyHandler(e) {
-        if (!document.getElementById('artist-map-container') || document.getElementById('artist-map-container').style.display === 'none') return;
-        if (e.target.tagName === 'INPUT') return; // don't intercept search typing
-        if (e.key === 'Escape') { closeArtistMap(); e.preventDefault(); }
-        else if (e.key === '=' || e.key === '+') { artMapZoom(1.3); e.preventDefault(); }
-        else if (e.key === '-') { artMapZoom(0.7); e.preventDefault(); }
-        else if (e.key === '0') { artMapFitToView(); e.preventDefault(); }
-        else if (e.key === 'f' || e.key === 'F') { artMapFitToView(); e.preventDefault(); }
-        else if (e.key === 's' || e.key === 'S') {
-            const input = document.getElementById('artist-map-search');
-            if (input) { input.focus(); e.preventDefault(); }
-        }
-        else if (e.key === 'h' || e.key === 'H') {
-            // Toggle similar artists visibility
-            _artMap._hideSimilar = !_artMap._hideSimilar;
-            _artMap.dirty = true;
-            _artMapRender();
-        }
-    }
-    window.addEventListener('keydown', _artMapKeyHandler);
-    _artMap._keyHandler = _artMapKeyHandler;
-
-    // Right-click context menu
-    canvas.addEventListener('contextmenu', (e) => {
-        e.preventDefault();
-        const { nx, ny } = _artMapScreenToWorld(e, canvas);
-        const node = _artMapHitTest(nx, ny);
-        if (!node || node._isLabel) { _artMapHideContextMenu(); return; }
-
-        const menu = document.getElementById('artist-map-context') || (() => {
-            const m = document.createElement('div');
-            m.id = 'artist-map-context';
-            m.className = 'artmap-context-menu';
-            document.getElementById('artist-map-container').appendChild(m);
-            return m;
-        })();
-
-        const hasId = node.spotify_id || node.itunes_id || node.deezer_id;
-        const activeSource = window._yaActiveSource || 'spotify';
-        const bestId = node[activeSource + '_id'] || node.spotify_id || node.itunes_id || node.deezer_id || '';
-        const bestSource = node[activeSource + '_id'] ? activeSource : node.spotify_id ? 'spotify' : node.itunes_id ? 'itunes' : 'deezer';
-
-        menu.innerHTML = `
-            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); ${hasId ? `openYourArtistInfoModal_direct(${JSON.stringify(node).replace(/"/g, '&quot;')})` : ''}">
-                <span>&#9432;</span> Artist Info
-            </div>
-            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); navigateToPage('artists'); setTimeout(() => selectArtistForDetail({id:'${escapeForInlineJs(bestId)}',name:'${escapeForInlineJs(node.name)}',image_url:'${escapeForInlineJs(node.image_url || '')}'},{source:'${bestSource}'}), 200)">
-                <span>&#128191;</span> View Discography
-            </div>
-            <div class="artmap-ctx-item" onclick="_artMapHideContextMenu(); toggleYourArtistWatchlist(0,'${escapeForInlineJs(node.name)}','${escapeForInlineJs(bestId)}','${bestSource}',null)">
-                <span>&#128065;</span> ${node.type === 'watchlist' ? 'On Watchlist' : 'Add to Watchlist'}
-            </div>
-        `;
-        menu.style.display = 'block';
-        menu.style.left = Math.min(e.clientX, window.innerWidth - 200) + 'px';
-        menu.style.top = Math.min(e.clientY, window.innerHeight - 200) + 'px';
-
-        // Close on next click anywhere
-        setTimeout(() => {
-            window.addEventListener('click', _artMapHideContextMenu, { once: true });
-        }, 10);
-    });
-
-    canvas.addEventListener('mousedown', (e) => {
-        if (e.button !== 0) return; // left button only
-        clickStart = { x: e.clientX, y: e.clientY, time: Date.now() };
-        isPanning = true;
-        panStartX = e.clientX;
-        panStartY = e.clientY;
-    });
-
-    canvas.addEventListener('mousemove', (e) => {
-        if (isPanning) {
-            _artMap.offsetX += e.clientX - panStartX;
-            _artMap.offsetY += e.clientY - panStartY;
-            panStartX = e.clientX;
-            panStartY = e.clientY;
-            _artMapRender();
-        } else {
-            const { nx, ny } = _artMapScreenToWorld(e, canvas);
-            const prev = _artMap.hoveredNode;
-            _artMap.hoveredNode = _artMapHitTest(nx, ny);
-            canvas.style.cursor = _artMap.hoveredNode ? 'pointer' : 'grab';
-            _artMapShowTooltip(e, _artMap.hoveredNode);
-            if (prev !== _artMap.hoveredNode) {
-                // Reset constellation highlight timer
-                clearTimeout(_artMap._constellationTimer);
-                if (_artMap._constellationActive) {
-                    _artMap._constellationActive = false;
-                    _artMapAnimateConstellation(); // fade out
-                }
-                if (_artMap.hoveredNode) {
-                    // Delay constellation effect by 800ms of sustained hover
-                    _artMap._constellationTimer = setTimeout(() => {
-                        if (_artMap.hoveredNode) {
-                            _artMap._constellationActive = true;
-                            _artMap._constellationFade = 0;
-                            _artMap._constellationCache = null;
-                            _artMapAnimateConstellation();
-                        }
-                    }, 800);
-                }
-                _artMapRender();
-            }
-        }
-    });
-
-    canvas.addEventListener('mouseup', (e) => {
-        if (e.button !== 0) return; // left button only
-        const wasDrag = clickStart && (Math.abs(e.clientX - clickStart.x) > 5 || Math.abs(e.clientY - clickStart.y) > 5);
-        isPanning = false;
-
-        if (!wasDrag && clickStart) {
-            // It was a click — find the node under cursor
-            const { nx, ny } = _artMapScreenToWorld(e, canvas);
-            const node = _artMapHitTest(nx, ny);
-            if (node) {
-                _artMap._ripple = { x: node.x, y: node.y, radius: node.radius, start: performance.now() };
-                _artMapRender();
-                if (node.spotify_id || node.itunes_id || node.deezer_id) {
-                    setTimeout(() => openYourArtistInfoModal_direct(node), 200);
-                }
-            }
-        }
-
-        clickStart = null;
-        _artMapShowTooltip(e, null);
-    });
-
-    canvas.addEventListener('mouseleave', () => {
-        _artMapShowTooltip(null, null);
-        clearTimeout(_artMap._constellationTimer);
-        if (_artMap._constellationActive) {
-            _artMap._constellationActive = false;
-            _artMapAnimateConstellation();
-        }
-        _artMap.hoveredNode = null;
-        _artMapRender();
-    });
-
-    // Touch support — single finger pan, pinch to zoom
-    let lastTouches = null;
-    canvas.addEventListener('touchstart', (e) => {
-        e.preventDefault();
-        lastTouches = [...e.touches];
-    }, { passive: false });
-
-    canvas.addEventListener('touchmove', (e) => {
-        e.preventDefault();
-        if (!lastTouches) return;
-        const touches = [...e.touches];
-
-        if (touches.length === 1 && lastTouches.length === 1) {
-            // Pan
-            _artMap.offsetX += touches[0].clientX - lastTouches[0].clientX;
-            _artMap.offsetY += touches[0].clientY - lastTouches[0].clientY;
-            _artMapRender();
-        } else if (touches.length === 2 && lastTouches.length === 2) {
-            // Pinch zoom
-            const prevDist = Math.hypot(lastTouches[1].clientX - lastTouches[0].clientX, lastTouches[1].clientY - lastTouches[0].clientY);
-            const curDist = Math.hypot(touches[1].clientX - touches[0].clientX, touches[1].clientY - touches[0].clientY);
-            const factor = curDist / prevDist;
-            const cx = (touches[0].clientX + touches[1].clientX) / 2;
-            const cy = (touches[0].clientY + touches[1].clientY) / 2;
-            const newZoom = Math.max(0.02, Math.min(3, _artMap.zoom * factor));
-            _artMap.offsetX = cx - (cx - _artMap.offsetX) * (newZoom / _artMap.zoom);
-            _artMap.offsetY = cy - (cy - _artMap.offsetY) * (newZoom / _artMap.zoom);
-            _artMap.zoom = newZoom;
-            _artMap.dirty = true;
-            _artMapRender();
-        }
-        lastTouches = touches;
-    }, { passive: false });
-
-    canvas.addEventListener('touchend', (e) => {
-        e.preventDefault();
-        // Tap to click
-        if (lastTouches && lastTouches.length === 1 && e.changedTouches.length === 1) {
-            const t = e.changedTouches[0];
-            const rect = canvas.getBoundingClientRect();
-            const wx = (t.clientX - rect.left - _artMap.offsetX) / _artMap.zoom;
-            const wy = (t.clientY - rect.top - _artMap.offsetY) / _artMap.zoom;
-            const node = _artMapHitTest(wx, wy);
-            if (node && (node.spotify_id || node.itunes_id || node.deezer_id)) {
-                openYourArtistInfoModal_direct(node);
-            }
-        }
-        lastTouches = null;
-    }, { passive: false });
-
-    // Handle resize
-    window.addEventListener('resize', () => {
-        const container = document.getElementById('artist-map-container');
-        if (!container || container.style.display === 'none') return;
-        _artMap.width = container.clientWidth;
-        _artMap.height = container.clientHeight - 50;
-        canvas.width = _artMap.width * window.devicePixelRatio;
-        canvas.height = _artMap.height * window.devicePixelRatio;
-        canvas.style.width = _artMap.width + 'px';
-        canvas.style.height = _artMap.height + 'px';
-        _artMap.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    });
-}
-
-function _artMapScreenToWorld(e, canvas) {
-    const rect = canvas.getBoundingClientRect();
-    const sx = e.clientX - rect.left;
-    const sy = e.clientY - rect.top;
-    // Inverse of: translate(offsetX, offsetY) → scale(zoom)
-    return {
-        nx: (sx - _artMap.offsetX) / _artMap.zoom,
-        ny: (sy - _artMap.offsetY) / _artMap.zoom,
-    };
-}
-
-function _artMapHitTest(wx, wy) {
-    // Check watchlist first (drawn on top), then similar
-    const sorted = [..._artMap.placed].sort((a, b) =>
-        (b.type === 'watchlist' ? 1 : 0) - (a.type === 'watchlist' ? 1 : 0));
-    for (const n of sorted) {
-        if ((n.opacity || 0) < 0.3) continue;
-        const dx = wx - n.x;
-        const dy = wy - n.y;
-        if (dx * dx + dy * dy <= n.radius * n.radius) return n;
-    }
-    return null;
-}
-
-async function openYourArtistInfoModal_direct(node) {
-    // Determine best source ID — prefer active metadata source
-    let bestId = '', bestSource = '';
-    // Check what the active source is
-    const activeSource = window._yaActiveSource || 'spotify';
-    const sourceOrder = activeSource === 'spotify' ? ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id']
-        : activeSource === 'itunes' ? ['itunes_id', 'spotify_id', 'deezer_id', 'discogs_id']
-            : activeSource === 'deezer' ? ['deezer_id', 'spotify_id', 'itunes_id', 'discogs_id']
-                : ['spotify_id', 'itunes_id', 'deezer_id', 'discogs_id'];
-    const sourceMap = { spotify_id: 'spotify', itunes_id: 'itunes', deezer_id: 'deezer', discogs_id: 'discogs' };
-    for (const key of sourceOrder) {
-        if (node[key]) { bestId = node[key]; bestSource = sourceMap[key]; break; }
-    }
-
-    // Gather ALL connected artists from map edges (both directions)
-    const related = [];
-    const relatedIds = new Set();
-    const nById = _artMap._nodeById || {};
-    _artMap.edges.forEach(e => {
-        if (e.source === node.id && nById[e.target] && !relatedIds.has(e.target)) {
-            related.push(nById[e.target]);
-            relatedIds.add(e.target);
-        }
-        if (e.target === node.id && nById[e.source] && !relatedIds.has(e.source)) {
-            related.push(nById[e.source]);
-            relatedIds.add(e.source);
-        }
-    });
-
-    const poolEntry = {
-        id: node.id,
-        artist_name: node.name,
-        active_source_id: bestId,
-        active_source: bestSource,
-        image_url: node.image_url || '',
-        spotify_artist_id: node.spotify_id || '',
-        itunes_artist_id: node.itunes_id || '',
-        deezer_artist_id: node.deezer_id || '',
-        discogs_artist_id: node.discogs_id || '',
-        source_services: [],
-        on_watchlist: node.type === 'watchlist' ? 1 : 0,
-        _related: related,
-    };
-    if (!window._yaArtists) window._yaArtists = {};
-    window._yaArtists[node.id] = poolEntry;
-    openYourArtistInfoModal(node.id);
-}
-
-async function loadDiscoveryShuffle() {
-    try {
-        const container = document.getElementById('personalized-discovery-shuffle');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/discovery-shuffle?limit=50');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedDiscoveryShuffle = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading discovery shuffle:', error);
-    }
-}
-
-async function loadFamiliarFavorites() {
-    try {
-        const container = document.getElementById('personalized-familiar-favorites');
-        if (!container) return;
-
-        const response = await fetch('/api/discover/personalized/familiar-favorites?limit=50');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            container.closest('.discover-section').style.display = 'none';
-            return;
-        }
-
-        personalizedFamiliarFavorites = data.tracks;
-        renderCompactPlaylist(container, data.tracks);
-        container.closest('.discover-section').style.display = 'block';
-
-    } catch (error) {
-        console.error('Error loading familiar favorites:', error);
-    }
-}
-
-// ===============================
-// BECAUSE YOU LISTEN TO
-// ===============================
-
-async function loadBecauseYouListenTo() {
-    try {
-        const resp = await fetch('/api/discover/because-you-listen-to');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.sections || data.sections.length === 0) return;
-
-        // Find or create the BYLT container
-        let byltContainer = document.getElementById('discover-bylt-sections');
-        if (!byltContainer) {
-            // Insert after the release radar section
-            const releaseRadar = document.getElementById('discover-release-radar');
-            if (!releaseRadar) return;
-            const parent = releaseRadar.closest('.discover-section');
-            if (!parent) return;
-
-            byltContainer = document.createElement('div');
-            byltContainer.id = 'discover-bylt-sections';
-            parent.parentNode.insertBefore(byltContainer, parent.nextSibling);
-        }
-
-        byltContainer.innerHTML = data.sections.map((section, idx) => `
-            <div class="discover-section bylt-section">
-                <div class="discover-section-header">
-                    <div class="bylt-header">
-                        ${section.artist_image ? `<img class="bylt-artist-img" src="${section.artist_image}" alt="" onerror="this.style.display='none'">` : ''}
-                        <div>
-                            <div class="discover-section-subtitle">Because you listen to</div>
-                            <h3 class="discover-section-title">${_esc(section.artist_name)}</h3>
-                        </div>
-                    </div>
-                </div>
-                <div class="discover-carousel" id="bylt-carousel-${idx}"></div>
-            </div>
-        `).join('');
-
-        // Render track cards in each carousel
-        data.sections.forEach((section, idx) => {
-            const carousel = document.getElementById(`bylt-carousel-${idx}`);
-            if (!carousel) return;
-            carousel.innerHTML = section.tracks.map(t => `
-                <div class="discover-card">
-                    <div class="discover-card-image">
-                        ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy" onerror="this.src='/static/placeholder.png'">` : '<div class="discover-card-placeholder">🎵</div>'}
-                    </div>
-                    <div class="discover-card-title">${_esc(t.name)}</div>
-                    <div class="discover-card-artist">${_esc(t.artist)}</div>
-                </div>
-            `).join('');
-        });
-
-    } catch (error) {
-        console.debug('Error loading Because You Listen To:', error);
-    }
-}
-
-// ===============================
-// CACHE DISCOVERY SECTIONS
-// ===============================
-
-// Global arrays for cache discovery click handlers
-let _cacheDiscoverData = {};
-
-function _cacheDiscoverCard(item, type, sectionKey, index) {
-    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-    const coverUrl = item.image_url || '/static/placeholder-album.png';
-    const title = item.name || '';
-    const subtitle = item.artist_name || '';
-    const meta = item.release_date ? item.release_date.substring(0, 10) : (item.label || '');
-    const onclick = `openCacheDiscoverAlbum('${sectionKey}',${index})`;
-    const libBadge = item.in_library ? '<div class="discover-card-lib-badge">In Library</div>' : '';
-    return `<div class="discover-card" onclick="${onclick}" style="cursor:pointer">
-        <div class="discover-card-image">
-            <img src="${_esc(coverUrl)}" alt="${_esc(title)}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
-            ${libBadge}
-        </div>
-        <div class="discover-card-info">
-            <h4 class="discover-card-title">${_esc(title)}</h4>
-            <p class="discover-card-subtitle">${_esc(subtitle)}</p>
-            ${meta ? `<p class="discover-card-meta">${_esc(meta)}</p>` : ''}
-        </div>
-    </div>`;
-}
-
-async function openCacheDiscoverAlbum(sectionKey, index) {
-    const items = _cacheDiscoverData[sectionKey];
-    if (!items || !items[index]) return;
-    const item = items[index];
-    const source = item.source || 'spotify';
-    const albumId = item.entity_id;
-
-    // Deep cuts / genre dive tracks — find the real album by searching the cache
-    if (sectionKey === 'deep_cuts' || sectionKey === 'genre_dive_tracks') {
-        document.getElementById('genre-deep-dive-modal')?.remove();
-        const albumName = item.album_name || item.name || '';
-        const artistName = item.artist_name || '';
-        const trackAlbumId = item.album_id || '';
-        const trackSource = item.source || source;
-
-        if (!artistName) {
-            showToast('No artist data available for this track', 'error');
-            return;
-        }
-
-        showLoadingOverlay(`Loading ${albumName}...`);
-        try {
-            let resolvedSource = trackSource;
-            let resolvedId = trackAlbumId;
-            let response;
-
-            // If we have an album_id, use it directly
-            if (trackAlbumId) {
-                const _params = new URLSearchParams({ name: albumName, artist: artistName });
-                response = await fetch(`/api/discover/album/${trackSource}/${trackAlbumId}?${_params}`);
-            }
-
-            // Fallback: resolve by name+artist if no album_id or direct fetch failed
-            if (!trackAlbumId || (response && !response.ok)) {
-                const searchResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(albumName)}&artist=${encodeURIComponent(artistName)}`);
-                if (searchResp.ok) {
-                    const searchData = await searchResp.json();
-                    if (searchData.success && searchData.entity_id) {
-                        resolvedSource = searchData.source || trackSource;
-                        resolvedId = searchData.entity_id;
-                        const _params = new URLSearchParams({ name: albumName, artist: artistName });
-                        response = await fetch(`/api/discover/album/${resolvedSource}/${resolvedId}?${_params}`);
-                    }
-                }
-            }
-
-            if (!response || !response.ok) throw new Error('Failed to fetch album tracks');
-            const albumData = await response.json();
-            if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
-
-            const spotifyTracks = albumData.tracks.map(track => {
-                let artists = track.artists || albumData.artists || [{ name: artistName }];
-                if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
-                return {
-                    id: track.id, name: track.name, artists,
-                    album: { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] },
-                    duration_ms: track.duration_ms || 0, track_number: track.track_number || 0,
-                };
-            });
-            const artistContext = { id: albumData.artists?.[0]?.id || '', name: artistName, source: resolvedSource };
-            const albumContext = { id: albumData.id, name: albumData.name, album_type: albumData.album_type || 'album', total_tracks: albumData.total_tracks || 0, release_date: albumData.release_date || '', images: albumData.images || [] };
-            await openDownloadMissingModalForYouTube(`discover_cache_${resolvedId}`, albumData.name, spotifyTracks, artistContext, albumContext);
-            hideLoadingOverlay();
-        } catch (error) {
-            console.error('Error opening deep cut album:', error);
-            showToast(`Failed to load album: ${error.message}`, 'error');
-            hideLoadingOverlay();
-        }
-        return;
-    }
-
-    if (!albumId) {
-        showToast('No album ID available', 'error');
-        return;
-    }
-
-    // Close genre deep dive modal if open
-    document.getElementById('genre-deep-dive-modal')?.remove();
-
-    showLoadingOverlay(`Loading ${item.name || 'album'}...`);
-    try {
-        const _params = new URLSearchParams({ name: item.name || '', artist: item.artist_name || '' });
-        let response = await fetch(`/api/discover/album/${source}/${albumId}?${_params}`);
-
-        // If 404 (stale cache entry), try resolving via name+artist
-        if (response.status === 404) {
-            const resolveResp = await fetch(`/api/discover/resolve-cache-album?name=${encodeURIComponent(item.name || '')}&artist=${encodeURIComponent(item.artist_name || '')}`);
-            if (resolveResp.ok) {
-                const resolved = await resolveResp.json();
-                if (resolved.success && resolved.entity_id && resolved.entity_id !== albumId) {
-                    response = await fetch(`/api/discover/album/${resolved.source || source}/${resolved.entity_id}?${_params}`);
-                }
-            }
-        }
-
-        if (!response.ok) throw new Error('Album not available — it may have been removed from the source');
-        const albumData = await response.json();
-        if (!albumData.tracks || albumData.tracks.length === 0) throw new Error('No tracks found');
-
-        const spotifyTracks = albumData.tracks.map(track => {
-            let artists = track.artists || albumData.artists || [{ name: item.artist_name }];
-            if (Array.isArray(artists)) artists = artists.map(a => a.name || a);
-            return {
-                id: track.id,
-                name: track.name,
-                artists: artists,
-                album: {
-                    id: albumData.id,
-                    name: albumData.name,
-                    album_type: albumData.album_type || 'album',
-                    total_tracks: albumData.total_tracks || 0,
-                    release_date: albumData.release_date || '',
-                    images: albumData.images || [],
-                },
-                duration_ms: track.duration_ms || 0,
-                track_number: track.track_number || 0,
-            };
-        });
-
-        const artistContext = {
-            id: albumData.artists?.[0]?.id || '',
-            name: item.artist_name || albumData.artists?.[0]?.name || '',
-            source: source,
-        };
-        const albumContext = {
-            id: albumData.id,
-            name: albumData.name,
-            album_type: albumData.album_type || 'album',
-            total_tracks: albumData.total_tracks || 0,
-            release_date: albumData.release_date || '',
-            images: albumData.images || [],
-        };
-
-        await openDownloadMissingModalForYouTube(
-            `discover_cache_${albumId}`, albumData.name, spotifyTracks, artistContext, albumContext
-        );
-        hideLoadingOverlay();
-    } catch (error) {
-        console.error('Error opening cache discover album:', error);
-        showToast(`Failed to load album: ${error.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-function _insertCacheSection(id, title, subtitle, html, position) {
-    const container = document.getElementById('discover-bylt-sections') || document.querySelector('.discover-container');
-    if (!container) return;
-    let section = document.getElementById(id);
-    if (!section) {
-        section = document.createElement('div');
-        section.id = id;
-        section.className = 'discover-section';
-        if (position === 'top') {
-            // Insert after the hero section (first child), not before it
-            const hero = container.querySelector('.discover-hero');
-            if (hero && hero.nextSibling) {
-                container.insertBefore(section, hero.nextSibling);
-            } else {
-                container.prepend(section);
-            }
-        } else {
-            container.appendChild(section);
-        }
-    }
-    section.innerHTML = `
-        <div class="discover-section-header">
-            <div>
-                <div class="discover-section-subtitle">${subtitle}</div>
-                <h3 class="discover-section-title">${title}</h3>
-            </div>
-        </div>
-        <div class="discover-carousel">${html}</div>
-    `;
-}
-
-async function loadCacheUndiscoveredAlbums() {
-    try {
-        const resp = await fetch('/api/discover/undiscovered-albums');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.albums || !data.albums.length) return;
-        _cacheDiscoverData['undiscovered'] = data.albums;
-        _insertCacheSection('cache-undiscovered',
-            'Undiscovered Albums', 'From artists you love',
-            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'undiscovered', i)).join(''));
-    } catch (e) { console.debug('Cache undiscovered albums:', e); }
-}
-
-async function loadCacheGenreNewReleases() {
-    try {
-        const resp = await fetch('/api/discover/genre-new-releases');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.albums || !data.albums.length) return;
-        _cacheDiscoverData['genre_releases'] = data.albums;
-        _insertCacheSection('cache-genre-releases',
-            'New In Your Genres', 'Released in the last 90 days',
-            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_releases', i)).join(''));
-    } catch (e) { console.debug('Cache genre new releases:', e); }
-}
-
-async function loadCacheLabelExplorer() {
-    try {
-        const resp = await fetch('/api/discover/label-explorer');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.albums || !data.albums.length) return;
-        _cacheDiscoverData['label_explorer'] = data.albums;
-        _insertCacheSection('cache-label-explorer',
-            'From Your Labels', 'Popular on labels in your library',
-            data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'label_explorer', i)).join(''));
-    } catch (e) { console.debug('Cache label explorer:', e); }
-}
-
-async function loadCacheDeepCuts() {
-    try {
-        const resp = await fetch('/api/discover/deep-cuts');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.tracks || !data.tracks.length) return;
-        _cacheDiscoverData['deep_cuts'] = data.tracks;
-        _insertCacheSection('cache-deep-cuts',
-            'Deep Cuts', 'Hidden tracks from artists you know',
-            data.tracks.map((t, i) => _cacheDiscoverCard(t, 'track', 'deep_cuts', i)).join(''));
-    } catch (e) { console.debug('Cache deep cuts:', e); }
-}
-
-async function loadCacheGenreExplorer() {
-    try {
-        const resp = await fetch('/api/discover/genre-explorer');
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.genres || !data.genres.length) return;
-        const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;');
-        const html = `<div class="genre-explorer-grid">${data.genres.map(g => `
-            <div class="genre-explorer-pill ${g.explored ? 'explored' : 'unexplored'}" onclick="openGenreDeepDive('${_esc(g.genre)}')" style="cursor:pointer">
-                <span class="genre-pill-name">${_esc(g.genre)}</span>
-                <span class="genre-pill-count">${g.artist_count} artist${g.artist_count !== 1 ? 's' : ''}</span>
-                ${!g.explored ? '<span class="genre-pill-badge">New</span>' : ''}
-            </div>
-        `).join('')}</div>`;
-        _insertCacheSection('cache-genre-explorer',
-            'Genre Explorer', 'Tap a genre to explore', html, 'top');
-    } catch (e) { console.debug('Cache genre explorer:', e); }
-}
-
-async function openGenreDeepDive(genre) {
-    document.getElementById('genre-deep-dive-modal')?.remove();
-
-    const _esc = (s) => (s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-    const _fmtNum = (n) => {
-        if (!n) return '';
-        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
-        if (n >= 1000) return (n / 1000).toFixed(0) + 'K';
-        return n.toString();
-    };
-    const _fmtDur = (ms) => {
-        if (!ms) return '';
-        const m = Math.floor(ms / 60000);
-        const s = Math.floor((ms % 60000) / 1000);
-        return `${m}:${s.toString().padStart(2, '0')}`;
-    };
-
-    const overlay = document.createElement('div');
-    overlay.id = 'genre-deep-dive-modal';
-    overlay.className = 'genre-dive-overlay';
-    overlay.innerHTML = `
-        <div class="genre-dive-modal">
-            <div class="genre-dive-header">
-                <div>
-                    <div class="genre-dive-subtitle">Genre Deep Dive</div>
-                    <h2 class="genre-dive-title">${_esc(genre)}</h2>
-                </div>
-                <button class="genre-dive-close" onclick="document.getElementById('genre-deep-dive-modal').remove()">&times;</button>
-            </div>
-            <div class="genre-dive-body" id="genre-dive-body">
-                <div class="genre-dive-loading"><div class="genre-dive-spinner"></div>Exploring ${_esc(genre)}...</div>
-            </div>
-        </div>
-    `;
-    overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
-    document.body.appendChild(overlay);
-
-    try {
-        const resp = await fetch(`/api/discover/genre-deep-dive?genre=${encodeURIComponent(genre)}`);
-        if (!resp.ok) throw new Error('Failed to load');
-        const data = await resp.json();
-        if (!data.success) throw new Error('Failed');
-
-        const body = document.getElementById('genre-dive-body');
-        if (!body) return;
-
-        // Update header with counts
-        const subtitle = document.querySelector('.genre-dive-subtitle');
-        if (subtitle) {
-            const parts = [];
-            if (data.artists?.length) parts.push(`${data.artists.length} artist${data.artists.length !== 1 ? 's' : ''}`);
-            if (data.tracks?.length) parts.push(`${data.tracks.length} track${data.tracks.length !== 1 ? 's' : ''}`);
-            if (data.albums?.length) parts.push(`${data.albums.length} album${data.albums.length !== 1 ? 's' : ''}`);
-            subtitle.textContent = parts.length ? parts.join(' · ') : 'Genre Deep Dive';
-        }
-
-        let html = '';
-
-        // Related genres — clickable pills that reload the modal
-        if (data.related_genres && data.related_genres.length) {
-            html += `<div class="genre-dive-related">
-                <div class="genre-dive-related-label">Related Genres</div>
-                ${data.related_genres.map(rg => `
-                    <button class="genre-dive-related-pill" onclick="document.getElementById('genre-deep-dive-modal').remove();openGenreDeepDive('${_esc(rg.genre)}')">${_esc(rg.genre)}</button>
-                `).join('')}
-            </div>`;
-        }
-
-        // Artists section — clickable, navigates to artist page
-        // Uses library_id for in-library artists (source-agnostic), falls back to search by name
-        if (data.artists && data.artists.length) {
-            html += `<div class="genre-dive-section">
-                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">🎤</span> Artists in ${_esc(genre)}</h3>
-                <div class="genre-dive-artists">
-                    ${data.artists.map(a => {
-                // Always open on Artists page with discography — pass source for correct routing
-                const imgUrl = _esc(a.image_url || '');
-                const artSource = _esc(a.source || '');
-                const clickAction = `onclick="document.getElementById('genre-deep-dive-modal').remove();navigateToPage('artists');setTimeout(()=>selectArtistForDetail({id:'${_esc(a.entity_id)}',name:'${_esc(a.name)}',image_url:'${imgUrl}'},{source:'${artSource}'}),300)"`;
-                const srcClass = (a.source || '').toLowerCase();
-                return `<div class="genre-dive-artist" ${clickAction}>
-                            <div class="genre-dive-artist-img" style="${a.image_url ? `background-image:url('${_esc(a.image_url)}')` : ''}">
-                                ${!a.image_url ? '<span>🎤</span>' : ''}
-                            </div>
-                            <span class="genre-dive-src-dot genre-dive-src-${srcClass}"></span>
-                            <div class="genre-dive-artist-name">${_esc(a.name)}</div>
-                            ${a.followers ? `<div class="genre-dive-artist-meta">${_fmtNum(a.followers)} followers</div>` : ''}
-                            ${a.library_id ? '<div class="genre-dive-artist-badge">In Library</div>' : ''}
-                        </div>`;
-            }).join('')}
-                </div>
-            </div>`;
-        }
-
-        // Tracks section — clickable, opens album download
-        if (data.tracks && data.tracks.length) {
-            _cacheDiscoverData['genre_dive_tracks'] = data.tracks;
-            html += `<div class="genre-dive-section">
-                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">🎵</span> Popular Tracks</h3>
-                <div class="genre-dive-tracks">
-                    ${data.tracks.map((t, i) => {
-                const tSrcClass = (t.source || '').toLowerCase();
-                return `
-                        <div class="genre-dive-track" onclick="document.getElementById('genre-deep-dive-modal').remove();openCacheDiscoverAlbum('genre_dive_tracks',${i})">
-                            <div class="genre-dive-track-num">${i + 1}</div>
-                            <div class="genre-dive-track-img" style="${t.image_url ? `background-image:url('${_esc(t.image_url)}')` : ''}">
-                                ${!t.image_url ? '🎵' : ''}
-                            </div>
-                            <div class="genre-dive-track-info">
-                                <div class="genre-dive-track-name">${_esc(t.name)}</div>
-                                <div class="genre-dive-track-artist">${_esc(t.artist_name)}${t.album_name ? ' · ' + _esc(t.album_name) : ''}</div>
-                            </div>
-                            <span class="genre-dive-src-dot genre-dive-src-${tSrcClass}" style="flex-shrink:0"></span>
-                            <div class="genre-dive-track-duration">${_fmtDur(t.duration_ms)}</div>
-                        </div>
-                    `}).join('')}
-                </div>
-            </div>`;
-        }
-
-        // Albums section
-        if (data.albums && data.albums.length) {
-            _cacheDiscoverData['genre_dive_albums'] = data.albums;
-            html += `<div class="genre-dive-section">
-                <h3 class="genre-dive-section-title"><span class="genre-dive-icon">💿</span> Albums</h3>
-                <div class="discover-carousel">${data.albums.map((a, i) => _cacheDiscoverCard(a, 'album', 'genre_dive_albums', i)).join('')}</div>
-            </div>`;
-        }
-
-        if (!html) {
-            html = '<div class="genre-dive-empty"><div class="genre-dive-empty-icon">🔍</div><p>No cached data found for this genre yet</p><p class="genre-dive-empty-hint">Search for artists in this genre to build up the cache</p></div>';
-        }
-
-        body.innerHTML = html;
-    } catch (e) {
-        const body = document.getElementById('genre-dive-body');
-        if (body) body.innerHTML = '<div style="color:rgba(255,100,100,0.6);text-align:center;padding:40px;">Failed to load genre data</div>';
-    }
-}
-
-// ===============================
-// BUILD A PLAYLIST FEATURE
-// ===============================
-
-let buildPlaylistSearchTimeout = null;
-
-async function searchBuildPlaylistArtists() {
-    const searchInput = document.getElementById('build-playlist-search');
-    const resultsContainer = document.getElementById('build-playlist-search-results');
-    const spinner = document.getElementById('bp-search-spinner');
-    const query = searchInput.value.trim();
-
-    if (!query) {
-        resultsContainer.innerHTML = '';
-        resultsContainer.style.display = 'none';
-        if (spinner) spinner.style.display = 'none';
-        return;
-    }
-
-    // Debounce search
-    clearTimeout(buildPlaylistSearchTimeout);
-    buildPlaylistSearchTimeout = setTimeout(async () => {
-        if (spinner) spinner.style.display = 'flex';
-        try {
-            const response = await fetch(`/api/discover/build-playlist/search-artists?query=${encodeURIComponent(query)}`);
-            const data = await response.json();
-            if (!response.ok) {
-                showToast(data.error || 'Search failed', 'error');
-                return;
-            }
-            if (!data.success || !data.artists || data.artists.length === 0) {
-                resultsContainer.innerHTML = '<div class="build-playlist-no-results">No artists found for "' + query.replace(/</g, '&lt;') + '"</div>';
-                resultsContainer.style.display = 'block';
-                return;
-            }
-
-            // Filter out already-selected artists
-            const selectedIds = new Set(buildPlaylistSelectedArtists.map(a => a.id));
-            const filtered = data.artists.filter(a => !selectedIds.has(a.id));
-
-            if (filtered.length === 0) {
-                resultsContainer.innerHTML = '<div class="build-playlist-no-results">All results already selected</div>';
-                resultsContainer.style.display = 'block';
-                return;
-            }
-
-            // Render search results
-            let html = '';
-            filtered.forEach(artist => {
-                const imageUrl = artist.image_url || '/static/placeholder-album.png';
-                const escapedName = artist.name.replace(/'/g, "\\'").replace(/"/g, '&quot;');
-                html += `
-                    <div class="build-playlist-search-result" onclick="addBuildPlaylistArtist('${artist.id}', '${escapedName}', '${imageUrl}')">
-                        <img src="${imageUrl}" alt="${artist.name}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
-                        <span class="bp-result-name">${artist.name}</span>
-                        <span class="bp-result-add">+ Add</span>
-                    </div>
-                `;
-            });
-
-            resultsContainer.innerHTML = html;
-            resultsContainer.style.display = 'block';
-
-        } catch (error) {
-            console.error('Error searching artists:', error);
-        } finally {
-            if (spinner) spinner.style.display = 'none';
-        }
-    }, 400);
-}
-
-function addBuildPlaylistArtist(artistId, artistName, imageUrl) {
-    if (buildPlaylistSelectedArtists.some(a => a.id === artistId)) {
-        showToast('Artist already selected', 'warning');
-        return;
-    }
-    if (buildPlaylistSelectedArtists.length >= 5) {
-        showToast('Maximum 5 seed artists', 'warning');
-        return;
-    }
-
-    buildPlaylistSelectedArtists.push({
-        id: artistId,
-        name: artistName,
-        image_url: imageUrl
-    });
-
-    renderBuildPlaylistSelectedArtists();
-
-    // Clear search
-    document.getElementById('build-playlist-search').value = '';
-    document.getElementById('build-playlist-search-results').innerHTML = '';
-    document.getElementById('build-playlist-search-results').style.display = 'none';
-}
-
-function removeBuildPlaylistArtist(artistId) {
-    buildPlaylistSelectedArtists = buildPlaylistSelectedArtists.filter(a => a.id !== artistId);
-    renderBuildPlaylistSelectedArtists();
-}
-
-function renderBuildPlaylistSelectedArtists() {
-    const container = document.getElementById('build-playlist-selected-artists');
-    const generateBtn = document.getElementById('build-playlist-generate-btn');
-    const counter = document.getElementById('bp-selected-counter');
-    const count = buildPlaylistSelectedArtists.length;
-
-    if (counter) counter.textContent = `${count} / 5`;
-
-    if (count === 0) {
-        container.innerHTML = `
-            <div class="build-playlist-no-selection">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width: 32px; height: 32px; opacity: 0.4; margin-bottom: 8px;"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
-                <span>Search above to add seed artists</span>
-            </div>`;
-        generateBtn.disabled = true;
-        return;
-    }
-
-    let html = '';
-    buildPlaylistSelectedArtists.forEach(artist => {
-        const escapedId = artist.id.replace(/'/g, "\\'");
-        html += `
-            <div class="build-playlist-selected-artist">
-                <img src="${artist.image_url || '/static/placeholder-album.png'}" alt="${artist.name}" loading="lazy" onerror="this.src='/static/placeholder-album.png'">
-                <span>${artist.name}</span>
-                <button onclick="removeBuildPlaylistArtist('${escapedId}')" class="build-playlist-remove-artist" title="Remove">×</button>
-            </div>
-        `;
-    });
-
-    container.innerHTML = html;
-    generateBtn.disabled = false;
-}
-
-let buildPlaylistTracks = [];
-
-async function generateBuildPlaylist() {
-    if (buildPlaylistSelectedArtists.length === 0) {
-        showToast('Please select at least 1 artist', 'warning');
-        return;
-    }
-
-    const generateBtn = document.getElementById('build-playlist-generate-btn');
-    const resultsContainer = document.getElementById('build-playlist-results');
-    const resultsWrapper = document.getElementById('build-playlist-results-wrapper');
-    const loadingIndicator = document.getElementById('build-playlist-loading');
-    const metadataDisplay = document.getElementById('build-playlist-metadata-display');
-    const titleEl = document.getElementById('build-playlist-results-title');
-    const subtitleEl = document.getElementById('build-playlist-results-subtitle');
-
-    // Show loading, hide search area
-    generateBtn.disabled = true;
-    loadingIndicator.style.display = 'flex';
-    resultsWrapper.style.display = 'none';
-    resultsContainer.innerHTML = '';
-
-    try {
-        const seedIds = buildPlaylistSelectedArtists.map(a => a.id);
-        const response = await fetch('/api/discover/build-playlist/generate', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                seed_artist_ids: seedIds,
-                playlist_size: 50
-            })
-        });
-
-        const data = await response.json();
-        if (!response.ok || !data.success) {
-            throw new Error(data.error || 'Failed to generate playlist');
-        }
-        if (!data.playlist || !data.playlist.tracks || data.playlist.tracks.length === 0) {
-            throw new Error(data.playlist?.error || 'No tracks found. Try different seed artists.');
-        }
-
-        // Store tracks globally
-        buildPlaylistTracks = data.playlist.tracks;
-
-        // Update title and subtitle
-        const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
-        titleEl.textContent = 'Custom Playlist';
-        subtitleEl.textContent = `Based on: ${artistNames}`;
-
-        // Render metadata
-        const metadata = data.playlist.metadata;
-        metadataDisplay.innerHTML = `
-            <div class="build-playlist-metadata">
-                <div class="bp-meta-stat">
-                    <span class="bp-meta-value">${metadata.total_tracks}</span>
-                    <span class="bp-meta-label">Tracks</span>
-                </div>
-                <div class="bp-meta-stat">
-                    <span class="bp-meta-value">${metadata.similar_artists_count}</span>
-                    <span class="bp-meta-label">Similar Artists</span>
-                </div>
-                <div class="bp-meta-stat">
-                    <span class="bp-meta-value">${metadata.albums_count}</span>
-                    <span class="bp-meta-label">Albums Sampled</span>
-                </div>
-            </div>
-        `;
-
-        // Render playlist
-        renderCompactPlaylist(resultsContainer, data.playlist.tracks);
-
-        // Show results wrapper
-        resultsWrapper.style.display = 'block';
-
-    } catch (error) {
-        console.error('Error generating playlist:', error);
-        resultsWrapper.style.display = 'none';
-        showToast(error.message || 'Failed to generate playlist', 'error');
-    } finally {
-        loadingIndicator.style.display = 'none';
-        generateBtn.disabled = false;
-    }
-}
-
-async function openDownloadModalForBuildPlaylist() {
-    if (!buildPlaylistTracks || buildPlaylistTracks.length === 0) {
-        showToast('No playlist tracks available', 'warning');
-        return;
-    }
-
-    const artistNames = buildPlaylistSelectedArtists.map(a => a.name).join(', ');
-    const playlistName = `Custom Playlist - ${artistNames}`;
-    const virtualPlaylistId = 'build_playlist_custom';
-
-    // Open download modal
-    await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, buildPlaylistTracks);
-}
-
-function openDailyMix(mixIndex) {
-    const mix = personalizedDailyMixes[mixIndex];
-    if (!mix || !mix.tracks) return;
-
-    // TODO: Open modal or dedicated view for Daily Mix
-    console.log('Opening Daily Mix:', mix.name);
-}
-
-// ===============================
-// DISCOVER PLAYLIST ACTIONS
-// ===============================
-
-async function openDownloadModalForDiscoverPlaylist(playlistType, playlistName) {
-    console.log(`📥 Opening Download Missing Tracks modal for ${playlistName}`);
-
-    try {
-        // Get tracks based on playlist type
-        let tracks = [];
-        if (playlistType === 'release_radar') {
-            tracks = discoverReleaseRadarTracks;
-        } else if (playlistType === 'discovery_weekly') {
-            tracks = discoverWeeklyTracks;
-        } else if (playlistType === 'seasonal_playlist') {
-            tracks = discoverSeasonalTracks;
-        } else if (playlistType === 'popular_picks') {
-            tracks = personalizedPopularPicks;
-        } else if (playlistType === 'hidden_gems') {
-            tracks = personalizedHiddenGems;
-        } else if (playlistType === 'discovery_shuffle') {
-            tracks = personalizedDiscoveryShuffle;
-        } else if (playlistType === 'familiar_favorites') {
-            tracks = personalizedFamiliarFavorites;
-        } else if (playlistType === 'recently_added') {
-            tracks = personalizedRecentlyAdded;
-        } else if (playlistType === 'top_tracks') {
-            tracks = personalizedTopTracks;
-        } else if (playlistType === 'forgotten_favorites') {
-            tracks = personalizedForgottenFavorites;
-        } else if (playlistType === 'build_playlist') {
-            tracks = buildPlaylistTracks;
-        }
-
-        if (!tracks || tracks.length === 0) {
-            showToast(`No tracks available for ${playlistName}`, 'warning');
-            return;
-        }
-
-        // Convert discover tracks to format expected by download modal
-        const spotifyTracks = tracks.map(track => {
-            let spotifyTrack;
-
-            // Use track_data_json if available, otherwise construct from track data
-            if (track.track_data_json) {
-                spotifyTrack = track.track_data_json;
-            } else {
-                // Fallback: construct track object from available data
-                spotifyTrack = {
-                    id: track.spotify_track_id,
-                    name: track.track_name,
-                    artists: [{ name: track.artist_name }],
-                    album: {
-                        name: track.album_name,
-                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-                    },
-                    duration_ms: track.duration_ms || 0
-                };
-            }
-
-            // Normalize artists to array of strings for modal compatibility
-            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-            }
-
-            return spotifyTrack;
-        });
-
-        // Create virtual playlist ID
-        const virtualPlaylistId = `discover_${playlistType}`;
-
-        // Use existing modal system (same as YouTube/Tidal playlists)
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-    } catch (error) {
-        console.error('Error opening download modal for discover playlist:', error);
-        showToast(`Failed to open download modal: ${error.message}`, 'error');
-        hideLoadingOverlay();  // Ensure overlay is hidden on error
-    }
-}
-
-function updateDiscoverDownloadButton(playlistType, state) {
-    /**
-     * Update the download button appearance based on download state
-     * @param {string} playlistType - 'release_radar' or 'discovery_weekly'
-     * @param {string} state - 'idle', 'downloading', or 'complete'
-     */
-    const buttonId = `${playlistType}-download-btn`;
-    const button = document.getElementById(buttonId);
-
-    if (!button) return;
-
-    const icon = button.querySelector('.button-icon');
-    const text = button.querySelector('.button-text');
-
-    if (state === 'downloading') {
-        if (icon) icon.textContent = '⏳';
-        if (text) text.textContent = 'View Progress';
-        button.title = 'View download progress';
-    } else {
-        if (icon) icon.textContent = '↓';
-        if (text) text.textContent = 'Download';
-        button.title = 'Download missing tracks';
-    }
-}
-
-function checkForActiveDiscoverDownloads() {
-    /**
-     * Check for active download processes and update button states
-     * Only runs if discover page is actually loaded in the DOM
-     */
-    // Check if discover page is loaded by looking for a discover-specific element
-    const discoverPage = document.getElementById('release-radar-download-btn') ||
-        document.getElementById('discovery-weekly-download-btn');
-
-    if (!discoverPage) return;
-
-    const discoverPlaylists = [
-        { id: 'discover_release_radar', type: 'release_radar' },
-        { id: 'discover_discovery_weekly', type: 'discovery_weekly' }
-    ];
-
-    discoverPlaylists.forEach(({ id, type }) => {
-        if (activeDownloadProcesses[id]) {
-            const process = activeDownloadProcesses[id];
-            if (process.status === 'running' || process.status === 'idle') {
-                updateDiscoverDownloadButton(type, 'downloading');
-            }
-        }
-    });
-}
-
-async function startDiscoverPlaylistSync(playlistType, playlistName) {
-    console.log(`🔄 Starting sync for ${playlistName}`);
-
-    // Get tracks based on playlist type
-    let tracks = [];
-    if (playlistType === 'release_radar') {
-        tracks = discoverReleaseRadarTracks;
-    } else if (playlistType === 'discovery_weekly') {
-        tracks = discoverWeeklyTracks;
-    } else if (playlistType === 'seasonal_playlist') {
-        tracks = discoverSeasonalTracks;
-    } else if (playlistType === 'popular_picks') {
-        tracks = personalizedPopularPicks;
-    } else if (playlistType === 'hidden_gems') {
-        tracks = personalizedHiddenGems;
-    } else if (playlistType === 'discovery_shuffle') {
-        tracks = personalizedDiscoveryShuffle;
-    } else if (playlistType === 'familiar_favorites') {
-        tracks = personalizedFamiliarFavorites;
-    } else if (playlistType === 'build_playlist') {
-        tracks = buildPlaylistTracks;
-    }
-
-    if (!tracks || tracks.length === 0) {
-        showToast(`No tracks available for ${playlistName}`, 'warning');
-        return;
-    }
-
-    // Convert to format expected by sync API
-    const spotifyTracks = tracks.map(track => {
-        let spotifyTrack;
-
-        // Use track_data_json if available
-        if (track.track_data_json) {
-            spotifyTrack = track.track_data_json;
-        } else {
-            // Fallback: construct track object
-            spotifyTrack = {
-                id: track.spotify_track_id,
-                name: track.track_name,
-                artists: [{ name: track.artist_name }],
-                album: {
-                    name: track.album_name,
-                    images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-                },
-                duration_ms: track.duration_ms || 0
-            };
-        }
-
-        // Normalize artists to array of strings for sync compatibility
-        if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-            spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-        }
-
-        return spotifyTrack;
-    });
-
-    // Create virtual playlist ID
-    const virtualPlaylistId = `discover_${playlistType}`;
-
-    // Store in cache for sync function
-    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
-
-    // Create virtual playlist object
-    const virtualPlaylist = {
-        id: virtualPlaylistId,
-        name: playlistName,
-        track_count: spotifyTracks.length
-    };
-
-    // Add to spotify playlists array if not already there
-    if (!spotifyPlaylists.find(p => p.id === virtualPlaylistId)) {
-        spotifyPlaylists.push(virtualPlaylist);
-    }
-
-    // Show sync status display (convert underscores to hyphens for ID)
-    const statusId = playlistType.replace(/_/g, '-') + '-sync-status';
-    const statusDisplay = document.getElementById(statusId);
-    if (statusDisplay) {
-        statusDisplay.style.display = 'block';
-    }
-
-    // Disable sync button to prevent duplicate syncs (convert underscores to hyphens for ID)
-    const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
-    const syncButton = document.getElementById(buttonId);
-    if (syncButton) {
-        syncButton.disabled = true;
-        syncButton.style.opacity = '0.5';
-        syncButton.style.cursor = 'not-allowed';
-    }
-
-    // Start sync using existing function
-    await startPlaylistSync(virtualPlaylistId);
-
-    // Extract image URL from first track for download bar bubble
-    let imageUrl = null;
-    if (spotifyTracks && spotifyTracks.length > 0) {
-        const firstTrack = spotifyTracks[0];
-        if (firstTrack.album && firstTrack.album.images && firstTrack.album.images.length > 0) {
-            imageUrl = firstTrack.album.images[0].url;
-        }
-    }
-
-    // Add to discover download bar
-    addDiscoverDownload(virtualPlaylistId, playlistName, playlistType, imageUrl);
-
-    // Start polling for progress updates
-    startDiscoverSyncPolling(playlistType, virtualPlaylistId);
-}
-
-// Track active discover sync pollers
-const discoverSyncPollers = {};
-
-function startDiscoverSyncPolling(playlistType, virtualPlaylistId) {
-    // Stop any existing poller for this playlist type
-    if (discoverSyncPollers[playlistType]) {
-        clearInterval(discoverSyncPollers[playlistType]);
-    }
-
-    console.log(`🔄 Starting sync polling for ${playlistType} (${virtualPlaylistId})`);
-
-    // Phase 5: Subscribe via WebSocket
-    if (socketConnected) {
-        socket.emit('sync:subscribe', { playlist_ids: [virtualPlaylistId] });
-        _syncProgressCallbacks[virtualPlaylistId] = (data) => {
-            const prefix = playlistType.replace(/_/g, '-');
-            const progress = data.progress || {};
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const pct = total > 0 ? Math.round((processed / total) * 100) : 0;
-            const el = (id) => document.getElementById(id);
-            if (el(`${prefix}-sync-completed`)) el(`${prefix}-sync-completed`).textContent = matched;
-            if (el(`${prefix}-sync-pending`)) el(`${prefix}-sync-pending`).textContent = pending;
-            if (el(`${prefix}-sync-failed`)) el(`${prefix}-sync-failed`).textContent = failed;
-            if (el(`${prefix}-sync-percentage`)) el(`${prefix}-sync-percentage`).textContent = pct;
-            if (data.status === 'finished') {
-                if (discoverSyncPollers[playlistType]) { clearInterval(discoverSyncPollers[playlistType]); delete discoverSyncPollers[playlistType]; }
-                socket.emit('sync:unsubscribe', { playlist_ids: [virtualPlaylistId] });
-                delete _syncProgressCallbacks[virtualPlaylistId];
-                const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
-                const syncButton = el(buttonId);
-                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; syncButton.style.cursor = 'pointer'; }
-                const playlistNames = {
-                    'release_radar': 'Fresh Tape', 'discovery_weekly': 'The Archives',
-                    'seasonal_playlist': 'Seasonal Mix', 'popular_picks': 'Popular Picks',
-                    'hidden_gems': 'Hidden Gems', 'discovery_shuffle': 'Discovery Shuffle',
-                    'familiar_favorites': 'Familiar Favorites', 'build_playlist': 'Custom Playlist'
-                };
-                showToast(`${playlistNames[playlistType] || playlistType} sync complete!`, 'success');
-                setTimeout(() => { const sd = el(`${prefix}-sync-status`); if (sd) sd.style.display = 'none'; }, 3000);
-            }
-        };
-    }
-
-    // Poll every 500ms for progress updates
-    discoverSyncPollers[playlistType] = setInterval(async () => {
-        // Always poll — no dedicated WebSocket events for discovery progress
-        try {
-            const response = await fetch(`/api/sync/status/${virtualPlaylistId}`);
-            if (!response.ok) {
-                console.log(`⚠️ Sync status response not OK: ${response.status}`);
-                return;
-            }
-
-            const data = await response.json();
-            console.log(`📊 Sync status for ${playlistType}:`, data);
-
-            // Update UI with progress (data structure: {status: ..., progress: {...}})
-            // Convert underscores to hyphens for HTML IDs
-            const prefix = playlistType.replace(/_/g, '-');
-            const progress = data.progress || {};
-
-            const completedEl = document.getElementById(`${prefix}-sync-completed`);
-            const pendingEl = document.getElementById(`${prefix}-sync-pending`);
-            const failedEl = document.getElementById(`${prefix}-sync-failed`);
-            const percentageEl = document.getElementById(`${prefix}-sync-percentage`);
-
-            const total = progress.total_tracks || 0;
-            const matched = progress.matched_tracks || 0;
-            const failed = progress.failed_tracks || 0;
-            const processed = matched + failed;
-            const pending = total - processed;
-            const completionPercentage = total > 0 ? Math.round((processed / total) * 100) : 0;
-
-            if (completedEl) completedEl.textContent = matched;
-            if (pendingEl) pendingEl.textContent = pending;
-            if (failedEl) failedEl.textContent = failed;
-            if (percentageEl) percentageEl.textContent = completionPercentage;
-
-            // If complete, stop polling and hide status after delay
-            if (data.status === 'finished') {
-                console.log(`✅ Sync complete for ${playlistType}`);
-                clearInterval(discoverSyncPollers[playlistType]);
-                delete discoverSyncPollers[playlistType];
-
-                // Re-enable sync button
-                const buttonId = playlistType.replace(/_/g, '-') + '-sync-btn';
-                const syncButton = document.getElementById(buttonId);
-                if (syncButton) {
-                    syncButton.disabled = false;
-                    syncButton.style.opacity = '1';
-                    syncButton.style.cursor = 'pointer';
-                }
-
-                // Show completion toast with playlist name
-                const playlistNames = {
-                    'release_radar': 'Fresh Tape',
-                    'discovery_weekly': 'The Archives',
-                    'seasonal_playlist': 'Seasonal Mix',
-                    'popular_picks': 'Popular Picks',
-                    'hidden_gems': 'Hidden Gems',
-                    'discovery_shuffle': 'Discovery Shuffle',
-                    'familiar_favorites': 'Familiar Favorites',
-                    'build_playlist': 'Custom Playlist'
-                };
-                const displayName = playlistNames[playlistType] || playlistType;
-                showToast(`${displayName} sync complete!`, 'success');
-
-                // Hide status display after 3 seconds
-                setTimeout(() => {
-                    const statusDisplay = document.getElementById(`${prefix}-sync-status`);
-                    if (statusDisplay) {
-                        statusDisplay.style.display = 'none';
-                    }
-                }, 3000);
-            }
-
-        } catch (error) {
-            console.error(`❌ Error polling sync status for ${playlistType}:`, error);
-        }
-    }, 500);
-}
-
-async function openDownloadModalForRecentAlbum(albumIndex) {
-    const album = discoverRecentAlbums[albumIndex];
-    if (!album) {
-        showToast('Album data not found', 'error');
-        return;
-    }
-
-    console.log(`📥 Opening Download Missing Tracks modal for album: ${album.album_name}`);
-    showLoadingOverlay(`Loading tracks for ${album.album_name}...`);
-
-    try {
-        // Determine source and album ID - use source-agnostic endpoint
-        const source = album.source || (album.album_spotify_id ? 'spotify' : album.album_deezer_id ? 'deezer' : 'itunes');
-        const albumId = source === 'spotify' ? album.album_spotify_id : source === 'deezer' ? album.album_deezer_id : album.album_itunes_id;
-
-        if (!albumId) {
-            throw new Error(`No ${source} album ID available`);
-        }
-
-        // Fetch album tracks from appropriate source (pass name/artist for Hydrabase support)
-        const _dap2 = new URLSearchParams({ name: album.album_name || '', artist: album.artist_name || '' });
-        const response = await fetch(`/api/discover/album/${source}/${albumId}?${_dap2}`);
-        if (!response.ok) {
-            throw new Error('Failed to fetch album tracks');
-        }
-
-        const albumData = await response.json();
-        if (!albumData.tracks || albumData.tracks.length === 0) {
-            throw new Error('No tracks found in album');
-        }
-
-        // Convert to expected format - CRITICAL FIX: Use fresh albumData from Spotify, not cached album
-        const spotifyTracks = albumData.tracks.map(track => {
-            // Normalize artists to array of strings
-            let artists = track.artists || albumData.artists || [{ name: album.artist_name }];
-            if (Array.isArray(artists)) {
-                artists = artists.map(a => a.name || a);
-            }
-
-            return {
-                id: track.id,
-                name: track.name,
-                artists: artists,
-                album: {
-                    id: albumData.id,                              // ✅ Album ID for proper tracking
-                    name: albumData.name,                          // ✅ Use fresh data, not cached
-                    album_type: albumData.album_type || 'album',   // ✅ Critical: Album type for classification
-                    total_tracks: albumData.total_tracks || 0,     // ✅ Total tracks for context
-                    release_date: albumData.release_date || '',    // ✅ Release date
-                    images: albumData.images || []                 // ✅ Use Spotify images
-                },
-                duration_ms: track.duration_ms || 0,
-                track_number: track.track_number || 0
-            };
-        });
-
-        // Create virtual playlist ID using the appropriate album ID
-        const virtualPlaylistId = `discover_album_${albumId}`;
-
-        // CRITICAL FIX: Pass proper artist/album context for modal display
-        const artistContext = {
-            id: source === 'spotify' ? album.artist_spotify_id : source === 'deezer' ? album.artist_deezer_id : album.artist_itunes_id,
-            name: album.artist_name,
-            source: source
-        };
-
-        const albumContext = {
-            id: albumData.id,
-            name: albumData.name,
-            album_type: albumData.album_type || 'album',
-            total_tracks: albumData.total_tracks || 0,
-            release_date: albumData.release_date || '',
-            images: albumData.images || []
-        };
-
-        // Open download modal with artist/album context
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, albumData.name, spotifyTracks, artistContext, albumContext);
-
-        hideLoadingOverlay();
-
-    } catch (error) {
-        console.error('Error opening album download modal:', error);
-        showToast(`Failed to load album: ${error.message}`, 'error');
-        hideLoadingOverlay();
-    }
-}
-
-// ===============================
-// DISCOVER DOWNLOAD BAR
-// ===============================
-
-// Track discover page downloads
-let discoverDownloads = {}; // playlistId -> { name, type, status, virtualPlaylistId, startTime }
-
-/**
- * Add a download to the discover download bar
- */
-function addDiscoverDownload(playlistId, playlistName, playlistType, imageUrl = null) {
-    console.log(`📥 [DOWNLOAD SIDEBAR] Adding discover download: ${playlistName} (${playlistId}) type: ${playlistType}, image: ${imageUrl}`);
-
-    // Always register the download in state (needed for dashboard even when not on discover page)
-    discoverDownloads[playlistId] = {
-        name: playlistName,
-        type: playlistType,
-        status: 'in_progress',
-        virtualPlaylistId: playlistId,
-        imageUrl: imageUrl,
-        startTime: new Date()
-    };
-
-    console.log(`📊 [DOWNLOAD SIDEBAR] Active downloads:`, Object.keys(discoverDownloads));
-
-    // Update discover page sidebar if it exists (user is on discover page)
-    const downloadSidebar = document.getElementById('discover-download-sidebar');
-    if (downloadSidebar) {
-        updateDiscoverDownloadBar(); // Also saves snapshot internally
-    } else {
-        console.log('ℹ️ [DOWNLOAD SIDEBAR] Sidebar not present - skipping sidebar UI update');
-        saveDiscoverDownloadSnapshot(); // Persist state even when sidebar is absent
-    }
-
-    updateDashboardDownloads();
-    monitorDiscoverDownload(playlistId);
-}
-
-/**
- * Monitor a discover download for completion
- */
-function monitorDiscoverDownload(playlistId) {
-    let notFoundCount = 0;
-    const maxNotFoundAttempts = 5; // Give sync 10 seconds to start (5 checks * 2 seconds)
-
-    // Phase 5: Subscribe via WebSocket for sync status updates
-    if (socketConnected) {
-        socket.emit('sync:subscribe', { playlist_ids: [playlistId] });
-        _syncProgressCallbacks[playlistId] = (data) => {
-            if (!discoverDownloads[playlistId]) return;
-            if (data.status === 'complete' || data.status === 'finished') {
-                discoverDownloads[playlistId].status = 'completed';
-                updateDiscoverDownloadBar();
-                updateDashboardDownloads();
-                socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
-                delete _syncProgressCallbacks[playlistId];
-                setTimeout(() => {
-                    if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
-                        removeDiscoverDownload(playlistId);
-                    }
-                }, 30000);
-            }
-        };
-    }
-
-    const checkInterval = setInterval(async () => {
-        try {
-            // Check if download still exists
-            if (!discoverDownloads[playlistId]) {
-                clearInterval(checkInterval);
-                if (_syncProgressCallbacks[playlistId]) {
-                    if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [playlistId] });
-                    delete _syncProgressCallbacks[playlistId];
-                }
-                return;
-            }
-
-            // First check if there's an active download process (modal-based downloads)
-            const activeProcess = activeDownloadProcesses[playlistId];
-            if (activeProcess) {
-                console.log(`📂 [DOWNLOAD BAR] Found active process for ${playlistId}, status: ${activeProcess.status}`);
-
-                if (activeProcess.status === 'complete') {
-                    console.log(`✅ [DOWNLOAD BAR] Process completed: ${discoverDownloads[playlistId].name}`);
-                    discoverDownloads[playlistId].status = 'completed';
-                    updateDiscoverDownloadBar();
-                    updateDashboardDownloads();
-                    clearInterval(checkInterval);
-
-                    // Auto-remove completed downloads after 30 seconds
-                    setTimeout(() => {
-                        if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
-                            removeDiscoverDownload(playlistId);
-                        }
-                    }, 30000);
-                }
-                return; // Continue monitoring
-            }
-
-            // Check sync status API (for sync-based downloads)
-            if (socketConnected) return; // Phase 5: WS handles sync status
-            const response = await fetch(`/api/sync/status/${playlistId}`);
-            if (response.ok) {
-                const data = await response.json();
-                notFoundCount = 0; // Reset counter if found
-
-                console.log(`🔄 [DOWNLOAD BAR] Sync status for ${playlistId}: ${data.status}`);
-
-                if (data.status === 'complete') {
-                    console.log(`✅ [DOWNLOAD BAR] Sync completed: ${discoverDownloads[playlistId].name}`);
-                    discoverDownloads[playlistId].status = 'completed';
-                    updateDiscoverDownloadBar();
-                    updateDashboardDownloads();
-                    clearInterval(checkInterval);
-
-                    // Auto-remove completed downloads after 30 seconds
-                    setTimeout(() => {
-                        if (discoverDownloads[playlistId] && discoverDownloads[playlistId].status === 'completed') {
-                            removeDiscoverDownload(playlistId);
-                        }
-                    }, 30000);
-                }
-            } else if (response.status === 404) {
-                notFoundCount++;
-                console.log(`🔍 [DOWNLOAD BAR] Sync not found for ${playlistId} (attempt ${notFoundCount}/${maxNotFoundAttempts})`);
-
-                // Only remove after multiple attempts (give it time to start)
-                if (notFoundCount >= maxNotFoundAttempts) {
-                    console.log(`⏹️ [DOWNLOAD BAR] Sync not found after ${maxNotFoundAttempts} attempts, removing`);
-                    clearInterval(checkInterval);
-                    removeDiscoverDownload(playlistId);
-                }
-            }
-        } catch (error) {
-            console.error(`❌ [DOWNLOAD BAR] Error monitoring ${playlistId}:`, error);
-        }
-    }, 2000); // Check every 2 seconds
-}
-
-/**
- * Remove a download from the bar
- */
-function removeDiscoverDownload(playlistId) {
-    console.log(`🗑️ Removing discover download: ${playlistId}`);
-    delete discoverDownloads[playlistId];
-    updateDiscoverDownloadBar();
-    updateDashboardDownloads();
-    saveDiscoverDownloadSnapshot(); // Save state after removal
-}
-
-/**
- * Update the discover download sidebar UI
- */
-function updateDiscoverDownloadBar() {
-    const downloadSidebar = document.getElementById('discover-download-sidebar');
-    const bubblesContainer = document.getElementById('discover-download-bubbles');
-    const countElement = document.getElementById('discover-download-count');
-
-    console.log(`🔄 [DOWNLOAD SIDEBAR] Updating sidebar - found elements:`, {
-        downloadSidebar: !!downloadSidebar,
-        bubblesContainer: !!bubblesContainer,
-        countElement: !!countElement
-    });
-
-    if (!downloadSidebar || !bubblesContainer || !countElement) {
-        console.warn('⚠️ [DOWNLOAD SIDEBAR] Missing elements, cannot update');
-        return;
-    }
-
-    const activeDownloads = Object.keys(discoverDownloads);
-    const count = activeDownloads.length;
-
-    console.log(`📊 [DOWNLOAD SIDEBAR] Updating with ${count} active downloads`);
-
-    // Update count
-    countElement.textContent = count;
-
-    // Show/hide sidebar
-    if (count === 0) {
-        console.log(`👁️ [DOWNLOAD SIDEBAR] No downloads, hiding sidebar`);
-        downloadSidebar.classList.add('hidden');
-        return;
-    } else {
-        console.log(`👁️ [DOWNLOAD SIDEBAR] ${count} downloads, showing sidebar`);
-        downloadSidebar.classList.remove('hidden');
-    }
-
-    // Update bubbles
-    bubblesContainer.innerHTML = activeDownloads.map(playlistId => {
-        const download = discoverDownloads[playlistId];
-        const isCompleted = download.status === 'completed';
-        const icon = isCompleted ? '✅' : '⏳';
-
-        // Use image if available, otherwise gradient background
-        const imageUrl = download.imageUrl || '';
-        const backgroundStyle = imageUrl ?
-            `background-image: url('${imageUrl}');` :
-            `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
-
-        return `
-            <div class="discover-download-bubble">
-                <div class="discover-download-bubble-card ${isCompleted ? 'completed' : ''}"
-                     onclick="openDiscoverDownloadModal('${playlistId}')"
-                     title="${escapeHtml(download.name)} - Click to view">
-                    <div class="discover-download-bubble-image" style="${backgroundStyle}"></div>
-                    <div class="discover-download-bubble-overlay"></div>
-                    <div class="discover-download-bubble-content">
-                        <span class="discover-download-bubble-icon">${icon}</span>
-                    </div>
-                </div>
-                <div class="discover-download-bubble-name">${escapeHtml(download.name)}</div>
-            </div>
-        `;
-    }).join('');
-
-    console.log(`📊 Updated discover download sidebar: ${count} active downloads`);
-
-    // Save snapshot after UI update
-    saveDiscoverDownloadSnapshot();
-}
-
-/**
- * Open download modal for a discover playlist
- */
-async function openDiscoverDownloadModal(playlistId) {
-    console.log(`📂 [DOWNLOAD BAR] Opening download modal for: ${playlistId}`);
-
-    // Check if there's an active download process with modal
-    let process = activeDownloadProcesses[playlistId];
-
-    console.log(`📋 [DOWNLOAD BAR] Process found:`, {
-        exists: !!process,
-        hasModalElement: !!(process && process.modalElement),
-        hasModalId: !!(process && process.modalId)
-    });
-
-    if (process) {
-        // Try modalElement first (album downloads)
-        if (process.modalElement) {
-            console.log(`✅ [DOWNLOAD BAR] Opening modal via modalElement`);
-            process.modalElement.style.display = 'flex';
-            return;
-        }
-
-        // Try modalId (sync downloads)
-        if (process.modalId) {
-            const modal = document.getElementById(process.modalId);
-            if (modal) {
-                console.log(`✅ [DOWNLOAD BAR] Opening modal via modalId: ${process.modalId}`);
-                modal.style.display = 'flex';
-                return;
-            }
-        }
-    }
-
-    // If no process found, try to rehydrate from backend
-    console.log(`💧 [DOWNLOAD BAR] No modal found, attempting to rehydrate from backend...`);
-    const rehydrated = await rehydrateDiscoverDownloadModal(playlistId);
-
-    if (rehydrated) {
-        console.log(`✅ [DOWNLOAD BAR] Successfully rehydrated modal, opening it...`);
-        // Try again after rehydration
-        process = activeDownloadProcesses[playlistId];
-        if (process && process.modalElement) {
-            process.modalElement.style.display = 'flex';
-            return;
-        }
-    }
-
-    // Fallback: show toast
-    const download = discoverDownloads[playlistId];
-    if (download) {
-        console.log(`ℹ️ [DOWNLOAD BAR] No modal found after rehydration attempt, showing toast`);
-        showToast(`Download: ${download.name} - ${download.status}`, 'info');
-    } else {
-        console.warn(`⚠️ [DOWNLOAD BAR] No download or process found for: ${playlistId}`);
-    }
-}
-
-/**
- * Initialize discover download sidebar on page load
- */
-function initializeDiscoverDownloadBar() {
-    console.log('🎵 Initializing discover download sidebar...');
-
-    // Start with sidebar hidden (will be shown if downloads exist after hydration)
-    const downloadSidebar = document.getElementById('discover-download-sidebar');
-    if (downloadSidebar) {
-        downloadSidebar.classList.add('hidden');
-    }
-}
-
-// --- Discover Download Modal Rehydration ---
-
-async function rehydrateDiscoverDownloadModal(playlistId) {
-    /**
-     * Rehydrates a discover download modal from backend process data.
-     * Fetches tracks from backend API and recreates the modal (user-requested).
-     */
-    try {
-        console.log(`💧 [REHYDRATE] Attempting to rehydrate modal for: ${playlistId}`);
-
-        // Check if there's an active backend process for this playlist
-        const batchResponse = await fetch(`/api/download_status/batch`);
-        if (!batchResponse.ok) {
-            console.log(`⚠️ [REHYDRATE] Failed to fetch batch info`);
-            return false;
-        }
-
-        const batchData = await batchResponse.json();
-        const batches = batchData.batches || {};
-
-        // Find the batch for this playlist (batches is an object with batch_id keys)
-        let batchId = null;
-        let batch = null;
-        for (const [id, batchStatus] of Object.entries(batches)) {
-            if (batchStatus.playlist_id === playlistId) {
-                batchId = id;
-                batch = batchStatus;
-                break;
-            }
-        }
-
-        if (!batch || !batchId) {
-            console.log(`⚠️ [REHYDRATE] No active batch found for ${playlistId}`);
-            return false;
-        }
-
-        console.log(`✅ [REHYDRATE] Found active batch for ${playlistId}: ${batchId}`, batch);
-
-        // Get the download metadata from discoverDownloads
-        const downloadData = discoverDownloads[playlistId];
-        if (!downloadData) {
-            console.log(`⚠️ [REHYDRATE] No download metadata found for ${playlistId}`);
-            return false;
-        }
-
-        // Handle album downloads from Recent Releases
-        if (playlistId.startsWith('discover_album_')) {
-            const albumId = playlistId.replace('discover_album_', '');
-            console.log(`💧 [REHYDRATE] Album download - fetching album ${albumId}...`);
-
-            try {
-                const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
-                if (!albumResponse.ok) {
-                    console.error(`❌ [REHYDRATE] Failed to fetch album: ${albumResponse.status}`);
-                    return false;
-                }
-
-                const albumData = await albumResponse.json();
-                if (!albumData.tracks || albumData.tracks.length === 0) {
-                    console.error(`❌ [REHYDRATE] No tracks in album`);
-                    return false;
-                }
-
-                // Convert tracks to expected format
-                const spotifyTracks = albumData.tracks.map(track => {
-                    let artists = track.artists || [];
-                    if (Array.isArray(artists)) {
-                        artists = artists.map(a => a.name || a);
-                    }
-
-                    return {
-                        id: track.id,
-                        name: track.name,
-                        artists: artists,
-                        album: {
-                            name: albumData.name || downloadData.name.split(' - ')[0],
-                            images: downloadData.imageUrl ? [{ url: downloadData.imageUrl }] : []
-                        },
-                        duration_ms: track.duration_ms || 0
-                    };
-                });
-
-                console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks for album`);
-
-                // Create modal
-                await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
-
-                // Update process
-                const process = activeDownloadProcesses[playlistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = batchId;
-                    subscribeToDownloadBatch(batchId);
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Start polling for status updates
-                    startModalDownloadPolling(playlistId);
-                    console.log(`✅ [REHYDRATE] Successfully rehydrated album modal with polling`);
-                    return true;
-                }
-                return false;
-
-            } catch (error) {
-                console.error(`❌ [REHYDRATE] Error fetching album:`, error);
-                return false;
-            }
-        }
-
-        // Determine API endpoint based on playlist ID
-        let apiEndpoint;
-        if (playlistId === 'discover_release_radar') {
-            apiEndpoint = '/api/discover/release-radar';
-        } else if (playlistId === 'discover_discovery_weekly') {
-            apiEndpoint = '/api/discover/discovery-weekly';
-        } else if (playlistId === 'discover_seasonal_playlist') {
-            apiEndpoint = '/api/discover/seasonal-playlist';
-        } else if (playlistId === 'discover_popular_picks') {
-            apiEndpoint = '/api/discover/popular-picks';
-        } else if (playlistId === 'discover_hidden_gems') {
-            apiEndpoint = '/api/discover/hidden-gems';
-        } else if (playlistId === 'discover_discovery_shuffle') {
-            apiEndpoint = '/api/discover/discovery-shuffle';
-        } else if (playlistId === 'discover_familiar_favorites') {
-            apiEndpoint = '/api/discover/familiar-favorites';
-        } else if (playlistId === 'build_playlist_custom') {
-            apiEndpoint = '/api/discover/build-playlist';
-        } else if (playlistId.startsWith('discover_lb_')) {
-            // ListenBrainz playlist - fetch from cache
-            const identifier = playlistId.replace('discover_lb_', '');
-            const tracks = listenbrainzTracksCache[identifier];
-            if (!tracks || tracks.length === 0) {
-                console.log(`⚠️ [REHYDRATE] No ListenBrainz tracks in cache for ${identifier}`);
-                return false;
-            }
-
-            // Convert to Spotify format
-            const spotifyTracks = tracks.map(track => ({
-                id: track.mbid || `listenbrainz_${track.track_name}_${track.artist_name}`.replace(/[^a-z0-9]/gi, '_'),  // Generate ID if missing
-                name: track.track_name,
-                artists: [{ name: cleanArtistName(track.artist_name) }], // Proper Spotify format
-                album: {
-                    name: track.album_name,
-                    images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-                },
-                duration_ms: track.duration_ms || 0,
-                mbid: track.mbid
-            }));
-
-            // Create modal and update process
-            await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
-            const process = activeDownloadProcesses[playlistId];
-            if (process) {
-                process.status = 'running';
-                process.batchId = batchId;
-                subscribeToDownloadBatch(batchId);
-                const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-                if (beginBtn) beginBtn.style.display = 'none';
-                if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                // Start polling for status updates
-                startModalDownloadPolling(playlistId);
-                console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz modal with polling`);
-                return true;
-            }
-            return false;
-        } else if (playlistId.startsWith('listenbrainz_')) {
-            // ListenBrainz download from discovery modal - get from backend state
-            const mbid = playlistId.replace('listenbrainz_', '');
-            console.log(`💧 [REHYDRATE] ListenBrainz download - fetching state for MBID: ${mbid}`);
-
-            try {
-                // Fetch ListenBrainz state from backend
-                const stateResponse = await fetch(`/api/listenbrainz/state/${mbid}`);
-                if (!stateResponse.ok) {
-                    console.log(`⚠️ [REHYDRATE] Failed to fetch ListenBrainz state`);
-                    return false;
-                }
-
-                const stateData = await stateResponse.json();
-                if (!stateData || !stateData.discovery_results) {
-                    console.log(`⚠️ [REHYDRATE] No discovery results in ListenBrainz state`);
-                    return false;
-                }
-
-                // Convert discovery results to Spotify tracks
-                const spotifyTracks = stateData.discovery_results
-                    .filter(result => result.spotify_data)
-                    .map(result => {
-                        const track = result.spotify_data;
-                        // Ensure artists is in proper Spotify format: [{name: ...}]
-                        let artistsArray = [];
-                        if (track.artists && Array.isArray(track.artists)) {
-                            artistsArray = track.artists.map(artist => {
-                                if (typeof artist === 'string') {
-                                    return { name: artist };
-                                } else if (artist && artist.name) {
-                                    return { name: artist.name };
-                                } else {
-                                    return { name: String(artist || 'Unknown Artist') };
-                                }
-                            });
-                        } else if (track.artists && typeof track.artists === 'string') {
-                            artistsArray = [{ name: track.artists }];
-                        } else {
-                            artistsArray = [{ name: 'Unknown Artist' }];
-                        }
-                        return {
-                            id: track.id,
-                            name: track.name,
-                            artists: artistsArray,
-                            album: track.album || { name: 'Unknown Album', images: [] },
-                            duration_ms: track.duration_ms || 0,
-                            external_urls: track.external_urls || {}
-                        };
-                    });
-
-                if (spotifyTracks.length === 0) {
-                    console.log(`⚠️ [REHYDRATE] No Spotify tracks in ListenBrainz discovery results`);
-                    return false;
-                }
-
-                console.log(`✅ [REHYDRATE] Retrieved ${spotifyTracks.length} tracks from ListenBrainz state`);
-
-                // Create modal and update process
-                await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
-                const process = activeDownloadProcesses[playlistId];
-                if (process) {
-                    process.status = 'running';
-                    process.batchId = batchId;
-                    subscribeToDownloadBatch(batchId);
-                    const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-                    const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Start polling for status updates
-                    startModalDownloadPolling(playlistId);
-                    console.log(`✅ [REHYDRATE] Successfully rehydrated ListenBrainz download modal with polling`);
-                    return true;
-                }
-                return false;
-
-            } catch (error) {
-                console.error(`❌ [REHYDRATE] Error fetching ListenBrainz state:`, error);
-                return false;
-            }
-        } else {
-            console.error(`❌ [REHYDRATE] Unknown discover playlist type: ${playlistId}`);
-            return false;
-        }
-
-        // Fetch tracks from API
-        console.log(`📡 [REHYDRATE] Fetching tracks from ${apiEndpoint}...`);
-        const response = await fetch(apiEndpoint);
-        if (!response.ok) {
-            console.error(`❌ [REHYDRATE] Failed to fetch tracks: ${response.status}`);
-            return false;
-        }
-
-        const data = await response.json();
-        if (!data.success || !data.tracks) {
-            console.error(`❌ [REHYDRATE] Invalid track data:`, data);
-            return false;
-        }
-
-        const tracks = data.tracks;
-        console.log(`✅ [REHYDRATE] Retrieved ${tracks.length} tracks`);
-
-        // Transform tracks to Spotify format
-        const spotifyTracks = tracks.map(track => {
-            let spotifyTrack;
-            if (track.track_data_json) {
-                spotifyTrack = track.track_data_json;
-            } else {
-                spotifyTrack = {
-                    id: track.spotify_track_id,
-                    name: track.track_name,
-                    artists: [{ name: track.artist_name }],
-                    album: {
-                        name: track.album_name,
-                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
-                    },
-                    duration_ms: track.duration_ms || 0
-                };
-            }
-            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
-                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
-            }
-            return spotifyTrack;
-        });
-
-        // Create the modal
-        await openDownloadMissingModalForYouTube(playlistId, downloadData.name, spotifyTracks);
-
-        // Update process with batch info
-        const process = activeDownloadProcesses[playlistId];
-        if (process) {
-            process.status = 'running';
-            process.batchId = batchId;
-            subscribeToDownloadBatch(batchId);
-
-            // Update button states
-            const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
-            const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
-            if (beginBtn) beginBtn.style.display = 'none';
-            if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-            // Start polling for status updates
-            startModalDownloadPolling(playlistId);
-
-            // Don't hide the modal - user clicked to open it
-            console.log(`✅ [REHYDRATE] Successfully rehydrated modal for ${downloadData.name} with polling`);
-            return true;
-        } else {
-            console.error(`❌ [REHYDRATE] Failed to find rehydrated process for ${playlistId}`);
-            return false;
-        }
-
-    } catch (error) {
-        console.error(`❌ [REHYDRATE] Error rehydrating discover download modal:`, error);
-        return false;
-    }
-}
-
-// --- Discover Download Snapshot System ---
-
-let discoverSnapshotSaveTimeout = null; // Debounce snapshot saves
-
-async function saveDiscoverDownloadSnapshot() {
-    /**
-     * Saves current discoverDownloads state to backend for persistence.
-     * Debounced to prevent excessive backend calls.
-     */
-
-    // Clear any existing timeout
-    if (discoverSnapshotSaveTimeout) {
-        clearTimeout(discoverSnapshotSaveTimeout);
-    }
-
-    // Debounce the actual save
-    discoverSnapshotSaveTimeout = setTimeout(async () => {
-        try {
-            const downloadCount = Object.keys(discoverDownloads).length;
-
-            // Don't save empty state
-            if (downloadCount === 0) {
-                console.log('📸 Skipping discover snapshot save - no downloads to save');
-                return;
-            }
-
-            console.log(`📸 Saving discover download snapshot: ${downloadCount} downloads`);
-
-            // Prepare snapshot data (clean format)
-            const cleanDownloads = {};
-            for (const [playlistId, downloadData] of Object.entries(discoverDownloads)) {
-                cleanDownloads[playlistId] = {
-                    name: downloadData.name,
-                    type: downloadData.type,
-                    status: downloadData.status,
-                    virtualPlaylistId: downloadData.virtualPlaylistId,
-                    imageUrl: downloadData.imageUrl,
-                    startTime: downloadData.startTime instanceof Date ? downloadData.startTime.toISOString() : downloadData.startTime
-                };
-            }
-
-            const response = await fetch('/api/discover_downloads/snapshot', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({
-                    downloads: cleanDownloads
-                })
-            });
-
-            const data = await response.json();
-
-            if (data.success) {
-                console.log(`✅ Discover download snapshot saved: ${downloadCount} downloads`);
-            } else {
-                console.error('❌ Failed to save discover download snapshot:', data.error);
-            }
-
-        } catch (error) {
-            console.error('❌ Error saving discover download snapshot:', error);
-        }
-    }, 1000); // 1 second debounce
-}
-
-async function hydrateDiscoverDownloadsFromSnapshot() {
-    /**
-     * Hydrates discover downloads from backend snapshot with live status.
-     * Called on page load to restore download state.
-     */
-    try {
-        console.log('🔄 Loading discover download snapshot from backend...');
-
-        const response = await fetch('/api/discover_downloads/hydrate');
-        const data = await response.json();
-
-        if (!data.success) {
-            console.error('❌ Failed to load discover download snapshot:', data.error);
-            return;
-        }
-
-        const downloads = data.downloads || {};
-        const stats = data.stats || {};
-
-        console.log(`🔄 Loaded discover snapshot: ${stats.total_downloads || 0} downloads, ${stats.active_downloads || 0} active, ${stats.completed_downloads || 0} completed`);
-
-        if (Object.keys(downloads).length === 0) {
-            console.log('ℹ️ No discover downloads to hydrate');
-            return;
-        }
-
-        // Clear existing state
-        discoverDownloads = {};
-
-        // Restore discoverDownloads with hydrated data
-        for (const [playlistId, downloadData] of Object.entries(downloads)) {
-            discoverDownloads[playlistId] = {
-                name: downloadData.name,
-                type: downloadData.type,
-                status: downloadData.status, // Live status from backend
-                virtualPlaylistId: downloadData.virtualPlaylistId,
-                imageUrl: downloadData.imageUrl,
-                startTime: new Date(downloadData.startTime)
-            };
-
-            console.log(`🔄 Hydrated download: ${downloadData.name} (${downloadData.status})`);
-
-            // Start monitoring for any in-progress downloads
-            if (downloadData.status === 'in_progress') {
-                console.log(`📡 Starting monitoring for: ${downloadData.name}`);
-                monitorDiscoverDownload(playlistId);
-            }
-        }
-
-        // Don't update UI here - it will be updated when user navigates to discover page
-        // This allows hydration to work even if page loads on a different tab
-
-        const totalDownloads = Object.keys(discoverDownloads).length;
-        console.log(`✅ Successfully hydrated ${totalDownloads} discover downloads (UI will update on discover page navigation)`);
-
-    } catch (error) {
-        console.error('❌ Error hydrating discover downloads from snapshot:', error);
-    }
-}
-
-// Initialize on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initializeDiscoverDownloadBar);
-} else {
-    initializeDiscoverDownloadBar();
-}
-
-// ============================================================================
-// MUSICBRAINZ ENRICHMENT UI - PHASE 5 WEB UI
-// ============================================================================
-
-/**
- * Poll MusicBrainz status every 2 seconds and update UI
- */
-async function updateMusicBrainzStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/musicbrainz/status');
-        if (!response.ok) { console.warn('MusicBrainz status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateMusicBrainzStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating MusicBrainz status:', error);
-    }
-}
-
-function updateMusicBrainzStatusFromData(data) {
-    const button = document.getElementById('musicbrainz-button');
-    if (!button) return;
-
-    // Update button state classes
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    // Update tooltip content
-    const tooltipStatus = document.getElementById('mb-tooltip-status');
-    const tooltipCurrent = document.getElementById('mb-tooltip-current');
-    const tooltipProgress = document.getElementById('mb-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) {
-            tooltipStatus.textContent = 'Complete';
-        } else if (data.running && !data.paused) {
-            tooltipStatus.textContent = 'Running';
-        } else if (data.paused) {
-            tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
-        } else {
-            tooltipStatus.textContent = 'Idle';
-        }
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            const type = data.current_item.type || 'item';
-            const name = data.current_item.name;
-            tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
-        } else {
-            tooltipCurrent.textContent = 'No active matches';
-        }
-    }
-
-    if (tooltipProgress && data.progress) {
-        const artists = data.progress.artists || {};
-        const albums = data.progress.albums || {};
-        const tracks = data.progress.tracks || {};
-
-        const currentType = data.current_item?.type;
-        let progressText = '';
-
-        const artistsComplete = artists.matched >= artists.total;
-        const albumsComplete = albums.matched >= albums.total;
-
-        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
-        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
-            progressText = `Albums: ${albums.matched || 0} / ${albums.total} (${albums.percent || 0}%)`;
-        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
-            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total} (${tracks.percent || 0}%)`;
-        } else {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total} (${artists.percent || 0}%)`;
-        }
-
-        tooltipProgress.textContent = progressText;
-    }
-}
-
-/**
- * Toggle MusicBrainz enrichment pause/resume
- */
-async function toggleMusicBrainzEnrichment() {
-    try {
-        const button = document.getElementById('musicbrainz-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/musicbrainz/pause' : '/api/musicbrainz/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} MusicBrainz enrichment`);
-        }
-
-        // Immediately update UI
-        await updateMusicBrainzStatus();
-
-        console.log(`✅ MusicBrainz enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling MusicBrainz enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// Initialize MusicBrainz UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('musicbrainz-button');
-        if (button) {
-            button.addEventListener('click', toggleMusicBrainzEnrichment);
-            // Start polling
-            updateMusicBrainzStatus();
-            setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
-            console.log('✅ MusicBrainz UI initialized');
-        }
-    });
-} else {
-    const button = document.getElementById('musicbrainz-button');
-    if (button) {
-        button.addEventListener('click', toggleMusicBrainzEnrichment);
-        // Start polling
-        updateMusicBrainzStatus();
-        setInterval(updateMusicBrainzStatus, 2000); // Poll every 2 seconds
-        console.log('✅ MusicBrainz UI initialized');
-    }
-}
-
-// ============================================================================
-// AUDIODB ENRICHMENT UI
-// ============================================================================
-
-/**
- * Poll AudioDB status every 2 seconds and update UI
- */
-async function updateAudioDBStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/audiodb/status');
-        if (!response.ok) { console.warn('AudioDB status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateAudioDBStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating AudioDB status:', error);
-    }
-}
-
-function updateAudioDBStatusFromData(data) {
-    const button = document.getElementById('audiodb-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const tooltipStatus = document.getElementById('audiodb-tooltip-status');
-    const tooltipCurrent = document.getElementById('audiodb-tooltip-current');
-    const tooltipProgress = document.getElementById('audiodb-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
-        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            const type = data.current_item.type || 'item';
-            const name = data.current_item.name;
-            tooltipCurrent.textContent = `${type.charAt(0).toUpperCase() + type.slice(1)}: "${name}"`;
-        } else {
-            tooltipCurrent.textContent = 'No active matches';
-        }
-    }
-
-    if (tooltipProgress && data.progress) {
-        const artists = data.progress.artists || {};
-        const albums = data.progress.albums || {};
-        const tracks = data.progress.tracks || {};
-
-        const currentType = data.current_item?.type;
-        let progressText = '';
-
-        const artistsComplete = artists.matched >= artists.total;
-        const albumsComplete = albums.matched >= albums.total;
-
-        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
-            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
-            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-        } else {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        }
-
-        tooltipProgress.textContent = progressText;
-    }
-}
-
-function updateDiscogsStatusFromData(data) {
-    const button = document.getElementById('discogs-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const tooltipStatus = document.getElementById('discogs-tooltip-status');
-    const tooltipCurrent = document.getElementById('discogs-tooltip-current');
-    const tooltipProgress = document.getElementById('discogs-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) tooltipStatus.textContent = 'Complete';
-        else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
-        else if (data.paused) tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused';
-        else tooltipStatus.textContent = 'Idle';
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) tooltipCurrent.textContent = 'All items processed';
-        else if (data.current_item) tooltipCurrent.textContent = `Processing: "${data.current_item}"`;
-        else tooltipCurrent.textContent = 'No active matches';
-    }
-
-    if (tooltipProgress && data.stats) {
-        const s = data.stats;
-        tooltipProgress.textContent = `Matched: ${s.matched || 0} | Not found: ${s.not_found || 0} | Pending: ${s.pending || 0}`;
-    }
-}
-
-async function toggleDiscogsEnrichment() {
-    try {
-        const button = document.getElementById('discogs-button');
-        if (!button) return;
-        const isPaused = button.classList.contains('paused') || button.classList.contains('complete');
-        const endpoint = isPaused ? '/api/discogs/resume' : '/api/discogs/pause';
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (response.ok) {
-            showToast(isPaused ? 'Discogs enrichment resumed' : 'Discogs enrichment paused', 'info');
-        }
-    } catch (e) {
-        showToast('Failed to toggle Discogs enrichment', 'error');
-    }
-}
-
-/**
- * Toggle AudioDB enrichment pause/resume
- */
-async function toggleAudioDBEnrichment() {
-    try {
-        const button = document.getElementById('audiodb-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/audiodb/pause' : '/api/audiodb/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} AudioDB enrichment`);
-        }
-
-        // Immediately update UI
-        await updateAudioDBStatus();
-
-        console.log(`✅ AudioDB enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling AudioDB enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// Initialize AudioDB UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('audiodb-button');
-        if (button) {
-            button.addEventListener('click', toggleAudioDBEnrichment);
-            updateAudioDBStatus();
-            setInterval(updateAudioDBStatus, 2000);
-            console.log('✅ AudioDB UI initialized');
-        }
-    });
-} else {
-    const button = document.getElementById('audiodb-button');
-    if (button) {
-        button.addEventListener('click', toggleAudioDBEnrichment);
-        updateAudioDBStatus();
-        setInterval(updateAudioDBStatus, 2000);
-        console.log('✅ AudioDB UI initialized');
-    }
-}
-
-// ===================================================================
-// DEEZER ENRICHMENT STATUS
-// ===================================================================
-
-async function updateDeezerStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/deezer/status');
-        if (!response.ok) { console.warn('Deezer status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateDeezerStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Deezer status:', error);
-    }
-}
-
-function updateDeezerStatusFromData(data) {
-    const button = document.getElementById('deezer-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const tooltipStatus = document.getElementById('deezer-tooltip-status');
-    const tooltipCurrent = document.getElementById('deezer-tooltip-current');
-    const tooltipProgress = document.getElementById('deezer-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
-        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        const artists = data.progress.artists || {};
-        const albums = data.progress.albums || {};
-        const tracks = data.progress.tracks || {};
-
-        const currentType = data.current_item?.type;
-        let progressText = '';
-
-        const artistsComplete = artists.matched >= artists.total;
-        const albumsComplete = albums.matched >= albums.total;
-
-        if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
-            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-        } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
-            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-        } else {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        }
-
-        tooltipProgress.textContent = progressText;
-    }
-}
-
-async function toggleDeezerEnrichment() {
-    try {
-        const button = document.getElementById('deezer-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/deezer/pause' : '/api/deezer/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Deezer enrichment`);
-        }
-
-        // Immediately update UI
-        await updateDeezerStatus();
-
-        console.log(`✅ Deezer enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Deezer enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// Initialize Deezer UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('deezer-button');
-        if (button) {
-            button.addEventListener('click', toggleDeezerEnrichment);
-            updateDeezerStatus();
-            setInterval(updateDeezerStatus, 2000);
-            console.log('✅ Deezer UI initialized');
-        }
-    });
-} else {
-    const button = document.getElementById('deezer-button');
-    if (button) {
-        button.addEventListener('click', toggleDeezerEnrichment);
-        updateDeezerStatus();
-        setInterval(updateDeezerStatus, 2000);
-        console.log('✅ Deezer UI initialized');
-    }
-}
-
-// ===================================================================
-// SPOTIFY ENRICHMENT STATUS
-// ===================================================================
-
-async function updateSpotifyEnrichmentStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/spotify-enrichment/status');
-        if (!response.ok) { console.warn('Spotify enrichment status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateSpotifyEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Spotify enrichment status:', error);
-    }
-}
-
-function updateSpotifyEnrichmentStatusFromData(data) {
-    const button = document.getElementById('spotify-enrich-button');
-    if (!button) return;
-
-    const notAuthenticated = data.authenticated === false;
-    const isRateLimited = data.rate_limited === true;
-    const budgetExhausted = data.daily_budget && data.daily_budget.exhausted;
-
-    button.classList.remove('active', 'paused', 'complete', 'no-auth');
-    if (data.paused) {
-        button.classList.add('paused');
-    } else if (notAuthenticated) {
-        button.classList.add('no-auth');
-    } else if (isRateLimited || budgetExhausted) {
-        button.classList.add('paused');
-    } else if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('spotify-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('spotify-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('spotify-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
-        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
-        else if (isRateLimited) { tooltipStatus.textContent = 'Rate Limited'; }
-        else if (budgetExhausted) { tooltipStatus.textContent = 'Daily Limit Reached'; }
-        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running) { tooltipStatus.textContent = 'Running'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.paused) {
-            tooltipCurrent.textContent = notAuthenticated ? 'Connect Spotify in Settings to enrich' : 'Click to resume';
-        } else if (notAuthenticated) {
-            tooltipCurrent.textContent = 'Connect Spotify in Settings to enrich';
-        } else if (isRateLimited) {
-            const info = data.rate_limit || {};
-            const remaining = info.remaining_seconds || 0;
-            tooltipCurrent.textContent = remaining > 0 ? `Waiting ${Math.ceil(remaining / 60)}m for rate limit to clear` : 'Waiting for rate limit to clear';
-        } else if (budgetExhausted) {
-            const resets = data.daily_budget.resets_in_seconds || 0;
-            const hours = Math.floor(resets / 3600);
-            const mins = Math.floor((resets % 3600) / 60);
-            tooltipCurrent.textContent = `Resets in ${hours}h ${mins}m`;
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        } else {
-            tooltipCurrent.textContent = 'Waiting for next item...';
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        if (notAuthenticated) {
-            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
-        } else {
-            const artists = data.progress.artists || {};
-            const albums = data.progress.albums || {};
-            const tracks = data.progress.tracks || {};
-
-            const currentType = data.current_item?.type || '';
-            let progressText = '';
-
-            const artistsComplete = artists.matched >= artists.total;
-            const albumsComplete = albums.matched >= albums.total;
-
-            if (currentType === 'artist') {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else if (currentType.includes('album')) {
-                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-            } else if (currentType.includes('track')) {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            } else if (!artistsComplete) {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else if (!albumsComplete) {
-                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-            } else {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            }
-
-            tooltipProgress.textContent = progressText;
-        }
-    }
-}
-
-async function toggleSpotifyEnrichment() {
-    try {
-        const button = document.getElementById('spotify-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/spotify-enrichment/pause' : '/api/spotify-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            const data = await response.json().catch(() => ({}));
-            if (data.rate_limited) {
-                showToast('Cannot resume — Spotify is rate limited', 'warning');
-                return;
-            }
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Spotify enrichment`);
-        }
-
-        await updateSpotifyEnrichmentStatus();
-        console.log(`Spotify enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Spotify enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// Initialize Spotify Enrichment UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('spotify-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleSpotifyEnrichment);
-            updateSpotifyEnrichmentStatus();
-            setInterval(updateSpotifyEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('spotify-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleSpotifyEnrichment);
-        updateSpotifyEnrichmentStatus();
-        setInterval(updateSpotifyEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// ITUNES ENRICHMENT STATUS
-// ===================================================================
-
-async function updateiTunesEnrichmentStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/itunes-enrichment/status');
-        if (!response.ok) { console.warn('iTunes enrichment status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateiTunesEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating iTunes enrichment status:', error);
-    }
-}
-
-function updateiTunesEnrichmentStatusFromData(data) {
-    const button = document.getElementById('itunes-enrich-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const tooltipStatus = document.getElementById('itunes-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('itunes-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('itunes-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
-        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        const artists = data.progress.artists || {};
-        const albums = data.progress.albums || {};
-        const tracks = data.progress.tracks || {};
-
-        const currentType = data.current_item?.type || '';
-        let progressText = '';
-
-        const artistsComplete = artists.matched >= artists.total;
-        const albumsComplete = albums.matched >= albums.total;
-
-        if (currentType === 'artist') {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        } else if (currentType.includes('album')) {
-            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-        } else if (currentType.includes('track')) {
-            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-        } else if (!artistsComplete) {
-            progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-        } else if (!albumsComplete) {
-            progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-        } else {
-            progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-        }
-
-        tooltipProgress.textContent = progressText;
-    }
-}
-
-async function toggleiTunesEnrichment() {
-    try {
-        const button = document.getElementById('itunes-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/itunes-enrichment/pause' : '/api/itunes-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} iTunes enrichment`);
-        }
-
-        await updateiTunesEnrichmentStatus();
-        console.log(`iTunes enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling iTunes enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-// Initialize iTunes Enrichment UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('itunes-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleiTunesEnrichment);
-            updateiTunesEnrichmentStatus();
-            setInterval(updateiTunesEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('itunes-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleiTunesEnrichment);
-        updateiTunesEnrichmentStatus();
-        setInterval(updateiTunesEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// LAST.FM ENRICHMENT STATUS
-// ===================================================================
-
-async function updateLastFMEnrichmentStatus() {
-    if (socketConnected) return;
-    if (document.hidden) return;
-    try {
-        const response = await fetch('/api/lastfm-enrichment/status');
-        if (!response.ok) { console.warn('Last.fm status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateLastFMEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Last.fm status:', error);
-    }
-}
-
-function updateLastFMEnrichmentStatusFromData(data) {
-    const button = document.getElementById('lastfm-enrich-button');
-    if (!button) return;
-
-    const notAuthenticated = data.authenticated === false;
-
-    button.classList.remove('active', 'paused', 'complete', 'no-auth');
-    if (data.paused) {
-        button.classList.add('paused');
-    } else if (notAuthenticated) {
-        button.classList.add('no-auth');
-    } else if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('lastfm-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('lastfm-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('lastfm-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
-        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
-        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running) { tooltipStatus.textContent = 'Running'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.paused) {
-            tooltipCurrent.textContent = notAuthenticated ? 'Add Last.fm API key in Settings to enrich' : 'Click to resume';
-        } else if (notAuthenticated) {
-            tooltipCurrent.textContent = 'Add Last.fm API key in Settings to enrich';
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        if (notAuthenticated) {
-            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
-        } else {
-            const artists = data.progress.artists || {};
-            const albums = data.progress.albums || {};
-            const tracks = data.progress.tracks || {};
-
-            const currentType = data.current_item?.type;
-            let progressText = '';
-
-            const artistsComplete = artists.matched >= artists.total;
-            const albumsComplete = albums.matched >= albums.total;
-
-            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else if (currentType === 'album' || (artistsComplete && !albumsComplete)) {
-                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-            } else if (currentType === 'track' || (artistsComplete && albumsComplete)) {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            } else {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            }
-
-            tooltipProgress.textContent = progressText;
-        }
-    }
-}
-
-async function toggleLastFMEnrichment() {
-    try {
-        const button = document.getElementById('lastfm-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/lastfm-enrichment/pause' : '/api/lastfm-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Last.fm enrichment`);
-        }
-
-        await updateLastFMEnrichmentStatus();
-        console.log(`Last.fm enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Last.fm enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('lastfm-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleLastFMEnrichment);
-            updateLastFMEnrichmentStatus();
-            setInterval(updateLastFMEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('lastfm-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleLastFMEnrichment);
-        updateLastFMEnrichmentStatus();
-        setInterval(updateLastFMEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// GENIUS ENRICHMENT STATUS
-// ===================================================================
-
-async function updateGeniusEnrichmentStatus() {
-    if (socketConnected) return;
-    if (document.hidden) return;
-    try {
-        const response = await fetch('/api/genius-enrichment/status');
-        if (!response.ok) { console.warn('Genius status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateGeniusEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Genius status:', error);
-    }
-}
-
-function updateGeniusEnrichmentStatusFromData(data) {
-    const button = document.getElementById('genius-enrich-button');
-    if (!button) return;
-
-    const notAuthenticated = data.authenticated === false;
-
-    button.classList.remove('active', 'paused', 'complete', 'no-auth');
-    if (data.paused) {
-        button.classList.add('paused');
-    } else if (notAuthenticated) {
-        button.classList.add('no-auth');
-    } else if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('genius-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('genius-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('genius-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
-        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
-        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running) { tooltipStatus.textContent = 'Running'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.paused) {
-            tooltipCurrent.textContent = notAuthenticated ? 'Add Genius access token in Settings to enrich' : 'Click to resume';
-        } else if (notAuthenticated) {
-            tooltipCurrent.textContent = 'Add Genius access token in Settings to enrich';
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        if (notAuthenticated) {
-            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
-        } else {
-            const artists = data.progress.artists || {};
-            const tracks = data.progress.tracks || {};
-
-            const currentType = data.current_item?.type;
-            let progressText = '';
-
-            const artistsComplete = artists.matched >= artists.total;
-
-            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            }
-
-            tooltipProgress.textContent = progressText;
-        }
-    }
-}
-
-async function toggleGeniusEnrichment() {
-    try {
-        const button = document.getElementById('genius-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/genius-enrichment/pause' : '/api/genius-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Genius enrichment`);
-        }
-
-        await updateGeniusEnrichmentStatus();
-        console.log(`Genius enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Genius enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('genius-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleGeniusEnrichment);
-            updateGeniusEnrichmentStatus();
-            setInterval(updateGeniusEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('genius-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleGeniusEnrichment);
-        updateGeniusEnrichmentStatus();
-        setInterval(updateGeniusEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// TIDAL ENRICHMENT WORKER
-// ===================================================================
-
-async function updateTidalEnrichmentStatus() {
-    if (socketConnected) return;
-    if (document.hidden) return;
-    try {
-        const response = await fetch('/api/tidal-enrichment/status');
-        if (!response.ok) { console.warn('Tidal status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateTidalEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Tidal status:', error);
-    }
-}
-
-function updateTidalEnrichmentStatusFromData(data) {
-    const button = document.getElementById('tidal-enrich-button');
-    if (!button) return;
-
-    const notAuthenticated = data.authenticated === false;
-
-    button.classList.remove('active', 'paused', 'complete', 'no-auth');
-    if (data.paused) {
-        button.classList.add('paused');
-    } else if (notAuthenticated) {
-        button.classList.add('no-auth');
-    } else if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('tidal-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('tidal-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('tidal-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
-        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
-        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running) { tooltipStatus.textContent = 'Running'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.paused) {
-            tooltipCurrent.textContent = notAuthenticated ? 'Connect Tidal in Settings to enrich' : 'Click to resume';
-        } else if (notAuthenticated) {
-            tooltipCurrent.textContent = 'Connect Tidal in Settings to enrich';
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        if (notAuthenticated) {
-            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
-        } else {
-            const artists = data.progress.artists || {};
-            const albums = data.progress.albums || {};
-            const tracks = data.progress.tracks || {};
-
-            const currentType = data.current_item?.type;
-            let progressText = '';
-
-            const artistsComplete = artists.matched >= artists.total;
-            const albumsComplete = albums.matched >= albums.total;
-
-            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
-                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-            } else {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            }
-
-            tooltipProgress.textContent = progressText;
-        }
-    }
-}
-
-async function toggleTidalEnrichment() {
-    try {
-        const button = document.getElementById('tidal-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/tidal-enrichment/pause' : '/api/tidal-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Tidal enrichment`);
-        }
-
-        await updateTidalEnrichmentStatus();
-        console.log(`Tidal enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Tidal enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('tidal-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleTidalEnrichment);
-            updateTidalEnrichmentStatus();
-            setInterval(updateTidalEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('tidal-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleTidalEnrichment);
-        updateTidalEnrichmentStatus();
-        setInterval(updateTidalEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// QOBUZ ENRICHMENT WORKER
-// ===================================================================
-
-async function updateQobuzEnrichmentStatus() {
-    if (socketConnected) return;
-    if (document.hidden) return;
-    try {
-        const response = await fetch('/api/qobuz-enrichment/status');
-        if (!response.ok) { console.warn('Qobuz status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateQobuzEnrichmentStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating Qobuz status:', error);
-    }
-}
-
-function updateQobuzEnrichmentStatusFromData(data) {
-    const button = document.getElementById('qobuz-enrich-button');
-    if (!button) return;
-
-    const notAuthenticated = data.authenticated === false;
-
-    button.classList.remove('active', 'paused', 'complete', 'no-auth');
-    if (data.paused) {
-        button.classList.add('paused');
-    } else if (notAuthenticated) {
-        button.classList.add('no-auth');
-    } else if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('qobuz-enrich-tooltip-status');
-    const tooltipCurrent = document.getElementById('qobuz-enrich-tooltip-current');
-    const tooltipProgress = document.getElementById('qobuz-enrich-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.paused) { tooltipStatus.textContent = 'Paused'; }
-        else if (notAuthenticated) { tooltipStatus.textContent = 'Not Authenticated'; }
-        else if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running) { tooltipStatus.textContent = 'Running'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.paused) {
-            tooltipCurrent.textContent = notAuthenticated ? 'Connect Qobuz in Settings to enrich' : 'Click to resume';
-        } else if (notAuthenticated) {
-            tooltipCurrent.textContent = 'Connect Qobuz in Settings to enrich';
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All items processed';
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Now: ${data.current_item.name}`;
-        }
-    }
-
-    if (data.progress && tooltipProgress) {
-        if (notAuthenticated) {
-            tooltipProgress.textContent = `Pending: ${data.stats?.pending || 0} items`;
-        } else {
-            const artists = data.progress.artists || {};
-            const albums = data.progress.albums || {};
-            const tracks = data.progress.tracks || {};
-
-            const currentType = data.current_item?.type;
-            let progressText = '';
-
-            const artistsComplete = artists.matched >= artists.total;
-            const albumsComplete = albums.matched >= albums.total;
-
-            if (currentType === 'artist' || (!artistsComplete && !currentType)) {
-                progressText = `Artists: ${artists.matched || 0} / ${artists.total || 0} (${artists.percent || 0}%)`;
-            } else if (currentType === 'album' || (!albumsComplete && !currentType)) {
-                progressText = `Albums: ${albums.matched || 0} / ${albums.total || 0} (${albums.percent || 0}%)`;
-            } else {
-                progressText = `Tracks: ${tracks.matched || 0} / ${tracks.total || 0} (${tracks.percent || 0}%)`;
-            }
-
-            tooltipProgress.textContent = progressText;
-        }
-    }
-}
-
-async function toggleQobuzEnrichment() {
-    try {
-        const button = document.getElementById('qobuz-enrich-button');
-        if (!button) return;
-
-        const isRunning = button.classList.contains('active');
-        const endpoint = isRunning ? '/api/qobuz-enrichment/pause' : '/api/qobuz-enrichment/resume';
-
-        const response = await fetch(endpoint, { method: 'POST' });
-        if (!response.ok) {
-            throw new Error(`Failed to ${isRunning ? 'pause' : 'resume'} Qobuz enrichment`);
-        }
-
-        await updateQobuzEnrichmentStatus();
-        console.log(`Qobuz enrichment ${isRunning ? 'paused' : 'resumed'}`);
-
-    } catch (error) {
-        console.error('Error toggling Qobuz enrichment:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    }
-}
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('qobuz-enrich-button');
-        if (button) {
-            button.addEventListener('click', toggleQobuzEnrichment);
-            updateQobuzEnrichmentStatus();
-            setInterval(updateQobuzEnrichmentStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('qobuz-enrich-button');
-    if (button) {
-        button.addEventListener('click', toggleQobuzEnrichment);
-        updateQobuzEnrichmentStatus();
-        setInterval(updateQobuzEnrichmentStatus, 2000);
-    }
-}
-
-// ===================================================================
-// HYDRABASE P2P MIRROR WORKER
-// ===================================================================
-
-async function updateHydrabaseStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/hydrabase-worker/status');
-        if (!response.ok) return;
-        const data = await response.json();
-        updateHydrabaseStatusFromData(data);
-    } catch (error) {
-        // Silently ignore — worker may not be available
-    }
-}
-
-function updateHydrabaseStatusFromData(data) {
-    const button = document.getElementById('hydrabase-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused');
-    if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const statusEl = document.getElementById('hydrabase-tooltip-status');
-    if (statusEl) {
-        if (data.paused) {
-            statusEl.textContent = 'Paused';
-            statusEl.style.color = '#ffc107';
-        } else if (data.running) {
-            statusEl.textContent = 'Active';
-            statusEl.style.color = '#ffffff';
-        } else {
-            statusEl.textContent = 'Stopped';
-            statusEl.style.color = '#ff5252';
-        }
-    }
-}
-
-async function toggleHydrabaseWorker() {
-    const button = document.getElementById('hydrabase-button');
-    if (!button) return;
-    const isRunning = button.classList.contains('active');
-    const endpoint = isRunning ? '/api/hydrabase-worker/pause' : '/api/hydrabase-worker/resume';
-    try {
-        await fetch(endpoint, { method: 'POST' });
-        await updateHydrabaseStatus();
-    } catch (error) {
-        console.error('Error toggling Hydrabase worker:', error);
-    }
-}
-
-// Initialize Hydrabase UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('hydrabase-button');
-        if (button) {
-            button.addEventListener('click', toggleHydrabaseWorker);
-            updateHydrabaseStatus();
-            setInterval(updateHydrabaseStatus, 2000);
-        }
-    });
-} else {
-    const button = document.getElementById('hydrabase-button');
-    if (button) {
-        button.addEventListener('click', toggleHydrabaseWorker);
-        updateHydrabaseStatus();
-        setInterval(updateHydrabaseStatus, 2000);
-    }
-}
-
-// ===================================================================
-// LIBRARY REPAIR WORKER
-// ===================================================================
-
-async function updateRepairStatus() {
-    if (socketConnected) return; // WebSocket handles this
-    if (document.hidden) return; // Skip polling when tab is not visible
-    try {
-        const response = await fetch('/api/repair/status');
-        if (!response.ok) { console.warn('Repair status endpoint unavailable'); return; }
-        const data = await response.json();
-        updateRepairStatusFromData(data);
-    } catch (error) {
-        console.error('Error updating repair status:', error);
-    }
-}
-
-function updateRepairStatusFromData(data) {
-    const button = document.getElementById('repair-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'paused', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    } else if (data.paused) {
-        button.classList.add('paused');
-    }
-
-    const tooltipStatus = document.getElementById('repair-tooltip-status');
-    const tooltipCurrent = document.getElementById('repair-tooltip-current');
-    const tooltipProgress = document.getElementById('repair-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) { tooltipStatus.textContent = 'Complete'; }
-        else if (data.running && !data.paused) { tooltipStatus.textContent = 'Running'; }
-        else if (data.paused) { tooltipStatus.textContent = data.yield_reason === 'downloads' ? 'Yielding for downloads' : 'Paused'; }
-        else { tooltipStatus.textContent = 'Idle'; }
-    }
-
-    if (tooltipCurrent) {
-        if (data.idle) {
-            tooltipCurrent.textContent = 'All jobs complete — waiting for next schedule';
-        } else if (data.current_job && data.current_job.display_name) {
-            const jobName = data.current_job.display_name;
-            const jobProgress = data.progress && data.progress.current_job;
-            if (jobProgress && jobProgress.total > 0) {
-                tooltipCurrent.textContent = `${jobName}: ${jobProgress.scanned} / ${jobProgress.total} (${jobProgress.percent}%)`;
-            } else {
-                tooltipCurrent.textContent = `Running: ${jobName}`;
-            }
-        } else if (data.current_item && data.current_item.name) {
-            tooltipCurrent.textContent = `Running: ${data.current_item.name}`;
-        } else {
-            tooltipCurrent.textContent = 'No active repairs';
-        }
-    }
-
-    if (tooltipProgress && data.progress) {
-        const tracks = data.progress.tracks || {};
-        const parts = [];
-        if (tracks.total > 0) parts.push(`Checked: ${tracks.checked || 0} / ${tracks.total || 0}`);
-        if (tracks.repaired > 0) parts.push(`Repaired: ${tracks.repaired}`);
-        const pending = data.findings_pending || 0;
-        if (pending > 0) parts.push(`Findings: ${pending}`);
-        tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
-    }
-
-    // Update findings badge
-    const badge = document.getElementById('repair-findings-badge');
-    const findingsPending = data.findings_pending || 0;
-    if (badge) {
-        badge.textContent = findingsPending;
-        badge.style.display = findingsPending > 0 ? '' : 'none';
-    }
-    const tabBadge = document.getElementById('repair-findings-tab-badge');
-    if (tabBadge) {
-        tabBadge.textContent = findingsPending;
-        tabBadge.style.display = findingsPending > 0 ? '' : 'none';
-    }
-
-    // Update master toggle in modal if open
-    const masterToggle = document.getElementById('repair-master-toggle');
-    const masterLabel = document.getElementById('repair-master-label');
-    if (masterToggle) masterToggle.checked = data.enabled || false;
-    if (masterLabel) masterLabel.textContent = data.enabled ? 'Enabled' : 'Disabled';
-
-    // Update button state
-    if (!data.enabled) {
-        button.classList.add('paused');
-        button.classList.remove('active', 'complete');
-    }
-}
-
-// ── SoulID Worker Status ──
-
-function updateSoulIDStatusFromData(data) {
-    const button = document.getElementById('soulid-button');
-    if (!button) return;
-
-    button.classList.remove('active', 'complete');
-    if (data.idle) {
-        button.classList.add('complete');
-    } else if (data.running && !data.paused) {
-        button.classList.add('active');
-    }
-
-    const tooltipStatus = document.getElementById('soulid-tooltip-status');
-    const tooltipCurrent = document.getElementById('soulid-tooltip-current');
-    const tooltipProgress = document.getElementById('soulid-tooltip-progress');
-
-    if (tooltipStatus) {
-        if (data.idle) tooltipStatus.textContent = 'Complete';
-        else if (data.running && !data.paused) tooltipStatus.textContent = 'Running';
-        else if (data.paused) tooltipStatus.textContent = 'Paused';
-        else tooltipStatus.textContent = 'Idle';
-    }
-
-    if (tooltipCurrent) {
-        if (data.current_item) {
-            tooltipCurrent.textContent = data.current_item;
-        } else if (data.idle) {
-            tooltipCurrent.textContent = 'All entities have soul IDs';
-        } else {
-            tooltipCurrent.textContent = 'No items processing';
-        }
-    }
-
-    if (tooltipProgress && data.stats) {
-        const s = data.stats;
-        const parts = [];
-        if (s.artists_processed) parts.push(`Artists: ${s.artists_processed}`);
-        if (s.albums_processed) parts.push(`Albums: ${s.albums_processed}`);
-        if (s.tracks_processed) parts.push(`Tracks: ${s.tracks_processed}`);
-        if (s.pending > 0) parts.push(`Pending: ${s.pending}`);
-        tooltipProgress.textContent = parts.length ? parts.join(' · ') : 'No items processed yet';
-    }
-}
-
-// ── Repair Modal State ──
-let _repairCurrentTab = 'jobs';
-let _repairFindingsPage = 0;
-let _repairSelectedFindings = new Set();
-let _repairFindingsTotal = 0;
-const REPAIR_FINDINGS_PAGE_SIZE = 30;
-let _repairJobsCache = {}; // Cache job data for help modal
-
-/**
- * Open the Library Maintenance modal
- */
-async function openRepairModal() {
-    navigateToPage('tools');
-    // Scroll to maintenance section
-    setTimeout(() => {
-        const section = document.querySelector('.tools-maintenance-section');
-        if (section) section.scrollIntoView({ behavior: 'smooth' });
-    }, 100);
-    _repairCurrentTab = 'jobs';
-    switchRepairTab('jobs');
-    // Load master toggle state
-    updateRepairStatus();
-    // Load any active job progress
-    try {
-        const resp = await fetch('/api/repair/progress');
-        if (resp.ok) {
-            const data = await resp.json();
-            if (Object.keys(data).length > 0) {
-                // Brief delay so job cards are rendered first
-                setTimeout(() => updateRepairJobProgressFromData(data), 300);
-            }
-        }
-    } catch (e) { /* ignore */ }
-}
-
-function closeRepairModal() {
-    // No-op — repair content now lives on the tools page, no modal to close
-}
-
-async function toggleRepairMaster() {
-    try {
-        const response = await fetch('/api/repair/toggle', { method: 'POST' });
-        if (!response.ok) throw new Error('Failed to toggle');
-        const data = await response.json();
-        const label = document.getElementById('repair-master-label');
-        const toggle = document.getElementById('repair-master-toggle');
-        if (label) label.textContent = data.enabled ? 'Enabled' : 'Disabled';
-        if (toggle) toggle.checked = data.enabled;
-        await updateRepairStatus();
-    } catch (error) {
-        console.error('Error toggling repair master:', error);
-        showToast('Error toggling maintenance worker', 'error');
-    }
-}
-
-function switchRepairTab(tab) {
-    _repairCurrentTab = tab;
-    document.querySelectorAll('.repair-tab').forEach(t => {
-        t.classList.toggle('active', t.dataset.tab === tab);
-    });
-    document.querySelectorAll('.repair-tab-content').forEach(c => {
-        c.style.display = 'none';
-    });
-    const content = document.getElementById(`repair-tab-${tab}`);
-    if (content) content.style.display = '';
-
-    if (tab === 'jobs') loadRepairJobs();
-    else if (tab === 'findings') { loadRepairFindingsDashboard(); loadRepairFindings(); }
-    else if (tab === 'history') loadRepairHistory();
-}
-
-// Turn a snake_case setting key into a human label. Handles acronym fix-ups
-// (EP, ID, URL, MB, AC, OS) that the naive Title-Case would otherwise botch.
-function _prettifyRepairSettingKey(key) {
-    const words = key.replace(/^_+/, '').split('_');
-    const acronyms = { 'eps': 'EPs', 'id': 'ID', 'url': 'URL', 'mb': 'MB',
-                       'ac': 'AC', 'os': 'OS', 'api': 'API', 'mp3': 'MP3',
-                       'flac': 'FLAC', 'cd': 'CD' };
-    return words.map(w => acronyms[w.toLowerCase()] || (w.charAt(0).toUpperCase() + w.slice(1))).join(' ');
-}
-
-async function loadRepairJobs() {
-    const container = document.getElementById('repair-jobs-list');
-    if (!container) return;
-
-    try {
-        const response = await fetch('/api/repair/jobs');
-        if (!response.ok) throw new Error('Failed to fetch jobs');
-        const data = await response.json();
-        const jobs = data.jobs || [];
-
-        // Cache job data for help modal
-        _repairJobsCache = {};
-        jobs.forEach(j => { _repairJobsCache[j.job_id] = j; });
-
-        if (jobs.length === 0) {
-            container.innerHTML = `<div class="repair-empty-state">
-                <div class="repair-empty-icon">🔧</div>
-                <div class="repair-empty-title">No Maintenance Jobs</div>
-                <div class="repair-empty-text">Library maintenance jobs will appear here once available.</div>
-            </div>`;
-            return;
-        }
-
-        // Populate findings job filter dropdown
-        const jobFilter = document.getElementById('repair-findings-job-filter');
-        if (jobFilter && jobFilter.options.length <= 1) {
-            jobs.forEach(job => {
-                const opt = document.createElement('option');
-                opt.value = job.job_id;
-                opt.textContent = job.display_name;
-                jobFilter.appendChild(opt);
-            });
-        }
-
-        container.innerHTML = jobs.map(job => {
-            const lastRunText = job.last_run ? formatCacheAge(job.last_run.finished_at) : 'Never';
-            const nextRunText = job.next_run ? formatCacheAge(job.next_run) : (job.enabled ? 'Pending' : '-');
-            const statusClass = job.is_running ? 'running' : (job.enabled ? 'idle' : 'disabled');
-            const dotClass = job.is_running ? 'running' : (job.enabled ? 'enabled' : 'disabled');
-            const cardClass = job.is_running ? 'running' : (!job.enabled ? 'disabled' : '');
-
-            // Build flow badges
-            const flowParts = [];
-            flowParts.push(`<span class="repair-flow-badge scan">${job.is_running ? '&#9654; Running' : 'Scan'}</span>`);
-            if (job.auto_fix) {
-                flowParts.push('<span class="repair-flow-arrow">&rarr;</span>');
-                const isDryRun = job.settings && job.settings.dry_run === true;
-                if (isDryRun) {
-                    flowParts.push('<span class="repair-flow-badge dryrun">Dry Run</span>');
-                } else {
-                    flowParts.push('<span class="repair-flow-badge autofix">Auto-fix</span>');
-                }
-            }
-            // Show pending findings count
-            const findingsCount = job.last_run ? (job.last_run.findings_created || 0) : 0;
-            if (findingsCount > 0) {
-                flowParts.push('<span class="repair-flow-arrow">&rarr;</span>');
-                flowParts.push(`<span class="repair-flow-badge findings">${findingsCount} finding${findingsCount !== 1 ? 's' : ''}</span>`);
-            }
-
-            // Build meta parts
-            const metaParts = [];
-            metaParts.push('Last: ' + lastRunText);
-            metaParts.push('Next: ' + nextRunText);
-            if (job.last_run) {
-                metaParts.push(`Scanned: ${(job.last_run.items_scanned || 0).toLocaleString()}`);
-                if (job.last_run.auto_fixed) metaParts.push(`Fixed: ${job.last_run.auto_fixed}`);
-            }
-            if (job.last_run && job.last_run.duration_seconds) {
-                metaParts.push(`${job.last_run.duration_seconds.toFixed(1)}s`);
-            }
-
-            // Build settings HTML
-            let settingsHtml = '';
-            if (job.settings && Object.keys(job.settings).length > 0) {
-                const settingsRows = Object.entries(job.settings).map(([key, val]) => {
-                    // Section header: keys starting with `_section_` render as a
-                    // group divider + title instead of a setting row. The value
-                    // is the human-readable title.
-                    if (key.startsWith('_section_')) {
-                        return `<div class="repair-setting-section">${val}</div>`;
-                    }
-                    const label = _prettifyRepairSettingKey(key);
-                    const inputType = typeof val === 'boolean' ? 'checkbox' :
-                        typeof val === 'number' ? 'number' : 'text';
-                    const inputVal = inputType === 'checkbox' ?
-                        (val ? ' checked' : '') :
-                        ` value="${val}"`;
-                    return `<div class="repair-setting-row">
-                        <label>${label}</label>
-                        <input type="${inputType}" class="repair-setting-input"
-                               data-job="${job.job_id}" data-key="${key}"${inputVal}
-                               ${inputType === 'number' ? 'step="0.01" min="0"' : ''}>
-                    </div>`;
-                }).join('');
-
-                settingsHtml = `
-                    <div class="repair-job-settings" id="repair-settings-${job.job_id}" style="display:none;">
-                        <div class="repair-setting-row">
-                            <label>Interval (hours)</label>
-                            <input type="number" class="repair-setting-input"
-                                   data-job="${job.job_id}" data-key="_interval_hours"
-                                   value="${job.interval_hours}" min="1" step="1">
-                        </div>
-                        ${settingsRows}
-                        <button class="repair-save-settings-btn" onclick="saveRepairJobSettings('${job.job_id}')">Save Settings</button>
-                    </div>`;
-            }
-
-            return `<div class="repair-job-card ${cardClass}" data-job-id="${job.job_id}">
-                <div class="repair-job-main">
-                    <div class="repair-job-status ${dotClass}"></div>
-                    <div class="repair-job-info">
-                        <div class="repair-job-name">${job.display_name}</div>
-                        <div class="repair-job-desc">${job.description || ''}</div>
-                        <div class="repair-job-flow">${flowParts.join('')}</div>
-                        <div class="repair-job-meta">${metaParts.join(' &middot; ')}</div>
-                    </div>
-                    <div class="repair-job-actions">
-                        <label class="repair-job-toggle">
-                            <input type="checkbox" ${job.enabled ? 'checked' : ''}
-                                   onchange="toggleRepairJob('${job.job_id}', this.checked)">
-                            <span class="repair-toggle-slider small"></span>
-                        </label>
-                        <button class="repair-run-btn" onclick="runRepairJobNow('${job.job_id}')"
-                                title="Run now">&#9654;</button>
-                        ${Object.keys(job.settings || {}).length > 0 ?
-                    `<button class="repair-settings-btn" onclick="expandRepairJobSettings('${job.job_id}')"
-                                     title="Settings">&#9881;</button>` : ''}
-                        <button class="repair-help-btn" onclick="event.stopPropagation(); showRepairJobHelp('${job.job_id}')"
-                                title="About this job">?</button>
-                    </div>
-                </div>
-                ${settingsHtml}
-            </div>`;
-        }).join('');
-
-    } catch (error) {
-        console.error('Error loading repair jobs:', error);
-        container.innerHTML = '<div class="repair-empty">Error loading jobs</div>';
-    }
-}
-
-async function toggleRepairJob(jobId, enabled) {
-    try {
-        await fetch(`/api/repair/jobs/${jobId}/toggle`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ enabled })
-        });
-        // Update card visuals immediately
-        const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
-        if (card) {
-            card.classList.toggle('disabled', !enabled);
-            const dot = card.querySelector('.repair-job-status');
-            if (dot) dot.className = 'repair-job-status ' + (enabled ? 'enabled' : 'disabled');
-        }
-    } catch (error) {
-        console.error('Error toggling job:', error);
-        showToast('Error toggling job', 'error');
-    }
-}
-
-function expandRepairJobSettings(jobId) {
-    const el = document.getElementById(`repair-settings-${jobId}`);
-    if (el) el.style.display = el.style.display === 'none' ? '' : 'none';
-}
-
-function showRepairJobHelp(jobId) {
-    const job = _repairJobsCache[jobId];
-    if (!job) return;
-
-    // Remove existing overlay if present
-    let overlay = document.getElementById('repair-help-overlay');
-    if (overlay) overlay.remove();
-
-    // Build settings summary (skip `_section_` group-header sentinels)
-    let settingsHtml = '';
-    if (job.settings && Object.keys(job.settings).length > 0) {
-        const rows = Object.entries(job.settings)
-            .filter(([key]) => !key.startsWith('_section_'))
-            .map(([key, val]) => {
-                const label = _prettifyRepairSettingKey(key);
-                const display = typeof val === 'boolean' ? (val ? 'Yes' : 'No') : val;
-                return `<div class="repair-help-setting"><span class="repair-help-setting-key">${label}</span><span class="repair-help-setting-val">${display}</span></div>`;
-            }).join('');
-        settingsHtml = `<div class="repair-help-settings-section">
-            <div class="repair-help-section-title">Current Settings</div>
-            ${rows}
-        </div>`;
-    }
-
-    // Build info badges
-    const badges = [];
-    if (job.auto_fix) {
-        const isDryRun = job.settings && job.settings.dry_run === true;
-        badges.push(isDryRun
-            ? '<span class="repair-flow-badge dryrun">Dry Run</span>'
-            : '<span class="repair-flow-badge autofix">Auto-fix</span>');
-    } else {
-        badges.push('<span class="repair-flow-badge scan">Scan Only</span>');
-    }
-    badges.push(`<span class="repair-flow-badge scan">Every ${job.interval_hours}h</span>`);
-    if (job.enabled) {
-        badges.push('<span class="repair-flow-badge" style="background:rgba(74,222,128,0.12);color:#4ade80;">Enabled</span>');
-    } else {
-        badges.push('<span class="repair-flow-badge" style="background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.4);">Disabled</span>');
-    }
-
-    // Format help text paragraphs
-    const helpBody = (job.help_text || job.description || '').split('\n\n').map(p => {
-        if (p.startsWith('Settings:\n')) {
-            const lines = p.split('\n').slice(1);
-            return '<div class="repair-help-setting-list">' +
-                lines.map(l => `<div class="repair-help-setting-item">${l.replace(/^- /, '')}</div>`).join('') +
-                '</div>';
-        }
-        return `<p>${p.replace(/\n/g, '<br>')}</p>`;
-    }).join('');
-
-    overlay = document.createElement('div');
-    overlay.id = 'repair-help-overlay';
-    overlay.className = 'repair-help-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-    overlay.innerHTML = `
-        <div class="repair-help-modal">
-            <div class="repair-help-header">
-                <h3>${job.display_name}</h3>
-                <button class="repair-help-close" onclick="document.getElementById('repair-help-overlay').remove()">&times;</button>
-            </div>
-            <div class="repair-help-badges">${badges.join('')}</div>
-            <div class="repair-help-body">${helpBody}</div>
-            ${settingsHtml}
-        </div>
-    `;
-    document.body.appendChild(overlay);
-}
-
-async function saveRepairJobSettings(jobId) {
-    try {
-        const inputs = document.querySelectorAll(`.repair-setting-input[data-job="${jobId}"]`);
-        let intervalHours = null;
-        const settings = {};
-
-        inputs.forEach(input => {
-            const key = input.dataset.key;
-            if (key === '_interval_hours') {
-                intervalHours = parseInt(input.value) || 24;
-            } else {
-                if (input.type === 'checkbox') settings[key] = input.checked;
-                else if (input.type === 'number') settings[key] = parseFloat(input.value);
-                else settings[key] = input.value;
-            }
-        });
-
-        await fetch(`/api/repair/jobs/${jobId}/settings`, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ interval_hours: intervalHours, settings })
-        });
-
-        showToast('Settings saved', 'success');
-    } catch (error) {
-        console.error('Error saving job settings:', error);
-        showToast('Error saving settings', 'error');
-    }
-}
-
-async function runRepairJobNow(jobId) {
-    try {
-        await fetch(`/api/repair/jobs/${jobId}/run`, { method: 'POST' });
-        showToast('Job started', 'success');
-        setTimeout(() => loadRepairJobs(), 1000);
-    } catch (error) {
-        console.error('Error running job:', error);
-        showToast('Error starting job', 'error');
-    }
-}
-
-// ── Repair Job Live Progress ──
-const _repairProgressLogCounts = {};
-const _repairProgressHideTimers = {};
-
-function updateRepairJobProgressFromData(data) {
-    for (const [jobId, state] of Object.entries(data)) {
-        const card = document.querySelector(`.repair-job-card[data-job-id="${jobId}"]`);
-        if (!card) continue;
-
-        // Update status dot
-        const statusDot = card.querySelector('.repair-job-status');
-        if (statusDot) {
-            if (state.status === 'running') statusDot.className = 'repair-job-status running';
-            else if (state.status === 'finished') statusDot.className = 'repair-job-status enabled';
-            else if (state.status === 'error') statusDot.className = 'repair-job-status enabled';
-        }
-
-        // Update flow badge to show running state
-        const firstBadge = card.querySelector('.repair-flow-badge.scan');
-        if (firstBadge) {
-            if (state.status === 'running') firstBadge.innerHTML = '&#9654; Running';
-            else if (state.status === 'finished') firstBadge.innerHTML = '&#10003; Complete';
-            else if (state.status === 'error') firstBadge.innerHTML = '&#10007; Error';
-        }
-
-        // Add/update card running class
-        card.classList.toggle('running', state.status === 'running');
-        card.classList.remove('disabled');
-
-        // Create or find progress panel (bar-first layout like automation)
-        let panel = card.querySelector('.repair-job-progress');
-        if (!panel) {
-            panel = document.createElement('div');
-            panel.className = 'repair-job-progress';
-            panel.innerHTML = `
-                <div class="repair-progress-bar-wrap">
-                    <div class="repair-progress-bar" style="width:0%"></div>
-                </div>
-                <div class="repair-progress-phase"></div>
-                <div class="repair-progress-log"></div>
-            `;
-            card.appendChild(panel);
-        }
-
-        // Show panel
-        panel.classList.add('visible');
-        panel.classList.toggle('finished', state.status === 'finished');
-        panel.classList.toggle('error', state.status === 'error');
-
-        if (state.status === 'running') {
-            panel.classList.remove('finished', 'error');
-            if (_repairProgressHideTimers[jobId]) {
-                clearTimeout(_repairProgressHideTimers[jobId]);
-                delete _repairProgressHideTimers[jobId];
-            }
-            // Reset log for re-run
-            if (_repairProgressLogCounts[jobId] > 0 && state.log && state.log.length < _repairProgressLogCounts[jobId]) {
-                const existingLog = panel.querySelector('.repair-progress-log');
-                if (existingLog) existingLog.innerHTML = '';
-                _repairProgressLogCounts[jobId] = 0;
-            }
-        }
-
-        // Update progress bar
-        const bar = panel.querySelector('.repair-progress-bar');
-        if (bar) bar.style.width = (state.progress || 0) + '%';
-
-        // Update phase
-        const phaseEl = panel.querySelector('.repair-progress-phase');
-        if (phaseEl && state.phase) phaseEl.textContent = state.phase;
-
-        // Update log
-        const logEl = panel.querySelector('.repair-progress-log');
-        if (logEl && state.log) {
-            const prevCount = _repairProgressLogCounts[jobId] || 0;
-            if (state.log.length > prevCount) {
-                const newLines = state.log.slice(prevCount);
-                for (const line of newLines) {
-                    const div = document.createElement('div');
-                    div.className = 'repair-log-line ' + (line.type || 'info');
-                    div.textContent = line.text;
-                    logEl.appendChild(div);
-                }
-                logEl.scrollTop = logEl.scrollHeight;
-            }
-            _repairProgressLogCounts[jobId] = state.log.length;
-        }
-
-        // Auto-hide panel after completion
-        if (state.status === 'finished' || state.status === 'error') {
-            if (!_repairProgressHideTimers[jobId]) {
-                _repairProgressHideTimers[jobId] = setTimeout(() => {
-                    panel.classList.remove('visible');
-                    card.classList.remove('running');
-                    delete _repairProgressHideTimers[jobId];
-                    delete _repairProgressLogCounts[jobId];
-                    // Reload to get updated stats
-                    loadRepairJobs();
-                }, 30000);
-            }
-        } else {
-            // Clear any existing hide timer if job restarts
-            if (_repairProgressHideTimers[jobId]) {
-                clearTimeout(_repairProgressHideTimers[jobId]);
-                delete _repairProgressHideTimers[jobId];
-            }
-        }
-    }
-}
-
-async function loadRepairFindingsDashboard() {
-    const dashboard = document.getElementById('repair-findings-dashboard');
-    if (!dashboard) return;
-
-    try {
-        const response = await fetch('/api/repair/findings/counts');
-        if (!response.ok) throw new Error('Failed to fetch counts');
-        const data = await response.json();
-
-        const pending = data.pending || 0;
-        const resolved = data.resolved || 0;
-        const dismissed = data.dismissed || 0;
-        const autoFixed = data.auto_fixed || 0;
-        const byJob = data.by_job || {};
-
-        // Summary stats row
-        let html = '<div class="repair-dashboard-summary">';
-        html += `<div class="repair-dashboard-stat pending">
-            <span class="stat-count">${pending.toLocaleString()}</span> pending
-        </div>`;
-        html += `<div class="repair-dashboard-stat resolved">
-            <span class="stat-count">${resolved.toLocaleString()}</span> resolved
-        </div>`;
-        html += `<div class="repair-dashboard-stat dismissed">
-            <span class="stat-count">${dismissed.toLocaleString()}</span> dismissed
-        </div>`;
-        if (autoFixed > 0) {
-            html += `<div class="repair-dashboard-stat auto-fixed">
-                <span class="stat-count">${autoFixed.toLocaleString()}</span> auto-fixed
-            </div>`;
-        }
-        html += '</div>';
-
-        // Per-job chips (only if there are pending findings)
-        const jobIds = Object.keys(byJob).sort((a, b) => byJob[b].total - byJob[a].total);
-        if (jobIds.length > 0) {
-            html += '<div class="repair-dashboard-jobs">';
-            const jobFilter = document.getElementById('repair-findings-job-filter');
-            const activeJob = jobFilter ? jobFilter.value : '';
-
-            for (const jid of jobIds) {
-                const job = byJob[jid];
-                const isActive = activeJob === jid;
-                const severityDots = [];
-                if (job.warning > 0) severityDots.push(`<span class="repair-dashboard-chip-severity warning" title="${job.warning} warnings"></span>`);
-                if (job.info > 0) severityDots.push(`<span class="repair-dashboard-chip-severity info" title="${job.info} info"></span>`);
-
-                html += `<div class="repair-dashboard-chip ${isActive ? 'active' : ''}" onclick="filterFindingsByJob('${jid}')">
-                    <span class="repair-dashboard-chip-count">${job.total.toLocaleString()}</span>
-                    <span class="repair-dashboard-chip-name">${_escFinding(job.display_name || jid.replace(/_/g, ' '))}</span>
-                    ${severityDots.length ? `<span class="repair-dashboard-chip-bar">${severityDots.join('')}</span>` : ''}
-                </div>`;
-            }
-            html += '</div>';
-        }
-
-        dashboard.innerHTML = html;
-
-        // Load cache health stats
-        _loadCacheHealthStats(dashboard);
-    } catch (error) {
-        console.error('Error loading findings dashboard:', error);
-        dashboard.innerHTML = '';
-    }
-}
-
-async function _loadCacheHealthStats(dashboard) {
-    try {
-        const response = await fetch('/api/repair/cache-health');
-        if (!response.ok) return;
-        const stats = await response.json();
-        if (!stats.total_entities && !stats.total_searches) return;
-
-        const healthScore = stats.junk_entities === 0 && stats.stale_mb_nulls === 0 ? 'healthy' : stats.junk_entities > 50 ? 'poor' : 'fair';
-        const healthLabel = healthScore === 'healthy' ? 'Healthy' : healthScore === 'fair' ? 'Needs Cleanup' : 'Needs Attention';
-
-        // Remove any existing cache-health bar before appending — prevents
-        // stacking when multiple dashboard refreshes race and each resolved
-        // fetch appends its own section.
-        dashboard.querySelectorAll('.repair-cache-health').forEach(el => el.remove());
-
-        const section = document.createElement('div');
-        section.className = 'repair-cache-health';
-        section.innerHTML = `
-            <div class="repair-cache-health-bar" onclick="openCacheHealthModal()">
-                <span class="repair-cache-health-dot ${healthScore}"></span>
-                <span class="repair-cache-health-title">Metadata Cache</span>
-                <span class="repair-cache-health-summary">${stats.total_entities.toLocaleString()} entities · ${healthLabel}</span>
-                <span class="repair-cache-health-action">View Details ›</span>
-            </div>
-        `;
-        dashboard.appendChild(section);
-    } catch (error) {
-        console.error('Error loading cache health:', error);
-    }
-}
-
-async function openCacheHealthModal() {
-    if (document.getElementById('cache-health-modal-overlay')) return;
-
-    const overlay = document.createElement('div');
-    overlay.id = 'cache-health-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="cache-health-modal">
-            <div class="cache-health-header">
-                <div class="cache-health-header-content">
-                    <div class="cache-health-header-icon">&#128202;</div>
-                    <div>
-                        <h2 class="cache-health-title">Cache Health</h2>
-                        <p class="cache-health-subtitle">Metadata cache status across all sources</p>
-                    </div>
-                </div>
-                <button class="watch-all-close" onclick="document.getElementById('cache-health-modal-overlay').remove()">&times;</button>
-            </div>
-            <div class="cache-health-body">
-                <div class="cache-health-loading">
-                    <div class="watch-all-loading-spinner"></div>
-                    <div>Loading cache stats...</div>
-                </div>
-            </div>
-            <div class="cache-health-footer">
-                <button class="watch-all-btn watch-all-btn-cancel" onclick="document.getElementById('cache-health-modal-overlay').remove()">Close</button>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    try {
-        const response = await fetch('/api/repair/cache-health');
-        if (!response.ok) throw new Error('Failed to load');
-        const s = await response.json();
-
-        const body = overlay.querySelector('.cache-health-body');
-        const healthScore = s.junk_entities === 0 && s.stale_mb_nulls === 0 ? 'healthy' : s.junk_entities > 50 ? 'poor' : 'fair';
-        const healthEmoji = healthScore === 'healthy' ? '&#10003;' : healthScore === 'fair' ? '&#9888;' : '&#10060;';
-        const healthLabel = healthScore === 'healthy' ? 'Cache is healthy' : healthScore === 'fair' ? 'Minor issues detected' : 'Cleanup recommended';
-
-        body.innerHTML = `
-            <div class="cache-health-status ${healthScore}">
-                <div class="cache-health-status-icon">${healthEmoji}</div>
-                <div class="cache-health-status-text">${healthLabel}</div>
-            </div>
-
-            <div class="cache-health-cards">
-                <div class="cache-health-card">
-                    <div class="cache-health-card-value">${s.total_entities.toLocaleString()}</div>
-                    <div class="cache-health-card-label">Total Entities</div>
-                </div>
-                <div class="cache-health-card">
-                    <div class="cache-health-card-value">${s.total_searches.toLocaleString()}</div>
-                    <div class="cache-health-card-label">Search Results</div>
-                </div>
-                <div class="cache-health-card">
-                    <div class="cache-health-card-value ${s.junk_entities > 0 ? 'warn' : ''}">${s.junk_entities}</div>
-                    <div class="cache-health-card-label">Junk Entries</div>
-                </div>
-                <div class="cache-health-card ${s.stale_mb_nulls > 0 ? 'clickable' : ''}" ${s.stale_mb_nulls > 0 ? 'onclick="openFailedMBLookupsModal()"' : ''}>
-                    <div class="cache-health-card-value ${s.stale_mb_nulls > 10 ? 'warn' : ''}">${s.stale_mb_nulls}</div>
-                    <div class="cache-health-card-label">Failed MB Lookups</div>
-                    ${s.stale_mb_nulls > 0 ? '<div class="cache-health-card-action">Manage ›</div>' : ''}
-                </div>
-            </div>
-
-            <div class="cache-health-section">
-                <div class="cache-health-section-title">By Source</div>
-                <div class="cache-health-source-bars">
-                    ${(() => {
-                const allSources = { ...(s.by_source || {}) };
-                if (s.total_musicbrainz) allSources['musicbrainz'] = s.total_musicbrainz;
-                const maxCount = Math.max(...Object.values(allSources), 1);
-                return Object.entries(allSources).map(([src, count]) => {
-                    const pct = Math.round(count / maxCount * 100);
-                    const color = src === 'spotify' ? '#1DB954' : src === 'itunes' ? '#FC3C44' : src === 'deezer' ? '#A238FF' : src === 'musicbrainz' ? '#BA478F' : '#666';
-                    return `<div class="cache-health-source-row">
-                                <span class="cache-health-source-name">${src === 'musicbrainz' ? 'MusicBrainz' : src}</span>
-                                <div class="cache-health-source-track"><div class="cache-health-source-fill" style="width:${pct}%;background:${color}"></div></div>
-                                <span class="cache-health-source-count">${count.toLocaleString()}</span>
-                            </div>`;
-                }).join('');
-            })()}
-                </div>
-            </div>
-
-            <div class="cache-health-section">
-                <div class="cache-health-section-title">By Type</div>
-                <div class="cache-health-type-pills">
-                    ${Object.entries(s.by_type || {}).map(([type, count]) => `<span class="cache-health-pill">${type}s <strong>${count.toLocaleString()}</strong></span>`).join('')}
-                </div>
-            </div>
-
-            <div class="cache-health-section">
-                <div class="cache-health-section-title">Metrics</div>
-                <div class="cache-health-metrics">
-                    <div class="cache-health-metric"><span class="cache-health-metric-label">Average Age</span><span class="cache-health-metric-value">${s.avg_age_days} days</span></div>
-                    <div class="cache-health-metric"><span class="cache-health-metric-label">Total Cache Hits</span><span class="cache-health-metric-value">${s.total_access_hits.toLocaleString()}</span></div>
-                    <div class="cache-health-metric"><span class="cache-health-metric-label">Expiring in 24h</span><span class="cache-health-metric-value">${s.expiring_24h}</span></div>
-                    <div class="cache-health-metric"><span class="cache-health-metric-label">Expiring in 7 days</span><span class="cache-health-metric-value">${s.expiring_7d}</span></div>
-                </div>
-            </div>
-        `;
-    } catch (error) {
-        const body = overlay.querySelector('.cache-health-body');
-        body.innerHTML = '<div class="cache-health-loading">Failed to load cache stats</div>';
-    }
-}
-
-// ── Failed MB Lookups Management Modal ──
-let _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
-
-async function openFailedMBLookupsModal() {
-    if (document.getElementById('failed-mb-modal-overlay')) return;
-
-    const overlay = document.createElement('div');
-    overlay.id = 'failed-mb-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    overlay.innerHTML = `
-        <div class="failed-mb-modal">
-            <div class="failed-mb-header">
-                <div>
-                    <h2 class="failed-mb-title">Failed MusicBrainz Lookups</h2>
-                    <p class="failed-mb-subtitle">Tracks, albums, and artists that couldn't be matched automatically</p>
-                </div>
-                <button class="watch-all-close" onclick="document.getElementById('failed-mb-modal-overlay').remove()">&times;</button>
-            </div>
-            <div class="failed-mb-toolbar">
-                <div class="failed-mb-tabs" id="failed-mb-tabs"></div>
-                <div class="failed-mb-search-row">
-                    <input type="text" id="failed-mb-search" class="failed-mb-search-input" placeholder="Filter by name...">
-                    <button class="failed-mb-btn failed-mb-btn-danger" onclick="_failedMBClearAll()">Clear All Failed</button>
-                </div>
-            </div>
-            <div class="failed-mb-body" id="failed-mb-body">
-                <div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Loading...</div></div>
-            </div>
-            <div class="failed-mb-footer" id="failed-mb-footer"></div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Search debounce
-    const searchInput = overlay.querySelector('#failed-mb-search');
-    let searchTimer = null;
-    searchInput.addEventListener('input', () => {
-        clearTimeout(searchTimer);
-        searchTimer = setTimeout(() => {
-            _failedMBState.filter = searchInput.value;
-            _failedMBState.page = 1;
-            _loadFailedMBLookups();
-        }, 300);
-    });
-
-    _failedMBState = { items: [], total: 0, page: 1, filter: '', typeFilter: '', typeCounts: {} };
-    await _loadFailedMBLookups();
-}
-
-async function _loadFailedMBLookups() {
-    const body = document.getElementById('failed-mb-body');
-    if (!body) return;
-
-    // Only fetch type_counts on first load — cache them for tab switches
-    const needCounts = Object.keys(_failedMBState.typeCounts).length === 0;
-    const params = new URLSearchParams({
-        page: _failedMBState.page,
-        limit: 50,
-    });
-    if (needCounts) params.set('counts', 'true');
-    if (_failedMBState.typeFilter) params.set('entity_type', _failedMBState.typeFilter);
-    if (_failedMBState.filter) params.set('search', _failedMBState.filter);
-
-    try {
-        const resp = await fetch(`/api/metadata-cache/failed-mb-lookups?${params}`);
-        if (!resp.ok) throw new Error('Failed to load');
-        const data = await resp.json();
-        _failedMBState.items = data.items;
-        _failedMBState.total = data.total;
-        if (data.type_counts) _failedMBState.typeCounts = data.type_counts;
-
-        // Render type filter tabs
-        const tabsEl = document.getElementById('failed-mb-tabs');
-        if (tabsEl) {
-            const allCount = Object.values(_failedMBState.typeCounts).reduce((a, b) => a + b, 0);
-            let tabsHTML = `<button class="failed-mb-tab ${!_failedMBState.typeFilter ? 'active' : ''}" onclick="_failedMBSetType('')">All (${allCount})</button>`;
-            const typeLabels = { artist: 'Artists', release: 'Albums', recording: 'Tracks' };
-            for (const [type, count] of Object.entries(_failedMBState.typeCounts)) {
-                tabsHTML += `<button class="failed-mb-tab ${_failedMBState.typeFilter === type ? 'active' : ''}" onclick="_failedMBSetType('${type}')">${typeLabels[type] || type} (${count})</button>`;
-            }
-            tabsEl.innerHTML = tabsHTML;
-        }
-
-        // Render items
-        if (data.items.length === 0) {
-            body.innerHTML = `<div class="failed-mb-empty">${_failedMBState.filter ? 'No matches for your search' : 'No failed lookups — cache is clean!'}</div>`;
-        } else {
-            const typeIcons = { artist: '🎤', release: '💿', recording: '🎵' };
-            body.innerHTML = data.items.map(item => `
-                <div class="failed-mb-item" data-id="${item.id}">
-                    <div class="failed-mb-item-icon">${typeIcons[item.entity_type] || '?'}</div>
-                    <div class="failed-mb-item-info">
-                        <div class="failed-mb-item-name">${escapeHtml(item.entity_name)}</div>
-                        ${item.artist_name ? `<div class="failed-mb-item-artist">${escapeHtml(item.artist_name)}</div>` : ''}
-                    </div>
-                    <div class="failed-mb-item-meta">
-                        <span class="failed-mb-item-type">${item.entity_type}</span>
-                        <span class="failed-mb-item-date">${item.last_updated ? new Date(item.last_updated).toLocaleDateString() : ''}</span>
-                    </div>
-                    <div class="failed-mb-item-actions">
-                        <button class="failed-mb-btn-sm failed-mb-btn-primary" onclick="_failedMBSearch(${item.id}, '${item.entity_type}', '${escapeForInlineJs(item.entity_name)}', '${escapeForInlineJs(item.artist_name || '')}')">Search MB</button>
-                        <button class="failed-mb-btn-sm failed-mb-btn-ghost" onclick="_failedMBDelete(${item.id})">Remove</button>
-                    </div>
-                </div>
-            `).join('');
-        }
-
-        // Pagination footer
-        const footer = document.getElementById('failed-mb-footer');
-        if (footer) {
-            const totalPages = Math.ceil(data.total / 50);
-            footer.innerHTML = totalPages > 1 ? `
-                <div class="failed-mb-pagination">
-                    <button class="failed-mb-btn-sm" ${_failedMBState.page <= 1 ? 'disabled' : ''} onclick="_failedMBPage(${_failedMBState.page - 1})">Prev</button>
-                    <span>Page ${_failedMBState.page} of ${totalPages} (${data.total} total)</span>
-                    <button class="failed-mb-btn-sm" ${_failedMBState.page >= totalPages ? 'disabled' : ''} onclick="_failedMBPage(${_failedMBState.page + 1})">Next</button>
-                </div>
-            ` : `<div class="failed-mb-pagination"><span>${data.total} entries</span></div>`;
-        }
-    } catch (err) {
-        body.innerHTML = '<div class="failed-mb-empty">Failed to load data</div>';
-    }
-}
-
-function _failedMBSetType(type) {
-    _failedMBState.typeFilter = type;
-    _failedMBState.page = 1;
-    _loadFailedMBLookups();
-}
-
-function _failedMBPage(page) {
-    _failedMBState.page = page;
-    _loadFailedMBLookups();
-}
-
-async function _failedMBDelete(entryId) {
-    try {
-        const resp = await fetch(`/api/metadata-cache/mb-entry/${entryId}`, { method: 'DELETE' });
-        if (resp.ok) {
-            const row = document.querySelector(`.failed-mb-item[data-id="${entryId}"]`);
-            if (row) {
-                row.style.opacity = '0';
-                setTimeout(() => {
-                    row.remove();
-                    _failedMBState.typeCounts = {};  // Force refresh counts
-                    _loadFailedMBLookups();
-                }, 200);
-            }
-        }
-    } catch (err) {
-        showToast('Failed to delete entry', 'error');
-    }
-}
-
-async function _failedMBClearAll() {
-    if (!confirm(`Clear all ${_failedMBState.total} failed lookups? They will be retried on next enrichment run.`)) return;
-    try {
-        const resp = await fetch('/api/metadata-cache/clear-musicbrainz?failed_only=true', { method: 'DELETE' });
-        const data = await resp.json();
-        if (data.success) {
-            showToast(`Cleared ${data.cleared} failed lookups`, 'success');
-            _failedMBState.page = 1;
-            _failedMBState.typeCounts = {};  // Force refresh counts
-            _loadFailedMBLookups();
-        }
-    } catch (err) {
-        showToast('Failed to clear lookups', 'error');
-    }
-}
-
-// ── MusicBrainz Search Sub-Modal ──
-async function _failedMBSearch(entryId, entityType, entityName, artistName) {
-    // Remove existing search modal if any
-    const existing = document.getElementById('mb-search-modal-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'mb-search-modal-overlay';
-    overlay.className = 'modal-overlay';
-    overlay.style.zIndex = '10001';
-    overlay.onclick = (e) => { if (e.target === overlay) overlay.remove(); };
-
-    const typeLabels = { artist: 'Artist', release: 'Album', recording: 'Track' };
-    overlay.innerHTML = `
-        <div class="mb-search-modal">
-            <div class="mb-search-header">
-                <div>
-                    <h2 class="mb-search-title">Search MusicBrainz</h2>
-                    <p class="mb-search-subtitle">Find a match for: <strong>${escapeHtml(entityName)}</strong>${artistName ? ` by ${escapeHtml(artistName)}` : ''}</p>
-                </div>
-                <button class="watch-all-close" onclick="document.getElementById('mb-search-modal-overlay').remove()">&times;</button>
-            </div>
-            <div class="mb-search-inputs">
-                <div class="mb-search-input-row">
-                    <label>Type</label>
-                    <select id="mb-search-type" class="mb-search-select">
-                        <option value="artist" ${entityType === 'artist' ? 'selected' : ''}>Artist</option>
-                        <option value="release" ${entityType === 'release' ? 'selected' : ''}>Album / Release</option>
-                        <option value="recording" ${entityType === 'recording' ? 'selected' : ''}>Track / Recording</option>
-                    </select>
-                </div>
-                <div class="mb-search-input-row">
-                    <label>Name</label>
-                    <input type="text" id="mb-search-query" class="mb-search-input" value="${escapeHtml(entityName)}">
-                </div>
-                <div class="mb-search-input-row" id="mb-search-artist-row" ${entityType === 'artist' ? 'style="display:none"' : ''}>
-                    <label>Artist</label>
-                    <input type="text" id="mb-search-artist" class="mb-search-input" value="${escapeHtml(artistName)}">
-                </div>
-                <button class="failed-mb-btn failed-mb-btn-primary" id="mb-search-go-btn" onclick="_runMBSearch(${entryId})">Search</button>
-            </div>
-            <div class="mb-search-results" id="mb-search-results">
-                <div class="failed-mb-empty">Enter a search query and click Search</div>
-            </div>
-        </div>
-    `;
-    document.body.appendChild(overlay);
-
-    // Toggle artist row visibility based on type
-    const typeSelect = overlay.querySelector('#mb-search-type');
-    typeSelect.addEventListener('change', () => {
-        const artistRow = overlay.querySelector('#mb-search-artist-row');
-        artistRow.style.display = typeSelect.value === 'artist' ? 'none' : '';
-    });
-
-    // Enter to search
-    overlay.querySelectorAll('.mb-search-input').forEach(input => {
-        input.addEventListener('keydown', (e) => { if (e.key === 'Enter') _runMBSearch(entryId); });
-    });
-
-    // Auto-search on open
-    _runMBSearch(entryId);
-}
-
-async function _runMBSearch(entryId) {
-    const resultsEl = document.getElementById('mb-search-results');
-    const typeEl = document.getElementById('mb-search-type');
-    const queryEl = document.getElementById('mb-search-query');
-    const artistEl = document.getElementById('mb-search-artist');
-    const goBtn = document.getElementById('mb-search-go-btn');
-    if (!resultsEl || !queryEl) return;
-
-    const type = typeEl.value;
-    const query = queryEl.value.trim();
-    const artist = artistEl ? artistEl.value.trim() : '';
-    if (!query) return;
-
-    goBtn.disabled = true;
-    goBtn.textContent = 'Searching...';
-    resultsEl.innerHTML = '<div class="cache-health-loading"><div class="watch-all-loading-spinner"></div><div>Searching MusicBrainz...</div></div>';
-
-    try {
-        const params = new URLSearchParams({ type, q: query, limit: 10 });
-        if (artist && type !== 'artist') params.set('artist', artist);
-
-        const resp = await fetch(`/api/musicbrainz/search?${params}`);
-        if (!resp.ok) throw new Error('Search failed');
-        const data = await resp.json();
-
-        if (!data.results || data.results.length === 0) {
-            resultsEl.innerHTML = '<div class="failed-mb-empty">No results found. Try adjusting your search.</div>';
-            return;
-        }
-
-        resultsEl.innerHTML = data.results.map((r, i) => {
-            const scoreColor = r.score >= 90 ? '#4ade80' : r.score >= 70 ? '#fbbf24' : '#f87171';
-            let detail = '';
-            if (type === 'release') detail = [r.artist, r.date, r.track_count ? `${r.track_count} tracks` : ''].filter(Boolean).join(' · ');
-            else if (type === 'recording') detail = [r.artist, r.album].filter(Boolean).join(' · ');
-            else detail = [r.type, r.country].filter(Boolean).join(' · ');
-
-            return `
-                <div class="mb-search-result" onclick="_selectMBMatch(${entryId}, '${r.mbid}', '${escapeForInlineJs(r.name)}')">
-                    <div class="mb-search-result-score" style="color:${scoreColor}">${r.score}%</div>
-                    <div class="mb-search-result-info">
-                        <div class="mb-search-result-name">${escapeHtml(r.name)}</div>
-                        ${r.disambiguation ? `<div class="mb-search-result-disambig">${escapeHtml(r.disambiguation)}</div>` : ''}
-                        ${detail ? `<div class="mb-search-result-detail">${escapeHtml(detail)}</div>` : ''}
-                    </div>
-                    <div class="mb-search-result-mbid" title="${r.mbid}">${r.mbid.substring(0, 8)}...</div>
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        resultsEl.innerHTML = `<div class="failed-mb-empty">Search error: ${err.message}</div>`;
-    } finally {
-        goBtn.disabled = false;
-        goBtn.textContent = 'Search';
-    }
-}
-
-async function _selectMBMatch(entryId, mbid, mbName) {
-    try {
-        const resp = await fetch('/api/metadata-cache/mb-match', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ entry_id: entryId, mbid, mb_name: mbName })
-        });
-        const data = await resp.json();
-        if (data.success) {
-            showToast(`Matched to: ${mbName}`, 'success');
-            // Close search modal, refresh list with fresh counts
-            const searchOverlay = document.getElementById('mb-search-modal-overlay');
-            if (searchOverlay) searchOverlay.remove();
-            _failedMBState.typeCounts = {};
-            _loadFailedMBLookups();
-        } else {
-            showToast(data.error || 'Failed to save match', 'error');
-        }
-    } catch (err) {
-        showToast('Failed to save match', 'error');
-    }
-}
-
-function filterFindingsByJob(jobId) {
-    const jobFilter = document.getElementById('repair-findings-job-filter');
-    if (!jobFilter) return;
-
-    // Toggle: click same chip again to clear filter
-    if (jobFilter.value === jobId) {
-        jobFilter.value = '';
-    } else {
-        jobFilter.value = jobId;
-    }
-    _repairFindingsPage = 0;
-    loadRepairFindingsDashboard();
-    loadRepairFindings();
-}
-
-async function loadRepairFindings() {
-    const container = document.getElementById('repair-findings-list');
-    if (!container) return;
-
-    const jobFilter = document.getElementById('repair-findings-job-filter');
-    const severityFilter = document.getElementById('repair-findings-severity-filter');
-    const statusFilter = document.getElementById('repair-findings-status-filter');
-
-    const params = new URLSearchParams();
-    if (jobFilter && jobFilter.value) params.set('job_id', jobFilter.value);
-    if (severityFilter && severityFilter.value) params.set('severity', severityFilter.value);
-    if (statusFilter && statusFilter.value) params.set('status', statusFilter.value);
-    params.set('page', _repairFindingsPage);
-    params.set('limit', REPAIR_FINDINGS_PAGE_SIZE);
-
-    try {
-        const response = await fetch(`/api/repair/findings?${params}`);
-        if (!response.ok) throw new Error('Failed to fetch findings');
-        const data = await response.json();
-        const items = data.items || [];
-
-        _repairSelectedFindings.clear();
-        _repairFindingsTotal = data.total || 0;
-        const bulkBar = document.getElementById('repair-findings-bulk');
-        if (bulkBar) bulkBar.style.display = 'none';
-        const selectAllCb = document.getElementById('repair-select-all-cb');
-        if (selectAllCb) { selectAllCb.checked = false; selectAllCb.indeterminate = false; }
-
-        if (items.length === 0) {
-            container.innerHTML = `<div class="repair-empty-state">
-                <div class="repair-empty-icon">&#10003;</div>
-                <div class="repair-empty-title">All Clear</div>
-                <div class="repair-empty-text">No findings match your filters. Your library is looking good!</div>
-            </div>`;
-            document.getElementById('repair-findings-pagination').innerHTML = '';
-            return;
-        }
-
-        const severityIcons = { info: 'ℹ️', warning: '⚠️', critical: '🔴' };
-        const typeLabels = {
-            dead_file: 'Dead File', orphan_file: 'Orphan', acoustid_mismatch: 'Wrong Song',
-            acoustid_no_match: 'No Match', fake_lossless: 'Fake Lossless',
-            duplicate_tracks: 'Duplicate', incomplete_album: 'Incomplete',
-            path_mismatch: 'Path Mismatch', metadata_gap: 'Missing Metadata',
-            missing_cover_art: 'Missing Art', track_number_mismatch: 'Track Number',
-            missing_lossy_copy: 'No Lossy Copy'
-        };
-
-        // Finding types that have an automated fix action
-        const fixableTypes = {
-            dead_file: 'Re-download',
-            orphan_file: 'Resolve',
-            track_number_mismatch: 'Fix',
-            missing_cover_art: 'Apply Art',
-            metadata_gap: 'Apply',
-            duplicate_tracks: 'Keep Best',
-            incomplete_album: 'Auto-Fill',
-            missing_lossy_copy: 'Convert',
-            acoustid_mismatch: 'Fix',
-            missing_discography_track: 'Add to Wishlist',
-        };
-
-        container.innerHTML = items.map(f => {
-            const icon = severityIcons[f.severity] || 'ℹ️';
-            const age = formatCacheAge(f.created_at);
-            const actionLabels = {
-                removed_db_entry: 'Entry Removed', added_to_wishlist: 'Wishlisted', deleted_file: 'File Deleted',
-                already_gone: 'Already Gone', fixed_track_number: 'Track # Fixed',
-                applied_cover_art: 'Art Applied', applied_metadata: 'Metadata Applied',
-                removed_duplicates: 'Duplicates Removed',
-            };
-            let statusBadge = '';
-            if (f.status !== 'pending') {
-                const actionText = actionLabels[f.user_action] || f.status;
-                statusBadge = `<span class="repair-finding-status-badge ${f.status}">${actionText}</span>`;
-            }
-            const typeLabel = typeLabels[f.finding_type] || f.finding_type.replace(/_/g, ' ');
-            const d = f.details || {};
-            const filePath = f.file_path || d.original_path || d.file_path || '';
-            const fixLabel = fixableTypes[f.finding_type];
-
-            return `<div class="repair-finding-card ${f.severity}" data-id="${f.id}" data-job-id="${f.job_id}" data-mass-orphan="${!!(d.mass_orphan)}">
-                <div class="repair-finding-main" onclick="toggleFindingDetail(${f.id})">
-                    <div class="repair-finding-select" onclick="event.stopPropagation()">
-                        <input type="checkbox" onchange="toggleFindingSelect(${f.id}, this.checked)">
-                    </div>
-                    <div class="repair-finding-content">
-                        <div class="repair-finding-title">
-                            <span class="repair-finding-icon">${icon}</span>
-                            ${_escFinding(f.title)}
-                            <span class="repair-finding-type-badge">${typeLabel}</span>
-                            ${statusBadge}
-                        </div>
-                        <div class="repair-finding-desc">${_escFinding(f.description || '')}</div>
-                        ${filePath ? `<div class="repair-finding-path">${_escFinding(filePath)}</div>` : ''}
-                        <div class="repair-finding-meta">
-                            <span>${f.job_id.replace(/_/g, ' ')}</span>
-                            <span>&middot;</span>
-                            <span>${f.entity_type || 'file'}</span>
-                            ${f.entity_id ? `<span>&middot;</span><span>ID: ${f.entity_id}</span>` : ''}
-                            <span>&middot;</span>
-                            <span>${age}</span>
-                        </div>
-                    </div>
-                    <div class="repair-finding-actions" onclick="event.stopPropagation()">
-                        ${f.status === 'pending' ? `
-                            ${fixLabel ? `<button class="repair-finding-btn fix" onclick="fixRepairFinding(${f.id}, '${f.finding_type}')" title="${fixLabel}">${_escFinding(fixLabel)}</button>` : ''}
-                            <button class="repair-finding-btn dismiss" onclick="dismissRepairFinding(${f.id})" title="Dismiss">&times;</button>
-                        ` : ''}
-                        <button class="repair-finding-expand-btn" data-finding="${f.id}" title="Details">&#9660;</button>
-                    </div>
-                </div>
-                <div class="repair-finding-detail" id="repair-detail-${f.id}">
-                    <div class="repair-finding-detail-inner">
-                        ${_renderFindingDetail(f)}
-                    </div>
-                </div>
-            </div>`;
-        }).join('');
-
-        // Pagination
-        renderRepairFindingsPagination(data.total, data.page);
-
-    } catch (error) {
-        console.error('Error loading findings:', error);
-        container.innerHTML = '<div class="repair-empty">Error loading findings</div>';
-    }
-}
-
-function _escFinding(s) {
-    if (!s) return '';
-    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-function _renderScoreBar(value, label) {
-    const pct = Math.round((value || 0) * 100);
-    const cls = pct >= 80 ? 'good' : pct >= 50 ? 'warn' : 'bad';
-    return `<div class="repair-score-bar">
-        <span class="repair-detail-key">${label}</span>
-        <div class="repair-score-bar-track"><div class="repair-score-bar-fill ${cls}" style="width:${pct}%"></div></div>
-        <span class="repair-detail-val">${pct}%</span>
-    </div>`;
-}
-
-function _formatFileSize(bytes) {
-    if (!bytes) return '-';
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / 1048576).toFixed(1) + ' MB';
-}
-
-function _renderPlayButton(f) {
-    const d = f.details || {};
-    const filePath = f.file_path || d.file_path || d.original_path;
-    if (!filePath) return '';
-    const title = d.expected_title || d.title || d.file_title || d.matched_title || '';
-    const artist = d.expected_artist || d.artist || d.artist_name || '';
-    const album = d.album || d.album_title || '';
-    const albumArt = d.album_thumb_url || '';
-    return `<button class="repair-finding-play-btn" onclick="event.stopPropagation(); playFindingTrack(this)"
-        data-path="${_escFinding(filePath)}" data-title="${_escFinding(title)}"
-        data-artist="${_escFinding(artist)}" data-album="${_escFinding(album)}"
-        data-art="${_escFinding(albumArt)}" data-entity-id="${_escFinding(f.entity_id || '')}" title="Play this track">
-        <svg viewBox="0 0 24 24"><polygon points="5,3 19,12 5,21"/></svg> Play
-    </button>`;
-}
-
-function playFindingTrack(btn) {
-    const track = {
-        file_path: btn.dataset.path,
-        title: btn.dataset.title || 'Unknown Track',
-        id: btn.dataset.entityId || null
-    };
-    const albumTitle = btn.dataset.album || '';
-    const artistName = btn.dataset.artist || '';
-    playLibraryTrack(track, albumTitle, artistName);
-}
-
-function _renderFindingMedia(d) {
-    const albumUrl = d.album_thumb_url;
-    const artistUrl = d.artist_thumb_url;
-    if (!albumUrl && !artistUrl) return '';
-    let html = '<div class="repair-finding-media">';
-    if (albumUrl) {
-        const albumLabel = d.album_title || 'Album';
-        html += `<div class="repair-finding-media-card">
-            <img class="repair-finding-media-img" src="${_escFinding(albumUrl)}" alt="Album art"
-                 onerror="this.parentElement.style.display='none'" />
-            <span class="repair-finding-media-label">${_escFinding(albumLabel)}</span>
-        </div>`;
-    }
-    if (artistUrl) {
-        const artistLabel = d.artist_name || d.artist || 'Artist';
-        html += `<div class="repair-finding-media-card">
-            <img class="repair-finding-media-img artist" src="${_escFinding(artistUrl)}" alt="Artist"
-                 onerror="this.parentElement.style.display='none'" />
-            <span class="repair-finding-media-label">${_escFinding(artistLabel)}</span>
-        </div>`;
-    }
-    html += '</div>';
-    return html;
-}
-
-function _renderFindingDetail(f) {
-    const d = f.details || {};
-    const rows = [];
-    const media = _renderFindingMedia(d);
-
-    switch (f.finding_type) {
-        case 'dead_file':
-            if (d.artist) rows.push(['Artist', d.artist]);
-            if (d.album) rows.push(['Album', d.album]);
-            if (d.title) rows.push(['Title', d.title]);
-            if (d.track_id) rows.push(['Track ID', d.track_id]);
-            if (d.original_path) rows.push(['Original Path', d.original_path, 'path']);
-            return media + _gridRows(rows) + _renderPlayButton(f);
-
-        case 'orphan_file':
-            if (d.folder) rows.push(['Folder', d.folder, 'path']);
-            if (d.format) rows.push(['Format', d.format.toUpperCase()]);
-            if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
-            if (d.modified) rows.push(['Last Modified', d.modified]);
-            if (f.file_path) rows.push(['Full Path', f.file_path, 'path']);
-            return _gridRows(rows) + _renderPlayButton(f);
-
-        case 'acoustid_mismatch': {
-            let html = media + '<div style="margin-bottom:8px">';
-            html += _renderScoreBar(d.fingerprint_score, 'Fingerprint');
-            html += _renderScoreBar(d.title_similarity, 'Title Match');
-            html += _renderScoreBar(d.artist_similarity, 'Artist Match');
-            html += '</div>';
-            rows.push(['Expected Title', d.expected_title || '-']);
-            rows.push(['Expected Artist', d.expected_artist || '-']);
-            rows.push(['AcoustID Title', d.acoustid_title || '-', 'highlight']);
-            rows.push(['AcoustID Artist', d.acoustid_artist || '-', 'highlight']);
-            if (f.file_path) rows.push(['File', f.file_path, 'path']);
-            return html + _gridRows(rows) + _renderPlayButton(f);
-        }
-
-        case 'acoustid_no_match':
-            if (d.expected_title) rows.push(['Expected Title', d.expected_title]);
-            if (d.expected_artist) rows.push(['Expected Artist', d.expected_artist]);
-            if (f.file_path) rows.push(['File', f.file_path, 'path']);
-            return media + _gridRows(rows) + _renderPlayButton(f);
-
-        case 'fake_lossless': {
-            const cutoff = d.detected_cutoff_khz || 0;
-            const expectedMin = d.expected_min_khz || 0;
-            const nyquist = d.nyquist_khz || (d.sample_rate ? d.sample_rate / 2000 : 22.05);
-            let flHtml = '';
-            if (cutoff && expectedMin) {
-                const cutoffPct = Math.min(100, Math.round((cutoff / nyquist) * 100));
-                const expectedPct = Math.min(100, Math.round((expectedMin / nyquist) * 100));
-                flHtml += `<div class="repair-spectrum-bar">
-                    <div class="repair-spectrum-label">Spectral Analysis</div>
-                    <div class="repair-spectrum-track">
-                        <div class="repair-spectrum-detected" style="width:${cutoffPct}%"></div>
-                        <div class="repair-spectrum-expected" style="left:${expectedPct}%"></div>
-                    </div>
-                    <div class="repair-spectrum-legend">
-                        <span class="repair-spectrum-legend-detected">${cutoff} kHz detected</span>
-                        <span class="repair-spectrum-legend-expected">${expectedMin} kHz expected min</span>
-                    </div>
-                </div>`;
-            }
-            if (d.format) rows.push(['Format', d.format.toUpperCase()]);
-            if (d.sample_rate) rows.push(['Sample Rate', `${d.sample_rate} Hz`]);
-            if (d.bit_depth) rows.push(['Bit Depth', `${d.bit_depth}-bit`]);
-            if (d.bitrate) rows.push(['Bitrate', `${d.bitrate} kbps`]);
-            if (d.file_size) rows.push(['File Size', _formatFileSize(d.file_size)]);
-            if (f.file_path) rows.push(['File', f.file_path, 'path']);
-            return flHtml + _gridRows(rows) + _renderPlayButton(f);
-        }
-
-        case 'duplicate_tracks':
-            if (!d.tracks || !d.tracks.length) return _gridRows([['Count', d.count || '?']]);
-            // Determine best copy (same logic as backend: highest bitrate, then duration, then track number)
-            const bestDup = d.tracks.reduce((best, t) => {
-                const bBr = best.bitrate || 0, tBr = t.bitrate || 0;
-                const bDur = best.duration || 0, tDur = t.duration || 0;
-                const bTn = best.track_number || 0, tTn = t.track_number || 0;
-                return (tBr > bBr || (tBr === bBr && tDur > bDur) || (tBr === bBr && tDur === bDur && tTn > bTn)) ? t : best;
-            }, d.tracks[0]);
-            const findingId = f.id;
-            return media + `<div class="repair-detail-sublist">${d.tracks.map((t, i) => {
-                const tid = t.track_id || t.id;
-                const isBest = (t.id === bestDup.id);
-                return `<div class="repair-detail-subitem ${isBest ? 'best' : 'removable'}" style="cursor:pointer;" onclick="selectDuplicateToKeep(${findingId}, '${tid}')" title="Click to keep this version">
-                    <strong>
-                        ${isBest ? '<span class="repair-keep-badge">KEEP</span>' : '<span class="repair-remove-badge">REMOVE</span>'}
-                        ${_escFinding(t.title)} by ${_escFinding(t.artist)}
-                    </strong>
-                    <span>Album: ${_escFinding(t.album || 'Unknown')}${t.bitrate ? ` &middot; ${t.bitrate} kbps` : ''}${t.duration ? ` &middot; ${Math.round(t.duration)}s` : ''}${t.track_number ? ` &middot; Track #${t.track_number}` : ''}</span>
-                    ${t.file_path ? `<span class="mono">${_escFinding(t.file_path)}</span>` : ''}
-                </div>`;
-            }).join('')}</div>
-            <div style="color:rgba(255,255,255,0.3);font-size:11px;padding:4px 0;">Click on a version to keep it, or use "Keep Best" for auto-selection</div>`;
-
-        case 'incomplete_album':
-            if (d.artist) rows.push(['Artist', d.artist]);
-            if (d.album_title) rows.push(['Album', d.album_title]);
-            if (d.primary_source && d.primary_album_id) {
-                const primaryLabel = d.primary_source.charAt(0).toUpperCase() + d.primary_source.slice(1);
-                rows.push([`${primaryLabel} ID`, d.primary_album_id]);
-                if (d.spotify_album_id && d.primary_source !== 'spotify') {
-                    rows.push(['Spotify ID', d.spotify_album_id]);
-                }
-            } else if (d.spotify_album_id) {
-                rows.push(['Spotify ID', d.spotify_album_id]);
-            }
-            let incHtml = media + _gridRows(rows);
-            const actual = d.actual_tracks || 0, expected = d.expected_tracks || 0;
-            if (expected > 0) {
-                const pct = Math.round((actual / expected) * 100);
-                incHtml += `<div class="repair-completion-bar">
-                    <div class="repair-completion-label">${actual} of ${expected} tracks (${pct}%)</div>
-                    <div class="repair-completion-track"><div class="repair-completion-fill" style="width:${pct}%"></div></div>
-                </div>`;
-            }
-            if (d.missing_tracks && d.missing_tracks.length) {
-                incHtml += `<div class="repair-detail-sublist">${d.missing_tracks.map(t => `
-                    <div class="repair-detail-subitem">
-                        <strong>#${t.track_number || '?'} ${_escFinding(t.name || t.title || 'Unknown')}</strong>
-                        ${t.source && t.source !== 'spotify' ? `<span>Source: ${_escFinding(t.source)}${t.source_track_id ? ` · ID: ${_escFinding(t.source_track_id)}` : ''}</span>` : ''}
-                        ${t.duration_ms ? `<span>Duration: ${Math.round(t.duration_ms / 1000)}s</span>` : ''}
-                    </div>`).join('')}</div>`;
-            }
-            return incHtml;
-
-        case 'path_mismatch':
-            if (d.from) rows.push(['Current Path', d.from, 'path']);
-            if (d.to) rows.push(['Expected Path', d.to, 'success']);
-            return _gridRows(rows);
-
-        case 'metadata_gap':
-            if (d.artist) rows.push(['Artist', d.artist]);
-            if (d.album) rows.push(['Album', d.album]);
-            if (d.title) rows.push(['Title', d.title]);
-            if (d.spotify_track_id) rows.push(['Spotify ID', d.spotify_track_id]);
-            if (d.resolved_source) rows.push(['Resolved Source', d.resolved_source]);
-            if (d.resolved_track_id) rows.push(['Resolved Track ID', d.resolved_track_id]);
-            if (d.found_fields && typeof d.found_fields === 'object') {
-                Object.entries(d.found_fields).forEach(([k, v]) => {
-                    rows.push([`Found: ${k}`, String(v), 'success']);
-                });
-            }
-            return media + _gridRows(rows);
-
-        case 'missing_cover_art':
-            if (d.artist) rows.push(['Artist', d.artist]);
-            if (d.album_title) rows.push(['Album', d.album_title]);
-            if (d.spotify_album_id) rows.push(['Spotify ID', d.spotify_album_id]);
-            let artHtml = '';
-            // Show artist image + found artwork side by side
-            if (d.artist_thumb_url || d.found_artwork_url) {
-                artHtml += '<div class="repair-finding-media">';
-                if (d.artist_thumb_url) {
-                    artHtml += `<div class="repair-finding-media-card">
-                        <img class="repair-finding-media-img artist" src="${_escFinding(d.artist_thumb_url)}" alt="Artist"
-                             onerror="this.parentElement.style.display='none'" />
-                        <span class="repair-finding-media-label">${_escFinding(d.artist || 'Artist')}</span>
-                    </div>`;
-                }
-                if (d.found_artwork_url) {
-                    artHtml += `<div class="repair-finding-media-card">
-                        <img class="repair-finding-media-img" src="${_escFinding(d.found_artwork_url)}" alt="Found artwork"
-                             onerror="this.parentElement.style.display='none'" />
-                        <span class="repair-finding-media-label">Found Artwork</span>
-                    </div>`;
-                }
-                artHtml += '</div>';
-            }
-            artHtml += _gridRows(rows);
-            return artHtml;
-
-        case 'track_number_mismatch':
-            if (d.album_title) rows.push(['Album', d.album_title]);
-            if (d.artist_name) rows.push(['Artist', d.artist_name]);
-            if (d.matched_title) rows.push(['Matched To', d.matched_title]);
-            if (d.file_title) rows.push(['File Title', d.file_title]);
-            if (d.current_track_num !== undefined) rows.push(['Current Track #', String(d.current_track_num)]);
-            if (d.correct_track_num !== undefined) rows.push(['Correct Track #', String(d.correct_track_num), 'success']);
-            if (f.file_path) rows.push(['File', f.file_path, 'path']);
-            let tnHtml = media;
-            if (d.match_score) {
-                tnHtml += '<div style="margin-bottom:8px">';
-                tnHtml += _renderScoreBar(d.match_score, 'Title Match');
-                tnHtml += '</div>';
-            }
-            tnHtml += _gridRows(rows);
-            if (d.changes && d.changes.length) {
-                tnHtml += `<div class="repair-detail-sublist">${d.changes.map(c => `
-                    <div class="repair-detail-subitem"><strong>${_escFinding(c)}</strong></div>`).join('')}</div>`;
-            }
-            tnHtml += _renderPlayButton(f);
-            return tnHtml;
-
-        default:
-            // Generic: render all detail keys
-            Object.entries(d).forEach(([k, v]) => {
-                if (typeof v !== 'object' && !k.endsWith('_thumb_url')) {
-                    rows.push([k.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()), String(v)]);
-                }
-            });
-            if (f.file_path) rows.push(['File', f.file_path, 'path']);
-            return (media || '') + (rows.length ? _gridRows(rows) : '<span style="color:rgba(255,255,255,0.3);font-size:12px;">No additional details available</span>');
-    }
-}
-
-function _gridRows(rows) {
-    if (!rows.length) return '';
-    return `<div class="repair-detail-grid">${rows.map(([k, v, cls]) =>
-        `<span class="repair-detail-key">${_escFinding(k)}</span><span class="repair-detail-val ${cls || ''}">${_escFinding(v)}</span>`
-    ).join('')}</div>`;
-}
-
-function toggleFindingDetail(id) {
-    const panel = document.getElementById(`repair-detail-${id}`);
-    const btn = document.querySelector(`.repair-finding-expand-btn[data-finding="${id}"]`);
-    if (!panel) return;
-    const isOpen = panel.classList.toggle('open');
-    if (btn) btn.classList.toggle('open', isOpen);
-}
-
-function toggleFindingSelect(id, checked) {
-    if (checked) _repairSelectedFindings.add(id);
-    else _repairSelectedFindings.delete(id);
-
-    _updateFindingsBulkBar();
-}
-
-function _updateFindingsBulkBar() {
-    const bulkBar = document.getElementById('repair-findings-bulk');
-    const count = _repairSelectedFindings.size;
-    if (bulkBar) bulkBar.style.display = count > 0 ? '' : 'none';
-    const countEl = document.getElementById('repair-bulk-count');
-    if (countEl) countEl.textContent = count > 0 ? `${count} selected` : '';
-
-    // Show "Fix All (N)" when all on page are selected and there are more pages
-    const fixAllBtn = document.getElementById('repair-fix-all-btn');
-    if (fixAllBtn && _repairFindingsTotal > 0) {
-        const allPageSelected = count > 0 && count >= document.querySelectorAll('.repair-finding-card').length;
-        fixAllBtn.style.display = (allPageSelected && _repairFindingsTotal > count) ? '' : 'none';
-        fixAllBtn.textContent = `Fix All ${_repairFindingsTotal}`;
-    }
-
-    // Sync "Select All" checkbox
-    const selectAllCb = document.getElementById('repair-select-all-cb');
-    if (selectAllCb) {
-        const totalOnPage = document.querySelectorAll('.repair-finding-card').length;
-        selectAllCb.checked = totalOnPage > 0 && count >= totalOnPage;
-        selectAllCb.indeterminate = count > 0 && count < totalOnPage;
-    }
-}
-
-function toggleSelectAllFindings(checked) {
-    const checkboxes = document.querySelectorAll('.repair-finding-select input[type="checkbox"]');
-    checkboxes.forEach(cb => {
-        cb.checked = checked;
-        const card = cb.closest('.repair-finding-card');
-        if (card) {
-            const id = parseInt(card.dataset.id);
-            if (checked) _repairSelectedFindings.add(id);
-            else _repairSelectedFindings.delete(id);
-        }
-    });
-    _updateFindingsBulkBar();
-}
-
-async function fixAllMatchingFindings() {
-    const jobFilter = document.getElementById('repair-findings-job-filter');
-    const severityFilter = document.getElementById('repair-findings-severity-filter');
-    const jobId = jobFilter ? jobFilter.value : '';
-    const severity = severityFilter ? severityFilter.value : '';
-
-    // If fixing orphan files or dead files, prompt for action FIRST
-    let fixAction = null;
-    // Discography backfill: 3-option prompt (Add to Wishlist / Just Clear / Cancel).
-    // "Just Clear" bypasses bulk-fix entirely and goes through the clear endpoint,
-    // which is why it's handled inline and returns early.
-    if (jobId === 'discography_backfill') {
-        const choice = await _promptDiscographyBackfillAction(_repairFindingsTotal);
-        if (!choice) return;
-        if (choice === 'dismiss') {
-            if (!await showConfirmDialog({
-                title: 'Clear All Discography Findings',
-                message: `Clear all ${_repairFindingsTotal} discography backfill findings without adding any to the wishlist? Tracks can be re-detected next scan.`,
-                confirmText: 'Clear All',
-                destructive: false
-            })) return;
-            showToast(`Clearing ${_repairFindingsTotal} findings...`, 'info');
-            try {
-                const resp = await fetch('/api/repair/findings/clear', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ job_id: 'discography_backfill', status: 'pending' })
-                });
-                const result = await resp.json();
-                if (result.success) {
-                    showToast(`Cleared ${result.deleted} findings`, 'success');
-                } else {
-                    showToast(result.error || 'Clear failed', 'error');
-                }
-            } catch (err) {
-                console.error('Error clearing findings:', err);
-                showToast('Error clearing findings', 'error');
-            }
-            _repairSelectedFindings.clear();
-            loadRepairFindingsDashboard();
-            loadRepairFindings();
-            updateRepairStatus();
-            return;
-        }
-        // 'add_to_wishlist' falls through to bulk-fix. No destructive warning —
-        // the backend handler only adds tracks to the wishlist.
-    } else if (jobId === 'dead_file_cleaner') {
-        fixAction = await _promptDeadFileAction();
-        if (!fixAction) return;
-    } else if (jobId === 'orphan_file_detector' || _isMassOrphanFix(jobId, _repairFindingsTotal)) {
-        fixAction = await _promptOrphanAction();
-        if (!fixAction) return;
-        // Confirm before proceeding
-        if (fixAction === 'delete' && _repairFindingsTotal > 50) {
-            if (!await showWitnessMeDialog(_repairFindingsTotal)) return;
-        } else if (fixAction === 'delete') {
-            if (!await showConfirmDialog({
-                title: 'Delete Orphan Files',
-                message: `Permanently delete ${_repairFindingsTotal} orphan files from disk? This cannot be undone.`,
-                confirmText: 'Delete',
-                destructive: true
-            })) return;
-        } else if (fixAction === 'staging') {
-            if (!await showConfirmDialog({
-                title: 'Move to Staging',
-                message: `Move ${_repairFindingsTotal} orphan files to the import folder? Files are NOT deleted — you can review and import them.`,
-                confirmText: 'Move All to Staging',
-                destructive: false
-            })) return;
-        }
-    } else {
-        const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
-        if (!await showConfirmDialog({
-            title: 'Fix All Findings',
-            message: `Apply fixes to all ${_repairFindingsTotal} pending fixable findings for ${scopeLabel}? This may delete files or remove database entries depending on finding type.`,
-            confirmText: 'Fix All',
-            destructive: true
-        })) return;
-    }
-
-    showToast(`Fixing ${_repairFindingsTotal} findings...`, 'info');
-
-    try {
-        const body = {};
-        if (jobId) body.job_id = jobId;
-        if (severity) body.severity = severity;
-        if (fixAction) body.fix_action = fixAction;
-
-        const response = await fetch('/api/repair/findings/bulk-fix', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body)
-        });
-        const result = await response.json();
-        if (result.success) {
-            let msg = `Fixed ${result.fixed}${result.failed ? `, ${result.failed} failed` : ''} of ${result.total}`;
-            if (result.errors && result.errors.length > 0) {
-                msg += `: ${result.errors[0].error}`;
-            }
-            showToast(msg, result.fixed > 0 ? 'success' : 'error');
-        } else {
-            showToast(result.error || 'Bulk fix failed', 'error');
-        }
-    } catch (error) {
-        console.error('Error in bulk fix:', error);
-        showToast('Error applying bulk fix', 'error');
-    }
-
-    _repairSelectedFindings.clear();
-    loadRepairFindingsDashboard();
-    loadRepairFindings();
-    updateRepairStatus();
-}
-
-function renderRepairFindingsPagination(total, currentPage) {
-    const container = document.getElementById('repair-findings-pagination');
-    if (!container) return;
-
-    const totalPages = Math.ceil(total / REPAIR_FINDINGS_PAGE_SIZE);
-    if (totalPages <= 1) { container.innerHTML = ''; return; }
-
-    let html = '';
-    if (currentPage > 0) {
-        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${currentPage - 1};loadRepairFindings()">&larr;</button>`;
-    }
-
-    // Smart page range
-    let startPage = Math.max(0, currentPage - 3);
-    let endPage = Math.min(totalPages, startPage + 7);
-    if (endPage - startPage < 7) startPage = Math.max(0, endPage - 7);
-
-    if (startPage > 0) {
-        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=0;loadRepairFindings()">1</button>`;
-        if (startPage > 1) html += '<span class="repair-page-info">...</span>';
-    }
-    for (let i = startPage; i < endPage; i++) {
-        html += `<button class="repair-page-btn ${i === currentPage ? 'active' : ''}"
-                         onclick="_repairFindingsPage=${i};loadRepairFindings()">${i + 1}</button>`;
-    }
-    if (endPage < totalPages) {
-        if (endPage < totalPages - 1) html += '<span class="repair-page-info">...</span>';
-        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${totalPages - 1};loadRepairFindings()">${totalPages}</button>`;
-    }
-
-    if (currentPage < totalPages - 1) {
-        html += `<button class="repair-page-btn" onclick="_repairFindingsPage=${currentPage + 1};loadRepairFindings()">&rarr;</button>`;
-    }
-    html += `<span class="repair-page-info">${total.toLocaleString()} total</span>`;
-    container.innerHTML = html;
-}
-
-async function selectDuplicateToKeep(findingId, keepTrackId) {
-    if (!await showConfirmDialog({ title: 'Keep This Version', message: 'Keep this version and remove the other duplicate(s)?', confirmText: 'Keep', destructive: true })) return;
-    try {
-        const response = await fetch(`/api/repair/findings/${findingId}/fix`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ fix_action: keepTrackId }),
-        });
-        const result = await response.json();
-        if (result.success) {
-            showToast(result.message || 'Duplicate resolved', 'success');
-        } else {
-            showToast(result.error || 'Failed to resolve duplicate', 'error');
-        }
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error fixing duplicate:', error);
-        showToast('Error resolving duplicate', 'error');
-    }
-}
-
-async function fixRepairFinding(id, findingType) {
-    // Orphan files require user to choose an action
-    let fixAction = null;
-    if (findingType === 'orphan_file') {
-        fixAction = await _promptOrphanAction();
-        if (!fixAction) return; // User cancelled
-    }
-    // Dead files: re-download or just remove from DB
-    if (findingType === 'dead_file') {
-        fixAction = await _promptDeadFileAction();
-        if (!fixAction) return;
-    }
-    // AcoustID mismatch: retag, redownload, or delete
-    if (findingType === 'acoustid_mismatch') {
-        fixAction = await _promptAcoustidAction();
-        if (!fixAction) return;
-    }
-    // Discography backfill: add to wishlist or just clear the finding
-    if (findingType === 'missing_discography_track') {
-        const choice = await _promptDiscographyBackfillAction(1);
-        if (!choice) return;  // cancel
-        if (choice === 'dismiss') {
-            // User just wants to remove the finding without adding to wishlist
-            await dismissRepairFinding(id);
-            return;
-        }
-        // 'add_to_wishlist' — fall through to the fix endpoint. The handler
-        // already defaults to adding to wishlist, so no fix_action is needed.
-    }
-
-    const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-    const fixBtn = card ? card.querySelector('.repair-finding-btn.fix') : null;
-    let originalText = '';
-    if (fixBtn) {
-        originalText = fixBtn.textContent;
-        fixBtn.disabled = true;
-        fixBtn.textContent = '...';
-    }
-    try {
-        const body = fixAction ? { fix_action: fixAction } : {};
-        const response = await fetch(`/api/repair/findings/${id}/fix`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body),
-        });
-        const result = await response.json();
-        if (result.success) {
-            showToast(result.message || 'Fixed successfully', 'success');
-        } else {
-            showToast(result.error || 'Fix failed', 'error');
-        }
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error fixing finding:', error);
-        showToast('Error applying fix', 'error');
-        if (fixBtn) {
-            fixBtn.disabled = false;
-            fixBtn.textContent = originalText;
-        }
-    }
-}
-
-function _promptOrphanAction() {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
-        overlay.innerHTML = `
-            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:380px;width:90%;text-align:center;">
-                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">Orphan File Action</div>
-                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
-                    Choose how to handle orphan files. Staging is safe and reversible.
-                </div>
-                <div style="display:flex;gap:10px;justify-content:center;">
-                    <button id="_orphan-staging" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
-                        Move to Staging
-                    </button>
-                    <button id="_orphan-delete" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
-                        Delete
-                    </button>
-                </div>
-                <button id="_orphan-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
-                    Cancel
-                </button>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-
-        overlay.querySelector('#_orphan-staging').onclick = () => { overlay.remove(); resolve('staging'); };
-        overlay.querySelector('#_orphan-delete').onclick = () => { overlay.remove(); resolve('delete'); };
-        overlay.querySelector('#_orphan-cancel').onclick = () => { overlay.remove(); resolve(null); };
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-    });
-}
-
-function _promptDeadFileAction() {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
-        overlay.innerHTML = `
-            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:420px;width:90%;text-align:center;">
-                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">Dead File Action</div>
-                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
-                    This track's file no longer exists on disk. Choose how to handle it.
-                </div>
-                <div style="display:flex;gap:10px;justify-content:center;">
-                    <button id="_dead-redownload" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
-                        Re-download
-                    </button>
-                    <button id="_dead-remove" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
-                        Remove from DB
-                    </button>
-                </div>
-                <button id="_dead-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
-                    Cancel
-                </button>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-
-        overlay.querySelector('#_dead-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
-        overlay.querySelector('#_dead-remove').onclick = () => { overlay.remove(); resolve('remove'); };
-        overlay.querySelector('#_dead-cancel').onclick = () => { overlay.remove(); resolve(null); };
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-    });
-}
-
-function _promptAcoustidAction() {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
-        overlay.innerHTML = `
-            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:460px;width:90%;text-align:center;">
-                <div style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;">AcoustID Mismatch</div>
-                <div style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;">
-                    The audio fingerprint doesn't match the expected track. Choose how to fix it.
-                </div>
-                <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
-                    <button id="_acid-retag" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(102,126,234,0.4);background:rgba(102,126,234,0.15);color:#667eea;font-weight:600;cursor:pointer;font-family:inherit;">
-                        Retag
-                    </button>
-                    <button id="_acid-redownload" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;">
-                        Re-download
-                    </button>
-                    <button id="_acid-delete" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(239,68,68,0.4);background:rgba(239,68,68,0.1);color:#ef4444;font-weight:500;cursor:pointer;font-family:inherit;">
-                        Delete
-                    </button>
-                </div>
-                <div style="margin-top:12px;font-size:0.78em;color:rgba(255,255,255,0.35);line-height:1.4;">
-                    Retag = update metadata to match actual audio &bull; Re-download = add correct track to wishlist &amp; delete wrong file &bull; Delete = remove file and DB entry
-                </div>
-                <button id="_acid-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
-                    Cancel
-                </button>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-
-        overlay.querySelector('#_acid-retag').onclick = () => { overlay.remove(); resolve('retag'); };
-        overlay.querySelector('#_acid-redownload').onclick = () => { overlay.remove(); resolve('redownload'); };
-        overlay.querySelector('#_acid-delete').onclick = () => { overlay.remove(); resolve('delete'); };
-        overlay.querySelector('#_acid-cancel').onclick = () => { overlay.remove(); resolve(null); };
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-    });
-}
-
-function _promptDiscographyBackfillAction(count = 1) {
-    const isSingle = count <= 1;
-    const headerText = isSingle ? 'Missing Discography Track' : `Missing Discography Tracks (${count})`;
-    const bodyText = isSingle
-        ? 'Add this track to the wishlist for automatic download, or just clear the finding?'
-        : `Add all ${count} selected tracks to the wishlist for automatic download, or just clear the findings?`;
-    const addLabel = isSingle ? 'Add to Wishlist' : `Add All ${count} to Wishlist`;
-    const clearLabel = isSingle ? 'Just Clear Finding' : 'Just Clear Findings';
-
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.cssText = 'display:flex;align-items:center;justify-content:center;z-index:10000;';
-        overlay.innerHTML = `
-            <div style="background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:28px;max-width:460px;width:90%;text-align:center;">
-                <div id="_dbf-header" style="font-size:1.1em;font-weight:600;color:#fff;margin-bottom:8px;"></div>
-                <div id="_dbf-body" style="font-size:0.88em;color:rgba(255,255,255,0.6);margin-bottom:20px;"></div>
-                <div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
-                    <button id="_dbf-add" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(29,185,84,0.4);background:rgba(29,185,84,0.15);color:#1db954;font-weight:600;cursor:pointer;font-family:inherit;"></button>
-                    <button id="_dbf-dismiss" style="padding:10px 20px;border-radius:10px;border:1px solid rgba(102,126,234,0.4);background:rgba(102,126,234,0.15);color:#667eea;font-weight:500;cursor:pointer;font-family:inherit;"></button>
-                </div>
-                <button id="_dbf-cancel" style="margin-top:12px;padding:6px 16px;border:none;background:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:0.82em;font-family:inherit;">
-                    Cancel
-                </button>
-            </div>
-        `;
-        // Assign text content (avoids HTML-escaping gotchas with dynamic values)
-        overlay.querySelector('#_dbf-header').textContent = headerText;
-        overlay.querySelector('#_dbf-body').textContent = bodyText;
-        overlay.querySelector('#_dbf-add').textContent = addLabel;
-        overlay.querySelector('#_dbf-dismiss').textContent = clearLabel;
-        document.body.appendChild(overlay);
-
-        overlay.querySelector('#_dbf-add').onclick = () => { overlay.remove(); resolve('add_to_wishlist'); };
-        overlay.querySelector('#_dbf-dismiss').onclick = () => { overlay.remove(); resolve('dismiss'); };
-        overlay.querySelector('#_dbf-cancel').onclick = () => { overlay.remove(); resolve(null); };
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-    });
-}
-
-async function resolveRepairFinding(id) {
-    try {
-        await fetch(`/api/repair/findings/${id}/resolve`, { method: 'POST' });
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error resolving finding:', error);
-    }
-}
-
-async function dismissRepairFinding(id) {
-    try {
-        await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error dismissing finding:', error);
-    }
-}
-
-async function bulkRepairAction(action) {
-    if (_repairSelectedFindings.size === 0) return;
-    try {
-        await fetch('/api/repair/findings/bulk', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ ids: Array.from(_repairSelectedFindings), action })
-        });
-        showToast(`${_repairSelectedFindings.size} findings ${action === 'dismiss' ? 'dismissed' : 'resolved'}`, 'success');
-        _repairSelectedFindings.clear();
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error bulk updating findings:', error);
-        showToast('Error updating findings', 'error');
-    }
-}
-
-async function bulkFixFindings() {
-    if (_repairSelectedFindings.size === 0) return;
-    const ids = Array.from(_repairSelectedFindings);
-
-    // If any selected findings are orphan files, prompt for action FIRST
-    const selectedOrphanCards = ids.filter(id => {
-        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-        return card && card.dataset.jobId === 'orphan_file_detector';
-    });
-    let orphanFixAction = null;
-    if (selectedOrphanCards.length > 0) {
-        orphanFixAction = await _promptOrphanAction();
-        if (!orphanFixAction) return;
-        // Only show scary dialog for mass deletion, not staging
-        if (orphanFixAction === 'delete' && selectedOrphanCards.length > MASS_ORPHAN_THRESHOLD) {
-            const hasMassFlag = ids.some(id => {
-                const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-                return card && card.dataset.massOrphan === 'true';
-            });
-            if (hasMassFlag && !await showWitnessMeDialog(selectedOrphanCards.length)) return;
-        }
-    }
-
-    // If any selected findings are dead files, prompt for action
-    const selectedDeadCards = ids.filter(id => {
-        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-        return card && card.dataset.jobId === 'dead_file_cleaner';
-    });
-    let deadFixAction = null;
-    if (selectedDeadCards.length > 0) {
-        deadFixAction = await _promptDeadFileAction();
-        if (!deadFixAction) return;
-    }
-
-    // If any selected findings are AcoustID mismatches, prompt for action
-    const selectedAcoustidCards = ids.filter(id => {
-        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-        return card && card.dataset.jobId === 'acoustid_scanner';
-    });
-    let acoustidFixAction = null;
-    if (selectedAcoustidCards.length > 0) {
-        acoustidFixAction = await _promptAcoustidAction();
-        if (!acoustidFixAction) return;
-    }
-
-    // If any selected findings are discography backfill, prompt once (add-to-wishlist vs clear)
-    const selectedBackfillCards = ids.filter(id => {
-        const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-        return card && card.dataset.jobId === 'discography_backfill';
-    });
-    let backfillAction = null;
-    if (selectedBackfillCards.length > 0) {
-        backfillAction = await _promptDiscographyBackfillAction(selectedBackfillCards.length);
-        if (!backfillAction) return;
-    }
-
-    let fixed = 0, failed = 0, lastError = '';
-    showToast(`Fixing ${ids.length} findings...`, 'info');
-
-    for (const id of ids) {
-        try {
-            // Determine if this finding needs a specific action
-            const card = document.querySelector(`.repair-finding-card[data-id="${id}"]`);
-            const isOrphan = card && card.dataset.jobId === 'orphan_file_detector';
-            const isDead = card && card.dataset.jobId === 'dead_file_cleaner';
-            const isAcoustid = card && card.dataset.jobId === 'acoustid_scanner';
-            const isBackfill = card && card.dataset.jobId === 'discography_backfill';
-
-            // Discography backfill "Just Clear" path uses the dismiss endpoint,
-            // not the fix endpoint — so handle it inline before the fix call.
-            if (isBackfill && backfillAction === 'dismiss') {
-                try {
-                    const resp = await fetch(`/api/repair/findings/${id}/dismiss`, { method: 'POST' });
-                    if (resp.ok) fixed++;
-                    else { failed++; lastError = 'dismiss failed'; }
-                } catch {
-                    failed++;
-                }
-                continue;
-            }
-
-            let body = {};
-            if (isOrphan && orphanFixAction) body = { fix_action: orphanFixAction };
-            else if (isDead && deadFixAction) body = { fix_action: deadFixAction };
-            else if (isAcoustid && acoustidFixAction) body = { fix_action: acoustidFixAction };
-            // Discography backfill "Add to Wishlist" falls through with empty body
-            // — the fix handler already adds to wishlist by default.
-
-            const response = await fetch(`/api/repair/findings/${id}/fix`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(body),
-            });
-            const result = await response.json();
-            if (result.success) fixed++;
-            else { failed++; lastError = result.error || 'unknown error'; }
-        } catch {
-            failed++;
-        }
-    }
-
-    _repairSelectedFindings.clear();
-    let fixMsg = `Fixed ${fixed}${failed ? `, ${failed} failed` : ''}`;
-    if (failed && lastError) fixMsg += `: ${lastError}`;
-    showToast(fixMsg, fixed > 0 ? 'success' : 'error');
-    loadRepairFindingsDashboard();
-    loadRepairFindings();
-    updateRepairStatus();
-}
-
-async function clearRepairFindings() {
-    const jobFilter = document.getElementById('repair-findings-job-filter');
-    const statusFilter = document.getElementById('repair-findings-status-filter');
-    const jobId = jobFilter ? jobFilter.value : '';
-    const status = statusFilter ? statusFilter.value : '';
-
-    const scopeLabel = jobId ? jobId.replace(/_/g, ' ') : 'all jobs';
-    const statusLabel = status ? ` (${status})` : '';
-    if (!await showConfirmDialog({
-        title: 'Clear Findings',
-        message: `Delete all findings for ${scopeLabel}${statusLabel}? This cannot be undone.`,
-        confirmText: 'Clear',
-        destructive: true
-    })) return;
-
-    try {
-        const body = {};
-        if (jobId) body.job_id = jobId;
-        if (status) body.status = status;
-
-        const response = await fetch('/api/repair/findings/clear', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(body)
-        });
-        const result = await response.json();
-        if (result.success) {
-            showToast(`Cleared ${result.deleted} findings`, 'success');
-        } else {
-            showToast(result.error || 'Failed to clear findings', 'error');
-        }
-        _repairSelectedFindings.clear();
-        loadRepairFindingsDashboard();
-        loadRepairFindings();
-        updateRepairStatus();
-    } catch (error) {
-        console.error('Error clearing findings:', error);
-        showToast('Error clearing findings', 'error');
-    }
-}
-
-async function loadRepairHistory() {
-    const container = document.getElementById('repair-history-list');
-    if (!container) return;
-
-    try {
-        const response = await fetch('/api/repair/history?limit=50');
-        if (!response.ok) throw new Error('Failed to fetch history');
-        const data = await response.json();
-        const runs = data.runs || [];
-
-        if (runs.length === 0) {
-            container.innerHTML = `<div class="repair-empty-state">
-                <div class="repair-empty-icon">&#128337;</div>
-                <div class="repair-empty-title">No History Yet</div>
-                <div class="repair-empty-text">Job run history will appear here after maintenance jobs complete their first scan.</div>
-            </div>`;
-            return;
-        }
-
-        container.innerHTML = runs.map(run => {
-            const duration = run.duration_seconds ? `${run.duration_seconds.toFixed(1)}s` : '-';
-            const age = formatCacheAge(run.started_at);
-            const statusClass = run.status === 'completed' ? 'success' :
-                run.status === 'failed' ? 'error' : 'running';
-
-            // Build stat pills
-            const stats = [];
-            stats.push(`<span class="repair-history-stat"><strong>${(run.items_scanned || 0).toLocaleString()}</strong> scanned</span>`);
-            if (run.findings_created) stats.push(`<span class="repair-history-stat findings"><strong>${run.findings_created}</strong> findings</span>`);
-            if (run.auto_fixed) stats.push(`<span class="repair-history-stat fixed"><strong>${run.auto_fixed}</strong> fixed</span>`);
-            if (run.errors) stats.push(`<span class="repair-history-stat errors"><strong>${run.errors}</strong> errors</span>`);
-
-            // Format timestamps
-            const startTime = run.started_at ? new Date(run.started_at).toLocaleString() : '-';
-            const endTime = run.finished_at ? new Date(run.finished_at).toLocaleString() : 'In progress';
-
-            return `<div class="repair-history-entry">
-                <div class="repair-history-header">
-                    <div class="repair-history-dot ${statusClass}"></div>
-                    <span class="repair-history-name">${run.display_name || run.job_id}</span>
-                    <span class="repair-history-status ${statusClass}">${run.status}</span>
-                    <span class="repair-history-duration">${duration}</span>
-                </div>
-                <div class="repair-history-stats">${stats.join('')}</div>
-                <div class="repair-history-meta">${age} &middot; ${startTime} &rarr; ${endTime}</div>
-            </div>`;
-        }).join('');
-
-    } catch (error) {
-        console.error('Error loading repair history:', error);
-        container.innerHTML = '<div class="repair-empty">Error loading history</div>';
-    }
-}
-
-// Initialize Repair Worker UI on page load
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('repair-button');
-        if (button) {
-            button.addEventListener('click', openRepairModal);
-            updateRepairStatus();
-            setInterval(updateRepairStatus, 5000);
-        }
-    });
-} else {
-    const button = document.getElementById('repair-button');
-    if (button) {
-        button.addEventListener('click', openRepairModal);
-        updateRepairStatus();
-        setInterval(updateRepairStatus, 5000);
-    }
-}
-
-// ===================================================================
-// IMPORT PAGE (full page, replaces old modal)
-// ===================================================================
-
-let importJobIdCounter = 0;
-
-const importPageState = {
-    stagingFiles: [],
-    selectedSingles: new Set(),
-    albumData: null,          // response from /api/import/album/match
-    matchOverrides: {},       // { trackIndex: stagingFileIndex }  — manual drag-drop overrides
-    singlesManualMatches: {}, // { stagingFileIndex: { id, name, artist, album, ... } }
-    initialized: false,
-    activeTab: 'album',
-    tapSelectedChip: null,    // for mobile tap-to-assign fallback
-};
-
-// ===============================
-// STATS PAGE
-// ===============================
-
-let _statsRange = '7d';
-let _statsTimelineChart = null;
-let _statsGenreChart = null;
-let _statsDbStorageChart = null;
-let _statsInitialized = false;
-
-function initializeStatsPage() {
-    if (_statsInitialized) {
-        loadStatsData();
-        return;
-    }
-    _statsInitialized = true;
-
-    // Time range buttons
-    const rangeContainer = document.getElementById('stats-time-range');
-    if (rangeContainer) {
-        rangeContainer.addEventListener('click', (e) => {
-            const btn = e.target.closest('.stats-range-btn');
-            if (!btn) return;
-            _statsRange = btn.dataset.range;
-            rangeContainer.querySelectorAll('.stats-range-btn').forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            loadStatsData();
-        });
-    }
-
-    loadStatsData();
-    _updateStatsLastSynced();
-}
-
-async function triggerStatsSync() {
-    const btn = document.getElementById('stats-sync-btn');
-    if (btn) btn.classList.add('syncing');
-
-    try {
-        const resp = await fetch('/api/listening-stats/sync', { method: 'POST' });
-        const data = await resp.json();
-        if (data.success) {
-            showToast('Syncing listening data...', 'info');
-            // Wait a few seconds for the sync to complete, then reload
-            setTimeout(async () => {
-                await loadStatsData();
-                _updateStatsLastSynced();
-                if (btn) btn.classList.remove('syncing');
-                showToast('Listening stats updated', 'success');
-            }, 5000);
-        } else {
-            showToast(data.error || 'Sync failed', 'error');
-            if (btn) btn.classList.remove('syncing');
-        }
-    } catch (e) {
-        showToast('Sync failed', 'error');
-        if (btn) btn.classList.remove('syncing');
-    }
-}
-
-async function _updateStatsLastSynced() {
-    const el = document.getElementById('stats-last-synced');
-    if (!el) return;
-    try {
-        const resp = await fetch('/api/listening-stats/status');
-        const data = await resp.json();
-        if (data.stats && data.stats.last_poll) {
-            el.textContent = `Last synced: ${data.stats.last_poll}`;
-        } else {
-            el.textContent = 'Not synced yet';
-        }
-    } catch {
-        el.textContent = '';
-    }
-}
-
-async function loadStatsData() {
-    // Show loading state
-    document.querySelectorAll('.stats-card-value').forEach(el => el.style.opacity = '0.3');
-
-    // Single cached endpoint — instant response
-    let data;
-    try {
-        const resp = await fetch(`/api/stats/cached?range=${_statsRange}`);
-        data = await resp.json();
-    } catch {
-        data = {};
-    }
-
-    if (!data.success) {
-        // Cache not available — show empty state, user should hit Sync
-        data = {
-            overview: {}, top_artists: [], top_albums: [], top_tracks: [],
-            timeline: [], genres: [], recent: [], health: {}
-        };
-    }
-
-    const overview = data.overview || {};
-    const emptyEl = document.getElementById('stats-empty');
-    const hasData = (overview.total_plays || 0) > 0;
-
-    if (emptyEl) {
-        emptyEl.classList.toggle('hidden', hasData);
-    }
-    // Hide main content sections when no data
-    const mainSections = document.querySelectorAll('.stats-overview, .stats-main-grid, .stats-full-width');
-    mainSections.forEach(el => el.style.display = hasData ? '' : 'none');
-
-    // Overview cards
-    const _fmt = (n) => {
-        if (!n) return '0';
-        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-        return n.toLocaleString();
-    };
-    const _fmtTime = (ms) => {
-        if (!ms) return '0h';
-        const hours = Math.floor(ms / 3600000);
-        const mins = Math.floor((ms % 3600000) / 60000);
-        if (hours > 0) return `${hours}h ${mins}m`;
-        return `${mins}m`;
-    };
-
-    // Restore opacity
-    document.querySelectorAll('.stats-card-value').forEach(el => el.style.opacity = '1');
-
-    _setText('stats-total-plays', _fmt(overview.total_plays));
-    _setText('stats-listening-time', _fmtTime(overview.total_time_ms));
-    _setText('stats-unique-artists', _fmt(overview.unique_artists));
-    _setText('stats-unique-albums', _fmt(overview.unique_albums));
-    _setText('stats-unique-tracks', _fmt(overview.unique_tracks));
-
-    // Top Artists — visual bubbles
-    _renderTopArtistsVisual(data.top_artists || []);
-
-    // Top Artists — ranked list
-    _renderRankedList('stats-top-artists', data.top_artists || [], (item, i) => `
-        <div class="stats-ranked-item">
-            <span class="stats-ranked-num">${i + 1}</span>
-            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
-            <div class="stats-ranked-info">
-                <div class="stats-ranked-name">${item.id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.id}','${_esc(item.name).replace(/'/g, "\\'")}'),300)">${_esc(item.name)}</a>` : _esc(item.name)}${item.soul_id && !String(item.soul_id).startsWith('soul_unnamed_') ? ' <img src="/static/trans2.png" style="width:12px;height:12px;vertical-align:middle;opacity:0.5;" title="SoulID">' : ''}</div>
-                <div class="stats-ranked-meta">${item.global_listeners ? _fmt(item.global_listeners) + ' global listeners' : ''}</div>
-            </div>
-            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
-        </div>
-    `);
-
-    // Top Albums
-    _renderRankedList('stats-top-albums', data.top_albums || [], (item, i) => `
-        <div class="stats-ranked-item">
-            <span class="stats-ranked-num">${i + 1}</span>
-            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
-            <div class="stats-ranked-info">
-                <div class="stats-ranked-name">${_esc(item.name)}</div>
-                <div class="stats-ranked-meta">${item.artist_id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.artist_id}','${_esc(item.artist || '').replace(/'/g, "\\'")}'),300)">${_esc(item.artist || '')}</a>` : _esc(item.artist || '')}</div>
-            </div>
-            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
-        </div>
-    `);
-
-    // Top Tracks
-    _renderRankedList('stats-top-tracks', data.top_tracks || [], (item, i) => `
-        <div class="stats-ranked-item">
-            <span class="stats-ranked-num">${i + 1}</span>
-            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
-            <div class="stats-ranked-info">
-                <div class="stats-ranked-name">${_esc(item.name)}</div>
-                <div class="stats-ranked-meta">${item.artist_id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.artist_id}','${_esc(item.artist || '').replace(/'/g, "\\'")}'),300)">${_esc(item.artist || '')}</a>` : _esc(item.artist || '')}${item.album ? ' · ' + _esc(item.album) : ''}</div>
-            </div>
-            <button class="stats-play-btn" onclick="event.stopPropagation();playStatsTrack('${_esc(item.name).replace(/'/g, "\\'")}','${_esc(item.artist || '').replace(/'/g, "\\'")}','${_esc(item.album || '').replace(/'/g, "\\'")}')" title="Play">▶</button>
-            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
-        </div>
-    `);
-
-    // Timeline chart
-    _renderTimelineChart(data.timeline || []);
-
-    // Genre chart
-    _renderGenreChart(data.genres || []);
-
-    // Library health
-    _renderLibraryHealth(data.health || {});
-
-    // DB storage chart (separate fetch — not part of cached stats)
-    _loadDbStorageChart();
-
-    // Recent plays
-    _renderRecentPlays(data.recent || []);
-}
-
-function _renderTopArtistsVisual(artists) {
-    const el = document.getElementById('stats-top-artists-visual');
-    if (!el || !artists.length) { if (el) el.innerHTML = ''; return; }
-
-    const top5 = artists.slice(0, 5);
-    const maxPlays = top5[0]?.play_count || 1;
-    const _fmt = (n) => {
-        if (!n) return '0';
-        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
-        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
-        return n.toString();
-    };
-
-    el.innerHTML = `<div class="stats-artist-bubbles">
-        ${top5.map((a, i) => {
-        const pct = Math.round((a.play_count / maxPlays) * 100);
-        const size = 44 + (4 - i) * 6; // Largest first: 68, 62, 56, 50, 44
-        return `<div class="stats-artist-bubble" onclick="${a.id ? `navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${a.id}','${_esc(a.name).replace(/'/g, "\\\\'")}'),300)` : ''}" style="cursor:${a.id ? 'pointer' : 'default'}">
-                <div class="stats-bubble-img" style="width:${size}px;height:${size}px;${a.image_url ? `background-image:url('${a.image_url}')` : ''}">
-                    ${!a.image_url ? `<span>${(a.name || '?')[0]}</span>` : ''}
-                </div>
-                <div class="stats-bubble-bar-container">
-                    <div class="stats-bubble-bar" style="width:${pct}%"></div>
-                </div>
-                <div class="stats-bubble-name">${_esc(a.name)}</div>
-                <div class="stats-bubble-count">${_fmt(a.play_count)}</div>
-            </div>`;
-    }).join('')}
-    </div>`;
-}
-
-function _setText(id, text) {
-    const el = document.getElementById(id);
-    if (el) el.textContent = text;
-}
-
-function _renderRankedList(containerId, items, template) {
-    const el = document.getElementById(containerId);
-    if (!el) return;
-    el.innerHTML = items.length
-        ? items.map((item, i) => template(item, i)).join('')
-        : '<div style="color:rgba(255,255,255,0.3);font-size:0.85em;padding:12px;">No data yet</div>';
-}
-
-function _renderTimelineChart(data) {
-    const canvas = document.getElementById('stats-timeline-chart');
-    if (!canvas || typeof Chart === 'undefined') return;
-
-    if (_statsTimelineChart) _statsTimelineChart.destroy();
-
-    _statsTimelineChart = new Chart(canvas, {
-        type: 'bar',
-        data: {
-            labels: data.map(d => d.date),
-            datasets: [{
-                label: 'Plays',
-                data: data.map(d => d.plays),
-                backgroundColor: `rgba(${getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '29,185,84'}, 0.5)`,
-                borderColor: `rgba(${getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '29,185,84'}, 0.8)`,
-                borderWidth: 1,
-                borderRadius: 4,
-            }]
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: false,
-            plugins: { legend: { display: false } },
-            scales: {
-                x: { grid: { display: false }, ticks: { color: 'rgba(255,255,255,0.3)', font: { size: 10 }, maxTicksLimit: 12 } },
-                y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: 'rgba(255,255,255,0.3)', font: { size: 10 } }, beginAtZero: true },
-            }
-        }
-    });
-}
-
-function _renderGenreChart(data) {
-    const canvas = document.getElementById('stats-genre-chart');
-    const legend = document.getElementById('stats-genre-legend');
-    if (!canvas || typeof Chart === 'undefined') return;
-
-    if (_statsGenreChart) _statsGenreChart.destroy();
-
-    const colors = [
-        '#1db954', '#1ed760', '#4ade80', '#7c3aed', '#a855f7',
-        '#ec4899', '#f43f5e', '#f97316', '#eab308', '#06b6d4',
-        '#3b82f6', '#6366f1', '#14b8a6', '#84cc16', '#f59e0b',
-    ];
-
-    const top = data.slice(0, 10);
-
-    _statsGenreChart = new Chart(canvas, {
-        type: 'doughnut',
-        data: {
-            labels: top.map(g => g.genre),
-            datasets: [{
-                data: top.map(g => g.play_count),
-                backgroundColor: colors.slice(0, top.length),
-                borderWidth: 0,
-                hoverOffset: 6,
-            }]
-        },
-        options: {
-            responsive: true,
-            maintainAspectRatio: true,
-            cutout: '65%',
-            plugins: { legend: { display: false } },
-        }
-    });
-
-    if (legend) {
-        legend.innerHTML = top.map((g, i) => `
-            <div class="stats-genre-legend-item">
-                <span class="stats-genre-dot" style="background:${colors[i]}"></span>
-                <span>${g.genre}</span>
-                <span class="stats-genre-pct">${g.percentage}%</span>
-            </div>
-        `).join('');
-    }
-}
-
-function _renderLibraryHealth(data) {
-    if (!data || !data.total_tracks) return;
-
-    const _fmt = (n) => {
-        if (!n) return '0';
-        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
-        if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
-        return n.toLocaleString();
-    };
-
-    _setText('stats-unplayed', `${_fmt(data.unplayed_count)} (${data.unplayed_percentage || 0}%)`);
-    _setText('stats-total-duration', data.total_duration_ms ? `${Math.floor(data.total_duration_ms / 3600000)}h` : '0h');
-    _setText('stats-total-tracks-count', _fmt(data.total_tracks));
-
-    // Format bar
-    const bar = document.getElementById('stats-format-bar');
-    if (bar && data.format_breakdown) {
-        const total = Object.values(data.format_breakdown).reduce((s, v) => s + v, 0) || 1;
-        const fmtColors = { FLAC: '#3b82f6', MP3: '#f97316', Opus: '#a855f7', AAC: '#14b8a6', OGG: '#eab308', WAV: '#ec4899', Other: '#555' };
-
-        bar.innerHTML = Object.entries(data.format_breakdown).map(([fmt, count]) => {
-            const pct = (count / total * 100).toFixed(1);
-            return `<div class="stats-format-segment" style="flex:${count};background:${fmtColors[fmt] || '#555'}" title="${fmt}: ${count} tracks (${pct}%)">${pct > 8 ? fmt : ''}</div>`;
-        }).join('');
-    }
-
-    // Enrichment coverage
-    const enrichEl = document.getElementById('stats-enrichment-coverage');
-    if (enrichEl && data.enrichment_coverage) {
-        const ec = data.enrichment_coverage;
-        const services = [
-            { name: 'Spotify', pct: ec.spotify || 0, color: '#1db954' },
-            { name: 'MusicBrainz', pct: ec.musicbrainz || 0, color: '#ba55d3' },
-            { name: 'Deezer', pct: ec.deezer || 0, color: '#a238ff' },
-            { name: 'Last.fm', pct: ec.lastfm || 0, color: '#d51007' },
-            { name: 'iTunes', pct: ec.itunes || 0, color: '#fc3c44' },
-            { name: 'AudioDB', pct: ec.audiodb || 0, color: '#1a9fff' },
-            { name: 'Genius', pct: ec.genius || 0, color: '#ffff64' },
-            { name: 'Tidal', pct: ec.tidal || 0, color: '#00ffff' },
-            { name: 'Qobuz', pct: ec.qobuz || 0, color: '#4285f4' },
-        ];
-        enrichEl.innerHTML = services.map(s => `
-            <div class="stats-enrich-item">
-                <span class="stats-enrich-name">${s.name}</span>
-                <div class="stats-enrich-bar"><div class="stats-enrich-fill" style="width:${s.pct}%;background:${s.color}"></div></div>
-                <span class="stats-enrich-pct">${s.pct}%</span>
-            </div>
-        `).join('');
-    }
-}
-
-async function _loadDbStorageChart() {
-    try {
-        const resp = await fetch('/api/stats/db-storage');
-        const data = await resp.json();
-        if (!data.success || !data.tables || !data.tables.length) return;
-        _renderDbStorageChart(data.tables, data.total_file_size, data.method);
-    } catch (e) {
-        console.debug('DB storage chart load failed:', e);
-    }
-}
-
-function _renderDbStorageChart(tables, totalFileSize, method) {
-    const canvas = document.getElementById('stats-db-storage-chart');
-    if (!canvas || typeof Chart === 'undefined') return;
-
-    if (_statsDbStorageChart) _statsDbStorageChart.destroy();
-
-    // Top 8 tables, group rest as "Other"
-    const top = tables.slice(0, 8);
-    const rest = tables.slice(8);
-    const restSize = rest.reduce((s, t) => s + t.size, 0);
-    if (restSize > 0) top.push({ name: 'Other', size: restSize });
-
-    const colors = ['#3b82f6', '#f97316', '#a855f7', '#14b8a6', '#eab308', '#ec4899', '#6366f1', '#22c55e', '#555'];
-
-    _statsDbStorageChart = new Chart(canvas, {
-        type: 'doughnut',
-        data: {
-            labels: top.map(t => t.name),
-            datasets: [{
-                data: top.map(t => t.size),
-                backgroundColor: colors.slice(0, top.length),
-                borderWidth: 0,
-                hoverOffset: 4,
-            }],
-        },
-        options: {
-            responsive: false,
-            cutout: '65%',
-            plugins: {
-                legend: { display: false },
-                tooltip: {
-                    callbacks: {
-                        label: (ctx) => {
-                            const val = ctx.parsed;
-                            if (method === 'dbstat') {
-                                if (val > 1048576) return ` ${(val / 1048576).toFixed(1)} MB`;
-                                return ` ${(val / 1024).toFixed(0)} KB`;
-                            }
-                            return ` ${val.toLocaleString()} rows`;
-                        }
-                    }
-                }
-            },
-        },
-    });
-
-    // Center label — total file size
-    const totalEl = document.getElementById('stats-db-total');
-    if (totalEl) {
-        let sizeStr;
-        if (totalFileSize > 1073741824) sizeStr = (totalFileSize / 1073741824).toFixed(2) + ' GB';
-        else if (totalFileSize > 1048576) sizeStr = (totalFileSize / 1048576).toFixed(1) + ' MB';
-        else sizeStr = (totalFileSize / 1024).toFixed(0) + ' KB';
-        totalEl.innerHTML = `<div class="stats-db-total-value">${sizeStr}</div><div class="stats-db-total-label">Total Size</div>`;
-    }
-
-    // Legend
-    const legendEl = document.getElementById('stats-db-legend');
-    if (legendEl) {
-        legendEl.innerHTML = top.map((t, i) => {
-            let sizeLabel;
-            if (method === 'dbstat') {
-                if (t.size > 1048576) sizeLabel = (t.size / 1048576).toFixed(1) + ' MB';
-                else sizeLabel = (t.size / 1024).toFixed(0) + ' KB';
-            } else {
-                sizeLabel = t.size.toLocaleString() + ' rows';
-            }
-            return `<div class="stats-db-legend-item">
-                <span class="stats-db-legend-dot" style="background:${colors[i]}"></span>
-                <span class="stats-db-legend-name">${t.name}</span>
-                <span class="stats-db-legend-size">${sizeLabel}</span>
-            </div>`;
-        }).join('');
-    }
-}
-
-async function playStatsTrack(title, artist, album) {
-    try {
-        const resp = await fetch('/api/stats/resolve-track', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ title, artist }),
-        });
-        const data = await resp.json();
-        if (!data.success || !data.track) {
-            showToast(data.error || 'Track not found in library', 'error');
-            return;
-        }
-        const t = data.track;
-        playLibraryTrack({
-            id: t.id,
-            title: t.title,
-            file_path: t.file_path,
-            bitrate: t.bitrate,
-            artist_id: t.artist_id,
-            album_id: t.album_id,
-            _stats_image: t.image_url || null,
-        }, t.album_title || album || '', t.artist_name || artist || '');
-    } catch (e) {
-        showToast('Failed to play track', 'error');
-    }
-}
-
-function _renderRecentPlays(tracks) {
-    const el = document.getElementById('stats-recent-plays');
-    if (!el) return;
-
-    if (!tracks.length) {
-        el.innerHTML = '<div style="color:rgba(255,255,255,0.3);font-size:0.85em;padding:12px;">No recent plays</div>';
-        return;
-    }
-
-    const _ago = (dateStr) => {
-        if (!dateStr) return '';
-        const diff = Date.now() - new Date(dateStr).getTime();
-        const mins = Math.floor(diff / 60000);
-        if (mins < 60) return `${mins}m ago`;
-        const hours = Math.floor(mins / 60);
-        if (hours < 24) return `${hours}h ago`;
-        const days = Math.floor(hours / 24);
-        if (days < 30) return `${days}d ago`;
-        return `${Math.floor(days / 30)}mo ago`;
-    };
-
-    el.innerHTML = tracks.map(t => `
-        <div class="stats-recent-item">
-            <button class="stats-play-btn stats-play-btn-sm" onclick="event.stopPropagation();playStatsTrack('${_esc(t.title).replace(/'/g, "\\'")}','${_esc(t.artist || '').replace(/'/g, "\\'")}','${_esc(t.album || '').replace(/'/g, "\\'")}')" title="Play">▶</button>
-            <span class="stats-recent-title">${_esc(t.title)}</span>
-            <span class="stats-recent-artist">${_esc(t.artist || '')}</span>
-            <span class="stats-recent-time">${_ago(t.played_at)}</span>
-        </div>
-    `).join('');
-}
-
-// --- Initialization ---
-
-function initializeImportPage() {
-    if (!importPageState.initialized) {
-        importPageState.initialized = true;
-        importPageRefreshStaging();
-        importPageLoadAutoGroups();
-        importPageLoadSuggestions();
-    }
-}
-
-async function importPageRefreshStaging() {
-    // Clear finished jobs from the queue
-    importPageClearFinishedJobs();
-
-    try {
-        const resp = await fetch('/api/import/staging/files');
-        const data = await resp.json();
-        if (!data.success) {
-            document.getElementById('import-page-staging-path').textContent = `Import folder: error`;
-            return;
-        }
-
-        importPageState.stagingFiles = data.files || [];
-        document.getElementById('import-page-staging-path').textContent = `Import: ${data.staging_path || 'Not configured'}`;
-
-        const totalSize = importPageState.stagingFiles.reduce((s, f) => s + (f.size || 0), 0);
-        const sizeStr = totalSize > 1073741824 ? `${(totalSize / 1073741824).toFixed(1)} GB`
-            : totalSize > 1048576 ? `${(totalSize / 1048576).toFixed(0)} MB`
-                : `${(totalSize / 1024).toFixed(0)} KB`;
-        document.getElementById('import-page-staging-stats').textContent =
-            `${importPageState.stagingFiles.length} file${importPageState.stagingFiles.length !== 1 ? 's' : ''}${totalSize ? ' · ' + sizeStr : ''}`;
-
-        // Refresh the current tab view after data is loaded
-        if (importPageState.activeTab === 'singles') {
-            importPageRenderSinglesList();
-        } else if (importPageState.activeTab === 'album') {
-            importPageLoadAutoGroups();
-        }
-        // Always refresh suggestions and groups in background
-        importPageLoadSuggestions();
-    } catch (err) {
-        console.error('Failed to refresh staging:', err);
-    }
-}
-
-function importPageSwitchTab(tab) {
-    importPageState.activeTab = tab;
-    document.getElementById('import-page-tab-album').classList.toggle('active', tab === 'album');
-    document.getElementById('import-page-tab-singles').classList.toggle('active', tab === 'singles');
-    document.getElementById('import-page-tab-auto')?.classList.toggle('active', tab === 'auto');
-    document.getElementById('import-page-album-content').classList.toggle('active', tab === 'album');
-    document.getElementById('import-page-singles-content')?.classList.toggle('active', tab === 'singles');
-    document.getElementById('import-page-auto-content')?.classList.toggle('active', tab === 'auto');
-
-    if (tab === 'singles' && importPageState.stagingFiles.length > 0) {
-        importPageRenderSinglesList();
-    }
-    if (tab === 'auto') {
-        _autoImportLoadStatus();
-        _autoImportLoadResults();
-        _autoImportStartPolling();
-    } else {
-        _autoImportStopPolling();
-    }
-}
-
-// ── Auto-Import Tab ──
-let _autoImportPollInterval = null;
-let _autoImportFilter = 'all';
-
-function _autoImportStartPolling() {
-    _autoImportStopPolling();
-    _autoImportPollInterval = setInterval(() => {
-        if (importPageState.activeTab === 'auto') {
-            _autoImportLoadStatus();
-            _autoImportLoadResults();
-        }
-    }, 5000);
-}
-
-function _autoImportStopPolling() {
-    if (_autoImportPollInterval) { clearInterval(_autoImportPollInterval); _autoImportPollInterval = null; }
-}
-
-async function _autoImportToggle(enabled) {
-    // Optimistically update toggle state so it doesn't flicker
-    const toggle = document.getElementById('auto-import-enabled');
-    if (toggle) toggle.checked = enabled;
-    const statusText = document.getElementById('auto-import-status-text');
-    if (statusText) statusText.textContent = enabled ? 'Starting...' : 'Stopping...';
-
-    try {
-        const res = await fetch('/api/auto-import/toggle', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ enabled })
-        });
-        const data = await res.json();
-        if (data.success) {
-            showToast(enabled ? 'Auto-import enabled' : 'Auto-import disabled', 'success');
-            _autoImportLoadStatus();
-        } else {
-            // Revert on failure
-            if (toggle) toggle.checked = !enabled;
-        }
-    } catch (e) {
-        showToast('Error: ' + e.message, 'error');
-        if (toggle) toggle.checked = !enabled;
-    }
-}
-
-async function _autoImportLoadStatus() {
-    try {
-        const res = await fetch('/api/auto-import/status');
-        const data = await res.json();
-        if (!data.success) return;
-
-        const toggle = document.getElementById('auto-import-enabled');
-        const statusText = document.getElementById('auto-import-status-text');
-        const settingsRow = document.getElementById('auto-import-settings-row');
-        const scanNowBtn = document.getElementById('auto-import-scan-now');
-        const progressEl = document.getElementById('auto-import-progress');
-        const progressText = document.getElementById('auto-import-progress-text');
-
-        if (toggle) toggle.checked = data.running;
-        if (settingsRow) settingsRow.style.display = data.running ? '' : 'none';
-        if (scanNowBtn) scanNowBtn.style.display = data.running ? '' : 'none';
-
-        // Live scan progress
-        if (progressEl) {
-            if (data.current_status === 'scanning') {
-                progressEl.style.display = '';
-                if (progressText) {
-                    const stats = data.stats || {};
-                    progressText.textContent = `Scanning: ${data.current_folder || '...'} (${stats.scanned || 0} processed)`;
-                }
-            } else {
-                progressEl.style.display = 'none';
-            }
-        }
-
-        if (statusText) {
-            if (data.paused) statusText.textContent = 'Paused';
-            else if (data.current_status === 'scanning') statusText.textContent = 'Scanning...';
-            else if (data.running) {
-                // Show last scan time
-                let watchText = 'Watching';
-                if (data.last_scan_time) {
-                    try {
-                        const lastScan = new Date(data.last_scan_time);
-                        const diffS = Math.floor((Date.now() - lastScan) / 1000);
-                        if (diffS < 60) watchText = `Watching (scanned ${diffS}s ago)`;
-                        else if (diffS < 3600) watchText = `Watching (scanned ${Math.floor(diffS / 60)}m ago)`;
-                    } catch (e) {}
-                }
-                statusText.textContent = watchText;
-            } else statusText.textContent = 'Disabled';
-            statusText.className = 'auto-import-status ' + (data.running ? (data.current_status === 'scanning' ? 'scanning' : 'active') : 'disabled');
-        }
-    } catch (e) {}
-}
-
-async function _autoImportLoadResults() {
-    const container = document.getElementById('auto-import-results');
-    if (!container) return;
-    try {
-        const res = await fetch('/api/auto-import/results?limit=100');
-        const data = await res.json();
-        if (!data.success || !data.results || data.results.length === 0) {
-            if (!container.querySelector('.auto-import-card')) {
-                container.innerHTML = `<div class="auto-import-empty">
-                    <p>No imports yet. Drop album folders or single tracks into your import folder.</p>
-                </div>`;
-            }
-            // Hide stats and filters
-            const statsEl = document.getElementById('auto-import-stats');
-            const filtersEl = document.getElementById('auto-import-filters');
-            if (statsEl) statsEl.style.display = 'none';
-            if (filtersEl) filtersEl.style.display = 'none';
-            return;
-        }
-
-        // Compute stats
-        const allResults = data.results;
-        const importedCount = allResults.filter(r => r.status === 'completed' || r.status === 'approved').length;
-        const reviewCount = allResults.filter(r => r.status === 'pending_review').length;
-        const failedCount = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification').length;
-
-        // Update stats
-        const statsEl = document.getElementById('auto-import-stats');
-        if (statsEl) {
-            statsEl.style.display = '';
-            document.getElementById('auto-import-stat-imported').textContent = `${importedCount} imported`;
-            document.getElementById('auto-import-stat-review').textContent = `${reviewCount} review`;
-            document.getElementById('auto-import-stat-failed').textContent = `${failedCount} failed`;
-        }
-
-        // Show filters
-        const filtersEl = document.getElementById('auto-import-filters');
-        if (filtersEl) {
-            filtersEl.style.display = '';
-            // Show batch action buttons when applicable
-            const approveAllBtn = document.getElementById('auto-import-approve-all');
-            const clearBtn = document.getElementById('auto-import-clear-completed');
-            if (approveAllBtn) approveAllBtn.style.display = reviewCount > 0 ? '' : 'none';
-            if (clearBtn) clearBtn.style.display = (importedCount + failedCount) > 0 ? '' : 'none';
-        }
-
-        // Apply filter
-        let filtered = allResults;
-        if (_autoImportFilter === 'pending') filtered = allResults.filter(r => r.status === 'pending_review');
-        else if (_autoImportFilter === 'imported') filtered = allResults.filter(r => r.status === 'completed' || r.status === 'approved');
-        else if (_autoImportFilter === 'failed') filtered = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification');
-
-        if (filtered.length === 0) {
-            const filterName = _autoImportFilter === 'pending' ? 'pending review' : _autoImportFilter;
-            container.innerHTML = `<div class="auto-import-empty"><p>No ${filterName} items.</p></div>`;
-            return;
-        }
-
-        container.innerHTML = filtered.map((r, idx) => {
-            const confPct = Math.round((r.confidence || 0) * 100);
-            const confClass = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
-            const statusLabels = {
-                'completed': 'Imported', 'pending_review': 'Needs Review',
-                'needs_identification': 'Unidentified', 'failed': 'Failed',
-                'scanning': 'Scanning...', 'matched': 'Matched',
-                'rejected': 'Dismissed', 'approved': 'Approved',
-            };
-            const statusIcons = {
-                'completed': '\u2713', 'pending_review': '\u26A0',
-                'needs_identification': '\u2717', 'failed': '\u2717',
-                'scanning': '\u231B', 'matched': '\u2713',
-                'rejected': '\u2715', 'approved': '\u2713',
-            };
-            const statusLabel = statusLabels[r.status] || r.status;
-            const statusIcon = statusIcons[r.status] || '';
-            const statusClass = r.status === 'completed' ? 'completed' : r.status === 'pending_review' ? 'review' :
-                r.status === 'failed' || r.status === 'needs_identification' ? 'failed' : 'neutral';
-
-            // Parse match data for track details
-            let matchCount = 0, totalTracks = 0, trackDetails = [];
-            if (r.match_data) {
-                try {
-                    const md = typeof r.match_data === 'string' ? JSON.parse(r.match_data) : r.match_data;
-                    matchCount = md.matched_count || 0;
-                    totalTracks = md.total_tracks || 0;
-                    if (md.matches) {
-                        trackDetails = md.matches.map(m => ({
-                            name: m.track_name || m.track?.name || 'Unknown',
-                            file: m.file ? m.file.split(/[/\\]/).pop() : '?',
-                            confidence: Math.round((m.confidence || 0) * 100),
-                        }));
-                    }
-                } catch (e) {}
-            }
-
-            const matchSummary = totalTracks > 0 ? `${matchCount}/${totalTracks} tracks` : `${r.total_files} files`;
-            const methodLabels = { tags: 'Tags', folder_name: 'Folder Name', acoustid: 'AcoustID', filename: 'Filename' };
-            const methodLabel = methodLabels[r.identification_method] || r.identification_method || '';
-
-            // Time ago
-            let timeAgo = '';
-            if (r.created_at) {
-                try {
-                    const d = new Date(r.created_at);
-                    const diffM = Math.floor((Date.now() - d) / 60000);
-                    if (diffM < 1) timeAgo = 'just now';
-                    else if (diffM < 60) timeAgo = `${diffM}m ago`;
-                    else if (diffM < 1440) timeAgo = `${Math.floor(diffM / 60)}h ago`;
-                    else timeAgo = `${Math.floor(diffM / 1440)}d ago`;
-                } catch (e) {}
-            }
-
-            let actions = '';
-            if (r.status === 'pending_review') {
-                actions = `<div class="auto-import-actions">
-                    <button class="watchlist-action-btn watchlist-action-primary" onclick="event.stopPropagation(); _autoImportApprove(${r.id})">Approve & Import</button>
-                    <button class="watchlist-action-btn watchlist-action-secondary" onclick="event.stopPropagation(); _autoImportReject(${r.id})">Dismiss</button>
-                </div>`;
-            }
-
-            // Expanded track list (hidden by default)
-            let trackListHtml = '';
-            if (trackDetails.length > 0) {
-                trackListHtml = `<div class="auto-import-track-list" id="auto-import-tracks-${idx}">
-                    <div class="auto-import-track-list-header">
-                        <span>Track</span><span>Matched File</span><span>Conf</span>
-                    </div>
-                    ${trackDetails.map(t => {
-                        const tConfClass = t.confidence >= 90 ? 'high' : t.confidence >= 70 ? 'medium' : 'low';
-                        return `<div class="auto-import-track-row">
-                            <span class="auto-import-track-name">${escapeHtml(t.name)}</span>
-                            <span class="auto-import-track-file">${escapeHtml(t.file)}</span>
-                            <span class="auto-import-track-conf auto-import-conf-${tConfClass}">${t.confidence}%</span>
-                        </div>`;
-                    }).join('')}
-                </div>`;
-            }
-
-            return `<div class="auto-import-card auto-import-${statusClass}" onclick="_autoImportToggleDetail(${idx})" style="cursor:pointer">
-                <div class="auto-import-card-top">
-                    <div class="auto-import-card-left">
-                        ${r.image_url ? `<img class="auto-import-card-art" src="${r.image_url}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="auto-import-card-art-fallback" style="display:none">\uD83D\uDCBF</div>` : `<div class="auto-import-card-art-fallback">\uD83D\uDCBF</div>`}
-                    </div>
-                    <div class="auto-import-card-center">
-                        <div class="auto-import-card-album">${escapeHtml(r.album_name || r.folder_name)}</div>
-                        <div class="auto-import-card-artist">${escapeHtml(r.artist_name || 'Unknown Artist')}</div>
-                        <div class="auto-import-card-meta">
-                            <span>${matchSummary}</span>
-                            ${methodLabel ? `<span class="auto-import-method-badge">${methodLabel}</span>` : ''}
-                            ${timeAgo ? `<span>${timeAgo}</span>` : ''}
-                        </div>
-                        ${r.error_message ? `<div class="auto-import-card-error">${escapeHtml(r.error_message)}</div>` : ''}
-                    </div>
-                    <div class="auto-import-card-right">
-                        <div class="auto-import-status-badge auto-import-badge-${statusClass}">${statusIcon} ${statusLabel}</div>
-                        <div class="auto-import-confidence-bar">
-                            <div class="auto-import-confidence-fill auto-import-conf-${confClass}" style="width:${confPct}%"></div>
-                        </div>
-                        <div class="auto-import-confidence-text">${confPct}% confidence</div>
-                        ${actions}
-                    </div>
-                </div>
-                <div class="auto-import-card-folder-path">${escapeHtml(r.folder_name)}</div>
-                ${trackListHtml}
-            </div>`;
-        }).join('');
-
-    } catch (e) {}
-}
-
-async function _autoImportSaveSettings() {
-    const confidence = (document.getElementById('auto-import-confidence')?.value || 90) / 100;
-    const interval = parseInt(document.getElementById('auto-import-interval')?.value || 60);
-    try {
-        await fetch('/api/auto-import/settings', {
-            method: 'POST', headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ confidence_threshold: confidence, scan_interval: interval })
-        });
-        showToast('Settings saved', 'success');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-function _autoImportSetFilter(filter) {
-    _autoImportFilter = filter;
-    document.querySelectorAll('#auto-import-filters .adl-pill').forEach(p =>
-        p.classList.toggle('active', p.dataset.filter === filter));
-    _autoImportLoadResults();
-}
-
-async function _autoImportScanNow() {
-    try {
-        const res = await fetch('/api/auto-import/scan-now', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Scan triggered', 'success');
-            _autoImportLoadStatus();
-        } else {
-            showToast(data.error || 'Failed to trigger scan', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-async function _autoImportApproveAll() {
-    const confirmed = await showConfirmDialog({
-        title: 'Approve All',
-        message: 'Approve and import all pending review items?',
-        confirmText: 'Approve All',
-    });
-    if (!confirmed) return;
-    try {
-        const res = await fetch('/api/auto-import/approve-all', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Approved ${data.count || 0} items`, 'success');
-            _autoImportLoadResults();
-        } else {
-            showToast(data.error || 'Failed', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-async function _autoImportClearCompleted() {
-    try {
-        const res = await fetch('/api/auto-import/clear-completed', { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Cleared ${data.count || 0} imported items`, 'success');
-            _autoImportLoadResults();
-        } else {
-            showToast(data.error || 'Failed', 'error');
-        }
-    } catch (e) { showToast('Error: ' + e.message, 'error'); }
-}
-
-function _autoImportToggleDetail(idx) {
-    const trackList = document.getElementById(`auto-import-tracks-${idx}`);
-    if (trackList) {
-        trackList.classList.toggle('expanded');
-    }
-}
-window._autoImportToggleDetail = _autoImportToggleDetail;
-window._autoImportSetFilter = _autoImportSetFilter;
-window._autoImportScanNow = _autoImportScanNow;
-window._autoImportApproveAll = _autoImportApproveAll;
-window._autoImportClearCompleted = _autoImportClearCompleted;
-
-async function _autoImportApprove(id) {
-    try {
-        const res = await fetch(`/api/auto-import/approve/${id}`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) { showToast('Approved', 'success'); _autoImportLoadResults(); }
-        else showToast(data.error || 'Failed', 'error');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-async function _autoImportReject(id) {
-    try {
-        const res = await fetch(`/api/auto-import/reject/${id}`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) { showToast('Dismissed', 'success'); _autoImportLoadResults(); }
-        else showToast(data.error || 'Failed', 'error');
-    } catch (e) { showToast('Error', 'error'); }
-}
-
-// --- Album Tab: Auto-Detected Groups (from file tags) ---
-
-async function importPageLoadAutoGroups() {
-    const grid = document.getElementById('import-page-suggestions-grid');
-    if (!grid) return;
-
-    try {
-        const resp = await fetch('/api/import/staging/groups');
-        if (!resp.ok) return;
-        const data = await resp.json();
-
-        if (!data.success || !data.groups || data.groups.length === 0) return;
-
-        // Build auto-groups section above suggestions
-        let groupsContainer = document.getElementById('import-page-auto-groups');
-        if (!groupsContainer) {
-            groupsContainer = document.createElement('div');
-            groupsContainer.id = 'import-page-auto-groups';
-            groupsContainer.style.marginBottom = '16px';
-            const suggestionsSection = document.getElementById('import-page-suggestions');
-            if (suggestionsSection) {
-                suggestionsSection.parentNode.insertBefore(groupsContainer, suggestionsSection);
-            } else {
-                grid.parentNode.insertBefore(groupsContainer, grid);
-            }
-        }
-
-        groupsContainer.innerHTML = `
-            <div style="font-size:0.82em;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;">
-                Auto-Detected Albums
-            </div>
-            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;">
-                ${data.groups.map((g, idx) => `
-                    <div class="import-page-album-card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);transition:all 0.2s;"
-                         onmouseenter="this.style.borderColor='rgba(255,255,255,0.12)';this.style.background='rgba(255,255,255,0.05)'"
-                         onmouseleave="this.style.borderColor='rgba(255,255,255,0.06)';this.style.background='rgba(255,255,255,0.03)'"
-                         onclick="importPageMatchAutoGroup(${idx})">
-                        <div style="width:48px;height:48px;border-radius:8px;background:rgba(var(--accent-rgb,29,185,84),0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2em;">
-                            ${g.file_count}
-                        </div>
-                        <div style="min-width:0;">
-                            <div style="font-size:0.92em;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.album)}">${_esc(g.album)}</div>
-                            <div style="font-size:0.8em;color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.artist)}">${_esc(g.artist)} · ${g.file_count} tracks</div>
-                        </div>
-                    </div>
-                `).join('')}
-            </div>
-        `;
-
-        // Store groups for click handler
-        importPageState._autoGroups = data.groups;
-    } catch (err) {
-        console.warn('Failed to load auto-groups:', err);
-    }
-}
-
-async function importPageMatchAutoGroup(groupIdx) {
-    const group = importPageState._autoGroups?.[groupIdx];
-    if (!group) return;
-
-    // Search for the album by name + artist
-    const query = `${group.artist} ${group.album}`;
-    const searchInput = document.getElementById('import-page-album-search-input');
-    if (searchInput) searchInput.value = query;
-
-    // Hide suggestions/groups, show search results
-    const suggestionsEl = document.getElementById('import-page-suggestions');
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (suggestionsEl) suggestionsEl.style.display = 'none';
-    if (groupsEl) groupsEl.style.display = 'none';
-
-    const grid = document.getElementById('import-page-album-results');
-    if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
-        const data = await resp.json();
-
-        if (data.success && data.albums && data.albums.length > 0) {
-            // Store file_paths filter so match only includes this group's files
-            importPageState._autoGroupFilePaths = group.file_paths;
-
-            // Render results — user picks the right album
-            grid.innerHTML = data.albums.map(a => _renderSuggestionCard(a)).join('');
-        } else {
-            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found — try searching manually</div>';
-        }
-    } catch (err) {
-        console.error('Auto-group search failed:', err);
-        if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Search failed</div>';
-    }
-}
-
-// --- Album Tab: Suggestions (server-side cache, just fetch and render) ---
-
-async function importPageLoadSuggestions() {
-    const section = document.getElementById('import-page-suggestions');
-    const grid = document.getElementById('import-page-suggestions-grid');
-    if (!section || !grid) return;
-
-    try {
-        const resp = await fetch('/api/import/staging/suggestions');
-        if (!resp.ok) return;
-        const data = await resp.json();
-
-        if (!data.success || !data.suggestions || data.suggestions.length === 0) {
-            if (!data.ready) {
-                // Server is still building cache — show placeholder, retry shortly
-                section.style.display = '';
-                grid.innerHTML = '<div style="color:#888;font-size:13px;padding:8px;">Loading suggestions...</div>';
-                setTimeout(() => importPageLoadSuggestions(), 3000);
-            } else {
-                section.style.display = 'none';
-                grid.innerHTML = '';
-            }
-            return;
-        }
-
-        section.style.display = '';
-        grid.innerHTML = data.suggestions.map(a => _renderSuggestionCard(a)).join('');
-    } catch (err) {
-        // Network error or server not ready — fail silently
-        console.warn('Failed to load import suggestions:', err);
-    }
-}
-
-function _renderSuggestionCard(a) {
-    return `<div class="import-page-album-card" onclick="importPageSelectAlbum('${a.id}')">
-        <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
-        <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
-        <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
-        <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
-    </div>`;
-}
-
-// --- Album Tab: Search ---
-
-async function importPageSearchAlbum() {
-    const query = document.getElementById('import-page-album-search-input').value.trim();
-    if (!query) return;
-
-    document.getElementById('import-page-suggestions').style.display = 'none';
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (groupsEl) groupsEl.style.display = 'none';
-    const grid = document.getElementById('import-page-album-results');
-    grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
-        const data = await resp.json();
-        if (!data.success || !data.albums.length) {
-            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found</div>';
-            return;
-        }
-        grid.innerHTML = data.albums.map(a => `
-            <div class="import-page-album-card" onclick="importPageSelectAlbum('${a.id}')">
-                <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
-                <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
-                <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
-                <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
-            </div>
-        `).join('');
-        document.getElementById('import-page-album-clear-btn').classList.remove('hidden');
-    } catch (err) {
-        grid.innerHTML = `<div style="color:#ef4444;text-align:center;padding:20px;">Error: ${err.message}</div>`;
-    }
-}
-
-// --- Album Tab: Select Album & Match ---
-
-async function importPageSelectAlbum(albumId) {
-    document.getElementById('import-page-album-search-section').classList.add('hidden');
-    document.getElementById('import-page-album-match-section').classList.remove('hidden');
-
-    const matchList = document.getElementById('import-page-match-list');
-    matchList.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Matching files to tracklist...</div>';
-
-    try {
-        // Include file_paths filter if matching from an auto-group
-        const matchBody = { album_id: albumId };
-        if (importPageState._autoGroupFilePaths) {
-            matchBody.file_paths = importPageState._autoGroupFilePaths;
-            importPageState._autoGroupFilePaths = null; // clear after use
-        }
-        const resp = await fetch('/api/import/album/match', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(matchBody)
-        });
-        const data = await resp.json();
-        if (!data.success) {
-            matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${data.error}</div>`;
-            return;
-        }
-
-        importPageState.albumData = data;
-        importPageState.matchOverrides = {};
-
-        // Render hero
-        const album = data.album;
-        document.getElementById('import-page-album-hero').innerHTML = `
-            <img src="${album.image_url || '/static/placeholder.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
-            <div class="import-page-album-hero-info">
-                <div class="import-page-album-hero-title">${_esc(album.name)}</div>
-                <div class="import-page-album-hero-artist">${_esc(album.artist)}</div>
-                <div class="import-page-album-hero-meta">${album.total_tracks} tracks · ${album.release_date ? album.release_date.substring(0, 4) : ''}</div>
-            </div>
-        `;
-
-        importPageRenderMatchList();
-    } catch (err) {
-        matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${err.message}</div>`;
-    }
-}
-
-function importPageRenderMatchList() {
-    const data = importPageState.albumData;
-    if (!data) return;
-
-    const matchList = document.getElementById('import-page-match-list');
-    const overrides = importPageState.matchOverrides;
-
-    // Build effective matches: auto-match overridden by manual overrides
-    // Also track which staging files are used (auto or override)
-    const usedStagingFiles = new Set();
-
-    // First pass: collect overridden indices
-    Object.values(overrides).forEach(sfIdx => usedStagingFiles.add(sfIdx));
-
-    // Build rows
-    let matchedCount = 0;
-    const rows = data.matches.map((m, idx) => {
-        let file = null;
-        let confidence = m.confidence;
-        let isOverride = false;
-
-        if (overrides.hasOwnProperty(idx)) {
-            const sfIdx = overrides[idx];
-            if (sfIdx === -1) {
-                // Forcibly unmatched — no file
-                file = null;
-            } else {
-                // Manual override
-                file = importPageState.stagingFiles[sfIdx] || null;
-                confidence = 1.0;
-                isOverride = true;
-                usedStagingFiles.add(sfIdx);
-            }
-        } else if (m.staging_file) {
-            file = m.staging_file;
-            // Check if this file was reassigned to another track via override
-            const autoFileName = m.staging_file.filename;
-            const reassigned = Object.entries(overrides).some(([tIdx, sfIdx]) => {
-                const sf = importPageState.stagingFiles[sfIdx];
-                return sf && sf.filename === autoFileName && parseInt(tIdx) !== idx;
-            });
-            if (!reassigned) {
-                usedStagingFiles.add(-1); // placeholder — auto-matched file
-            } else {
-                file = null; // file was reassigned elsewhere
-            }
-        }
-
-        if (file) matchedCount++;
-        const confPercent = Math.round(confidence * 100);
-        const confClass = confidence >= 0.7 ? '' : 'low';
-
-        return `
-            <div class="import-page-match-row ${file ? 'matched' : ''}"
-                 ondragover="importPageHandleDragOver(event)" ondragleave="this.classList.remove('drag-over')" ondrop="importPageHandleDrop(event, ${idx})"
-                 onclick="importPageTapAssign(${idx})">
-                <span class="import-page-match-num">${m.spotify_track.track_number}</span>
-                <span class="import-page-match-track">${_esc(m.spotify_track.name)}</span>
-                <span class="import-page-match-file ${file ? 'has-file' : ''}">
-                    ${file
-                ? `<span class="import-page-match-file-name">${_esc(file.filename)}</span>
-                           <span class="import-page-match-confidence ${confClass}">${confPercent}%</span>`
-                : `<span class="import-page-match-drop-zone">Drop a file here</span>`}
-                </span>
-                <span>${file ? `<button class="import-page-match-unmatch" onclick="event.stopPropagation(); importPageUnmatchTrack(${idx})">✕</button>` : ''}</span>
-            </div>
-        `;
-    });
-
-    matchList.innerHTML = rows.join('');
-
-    // Unmatched file pool
-    const unmatchedFiles = [];
-    importPageState.stagingFiles.forEach((f, i) => {
-        // Check if used by override
-        if (Object.values(overrides).includes(i)) return;
-        // Check if used by auto-match (not overridden away)
-        const autoUsed = data.matches.some((m, mIdx) => {
-            if (overrides.hasOwnProperty(mIdx)) return false;
-            return m.staging_file && m.staging_file.filename === f.filename;
-        });
-        if (autoUsed) return;
-        unmatchedFiles.push({ file: f, index: i });
-    });
-
-    const poolChips = document.getElementById('import-page-pool-chips');
-    document.getElementById('import-page-unmatched-count').textContent = unmatchedFiles.length;
-
-    if (unmatchedFiles.length === 0) {
-        poolChips.innerHTML = '<span class="import-page-pool-empty">All files matched</span>';
-    } else {
-        poolChips.innerHTML = unmatchedFiles.map(({ file, index }) => `
-            <span class="import-page-file-chip ${importPageState.tapSelectedChip === index ? 'selected' : ''}"
-                  draggable="true" ondragstart="importPageStartDrag(event, ${index})"
-                  onclick="event.stopPropagation(); importPageTapSelectChip(${index})">
-                ${_esc(file.filename)}
-            </span>
-        `).join('');
-    }
-
-    // Stats & button
-    document.getElementById('import-page-match-stats').textContent = `${matchedCount} of ${data.matches.length} tracks matched`;
-    const processBtn = document.getElementById('import-page-album-process-btn');
-    processBtn.disabled = matchedCount === 0;
-    processBtn.textContent = `Process ${matchedCount} Track${matchedCount !== 1 ? 's' : ''}`;
-}
-
-// --- Album Tab: Drag and Drop ---
-
-function importPageStartDrag(event, stagingFileIndex) {
-    event.dataTransfer.setData('text/plain', stagingFileIndex.toString());
-    event.dataTransfer.effectAllowed = 'move';
-}
-
-function importPageHandleDragOver(event) {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
-    event.currentTarget.classList.add('drag-over');
-    // Remove drag-over from others
-    document.querySelectorAll('.import-page-match-row.drag-over').forEach(el => {
-        if (el !== event.currentTarget) el.classList.remove('drag-over');
-    });
-}
-
-function importPageHandleDrop(event, trackIndex) {
-    event.preventDefault();
-    event.currentTarget.classList.remove('drag-over');
-    const stagingFileIndex = parseInt(event.dataTransfer.getData('text/plain'));
-    if (isNaN(stagingFileIndex)) return;
-
-    // Remove this staging file from any other track it was assigned to
-    Object.keys(importPageState.matchOverrides).forEach(k => {
-        if (importPageState.matchOverrides[k] === stagingFileIndex) {
-            delete importPageState.matchOverrides[k];
-        }
-    });
-
-    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-// Mobile tap-to-assign fallback
-function importPageTapSelectChip(stagingFileIndex) {
-    if (importPageState.tapSelectedChip === stagingFileIndex) {
-        importPageState.tapSelectedChip = null;
-    } else {
-        importPageState.tapSelectedChip = stagingFileIndex;
-    }
-    importPageRenderMatchList();
-}
-
-function importPageTapAssign(trackIndex) {
-    if (importPageState.tapSelectedChip === null) return;
-    const stagingFileIndex = importPageState.tapSelectedChip;
-
-    // Remove from any other track
-    Object.keys(importPageState.matchOverrides).forEach(k => {
-        if (importPageState.matchOverrides[k] === stagingFileIndex) {
-            delete importPageState.matchOverrides[k];
-        }
-    });
-
-    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-function importPageUnmatchTrack(trackIndex) {
-    delete importPageState.matchOverrides[trackIndex];
-    // Also remove auto-match by setting override to -1 special value? No — just delete override and let auto-match stay.
-    // Actually, to truly unmatch: we need to suppress the auto-match too.
-    // We'll use a sentinel: override = -1 means "forcibly unmatched"
-    const m = importPageState.albumData?.matches[trackIndex];
-    if (m && m.staging_file) {
-        importPageState.matchOverrides[trackIndex] = -1; // sentinel: force no match
-    }
-    importPageRenderMatchList();
-}
-
-function importPageAutoRematch() {
-    importPageState.matchOverrides = {};
-    importPageState.tapSelectedChip = null;
-    importPageRenderMatchList();
-}
-
-// --- Album Tab: Process ---
-
-function importPageProcessAlbum() {
-    const data = importPageState.albumData;
-    if (!data) return;
-
-    // Build effective matches with overrides applied
-    const overrides = importPageState.matchOverrides;
-    const effectiveMatches = [];
-    data.matches.forEach((m, idx) => {
-        if (overrides.hasOwnProperty(idx)) {
-            if (overrides[idx] === -1) return; // forcibly unmatched — skip
-            const sf = importPageState.stagingFiles[overrides[idx]];
-            effectiveMatches.push({ ...m, staging_file: sf, confidence: 1.0 });
-        } else if (m.staging_file !== null) {
-            effectiveMatches.push(m);
-        }
-    });
-
-    if (effectiveMatches.length === 0) return;
-
-    // Add to queue and reset search immediately so user can queue more
-    const album = data.album;
-    _importQueueAdd({
-        type: 'album',
-        label: album.name,
-        sublabel: `${album.artist} · ${effectiveMatches.length} tracks`,
-        imageUrl: album.image_url,
-        items: effectiveMatches,
-        albumData: album,
-    });
-
-    importPageResetAlbumSearch();
-}
-
-function importPageResetAlbumSearch() {
-    importPageState.albumData = null;
-    importPageState.matchOverrides = {};
-    importPageState.tapSelectedChip = null;
-    importPageState._autoGroupFilePaths = null;
-
-    document.getElementById('import-page-album-search-section').classList.remove('hidden');
-    document.getElementById('import-page-album-match-section').classList.add('hidden');
-
-    // Clear search
-    document.getElementById('import-page-album-results').innerHTML = '';
-    document.getElementById('import-page-album-search-input').value = '';
-    document.getElementById('import-page-album-clear-btn').classList.add('hidden');
-
-    // Re-show auto-groups
-    const groupsEl = document.getElementById('import-page-auto-groups');
-    if (groupsEl) groupsEl.style.display = '';
-
-    // Refresh suggestions & staging
-    importPageLoadAutoGroups();
-    importPageLoadSuggestions();
-    importPageRefreshStaging();
-}
-
-// --- Singles Tab ---
-
-function importPageRenderSinglesList() {
-    const list = document.getElementById('import-page-singles-list');
-    const files = importPageState.stagingFiles;
-
-    if (files.length === 0) {
-        list.innerHTML = '<div class="import-page-empty-state">No audio files found in import folder</div>';
-        return;
-    }
-
-    list.innerHTML = files.map((f, i) => {
-        const isSelected = importPageState.selectedSingles.has(i);
-        const manualMatch = importPageState.singlesManualMatches[i];
-        const searchOpen = document.querySelector(`[data-singles-search="${i}"]`);
-
-        let html = `
-            <div class="import-page-single-item ${manualMatch ? 'matched' : ''}" data-single-idx="${i}">
-                <div class="import-page-single-checkbox ${isSelected ? 'checked' : ''}"
-                     onclick="importPageToggleSingle(${i})"></div>
-                <div class="import-page-single-info">
-                    <div class="import-page-single-filename">${_esc(f.filename)}</div>
-                    <div class="import-page-single-meta">
-                        ${f.title ? `<span>${_esc(f.title)}</span>` : ''}
-                        ${f.artist ? `<span>${_esc(f.artist)}</span>` : ''}
-                        ${f.extension ? `<span>${f.extension}</span>` : ''}
-                    </div>
-                    ${manualMatch ? `
-                        <div class="import-page-single-matched-info">
-                            &#10003; ${_esc(manualMatch.name)} - ${_esc(manualMatch.artist)}
-                            <span class="import-page-single-matched-change" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">change</span>
-                        </div>
-                    ` : ''}
-                </div>
-                <div class="import-page-single-actions">
-                    <button class="import-page-identify-btn" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">
-                        &#128269; Identify
-                    </button>
-                </div>
-            </div>
-        `;
-        return html;
-    }).join('');
-
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageToggleSingle(idx) {
-    if (importPageState.selectedSingles.has(idx)) {
-        importPageState.selectedSingles.delete(idx);
-    } else {
-        importPageState.selectedSingles.add(idx);
-    }
-    // Update checkbox UI without full re-render
-    const item = document.querySelector(`[data-single-idx="${idx}"]`);
-    if (item) {
-        const cb = item.querySelector('.import-page-single-checkbox');
-        if (cb) cb.classList.toggle('checked', importPageState.selectedSingles.has(idx));
-    }
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageSelectAllSingles() {
-    const allSelected = importPageState.selectedSingles.size === importPageState.stagingFiles.length;
-    if (allSelected) {
-        importPageState.selectedSingles.clear();
-    } else {
-        importPageState.stagingFiles.forEach((_, i) => importPageState.selectedSingles.add(i));
-    }
-    document.getElementById('import-page-select-all-text').textContent = allSelected ? 'Select All' : 'Deselect All';
-    // Update all checkboxes
-    document.querySelectorAll('.import-page-single-checkbox').forEach((cb, i) => {
-        cb.classList.toggle('checked', importPageState.selectedSingles.has(i));
-    });
-    importPageUpdateSinglesProcessButton();
-}
-
-function importPageUpdateSinglesProcessButton() {
-    const btn = document.getElementById('import-page-singles-process-btn');
-    const count = importPageState.selectedSingles.size;
-    btn.textContent = `Process Selected (${count})`;
-    btn.disabled = count === 0;
-}
-
-function importPageOpenSingleSearch(fileIdx) {
-    const item = document.querySelector(`[data-single-idx="${fileIdx}"]`);
-    if (!item) return;
-
-    // Remove any existing search panel
-    const existing = item.querySelector('.import-page-single-search-panel');
-    if (existing) {
-        existing.remove();
-        return;
-    }
-
-    // Close other open panels
-    document.querySelectorAll('.import-page-single-search-panel').forEach(p => p.remove());
-
-    const f = importPageState.stagingFiles[fileIdx];
-    const defaultQuery = [f.artist, f.title].filter(Boolean).join(' ') || f.filename.replace(/\.[^.]+$/, '');
-
-    const panel = document.createElement('div');
-    panel.className = 'import-page-single-search-panel';
-    panel.innerHTML = `
-        <div class="import-page-single-search-bar">
-            <input type="text" class="import-page-single-search-input"
-                   value="${_escAttr(defaultQuery)}" placeholder="Search artist - title..."
-                   onkeydown="if(event.key==='Enter')importPageSearchSingleTrack(${fileIdx}, this.value)">
-            <button class="import-page-single-search-go"
-                    onclick="importPageSearchSingleTrack(${fileIdx}, this.previousElementSibling.value)">Search</button>
-        </div>
-        <div class="import-page-single-search-results" id="import-single-results-${fileIdx}"></div>
-    `;
-    item.appendChild(panel);
-
-    // Auto-search
-    const input = panel.querySelector('input');
-    input.focus();
-    if (defaultQuery) {
-        importPageSearchSingleTrack(fileIdx, defaultQuery);
-    }
-}
-
-async function importPageSearchSingleTrack(fileIdx, query) {
-    if (!query || !query.trim()) return;
-
-    const resultsDiv = document.getElementById(`import-single-results-${fileIdx}`);
-    if (!resultsDiv) return;
-    resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">Searching...</div>';
-
-    try {
-        const resp = await fetch(`/api/import/search/tracks?q=${encodeURIComponent(query.trim())}&limit=6`);
-        const data = await resp.json();
-        if (!data.success || !data.tracks.length) {
-            resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">No results found</div>';
-            return;
-        }
-        // Store results in a temp cache so we can reference by index
-        window._importSingleSearchResults = window._importSingleSearchResults || {};
-        window._importSingleSearchResults[fileIdx] = data.tracks;
-
-        resultsDiv.innerHTML = data.tracks.map((t, tIdx) => {
-            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
-            return `
-                <div class="import-page-single-result-item" onclick="importPageSelectSingleMatch(${fileIdx}, ${tIdx})">
-                    ${t.image_url ? `<img class="import-page-single-result-img" src="${t.image_url}" onerror="this.src='/static/placeholder.png'">` : ''}
-                    <div class="import-page-single-result-info">
-                        <div class="import-page-single-result-name">${_esc(t.name)} - ${_esc(t.artist)}</div>
-                        <div class="import-page-single-result-detail">${_esc(t.album)}${dur ? ' · ' + dur : ''}</div>
-                    </div>
-                    <button class="import-page-single-result-select">Select</button>
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        resultsDiv.innerHTML = `<div style="color:#ef4444;padding:8px;font-size:12px;">Error: ${err.message}</div>`;
-    }
-}
-
-function importPageSelectSingleMatch(fileIdx, trackIdx) {
-    const trackData = window._importSingleSearchResults?.[fileIdx]?.[trackIdx];
-    if (!trackData) return;
-    importPageState.singlesManualMatches[fileIdx] = trackData;
-
-    // Auto-select this file
-    importPageState.selectedSingles.add(fileIdx);
-
-    // Close search panel and re-render this item
-    importPageRenderSinglesList();
-}
-
-// --- Singles Tab: Process ---
-
-function importPageProcessSingles() {
-    if (importPageState.selectedSingles.size === 0) return;
-
-    const filesToProcess = Array.from(importPageState.selectedSingles).map(i => {
-        const f = importPageState.stagingFiles[i];
-        const manualMatch = importPageState.singlesManualMatches[i];
-        if (manualMatch) {
-            return { ...f, spotify_override: manualMatch };
-        }
-        return f;
-    });
-
-    // Add to queue and reset immediately
-    _importQueueAdd({
-        type: 'singles',
-        label: `${filesToProcess.length} Single${filesToProcess.length !== 1 ? 's' : ''}`,
-        sublabel: filesToProcess.map(f => f.title || f.filename).slice(0, 3).join(', ') + (filesToProcess.length > 3 ? '...' : ''),
-        imageUrl: null,
-        items: filesToProcess,
-    });
-
-    importPageState.selectedSingles.clear();
-    importPageState.singlesManualMatches = {};
-    importPageUpdateSinglesProcessButton();
-    importPageRefreshStaging();
-}
-
-// --- Processing Queue ---
-
-const _importQueue = []; // { id, type, label, sublabel, imageUrl, status, processed, total, errors }
-
-function _importQueueAdd(job) {
-    const id = ++importJobIdCounter;
-    const entry = {
-        id,
-        type: job.type,
-        label: job.label,
-        sublabel: job.sublabel,
-        imageUrl: job.imageUrl,
-        status: 'running',   // running | done | error
-        processed: 0,
-        total: job.items.length,
-        errors: [],
-    };
-    _importQueue.push(entry);
-    _importQueueRender();
-
-    // Fire and forget — runs in background
-    _importQueueRunJob(entry, job);
-}
-
-async function _importQueueRunJob(entry, job) {
-    for (let i = 0; i < job.items.length; i++) {
-        const itemName = job.type === 'album'
-            ? (job.items[i].spotify_track?.name || `Track ${i + 1}`)
-            : (job.items[i].title || job.items[i].filename || `File ${i + 1}`);
-
-        // Update status with current track info
-        entry.sublabel = `Processing ${i + 1}/${job.items.length}: ${itemName}`;
-        _importQueueRender();
-
-        try {
-            let resp;
-            if (job.type === 'album') {
-                resp = await fetch('/api/import/album/process', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        album: job.albumData,
-                        matches: [job.items[i]]
-                    })
-                });
-            } else {
-                resp = await fetch('/api/import/singles/process', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ files: [job.items[i]] })
-                });
-            }
-
-            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-            const data = await resp.json();
-            if (data.success) entry.processed += (data.processed || 0);
-            if (data.errors && data.errors.length > 0) entry.errors.push(...data.errors);
-        } catch (err) {
-            entry.errors.push(`${itemName}: ${err.message}`);
-        }
-
-        _importQueueRender();
-    }
-
-    entry.status = entry.errors.length > 0 && entry.processed === 0 ? 'error' : 'done';
-    _importQueueRender();
-
-    // Refresh staging and suggestions since files moved
-    importPageRefreshStaging();
-    importPageLoadSuggestions();
-}
-
-function _importQueueRender() {
-    const container = document.getElementById('import-page-queue');
-    const list = document.getElementById('import-page-queue-list');
-    const clearBtn = document.getElementById('import-page-queue-clear');
-    if (!container || !list) return;
-
-    if (_importQueue.length === 0) {
-        container.classList.add('hidden');
-        return;
-    }
-
-    container.classList.remove('hidden');
-
-    // Show clear button only if there are finished jobs
-    const hasFinished = _importQueue.some(j => j.status !== 'running');
-    clearBtn.style.display = hasFinished ? '' : 'none';
-
-    list.innerHTML = _importQueue.map(j => {
-        const pct = j.total > 0 ? Math.round((j.processed / j.total) * 100) : 0;
-        const fillClass = j.status === 'error' ? 'error' : '';
-        let statusText, statusClass;
-        if (j.status === 'running') {
-            statusText = `${j.processed}/${j.total}`;
-            statusClass = '';
-        } else if (j.status === 'done') {
-            statusText = j.errors.length > 0 ? `${j.processed}/${j.total} (${j.errors.length} err)` : 'Done';
-            statusClass = j.errors.length > 0 ? 'error' : 'done';
-        } else {
-            statusText = 'Failed';
-            statusClass = 'error';
-        }
-
-        return `
-            <div class="import-page-queue-item">
-                ${j.imageUrl
-                ? `<img class="import-page-queue-art" src="${j.imageUrl}" onerror="this.src='/static/placeholder.png'">`
-                : `<div class="import-page-queue-art" style="background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,0.3);">&#9834;</div>`}
-                <div class="import-page-queue-info">
-                    <div class="import-page-queue-name">${_esc(j.label)}</div>
-                    <div class="import-page-queue-detail">${_esc(j.sublabel)}</div>
-                </div>
-                <div class="import-page-queue-progress">
-                    <div class="import-page-queue-bar">
-                        <div class="import-page-queue-fill ${fillClass}" style="width:${j.status === 'done' || j.status === 'error' ? 100 : pct}%"></div>
-                    </div>
-                    <div class="import-page-queue-status ${statusClass}">${statusText}</div>
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function importPageClearFinishedJobs() {
-    for (let i = _importQueue.length - 1; i >= 0; i--) {
-        if (_importQueue[i].status !== 'running') {
-            _importQueue.splice(i, 1);
-        }
-    }
-    _importQueueRender();
-}
-
-// ── Import File Tab ──────────────────────────────────────────────────
-
-let _importFileState = {
-    rawText: '',
-    fileName: '',
-    fileType: '',      // 'csv' or 'text'
-    headers: [],       // CSV column headers
-    rows: [],          // raw parsed rows (arrays for csv, strings for text)
-    columnMap: {},     // { columnIndex: 'track_name' | 'artist_name' | 'album_name' | 'duration' | 'skip' }
-    parsedTracks: []   // final [{track_name, artist_name, album_name, duration_ms}]
-};
-
-function _initImportFileTab() {
-    const dropzone = document.getElementById('import-file-dropzone');
-    const fileInput = document.getElementById('import-file-input');
-    if (!dropzone || !fileInput) return;
-
-    dropzone.addEventListener('click', () => fileInput.click());
-    dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
-    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
-    dropzone.addEventListener('drop', (e) => {
-        e.preventDefault();
-        dropzone.classList.remove('drag-over');
-        const file = e.dataTransfer.files[0];
-        if (file) _importFileRead(file);
-    });
-    fileInput.addEventListener('change', () => {
-        if (fileInput.files[0]) _importFileRead(fileInput.files[0]);
-        fileInput.value = '';
-    });
-
-    // Enable/disable import button based on playlist name
-    const nameInput = document.getElementById('import-file-playlist-name');
-    if (nameInput) {
-        nameInput.addEventListener('input', () => {
-            const btn = document.getElementById('import-file-import-btn');
-            if (btn) btn.disabled = !nameInput.value.trim();
-        });
-    }
-}
-
-function _importFileRead(file) {
-    const ext = file.name.split('.').pop().toLowerCase();
-    if (!['csv', 'tsv', 'txt'].includes(ext)) {
-        showToast('Unsupported file type. Use CSV, TSV, or TXT.', 'error');
-        return;
-    }
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-        _importFileState.rawText = e.target.result;
-        _importFileState.fileName = file.name;
-        _importFileState.fileType = (ext === 'txt') ? 'text' : 'csv';
-        _importFileParseAndPreview();
-    };
-    reader.readAsText(file);
-}
-
-function _importFileDetectDelimiter(firstLine) {
-    const tab = (firstLine.match(/\t/g) || []).length;
-    const semi = (firstLine.match(/;/g) || []).length;
-    const comma = (firstLine.match(/,/g) || []).length;
-    if (tab >= comma && tab >= semi && tab > 0) return '\t';
-    if (semi >= comma && semi > 0) return ';';
-    return ',';
-}
-
-function _importFileParseCsv(text, delimiter) {
-    const lines = text.split(/\r?\n/).filter(l => l.trim());
-    if (lines.length < 2) return { headers: [], rows: [] };
-
-    // Parse CSV with basic quote handling
-    function parseLine(line) {
-        const result = [];
-        let current = '';
-        let inQuotes = false;
-        for (let i = 0; i < line.length; i++) {
-            const ch = line[i];
-            if (ch === '"') {
-                if (inQuotes && i + 1 < line.length && line[i + 1] === '"') {
-                    current += '"';
-                    i++;
-                } else {
-                    inQuotes = !inQuotes;
-                }
-            } else if (ch === delimiter && !inQuotes) {
-                result.push(current.trim());
-                current = '';
-            } else {
-                current += ch;
-            }
-        }
-        result.push(current.trim());
-        return result;
-    }
-
-    const headers = parseLine(lines[0]);
-    const rows = [];
-    for (let i = 1; i < lines.length; i++) {
-        const row = parseLine(lines[i]);
-        if (row.some(cell => cell)) rows.push(row);
-    }
-    return { headers, rows };
-}
-
-function _importFileAutoMapColumns(headers) {
-    const map = {};
-    const lowerHeaders = headers.map(h => h.toLowerCase().trim());
-
-    const trackPatterns = ['track_name', 'track name', 'track', 'title', 'song', 'song_name', 'song name', 'name'];
-    const artistPatterns = ['artist_name', 'artist name', 'artist', 'artists', 'performer'];
-    const albumPatterns = ['album_name', 'album name', 'album'];
-    const durationPatterns = ['duration', 'duration_ms', 'length', 'time'];
-
-    function findMatch(patterns) {
-        for (const p of patterns) {
-            const idx = lowerHeaders.indexOf(p);
-            if (idx !== -1 && !(idx in map)) return idx;
-        }
-        return -1;
-    }
-
-    const trackIdx = findMatch(trackPatterns);
-    if (trackIdx !== -1) map[trackIdx] = 'track_name';
-
-    const artistIdx = findMatch(artistPatterns);
-    if (artistIdx !== -1) map[artistIdx] = 'artist_name';
-
-    const albumIdx = findMatch(albumPatterns);
-    if (albumIdx !== -1) map[albumIdx] = 'album_name';
-
-    const durIdx = findMatch(durationPatterns);
-    if (durIdx !== -1) map[durIdx] = 'duration';
-
-    return map;
-}
-
-function _importFileParseAndPreview() {
-    const state = _importFileState;
-    const text = state.rawText;
-
-    if (state.fileType === 'text') {
-        // Plain text: one track per line
-        const lines = text.split(/\r?\n/).filter(l => l.trim());
-        state.rows = lines;
-        state.headers = [];
-        state.columnMap = {};
-    } else {
-        // CSV/TSV
-        const firstLine = text.split(/\r?\n/)[0] || '';
-        const delimiter = _importFileDetectDelimiter(firstLine);
-        const { headers, rows } = _importFileParseCsv(text, delimiter);
-        state.headers = headers;
-        state.rows = rows;
-        state.columnMap = _importFileAutoMapColumns(headers);
-    }
-
-    _importFileBuildTracks();
-    _importFileRenderPreview();
-}
-
-function _importFileBuildTracks() {
-    const state = _importFileState;
-    state.parsedTracks = [];
-
-    if (state.fileType === 'text') {
-        const orderEl = document.getElementById('import-file-text-order');
-        const sepEl = document.getElementById('import-file-text-separator');
-        const order = orderEl ? orderEl.value : 'artist-title';
-        const sep = sepEl ? sepEl.value : ' - ';
-
-        for (const line of state.rows) {
-            const parts = line.split(sep);
-            if (parts.length >= 2) {
-                const a = parts[0].trim();
-                const b = parts.slice(1).join(sep).trim();
-                state.parsedTracks.push({
-                    track_name: order === 'artist-title' ? b : a,
-                    artist_name: order === 'artist-title' ? a : b,
-                    album_name: '',
-                    duration_ms: 0
-                });
-            } else {
-                // Can't split — treat whole line as track name
-                state.parsedTracks.push({
-                    track_name: line.trim(),
-                    artist_name: '',
-                    album_name: '',
-                    duration_ms: 0
-                });
-            }
-        }
-    } else {
-        // CSV mapped
-        const map = state.columnMap;
-        const trackCol = Object.keys(map).find(k => map[k] === 'track_name');
-        const artistCol = Object.keys(map).find(k => map[k] === 'artist_name');
-        const albumCol = Object.keys(map).find(k => map[k] === 'album_name');
-        const durCol = Object.keys(map).find(k => map[k] === 'duration');
-
-        for (const row of state.rows) {
-            const track = trackCol !== undefined ? (row[trackCol] || '') : '';
-            const artist = artistCol !== undefined ? (row[artistCol] || '') : '';
-            const album = albumCol !== undefined ? (row[albumCol] || '') : '';
-            let dur = durCol !== undefined ? (row[durCol] || '') : '';
-
-            // Parse duration: could be ms, seconds, or mm:ss
-            let durationMs = 0;
-            if (dur) {
-                dur = dur.trim();
-                if (dur.includes(':')) {
-                    const parts = dur.split(':');
-                    durationMs = (parseInt(parts[0]) * 60 + parseInt(parts[1] || 0)) * 1000;
-                } else {
-                    const num = parseFloat(dur);
-                    durationMs = num > 10000 ? num : num * 1000; // assume ms if > 10000, else seconds
-                }
-                if (isNaN(durationMs)) durationMs = 0;
-            }
-
-            state.parsedTracks.push({
-                track_name: track,
-                artist_name: artist,
-                album_name: album,
-                duration_ms: durationMs
-            });
-        }
-    }
-}
-
-function _importFileRenderPreview() {
-    const state = _importFileState;
-    const validTracks = state.parsedTracks.filter(t => t.track_name || t.artist_name);
-
-    // Show/hide sections
-    document.getElementById('import-file-upload-zone').style.display = 'none';
-    document.getElementById('import-file-preview-section').style.display = '';
-
-    // File info
-    document.getElementById('import-file-name-label').textContent = state.fileName;
-    document.getElementById('import-file-track-count').textContent = `${validTracks.length} track${validTracks.length !== 1 ? 's' : ''} parsed`;
-
-    // Show format controls based on file type
-    document.getElementById('import-file-text-format').style.display = state.fileType === 'text' ? '' : 'none';
-    document.getElementById('import-file-column-mapping').style.display = state.fileType === 'csv' ? '' : 'none';
-
-    // Render column mapping for CSV
-    if (state.fileType === 'csv') {
-        _importFileRenderColumnMapping();
-    }
-
-    // Pre-fill playlist name from filename (strip extension)
-    const nameInput = document.getElementById('import-file-playlist-name');
-    if (nameInput && !nameInput.value) {
-        nameInput.value = state.fileName.replace(/\.[^.]+$/, '');
-    }
-    // Update button state
-    const btn = document.getElementById('import-file-import-btn');
-    if (btn) btn.disabled = !nameInput.value.trim();
-
-    // Render preview table
-    const tbody = document.getElementById('import-file-preview-tbody');
-    tbody.innerHTML = '';
-
-    state.parsedTracks.forEach((t, i) => {
-        const valid = !!(t.track_name || t.artist_name);
-        const tr = document.createElement('tr');
-        if (!valid) tr.classList.add('invalid-row');
-        tr.innerHTML = `
-            <td>${i + 1}</td>
-            <td>${_esc(t.track_name)}</td>
-            <td>${_esc(t.artist_name)}</td>
-            <td>${_esc(t.album_name)}</td>
-        `;
-        tbody.appendChild(tr);
-    });
-}
-
-function _importFileRenderColumnMapping() {
-    const state = _importFileState;
-    const container = document.getElementById('import-file-mapping-selects');
-    container.innerHTML = '';
-
-    const options = ['skip', 'track_name', 'artist_name', 'album_name', 'duration'];
-    const optLabels = { skip: 'Skip', track_name: 'Track', artist_name: 'Artist', album_name: 'Album', duration: 'Duration' };
-
-    state.headers.forEach((header, idx) => {
-        const mapped = state.columnMap[idx] || 'skip';
-        const wrap = document.createElement('div');
-        wrap.className = 'import-file-col-map';
-        if (mapped === 'track_name') wrap.classList.add('mapped-track');
-        else if (mapped === 'artist_name') wrap.classList.add('mapped-artist');
-        else if (mapped === 'album_name') wrap.classList.add('mapped-album');
-
-        const label = document.createElement('span');
-        label.className = 'import-file-col-label';
-        label.textContent = header;
-        label.title = header;
-
-        const sel = document.createElement('select');
-        sel.className = 'import-file-select';
-        options.forEach(o => {
-            const opt = document.createElement('option');
-            opt.value = o;
-            opt.textContent = optLabels[o];
-            if (o === mapped) opt.selected = true;
-            sel.appendChild(opt);
-        });
-        sel.addEventListener('change', () => {
-            if (sel.value === 'skip') {
-                delete state.columnMap[idx];
-            } else {
-                // Remove this mapping from any other column
-                for (const k of Object.keys(state.columnMap)) {
-                    if (state.columnMap[k] === sel.value) delete state.columnMap[k];
-                }
-                state.columnMap[idx] = sel.value;
-            }
-            _importFileBuildTracks();
-            _importFileRenderPreview();
-        });
-
-        wrap.appendChild(label);
-        wrap.appendChild(sel);
-        container.appendChild(wrap);
-    });
-}
-
-function importFileReparse() {
-    _importFileBuildTracks();
-    _importFileRenderPreview();
-}
-
-function importFileClear() {
-    _importFileState = {
-        rawText: '', fileName: '', fileType: '',
-        headers: [], rows: [], columnMap: {}, parsedTracks: []
-    };
-    document.getElementById('import-file-upload-zone').style.display = '';
-    document.getElementById('import-file-preview-section').style.display = 'none';
-    document.getElementById('import-file-playlist-name').value = '';
-    document.getElementById('import-file-preview-tbody').innerHTML = '';
-}
-
-function importFileSubmit() {
-    const nameInput = document.getElementById('import-file-playlist-name');
-    const name = nameInput ? nameInput.value.trim() : '';
-    if (!name) {
-        showToast('Please enter a playlist name.', 'error');
-        nameInput && nameInput.focus();
-        return;
-    }
-
-    const tracks = _importFileState.parsedTracks.filter(t => t.track_name || t.artist_name);
-    if (!tracks.length) {
-        showToast('No valid tracks to import.', 'error');
-        return;
-    }
-
-    // Use a unique ID based on timestamp so multiple imports don't collide
-    const sourceId = `file_${Date.now()}`;
-
-    mirrorPlaylist('file', sourceId, name, tracks, {
-        description: `Imported from ${_importFileState.fileName}`,
-        owner: 'local'
-    });
-
-    showToast(`Imported "${name}" with ${tracks.length} tracks`, 'success');
-    importFileClear();
-
-    // Switch to mirrored tab so user sees the result
-    const mirroredBtn = document.querySelector('.sync-tab-button[data-tab="mirrored"]');
-    if (mirroredBtn) {
-        mirroredBtn.click();
-        // Reload mirrored playlists to show the new one
-        setTimeout(() => loadMirroredPlaylists(), 500);
-    }
-}
-
-// ── Mirrored Playlists ────────────────────────────────────────────────
-
-let mirroredPlaylistsLoaded = false;
-
-/**
- * Fire-and-forget helper: send parsed playlist data to be mirrored on the backend.
- */
-function mirrorPlaylist(source, sourceId, name, tracks, metadata = {}) {
-    const normalizedTracks = tracks.map(t => ({
-        track_name: t.track_name || t.name || '',
-        artist_name: t.artist_name || (Array.isArray(t.artists) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : t.artists || ''),
-        album_name: t.album_name || (typeof t.album === 'object' ? (t.album && t.album.name) : t.album) || '',
-        duration_ms: t.duration_ms || 0,
-        image_url: t.image_url || (t.album && typeof t.album === 'object' && t.album.images && t.album.images[0] ? t.album.images[0].url : null),
-        source_track_id: t.source_track_id || t.id || t.spotify_track_id || '',
-        extra_data: t.extra_data || null
-    }));
-
-    fetch('/api/mirror-playlist', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-            source,
-            source_playlist_id: String(sourceId),
-            name,
-            tracks: normalizedTracks,
-            description: metadata.description || '',
-            owner: metadata.owner || '',
-            image_url: metadata.image_url || ''
-        })
-    }).then(r => r.json()).then(data => {
-        if (data.success) console.log(`Mirrored ${source} playlist: ${name} (${normalizedTracks.length} tracks)`);
-    }).catch(err => console.warn('Mirror save failed:', err));
-}
-
-/**
- * Load and render all mirrored playlists into the Mirrored tab.
- */
-async function loadMirroredPlaylists() {
-    const container = document.getElementById('mirrored-playlist-container');
-    if (!container) return;
-    container.innerHTML = `<div class="playlist-placeholder">Loading mirrored playlists...</div>`;
-
-    try {
-        const res = await fetch('/api/mirrored-playlists');
-        const playlists = await res.json();
-        if (playlists.error) throw new Error(playlists.error);
-
-        if (!playlists.length) {
-            container.innerHTML = `<div class="playlist-placeholder">Playlists you parse from any service will appear here as persistent backups.</div>`;
-            return;
-        }
-
-        container.innerHTML = '';
-        playlists.forEach(p => renderMirroredCard(p, container));
-        mirroredPlaylistsLoaded = true;
-
-        // Hydrate discovery states from backend (survives page refresh)
-        await hydrateMirroredDiscoveryStates();
-    } catch (err) {
-        container.innerHTML = `<div class="playlist-placeholder">Error loading mirrored playlists: ${err.message}</div>`;
-    }
-}
-
-function renderMirroredCard(p, container) {
-    const ago = timeAgo(p.updated_at || p.mirrored_at);
-    const hash = `mirrored_${p.id}`;
-    const state = youtubePlaylistStates[hash];
-    const phase = state ? state.phase : null;
-
-    // Build phase indicator
-    let phaseHtml = '';
-    if (phase === 'discovering') {
-        const pct = state.discoveryProgress || state.discovery_progress || 0;
-        phaseHtml = `<span style="color:#a78bfa;">Discovering ${pct}%</span>`;
-    } else if (phase === 'discovered') {
-        const matches = state.spotifyMatches || state.spotify_matches || 0;
-        const total = state.spotify_total || p.track_count;
-        phaseHtml = `<span style="color:#22c55e;">Discovered ${matches}/${total}</span>`;
-    } else if (phase === 'syncing' || phase === 'sync_complete') {
-        phaseHtml = `<span style="color:#3b82f6;">${phase === 'syncing' ? 'Syncing...' : 'Synced'}</span>`;
-    } else if (phase === 'downloading') {
-        phaseHtml = `<span style="color:#f59e0b;">Downloading...</span>`;
-    } else if (phase === 'download_complete') {
-        phaseHtml = `<span style="color:#22c55e;">Downloaded</span>`;
-    }
-
-    const sourceIcons = { spotify: '🎵', tidal: '🌊', youtube: '▶', beatport: '🎛', file: '📄' };
-    const srcIcon = sourceIcons[p.source] || '📋';
-
-    // Discovery ratio
-    const disc = p.discovered_count || 0;
-    const tot = p.total_count || p.track_count || 0;
-    let ratioHtml = '';
-    if (disc > 0) {
-        const complete = disc >= tot;
-        const srcName = typeof currentMusicSourceName !== 'undefined' ? currentMusicSourceName : 'metadata';
-        ratioHtml = `<span class="discovery-ratio${complete ? ' complete' : ''}">${disc}/${tot} discovered on ${srcName}</span>`;
-    }
-
-    const card = document.createElement('div');
-    card.className = 'mirrored-playlist-card';
-    card.id = `mirrored-card-${p.id}`;
-    card.innerHTML = `
-        <div class="source-icon ${_escAttr(p.source)}">${srcIcon}</div>
-        <div class="mirrored-card-info">
-            <div class="card-name">${_esc(p.name)}</div>
-            <div class="card-meta">
-                <span class="source-badge ${_escAttr(p.source)}">${_esc(p.source)}</span>
-                <span>${p.track_count} tracks</span>
-                <span>Mirrored ${ago}</span>
-                ${ratioHtml}
-                ${phaseHtml}
-            </div>
-        </div>
-        ${disc > 0 ? `<button class="mirrored-card-clear" onclick="event.stopPropagation(); clearMirroredDiscovery(${p.id}, '${_escAttr(p.name)}')" title="Clear discovery data">↺</button>` : ''}
-        <button class="mirrored-card-delete" onclick="event.stopPropagation(); deleteMirroredPlaylist(${p.id}, '${_escAttr(p.name)}')" title="Delete mirror">✕</button>
-    `;
-    card.addEventListener('click', () => {
-        const st = youtubePlaylistStates[hash];
-        // Treat as non-fresh if phase is set, or if a poller/discovery modal exists
-        const hasActiveDiscovery = activeYouTubePollers[hash] || document.getElementById(`youtube-discovery-modal-${hash}`);
-        if (st && ((st.phase && st.phase !== 'fresh') || hasActiveDiscovery)) {
-            if (st.phase === 'downloading' || st.phase === 'download_complete') {
-                // Open download modal directly (follows Tidal/YouTube card click pattern)
-                const spotifyPlaylistId = st.convertedSpotifyPlaylistId;
-                if (spotifyPlaylistId && activeDownloadProcesses[spotifyPlaylistId]) {
-                    // Modal already exists — just show it
-                    const process = activeDownloadProcesses[spotifyPlaylistId];
-                    if (process.modalElement) {
-                        if (process.status === 'complete') {
-                            showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
-                        }
-                        process.modalElement.style.display = 'flex';
-                    }
-                } else if (spotifyPlaylistId) {
-                    // Need to rehydrate the download modal
-                    rehydrateMirroredDownloadModal(hash, st);
-                } else {
-                    // No converted playlist ID yet, fall back to discovery modal
-                    openYouTubeDiscoveryModal(hash);
-                }
-            } else {
-                openYouTubeDiscoveryModal(hash);
-                if (st.phase === 'discovering' && !activeYouTubePollers[hash]) {
-                    startYouTubeDiscoveryPolling(hash);
-                }
-            }
-        } else {
-            openMirroredPlaylistModal(p.id);
-        }
-    });
-    container.appendChild(card);
-}
-
-function updateMirroredCardPhase(urlHash, phase) {
-    // Update the state phase (updateYouTubeCardPhase skips this for mirrored playlists due to no cardElement)
-    const state = youtubePlaylistStates[urlHash];
-    if (state) state.phase = phase;
-
-    // Extract the numeric ID from urlHash (e.g., 'mirrored_3' → '3')
-    const mirroredId = urlHash.replace('mirrored_', '');
-    const card = document.getElementById(`mirrored-card-${mirroredId}`);
-    if (!card) return;
-
-    const metaEl = card.querySelector('.card-meta');
-    if (!metaEl) return;
-
-    // Remove old phase indicator
-    const oldPhase = metaEl.querySelector('span[style]');
-    if (oldPhase) oldPhase.remove();
-
-    // Add new phase indicator
-    let phaseHtml = '';
-    switch (phase) {
-        case 'discovering':
-            phaseHtml = `<span style="color:#a78bfa;">Discovering...</span>`;
-            break;
-        case 'discovered':
-            const matches = state?.spotifyMatches || state?.spotify_matches || 0;
-            const total = state?.spotify_total || 0;
-            phaseHtml = `<span style="color:#22c55e;">Discovered ${matches}/${total}</span>`;
-            break;
-        case 'syncing':
-            phaseHtml = `<span style="color:#3b82f6;">Syncing...</span>`;
-            break;
-        case 'sync_complete':
-            phaseHtml = `<span style="color:#3b82f6;">Synced</span>`;
-            break;
-        case 'downloading':
-            phaseHtml = `<span style="color:#f59e0b;">Downloading...</span>`;
-            break;
-        case 'download_complete':
-            phaseHtml = `<span style="color:#22c55e;">Downloaded</span>`;
-            break;
-    }
-    if (phaseHtml) {
-        metaEl.insertAdjacentHTML('beforeend', phaseHtml);
-    }
-}
-
-async function rehydrateMirroredDownloadModal(urlHash, state) {
-    try {
-        if (!state || !state.playlist) {
-            showToast('Cannot open download modal - invalid playlist data', 'error');
-            return;
-        }
-
-        console.log(`💧 [Rehydration] Rehydrating mirrored download modal for: ${state.playlist.name}`);
-
-        // Get discovery results from backend if not already loaded
-        let discoveryRes = state.discoveryResults || state.discovery_results;
-        if (!discoveryRes || discoveryRes.length === 0) {
-            console.log(`🔍 Fetching discovery results from backend for mirrored playlist: ${urlHash}`);
-            const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
-            if (stateResponse.ok) {
-                const fullState = await stateResponse.json();
-                state.discovery_results = fullState.discovery_results;
-                state.discoveryResults = fullState.discovery_results;
-                state.convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
-                state.download_process_id = fullState.download_process_id;
-                discoveryRes = fullState.discovery_results;
-                console.log(`✅ Loaded ${discoveryRes?.length || 0} discovery results from backend`);
-            } else {
-                showToast('Error loading playlist data', 'error');
-                return;
-            }
-        }
-
-        // Extract Spotify tracks from discovery results
-        const spotifyTracks = (discoveryRes || [])
-            .filter(r => r.spotify_data || (r.spotify_track && r.status_class === 'found'))
-            .map(r => {
-                if (r.spotify_data) return r.spotify_data;
-                const albumData = r.spotify_album || 'Unknown Album';
-                return {
-                    id: r.spotify_id || 'unknown',
-                    name: r.spotify_track || 'Unknown Track',
-                    artists: r.spotify_artist ? [r.spotify_artist] : ['Unknown Artist'],
-                    album: typeof albumData === 'object' ? albumData : { name: albumData, album_type: 'album', images: [] },
-                    duration_ms: 0
-                };
-            });
-
-        if (spotifyTracks.length === 0) {
-            showToast('No Spotify matches found for download', 'error');
-            return;
-        }
-
-        const virtualPlaylistId = state.convertedSpotifyPlaylistId;
-        const playlistName = state.playlist.name;
-
-        // Create the download modal
-        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
-
-        // If we have a download process ID, set up the modal for the running/complete state
-        if (state.download_process_id) {
-            const process = activeDownloadProcesses[virtualPlaylistId];
-            if (process) {
-                process.status = state.phase === 'download_complete' ? 'complete' : 'running';
-                process.batchId = state.download_process_id;
-
-                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
-                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
-
-                if (state.phase === 'downloading') {
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
-
-                    // Start polling for live updates
-                    startModalDownloadPolling(virtualPlaylistId);
-                    console.log(`🔄 Started polling for active mirrored download: ${state.download_process_id}`);
-                } else if (state.phase === 'download_complete') {
-                    if (beginBtn) beginBtn.style.display = 'none';
-                    if (cancelBtn) cancelBtn.style.display = 'none';
-                    console.log(`✅ Showing completed mirrored download results: ${state.download_process_id}`);
-
-                    // Fetch final results to populate the modal
-                    try {
-                        const response = await fetch(`/api/playlists/${state.download_process_id}/download_status`);
-                        if (response.ok) {
-                            const data = await response.json();
-                            if (data.phase === 'complete' && data.tasks) {
-                                updateCompletedModalResults(virtualPlaylistId, data);
-                            }
-                        }
-                    } catch (err) {
-                        console.warn('Could not load completed download results:', err);
-                    }
-                }
-            }
-        }
-
-        console.log(`✅ Successfully rehydrated mirrored download modal for: ${state.playlist.name}`);
-    } catch (error) {
-        console.error('❌ Error rehydrating mirrored download modal:', error);
-        showToast('Error opening download modal', 'error');
-    }
-}
-
-async function hydrateMirroredDiscoveryStates() {
-    try {
-        const res = await fetch('/api/mirrored-playlists/discovery-states');
-        const data = await res.json();
-        if (data.error || !data.states || data.states.length === 0) return;
-
-        console.log(`Hydrating ${data.states.length} mirrored discovery states`);
-
-        for (const s of data.states) {
-            const hash = s.url_hash;
-
-            youtubePlaylistStates[hash] = {
-                playlist: s.playlist,
-                phase: s.phase,
-                discovery_results: s.discovery_results || [],
-                discoveryResults: s.discovery_results || [],
-                discovery_progress: s.discovery_progress || 0,
-                discoveryProgress: s.discovery_progress || 0,
-                spotify_matches: s.spotify_matches || 0,
-                spotifyMatches: s.spotify_matches || 0,
-                spotify_total: s.spotify_total || 0,
-                status: s.status || '',
-                url: s.playlist?.url || '',
-                sync_playlist_id: null,
-                converted_spotify_playlist_id: s.converted_spotify_playlist_id,
-                convertedSpotifyPlaylistId: s.converted_spotify_playlist_id,
-                download_process_id: s.download_process_id,
-                created_at: Date.now() / 1000,
-                last_accessed: Date.now() / 1000,
-                discovery_future: null,
-                sync_progress: {},
-                is_mirrored_playlist: true,
-                mirrored_source: s.playlist?.source || ''
-            };
-
-            // Update the card to reflect the current phase
-            const card = document.getElementById(`mirrored-card-${s.playlist_id}`);
-            if (card) {
-                const metaEl = card.querySelector('.card-meta');
-                if (metaEl) {
-                    // Remove old phase span and add new one
-                    const oldPhase = metaEl.querySelector('span[style]');
-                    if (oldPhase) oldPhase.remove();
-
-                    if (s.phase === 'discovering') {
-                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#a78bfa;">Discovering ${s.discovery_progress || 0}%</span>`);
-                    } else if (s.phase === 'discovered') {
-                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#22c55e;">Discovered ${s.spotify_matches || 0}/${s.spotify_total || 0}</span>`);
-                    } else if (s.phase === 'syncing' || s.phase === 'sync_complete') {
-                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#3b82f6;">${s.phase === 'syncing' ? 'Syncing...' : 'Synced'}</span>`);
-                    } else if (s.phase === 'downloading') {
-                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#f59e0b;">Downloading...</span>`);
-                    } else if (s.phase === 'download_complete') {
-                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#22c55e;">Downloaded</span>`);
-                    }
-                }
-            }
-
-            // Resume polling if discovery is in progress
-            if (s.phase === 'discovering' && !activeYouTubePollers[hash]) {
-                startYouTubeDiscoveryPolling(hash);
-            }
-        }
-    } catch (err) {
-        console.warn('Failed to hydrate mirrored discovery states:', err);
-    }
-}
-
-function timeAgo(dateStr) {
-    if (!dateStr) return '';
-    // Handle ISO formats: "Z" suffix, "+00:00" offset, or bare (assume UTC)
-    let ts = dateStr;
-    if (!ts.includes('Z') && !ts.includes('+') && !ts.includes('-', 10)) ts += 'Z';
-    const diff = Date.now() - new Date(ts).getTime();
-    const secs = Math.floor(diff / 1000);
-    if (secs < 5) return 'just now';
-    if (secs < 60) return `${secs}s ago`;
-    const mins = Math.floor(secs / 60);
-    if (mins < 60) return `${mins}m ago`;
-    const hrs = Math.floor(mins / 60);
-    if (hrs < 24) return `${hrs}h ago`;
-    const days = Math.floor(hrs / 24);
-    if (days < 30) return `${days}d ago`;
-    return `${Math.floor(days / 30)}mo ago`;
-}
-
-/**
- * Open modal showing all tracks in a mirrored playlist.
- */
-async function openMirroredPlaylistModal(playlistId) {
-    showLoadingOverlay('Loading mirrored playlist...');
-    try {
-        const res = await fetch(`/api/mirrored-playlists/${playlistId}`);
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-
-        hideLoadingOverlay();
-
-        // Remove any existing modal
-        const old = document.getElementById('mirrored-track-modal');
-        if (old) old.remove();
-
-        const overlay = document.createElement('div');
-        overlay.id = 'mirrored-track-modal';
-        overlay.className = 'mirrored-modal-overlay';
-
-        const tracks = data.tracks || [];
-        const source = data.source || 'unknown';
-        const sourceIcons = { spotify: '🎵', tidal: '🌊', youtube: '▶', beatport: '🎛' };
-        const sourceIcon = sourceIcons[source] || '📋';
-
-        const trackRows = tracks.map(t => {
-            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
-            return `<div class="mirrored-track-row">
-                <span class="track-pos">${t.position}</span>
-                <span class="track-title">${_esc(t.track_name)}</span>
-                <span class="track-artist">${_esc(t.artist_name)}</span>
-                <span class="track-album">${_esc(t.album_name)}</span>
-                <span class="track-duration">${dur}</span>
-            </div>`;
-        }).join('');
-
-        overlay.innerHTML = `
-            <div class="mirrored-modal">
-                <div class="mirrored-modal-header">
-                    <div class="mirrored-modal-hero">
-                        <div class="mirrored-modal-hero-icon ${_escAttr(source)}">${sourceIcon}</div>
-                        <div class="mirrored-modal-hero-info">
-                            <h2 class="mirrored-modal-hero-title">${_esc(data.name)}</h2>
-                            <div class="mirrored-modal-hero-subtitle">
-                                <span class="mirrored-modal-hero-badge">${_esc(source)}</span>
-                                <span>${tracks.length} tracks</span>
-                                <span>&middot;</span>
-                                <span>Mirrored ${timeAgo(data.updated_at || data.mirrored_at)}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <span class="mirrored-modal-close" onclick="closeMirroredModal()">&times;</span>
-                </div>
-                <div class="mirrored-modal-tracks">
-                    <div class="mirrored-track-header">
-                        <span>#</span><span>Track</span><span>Artist</span><span>Album</span><span style="text-align:right">Time</span>
-                    </div>
-                    ${trackRows}
-                </div>
-                <div class="mirrored-modal-footer">
-                    <div class="mirrored-modal-footer-left">
-                        <button class="mirrored-btn-delete" onclick="closeMirroredModal(); deleteMirroredPlaylist(${playlistId}, '${_escAttr(data.name)}')">Delete Mirror</button>
-                    </div>
-                    <div class="mirrored-modal-footer-right" style="display:flex;gap:10px;">
-                        <button class="mirrored-btn-close" onclick="closeMirroredModal()">Close</button>
-                        <button class="mirrored-btn-discover" onclick="discoverMirroredPlaylist(${playlistId})">Discover</button>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        overlay.addEventListener('click', e => { if (e.target === overlay) closeMirroredModal(); });
-        document.body.appendChild(overlay);
-    } catch (err) {
-        hideLoadingOverlay();
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-function closeMirroredModal() {
-    const m = document.getElementById('mirrored-track-modal');
-    if (m) m.remove();
-}
-
-/**
- * Delete a mirrored playlist after confirmation.
- */
-async function clearMirroredDiscovery(playlistId, name) {
-    if (!await showConfirmDialog({ title: 'Clear Discovery Data', message: `Clear discovery data for "${name}"? You can re-discover afterwards to get updated cover art.` })) return;
-    try {
-        const res = await fetch(`/api/mirrored-playlists/${playlistId}/clear-discovery`, { method: 'POST' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Cleared discovery for ${name} (${data.cleared} tracks)`, 'success');
-            // Signal cancellation to any running worker, then clear state
-            const hash = `mirrored_${playlistId}`;
-            if (youtubePlaylistStates[hash]) {
-                youtubePlaylistStates[hash].phase = 'cancelled';
-            }
-            delete youtubePlaylistStates[hash];
-            const staleModal = document.getElementById(`youtube-discovery-modal-${hash}`);
-            if (staleModal) staleModal.remove();
-            loadMirroredPlaylists();
-        } else {
-            showToast(data.error || 'Failed to clear discovery', 'error');
-        }
-    } catch (err) {
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-// ==================== Discovery Pool Modal ====================
-
-let _discoveryPoolOverlay = null;
-let _discoveryPoolData = null;
-let _discoveryPoolView = 'categories'; // 'categories' | 'failed' | 'matched'
-let _discoveryPoolPlaylistFilter = null;
-
-async function loadDiscoveryPoolStats() {
-    try {
-        const res = await fetch('/api/discovery-pool');
-        const data = await res.json();
-        const matchedEl = document.getElementById('discovery-pool-matched-count');
-        const failedEl = document.getElementById('discovery-pool-failed-count');
-        if (matchedEl) matchedEl.textContent = data.stats.matched || 0;
-        if (failedEl) failedEl.textContent = data.stats.failed || 0;
-    } catch (e) { }
-}
-
-async function openDiscoveryPoolModal(playlistId = null) {
-    _discoveryPoolPlaylistFilter = playlistId;
-    _discoveryPoolView = 'categories';
-
-    // Fetch pool data
-    let url = '/api/discovery-pool';
-    if (playlistId) url += `?playlist_id=${playlistId}`;
-    try {
-        const res = await fetch(url);
-        _discoveryPoolData = await res.json();
-    } catch (err) {
-        showToast('Failed to load discovery pool', 'error');
-        return;
-    }
-
-    // Remove existing overlay if present
-    if (_discoveryPoolOverlay) _discoveryPoolOverlay.remove();
-
-    const overlay = document.createElement('div');
-    overlay.className = 'modal-overlay';
-    overlay.id = 'discovery-pool-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) closeDiscoveryPoolModal(); };
-
-    const playlistOptions = (_discoveryPoolData.playlists || [])
-        .map(p => `<option value="${p.id}" ${playlistId == p.id ? 'selected' : ''}>${_esc(p.name)}</option>`)
-        .join('');
-
-    const failedCount = _discoveryPoolData.stats.failed || 0;
-    const matchedCount = _discoveryPoolData.stats.matched || 0;
-
-    overlay.innerHTML = `
-        <div class="modal-container playlist-modal">
-            <div class="playlist-modal-header">
-                <div class="playlist-header-content">
-                    <h2>Discovery Pool</h2>
-                    <div class="playlist-quick-info">
-                        <span class="playlist-track-count" id="pool-header-matched">${matchedCount} Matched</span>
-                        <span class="playlist-owner ${failedCount > 0 ? 'pool-header-failed-highlight' : ''}" id="pool-header-failed">${failedCount} Failed</span>
-                        <select class="pool-playlist-filter" onchange="filterDiscoveryPool(this.value)">
-                            <option value="">All Playlists</option>
-                            ${playlistOptions}
-                        </select>
-                    </div>
-                </div>
-                <span class="playlist-modal-close" onclick="closeDiscoveryPoolModal()">&times;</span>
-            </div>
-
-            <div class="playlist-modal-body">
-                <div class="pool-category-grid" id="pool-category-grid">
-                    <div class="pool-category-card failed" onclick="showPoolList('failed')">
-                        <div class="pool-category-fallback failed"></div>
-                        <div class="pool-category-overlay"></div>
-                        <div class="pool-category-content">
-                            <div class="pool-category-icon">&#9888;</div>
-                            <div class="pool-category-count failed" id="pool-cat-failed-count">${failedCount}</div>
-                            <div class="pool-category-label">tracks need attention</div>
-                        </div>
-                        <div class="pool-category-top-bar failed"></div>
-                    </div>
-                    <div class="pool-category-card matched" onclick="showPoolList('matched')">
-                        <div class="pool-category-fallback matched" id="pool-matched-bg"></div>
-                        <div class="pool-category-overlay"></div>
-                        <div class="pool-category-content">
-                            <div class="pool-category-icon">&#10003;</div>
-                            <div class="pool-category-count matched" id="pool-cat-matched-count">${matchedCount}</div>
-                            <div class="pool-category-label">cached matches</div>
-                        </div>
-                        <div class="pool-category-top-bar matched"></div>
-                    </div>
-                </div>
-
-                <div class="pool-list-view" id="pool-list-view" style="display: none;">
-                    <div class="pool-list-header">
-                        <button class="pool-back-btn" onclick="showPoolCategories()">&larr; Back</button>
-                        <span class="pool-list-title" id="pool-list-title"></span>
-                        <input type="text" class="pool-list-search" id="pool-list-search" placeholder="Filter tracks..." oninput="renderPoolList()">
-                    </div>
-                    <div class="pool-list-content" id="pool-list-content"></div>
-                </div>
-            </div>
-
-            <div class="playlist-modal-footer">
-                <div class="playlist-modal-footer-left"></div>
-                <div class="playlist-modal-footer-right">
-                    <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeDiscoveryPoolModal()">Close</button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-    overlay.style.display = 'flex';
-    _discoveryPoolOverlay = overlay;
-
-    // Build matched mosaic if images available
-    _buildPoolMatchedMosaic();
-}
-
-function _buildPoolMatchedMosaic() {
-    const entries = _discoveryPoolData.matched || [];
-    const images = [];
-    for (const e of entries) {
-        const md = e.matched_data || {};
-        if (md.image_url && images.indexOf(md.image_url) === -1) {
-            images.push(md.image_url);
-            if (images.length >= 20) break;
-        }
-    }
-    const bgEl = document.getElementById('pool-matched-bg');
-    if (!bgEl || images.length < 4) return; // keep fallback gradient
-
-    // Build mosaic rows similar to wishlist
-    bgEl.innerHTML = '';
-    bgEl.className = 'wishlist-mosaic-background';
-    const rows = 4;
-    const imgPerRow = Math.ceil(images.length / rows) * 2; // duplicate for seamless loop
-    for (let r = 0; r < rows; r++) {
-        const wrapper = document.createElement('div');
-        wrapper.className = 'wishlist-mosaic-row-wrapper';
-        const row = document.createElement('div');
-        row.className = 'wishlist-mosaic-row' + (r % 2 === 1 ? ' scroll-right' : '');
-        row.style.setProperty('--speed', (25 + r * 5) + 's');
-        row.style.animationDelay = (r * 0.15) + 's';
-        for (let i = 0; i < imgPerRow; i++) {
-            const img = images[(i + r * 3) % images.length];
-            const tile = document.createElement('div');
-            tile.className = 'wishlist-mosaic-tile';
-            tile.innerHTML = `<div class="wishlist-mosaic-image" style="background-image: url('${img}')"></div>`;
-            row.appendChild(tile);
-        }
-        wrapper.appendChild(row);
-        bgEl.appendChild(wrapper);
-    }
-}
-
-function closeDiscoveryPoolModal() {
-    if (_discoveryPoolOverlay) {
-        _discoveryPoolOverlay.remove();
-        _discoveryPoolOverlay = null;
-    }
-    _discoveryPoolData = null;
-    // Refresh dashboard stats
-    loadDiscoveryPoolStats();
-}
-
-function showPoolCategories() {
-    _discoveryPoolView = 'categories';
-    const grid = document.getElementById('pool-category-grid');
-    const list = document.getElementById('pool-list-view');
-    if (grid) grid.style.display = '';
-    if (list) list.style.display = 'none';
-}
-
-function showPoolList(category) {
-    _discoveryPoolView = category;
-    const grid = document.getElementById('pool-category-grid');
-    const list = document.getElementById('pool-list-view');
-    if (grid) grid.style.display = 'none';
-    if (list) list.style.display = '';
-
-    const titleEl = document.getElementById('pool-list-title');
-    if (titleEl) titleEl.textContent = category === 'failed' ? 'Failed Tracks' : 'Matched Tracks';
-
-    // Clear search filter when switching views
-    const searchEl = document.getElementById('pool-list-search');
-    if (searchEl) searchEl.value = '';
-
-    renderPoolList();
-}
-
-async function filterDiscoveryPool(playlistId) {
-    _discoveryPoolPlaylistFilter = playlistId || null;
-    let url = '/api/discovery-pool';
-    if (playlistId) url += `?playlist_id=${playlistId}`;
-    try {
-        const res = await fetch(url);
-        _discoveryPoolData = await res.json();
-        // Update header counts
-        _updatePoolHeaderCounts();
-        // Update category card counts
-        const failedCountEl = document.getElementById('pool-cat-failed-count');
-        const matchedCountEl = document.getElementById('pool-cat-matched-count');
-        if (failedCountEl) failedCountEl.textContent = _discoveryPoolData.stats.failed || 0;
-        if (matchedCountEl) matchedCountEl.textContent = _discoveryPoolData.stats.matched || 0;
-        // If viewing a list, refresh it
-        if (_discoveryPoolView === 'failed' || _discoveryPoolView === 'matched') {
-            renderPoolList();
-        }
-    } catch (err) {
-        showToast('Failed to filter discovery pool', 'error');
-    }
-}
-
-function _updatePoolHeaderCounts() {
-    if (!_discoveryPoolData) return;
-    const failedCount = _discoveryPoolData.stats.failed || 0;
-    const matchedCount = _discoveryPoolData.stats.matched || 0;
-    const matchedEl = document.getElementById('pool-header-matched');
-    const failedEl = document.getElementById('pool-header-failed');
-    if (matchedEl) matchedEl.textContent = `${matchedCount} Matched`;
-    if (failedEl) {
-        failedEl.textContent = `${failedCount} Failed`;
-        failedEl.classList.toggle('pool-header-failed-highlight', failedCount > 0);
-    }
-}
-
-function renderPoolList() {
-    const container = document.getElementById('pool-list-content');
-    if (!container || !_discoveryPoolData) return;
-
-    // Client-side search filter
-    const searchEl = document.getElementById('pool-list-search');
-    const query = (searchEl ? searchEl.value : '').toLowerCase().trim();
-
-    if (_discoveryPoolView === 'failed') {
-        let tracks = _discoveryPoolData.failed || [];
-        if (query) {
-            tracks = tracks.filter(t =>
-                (t.track_name || '').toLowerCase().includes(query) ||
-                (t.artist_name || '').toLowerCase().includes(query) ||
-                (t.playlist_name || '').toLowerCase().includes(query)
-            );
-        }
-        if (tracks.length === 0) {
-            container.innerHTML = query
-                ? '<div class="pool-empty">No failed tracks match your filter.</div>'
-                : '<div class="pool-empty">No failed discoveries. All tracks matched successfully.</div>';
-            return;
-        }
-        container.innerHTML = tracks.map(t => `
-            <div class="pool-track-row pool-failed">
-                <div class="pool-track-info">
-                    <div class="pool-track-name">${_esc(t.track_name)}</div>
-                    <div class="pool-track-meta">
-                        <span class="pool-track-artist">${_esc(t.artist_name)}</span>
-                        <span class="pool-track-playlist-badge">${_esc(t.playlist_name)}</span>
-                    </div>
-                </div>
-                <button class="playlist-modal-btn playlist-modal-btn-primary pool-fix-btn" onclick="openPoolFixModal(${t.id}, '${_escAttr(t.track_name)}', '${_escAttr(t.artist_name)}')">Fix Match</button>
-            </div>
-        `).join('');
-    } else {
-        let entries = _discoveryPoolData.matched || [];
-        if (query) {
-            entries = entries.filter(e => {
-                const md = e.matched_data || {};
-                const matchedName = md.name || '';
-                return (e.original_title || '').toLowerCase().includes(query) ||
-                    (e.original_artist || '').toLowerCase().includes(query) ||
-                    matchedName.toLowerCase().includes(query);
-            });
-        }
-        if (entries.length === 0) {
-            container.innerHTML = query
-                ? '<div class="pool-empty">No matched tracks match your filter.</div>'
-                : '<div class="pool-empty">No cached discovery matches yet.</div>';
-            return;
-        }
-        container.innerHTML = entries.map(e => {
-            const md = e.matched_data || {};
-            const matchedArtists = (md.artists || []).map(a => typeof a === 'string' ? a : (a.name || '')).join(', ');
-            const conf = Math.round((e.confidence || 0) * 100);
-            const confClass = conf >= 80 ? 'high' : (conf >= 70 ? 'mid' : 'low');
-            const album = md.album || {};
-            const albumImages = (typeof album === 'object' && album.images) ? album.images : [];
-            const imgUrl = md.image_url || (albumImages.length > 0 ? albumImages[0].url || '' : '');
-            return `
-                <div class="pool-track-row pool-matched">
-                    ${imgUrl ? `<img class="pool-match-image" src="${_esc(imgUrl)}" alt="" onerror="this.style.display='none'" />` : '<div class="pool-match-image-placeholder"></div>'}
-                    <div class="pool-track-info">
-                        <div class="pool-track-name">${_esc(e.original_title)}</div>
-                        <div class="pool-track-meta">
-                            <span class="pool-track-artist">${_esc(e.original_artist)}</span>
-                            <span class="pool-track-arrow">&rarr;</span>
-                            <span class="pool-match-name">${_esc(md.name || '?')}</span>
-                            <span class="pool-match-provider">${_esc(e.provider)}</span>
-                        </div>
-                    </div>
-                    <span class="pool-confidence-badge ${confClass}">${conf}%</span>
-                    <span class="pool-use-count">${e.use_count}&times;</span>
-                    <button class="pool-rematch-btn" onclick="rematchPoolCacheEntry(${e.id}, '${_escAttr(e.original_title)}', '${_escAttr(e.original_artist)}')" title="Rematch this track">Rematch</button>
-                    <button class="pool-remove-btn" onclick="removePoolCacheEntry(${e.id})" title="Remove cached match">&times;</button>
-                </div>
-            `;
-        }).join('');
-    }
-}
-
-function rematchPoolCacheEntry(cacheId, originalTitle, originalArtist) {
-    // Open the fix modal in "rematch" mode — saves to cache instead of mirrored tracks
-    openPoolRematchModal(cacheId, originalTitle, originalArtist);
-}
-
-function openPoolRematchModal(cacheId, trackName, artistName) {
-    // Reuses the fix modal UI but saves via the rematch endpoint
-    let fixOverlay = document.getElementById('pool-fix-overlay');
-    if (fixOverlay) fixOverlay.remove();
-
-    fixOverlay = document.createElement('div');
-    fixOverlay.className = 'pool-fix-overlay';
-    fixOverlay.id = 'pool-fix-overlay';
-    fixOverlay.addEventListener('mousedown', (e) => {
-        if (e.target === fixOverlay) {
-            e.preventDefault();
-            closePoolFixModal();
-        }
-    });
-
-    fixOverlay.innerHTML = `
-        <div class="pool-fix-modal" onmousedown="event.stopPropagation()">
-            <div class="pool-fix-header">
-                <h2>Rematch Track</h2>
-                <button class="pool-fix-close" onclick="closePoolFixModal()" title="Close">✕</button>
-            </div>
-            <div class="pool-fix-body">
-                <div class="pool-fix-source">
-                    <div class="pool-fix-source-label">Current Match</div>
-                    <div class="pool-fix-source-row">
-                        <span class="pool-fix-source-title">${_esc(trackName)}</span>
-                        <span class="pool-fix-source-sep">—</span>
-                        <span class="pool-fix-source-artist">${_esc(artistName)}</span>
-                    </div>
-                </div>
-                <div class="pool-fix-search">
-                    <div class="pool-fix-input-row">
-                        <div class="pool-fix-input-wrap">
-                            <label for="pool-fix-track-input">Track</label>
-                            <input type="text" id="pool-fix-track-input" placeholder="Track name" value="${_escAttr(trackName)}">
-                        </div>
-                        <div class="pool-fix-input-wrap">
-                            <label for="pool-fix-artist-input">Artist</label>
-                            <input type="text" id="pool-fix-artist-input" placeholder="Artist name" value="${_escAttr(artistName)}">
-                        </div>
-                        <button class="pool-fix-search-btn" onclick="searchPoolFix()">Search</button>
-                    </div>
-                </div>
-                <div class="pool-fix-results-area">
-                    <div id="pool-fix-results" class="pool-fix-results-list">
-                        <div class="pool-fix-empty">Searching...</div>
-                    </div>
-                </div>
-            </div>
-            <div class="pool-fix-footer">
-                <button class="pool-fix-cancel" onclick="closePoolFixModal()">Cancel</button>
-            </div>
-        </div>
-    `;
-
-    // Store rematch context
-    fixOverlay.dataset.mode = 'rematch';
-    fixOverlay.dataset.cacheId = cacheId;
-    fixOverlay.dataset.originalTitle = trackName;
-    fixOverlay.dataset.originalArtist = artistName;
-    document.body.appendChild(fixOverlay);
-
-    const trackInput = fixOverlay.querySelector('#pool-fix-track-input');
-    const artistInput = fixOverlay.querySelector('#pool-fix-artist-input');
-    const enterHandler = (e) => { if (e.key === 'Enter') searchPoolFix(); };
-    trackInput.addEventListener('keypress', enterHandler);
-    artistInput.addEventListener('keypress', enterHandler);
-    trackInput.focus();
-    trackInput.select();
-
-    setTimeout(() => searchPoolFix(), 500);
-}
-
-async function removePoolCacheEntry(entryId) {
-    if (!await showConfirmDialog({ title: 'Remove Cache Entry', message: 'Remove this cached match? The track will be re-discovered fresh next time.' })) return;
-    try {
-        const res = await fetch(`/api/discovery-pool/cache/${entryId}`, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            showToast('Cache entry removed', 'success');
-            filterDiscoveryPool(_discoveryPoolPlaylistFilter || '');
-        } else {
-            showToast(data.error || 'Failed to remove', 'error');
-        }
-    } catch (err) {
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-// --- Pool Fix Sub-Modal ---
-
-function openPoolFixModal(trackId, trackName, artistName) {
-    // Create sub-modal overlay inside the pool modal
-    let fixOverlay = document.getElementById('pool-fix-overlay');
-    if (fixOverlay) fixOverlay.remove();
-
-    fixOverlay = document.createElement('div');
-    fixOverlay.className = 'pool-fix-overlay';
-    fixOverlay.id = 'pool-fix-overlay';
-
-    // Only close on click to the overlay itself — use a dedicated close zone
-    // to prevent accidental dismissal when clicking near inputs
-    fixOverlay.addEventListener('mousedown', (e) => {
-        if (e.target === fixOverlay) {
-            e.preventDefault(); // Prevent stealing focus from inputs
-            closePoolFixModal();
-        }
-    });
-
-    fixOverlay.innerHTML = `
-        <div class="pool-fix-modal" onmousedown="event.stopPropagation()">
-            <div class="pool-fix-header">
-                <h2>Fix Track Match</h2>
-                <button class="pool-fix-close" onclick="closePoolFixModal()" title="Close">✕</button>
-            </div>
-            <div class="pool-fix-body">
-                <div class="pool-fix-source">
-                    <div class="pool-fix-source-label">Original Track</div>
-                    <div class="pool-fix-source-row">
-                        <span class="pool-fix-source-title">${_esc(trackName)}</span>
-                        <span class="pool-fix-source-sep">—</span>
-                        <span class="pool-fix-source-artist">${_esc(artistName)}</span>
-                    </div>
-                </div>
-                <div class="pool-fix-search">
-                    <div class="pool-fix-input-row">
-                        <div class="pool-fix-input-wrap">
-                            <label for="pool-fix-track-input">Track</label>
-                            <input type="text" id="pool-fix-track-input" placeholder="Track name" value="${_escAttr(trackName)}">
-                        </div>
-                        <div class="pool-fix-input-wrap">
-                            <label for="pool-fix-artist-input">Artist</label>
-                            <input type="text" id="pool-fix-artist-input" placeholder="Artist name" value="${_escAttr(artistName)}">
-                        </div>
-                        <button class="pool-fix-search-btn" onclick="searchPoolFix()">Search</button>
-                    </div>
-                </div>
-                <div class="pool-fix-results-area">
-                    <div id="pool-fix-results" class="pool-fix-results-list">
-                        <div class="pool-fix-empty">Searching...</div>
-                    </div>
-                </div>
-            </div>
-            <div class="pool-fix-footer">
-                <button class="pool-fix-cancel" onclick="closePoolFixModal()">Cancel</button>
-            </div>
-        </div>
-    `;
-
-    fixOverlay.dataset.trackId = trackId;
-    document.body.appendChild(fixOverlay);
-
-    // Add enter key support
-    const trackInput = fixOverlay.querySelector('#pool-fix-track-input');
-    const artistInput = fixOverlay.querySelector('#pool-fix-artist-input');
-    const enterHandler = (e) => { if (e.key === 'Enter') searchPoolFix(); };
-    trackInput.addEventListener('keypress', enterHandler);
-    artistInput.addEventListener('keypress', enterHandler);
-
-    // Focus the track input
-    trackInput.focus();
-    trackInput.select();
-
-    // Auto-search after a delay
-    setTimeout(() => searchPoolFix(), 500);
-}
-
-function closePoolFixModal() {
-    const fixOverlay = document.getElementById('pool-fix-overlay');
-    if (fixOverlay) fixOverlay.remove();
-}
-
-async function searchPoolFix() {
-    const trackInput = document.getElementById('pool-fix-track-input');
-    const artistInput = document.getElementById('pool-fix-artist-input');
-    const resultsContainer = document.getElementById('pool-fix-results');
-    if (!trackInput || !resultsContainer) return;
-
-    const trackVal = trackInput.value.trim();
-    const artistVal = artistInput.value.trim();
-    if (!trackVal && !artistVal) {
-        resultsContainer.innerHTML = '<div class="pool-fix-empty">Enter a search term</div>';
-        return;
-    }
-
-    resultsContainer.innerHTML = '<div class="pool-fix-empty"><div class="pool-fix-spinner"></div>Searching...</div>';
-
-    try {
-        const params = new URLSearchParams();
-        if (trackVal) params.set('track', trackVal);
-        if (artistVal) params.set('artist', artistVal);
-        params.set('limit', '20');
-        const res = await fetch(`/api/spotify/search_tracks?${params.toString()}`);
-        const data = await res.json();
-        const tracks = data.tracks || [];
-
-        if (tracks.length === 0) {
-            resultsContainer.innerHTML = '<div class="pool-fix-empty">No results found</div>';
-            return;
-        }
-
-        resultsContainer.innerHTML = tracks.map((track) => {
-            const artists = (track.artists || []).join(', ');
-            const duration = track.duration_ms ? formatDuration(track.duration_ms) : '';
-            const albumText = track.album ? ` · ${_esc(track.album)}` : '';
-            return `
-                <div class="pool-fix-result" onclick='selectPoolFixTrack(${JSON.stringify(track).replace(/'/g, "&#39;")})'>
-                    <div class="pool-fix-result-main">
-                        <div class="pool-fix-result-title">${_esc(track.name || 'Unknown')}</div>
-                        <div class="pool-fix-result-meta">${_esc(artists)}${albumText}</div>
-                    </div>
-                    ${duration ? `<div class="pool-fix-result-dur">${duration}</div>` : ''}
-                </div>
-            `;
-        }).join('');
-    } catch (err) {
-        resultsContainer.innerHTML = `<div class="pool-fix-empty">Search failed: ${_esc(err.message)}</div>`;
-    }
-}
-
-async function selectPoolFixTrack(track) {
-    const fixOverlay = document.getElementById('pool-fix-overlay');
-    if (!fixOverlay) return;
-
-    // Confirm selection
-    const artists = (track.artists || []).join(', ');
-    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
-
-    const isRematch = fixOverlay.dataset.mode === 'rematch';
-
-    try {
-        let res, data;
-        if (isRematch) {
-            // Rematch mode: save new match to discovery cache
-            res = await fetch('/api/discovery-pool/rematch', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    cache_id: parseInt(fixOverlay.dataset.cacheId),
-                    original_title: fixOverlay.dataset.originalTitle,
-                    original_artist: fixOverlay.dataset.originalArtist,
-                    spotify_track: track,
-                }),
-            });
-            data = await res.json();
-        } else {
-            // Normal fix mode: save to mirrored track
-            const trackId = parseInt(fixOverlay.dataset.trackId);
-            res = await fetch('/api/discovery-pool/fix', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    track_id: trackId,
-                    spotify_track: track,
-                }),
-            });
-            data = await res.json();
-        }
-
-        if (data.success) {
-            showToast(`Matched: ${track.name}`, 'success');
-            closePoolFixModal();
-            // Refresh pool data
-            filterDiscoveryPool(_discoveryPoolPlaylistFilter || '');
-        } else {
-            showToast(data.error || 'Failed to fix track', 'error');
-        }
-    } catch (err) {
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-async function deleteMirroredPlaylist(playlistId, name) {
-    if (!await showConfirmDialog({ title: 'Delete Playlist', message: `Delete mirrored playlist "${name}"?`, confirmText: 'Delete', destructive: true })) return;
-    try {
-        const res = await fetch(`/api/mirrored-playlists/${playlistId}`, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.success) {
-            showToast(`Deleted mirror: ${name}`, 'success');
-            loadMirroredPlaylists();
-        } else {
-            showToast(data.error || 'Failed to delete', 'error');
-        }
-    } catch (err) {
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-/**
- * Launch the existing discovery modal for a mirrored playlist by creating
- * a temporary entry in youtubePlaylistStates and reusing openYouTubeDiscoveryModal.
- */
-async function discoverMirroredPlaylist(playlistId) {
-    closeMirroredModal();
-    const tempHash = `mirrored_${playlistId}`;
-
-    // If state already exists (discovery in progress or completed), just reopen the modal
-    const existingState = youtubePlaylistStates[tempHash];
-    const hasActiveDiscovery = activeYouTubePollers[tempHash] || document.getElementById(`youtube-discovery-modal-${tempHash}`);
-    if (existingState && (existingState.phase !== 'fresh' || hasActiveDiscovery)) {
-        openYouTubeDiscoveryModal(tempHash);
-        // Resume polling if discovery is in progress but poller stopped
-        if (existingState.phase === 'discovering' && !activeYouTubePollers[tempHash]) {
-            startYouTubeDiscoveryPolling(tempHash);
-        }
-        return;
-    }
-
-    showLoadingOverlay('Preparing discovery...');
-    try {
-        // Register the mirrored playlist on the backend so the YouTube discovery pipeline can find it
-        const prepRes = await fetch(`/api/mirrored-playlists/${playlistId}/prepare-discovery`, { method: 'POST' });
-        const prepData = await prepRes.json();
-        if (prepData.error) throw new Error(prepData.error);
-
-        // Also fetch the full data for the frontend state
-        const res = await fetch(`/api/mirrored-playlists/${playlistId}`);
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        hideLoadingOverlay();
-
-        // Build tracks in the format the discovery modal expects
-        const tracks = (data.tracks || []).map(t => ({
-            id: t.source_track_id || `mirrored_${t.id}`,
-            name: t.track_name,
-            artists: [t.artist_name],
-            album: t.album_name || '',
-            duration_ms: t.duration_ms || 0
-        }));
-
-        // Check if backend returned cached results
-        if (prepData.from_cache) {
-            // Fetch the pre-populated status from the backend
-            const statusRes = await fetch(`/api/youtube/discovery/status/${tempHash}`);
-            const statusData = await statusRes.json();
-            if (statusData.error) throw new Error(statusData.error);
-
-            youtubePlaylistStates[tempHash] = {
-                playlist: {
-                    name: data.name,
-                    tracks: tracks,
-                    track_count: tracks.length
-                },
-                phase: statusData.phase || 'discovered',
-                discovery_results: statusData.results || [],
-                discoveryResults: statusData.results || [],
-                discovery_progress: statusData.progress || 100,
-                spotify_matches: statusData.spotify_matches || 0,
-                spotifyMatches: statusData.spotify_matches || 0,
-                spotify_total: tracks.length,
-                status: statusData.status || 'complete',
-                url: `mirrored://${data.source}/${data.source_playlist_id}`,
-                sync_playlist_id: null,
-                converted_spotify_playlist_id: null,
-                download_process_id: null,
-                created_at: Date.now() / 1000,
-                last_accessed: Date.now() / 1000,
-                discovery_future: null,
-                sync_progress: {},
-                is_mirrored_playlist: true,
-                mirrored_source: data.source
-            };
-
-            const cached = prepData.cached_matches || 0;
-            const total = prepData.total_tracks || tracks.length;
-            showToast(`Loaded ${cached}/${total} cached discovery results`, 'success');
-        } else {
-            // No cached data — fresh state
-            youtubePlaylistStates[tempHash] = {
-                playlist: {
-                    name: data.name,
-                    tracks: tracks,
-                    track_count: tracks.length
-                },
-                phase: 'fresh',
-                discovery_results: [],
-                discovery_progress: 0,
-                spotify_matches: 0,
-                spotify_total: tracks.length,
-                status: 'parsed',
-                url: `mirrored://${data.source}/${data.source_playlist_id}`,
-                sync_playlist_id: null,
-                converted_spotify_playlist_id: null,
-                download_process_id: null,
-                created_at: Date.now() / 1000,
-                last_accessed: Date.now() / 1000,
-                discovery_future: null,
-                sync_progress: {},
-                is_mirrored_playlist: true,
-                mirrored_source: data.source
-            };
-        }
-
-        openYouTubeDiscoveryModal(tempHash);
-    } catch (err) {
-        hideLoadingOverlay();
-        showToast(`Error: ${err.message}`, 'error');
-    }
-}
-
-// ===============================
-// AUTOMATIONS — Visual Builder
-// ===============================
-
-async function retryFailedMirroredDiscovery(urlHash) {
-    // Extract playlist ID from url_hash (format: "mirrored_<id>")
-    const playlistId = urlHash.replace('mirrored_', '');
-    try {
-        const res = await fetch(`/api/mirrored-playlists/${playlistId}/retry-failed-discovery`, { method: 'POST' });
-        const data = await res.json();
-        if (data.error) {
-            showToast(`Error: ${data.error}`, 'error');
-            return;
-        }
-        if (data.retry_count === 0) {
-            showToast('All tracks already found!', 'success');
-            return;
-        }
-
-        // Update frontend state to discovering
-        const state = youtubePlaylistStates[urlHash];
-        if (state) {
-            state.phase = 'discovering';
-            state.status = 'discovering';
-            state.discovery_progress = 0;
-        }
-
-        // Update modal buttons to show discovering state
-        updateYouTubeModalButtons(urlHash, 'discovering');
-
-        // Start polling for progress
-        startYouTubeDiscoveryPolling(urlHash);
-
-        showToast(`Retrying ${data.retry_count} failed tracks...`, 'info');
-    } catch (err) {
-        showToast(`Error retrying discovery: ${err.message}`, 'error');
-    }
-}
-
-let _autoBlocks = null; // cached block definitions from /api/automations/blocks
-let _autoBuilder = { editId: null, when: null, do: null, then: [], isSystem: false };
-
-let _autoMirroredPlaylists = null; // cached mirrored playlist list
-let _autoSpotifyAuthenticated = false; // whether Spotify is authed (for refresh filtering)
-
-const _autoIcons = {
-    schedule: '\u23F1\uFE0F', daily_time: '\u{1F570}\uFE0F', weekly_time: '\uD83D\uDCC5', app_started: '\uD83D\uDE80', track_downloaded: '\u2B07\uFE0F', batch_complete: '\u2705',
-    watchlist_new_release: '\uD83D\uDD14', playlist_synced: '\uD83D\uDD04',
-    playlist_changed: '\u270F\uFE0F',
-    process_wishlist: '\uD83D\uDCCB', scan_watchlist: '\uD83D\uDC41\uFE0F',
-    scan_library: '\uD83D\uDD04', refresh_mirrored: '\uD83D\uDCC2', sync_playlist: '\uD83D\uDD01',
-    discover_playlist: '\uD83D\uDD0D', discovery_completed: '\uD83D\uDD0D',
-    notify_only: '\uD83D\uDD14', discord_webhook: '\uD83D\uDCAC', pushbullet: '\uD83D\uDD14', telegram: '\u2709\uFE0F', webhook: '\uD83C\uDF10',
-    signal_received: '\u26A1', fire_signal: '\u26A1', run_script: '\uD83D\uDCBB',
-    // Phase 3
-    wishlist_processing_completed: '\u2705', watchlist_scan_completed: '\u2705',
-    database_update_completed: '\uD83D\uDDC4\uFE0F', download_failed: '\u274C',
-    download_quarantined: '\u26A0\uFE0F', wishlist_item_added: '\u2795',
-    watchlist_artist_added: '\uD83D\uDC64', watchlist_artist_removed: '\uD83D\uDC64',
-    import_completed: '\uD83D\uDCE5', mirrored_playlist_created: '\uD83D\uDCC2',
-    quality_scan_completed: '\uD83D\uDCCA', duplicate_scan_completed: '\uD83D\uDDC2\uFE0F', library_scan_completed: '\uD83D\uDCE1',
-    start_database_update: '\uD83D\uDDC4\uFE0F', run_duplicate_cleaner: '\uD83D\uDDC2\uFE0F',
-    clear_quarantine: '\uD83D\uDDD1\uFE0F', cleanup_wishlist: '\uD83E\uDDF9',
-    update_discovery_pool: '\uD83E\uDDED', start_quality_scan: '\uD83D\uDCCA',
-    backup_database: '\uD83D\uDCBE',
-    refresh_beatport_cache: '\uD83C\uDFB5',
-    clean_search_history: '\uD83D\uDDD1\uFE0F',
-    clean_completed_downloads: '\u2705',
-    full_cleanup: '\uD83E\uDDF9',
-    playlist_pipeline: '\uD83D\uDE80',
-};
-
-// --- Inspiration Templates ---
-// --- Automation Hub Data ---
-
-// ── Automation Hub: One-Click Pipeline Groups ──
-const AUTO_HUB_GROUPS = [
-    {
-        id: 'playlist-pipeline', icon: '🚀', name: 'Playlist Pipeline (All-in-One)',
-        desc: 'Single automation that runs the full playlist lifecycle: refresh → discover → sync → download missing. No signal wiring needed.',
-        category: 'Sync', badge: '1 automation', color: '#8b5cf6',
-        steps: [
-            { label: 'Refresh', icon: '🔄', type: 'action' },
-            { label: 'Discover', icon: '🔍', type: 'action' },
-            { label: 'Sync', icon: '🔗', type: 'action' },
-            { label: 'Download', icon: '📥', type: 'action' },
-        ],
-        automations: [
-            { name: 'Playlist Pipeline', trigger_type: 'schedule', trigger_config: { interval: 6, unit: 'hours' }, action_type: 'playlist_pipeline', action_config: { all: true }, then_actions: [], group_name: 'Playlist Pipeline' },
-        ]
-    },
-    {
-        id: 'new-music-pipeline', icon: '🚀', name: 'New Music Pipeline',
-        desc: 'Full hands-free new music workflow. Scans your watchlist for releases, downloads them, cleans up, and notifies you.',
-        category: 'Discovery', badge: '4 automations', color: '#f97316',
-        steps: [
-            { label: 'Scan Artists', icon: '🔍', type: 'action' },
-            { label: 'Download', icon: '📥', type: 'action' },
-            { label: 'Cleanup', icon: '🧹', type: 'action' },
-            { label: 'Notify', icon: '🔔', type: 'notify' },
-        ],
-        automations: [
-            { name: 'New Music — Scan Watchlist', trigger_type: 'schedule', trigger_config: { interval: 12, unit: 'hours' }, action_type: 'scan_watchlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_scanned' } }], group_name: 'New Music Pipeline' },
-            { name: 'New Music — Download', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_scanned' }, action_type: 'process_wishlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_downloaded' } }], group_name: 'New Music Pipeline' },
-            { name: 'New Music — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_downloaded' }, action_type: 'full_cleanup', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_cleaned' } }], group_name: 'New Music Pipeline' },
-            { name: 'New Music — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_cleaned' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'New Music Pipeline', needs_notify: true },
-        ]
-    },
-    {
-        id: 'nightly-ops', icon: '🌙', name: 'Nightly Operations',
-        desc: 'Staggered overnight maintenance: scan, download, cleanup, and backup while you sleep.',
-        category: 'Maintenance', badge: '4 automations', color: '#8b5cf6',
-        steps: [
-            { label: '1AM Scan', icon: '🔍', type: 'action' },
-            { label: '2AM Download', icon: '📥', type: 'action' },
-            { label: '3AM Cleanup', icon: '🧹', type: 'action' },
-            { label: '4AM Backup', icon: '💾', type: 'action' },
-        ],
-        automations: [
-            { name: 'Nightly — 1AM Scan', trigger_type: 'daily_time', trigger_config: { time: '01:00' }, action_type: 'scan_watchlist', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
-            { name: 'Nightly — 2AM Download', trigger_type: 'daily_time', trigger_config: { time: '02:00' }, action_type: 'process_wishlist', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
-            { name: 'Nightly — 3AM Cleanup', trigger_type: 'daily_time', trigger_config: { time: '03:00' }, action_type: 'full_cleanup', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
-            { name: 'Nightly — 4AM Backup', trigger_type: 'daily_time', trigger_config: { time: '04:00' }, action_type: 'backup_database', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
-        ]
-    },
-    {
-        id: 'download-monitor', icon: '📊', name: 'Download Monitor',
-        desc: 'Stay informed about your downloads. Get notified on failures, quarantined files, and completed batches.',
-        category: 'Alerts', badge: '3 automations', color: '#ef4444',
-        steps: [
-            { label: 'Failures', icon: '❌', type: 'notify' },
-            { label: 'Quarantine', icon: '⚠️', type: 'notify' },
-            { label: 'Complete', icon: '✅', type: 'notify' },
-        ],
-        automations: [
-            { name: 'Alert — Download Failed', trigger_type: 'download_failed', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
-            { name: 'Alert — File Quarantined', trigger_type: 'download_quarantined', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
-            { name: 'Alert — Batch Complete', trigger_type: 'batch_complete', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
-        ]
-    },
-    {
-        id: 'library-guardian', icon: '🛡️', name: 'Library Guardian',
-        desc: 'Protect your library quality. After scans, runs quality checks and notifies you of any issues found.',
-        category: 'Maintenance', badge: '2 automations', color: '#f59e0b',
-        steps: [
-            { label: 'Quality Scan', icon: '✅', type: 'action' },
-            { label: 'Notify', icon: '🔔', type: 'notify' },
-        ],
-        automations: [
-            { name: 'Guardian — Quality Check', trigger_type: 'library_scan_completed', trigger_config: {}, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'guardian_quality_done' } }], group_name: 'Library Guardian' },
-            { name: 'Guardian — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'guardian_quality_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Library Guardian', needs_notify: true },
-        ]
-    },
-    {
-        id: 'startup-recovery', icon: '⚡', name: 'Startup Recovery',
-        desc: 'Self-heal after a restart. Scans your library, processes pending wishlist items, and cleans up automatically.',
-        category: 'Maintenance', badge: '3 automations', color: '#14b8a6',
-        steps: [
-            { label: 'Scan Library', icon: '📚', type: 'action' },
-            { label: 'Process Wishlist', icon: '📥', type: 'action' },
-            { label: 'Cleanup', icon: '🧹', type: 'action' },
-        ],
-        automations: [
-            { name: 'Startup — Scan Library', trigger_type: 'app_started', trigger_config: {}, action_type: 'scan_library', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'startup_scanned' } }], group_name: 'Startup Recovery' },
-            { name: 'Startup — Process Wishlist', trigger_type: 'signal_received', trigger_config: { signal_name: 'startup_scanned' }, action_type: 'process_wishlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'startup_processed' } }], group_name: 'Startup Recovery' },
-            { name: 'Startup — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'startup_processed' }, action_type: 'full_cleanup', action_config: {}, then_actions: [], group_name: 'Startup Recovery' },
-        ]
-    },
-    {
-        id: 'import-pipeline', icon: '📦', name: 'Import Pipeline',
-        desc: 'After importing files, automatically scans your library, runs a quality check, and notifies you when complete.',
-        category: 'Maintenance', badge: '3 automations', color: '#a855f7',
-        steps: [
-            { label: 'Scan Library', icon: '📚', type: 'action' },
-            { label: 'Quality Check', icon: '✅', type: 'action' },
-            { label: 'Notify', icon: '🔔', type: 'notify' },
-        ],
-        automations: [
-            { name: 'Import — Scan Library', trigger_type: 'import_completed', trigger_config: {}, action_type: 'scan_library', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'import_scanned' } }], group_name: 'Import Pipeline' },
-            { name: 'Import — Quality Check', trigger_type: 'signal_received', trigger_config: { signal_name: 'import_scanned' }, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'import_quality_done' } }], group_name: 'Import Pipeline' },
-            { name: 'Import — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'import_quality_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Import Pipeline', needs_notify: true },
-        ]
-    },
-    {
-        id: 'weekly-deep-clean', icon: '✨', name: 'Weekly Deep Clean',
-        desc: 'Comprehensive weekly sweep: find duplicates, check quality, clean up, back up, and report results.',
-        category: 'Maintenance', badge: '5 automations', color: '#ec4899',
-        steps: [
-            { label: 'Duplicates', icon: '📋', type: 'action' },
-            { label: 'Quality', icon: '✅', type: 'action' },
-            { label: 'Cleanup', icon: '🧹', type: 'action' },
-            { label: 'Backup', icon: '💾', type: 'action' },
-            { label: 'Notify', icon: '🔔', type: 'notify' },
-        ],
-        automations: [
-            { name: 'Deep Clean — Duplicates', trigger_type: 'weekly_time', trigger_config: { days: ['sunday'], time: '02:00' }, action_type: 'run_duplicate_cleaner', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_dedup_done' } }], group_name: 'Weekly Deep Clean' },
-            { name: 'Deep Clean — Quality', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_dedup_done' }, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_quality_done' } }], group_name: 'Weekly Deep Clean' },
-            { name: 'Deep Clean — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_quality_done' }, action_type: 'full_cleanup', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_cleanup_done' } }], group_name: 'Weekly Deep Clean' },
-            { name: 'Deep Clean — Backup', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_cleanup_done' }, action_type: 'backup_database', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_backup_done' } }], group_name: 'Weekly Deep Clean' },
-            { name: 'Deep Clean — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_backup_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Weekly Deep Clean', needs_notify: true },
-        ]
-    },
-    {
-        id: 'beatport-fresh', icon: '🎧', name: 'Beatport Fresh',
-        desc: 'Keep your Beatport charts and playlists up to date with a daily cache refresh.',
-        category: 'Discovery', badge: '1 automation', color: '#84cc16',
-        steps: [
-            { label: 'Refresh Cache', icon: '🔄', type: 'action' },
-        ],
-        automations: [
-            { name: 'Beatport — Daily Refresh', trigger_type: 'daily_time', trigger_config: { time: '05:00' }, action_type: 'refresh_beatport_cache', action_config: {}, then_actions: [], group_name: 'Beatport Fresh' },
-        ]
-    },
-];
-
-const AUTO_HUB_RECIPES = [
-    // Sync & Playlists
-    {
-        id: 'spotify-auto-sync', icon: '\uD83D\uDD01', name: 'Spotify Playlist Auto-Sync', desc: 'Refresh all mirrored playlists every 6 hours to keep them in sync with Spotify.',
-        category: 'Sync', difficulty: 'beginner', when: { type: 'schedule', config: { interval: 6, unit: 'hours' } }, do: { type: 'refresh_mirrored', config: {} }, then: []
-    },
-    {
-        id: 'release-radar-pipeline', icon: '\uD83D\uDCE1', name: 'Release Radar Pipeline', desc: 'Every Friday, refresh mirrored playlists, discover new tracks, then sync. Chain 3 automations for a full pipeline.',
-        category: 'Sync', difficulty: 'intermediate', when: { type: 'weekly_time', config: { days: ['friday'], time: '18:00' } }, do: { type: 'refresh_mirrored', config: {} }, then: [],
-        chain: ['Refresh Mirrored', 'Discover Playlist', 'Sync Playlist'], note: 'Create 3 separate automations and chain them with signals for the full pipeline.'
-    },
-    {
-        id: 'discover-weekly-grab', icon: '\uD83C\uDFB5', name: 'Discover Weekly Grab', desc: 'Every Monday, refresh your mirrored Discover Weekly to capture the new playlist before Spotify replaces it.',
-        category: 'Sync', difficulty: 'beginner', when: { type: 'weekly_time', config: { days: ['monday'], time: '08:00' } }, do: { type: 'refresh_mirrored', config: {} }, then: []
-    },
-    {
-        id: 'playlist-change-watcher', icon: '\uD83D\uDD14', name: 'Playlist Change Watcher', desc: 'Get a Discord notification whenever any tracked playlist changes.',
-        category: 'Sync', difficulty: 'beginner', when: { type: 'playlist_changed', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'discord_webhook', config: {} }]
-    },
-    {
-        id: 'new-mirror-discovery', icon: '\uD83D\uDD0D', name: 'New Mirror Auto-Discovery', desc: 'Automatically discover tracks when you mirror a new playlist.',
-        category: 'Sync', difficulty: 'beginner', when: { type: 'mirrored_playlist_created', config: {} }, do: { type: 'discover_playlist', config: {} }, then: []
-    },
-    // New Music Discovery
-    {
-        id: 'complete-new-release', icon: '\uD83D\uDE80', name: 'Complete New Release Pipeline', desc: 'Full hands-free chain: scan watchlist \u2192 process wishlist \u2192 quality scan \u2192 notify. Requires 3 automations linked by signals.',
-        category: 'Discovery', difficulty: 'advanced', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'watchlist_done' } }],
-        chain: ['Scan Watchlist', '\u26A1 watchlist_done', 'Process Wishlist', '\u26A1 wishlist_done', 'Quality Scan', 'Discord'],
-        note: 'Create 3 automations: (1) Schedule\u2192Scan Watchlist\u2192fire watchlist_done, (2) Signal watchlist_done\u2192Process Wishlist\u2192fire wishlist_done, (3) Signal wishlist_done\u2192Quality Scan\u2192Discord.'
-    },
-    {
-        id: 'new-release-monitor', icon: '\uD83D\uDD14', name: 'New Release Monitor', desc: 'Scan your watchlist for new releases every 12 hours.',
-        category: 'Discovery', difficulty: 'beginner', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: []
-    },
-    {
-        id: 'artist-watch-alert', icon: '\uD83C\uDFA4', name: 'Artist Watch Alert', desc: 'Get a Telegram notification when you add a new artist to your watchlist.',
-        category: 'Discovery', difficulty: 'beginner', when: { type: 'watchlist_artist_added', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'telegram', config: {} }]
-    },
-    {
-        id: 'discovery-pool-refresh', icon: '\uD83C\uDF10', name: 'Discovery Pool Refresh', desc: 'Refresh the discovery pool every night at 2 AM with fresh recommendations.',
-        category: 'Discovery', difficulty: 'beginner', when: { type: 'daily_time', config: { time: '02:00' } }, do: { type: 'update_discovery_pool', config: {} }, then: []
-    },
-    {
-        id: 'nightly-wishlist', icon: '\uD83C\uDF19', name: 'Nightly Wishlist Processor', desc: 'Process your wishlist at 3 AM every night while you sleep.',
-        category: 'Discovery', difficulty: 'beginner', when: { type: 'daily_time', config: { time: '03:00' } }, do: { type: 'process_wishlist', config: {} }, then: []
-    },
-    // Library Maintenance
-    {
-        id: 'full-library-maintenance', icon: '\uD83E\uDDF9', name: 'Full Library Maintenance', desc: 'Run full cleanup every Saturday at 5 AM \u2014 dedup, quarantine, wishlist tidy.',
-        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'weekly_time', config: { days: ['saturday'], time: '05:00' } }, do: { type: 'full_cleanup', config: {} }, then: []
-    },
-    {
-        id: 'post-batch-cleanup', icon: '\uD83E\uDDF9', name: 'Post-Batch Cleanup', desc: 'Run a full cleanup after any batch download completes.',
-        category: 'Maintenance', difficulty: 'beginner', when: { type: 'batch_complete', config: {} }, do: { type: 'full_cleanup', config: {} }, then: []
-    },
-    {
-        id: 'weekly-db-backup', icon: '\uD83D\uDCBE', name: 'Weekly Database Backup', desc: 'Back up your database every Sunday at 4 AM.',
-        category: 'Maintenance', difficulty: 'beginner', when: { type: 'weekly_time', config: { days: ['sunday'], time: '04:00' } }, do: { type: 'backup_database', config: {} }, then: []
-    },
-    {
-        id: 'quality-assurance', icon: '\u2705', name: 'Quality Assurance Pipeline', desc: 'After a library scan completes, run a quality scan and fire a signal when done.',
-        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'library_scan_completed', config: {} }, do: { type: 'start_quality_scan', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'quality_done' } }]
-    },
-    {
-        id: 'import-cleanup', icon: '\uD83D\uDCE5', name: 'Import Cleanup', desc: 'Automatically scan the library after an import completes to keep things tidy.',
-        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'import_completed', config: {} }, do: { type: 'scan_library', config: {} }, then: []
-    },
-    // Notifications & Alerts
-    {
-        id: 'download-failure-alert', icon: '\u274C', name: 'Download Failure Alert', desc: 'Get notified via Discord when a download fails.',
-        category: 'Alerts', difficulty: 'beginner', when: { type: 'download_failed', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'discord_webhook', config: {} }]
-    },
-    {
-        id: 'quarantine-alert', icon: '\u26A0\uFE0F', name: 'Quarantine Alert', desc: 'Get a Pushbullet alert when a file is quarantined.',
-        category: 'Alerts', difficulty: 'beginner', when: { type: 'download_quarantined', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'pushbullet', config: {} }]
-    },
-    {
-        id: 'batch-complete-notify', icon: '\uD83C\uDFC1', name: 'Batch Complete Notification', desc: 'Get a Telegram message when a batch download finishes.',
-        category: 'Alerts', difficulty: 'beginner', when: { type: 'batch_complete', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'telegram', config: {} }]
-    },
-    // Power User Chains
-    {
-        id: 'full-hands-free', icon: '\uD83E\uDD16', name: 'Full Hands-Free Pipeline', desc: 'The ultimate automation chain: scan \u2192 process \u2192 download \u2192 clean \u2192 notify. Requires 5 automations linked by signals.',
-        category: 'Chains', difficulty: 'advanced', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'scan_done' } }],
-        chain: ['Scan Watchlist', '\u26A1 scan_done', 'Process Wishlist', '\u26A1 process_done', 'Full Cleanup', '\u26A1 cleanup_done', 'Quality Scan', 'Discord'],
-        note: 'Build 4-5 automations, each firing a signal for the next step. Start small and add stages.'
-    },
-    {
-        id: 'staggered-nightly', icon: '\uD83C\uDF03', name: 'Staggered Nightly Pipeline', desc: 'Spread tasks across the night: 1 AM scan, 2 AM process, 3 AM cleanup, 4 AM backup.',
-        category: 'Chains', difficulty: 'intermediate', when: { type: 'daily_time', config: { time: '01:00' } }, do: { type: 'scan_watchlist', config: {} }, then: [],
-        chain: ['1:00 Scan', '2:00 Process', '3:00 Cleanup', '4:00 Backup'],
-        note: 'Create 4 daily_time automations at staggered hours. No signals needed \u2014 just timing.'
-    },
-];
-
-const AUTO_HUB_GUIDES = [
-    {
-        id: 'auto-sync-playlists', icon: '\uD83D\uDD01', title: 'Auto-Sync Your Spotify Playlists', subtitle: 'Mirror a Spotify playlist and schedule automatic refreshes.', difficulty: 'beginner',
-        steps: [
-            'Go to the <strong>Playlists</strong> page and find a Spotify playlist you want to track.',
-            'Click <strong>Mirror Playlist</strong> to create a local copy.',
-            'Go to <strong>Automations</strong> and click <strong>New Automation</strong>.',
-            'Set WHEN to <strong>Schedule \u2192 Every 6 hours</strong>.',
-            'Set DO to <strong>Refresh Mirrored Playlists</strong>.',
-            'Save and enable \u2014 your playlist will now stay in sync automatically.'
-        ], relatedRecipes: ['spotify-auto-sync', 'discover-weekly-grab']
-    },
-    {
-        id: 'discord-download-alerts', icon: '\uD83D\uDCE2', title: 'Get Discord Alerts for Downloads', subtitle: 'Set up Discord webhook notifications for download events.', difficulty: 'beginner',
-        steps: [
-            'In Discord, go to your channel\'s settings \u2192 <strong>Integrations \u2192 Webhooks</strong>.',
-            'Create a webhook and copy the URL.',
-            'In SoulSync, go to <strong>Settings \u2192 Notifications</strong> and paste the Discord webhook URL.',
-            'Go to <strong>Automations \u2192 New Automation</strong>.',
-            'Set WHEN to <strong>Download Failed</strong> (or any event), DO to <strong>Notify Only</strong>, THEN to <strong>Discord</strong>.'
-        ], relatedRecipes: ['download-failure-alert', 'batch-complete-notify']
-    },
-    {
-        id: 'hands-free-pipeline', icon: '\uD83E\uDD16', title: 'Build a Hands-Free Library Pipeline', subtitle: 'Chain watchlist scanning, wishlist processing, and cleanup with signals.', difficulty: 'intermediate',
-        steps: [
-            'Create Automation 1: <strong>Schedule (12h) \u2192 Scan Watchlist</strong>, THEN fire signal <code>scan_done</code>.',
-            'Create Automation 2: <strong>Signal scan_done \u2192 Process Wishlist</strong>, THEN fire signal <code>process_done</code>.',
-            'Create Automation 3: <strong>Signal process_done \u2192 Full Cleanup</strong>.',
-            'Enable all three automations.',
-            'Test by manually running Automation 1 \u2014 watch the chain execute.',
-            'Add a THEN notification (Discord/Telegram) to the last automation for completion alerts.',
-            'Adjust the schedule interval based on how often you want new music checked.'
-        ], relatedRecipes: ['complete-new-release', 'full-hands-free']
-    },
-    {
-        id: 'signal-chains', icon: '\u26A1', title: 'Set Up Signal Chains', subtitle: 'Use fire_signal and signal_received to link automations together.', difficulty: 'advanced',
-        steps: [
-            'Understand the concept: <strong>fire_signal</strong> is a THEN action that emits a named signal. <strong>signal_received</strong> is a WHEN trigger that listens for it.',
-            'In your first automation, add a THEN action \u2192 <strong>Fire Signal</strong> and name it (e.g., <code>step1_done</code>).',
-            'Create a second automation with WHEN \u2192 <strong>Signal Received</strong> \u2192 signal name <code>step1_done</code>.',
-            'The second automation will fire automatically when the first one completes.',
-            'Chain up to 5 levels deep (safety limit). SoulSync detects cycles automatically.',
-            'Use descriptive signal names like <code>watchlist_scanned</code> or <code>cleanup_finished</code>.'
-        ], relatedRecipes: ['quality-assurance', 'complete-new-release']
-    },
-    {
-        id: 'nightly-maintenance', icon: '\uD83C\uDF19', title: 'Schedule Nightly Maintenance', subtitle: 'Set up backup, cleanup, and quality scans to run overnight.', difficulty: 'intermediate',
-        steps: [
-            'Create a <strong>Daily Time (04:00) \u2192 Backup Database</strong> automation.',
-            'Create a <strong>Weekly Time (Saturday, 05:00) \u2192 Full Cleanup</strong> automation.',
-            'Create a <strong>Daily Time (02:00) \u2192 Update Discovery Pool</strong> automation.',
-            'Stagger times by at least 1 hour to avoid resource contention.',
-            'Add Discord/Telegram notifications to any you want alerts for.'
-        ], relatedRecipes: ['weekly-db-backup', 'full-library-maintenance', 'staggered-nightly']
-    },
-];
-
-const AUTO_HUB_TIPS = [
-    { icon: '\u26A1', title: 'Signal Chaining 101', body: '<strong>fire_signal</strong> (a THEN action) emits a named event. <strong>signal_received</strong> (a WHEN trigger) listens for it. This lets you chain automations: when one finishes, the next starts automatically.', tag: 'Signals' },
-    { icon: '\u23F0', title: 'Stagger Your Schedules', body: 'If you have multiple timed automations, space them at least 1 hour apart. Running scan, process, and cleanup at the same time creates resource contention and can slow everything down.', tag: 'Performance' },
-    { icon: '\uD83C\uDFAF', title: 'Use Conditions to Filter', body: 'Add conditions to event triggers to only fire on specific artists, formats, or quality levels. For example, trigger only when a downloaded track\'s artist matches "Radiohead".', tag: 'Filtering' },
-    { icon: '\uD83D\uDCC1', title: 'Group Related Automations', body: 'Use the Group dropdown when creating automations to organize them. Groups like "Nightly", "Notifications", or "Pipeline" make it easy to find and manage related automations.', tag: 'Organization' },
-    { icon: '\uD83D\uDD04', title: 'Avoid Chain Loops', body: 'SoulSync has built-in cycle detection, but it\'s good practice to design signal names carefully. If A fires signal X and B listens for X and fires Y, make sure nothing fires X again downstream.', tag: 'Safety' },
-    { icon: '\uD83D\uDCDA', title: 'Stack THEN Actions', body: 'Each automation supports up to 3 THEN actions. Combine notification channels (Discord + Telegram) with a fire_signal to both notify yourself and trigger the next automation.', tag: 'Power' },
-    { icon: '\u2699\uFE0F', title: 'System vs Custom', body: 'System automations handle core tasks like Spotify enrichment and are managed automatically. Create custom automations to extend their behavior \u2014 trigger on their completion events.', tag: 'Basics' },
-    { icon: '\uD83E\uDDEA', title: 'Test with Notify Only', body: 'Set DO to <strong>Notify Only</strong> when testing a new trigger. You\'ll see when it fires without any side effects. Once you\'re confident in the timing, switch to the real action.', tag: 'Testing' },
-];
-
-const AUTO_HUB_REFERENCE = {
-    triggers: [
-        {
-            group: 'Time-Based', items: [
-                { type: 'schedule', label: 'Schedule', desc: 'Repeating interval (e.g., every 6 hours)' },
-                { type: 'daily_time', label: 'Daily Time', desc: 'Every day at a specific time (e.g., 03:00)' },
-                { type: 'weekly_time', label: 'Weekly Time', desc: 'Specific days + time (e.g., Saturday at 05:00)' },
-            ]
-        },
-        {
-            group: 'Download Events', items: [
-                { type: 'track_downloaded', label: 'Track Downloaded', desc: 'Fires when a single track download completes' },
-                { type: 'batch_complete', label: 'Batch Complete', desc: 'Fires when a batch download job finishes' },
-                { type: 'download_failed', label: 'Download Failed', desc: 'Fires when a download fails or errors out' },
-                { type: 'download_quarantined', label: 'File Quarantined', desc: 'Fires when a downloaded file is quarantined for quality issues' },
-            ]
-        },
-        {
-            group: 'Watchlist & Wishlist', items: [
-                { type: 'watchlist_new_release', label: 'New Release Found', desc: 'Fires when a watched artist has a new release' },
-                { type: 'watchlist_scan_completed', label: 'Watchlist Scan Done', desc: 'Fires after a full watchlist scan completes' },
-                { type: 'watchlist_artist_added', label: 'Artist Watched', desc: 'Fires when a new artist is added to the watchlist' },
-                { type: 'watchlist_artist_removed', label: 'Artist Unwatched', desc: 'Fires when an artist is removed from the watchlist' },
-                { type: 'wishlist_item_added', label: 'Wishlist Item Added', desc: 'Fires when a new item is added to the wishlist' },
-                { type: 'wishlist_processing_completed', label: 'Wishlist Processed', desc: 'Fires after the wishlist processor completes a run' },
-            ]
-        },
-        {
-            group: 'Playlists', items: [
-                { type: 'playlist_synced', label: 'Playlist Synced', desc: 'Fires when a playlist sync operation completes' },
-                { type: 'playlist_changed', label: 'Playlist Changed', desc: 'Fires when a tracked playlist has changes detected' },
-                { type: 'mirrored_playlist_created', label: 'Playlist Mirrored', desc: 'Fires when a new mirrored playlist is created' },
-                { type: 'discovery_completed', label: 'Discovery Complete', desc: 'Fires when playlist discovery finishes' },
-            ]
-        },
-        {
-            group: 'Library & System', items: [
-                { type: 'app_started', label: 'App Started', desc: 'Fires once when SoulSync starts up' },
-                { type: 'import_completed', label: 'Import Complete', desc: 'Fires when a library import operation finishes' },
-                { type: 'library_scan_completed', label: 'Library Scan Done', desc: 'Fires after a full library scan completes' },
-                { type: 'quality_scan_completed', label: 'Quality Scan Done', desc: 'Fires when a quality scan finishes' },
-                { type: 'duplicate_scan_completed', label: 'Duplicate Scan Done', desc: 'Fires when the duplicate scanner finishes' },
-                { type: 'database_update_completed', label: 'Database Updated', desc: 'Fires after a database update operation' },
-            ]
-        },
-        {
-            group: 'Signals', items: [
-                { type: 'signal_received', label: 'Signal Received', desc: 'Fires when a named signal is emitted by another automation\'s fire_signal THEN action' },
-            ]
-        },
-    ],
-    actions: [
-        {
-            group: 'Downloads & Sync', items: [
-                { type: 'playlist_pipeline', label: 'Playlist Pipeline', desc: 'Full lifecycle: refresh → discover → sync → download missing' },
-                { type: 'process_wishlist', label: 'Process Wishlist', desc: 'Download all pending wishlist items' },
-                { type: 'refresh_mirrored', label: 'Refresh Mirrored', desc: 'Refresh all mirrored playlists from their sources' },
-                { type: 'sync_playlist', label: 'Sync Playlist', desc: 'Sync a specific playlist to your library' },
-                { type: 'discover_playlist', label: 'Discover Playlist', desc: 'Run track discovery on mirrored playlists' },
-                { type: 'scan_watchlist', label: 'Scan Watchlist', desc: 'Check watched artists for new releases' },
-                { type: 'update_discovery_pool', label: 'Update Discovery', desc: 'Refresh the discovery pool with new recommendations' },
-            ]
-        },
-        {
-            group: 'Library Tools', items: [
-                { type: 'scan_library', label: 'Scan Library', desc: 'Full scan of local music library files' },
-                { type: 'start_quality_scan', label: 'Quality Scan', desc: 'Check library tracks for quality issues' },
-                { type: 'start_database_update', label: 'Update Database', desc: 'Run a database update/maintenance operation' },
-                { type: 'backup_database', label: 'Backup Database', desc: 'Create a backup of the music database' },
-            ]
-        },
-        {
-            group: 'Cleanup', items: [
-                { type: 'full_cleanup', label: 'Full Cleanup', desc: 'Run all cleanup tasks: dedup, quarantine, wishlist tidy' },
-                { type: 'run_duplicate_cleaner', label: 'Duplicate Cleaner', desc: 'Find and handle duplicate tracks' },
-                { type: 'clear_quarantine', label: 'Clear Quarantine', desc: 'Remove all quarantined files' },
-                { type: 'cleanup_wishlist', label: 'Clean Wishlist', desc: 'Remove completed/invalid wishlist items' },
-                { type: 'clean_search_history', label: 'Clean Search History', desc: 'Clear old search history entries' },
-                { type: 'clean_completed_downloads', label: 'Clean Downloads', desc: 'Remove completed download records' },
-            ]
-        },
-        {
-            group: 'Other', items: [
-                { type: 'notify_only', label: 'Notify Only', desc: 'No action \u2014 just trigger THEN notifications. Great for testing.' },
-            ]
-        },
-    ],
-    thenActions: [
-        {
-            group: 'Notifications', items: [
-                { type: 'discord_webhook', label: 'Discord Webhook', desc: 'Send a message to a Discord channel via webhook' },
-                { type: 'telegram', label: 'Telegram', desc: 'Send a message to a Telegram chat via bot' },
-                { type: 'pushbullet', label: 'Pushbullet', desc: 'Send a push notification via Pushbullet' },
-            ]
-        },
-        {
-            group: 'Chaining', items: [
-                { type: 'fire_signal', label: 'Fire Signal', desc: 'Emit a named signal that other automations can listen for with signal_received' },
-            ]
-        },
-    ],
-};
-
-// --- Load & Render List ---
-
-// Drag-and-drop state
-let _autoDragState = null;
-let _autoDragEnterCount = 0;
-let _autoDragExpandTimer = null;
-
-function _buildAutomationSection(id, label, automations, useGrid, options = {}) {
-    const groupName = options.groupName || null;
-    const isProtected = options.isProtected || false; // System, Hub sections
-
-    const section = document.createElement('div');
-    section.className = 'automations-section';
-    if (isProtected) section.classList.add('section-protected');
-    section.id = id;
-    if (groupName) section.dataset.groupName = groupName;
-    const collapsed = localStorage.getItem('auto_section_' + id) === '1';
-    if (collapsed) section.classList.add('collapsed');
-
-    const header = document.createElement('div');
-    header.className = 'automations-section-header';
-
-    // Group header actions (rename, bulk toggle, delete) — only for user groups
-    let actionsHtml = '';
-    if (groupName && !isProtected) {
-        const enabledCount = automations.filter(a => a.enabled).length;
-        const allEnabled = enabledCount === automations.length;
-        actionsHtml = `
-            <div class="section-actions" onclick="event.stopPropagation();">
-                <button class="section-action-btn" title="${allEnabled ? 'Disable all' : 'Enable all'}" onclick="_bulkToggleGroup('${_escAttr(groupName)}', ${allEnabled})">
-                    ${allEnabled ? '⏸' : '▶'}
-                </button>
-                <button class="section-action-btn" title="Rename group" onclick="_startRenameGroup('${_escAttr(groupName)}', this)">
-                    ✏️
-                </button>
-                <button class="section-action-btn section-action-danger" title="Delete group" onclick="_deleteGroup('${_escAttr(groupName)}')">
-                    🗑️
-                </button>
-            </div>
-        `;
-    }
-
-    header.innerHTML = `
-        <span class="section-chevron">&#9660;</span>
-        <span class="section-label">${label}</span>
-        <span class="section-count">${automations.length}</span>
-        ${actionsHtml}
-        <span class="section-line"></span>
-    `;
-    header.onclick = (e) => {
-        if (e.target.closest('.section-actions')) return;
-        section.classList.toggle('collapsed');
-        localStorage.setItem('auto_section_' + id, section.classList.contains('collapsed') ? '1' : '0');
-    };
-
-    const body = document.createElement('div');
-    body.className = 'automations-section-body';
-
-    // Drop zone setup (not for protected sections)
-    if (!isProtected) {
-        const dropGroupName = groupName; // null for "My Automations"
-        body.addEventListener('dragover', (e) => {
-            if (!_autoDragState) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = 'move';
-            body.classList.add('drop-target');
-        });
-        body.addEventListener('dragenter', (e) => {
-            if (!_autoDragState) return;
-            _autoDragEnterCount++;
-            body.classList.add('drop-target');
-            // Expand collapsed sections on drag-hover
-            if (section.classList.contains('collapsed')) {
-                _autoDragExpandTimer = setTimeout(() => {
-                    section.classList.remove('collapsed');
-                }, 500);
-            }
-        });
-        body.addEventListener('dragleave', (e) => {
-            if (!_autoDragState) return;
-            _autoDragEnterCount--;
-            if (_autoDragEnterCount <= 0) {
-                _autoDragEnterCount = 0;
-                body.classList.remove('drop-target');
-                if (_autoDragExpandTimer) { clearTimeout(_autoDragExpandTimer); _autoDragExpandTimer = null; }
-            }
-        });
-        body.addEventListener('drop', async (e) => {
-            e.preventDefault();
-            body.classList.remove('drop-target');
-            _autoDragEnterCount = 0;
-            if (!_autoDragState) return;
-            const draggedId = _autoDragState.id;
-            const fromGroup = _autoDragState.groupName;
-            if (fromGroup === dropGroupName) return; // Same group, no-op
-            try {
-                const res = await fetch('/api/automations/' + draggedId, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ group_name: dropGroupName })
-                });
-                const data = await res.json();
-                if (data.error) throw new Error(data.error);
-                showToast(dropGroupName ? `Moved to "${dropGroupName}"` : 'Moved to My Automations', 'success');
-                await loadAutomations();
-            } catch (err) { showToast('Error: ' + err.message, 'error'); }
-        });
-    }
-
-    const container = document.createElement('div');
-    container.className = useGrid ? 'automations-grid' : 'automations-user-list';
-    automations.forEach(a => container.appendChild(renderAutomationCard(a)));
-    body.appendChild(container);
-    section.appendChild(header);
-    section.appendChild(body);
-    return section;
-}
-
-/**
- * Delete a group — ungroups all automations (moves to My Automations).
- */
-async function _deleteGroup(groupName) {
-    // Collect automation IDs in this group
-    const ids = [];
-    document.querySelectorAll(`.automations-section[data-group-name="${groupName}"] .automation-card`).forEach(card => {
-        if (card.dataset.id) ids.push(parseInt(card.dataset.id));
-    });
-
-    if (ids.length === 0) { await loadAutomations(); return; }
-
-    // Show choice dialog — ungroup or delete all
-    const choice = await _showDeleteGroupDialog(groupName, ids.length);
-    if (!choice) return;
-
-    try {
-        if (choice === 'ungroup') {
-            const res = await fetch('/api/automations/group', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ automation_ids: ids, group_name: null })
-            });
-            const data = await res.json();
-            if (data.error) throw new Error(data.error);
-            showToast(`Dissolved group "${groupName}" — ${data.updated} automations moved to My Automations`, 'success');
-        } else if (choice === 'delete_all') {
-            // Delete each automation
-            let deleted = 0;
-            for (const id of ids) {
-                try {
-                    const res = await fetch('/api/automations/' + id, { method: 'DELETE' });
-                    const data = await res.json();
-                    if (data.success) deleted++;
-                } catch (e) {}
-            }
-            showToast(`Deleted group "${groupName}" and ${deleted} automation${deleted !== 1 ? 's' : ''}`, 'success');
-        }
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-function _showDeleteGroupDialog(groupName, count) {
-    return new Promise((resolve) => {
-        const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.style.display = 'flex';
-        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
-
-        overlay.innerHTML = `
-            <div class="delete-group-dialog">
-                <div class="delete-group-icon">🗑️</div>
-                <h3 class="delete-group-title">Delete Group "${groupName}"</h3>
-                <p class="delete-group-message">This group contains ${count} automation${count !== 1 ? 's' : ''}. What would you like to do?</p>
-                <div class="delete-group-actions">
-                    <button class="delete-group-btn delete-group-keep" id="dg-ungroup">
-                        Keep Automations — move to My Automations
-                    </button>
-                    <button class="delete-group-btn delete-group-remove" id="dg-delete">
-                        Delete Everything — remove group and all ${count} automation${count !== 1 ? 's' : ''}
-                    </button>
-                    <button class="delete-group-btn delete-group-cancel" id="dg-cancel">
-                        Cancel
-                    </button>
-                </div>
-            </div>
-        `;
-
-        overlay.querySelector('#dg-ungroup').onclick = () => { overlay.remove(); resolve('ungroup'); };
-        overlay.querySelector('#dg-delete').onclick = () => { overlay.remove(); resolve('delete_all'); };
-        overlay.querySelector('#dg-cancel').onclick = () => { overlay.remove(); resolve(null); };
-
-        document.addEventListener('keydown', function esc(e) {
-            if (e.key === 'Escape') { overlay.remove(); resolve(null); document.removeEventListener('keydown', esc); }
-        });
-
-        document.body.appendChild(overlay);
-    });
-}
-
-/**
- * Rename a group — inline edit on the section header label.
- */
-function _startRenameGroup(groupName, btnEl) {
-    const section = btnEl.closest('.automations-section');
-    const labelEl = section?.querySelector('.section-label');
-    if (!labelEl) return;
-
-    const input = document.createElement('input');
-    input.className = 'section-rename-input';
-    input.value = groupName;
-    input.onclick = (e) => e.stopPropagation();
-
-    const originalText = labelEl.textContent;
-    labelEl.textContent = '';
-    labelEl.appendChild(input);
-    input.focus();
-    input.select();
-
-    const finish = async (save) => {
-        const newName = input.value.trim();
-        input.removeEventListener('blur', blurHandler);
-        if (!save || !newName || newName === groupName) {
-            labelEl.textContent = originalText;
-            return;
-        }
-
-        const ids = [];
-        section.querySelectorAll('.automation-card').forEach(card => {
-            if (card.dataset.id) ids.push(parseInt(card.dataset.id));
-        });
-
-        try {
-            const res = await fetch('/api/automations/group', {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ automation_ids: ids, group_name: newName })
-            });
-            const data = await res.json();
-            if (data.error) throw new Error(data.error);
-            showToast(`Renamed to "${newName}"`, 'success');
-            await loadAutomations();
-        } catch (err) {
-            showToast('Error: ' + err.message, 'error');
-            labelEl.textContent = originalText;
-        }
-    };
-
-    input.addEventListener('keydown', (e) => {
-        e.stopPropagation();
-        if (e.key === 'Enter') { e.preventDefault(); finish(true); }
-        if (e.key === 'Escape') { finish(false); }
-    });
-    const blurHandler = () => finish(true);
-    input.addEventListener('blur', blurHandler);
-}
-
-/**
- * Bulk toggle all automations in a group.
- */
-async function _bulkToggleGroup(groupName, currentlyAllEnabled) {
-    const ids = [];
-    document.querySelectorAll(`.automations-section[data-group-name="${groupName}"] .automation-card`).forEach(card => {
-        if (card.dataset.id) ids.push(parseInt(card.dataset.id));
-    });
-    if (ids.length === 0) return;
-
-    const targetEnabled = !currentlyAllEnabled;
-    try {
-        const res = await fetch('/api/automations/bulk-toggle', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ automation_ids: ids, enabled: targetEnabled })
-        });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast(`${targetEnabled ? 'Enabled' : 'Disabled'} ${data.updated} automations`, 'success');
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-async function loadAutomations() {
-    const list = document.getElementById('automations-list');
-    const empty = document.getElementById('automations-empty');
-    const statsBar = document.getElementById('automations-stats');
-    if (!list || !empty) return;
-    try {
-        const res = await fetch('/api/automations');
-        const automations = await res.json();
-        if (automations.error) throw new Error(automations.error);
-        if (!automations.length) {
-            list.innerHTML = ''; empty.style.display = '';
-            if (statsBar) statsBar.innerHTML = '';
-            return;
-        }
-        empty.style.display = 'none';
-        list.innerHTML = '';
-
-        const systemAutos = automations.filter(a => a.is_system);
-        const userAutos = automations.filter(a => !a.is_system);
-
-        if (systemAutos.length) {
-            list.appendChild(_buildAutomationSection('auto-section-system', 'System', systemAutos, true, { isProtected: true }));
-        }
-
-        // Automation Hub section
-        list.appendChild(_buildAutomationHub());
-
-        // User automations — split by group
-        const groups = [...new Set(userAutos.filter(a => a.group_name).map(a => a.group_name))].sort();
-        const ungrouped = userAutos.filter(a => !a.group_name);
-        groups.forEach(g => {
-            const groupAutos = userAutos.filter(a => a.group_name === g);
-            if (groupAutos.length) {
-                list.appendChild(_buildAutomationSection('auto-section-group-' + g.replace(/\W+/g, '_'), '\uD83D\uDCC1 ' + g, groupAutos, true, { groupName: g }));
-            }
-        });
-        if (ungrouped.length) {
-            list.appendChild(_buildAutomationSection('auto-section-custom', 'My Automations', ungrouped, true));
-        }
-
-        // Stats summary bar
-        if (statsBar) {
-            const total = automations.length;
-            const active = automations.filter(a => a.enabled).length;
-            const sys = systemAutos.length;
-            const custom = userAutos.length;
-            statsBar.innerHTML = `
-                <span class="auto-stat"><strong>${active}</strong> Active</span>
-                <span class="auto-stat"><strong>${sys}</strong> System</span>
-                <span class="auto-stat"><strong>${custom}</strong> Custom</span>
-            `;
-        }
-
-        // Filter bar — show when 6+ automations
-        _initAutoFilterBar(automations);
-        // Catch up on current automation progress
-        try {
-            const progRes = await fetch('/api/automations/progress');
-            const progData = await progRes.json();
-            if (!progData.error) updateAutomationProgressFromData(progData);
-        } catch (e) { }
-    } catch (err) {
-        list.innerHTML = ''; empty.style.display = '';
-        if (statsBar) statsBar.innerHTML = '';
-    }
-}
-
-// --- Automation Hub ---
-
-function _buildAutomationHub() {
-    const section = document.createElement('div');
-    section.className = 'automations-section';
-    section.id = 'auto-section-hub';
-    const collapsed = localStorage.getItem('auto_section_auto-section-hub') === '1';
-    if (collapsed) section.classList.add('collapsed');
-    const header = document.createElement('div');
-    header.className = 'automations-section-header';
-    header.innerHTML = `
-        <span class="section-chevron">&#9660;</span>
-        <span class="section-label">Automation Hub</span>
-        <span class="section-count">${AUTO_HUB_GROUPS.length} pipelines · ${AUTO_HUB_RECIPES.length} recipes</span>
-        <span class="section-line"></span>
-    `;
-    header.onclick = () => {
-        section.classList.toggle('collapsed');
-        localStorage.setItem('auto_section_auto-section-hub', section.classList.contains('collapsed') ? '1' : '0');
-    };
-    const body = document.createElement('div');
-    body.className = 'automations-section-body';
-
-    const activeTab = localStorage.getItem('auto_hub_tab') || 'pipelines';
-    const tabs = [
-        { id: 'pipelines', label: 'Pipelines' },
-        { id: 'recipes', label: 'Singles' },
-        { id: 'guides', label: 'Quick Start' },
-        { id: 'tips', label: 'Tips' },
-        { id: 'reference', label: 'Reference' },
-    ];
-
-    const tabBar = document.createElement('div');
-    tabBar.className = 'auto-hub-tabs';
-    tabs.forEach(t => {
-        const btn = document.createElement('button');
-        btn.className = 'auto-hub-tab' + (t.id === activeTab ? ' active' : '');
-        btn.textContent = t.label;
-        btn.dataset.tab = t.id;
-        btn.onclick = (e) => { e.stopPropagation(); _switchHubTab(t.id, body); };
-        tabBar.appendChild(btn);
-    });
-    body.appendChild(tabBar);
-
-    // Build all tab contents
-    const pipelinesPane = _buildHubPipelines();
-    pipelinesPane.id = 'auto-hub-pane-pipelines';
-    pipelinesPane.className = 'auto-hub-tab-content' + (activeTab === 'pipelines' ? ' active' : '');
-    body.appendChild(pipelinesPane);
-
-    const recipesPane = _buildHubRecipes();
-    recipesPane.id = 'auto-hub-pane-recipes';
-    recipesPane.className = 'auto-hub-tab-content' + (activeTab === 'recipes' ? ' active' : '');
-    body.appendChild(recipesPane);
-
-    const guidesPane = _buildHubGuides();
-    guidesPane.id = 'auto-hub-pane-guides';
-    guidesPane.className = 'auto-hub-tab-content' + (activeTab === 'guides' ? ' active' : '');
-    body.appendChild(guidesPane);
-
-    const tipsPane = _buildHubTips();
-    tipsPane.id = 'auto-hub-pane-tips';
-    tipsPane.className = 'auto-hub-tab-content' + (activeTab === 'tips' ? ' active' : '');
-    body.appendChild(tipsPane);
-
-    const refPane = _buildHubReference();
-    refPane.id = 'auto-hub-pane-reference';
-    refPane.className = 'auto-hub-tab-content' + (activeTab === 'reference' ? ' active' : '');
-    body.appendChild(refPane);
-
-    section.appendChild(header);
-    section.appendChild(body);
-    return section;
-}
-
-function _switchHubTab(tabId, bodyEl) {
-    const container = bodyEl || document.querySelector('#auto-section-hub .automations-section-body');
-    if (!container) return;
-    container.querySelectorAll('.auto-hub-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
-    container.querySelectorAll('.auto-hub-tab-content').forEach(p => p.classList.toggle('active', p.id === 'auto-hub-pane-' + tabId));
-    localStorage.setItem('auto_hub_tab', tabId);
-}
-
-function _buildHubPipelines() {
-    const pane = document.createElement('div');
-
-    const intro = document.createElement('div');
-    intro.className = 'auto-hub-pipeline-intro';
-    intro.innerHTML = 'One-click deployment — each pipeline creates multiple linked automations that work together.';
-    pane.appendChild(intro);
-
-    const grid = document.createElement('div');
-    grid.className = 'auto-hub-pipeline-grid';
-
-    AUTO_HUB_GROUPS.forEach(group => {
-        const card = document.createElement('div');
-        card.className = 'auto-hub-pipeline-card';
-        card.style.setProperty('--pipeline-color', group.color);
-
-        // Pipeline flow visualization
-        const stepsHtml = group.steps.map((step, i) => {
-            const nodeClass = step.type === 'notify' ? 'pipeline-node-notify' : 'pipeline-node-action';
-            return (i > 0 ? '<span class="pipeline-connector"></span>' : '') +
-                `<div class="pipeline-node ${nodeClass}">
-                    <span class="pipeline-node-icon">${step.icon}</span>
-                    <span class="pipeline-node-label">${step.label}</span>
-                </div>`;
-        }).join('');
-
-        card.innerHTML = `
-            <div class="pipeline-card-top">
-                <span class="pipeline-card-icon">${group.icon}</span>
-                <div class="pipeline-card-title-row">
-                    <div class="pipeline-card-name">${group.name}</div>
-                    <span class="pipeline-card-badge">${group.badge}</span>
-                </div>
-            </div>
-            <div class="pipeline-card-desc">${group.desc}</div>
-            <div class="pipeline-flow">${stepsHtml}</div>
-            <div class="pipeline-card-footer">
-                <button class="pipeline-deploy-btn" onclick="event.stopPropagation(); deployHubGroup('${group.id}')">Deploy Pipeline</button>
-            </div>
-        `;
-
-        card.addEventListener('click', (e) => {
-            if (e.target.closest('.pipeline-deploy-btn')) return;
-            showPipelineDetail(group.id);
-        });
-
-        grid.appendChild(card);
-    });
-
-    pane.appendChild(grid);
-    return pane;
-}
-
-function showPipelineDetail(groupId) {
-    const group = AUTO_HUB_GROUPS.find(g => g.id === groupId);
-    if (!group) return;
-
-    // Build automation detail list
-    const autoDetails = group.automations.map((auto, i) => {
-        const triggerLabel = _autoFormatTrigger(auto.trigger_type, auto.trigger_config);
-        const actionLabel = _autoFormatAction(auto.action_type);
-        const thenLabels = auto.then_actions.map(t => {
-            if (t.type === 'fire_signal') return `⚡ Signal: ${t.config.signal_name}`;
-            return _autoFormatNotify(t.type);
-        });
-        if (auto.needs_notify) thenLabels.push('🔔 Your notification');
-
-        return `
-            <div class="pipeline-detail-auto" style="--step-color: ${group.color}">
-                <div class="pipeline-detail-step-num">${i + 1}</div>
-                <div class="pipeline-detail-step-body">
-                    <div class="pipeline-detail-step-name">${auto.name}</div>
-                    <div class="pipeline-detail-step-flow">
-                        <span class="pipeline-detail-tag when">WHEN</span>
-                        <span class="pipeline-detail-tag-value">${_esc(triggerLabel)}</span>
-                        <span class="pipeline-detail-tag do">DO</span>
-                        <span class="pipeline-detail-tag-value">${_esc(actionLabel)}</span>
-                        ${thenLabels.length ? `<span class="pipeline-detail-tag then">THEN</span><span class="pipeline-detail-tag-value">${thenLabels.map(t => _esc(t)).join(', ')}</span>` : ''}
-                    </div>
-                </div>
-            </div>`;
-    }).join('');
-
-    // Build flow diagram
-    const flowHtml = group.steps.map((step, i) => {
-        const nodeClass = step.type === 'notify' ? 'pipeline-node-notify' : 'pipeline-node-action';
-        return (i > 0 ? '<span class="pipeline-connector"></span>' : '') +
-            `<div class="pipeline-node ${nodeClass}">
-                <span class="pipeline-node-icon">${step.icon}</span>
-                <span class="pipeline-node-label">${step.label}</span>
-            </div>`;
-    }).join('');
-
-    const overlay = document.createElement('div');
-    overlay.className = 'pipeline-detail-overlay';
-    overlay.innerHTML = `
-        <div class="pipeline-detail-modal" style="--pipeline-color: ${group.color}">
-            <button class="pipeline-detail-close" onclick="this.closest('.pipeline-detail-overlay').remove()">&times;</button>
-            <div class="pipeline-detail-header">
-                <span class="pipeline-detail-icon">${group.icon}</span>
-                <div>
-                    <div class="pipeline-detail-title">${group.name}</div>
-                    <div class="pipeline-detail-desc">${group.desc}</div>
-                </div>
-            </div>
-            <div class="pipeline-detail-flow" style="--pipeline-color: ${group.color}">${flowHtml}</div>
-            <div class="pipeline-detail-section-title">How It Works</div>
-            <div class="pipeline-detail-section-desc">This pipeline deploys ${group.automations.length} automations${group.automations.some(a => a.then_actions.some(t => t.type === 'fire_signal')) ? ' linked by signals — each step triggers the next automatically' : ' running on independent schedules'}.</div>
-            <div class="pipeline-detail-autos">${autoDetails}</div>
-            <button class="pipeline-deploy-btn" style="--pipeline-color: ${group.color}; margin-top: 8px;" onclick="this.closest('.pipeline-detail-overlay').remove(); deployHubGroup('${group.id}')">Deploy Pipeline</button>
-        </div>
-    `;
-
-    overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) overlay.remove();
-    });
-
-    document.body.appendChild(overlay);
-}
-
-function _buildHubRecipes() {
-    const pane = document.createElement('div');
-    const categories = ['All', 'Sync', 'Discovery', 'Maintenance', 'Alerts', 'Chains'];
-    const difficulties = ['All', 'Beginner', 'Intermediate', 'Advanced'];
-
-    let activeCat = 'All', activeDiff = 'All';
-
-    // Category filters
-    const catFilters = document.createElement('div');
-    catFilters.className = 'auto-hub-filters';
-    categories.forEach(c => {
-        const pill = document.createElement('button');
-        pill.className = 'auto-hub-filter-pill' + (c === 'All' ? ' active' : '');
-        pill.textContent = c;
-        pill.dataset.filter = c;
-        pill.dataset.filterType = 'category';
-        pill.onclick = () => {
-            activeCat = c;
-            catFilters.querySelectorAll('.auto-hub-filter-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === c));
-            filterRecipes();
-        };
-        catFilters.appendChild(pill);
-    });
-    pane.appendChild(catFilters);
-
-    // Difficulty filters
-    const diffFilters = document.createElement('div');
-    diffFilters.className = 'auto-hub-filters';
-    difficulties.forEach(d => {
-        const pill = document.createElement('button');
-        pill.className = 'auto-hub-filter-pill' + (d === 'All' ? ' active' : '');
-        pill.textContent = d;
-        pill.dataset.filter = d;
-        pill.dataset.filterType = 'difficulty';
-        pill.onclick = () => {
-            activeDiff = d;
-            diffFilters.querySelectorAll('.auto-hub-filter-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === d));
-            filterRecipes();
-        };
-        diffFilters.appendChild(pill);
-    });
-    pane.appendChild(diffFilters);
-
-    const grid = document.createElement('div');
-    grid.className = 'auto-hub-recipes-grid';
-
-    AUTO_HUB_RECIPES.forEach(r => {
-        const card = document.createElement('div');
-        card.className = 'auto-hub-recipe-card';
-        card.dataset.category = r.category;
-        card.dataset.difficulty = r.difficulty;
-
-        const trigLabel = _autoFormatTrigger(r.when.type, r.when.config);
-        const actLabel = _autoFormatAction(r.do.type);
-
-        let chainHTML = '';
-        if (r.chain) {
-            chainHTML = '<div class="auto-hub-recipe-chain">' + r.chain.map((step, i) => {
-                let cls = 'flow-action';
-                if (i === 0) cls = 'flow-trigger';
-                else if (step.startsWith('\u26A1')) cls = 'flow-notify';
-                return (i > 0 ? '<span class="flow-arrow">&rarr;</span>' : '') +
-                    `<span class="${cls}">${_esc(step)}</span>`;
-            }).join('') + '</div>';
-        } else {
-            chainHTML = `<div class="auto-hub-recipe-chain">
-                <span class="flow-trigger">${_esc(trigLabel)}</span>
-                <span class="flow-arrow">&rarr;</span>
-                <span class="flow-action">${_esc(actLabel)}</span>
-                ${r.then.length ? r.then.map(th => `<span class="flow-arrow">&rarr;</span><span class="flow-notify">${_esc(_autoFormatNotify(th.type))}</span>`).join('') : ''}
-            </div>`;
-        }
-
-        card.innerHTML = `
-            <div class="auto-hub-recipe-header">
-                <div class="auto-hub-recipe-icon">${r.icon}</div>
-                <div class="auto-hub-recipe-name">${_esc(r.name)}</div>
-                <span class="auto-hub-badge ${r.difficulty}">${_esc(r.difficulty)}</span>
-            </div>
-            <div class="auto-hub-recipe-desc">${_esc(r.desc)}</div>
-            ${chainHTML}
-            ${r.note ? `<div class="auto-hub-recipe-note">${_esc(r.note)}</div>` : ''}
-            <button class="auto-hub-recipe-use" onclick="event.stopPropagation(); useHubRecipe('${r.id}')">Use This</button>
-        `;
-        card.onclick = () => useHubRecipe(r.id);
-        grid.appendChild(card);
-    });
-    pane.appendChild(grid);
-
-    function filterRecipes() {
-        grid.querySelectorAll('.auto-hub-recipe-card').forEach(card => {
-            const catMatch = activeCat === 'All' || card.dataset.category === activeCat;
-            const diffMatch = activeDiff === 'All' || card.dataset.difficulty === activeDiff.toLowerCase();
-            card.style.display = (catMatch && diffMatch) ? '' : 'none';
-        });
-    }
-
-    return pane;
-}
-
-function _buildHubGuides() {
-    const pane = document.createElement('div');
-
-    const callout = document.createElement('div');
-    callout.className = 'auto-hub-callout';
-    callout.innerHTML = '<span class="auto-hub-callout-icon">\uD83D\uDCA1</span><span>Click any guide to expand step-by-step instructions. Related recipes let you jump straight to a pre-filled template.</span>';
-    pane.appendChild(callout);
-
-    AUTO_HUB_GUIDES.forEach(g => {
-        const card = document.createElement('div');
-        card.className = 'auto-hub-guide-card';
-
-        const headerEl = document.createElement('div');
-        headerEl.className = 'auto-hub-guide-header';
-        headerEl.innerHTML = `
-            <span class="auto-hub-guide-icon">${g.icon}</span>
-            <span class="auto-hub-guide-title">${_esc(g.title)}</span>
-            <span class="auto-hub-badge ${g.difficulty}">${_esc(g.difficulty)}</span>
-            <span class="auto-hub-guide-chevron">&#9660;</span>
-        `;
-        headerEl.onclick = () => card.classList.toggle('expanded');
-        card.appendChild(headerEl);
-
-        const bodyEl = document.createElement('div');
-        bodyEl.className = 'auto-hub-guide-body';
-        bodyEl.innerHTML = `
-            <div class="auto-hub-guide-subtitle">${_esc(g.subtitle)}</div>
-            <ol class="auto-hub-steps">${g.steps.map(s => `<li>${s}</li>`).join('')}</ol>
-            ${g.relatedRecipes.length ? `
-                <div class="auto-hub-guide-related">
-                    <span class="auto-hub-guide-related-label">Related:</span>
-                    ${g.relatedRecipes.map(rId => {
-            const recipe = AUTO_HUB_RECIPES.find(r => r.id === rId);
-            return recipe ? `<button class="auto-hub-guide-related-link" onclick="event.stopPropagation(); useHubRecipe('${rId}')">${recipe.icon} ${_esc(recipe.name)}</button>` : '';
-        }).join('')}
-                </div>
-            ` : ''}
-        `;
-        card.appendChild(bodyEl);
-        pane.appendChild(card);
-    });
-
-    return pane;
-}
-
-function _buildHubTips() {
-    const pane = document.createElement('div');
-
-    const callout = document.createElement('div');
-    callout.className = 'auto-hub-callout';
-    callout.innerHTML = '<span class="auto-hub-callout-icon">\u2728</span><span>Power-user tips to get the most out of your automations.</span>';
-    pane.appendChild(callout);
-
-    const grid = document.createElement('div');
-    grid.className = 'auto-hub-tips-grid';
-    AUTO_HUB_TIPS.forEach(t => {
-        const card = document.createElement('div');
-        card.className = 'auto-hub-tip-card';
-        card.innerHTML = `
-            <div class="auto-hub-tip-header">
-                <span class="auto-hub-tip-icon">${t.icon}</span>
-                <span class="auto-hub-tip-title">${_esc(t.title)}</span>
-                <span class="auto-hub-tip-tag">${_esc(t.tag)}</span>
-            </div>
-            <div class="auto-hub-tip-body">${t.body}</div>
-        `;
-        grid.appendChild(card);
-    });
-    pane.appendChild(grid);
-    return pane;
-}
-
-function _buildHubReference() {
-    const pane = document.createElement('div');
-    const sections = [
-        { label: 'Triggers (WHEN)', data: AUTO_HUB_REFERENCE.triggers },
-        { label: 'Actions (DO)', data: AUTO_HUB_REFERENCE.actions },
-        { label: 'Then Actions (THEN)', data: AUTO_HUB_REFERENCE.thenActions },
-    ];
-
-    sections.forEach(sec => {
-        const totalItems = sec.data.reduce((n, g) => n + g.items.length, 0);
-        const group = document.createElement('div');
-        group.className = 'auto-hub-ref-group';
-
-        const header = document.createElement('div');
-        header.className = 'auto-hub-ref-group-header';
-        header.innerHTML = `
-            <span class="auto-hub-ref-group-label">${_esc(sec.label)}</span>
-            <span class="auto-hub-ref-group-count">${totalItems}</span>
-            <span class="auto-hub-ref-chevron">&#9660;</span>
-        `;
-        header.onclick = () => group.classList.toggle('expanded');
-        group.appendChild(header);
-
-        const body = document.createElement('div');
-        body.className = 'auto-hub-ref-body';
-        sec.data.forEach(sub => {
-            body.innerHTML += `<div class="auto-hub-ref-subheader">${_esc(sub.group)}</div>`;
-            let tableHTML = '<table class="auto-hub-table"><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody>';
-            sub.items.forEach(item => {
-                tableHTML += `<tr><td>${_esc(item.label)}</td><td>${_esc(item.desc)}</td></tr>`;
-            });
-            tableHTML += '</tbody></table>';
-            body.innerHTML += tableHTML;
-        });
-        group.appendChild(body);
-        pane.appendChild(group);
-    });
-    return pane;
-}
-
-async function useHubRecipe(recipeId) {
-    const t = AUTO_HUB_RECIPES.find(r => r.id === recipeId);
-    if (!t) return;
-    await showAutomationBuilder();
-    document.getElementById('builder-name').value = t.name;
-    _autoBuilder.when = { type: t.when.type, config: JSON.parse(JSON.stringify(t.when.config)) };
-    _autoBuilder.do = { type: t.do.type, config: JSON.parse(JSON.stringify(t.do.config)) };
-    _autoBuilder.then = t.then.map(th => ({ type: th.type, config: JSON.parse(JSON.stringify(th.config)) }));
-    _renderBuilderSidebar();
-    _renderBuilderCanvas();
-    if (t.note) {
-        showToast(t.note, 'info');
-    }
-}
-
-async function deployHubGroup(groupId) {
-    const group = AUTO_HUB_GROUPS.find(g => g.id === groupId);
-    if (!group) return;
-
-    // Check if any automations need notifications — prompt for config
-    const needsNotify = group.automations.some(a => a.needs_notify);
-    let notifyConfig = null;
-
-    if (needsNotify) {
-        notifyConfig = await _promptNotifyConfig(group.name);
-        if (notifyConfig === null) return; // User cancelled
-        if (notifyConfig === false) notifyConfig = null; // Skip notifications, still deploy
-    }
-
-    // Deploy all automations in the group
-    let created = 0, failed = 0;
-    for (const auto of group.automations) {
-        try {
-            const payload = {
-                name: auto.name,
-                trigger_type: auto.trigger_type,
-                trigger_config: auto.trigger_config,
-                action_type: auto.action_type,
-                action_config: auto.action_config,
-                then_actions: [...auto.then_actions],
-                group_name: auto.group_name,
-                enabled: true,
-            };
-
-            // Inject notification config for automations that need it
-            if (auto.needs_notify && notifyConfig) {
-                payload.then_actions.push(notifyConfig);
-            }
-
-            const response = await fetch('/api/automations', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload),
-            });
-
-            if (response.ok) {
-                created++;
-            } else {
-                const err = await response.json();
-                console.error(`Failed to create "${auto.name}":`, err);
-                failed++;
-            }
-        } catch (e) {
-            console.error(`Error creating "${auto.name}":`, e);
-            failed++;
-        }
-    }
-
-    if (created > 0) {
-        showToast(`Deployed "${group.name}" — ${created} automation${created > 1 ? 's' : ''} created${failed ? `, ${failed} failed` : ''}`, 'success');
-        loadAutomations();
-    } else {
-        showToast(`Failed to deploy "${group.name}"`, 'error');
-    }
-}
-
-function _promptNotifyConfig(groupName) {
-    return new Promise(resolve => {
-        const overlay = document.createElement('div');
-        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
-
-        overlay.innerHTML = `
-            <div style="background:var(--bg-secondary, #1e1e2e);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:28px;max-width:420px;width:90%;color:var(--text-primary, #fff);font-family:inherit;">
-                <h3 style="margin:0 0 6px;font-size:1.1em;">Configure Notifications</h3>
-                <p style="margin:0 0 18px;font-size:0.85em;opacity:0.5;">${groupName} includes notification steps. Choose how to get notified.</p>
-                <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:18px;">
-                    <label style="font-size:0.85em;opacity:0.7;">Notification Type</label>
-                    <select id="deploy-notify-type" style="padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.9em;">
-                        <option value="discord_webhook">Discord Webhook</option>
-                        <option value="telegram">Telegram</option>
-                        <option value="pushbullet">Pushbullet</option>
-                        <option value="none">Skip Notifications</option>
-                    </select>
-                    <div id="deploy-notify-fields"></div>
-                </div>
-                <div style="display:flex;gap:10px;justify-content:flex-end;">
-                    <button id="deploy-notify-cancel" style="padding:8px 20px;border:1px solid rgba(255,255,255,0.1);border-radius:8px;background:transparent;color:rgba(255,255,255,0.7);cursor:pointer;font-size:0.88em;">Cancel</button>
-                    <button id="deploy-notify-confirm" style="padding:8px 20px;border:none;border-radius:8px;background:var(--accent-color,#1db954);color:#fff;cursor:pointer;font-size:0.88em;font-weight:600;">Deploy</button>
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(overlay);
-
-        const typeSelect = overlay.querySelector('#deploy-notify-type');
-        const fieldsDiv = overlay.querySelector('#deploy-notify-fields');
-
-        function updateFields() {
-            const type = typeSelect.value;
-            if (type === 'discord_webhook') {
-                fieldsDiv.innerHTML = '<input id="deploy-notify-url" type="text" placeholder="Discord Webhook URL" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
-            } else if (type === 'telegram') {
-                fieldsDiv.innerHTML = '<input id="deploy-notify-token" type="text" placeholder="Bot Token" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;"><input id="deploy-notify-chat" type="text" placeholder="Chat ID" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
-            } else if (type === 'pushbullet') {
-                fieldsDiv.innerHTML = '<input id="deploy-notify-token" type="text" placeholder="Access Token" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
-            } else {
-                fieldsDiv.innerHTML = '';
-            }
-        }
-        typeSelect.addEventListener('change', updateFields);
-        updateFields();
-
-        overlay.querySelector('#deploy-notify-cancel').addEventListener('click', () => {
-            document.body.removeChild(overlay);
-            resolve(null);
-        });
-
-        overlay.querySelector('#deploy-notify-confirm').addEventListener('click', () => {
-            const type = typeSelect.value;
-            let config = {};
-            if (type === 'discord_webhook') {
-                config = { webhook_url: (overlay.querySelector('#deploy-notify-url')?.value || '').trim() };
-            } else if (type === 'telegram') {
-                config = { bot_token: (overlay.querySelector('#deploy-notify-token')?.value || '').trim(), chat_id: (overlay.querySelector('#deploy-notify-chat')?.value || '').trim() };
-            } else if (type === 'pushbullet') {
-                config = { access_token: (overlay.querySelector('#deploy-notify-token')?.value || '').trim() };
-            } else {
-                document.body.removeChild(overlay);
-                resolve(false); // Skip notifications but still deploy
-                return;
-            }
-            document.body.removeChild(overlay);
-            resolve({ type, config });
-        });
-
-        overlay.addEventListener('click', (e) => {
-            if (e.target === overlay) { document.body.removeChild(overlay); resolve(null); }
-        });
-    });
-}
-
-// --- Filter Bar ---
-function _initAutoFilterBar(automations) {
-    const bar = document.getElementById('auto-filter-bar');
-    if (!bar) return;
-    if (automations.length < 7) { bar.style.display = 'none'; return; }
-    bar.style.display = '';
-
-    // Populate trigger dropdown
-    const trigSel = document.getElementById('auto-filter-trigger');
-    const actSel = document.getElementById('auto-filter-action');
-    const trigTypes = [...new Set(automations.map(a => a.trigger_type))].sort();
-    const actTypes = [...new Set(automations.map(a => a.action_type))].sort();
-    const prevTrig = trigSel.value;
-    const prevAct = actSel.value;
-    trigSel.innerHTML = '<option value="">All Triggers</option>' + trigTypes.map(t =>
-        `<option value="${_escAttr(t)}">${_esc(_autoFormatTrigger(t, {}))}</option>`).join('');
-    actSel.innerHTML = '<option value="">All Actions</option>' + actTypes.map(t =>
-        `<option value="${_escAttr(t)}">${_esc(_autoFormatAction(t))}</option>`).join('');
-    trigSel.value = prevTrig;
-    actSel.value = prevAct;
-
-    // Bind events (use a flag to avoid double-binding)
-    if (!bar.dataset.bound) {
-        bar.dataset.bound = '1';
-        document.getElementById('auto-filter-search').addEventListener('input', _filterAutomations);
-        trigSel.addEventListener('change', _filterAutomations);
-        actSel.addEventListener('change', _filterAutomations);
-    }
-    _filterAutomations();
-}
-
-function _filterAutomations() {
-    const q = (document.getElementById('auto-filter-search').value || '').toLowerCase().trim();
-    const trigFilter = document.getElementById('auto-filter-trigger').value;
-    const actFilter = document.getElementById('auto-filter-action').value;
-    const cards = document.querySelectorAll('#automations-list .automation-card');
-    let visible = 0;
-    cards.forEach(card => {
-        const name = (card.querySelector('.automation-name')?.textContent || '').toLowerCase();
-        const trig = card.querySelector('.flow-trigger')?.textContent || '';
-        const act = card.querySelector('.flow-action')?.textContent || '';
-        // Match search text against name, trigger label, action label
-        const matchQ = !q || name.includes(q) || trig.toLowerCase().includes(q) || act.toLowerCase().includes(q);
-        // Match trigger/action type filters using data attributes
-        const matchTrig = !trigFilter || card.dataset.triggerType === trigFilter;
-        const matchAct = !actFilter || card.dataset.actionType === actFilter;
-        const show = matchQ && matchTrig && matchAct;
-        card.style.display = show ? '' : 'none';
-        if (show) visible++;
-    });
-    const countEl = document.getElementById('auto-filter-count');
-    if (countEl) {
-        countEl.textContent = (q || trigFilter || actFilter) ? `${visible} of ${cards.length}` : '';
-    }
-}
-
-// --- Group Dropdown ---
-let _activeGroupDropdown = null;
-
-function _showGroupDropdown(event, autoId, currentGroup) {
-    // Close any existing dropdown
-    _closeGroupDropdown();
-
-    const btn = event.currentTarget;
-    const card = btn.closest('.automation-card');
-    if (!card) return;
-
-    // Collect all existing group names from visible cards
-    const allGroups = new Set();
-    document.querySelectorAll('#automations-list .automation-card .automation-group-btn[data-group]').forEach(b => {
-        const g = b.dataset.group;
-        if (g) allGroups.add(g);
-    });
-
-    const dropdown = document.createElement('div');
-    dropdown.className = 'auto-group-dropdown';
-
-    let html = '';
-    if (currentGroup) {
-        html += `<div class="auto-group-option ungroup" onclick="_assignGroup(${autoId}, null)">Remove from group</div>`;
-        html += '<div class="auto-group-divider"></div>';
-    }
-    allGroups.forEach(g => {
-        const isActive = g === currentGroup;
-        html += `<div class="auto-group-option${isActive ? ' active' : ''}" onclick="_assignGroup(${autoId}, '${_escAttr(g)}')">${_esc(g)}</div>`;
-    });
-    if (allGroups.size) html += '<div class="auto-group-divider"></div>';
-    html += `<input class="auto-group-input" placeholder="New group name..." onkeydown="if(event.key==='Enter'){_assignGroup(${autoId}, this.value.trim()); event.preventDefault();}">`;
-
-    dropdown.innerHTML = html;
-
-    // Position dropdown on document.body to avoid overflow:hidden clipping
-    const rect = btn.getBoundingClientRect();
-    dropdown.style.position = 'fixed';
-    dropdown.style.right = (window.innerWidth - rect.right) + 'px';
-    dropdown.style.left = 'auto';
-    document.body.appendChild(dropdown);
-    _activeGroupDropdown = dropdown;
-
-    // Open upward if not enough room below
-    const dropdownHeight = dropdown.offsetHeight;
-    if (rect.bottom + 4 + dropdownHeight > window.innerHeight && rect.top - 4 - dropdownHeight > 0) {
-        dropdown.style.top = (rect.top - 4 - dropdownHeight) + 'px';
-    } else {
-        dropdown.style.top = (rect.bottom + 4) + 'px';
-    }
-
-    // Focus the input
-    setTimeout(() => dropdown.querySelector('.auto-group-input')?.focus(), 50);
-
-    // Close on outside click
-    const handler = (e) => {
-        if (!dropdown.contains(e.target) && e.target !== btn) {
-            _closeGroupDropdown();
-            document.removeEventListener('click', handler, true);
-        }
-    };
-    setTimeout(() => document.addEventListener('click', handler, true), 10);
-}
-
-function _closeGroupDropdown() {
-    if (_activeGroupDropdown) {
-        _activeGroupDropdown.remove();
-        _activeGroupDropdown = null;
-    }
-}
-
-async function _assignGroup(autoId, groupName) {
-    _closeGroupDropdown();
-    try {
-        const res = await fetch('/api/automations/' + autoId, {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ group_name: groupName || null })
-        });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast(groupName ? `Moved to "${groupName}"` : 'Removed from group', 'success');
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-function renderAutomationCard(a) {
-    const card = document.createElement('div');
-    card.className = 'automation-card' + (a.enabled ? '' : ' disabled') + (a.is_system ? ' system' : '');
-    card.dataset.id = a.id;
-    card.dataset.triggerType = a.trigger_type || '';
-    card.dataset.actionType = a.action_type || '';
-
-    // Drag-and-drop (non-system only)
-    if (!a.is_system) {
-        card.draggable = true;
-        card.addEventListener('dragstart', (e) => {
-            _autoDragState = { id: a.id, groupName: a.group_name || null };
-            e.dataTransfer.setData('text/plain', String(a.id));
-            e.dataTransfer.effectAllowed = 'move';
-            card.classList.add('dragging');
-            // Dim protected sections during drag
-            document.querySelectorAll('.section-protected').forEach(s => s.classList.add('no-drop'));
-        });
-        card.addEventListener('dragend', () => {
-            card.classList.remove('dragging');
-            _autoDragState = null;
-            _autoDragEnterCount = 0;
-            document.querySelectorAll('.drop-target').forEach(el => el.classList.remove('drop-target'));
-            document.querySelectorAll('.no-drop').forEach(el => el.classList.remove('no-drop'));
-            if (_autoDragExpandTimer) { clearTimeout(_autoDragExpandTimer); _autoDragExpandTimer = null; }
-        });
-    }
-    const tIcon = _autoIcons[a.trigger_type] || '\u2699\uFE0F';
-    const aIcon = _autoIcons[a.action_type] || '\u2699\uFE0F';
-    const tl = tIcon + ' ' + _autoFormatTrigger(a.trigger_type, a.trigger_config);
-    const al = aIcon + ' ' + _autoFormatAction(a.action_type);
-    const thenItems = a.then_actions || [];
-    const actionDelay = a.action_config && a.action_config.delay ? a.action_config.delay : 0;
-    const metaParts = [];
-    if (a.last_run) metaParts.push('Last: ' + _autoTimeAgo(a.last_run));
-    const _timerTriggers = ['schedule', 'daily_time', 'weekly_time'];
-    if (a.next_run && a.enabled && _timerTriggers.includes(a.trigger_type)) metaParts.push('<span class="auto-next-run" data-next="' + _escAttr(a.next_run) + '">Next: ' + _autoTimeUntil(a.next_run) + '</span>');
-    if (!_timerTriggers.includes(a.trigger_type) && a.enabled) metaParts.push('Listening');
-    if (a.run_count) metaParts.push('<span class="auto-runs-link" onclick="event.stopPropagation(); showAutomationHistory(' + a.id + ', \'' + _escAttr(a.name) + '\', \'' + _escAttr(a.action_type || '') + '\')" title="View run history">Runs: ' + a.run_count + '</span>');
-    if (a.last_error) metaParts.push('Error: ' + _esc(a.last_error));
-
-    const dupeBtn = a.is_system ? '' :
-        `<button class="automation-dupe-btn" title="Duplicate" onclick="event.stopPropagation(); duplicateAutomation(${a.id})">&#128203;</button>`;
-    const groupBtn = a.is_system ? '' :
-        `<button class="automation-group-btn${a.group_name ? ' grouped' : ''}" data-group="${_escAttr(a.group_name || '')}" title="${a.group_name ? 'Group: ' + _escAttr(a.group_name) : 'Assign group'}" onclick="event.stopPropagation(); _showGroupDropdown(event, ${a.id}, ${a.group_name ? "'" + _escAttr(a.group_name) + "'" : 'null'})">&#128193;</button>`;
-    const deleteBtn = a.is_system ? '' :
-        `<button class="automation-delete-btn" title="Delete" onclick="event.stopPropagation(); deleteAutomation(${a.id}, '${_escAttr(a.name)}')">&#128465;</button>`;
-
-    card.innerHTML = `
-        <div class="automation-status ${a.enabled ? 'enabled' : 'disabled'}"></div>
-        <div class="automation-info">
-            <div class="automation-name">${_esc(a.name)}</div>
-            <div class="automation-flow">
-                <span class="flow-trigger">${_esc(tl)}</span>
-                <span class="flow-arrow">&rarr;</span>
-                ${actionDelay ? `<span class="flow-delay">\u23F3 ${actionDelay}m</span><span class="flow-arrow">&rarr;</span>` : ''}
-                <span class="flow-action">${_esc(al)}</span>
-                ${thenItems.length ? thenItems.map(t => `<span class="flow-arrow">&rarr;</span><span class="flow-notify">${_esc(_autoFormatNotify(t.type))}</span>`).join('') : ''}
-            </div>
-            <div class="automation-meta">${metaParts.join(' &middot; ')}</div>
-        </div>
-        <div class="automation-actions">
-            <button class="automation-run-btn" title="Run now" onclick="event.stopPropagation(); runAutomation(${a.id})">&#9654;</button>
-            <label class="automation-toggle" onclick="event.stopPropagation();">
-                <input type="checkbox" ${a.enabled ? 'checked' : ''} onchange="toggleAutomation(${a.id})">
-                <span class="toggle-slider"></span>
-            </label>
-            <button class="automation-edit-btn" title="Edit" onclick="event.stopPropagation(); showAutomationBuilder(${a.id})">&#9881;</button>
-            ${dupeBtn}
-            ${groupBtn}
-            ${deleteBtn}
-        </div>
-    `;
-    return card;
-}
-
-function _autoFormatTrigger(type, config) {
-    if (type === 'schedule' && config) return 'Every ' + (config.interval || 1) + ' ' + (config.unit || 'hours');
-    if (type === 'daily_time' && config) return 'Daily at ' + (config.time || '00:00');
-    if (type === 'weekly_time' && config) {
-        const days = (config.days || []).map(d => d.charAt(0).toUpperCase() + d.slice(1)).join(', ');
-        return (days || 'Every day') + ' at ' + (config.time || '00:00');
-    }
-    if (type === 'signal_received' && config) {
-        const sig = config.signal_name || 'unknown';
-        return 'Signal: ' + sig;
-    }
-    const labels = {
-        app_started: 'App Started', track_downloaded: 'Track Downloaded', batch_complete: 'Batch Complete',
-        watchlist_new_release: 'New Release Found', playlist_synced: 'Playlist Synced',
-        playlist_changed: 'Playlist Changed', discovery_completed: 'Discovery Complete',
-        wishlist_processing_completed: 'Wishlist Processed', watchlist_scan_completed: 'Watchlist Scan Done',
-        database_update_completed: 'Database Updated', download_failed: 'Download Failed',
-        download_quarantined: 'File Quarantined', wishlist_item_added: 'Wishlist Item Added',
-        watchlist_artist_added: 'Artist Watched', watchlist_artist_removed: 'Artist Unwatched',
-        import_completed: 'Import Complete', mirrored_playlist_created: 'Playlist Mirrored',
-        quality_scan_completed: 'Quality Scan Done', duplicate_scan_completed: 'Duplicate Scan Done',
-        library_scan_completed: 'Library Scan Done', signal_received: 'Signal Received'
-    };
-    let label = labels[type] || type || 'Unknown';
-    if (config && config.conditions && config.conditions.length) {
-        const first = config.conditions[0];
-        label += ' (' + first.field + ' ' + first.operator + ' "' + first.value + '"' +
-            (config.conditions.length > 1 ? ' +' + (config.conditions.length - 1) + ' more' : '') + ')';
-    }
-    return label;
-}
-function _autoFormatAction(type) {
-    const labels = {
-        process_wishlist: 'Process Wishlist', scan_watchlist: 'Scan Watchlist',
-        scan_library: 'Scan Library', refresh_mirrored: 'Refresh Mirrored',
-        sync_playlist: 'Sync Playlist', discover_playlist: 'Discover Playlist',
-        notify_only: 'Notify Only',
-        start_database_update: 'Update Database', run_duplicate_cleaner: 'Run Duplicate Cleaner',
-        clear_quarantine: 'Clear Quarantine', cleanup_wishlist: 'Clean Up Wishlist',
-        update_discovery_pool: 'Update Discovery', start_quality_scan: 'Run Quality Scan',
-        backup_database: 'Backup Database',
-        refresh_beatport_cache: 'Refresh Beatport Cache', clean_search_history: 'Clean Search History',
-        clean_completed_downloads: 'Clean Completed Downloads',
-        full_cleanup: 'Full Cleanup',
-        playlist_pipeline: 'Playlist Pipeline'
-    };
-    return labels[type] || type || 'Unknown';
-}
-function _autoFormatNotify(type) {
-    if (type === 'discord_webhook') return 'Discord';
-    if (type === 'pushbullet') return 'Pushbullet';
-    if (type === 'telegram') return 'Telegram';
-    if (type === 'fire_signal') return '\u26A1 Signal';
-    if (type === 'run_script') return '\uD83D\uDCBB Script';
-    return type || '';
-}
-function _autoParseUTC(ts) {
-    // If timestamp already has timezone info (+00:00 or Z), parse as-is; otherwise append Z to treat as UTC
-    if (/[Zz]$/.test(ts) || /[+-]\d{2}:\d{2}$/.test(ts)) return new Date(ts).getTime();
-    return new Date(ts + 'Z').getTime();
-}
-function _autoTimeAgo(ts) {
-    if (!ts) return 'Never';
-    const d = (Date.now() - _autoParseUTC(ts)) / 1000;
-    if (d < 60) return 'just now'; if (d < 3600) return Math.floor(d / 60) + 'm ago';
-    if (d < 86400) return Math.floor(d / 3600) + 'h ago'; return Math.floor(d / 86400) + 'd ago';
-}
-function _autoTimeUntil(ts) {
-    if (!ts) return '';
-    const d = (_autoParseUTC(ts) - Date.now()) / 1000;
-    if (d <= 0) return 'soon'; if (d < 60) return 'in ' + Math.ceil(d) + 's';
-    if (d < 3600) return 'in ' + Math.ceil(d / 60) + 'm'; if (d < 86400) return 'in ' + Math.round(d / 3600) + 'h';
-    return 'in ' + Math.round(d / 86400) + 'd';
-}
-
-// --- Live countdown for "Next: in Xs" ---
-setInterval(() => {
-    document.querySelectorAll('.auto-next-run[data-next]').forEach(el => {
-        el.textContent = 'Next: ' + _autoTimeUntil(el.dataset.next);
-    });
-}, 1000);
-
-// --- CRUD ---
-
-async function deleteAutomation(id, name) {
-    if (!await showConfirmDialog({ title: 'Delete Automation', message: `Delete automation "${name}"?`, confirmText: 'Delete', destructive: true })) return;
-    try {
-        const res = await fetch('/api/automations/' + id, { method: 'DELETE' });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast('Automation deleted', 'success');
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-async function duplicateAutomation(id) {
-    try {
-        const res = await fetch('/api/automations/' + id + '/duplicate', { method: 'POST' });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast('Automation duplicated', 'success');
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-async function toggleAutomation(id) {
-    try {
-        const res = await fetch('/api/automations/' + id + '/toggle', { method: 'POST' });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-// --- Automation Progress Tracking ---
-const _autoProgressLogCounts = {};
-const _autoProgressHideTimers = {};
-
-function updateAutomationProgressFromData(data) {
-    for (const [aidStr, state] of Object.entries(data)) {
-        const aid = parseInt(aidStr);
-        const card = document.querySelector(`.automation-card[data-id="${aid}"]`);
-        if (!card) continue;
-
-        let panel = card.querySelector('.automation-output');
-        if (!panel) {
-            panel = document.createElement('div');
-            panel.className = 'automation-output';
-            panel.innerHTML = `
-                <div class="auto-progress-bar-wrap"><div class="auto-progress-bar" style="width:0%"></div></div>
-                <div class="auto-progress-phase"></div>
-                <div class="auto-progress-log"></div>
-            `;
-            card.appendChild(panel);
-            _autoProgressLogCounts[aid] = 0;
-        }
-
-        // Update progress bar
-        const bar = panel.querySelector('.auto-progress-bar');
-        bar.style.width = (state.progress || 0) + '%';
-
-        // Update phase text
-        const phaseEl = panel.querySelector('.auto-progress-phase');
-        phaseEl.textContent = state.phase || '';
-
-        // Status indicator on card
-        const statusDot = card.querySelector('.automation-status');
-
-        if (state.status === 'running') {
-            if (statusDot) statusDot.className = 'automation-status running';
-            card.classList.add('running');
-            panel.classList.add('visible');
-            panel.classList.remove('finished', 'error');
-            if (_autoProgressHideTimers[aid]) {
-                clearTimeout(_autoProgressHideTimers[aid]);
-                delete _autoProgressHideTimers[aid];
-            }
-            // Reset log for new run (handles re-run within hide window)
-            if (_autoProgressLogCounts[aid] > 0 && state.log && state.log.length < _autoProgressLogCounts[aid]) {
-                const existingLog = panel.querySelector('.auto-progress-log');
-                if (existingLog) existingLog.innerHTML = '';
-                _autoProgressLogCounts[aid] = 0;
-            }
-        } else if (state.status === 'finished' || state.status === 'error') {
-            if (statusDot) statusDot.className = 'automation-status ' + (card.querySelector('input[type=checkbox]')?.checked ? 'enabled' : 'disabled');
-            card.classList.remove('running');
-            bar.style.width = '100%';
-            panel.classList.add('finished');
-            if (state.status === 'error') panel.classList.add('error');
-            if (!_autoProgressHideTimers[aid]) {
-                _autoProgressHideTimers[aid] = setTimeout(() => {
-                    panel.classList.remove('visible');
-                    delete _autoProgressHideTimers[aid];
-                    _autoProgressLogCounts[aid] = 0;
-                }, 30000);
-            }
-        }
-
-        // Update log lines
-        const logEl = panel.querySelector('.auto-progress-log');
-        const rendered = _autoProgressLogCounts[aid] || 0;
-        const logLines = state.log || [];
-        if (logLines.length > rendered) {
-            // Normal append — log is still growing
-            for (let i = rendered; i < logLines.length; i++) {
-                const line = logLines[i];
-                const div = document.createElement('div');
-                div.className = 'auto-log-line ' + (line.type || 'info');
-                div.textContent = line.text;
-                logEl.appendChild(div);
-            }
-            _autoProgressLogCounts[aid] = logLines.length;
-            logEl.scrollTop = logEl.scrollHeight;
-        } else if (logLines.length === rendered && logLines.length >= 50) {
-            // Log buffer is full and rotating — replace last few lines
-            const children = logEl.children;
-            if (children.length > 0) {
-                const lastServerLine = logLines[logLines.length - 1];
-                const lastDomLine = children[children.length - 1];
-                if (lastServerLine && lastDomLine.textContent !== lastServerLine.text) {
-                    // Content changed — full re-render
-                    logEl.innerHTML = '';
-                    for (const line of logLines) {
-                        const div = document.createElement('div');
-                        div.className = 'auto-log-line ' + (line.type || 'info');
-                        div.textContent = line.text;
-                        logEl.appendChild(div);
-                    }
-                    _autoProgressLogCounts[aid] = logLines.length;
-                    logEl.scrollTop = logEl.scrollHeight;
-                }
-            }
-        }
-    }
-}
-
-async function runAutomation(id) {
-    try {
-        const res = await fetch('/api/automations/' + id + '/run', { method: 'POST' });
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast('Automation triggered', 'success');
-        setTimeout(() => loadAutomations(), 1500);
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-const _RESULT_DISPLAY_MAP = {
-    'start_database_update': [
-        { key: 'artists', label: 'Artists' },
-        { key: 'albums', label: 'Albums' },
-        { key: 'tracks', label: 'Tracks' },
-        { key: 'removed_artists', label: 'Removed Artists', hideZero: true },
-        { key: 'removed_albums', label: 'Removed Albums', hideZero: true },
-        { key: 'removed_tracks', label: 'Removed Tracks', hideZero: true },
-    ],
-    'deep_scan_library': [
-        { key: 'artists', label: 'Artists' },
-        { key: 'albums', label: 'Albums' },
-        { key: 'tracks', label: 'Tracks' },
-        { key: 'removed_artists', label: 'Removed Artists', hideZero: true },
-        { key: 'removed_albums', label: 'Removed Albums', hideZero: true },
-        { key: 'removed_tracks', label: 'Removed Tracks', hideZero: true },
-    ],
-    'scan_watchlist': [
-        { key: 'artists_scanned', label: 'Artists Scanned' },
-        { key: 'successful_scans', label: 'Successful' },
-        { key: 'new_tracks_found', label: 'New Tracks' },
-        { key: 'tracks_added_to_wishlist', label: 'Added to Wishlist' },
-    ],
-    'run_duplicate_cleaner': [
-        { key: 'files_scanned', label: 'Files Scanned' },
-        { key: 'duplicates_found', label: 'Duplicates Found' },
-        { key: 'files_deleted', label: 'Files Deleted' },
-        { key: 'space_freed_mb', label: 'Space Freed (MB)' },
-    ],
-    'start_quality_scan': [
-        { key: 'tracks_scanned', label: 'Tracks Scanned' },
-        { key: 'quality_met', label: 'Quality Met' },
-        { key: 'low_quality', label: 'Low Quality' },
-        { key: 'matched', label: 'Added to Wishlist' },
-    ],
-    'scan_library': [
-        { key: 'scan_duration_seconds', label: 'Duration (s)' },
-    ],
-    'backup_database': [
-        { key: 'size_mb', label: 'Backup Size (MB)' },
-    ],
-    'refresh_mirrored': [
-        { key: 'refreshed', label: 'Playlists Refreshed' },
-        { key: 'errors', label: 'Errors', hideZero: true },
-    ],
-    'clear_quarantine': [
-        { key: 'removed', label: 'Items Removed' },
-    ],
-    'cleanup_wishlist': [
-        { key: 'removed', label: 'Duplicates Removed' },
-    ],
-    'full_cleanup': [
-        { key: 'quarantine_removed', label: 'Quarantine Removed' },
-        { key: 'staging_removed', label: 'Import Dirs Removed' },
-        { key: 'total_removed', label: 'Total Items Removed' },
-    ],
-    'playlist_pipeline': [
-        { key: 'playlists_refreshed', label: 'Refreshed' },
-        { key: 'tracks_discovered', label: 'Discovered' },
-        { key: 'tracks_synced', label: 'Synced' },
-        { key: 'sync_skipped', label: 'Skipped', hideZero: true },
-        { key: 'wishlist_queued', label: 'Wishlist Queued' },
-        { key: 'duration_seconds', label: 'Duration (s)' },
-    ],
-};
-
-function _renderResultStats(resultJson, actionType) {
-    if (!resultJson || typeof resultJson !== 'object') return '';
-    var fields = _RESULT_DISPLAY_MAP[actionType];
-    var items = [];
-    if (fields) {
-        fields.forEach(function (f) {
-            var val = resultJson[f.key];
-            if (val == null) return;
-            if (f.hideZero && (val === 0 || val === '0')) return;
-            items.push({ label: f.label, value: val });
-        });
-    } else {
-        // Generic fallback: show all non-status, non-underscore keys
-        Object.keys(resultJson).forEach(function (k) {
-            if (k === 'status' || k.startsWith('_')) return;
-            var label = k.replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
-            items.push({ label: label, value: resultJson[k] });
-        });
-    }
-    if (items.length === 0) return '';
-    var html = '<div class="history-stats-grid">';
-    items.forEach(function (it) {
-        html += '<div class="history-stat-item"><div class="history-stat-label">' + _esc(it.label) + '</div><div class="history-stat-value">' + _esc(String(it.value)) + '</div></div>';
-    });
-    html += '</div>';
-    return html;
-}
-
-async function showAutomationHistory(automationId, automationName, actionType) {
-    let modal = document.getElementById('automation-history-modal');
-    if (!modal) {
-        modal = document.createElement('div');
-        modal.id = 'automation-history-modal';
-        modal.className = 'modal-overlay';
-        document.body.appendChild(modal);
-    }
-    modal.innerHTML = '<div class="modal-container automation-history-modal"><div class="history-modal-header"><h3>Run History: ' + _esc(automationName) + '</h3><button class="history-close-btn" onclick="document.getElementById(\'automation-history-modal\').style.display=\'none\'">&times;</button></div><div class="history-modal-body"><div class="history-loading">Loading...</div></div></div>';
-    modal.style.display = 'flex';
-    modal.onclick = function (e) { if (e.target === modal) modal.style.display = 'none'; };
-
-    try {
-        const res = await fetch('/api/automations/' + automationId + '/history?limit=50');
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        const body = modal.querySelector('.history-modal-body');
-        if (!data.history || data.history.length === 0) {
-            body.innerHTML = '<div class="history-empty">No run history yet. History will be recorded on future runs.</div>';
-            return;
-        }
-        let html = '<div class="history-entries">';
-        data.history.forEach(function (entry) {
-            const statusClass = 'history-status-' + (entry.status || 'completed');
-            const statusLabel = (entry.status || 'completed').charAt(0).toUpperCase() + (entry.status || 'completed').slice(1);
-            const timeAgo = _autoTimeAgo(entry.started_at);
-            const duration = entry.duration_seconds != null ? _formatDuration(entry.duration_seconds) : '';
-            const summary = entry.summary ? _esc(entry.summary) : '';
-            const hasLogs = entry.log_lines && entry.log_lines.length > 0;
-            const entryId = 'history-entry-' + entry.id;
-
-            html += '<div class="history-entry">';
-            html += '<div class="history-entry-header" onclick="var el=document.getElementById(\'' + entryId + '\'); if(el) el.classList.toggle(\'expanded\')">';
-            html += '<span class="history-status-badge ' + statusClass + '">' + statusLabel + '</span>';
-            html += '<span class="history-time">' + timeAgo + '</span>';
-            if (duration) html += '<span class="history-duration">' + duration + '</span>';
-            if (hasLogs) html += '<span class="history-expand-icon">&#9660;</span>';
-            html += '</div>';
-            if (summary) html += '<div class="history-summary">' + summary + '</div>';
-            if (entry.result_json && typeof entry.result_json === 'object') {
-                html += _renderResultStats(entry.result_json, actionType);
-            }
-            if (hasLogs) {
-                html += '<div id="' + entryId + '" class="history-log-section">';
-                entry.log_lines.forEach(function (log) {
-                    html += '<div class="history-log-line history-log-' + (log.type || 'info') + '">' + _esc(log.text || '') + '</div>';
-                });
-                html += '</div>';
-            }
-            html += '</div>';
-        });
-        html += '</div>';
-        if (data.total > data.history.length) {
-            html += '<div class="history-total">Showing ' + data.history.length + ' of ' + data.total + ' runs</div>';
-        }
-        body.innerHTML = html;
-    } catch (err) {
-        const body = modal.querySelector('.history-modal-body');
-        if (body) body.innerHTML = '<div class="history-empty">Error loading history: ' + _esc(err.message) + '</div>';
-    }
-}
-
-function _formatDuration(seconds) {
-    if (seconds < 1) return '<1s';
-    if (seconds < 60) return Math.round(seconds) + 's';
-    var m = Math.floor(seconds / 60);
-    var s = Math.round(seconds % 60);
-    if (m < 60) return m + 'm ' + s + 's';
-    var h = Math.floor(m / 60);
-    m = m % 60;
-    return h + 'h ' + m + 'm';
-}
-
-async function saveAutomation() {
-    const name = document.getElementById('builder-name').value.trim();
-    if (!name) { showToast('Name is required', 'error'); return; }
-    if (!_autoBuilder.when) { showToast('Add a trigger (WHEN)', 'error'); return; }
-    if (!_autoBuilder.do) { showToast('Add an action (DO)', 'error'); return; }
-
-    // Read configs from DOM
-    const triggerConfig = _readPlacedConfig('when');
-    const actionConfig = _readPlacedConfig('do');
-
-    // Read THEN actions (multi-slot)
-    const thenActions = _autoBuilder.then.map((item, i) => ({
-        type: item.type,
-        config: _readPlacedConfig('then-' + i),
-    }));
-
-    // Read optional delay from DO slot
-    const delayEl = document.getElementById('cfg-do-delay');
-    const delayVal = delayEl ? parseInt(delayEl.value) : 0;
-    if (delayVal > 0) actionConfig.delay = delayVal;
-
-    const groupInput = document.getElementById('builder-group-name');
-    const groupName = groupInput ? groupInput.value.trim() : '';
-
-    const body = {
-        name,
-        trigger_type: _autoBuilder.when.type, trigger_config: triggerConfig,
-        action_type: _autoBuilder.do.type, action_config: actionConfig,
-        then_actions: thenActions,
-        group_name: groupName || null,
-    };
-
-    try {
-        let res;
-        if (_autoBuilder.editId) {
-            res = await fetch('/api/automations/' + _autoBuilder.editId, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-        } else {
-            res = await fetch('/api/automations', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
-        }
-        const data = await res.json();
-        if (data.error) throw new Error(data.error);
-        showToast(_autoBuilder.editId ? 'Automation updated' : 'Automation created', 'success');
-        hideAutomationBuilder();
-        await loadAutomations();
-    } catch (err) { showToast('Error: ' + err.message, 'error'); }
-}
-
-// --- Builder View ---
-
-async function showAutomationBuilder(editId) {
-    // Load block definitions (always refresh)
-    try {
-        const res = await fetch('/api/automations/blocks');
-        _autoBlocks = await res.json();
-    } catch (e) {
-        if (!_autoBlocks) { showToast('Failed to load blocks', 'error'); return; }
-    }
-
-    _autoMirroredPlaylists = null; // invalidate so it re-fetches
-    _autoSpotifyAuthenticated = false;
-    _autoBuilder = { editId: editId || null, when: null, do: null, then: [], isSystem: false };
-
-    // Populate group datalist from existing automations
-    try {
-        const allRes = await fetch('/api/automations');
-        const allAutos = await allRes.json();
-        const groupSet = new Set();
-        if (Array.isArray(allAutos)) allAutos.forEach(a => { if (a.group_name) groupSet.add(a.group_name); });
-        const datalist = document.getElementById('builder-group-list');
-        if (datalist) datalist.innerHTML = [...groupSet].sort().map(g => `<option value="${_escAttr(g)}">`).join('');
-    } catch (e) { }
-
-    // If editing, load automation data
-    if (editId) {
-        try {
-            const res = await fetch('/api/automations/' + editId);
-            const a = await res.json();
-            if (a.error) throw new Error(a.error);
-            document.getElementById('builder-name').value = a.name || '';
-            const groupInput = document.getElementById('builder-group-name');
-            if (groupInput) groupInput.value = a.group_name || '';
-            _autoBuilder.when = { type: a.trigger_type, config: a.trigger_config || {} };
-            _autoBuilder.do = { type: a.action_type, config: a.action_config || {} };
-            // Load then_actions array
-            _autoBuilder.then = (a.then_actions || []).map(item => ({
-                type: item.type, config: item.config || {}
-            }));
-            // Backward compat: if no then_actions but has notify_type
-            if (!_autoBuilder.then.length && a.notify_type) {
-                _autoBuilder.then = [{ type: a.notify_type, config: a.notify_config || {} }];
-            }
-            _autoBuilder.isSystem = !!a.is_system;
-        } catch (err) { showToast('Failed to load automation', 'error'); return; }
-    } else {
-        document.getElementById('builder-name').value = '';
-        const groupInput = document.getElementById('builder-group-name');
-        if (groupInput) groupInput.value = '';
-    }
-
-    // System automations: lock the name field and hide group
-    document.getElementById('builder-name').readOnly = _autoBuilder.isSystem;
-    const groupEl = document.getElementById('builder-group-name');
-    if (groupEl) groupEl.style.display = _autoBuilder.isSystem ? 'none' : '';
-
-    _renderBuilderSidebar();
-    _renderBuilderCanvas();
-
-    document.getElementById('automations-list-view').style.display = 'none';
-    document.getElementById('automations-builder-view').style.display = '';
-}
-
-function hideAutomationBuilder() {
-    document.getElementById('automations-builder-view').style.display = 'none';
-    document.getElementById('automations-list-view').style.display = '';
-    document.getElementById('builder-name').readOnly = false;
-    _autoBuilder = { editId: null, when: null, do: null, then: [], isSystem: false };
-}
-
-// --- Sidebar ---
-
-function _renderBuilderSidebar() {
-    const sidebar = document.getElementById('builder-sidebar');
-    if (!sidebar || !_autoBlocks) return;
-
-    let html = '';
-    const sections = [
-        { key: 'triggers', title: 'Triggers', slot: 'when' },
-        { key: 'actions', title: 'Actions', slot: 'do' },
-        { key: 'notifications', title: 'Then', slot: 'then' },
-    ];
-
-    sections.forEach(sec => {
-        html += `<div class="sidebar-section"><div class="sidebar-section-title">${sec.title}</div>`;
-        (_autoBlocks[sec.key] || []).forEach(block => {
-            const icon = _autoIcons[block.type] || '\u2699\uFE0F';
-            const disabled = !block.available;
-            const helpKey = 'auto-' + block.type;
-            const hasHelp = !!TOOL_HELP_CONTENT[helpKey];
-            html += `<div class="block-item${disabled ? ' coming-soon' : ''}" ${!disabled ? `draggable="true" ondragstart="_autoDragStart(event,'${block.type}','${sec.slot}')" onclick="_autoClickBlock('${block.type}','${sec.slot}')"` : ''}>
-                <div class="block-item-icon">${icon}</div>
-                <div class="block-item-text">
-                    <div class="block-item-label">${_esc(block.label)}</div>
-                    <div class="block-item-desc">${_esc(block.description)}</div>
-                </div>
-                ${disabled ? '<span class="coming-soon-badge">Soon</span>' : ''}
-                ${hasHelp ? `<button class="tool-help-button block-help-btn" onclick="event.stopPropagation(); openToolHelpModal('${helpKey}')" title="Learn more">?</button>` : ''}
-            </div>`;
-        });
-        html += '</div>';
-    });
-    sidebar.innerHTML = html;
-}
-
-// --- Canvas ---
-
-function _renderBuilderCanvas() {
-    const canvas = document.getElementById('builder-canvas');
-    if (!canvas) return;
-
-    let html = '';
-
-    // WHEN slot
-    const whenData = _autoBuilder.when;
-    html += '<span class="flow-slot-label when">WHEN</span>';
-    if (whenData) {
-        html += `<div class="flow-slot filled" id="slot-when" ondragover="_autoDragOver(event,'when')" ondragleave="_autoDragLeave(event,'when')" ondrop="_autoDrop(event,'when')">
-            ${_renderPlacedBlock('when', whenData)}
-        </div>`;
-    } else {
-        html += `<div class="flow-slot empty" id="slot-when" ondragover="_autoDragOver(event,'when')" ondragleave="_autoDragLeave(event,'when')" ondrop="_autoDrop(event,'when')">
-            <div class="flow-slot-prompt">Drag a trigger here — WHEN does this run?</div>
-        </div>`;
-    }
-
-    html += '<div class="flow-connector"></div>';
-
-    // DO slot
-    const doData = _autoBuilder.do;
-    html += '<span class="flow-slot-label do">DO</span>';
-    if (doData) {
-        html += `<div class="flow-slot filled" id="slot-do" ondragover="_autoDragOver(event,'do')" ondragleave="_autoDragLeave(event,'do')" ondrop="_autoDrop(event,'do')">
-            ${_renderPlacedBlock('do', doData)}
-        </div>`;
-    } else {
-        html += `<div class="flow-slot empty" id="slot-do" ondragover="_autoDragOver(event,'do')" ondragleave="_autoDragLeave(event,'do')" ondrop="_autoDrop(event,'do')">
-            <div class="flow-slot-prompt">Drag an action here — WHAT should it do?</div>
-        </div>`;
-    }
-
-    html += '<div class="flow-connector"></div>';
-
-    // THEN section (multi-slot, 1-3 items)
-    html += '<span class="flow-slot-label then">THEN</span>';
-    if (_autoBuilder.then.length > 0) {
-        _autoBuilder.then.forEach((item, i) => {
-            if (i > 0) html += '<div class="flow-connector small"></div>';
-            html += `<div class="flow-slot filled then-slot" id="slot-then-${i}">
-                ${_renderPlacedBlock('then-' + i, item)}
-            </div>`;
-        });
-    }
-    if (_autoBuilder.then.length < 3) {
-        if (_autoBuilder.then.length > 0) html += '<div class="flow-connector small"></div>';
-        html += `<div class="flow-slot empty then-add" id="slot-then-add"
-            ondragover="_autoDragOver(event,'then')" ondragleave="_autoDragLeave(event,'then')" ondrop="_autoDrop(event,'then')">
-            <div class="flow-slot-prompt">${_autoBuilder.then.length === 0
-                ? 'Drag a then-action here (optional)'
-                : '+ Add another (max 3)'}</div>
-        </div>`;
-    }
-
-    canvas.innerHTML = html;
-    // Load mirrored playlist selects if any are present
-    _autoLoadMirroredSelects();
-    // Set up checkbox state for refresh_mirrored
-    ['when', 'do'].forEach(sk => {
-        const allCb = document.getElementById('cfg-' + sk + '-all');
-        if (allCb) _autoTogglePlaylistSelect(sk);
-    });
-    // Also check then slots
-    _autoBuilder.then.forEach((item, i) => {
-        const allCb = document.getElementById('cfg-then-' + i + '-all');
-        if (allCb) _autoTogglePlaylistSelect('then-' + i);
-    });
-}
-
-function _renderPlacedBlock(slotKey, data) {
-    const blockDef = _findBlockDef(data.type);
-    const icon = _autoIcons[data.type] || '\u2699\uFE0F';
-    const label = blockDef ? blockDef.label : data.type;
-    const configHtml = _renderBlockConfigFields(slotKey, data.type, data.config || {});
-
-    // Add optional delay field for action blocks
-    let delayHtml = '';
-    if (slotKey === 'do') {
-        const delayVal = (data.config && data.config.delay) || '';
-        delayHtml = `<div class="placed-block-config"><div class="config-row">
-            <label>Delay (minutes)</label>
-            <input type="number" id="cfg-${slotKey}-delay" value="${delayVal}" min="0" placeholder="0" style="width:80px;" title="Wait before executing action">
-        </div></div>`;
-    }
-
-    // System automations: lock trigger and action slots (no remove, no replace)
-    const locked = _autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do');
-    const removeBtn = locked ? '' : `<button class="placed-block-remove" onclick="_autoRemoveBlock('${slotKey}')">\u2715</button>`;
-
-    return `<div class="placed-block${locked ? ' locked' : ''}" data-type="${_escAttr(data.type)}">
-        <div class="placed-block-header">
-            <span class="placed-block-icon">${icon}</span>
-            <span class="placed-block-label">${_esc(label)}</span>
-            ${removeBtn}
-        </div>
-        ${configHtml ? '<div class="placed-block-config">' + configHtml + '</div>' : ''}
-        ${delayHtml}
-    </div>`;
-}
-
-function _renderBlockConfigFields(slotKey, blockType, config) {
-    if (blockType === 'schedule') {
-        const interval = config.interval || 6;
-        const unit = config.unit || 'hours';
-        return `<div class="config-row">
-            <label>Every</label>
-            <input type="number" id="cfg-${slotKey}-interval" value="${interval}" min="1" style="width:70px;">
-            <select id="cfg-${slotKey}-unit">
-                <option value="minutes"${unit === 'minutes' ? ' selected' : ''}>Minutes</option>
-                <option value="hours"${unit === 'hours' ? ' selected' : ''}>Hours</option>
-                <option value="days"${unit === 'days' ? ' selected' : ''}>Days</option>
-            </select>
-        </div>`;
-    }
-    if (blockType === 'daily_time') {
-        const timeVal = config.time || '03:00';
-        return `<div class="config-row">
-            <label>At</label>
-            <input type="time" id="cfg-${slotKey}-time" value="${timeVal}">
-        </div>`;
-    }
-    if (blockType === 'weekly_time') {
-        const timeVal = config.time || '03:00';
-        const selectedDays = config.days || [];
-        const allDays = [['mon', 'Mon'], ['tue', 'Tue'], ['wed', 'Wed'], ['thu', 'Thu'], ['fri', 'Fri'], ['sat', 'Sat'], ['sun', 'Sun']];
-        let dayHtml = '<div class="config-row"><label>Days</label><div class="day-picker" id="cfg-' + slotKey + '-days">';
-        allDays.forEach(([val, lbl]) => {
-            const active = selectedDays.includes(val) ? ' active' : '';
-            dayHtml += `<button type="button" class="day-btn${active}" data-day="${val}" onclick="this.classList.toggle('active')">${lbl}</button>`;
-        });
-        dayHtml += '</div></div>';
-        return `<div class="config-row">
-            <label>At</label>
-            <input type="time" id="cfg-${slotKey}-time" value="${timeVal}">
-        </div>${dayHtml}`;
-    }
-
-    // Event triggers with conditions
-    const blockDef = _findBlockDef(blockType);
-    if (blockDef && blockDef.has_conditions) {
-        return _renderConditionBuilder(slotKey, blockDef, config);
-    }
-
-    if (blockType === 'process_wishlist') {
-        const cat = config.category || 'all';
-        return `<div class="config-row">
-            <label>Category</label>
-            <select id="cfg-${slotKey}-category">
-                <option value="all"${cat === 'all' ? ' selected' : ''}>All</option>
-                <option value="albums"${cat === 'albums' ? ' selected' : ''}>Albums</option>
-                <option value="singles"${cat === 'singles' ? ' selected' : ''}>Singles</option>
-            </select>
-        </div>`;
-    }
-    if (blockType === 'signal_received') {
-        const sigName = _escAttr(config.signal_name || '');
-        const knownSignals = (_autoBlocks && _autoBlocks.known_signals) || [];
-        return `<div class="config-row">
-            <label>Signal Name</label>
-            <input type="text" id="cfg-${slotKey}-signal_name" value="${sigName}"
-                list="known-signals-list-${slotKey}" placeholder="e.g. libraryReady"
-                oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9_\\-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '')"
-                style="font-family:monospace;">
-            <datalist id="known-signals-list-${slotKey}">
-                ${knownSignals.map(s => `<option value="${s}">`).join('')}
-            </datalist>
-        </div>
-        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Triggers when another automation fires this signal</div>`;
-    }
-    if (blockType === 'fire_signal') {
-        const sigName = _escAttr(config.signal_name || '');
-        const knownSignals = (_autoBlocks && _autoBlocks.known_signals) || [];
-        return `<div class="config-row">
-            <label>Signal Name</label>
-            <input type="text" id="cfg-${slotKey}-signal_name" value="${sigName}"
-                list="known-signals-fire-${slotKey}" placeholder="e.g. libraryReady"
-                oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9_\\-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '')"
-                style="font-family:monospace;">
-            <datalist id="known-signals-fire-${slotKey}">
-                ${knownSignals.map(s => `<option value="${s}">`).join('')}
-            </datalist>
-        </div>
-        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Other automations with "Signal Received" trigger will wake up</div>`;
-    }
-    if (blockType === 'run_script') {
-        const scriptName = _escAttr(config.script_name || '');
-        const timeout = config.timeout || 60;
-        // Fetch scripts list and populate
-        const selectId = `cfg-${slotKey}-script_name`;
-        setTimeout(async () => {
-            try {
-                const resp = await fetch('/api/scripts');
-                const data = await resp.json();
-                const sel = document.getElementById(selectId);
-                if (sel && data.scripts) {
-                    sel.innerHTML = '<option value="">Select a script...</option>' +
-                        data.scripts.map(s => `<option value="${_escAttr(s.name)}"${s.name === scriptName ? ' selected' : ''}>${escapeHtml(s.name)} (${s.extension})</option>`).join('');
-                }
-            } catch (e) { console.warn('Failed to load scripts:', e); }
-        }, 100);
-        return `<div class="config-row">
-            <label>Script</label>
-            <select id="${selectId}">
-                <option value="${scriptName}">${scriptName || 'Loading...'}</option>
-            </select>
-        </div>
-        <div class="config-row">
-            <label>Timeout</label>
-            <input type="number" id="cfg-${slotKey}-timeout" value="${timeout}" min="5" max="300" style="width:80px;"> seconds
-        </div>
-        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Place scripts in the <code>scripts/</code> folder. Supported: .sh, .py, .bat, .ps1</div>`;
-    }
-    if (blockType === 'scan_watchlist' || blockType === 'scan_library' || blockType === 'notify_only') {
-        return '<div class="config-row" style="color:rgba(255,255,255,0.4);font-size:12px;">No configuration needed</div>';
-    }
-    if (blockType === 'refresh_mirrored') {
-        const allChecked = config.all ? ' checked' : '';
-        return `<div class="config-row">
-            <label>Playlist</label>
-            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-block-type="refresh_mirrored" data-value="${_escAttr(config.playlist_id || '')}">
-                <option value="">Loading...</option>
-            </select>
-        </div>
-        <div class="config-row">
-            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Refresh all mirrored playlists</label>
-        </div>`;
-    }
-    if (blockType === 'sync_playlist') {
-        return `<div class="config-row">
-            <label>Playlist</label>
-            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
-                <option value="">Loading...</option>
-            </select>
-        </div>`;
-    }
-    if (blockType === 'discover_playlist') {
-        const allChecked = config.all ? ' checked' : '';
-        return `<div class="config-row">
-            <label>Playlist</label>
-            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
-                <option value="">Loading...</option>
-            </select>
-        </div>
-        <div class="config-row">
-            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Discover all mirrored playlists</label>
-        </div>`;
-    }
-    if (blockType === 'playlist_pipeline') {
-        const allChecked = config.all ? ' checked' : '';
-        const skipWishlistChecked = config.skip_wishlist ? ' checked' : '';
-        return `<div class="config-row">
-            <label>Playlist</label>
-            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
-                <option value="">Loading...</option>
-            </select>
-        </div>
-        <div class="config-row">
-            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Process all mirrored playlists</label>
-        </div>
-        <div class="config-row">
-            <label><input type="checkbox" id="cfg-${slotKey}-skip_wishlist"${skipWishlistChecked}> Skip wishlist processing</label>
-        </div>
-        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Runs 4 phases: Refresh → Discover → Sync → Download Missing</div>`;
-    }
-    // Shared variable tags builder for notification types
-    function _notifyVarHtml(slotKey) {
-        let allVars = ['time', 'name', 'run_count', 'status'];
-        const triggerDef = _autoBuilder.when ? _findBlockDef(_autoBuilder.when.type) : null;
-        if (triggerDef && triggerDef.variables) {
-            triggerDef.variables.forEach(v => { if (!allVars.includes(v)) allVars.push(v); });
-        }
-        let html = '<div class="variable-tags">';
-        allVars.forEach(v => { html += `<span class="variable-tag" onclick="_autoInsertVar('cfg-${slotKey}-message','{${v}}')">{${v}}</span>`; });
-        return html + '</div>';
-    }
-
-    if (blockType === 'discord_webhook') {
-        const url = _escAttr(config.webhook_url || '');
-        return `<div class="config-row">
-            <label>Webhook URL</label>
-            <input type="text" id="cfg-${slotKey}-webhook_url" value="${url}" placeholder="https://discord.com/api/webhooks/...">
-        </div>
-        <div class="config-row">
-            <label>Message</label>
-            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || '{name} completed with status: {status}'}</textarea>
-        </div>
-        ${_notifyVarHtml(slotKey)}`;
-    }
-    if (blockType === 'pushbullet') {
-        const token = _escAttr(config.access_token || '');
-        return `<div class="config-row">
-            <label>Access Token</label>
-            <input type="text" id="cfg-${slotKey}-access_token" value="${token}" placeholder="o.xxxxxxxxxxxxxxxxxxxx">
-        </div>
-        <div class="config-row">
-            <label>Title</label>
-            <input type="text" id="cfg-${slotKey}-title" value="${_escAttr(config.title || '{name}')}" placeholder="Notification title">
-        </div>
-        <div class="config-row">
-            <label>Message</label>
-            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || 'Completed with status: {status}'}</textarea>
-        </div>
-        ${_notifyVarHtml(slotKey)}`;
-    }
-    if (blockType === 'telegram') {
-        const botToken = _escAttr(config.bot_token || '');
-        const chatId = _escAttr(config.chat_id || '');
-        return `<div class="config-row">
-            <label>Bot Token</label>
-            <input type="text" id="cfg-${slotKey}-bot_token" value="${botToken}" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11">
-        </div>
-        <div class="config-row">
-            <label>Chat ID</label>
-            <input type="text" id="cfg-${slotKey}-chat_id" value="${chatId}" placeholder="-1001234567890 or @channelname">
-        </div>
-        <div class="config-row">
-            <label>Message</label>
-            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || '{name} completed with status: {status}'}</textarea>
-        </div>
-        ${_notifyVarHtml(slotKey)}`;
-    }
-    if (blockType === 'webhook') {
-        const url = _escAttr(config.url || '');
-        const hdrs = (config.headers || '').replace(/"/g, '&quot;');
-        return `<div class="config-row">
-            <label>URL</label>
-            <input type="text" id="cfg-${slotKey}-url" value="${url}" placeholder="https://your-server.com/hook">
-        </div>
-        <div class="config-row">
-            <label>Headers <span style="opacity:0.4;font-weight:400">(one per line, Key: Value)</span></label>
-            <textarea id="cfg-${slotKey}-headers" placeholder="Authorization: Bearer token123\nX-Custom: value" style="font-family:monospace;font-size:11px;">${hdrs}</textarea>
-        </div>
-        <div class="config-row">
-            <label>Custom Message <span style="opacity:0.4;font-weight:400">(optional)</span></label>
-            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || ''}</textarea>
-        </div>
-        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">
-            Sends a JSON POST with all event variables. Custom message added as "message" field if set.
-        </div>
-        ${_notifyVarHtml(slotKey)}`;
-    }
-    return '';
-}
-
-// --- Condition Builder ---
-
-function _renderConditionBuilder(slotKey, blockDef, config) {
-    const conditions = config.conditions || [];
-    const match = config.match || 'all';
-    const fields = blockDef.condition_fields || [];
-
-    let html = '<div class="condition-builder" id="conditions-' + slotKey + '">';
-    html += `<div class="config-row condition-header">
-        <label>Match</label>
-        <select id="cfg-${slotKey}-match" class="condition-match-select">
-            <option value="all"${match === 'all' ? ' selected' : ''}>All conditions</option>
-            <option value="any"${match === 'any' ? ' selected' : ''}>Any condition</option>
-        </select>
-    </div>`;
-
-    html += '<div id="condition-rows-' + slotKey + '">';
-    if (conditions.length) {
-        conditions.forEach((cond, i) => {
-            html += _renderConditionRow(slotKey, i, fields, cond);
-        });
-    }
-    html += '</div>';
-
-    html += `<button class="add-condition-btn" onclick="_autoAddCondition('${slotKey}')">+ Add Condition</button>`;
-    html += '</div>';
-
-    if (!conditions.length) {
-        html += '<div class="config-row" style="color:rgba(255,255,255,0.35);font-size:12px;margin-top:4px;">No conditions = triggers on every event</div>';
-    }
-
-    return html;
-}
-
-function _renderConditionRow(slotKey, index, fields, cond) {
-    const field = cond ? cond.field : (fields[0] || '');
-    const operator = cond ? cond.operator : 'equals';
-    const value = cond ? _escAttr(cond.value) : '';
-
-    let fieldOpts = '';
-    fields.forEach(f => { fieldOpts += `<option value="${f}"${f === field ? ' selected' : ''}>${f}</option>`; });
-
-    // For playlist-related triggers, use a mirrored playlist dropdown instead of free text
-    const triggerType = _autoBuilder.when ? _autoBuilder.when.type : '';
-    const usePlaylistSelect = ((triggerType === 'playlist_changed' || triggerType === 'discovery_completed') && field === 'playlist_name');
-    const valueHtml = usePlaylistSelect
-        ? `<select class="cond-value mirrored-playlist-name-select" data-slot="${slotKey}" data-idx="${index}" data-value="${value}"></select>`
-        : `<input type="text" class="cond-value" data-slot="${slotKey}" data-idx="${index}" value="${value}" placeholder="value...">`;
-
-    return `<div class="condition-row" data-index="${index}">
-        <select class="cond-field" data-slot="${slotKey}" data-idx="${index}">${fieldOpts}</select>
-        <select class="cond-operator" data-slot="${slotKey}" data-idx="${index}">
-            <option value="equals"${operator === 'equals' ? ' selected' : ''}>equals</option>
-            <option value="contains"${operator === 'contains' ? ' selected' : ''}>contains</option>
-            <option value="starts_with"${operator === 'starts_with' ? ' selected' : ''}>starts with</option>
-            <option value="not_contains"${operator === 'not_contains' ? ' selected' : ''}>not contains</option>
-        </select>
-        ${valueHtml}
-        <button class="remove-condition-btn" onclick="_autoRemoveCondition('${slotKey}',${index})">\u2715</button>
-    </div>`;
-}
-
-function _autoAddCondition(slotKey) {
-    const data = _autoBuilder[slotKey];
-    if (!data) return;
-    if (!data.config) data.config = {};
-    if (!data.config.conditions) data.config.conditions = [];
-
-    // Save existing conditions from DOM before re-render
-    _autoSaveConditionsFromDOM(slotKey);
-
-    const blockDef = _findBlockDef(data.type);
-    const fields = blockDef ? (blockDef.condition_fields || []) : [];
-    data.config.conditions.push({ field: fields[0] || '', operator: 'contains', value: '' });
-    _renderBuilderCanvas();
-    // Re-populate mirrored playlist selects if needed
-    _autoLoadMirroredSelects();
-}
-
-function _autoRemoveCondition(slotKey, index) {
-    const data = _autoBuilder[slotKey];
-    if (!data || !data.config || !data.config.conditions) return;
-    _autoSaveConditionsFromDOM(slotKey);
-    data.config.conditions.splice(index, 1);
-    _renderBuilderCanvas();
-    _autoLoadMirroredSelects();
-}
-
-function _autoSaveConditionsFromDOM(slotKey) {
-    const data = _autoBuilder[slotKey];
-    if (!data || !data.config) return;
-    const container = document.getElementById('condition-rows-' + slotKey);
-    if (!container) return;
-    const rows = container.querySelectorAll('.condition-row');
-    const conditions = [];
-    rows.forEach(row => {
-        const field = row.querySelector('.cond-field')?.value || '';
-        const operator = row.querySelector('.cond-operator')?.value || 'contains';
-        const value = row.querySelector('.cond-value')?.value || '';
-        conditions.push({ field, operator, value });
-    });
-    data.config.conditions = conditions;
-    // Also save match mode
-    const matchEl = document.getElementById('cfg-' + slotKey + '-match');
-    if (matchEl) data.config.match = matchEl.value;
-}
-
-// --- Mirrored Playlist Select ---
-
-function _autoTogglePlaylistSelect(slotKey) {
-    const allCb = document.getElementById('cfg-' + slotKey + '-all');
-    const sel = document.getElementById('cfg-' + slotKey + '-playlist_id');
-    if (sel) sel.disabled = allCb && allCb.checked;
-}
-
-async function _autoLoadMirroredSelects() {
-    const selects = document.querySelectorAll('.mirrored-playlist-select');
-    const nameSelects = document.querySelectorAll('.mirrored-playlist-name-select');
-    if (!selects.length && !nameSelects.length) return;
-
-    if (!_autoMirroredPlaylists) {
-        try {
-            const res = await fetch('/api/mirrored-playlists/list');
-            const data = await res.json();
-            // New format returns { playlists, spotify_authenticated }
-            if (Array.isArray(data)) {
-                // Backward compat: old format was plain array
-                _autoMirroredPlaylists = data;
-                _autoSpotifyAuthenticated = false;
-            } else {
-                _autoMirroredPlaylists = data.playlists || [];
-                _autoSpotifyAuthenticated = data.spotify_authenticated || false;
-            }
-        } catch (e) { _autoMirroredPlaylists = []; _autoSpotifyAuthenticated = false; }
-    }
-
-    selects.forEach(sel => {
-        const savedValue = sel.dataset.value || '';
-        const isRefresh = sel.dataset.blockType === 'refresh_mirrored';
-        sel.innerHTML = '<option value="">-- Select playlist --</option>';
-        _autoMirroredPlaylists.forEach(p => {
-            // For refresh selects: hide file playlists, hide spotify (library) if not authed
-            if (isRefresh) {
-                if (p.source === 'file' || p.source === 'beatport') return;
-                if (p.source === 'spotify' && !_autoSpotifyAuthenticated) return;
-            }
-            sel.innerHTML += `<option value="${p.id}"${String(p.id) === savedValue ? ' selected' : ''}>${_esc(p.name)}</option>`;
-        });
-    });
-
-    nameSelects.forEach(sel => {
-        const savedValue = sel.dataset.value || '';
-        sel.innerHTML = '<option value="">-- Select playlist --</option>';
-        _autoMirroredPlaylists.forEach(p => {
-            sel.innerHTML += `<option value="${_escAttr(p.name)}"${p.name === savedValue ? ' selected' : ''}>${_esc(p.name)}</option>`;
-        });
-    });
-}
-
-function _readPlacedConfig(slotKey) {
-    let data;
-    if (slotKey.startsWith('then-')) {
-        const idx = parseInt(slotKey.split('-')[1]);
-        data = _autoBuilder.then[idx];
-    } else {
-        data = _autoBuilder[slotKey];
-    }
-    if (!data) return {};
-    const type = data.type;
-    if (type === 'schedule') {
-        return {
-            interval: parseInt(document.getElementById('cfg-' + slotKey + '-interval')?.value) || 6,
-            unit: document.getElementById('cfg-' + slotKey + '-unit')?.value || 'hours',
-        };
-    }
-    if (type === 'daily_time') {
-        return { time: document.getElementById('cfg-' + slotKey + '-time')?.value || '03:00' };
-    }
-    if (type === 'weekly_time') {
-        const daysEl = document.getElementById('cfg-' + slotKey + '-days');
-        const days = daysEl ? Array.from(daysEl.querySelectorAll('.day-btn.active')).map(b => b.dataset.day) : [];
-        return {
-            time: document.getElementById('cfg-' + slotKey + '-time')?.value || '03:00',
-            days,
-        };
-    }
-    // Event triggers with conditions
-    const blockDef = _findBlockDef(type);
-    if (blockDef && blockDef.has_conditions) {
-        _autoSaveConditionsFromDOM(slotKey);
-        return {
-            conditions: (data.config && data.config.conditions) || [],
-            match: document.getElementById('cfg-' + slotKey + '-match')?.value || 'all',
-        };
-    }
-    if (type === 'process_wishlist') {
-        return { category: document.getElementById('cfg-' + slotKey + '-category')?.value || 'all' };
-    }
-    if (type === 'refresh_mirrored') {
-        const allCb = document.getElementById('cfg-' + slotKey + '-all');
-        return {
-            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
-            all: allCb ? allCb.checked : false,
-        };
-    }
-    if (type === 'sync_playlist') {
-        return { playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '' };
-    }
-    if (type === 'discover_playlist') {
-        const allCb = document.getElementById('cfg-' + slotKey + '-all');
-        return {
-            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
-            all: allCb ? allCb.checked : false,
-        };
-    }
-    if (type === 'playlist_pipeline') {
-        const allCb = document.getElementById('cfg-' + slotKey + '-all');
-        const skipWl = document.getElementById('cfg-' + slotKey + '-skip_wishlist');
-        return {
-            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
-            all: allCb ? allCb.checked : false,
-            skip_wishlist: skipWl ? skipWl.checked : false,
-        };
-    }
-    if (type === 'signal_received' || type === 'fire_signal') {
-        return { signal_name: document.getElementById('cfg-' + slotKey + '-signal_name')?.value?.trim() || '' };
-    }
-    if (type === 'run_script') {
-        return {
-            script_name: document.getElementById('cfg-' + slotKey + '-script_name')?.value || '',
-            timeout: parseInt(document.getElementById('cfg-' + slotKey + '-timeout')?.value || '60') || 60,
-        };
-    }
-    if (type === 'discord_webhook') {
-        return {
-            webhook_url: document.getElementById('cfg-' + slotKey + '-webhook_url')?.value?.trim() || '',
-            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
-        };
-    }
-    if (type === 'pushbullet') {
-        return {
-            access_token: document.getElementById('cfg-' + slotKey + '-access_token')?.value?.trim() || '',
-            title: document.getElementById('cfg-' + slotKey + '-title')?.value || '',
-            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
-        };
-    }
-    if (type === 'telegram') {
-        return {
-            bot_token: document.getElementById('cfg-' + slotKey + '-bot_token')?.value?.trim() || '',
-            chat_id: document.getElementById('cfg-' + slotKey + '-chat_id')?.value?.trim() || '',
-            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
-        };
-    }
-    if (type === 'webhook') {
-        return {
-            url: document.getElementById('cfg-' + slotKey + '-url')?.value?.trim() || '',
-            headers: document.getElementById('cfg-' + slotKey + '-headers')?.value || '',
-            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
-        };
-    }
-    return {};
-}
-
-function _findBlockDef(type) {
-    if (!_autoBlocks) return null;
-    for (const cat of ['triggers', 'actions', 'notifications']) {
-        const found = (_autoBlocks[cat] || []).find(b => b.type === type);
-        if (found) return found;
-    }
-    return null;
-}
-
-// --- Drag & Drop ---
-
-function _autoDragStart(e, blockType, slotCategory) {
-    e.dataTransfer.setData('text/plain', JSON.stringify({ type: blockType, slot: slotCategory }));
-    e.dataTransfer.effectAllowed = 'copy';
-}
-
-function _autoDragOver(e, slotKey) {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'copy';
-    const targetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
-    document.getElementById(targetId)?.classList.add('drag-over');
-}
-
-function _autoDragLeave(e, slotKey) {
-    const targetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
-    document.getElementById(targetId)?.classList.remove('drag-over');
-}
-
-function _autoDrop(e, slotKey) {
-    e.preventDefault();
-    const dropTargetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
-    document.getElementById(dropTargetId)?.classList.remove('drag-over');
-    if (_autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do')) return;
-    try {
-        const data = JSON.parse(e.dataTransfer.getData('text/plain'));
-        // Handle THEN slot (append to array)
-        if (slotKey === 'then') {
-            if (data.slot !== 'then') { showToast('Wrong slot — drop ' + data.slot + ' blocks here', 'error'); return; }
-            if (_autoBuilder.then.length >= 3) { showToast('Maximum 3 then-actions', 'error'); return; }
-            _autoBuilder.then.push({ type: data.type, config: {} });
-        } else {
-            if (data.slot !== slotKey) { showToast('Wrong slot — drop ' + data.slot + ' blocks here', 'error'); return; }
-            _autoBuilder[slotKey] = { type: data.type, config: {} };
-        }
-        _renderBuilderCanvas();
-    } catch (err) { }
-}
-
-// Click-to-add (alternative to drag)
-function _autoClickBlock(blockType, slotCategory) {
-    if (_autoBuilder.isSystem && (slotCategory === 'when' || slotCategory === 'do')) return;
-    if (slotCategory === 'then') {
-        if (_autoBuilder.then.length >= 3) { showToast('Maximum 3 then-actions', 'error'); return; }
-        _autoBuilder.then.push({ type: blockType, config: {} });
-    } else {
-        _autoBuilder[slotCategory] = { type: blockType, config: {} };
-    }
-    _renderBuilderCanvas();
-}
-
-function _autoRemoveBlock(slotKey) {
-    if (_autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do')) return;
-    // Handle then-N slots
-    if (slotKey.startsWith('then-')) {
-        const idx = parseInt(slotKey.split('-')[1]);
-        if (!isNaN(idx) && idx >= 0 && idx < _autoBuilder.then.length) {
-            _autoBuilder.then.splice(idx, 1);
-        }
-    } else {
-        _autoBuilder[slotKey] = null;
-    }
-    _renderBuilderCanvas();
-}
-
-// Variable insertion
-function _autoInsertVar(textareaId, variable) {
-    const el = document.getElementById(textareaId);
-    if (!el) return;
-    const start = el.selectionStart, end = el.selectionEnd;
-    el.value = el.value.substring(0, start) + variable + el.value.substring(end);
-    el.selectionStart = el.selectionEnd = start + variable.length;
-    el.focus();
-}
-
-// ===== ISSUES PAGE =====
-
-const ISSUE_CATEGORIES = {
-    wrong_track: { label: 'Wrong Track', icon: '&#10060;', description: 'This file plays a completely different song than expected', applies: ['track'] },
-    wrong_metadata: { label: 'Wrong Metadata', icon: '&#9998;', description: 'Title, artist, year, or other tags are incorrect', applies: ['track', 'album'] },
-    wrong_cover: { label: 'Wrong Cover Art', icon: '&#128247;', description: 'The album artwork is wrong or missing', applies: ['album'] },
-    wrong_artist: { label: 'Wrong Artist', icon: '&#128100;', description: 'This track is filed under the wrong artist', applies: ['track'] },
-    duplicate_tracks: { label: 'Duplicate Tracks', icon: '&#128257;', description: 'The same track appears more than once in this album', applies: ['album'] },
-    missing_tracks: { label: 'Missing Tracks', icon: '&#10067;', description: 'Tracks that should be here are missing from this album', applies: ['album'] },
-    audio_quality: { label: 'Audio Quality', icon: '&#127925;', description: 'Audio has quality issues — clipping, low bitrate, silence, etc.', applies: ['track'] },
-    wrong_album: { label: 'Wrong Album', icon: '&#128191;', description: 'This track belongs to a different album', applies: ['track'] },
-    incomplete_album: { label: 'Incomplete Album', icon: '&#9888;', description: 'Album is partially downloaded — some tracks present, others not', applies: ['album'] },
-    other: { label: 'Other', icon: '&#128172;', description: 'Any other issue not listed above', applies: ['track', 'album'] },
-};
-
-const ISSUE_STATUS_META = {
-    open: { label: 'Open', cls: 'issue-status-open' },
-    in_progress: { label: 'In Progress', cls: 'issue-status-progress' },
-    resolved: { label: 'Resolved', cls: 'issue-status-resolved' },
-    dismissed: { label: 'Dismissed', cls: 'issue-status-dismissed' },
-};
-
-let _issuesPageState = { loaded: false };
-
-function _issueHeaders(extra) {
-    const h = { 'X-Profile-Id': String(currentProfile ? currentProfile.id : 1) };
-    if (extra) Object.assign(h, extra);
-    return h;
-}
-
-async function loadIssuesPage() {
-    const admin = isEnhancedAdmin();
-    const subtitle = document.getElementById('issues-subtitle');
-    if (subtitle) {
-        subtitle.textContent = admin ? 'Manage and resolve reported library problems' : 'Track and resolve library problems';
-    }
-    await Promise.all([loadIssuesList(), loadIssuesCounts()]);
-}
-
-async function loadIssuesCounts() {
-    try {
-        const resp = await fetch('/api/issues/counts', { headers: _issueHeaders() });
-        const data = await resp.json();
-        if (!data.success) return;
-        const counts = data.counts;
-        const statsEl = document.getElementById('issues-stats');
-        if (!statsEl) return;
-        const total = (counts.open || 0) + (counts.in_progress || 0) + (counts.resolved || 0) + (counts.dismissed || 0);
-        statsEl.innerHTML = `
-            <div class="issues-stat-card issues-stat-open">
-                <div class="issues-stat-number">${counts.open || 0}</div>
-                <div class="issues-stat-label">Open</div>
-            </div>
-            <div class="issues-stat-card issues-stat-progress">
-                <div class="issues-stat-number">${counts.in_progress || 0}</div>
-                <div class="issues-stat-label">In Progress</div>
-            </div>
-            <div class="issues-stat-card issues-stat-resolved">
-                <div class="issues-stat-number">${counts.resolved || 0}</div>
-                <div class="issues-stat-label">Resolved</div>
-            </div>
-            <div class="issues-stat-card issues-stat-dismissed">
-                <div class="issues-stat-number">${counts.dismissed || 0}</div>
-                <div class="issues-stat-label">Dismissed</div>
-            </div>
-            <div class="issues-stat-card issues-stat-total">
-                <div class="issues-stat-number">${total}</div>
-                <div class="issues-stat-label">Total</div>
-            </div>
-        `;
-        // Update nav badge
-        const badge = document.getElementById('issues-nav-badge');
-        if (badge) {
-            const openCount = counts.open || 0;
-            badge.textContent = openCount;
-            badge.classList.toggle('hidden', openCount === 0);
-        }
-    } catch (e) {
-        console.error('Failed to load issue counts:', e);
-    }
-}
-
-async function loadIssuesList() {
-    const listEl = document.getElementById('issues-list');
-    if (!listEl) return;
-    listEl.innerHTML = '<div class="issues-loading"><div class="issues-spinner"></div>Loading issues...</div>';
-
-    const statusFilter = document.getElementById('issues-filter-status')?.value || '';
-    const categoryFilter = document.getElementById('issues-filter-category')?.value || '';
-
-    let url = '/api/issues?';
-    if (statusFilter) url += `status=${encodeURIComponent(statusFilter)}&`;
-    if (categoryFilter) url += `category=${encodeURIComponent(categoryFilter)}&`;
-
-    try {
-        const profileId = currentProfile ? currentProfile.id : 1;
-        const resp = await fetch(url, { headers: { 'X-Profile-Id': String(profileId) } });
-        const data = await resp.json();
-        if (!data.success || !data.issues || data.issues.length === 0) {
-            listEl.innerHTML = `
-                <div class="issues-empty">
-                    <div class="issues-empty-icon">&#128269;</div>
-                    <div class="issues-empty-title">No issues found</div>
-                    <div class="issues-empty-text">${statusFilter || categoryFilter ? 'Try adjusting your filters' : 'No issues have been reported yet'}</div>
-                </div>
-            `;
-            return;
-        }
-        listEl.innerHTML = '';
-        data.issues.forEach(issue => {
-            listEl.appendChild(renderIssueCard(issue));
-        });
-    } catch (e) {
-        console.error('Failed to load issues:', e);
-        listEl.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Failed to load issues</div></div>';
-    }
-}
-
-function renderIssueCard(issue) {
-    const card = document.createElement('div');
-    card.className = 'issue-card';
-    card.dataset.issueId = issue.id;
-    card.onclick = () => showIssueDetailModal(issue.id);
-
-    const catMeta = ISSUE_CATEGORIES[issue.category] || ISSUE_CATEGORIES.other;
-    const statusMeta = ISSUE_STATUS_META[issue.status] || ISSUE_STATUS_META.open;
-    const admin = isEnhancedAdmin();
-
-    let snapshot = {};
-    try { snapshot = typeof issue.snapshot_data === 'string' ? JSON.parse(issue.snapshot_data || '{}') : (issue.snapshot_data || {}); } catch (e) { }
-
-    const entityLabel = issue.entity_type === 'track' ? 'Track' : (issue.entity_type === 'album' ? 'Album' : 'Artist');
-    const entityName = snapshot.title || snapshot.name || `${entityLabel} #${issue.entity_id}`;
-    const artistName = snapshot.artist_name || '';
-    const albumName = snapshot.album_title || '';
-    const thumbUrl = snapshot.thumb_url || snapshot.album_thumb || '';
-
-    const createdDate = issue.created_at ? new Date(issue.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '';
-    const createdTime = issue.created_at ? new Date(issue.created_at).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : '';
-
-    // Priority indicator
-    const priorityCls = issue.priority === 'high' ? 'issue-priority-high' : (issue.priority === 'low' ? 'issue-priority-low' : 'issue-priority-normal');
-
-    let thumbHtml = '';
-    if (thumbUrl) {
-        thumbHtml = `<img class="issue-card-thumb" src="${_escAttr(thumbUrl)}" alt="" onerror="this.style.display='none'">`;
-    } else {
-        thumbHtml = `<div class="issue-card-thumb-placeholder">${catMeta.icon}</div>`;
-    }
-
-    let metaLine = '';
-    if (issue.entity_type === 'track') {
-        metaLine = [artistName, albumName].filter(Boolean).map(s => _esc(s)).join(' &mdash; ');
-    } else if (issue.entity_type === 'album') {
-        metaLine = artistName ? _esc(artistName) : '';
-    }
-
-    let profileBadge = '';
-    if (admin && issue.reporter_name) {
-        profileBadge = `<span class="issue-card-profile">by ${_esc(issue.reporter_name)}</span>`;
-    }
-
-    let adminResponseIndicator = '';
-    if (issue.admin_response) {
-        adminResponseIndicator = '<span class="issue-card-responded" title="Admin has responded">&#128172;</span>';
-    }
-
-    card.innerHTML = `
-        <div class="issue-card-left">
-            ${thumbHtml}
-        </div>
-        <div class="issue-card-center">
-            <div class="issue-card-title-row">
-                <span class="issue-card-category-icon" title="${_escAttr(catMeta.label)}">${catMeta.icon}</span>
-                <span class="issue-card-title">${_esc(issue.title)}</span>
-                ${adminResponseIndicator}
-            </div>
-            <div class="issue-card-entity">
-                <span class="issue-card-entity-type">${_esc(entityLabel)}</span>
-                <span class="issue-card-entity-name">${_esc(entityName)}</span>
-                ${metaLine ? `<span class="issue-card-meta-line">${metaLine}</span>` : ''}
-            </div>
-            ${issue.description ? `<div class="issue-card-description">${_esc(issue.description)}</div>` : ''}
-            <div class="issue-card-footer">
-                <span class="issue-card-date">${_esc(createdDate)} ${_esc(createdTime)}</span>
-                ${profileBadge}
-            </div>
-        </div>
-        <div class="issue-card-right">
-            <span class="issue-status-badge ${statusMeta.cls}">${_esc(statusMeta.label)}</span>
-            <span class="issue-priority-dot ${priorityCls}" title="${_esc(issue.priority)} priority"></span>
-        </div>
-    `;
-    return card;
-}
-
-// --- Report Issue Modal ---
-
-let _reportIssueState = {};
-
-function showReportIssueModal(entityType, entityId, entityName, artistName, albumTitle) {
-    _reportIssueState = { entityType, entityId, entityName, artistName, albumTitle: albumTitle || '' };
-    const overlay = document.getElementById('report-issue-overlay');
-    const titleEl = document.getElementById('report-issue-title');
-    const body = document.getElementById('report-issue-body');
-    if (!overlay || !body) return;
-
-    const entityLabel = entityType === 'track' ? 'Track' : (entityType === 'album' ? 'Album' : 'Artist');
-    titleEl.textContent = `Report Issue — ${entityLabel}`;
-
-    body.innerHTML = `
-        <div class="report-issue-entity-info">
-            <div class="report-issue-entity-name">${_esc(entityName)}</div>
-            ${artistName ? `<div class="report-issue-entity-artist">${_esc(artistName)}${albumTitle ? ' &mdash; ' + _esc(albumTitle) : ''}</div>` : ''}
-        </div>
-        <div class="report-issue-section">
-            <label class="report-issue-label">What's the problem?</label>
-            <div class="report-issue-category-grid" id="report-issue-categories">
-                ${Object.entries(ISSUE_CATEGORIES)
-            .filter(([, cat]) => !cat.applies || cat.applies.includes(entityType))
-            .map(([key, cat]) => `
-                    <div class="report-issue-category-card" data-category="${_escAttr(key)}" onclick="selectIssueCategory(this, '${_escAttr(key)}')">
-                        <div class="report-issue-category-icon">${cat.icon}</div>
-                        <div class="report-issue-category-label">${_esc(cat.label)}</div>
-                        <div class="report-issue-category-desc">${_esc(cat.description)}</div>
-                    </div>
-                `).join('')}
-            </div>
-        </div>
-        <div class="report-issue-section" id="report-issue-details-section" style="display:none">
-            <label class="report-issue-label">Title</label>
-            <input type="text" class="report-issue-input" id="report-issue-input-title" placeholder="Brief summary of the issue..." maxlength="200" oninput="event.target._userEdited = true">
-            <label class="report-issue-label" style="margin-top:12px">Details <span class="report-issue-optional">(optional)</span></label>
-            <textarea class="report-issue-textarea" id="report-issue-input-desc" placeholder="Provide more details about what's wrong — what you expected vs what you see..." rows="4" maxlength="2000"></textarea>
-            <label class="report-issue-label" style="margin-top:12px">Priority</label>
-            <div class="report-issue-priority-row">
-                <button class="report-issue-priority-btn" data-priority="low" onclick="selectIssuePriority(this, 'low')">Low</button>
-                <button class="report-issue-priority-btn selected" data-priority="normal" onclick="selectIssuePriority(this, 'normal')">Normal</button>
-                <button class="report-issue-priority-btn" data-priority="high" onclick="selectIssuePriority(this, 'high')">High</button>
-            </div>
-        </div>
-    `;
-
-    _reportIssueState.selectedCategory = null;
-    _reportIssueState.selectedPriority = 'normal';
-    const submitBtn = document.getElementById('report-issue-submit-btn');
-    if (submitBtn) submitBtn.disabled = true;
-
-    overlay.classList.remove('hidden');
-}
-
-function selectIssueCategory(el, category) {
-    document.querySelectorAll('.report-issue-category-card').forEach(c => c.classList.remove('selected'));
-    el.classList.add('selected');
-    _reportIssueState.selectedCategory = category;
-
-    const detailsSection = document.getElementById('report-issue-details-section');
-    if (detailsSection) detailsSection.style.display = '';
-
-    // Auto-generate title based on category
-    const titleInput = document.getElementById('report-issue-input-title');
-    const catMeta = ISSUE_CATEGORIES[category];
-    if (titleInput && !titleInput._userEdited) {
-        const entityName = _reportIssueState.entityName || '';
-        titleInput.value = `${catMeta.label}: ${entityName}`;
-    }
-
-    const submitBtn = document.getElementById('report-issue-submit-btn');
-    if (submitBtn) submitBtn.disabled = false;
-}
-
-function selectIssuePriority(el, priority) {
-    document.querySelectorAll('.report-issue-priority-btn').forEach(b => b.classList.remove('selected'));
-    el.classList.add('selected');
-    _reportIssueState.selectedPriority = priority;
-}
-
-function closeReportIssueModal() {
-    const overlay = document.getElementById('report-issue-overlay');
-    if (overlay) overlay.classList.add('hidden');
-    _reportIssueState = {};
-}
-
-async function submitIssue() {
-    if (_reportIssueState._submitting) return;
-    const category = _reportIssueState.selectedCategory;
-    if (!category) {
-        showToast('Please select an issue category', 'error');
-        return;
-    }
-
-    const titleInput = document.getElementById('report-issue-input-title');
-    const descInput = document.getElementById('report-issue-input-desc');
-    const title = (titleInput?.value || '').trim();
-    const description = (descInput?.value || '').trim();
-
-    if (!title) {
-        showToast('Please provide a title for the issue', 'error');
-        return;
-    }
-
-    _reportIssueState._submitting = true;
-    const submitBtn = document.getElementById('report-issue-submit-btn');
-    if (submitBtn) {
-        submitBtn.disabled = true;
-        submitBtn.textContent = 'Submitting...';
-    }
-
-    try {
-        const resp = await fetch('/api/issues', {
-            method: 'POST',
-            headers: _issueHeaders({ 'Content-Type': 'application/json' }),
-            body: JSON.stringify({
-                profile_id: currentProfile ? currentProfile.id : 1,
-                entity_type: _reportIssueState.entityType,
-                entity_id: String(_reportIssueState.entityId),
-                category: category,
-                title: title,
-                description: description,
-                priority: _reportIssueState.selectedPriority || 'normal',
-            }),
-        });
-        const data = await resp.json();
-        if (data.success) {
-            showToast('Issue reported successfully', 'success');
-            closeReportIssueModal();
-            // Refresh issues page if visible
-            const issuesPage = document.getElementById('issues-page');
-            if (issuesPage && issuesPage.classList.contains('active')) {
-                loadIssuesPage();
-            }
-            // Update badge
-            loadIssuesBadge();
-        } else {
-            showToast(data.error || 'Failed to submit issue', 'error');
-        }
-    } catch (e) {
-        console.error('Failed to submit issue:', e);
-        showToast('Failed to submit issue', 'error');
-    } finally {
-        _reportIssueState._submitting = false;
-        if (submitBtn) {
-            submitBtn.disabled = false;
-            submitBtn.textContent = 'Submit Issue';
-        }
-    }
-}
-
-// --- Issue Detail Modal ---
-
-async function showIssueDetailModal(issueId) {
-    const overlay = document.getElementById('issue-detail-overlay');
-    const body = document.getElementById('issue-detail-body');
-    const footer = document.getElementById('issue-detail-footer');
-    const titleEl = document.getElementById('issue-detail-title');
-    if (!overlay || !body) return;
-
-    body.innerHTML = '<div class="issues-loading"><div class="issues-spinner"></div>Loading...</div>';
-    footer.innerHTML = '<button class="enhanced-bulk-btn secondary" onclick="closeIssueDetailModal()">Close</button>';
-    overlay.classList.remove('hidden');
-
-    try {
-        const resp = await fetch(`/api/issues/${issueId}`, { headers: _issueHeaders() });
-        const data = await resp.json();
-        if (!data.success || !data.issue) {
-            body.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Issue not found</div></div>';
-            return;
-        }
-        renderIssueDetail(data.issue, body, footer, titleEl);
-    } catch (e) {
-        console.error('Failed to load issue:', e);
-        body.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Failed to load issue</div></div>';
-    }
-}
-
-function renderIssueDetail(issue, body, footer, titleEl) {
-    const admin = isEnhancedAdmin();
-    const catMeta = ISSUE_CATEGORIES[issue.category] || ISSUE_CATEGORIES.other;
-    const statusMeta = ISSUE_STATUS_META[issue.status] || ISSUE_STATUS_META.open;
-
-    let snapshot = {};
-    try { snapshot = typeof issue.snapshot_data === 'string' ? JSON.parse(issue.snapshot_data || '{}') : (issue.snapshot_data || {}); } catch (e) { }
-
-    const entityLabel = issue.entity_type === 'track' ? 'Track' : (issue.entity_type === 'album' ? 'Album' : 'Artist');
-    const entityName = snapshot.title || snapshot.name || `${entityLabel} #${issue.entity_id}`;
-    const artistName = snapshot.artist_name || (issue.entity_type === 'artist' ? snapshot.name : '') || '';
-    const albumTitle = issue.entity_type === 'album' ? (snapshot.title || '') : (snapshot.album_title || '');
-    const artistId = issue.entity_type === 'artist' ? snapshot.id : snapshot.artist_id;
-
-    // Resolve image URLs — album art and artist photo
-    let artistThumb = '';
-    let albumThumb = '';
-    if (issue.entity_type === 'album') {
-        albumThumb = snapshot.thumb_url || '';
-        artistThumb = snapshot.artist_thumb || '';
-    } else if (issue.entity_type === 'track') {
-        albumThumb = snapshot.album_thumb || '';
-        artistThumb = snapshot.artist_thumb || '';
-    } else {
-        // Artist issue
-        artistThumb = snapshot.thumb_url || '';
-    }
-
-    // Determine the album-level Spotify ID for download/wishlist actions
-    const spotifyAlbumId = snapshot.spotify_album_id || '';
-
-    console.log('Issue detail snapshot:', { entityType: issue.entity_type, albumThumb, artistThumb, spotifyAlbumId, snapshotKeys: Object.keys(snapshot) });
-
-    const createdDate = issue.created_at ? new Date(issue.created_at).toLocaleString() : 'Unknown';
-    const resolvedDate = issue.resolved_at ? new Date(issue.resolved_at).toLocaleString() : '';
-
-    titleEl.textContent = `Issue #${issue.id}`;
-
-    // --- Build external links chips ---
-    function _extLinks(snap) {
-        const links = [];
-        if (snap.spotify_artist_id) links.push({ svc: 'Spotify', type: 'Artist', url: `https://open.spotify.com/artist/${snap.spotify_artist_id}`, cls: 'ext-spotify' });
-        if (snap.spotify_album_id) links.push({ svc: 'Spotify', type: 'Album', url: `https://open.spotify.com/album/${snap.spotify_album_id}`, cls: 'ext-spotify' });
-        if (snap.spotify_track_id) links.push({ svc: 'Spotify', type: 'Track', url: `https://open.spotify.com/track/${snap.spotify_track_id}`, cls: 'ext-spotify' });
-        if (snap.artist_musicbrainz_id) links.push({ svc: 'MusicBrainz', type: 'Artist', url: `https://musicbrainz.org/artist/${snap.artist_musicbrainz_id}`, cls: 'ext-mb' });
-        if (snap.musicbrainz_release_id) links.push({ svc: 'MusicBrainz', type: 'Release', url: `https://musicbrainz.org/release/${snap.musicbrainz_release_id}`, cls: 'ext-mb' });
-        if (snap.musicbrainz_recording_id) links.push({ svc: 'MusicBrainz', type: 'Recording', url: `https://musicbrainz.org/recording/${snap.musicbrainz_recording_id}`, cls: 'ext-mb' });
-        if (snap.artist_deezer_id) links.push({ svc: 'Deezer', type: 'Artist', url: `https://www.deezer.com/artist/${snap.artist_deezer_id}`, cls: 'ext-deezer' });
-        if (snap.album_deezer_id) links.push({ svc: 'Deezer', type: 'Album', url: `https://www.deezer.com/album/${snap.album_deezer_id}`, cls: 'ext-deezer' });
-        if (snap.track_deezer_id) links.push({ svc: 'Deezer', type: 'Track', url: `https://www.deezer.com/track/${snap.track_deezer_id}`, cls: 'ext-deezer' });
-        if (snap.artist_tidal_id) links.push({ svc: 'Tidal', type: 'Artist', url: `https://listen.tidal.com/artist/${snap.artist_tidal_id}`, cls: 'ext-tidal' });
-        if (snap.album_tidal_id) links.push({ svc: 'Tidal', type: 'Album', url: `https://listen.tidal.com/album/${snap.album_tidal_id}`, cls: 'ext-tidal' });
-        if (snap.artist_qobuz_id) links.push({ svc: 'Qobuz', type: 'Artist', cls: 'ext-qobuz', id: snap.artist_qobuz_id });
-        if (snap.album_qobuz_id) links.push({ svc: 'Qobuz', type: 'Album', cls: 'ext-qobuz', id: snap.album_qobuz_id });
-        return links;
-    }
-
-    const extLinks = _extLinks(snapshot);
-    let extLinksHtml = '';
-    if (extLinks.length > 0) {
-        const chips = extLinks.map(l => {
-            if (l.url) {
-                return `<a class="issue-ext-chip ${l.cls}" href="${_escAttr(l.url)}" target="_blank" rel="noopener" title="${_escAttr(l.svc + ' ' + l.type)}">${_esc(l.svc)} <span class="issue-ext-chip-type">${_esc(l.type)}</span></a>`;
-            }
-            return `<span class="issue-ext-chip ${l.cls}" title="${_escAttr(l.svc + ' ' + l.type + ': ' + l.id)}">${_esc(l.svc)} <span class="issue-ext-chip-type">${_esc(l.type)}</span></span>`;
-        }).join('');
-        extLinksHtml = `<div class="issue-ext-chips" style="margin-top:8px">${chips}</div>`;
-    }
-
-    // --- Build enhanced-library-style album/track widget ---
-    // Determine which album data to show (for album issues it's the entity, for track issues it's the parent)
-    const showAlbumWidget = (issue.entity_type === 'album' || issue.entity_type === 'track');
-    const albumName = issue.entity_type === 'album' ? (snapshot.title || '') : (snapshot.album_title || '');
-    const albumYear = snapshot.year || '';
-    const albumLabel = snapshot.label || '';
-    const albumType = snapshot.record_type || '';
-    const albumTrackCount = issue.entity_type === 'album' ? (snapshot.track_count || '') : (snapshot.album_track_count || '');
-    const albumGenres = snapshot.genres || [];
-
-    // --- Build the hero section (artist photo + album art + info) ---
-    let heroHtml = '';
-    if (showAlbumWidget) {
-        // Genre tags
-        let genreTagsHtml = '';
-        if (Array.isArray(albumGenres) && albumGenres.length > 0) {
-            genreTagsHtml = `<div class="issue-hero-genres">${albumGenres.slice(0, 5).map(g => `<span class="issue-hero-genre-tag">${_esc(g)}</span>`).join('')}</div>`;
-        }
-
-        // Album meta line
-        const albumMetaParts = [];
-        if (albumYear) albumMetaParts.push(String(albumYear));
-        if (albumType) albumMetaParts.push(albumType.charAt(0).toUpperCase() + albumType.slice(1));
-        if (albumTrackCount) albumMetaParts.push(albumTrackCount + ' tracks');
-        if (albumLabel) albumMetaParts.push(albumLabel);
-
-        // For track issues, show the track title under the album
-        const trackNameLine = issue.entity_type === 'track' && entityName
-            ? `<div class="issue-hero-track-name">&#9835; ${_esc(entityName)}</div>` : '';
-
-        heroHtml = `
-            <div class="issue-hero">
-                <div class="issue-hero-art-group">
-                    ${artistThumb ? `<img class="issue-hero-artist-thumb" src="${_escAttr(artistThumb)}" alt="" onerror="this.style.display='none'">` : ''}
-                    ${albumThumb ? `<img class="issue-hero-album-art" src="${_escAttr(albumThumb)}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">` : ''}
-                    <div class="issue-hero-album-placeholder" style="${albumThumb ? 'display:none' : ''}">${catMeta.icon}</div>
-                </div>
-                <div class="issue-hero-info">
-                    ${artistName ? `<div class="issue-hero-artist">${_esc(artistName)}</div>` : ''}
-                    <div class="issue-hero-album">${_esc(albumName)}</div>
-                    ${trackNameLine}
-                    ${albumMetaParts.length > 0 ? `<div class="issue-hero-meta">${_esc(albumMetaParts.join(' \u00B7 '))}</div>` : ''}
-                    ${genreTagsHtml}
-                    ${extLinksHtml}
-                </div>
-            </div>
-        `;
-    } else {
-        // Artist-level issue — simpler hero
-        heroHtml = `
-            <div class="issue-hero">
-                <div class="issue-hero-art-group">
-                    ${artistThumb ? `<img class="issue-hero-album-art" src="${_escAttr(artistThumb)}" alt="" onerror="this.style.display='none'">` : `<div class="issue-hero-album-placeholder">${catMeta.icon}</div>`}
-                </div>
-                <div class="issue-hero-info">
-                    <div class="issue-hero-album">${_esc(entityName)}</div>
-                    ${extLinksHtml}
-                </div>
-            </div>
-        `;
-    }
-
-    // --- Issue info bar ---
-    let issueInfoHtml = `
-        <div class="issue-detail-info-bar">
-            <div class="issue-detail-info-left">
-                <span class="issue-status-badge ${statusMeta.cls}">${_esc(statusMeta.label)}</span>
-                <span class="issue-priority-dot issue-priority-${_escAttr(issue.priority || 'normal')}" title="${_esc((issue.priority || 'normal'))} priority"></span>
-                <span class="issue-detail-category">${catMeta.icon} ${_esc(catMeta.label)}</span>
-            </div>
-            <div class="issue-detail-info-right">
-                <span class="issue-detail-date">Reported ${_esc(createdDate)}</span>
-                ${issue.reporter_name && admin ? `<span class="issue-detail-profile">by ${_esc(issue.reporter_name)}</span>` : ''}
-                ${resolvedDate ? `<span class="issue-detail-date">Resolved ${_esc(resolvedDate)}</span>` : ''}
-            </div>
-        </div>
-    `;
-
-    // --- Issue description ---
-    let descriptionHtml = `
-        <div class="issue-detail-section">
-            <div class="issue-detail-section-title">Issue</div>
-            <div class="issue-detail-title-text">${_esc(issue.title)}</div>
-            ${issue.description ? `<div class="issue-detail-description">${_esc(issue.description)}</div>` : '<div class="issue-detail-no-desc">No additional details provided</div>'}
-        </div>
-    `;
-
-    // --- Action buttons (Download Album / Add to Wishlist) for admin ---
-    let actionButtonsHtml = '';
-    if (admin && (issue.entity_type === 'album' || issue.entity_type === 'track')) {
-        actionButtonsHtml = `
-            <div class="issue-action-buttons">
-                <button class="issue-action-btn issue-action-download" id="issue-action-download" title="Download this album">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-                    Download Album
-                </button>
-                <button class="issue-action-btn issue-action-wishlist" id="issue-action-wishlist" title="Add all tracks to wishlist">
-                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
-                    Add to Wishlist
-                </button>
-            </div>
-        `;
-    }
-
-    // --- Metadata grid for track-level issues ---
-    let metaGridHtml = '';
-    if (issue.entity_type === 'track') {
-        const metaItems = [];
-        if (snapshot.track_number) metaItems.push({ icon: '#', label: 'Track', value: String(snapshot.track_number) });
-        if (snapshot.duration) metaItems.push({ icon: '&#9719;', label: 'Duration', value: typeof snapshot.duration === 'number' ? formatDurationMs(snapshot.duration) : String(snapshot.duration) });
-        if (snapshot.format) metaItems.push({ icon: '&#128190;', label: 'Format', value: snapshot.format });
-        if (snapshot.bitrate) metaItems.push({ icon: '&#127926;', label: 'Bitrate', value: snapshot.bitrate + ' kbps' });
-        if (snapshot.bpm) metaItems.push({ icon: '&#9835;', label: 'BPM', value: String(snapshot.bpm) });
-        if (snapshot.quality) metaItems.push({ icon: '&#9733;', label: 'Quality', value: snapshot.quality });
-        if (metaItems.length > 0) {
-            metaGridHtml = `
-                <div class="issue-detail-section">
-                    <div class="issue-detail-section-title">Track Details</div>
-                    <div class="issue-detail-meta-grid">
-                        ${metaItems.map(m => `
-                            <div class="issue-meta-item">
-                                <span class="issue-meta-icon">${m.icon}</span>
-                                <span class="issue-meta-label">${_esc(m.label)}</span>
-                                <span class="issue-meta-value">${_esc(m.value)}</span>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            `;
-        }
-    }
-
-    // --- File path display for tracks ---
-    let filePathHtml = '';
-    if (snapshot.file_path) {
-        filePathHtml = `
-            <div class="issue-detail-section">
-                <div class="issue-detail-section-title">File Path</div>
-                <div class="issue-detail-filepath">${_esc(snapshot.file_path)}</div>
-            </div>
-        `;
-    }
-
-    // --- Enhanced-library-style track listing ---
-    let trackListHtml = '';
-    if (snapshot.tracks && Array.isArray(snapshot.tracks) && snapshot.tracks.length > 0) {
-        let lastDisc = null;
-        let rows = '';
-        const hasMultiDisc = snapshot.tracks.some(tr => (tr.disc_number || 1) > 1);
-        snapshot.tracks.forEach(t => {
-            const disc = t.disc_number || 1;
-            if (hasMultiDisc && disc !== lastDisc) {
-                rows += `<div class="issue-detail-tracklist-disc">Disc ${disc}</div>`;
-                lastDisc = disc;
-            }
-            const fmt = t.format || (t.file_path ? t.file_path.split('.').pop().toUpperCase() : '');
-            const fmtLower = fmt.toLowerCase();
-            const fmtClass = fmtLower === 'flac' ? 'flac' : (fmtLower === 'mp3' ? 'mp3' : 'other');
-            const br = t.bitrate ? parseInt(t.bitrate) : 0;
-            const brClass = br >= 320 || fmtLower === 'flac' ? 'high' : (br >= 192 ? 'medium' : 'low');
-            const durStr = t.duration && typeof t.duration === 'number' ? formatDurationMs(t.duration) : '';
-
-            rows += `
-                <div class="issue-detail-tracklist-row">
-                    <span class="issue-detail-tracklist-num">${_esc(String(t.track_number || '-'))}</span>
-                    <span class="issue-detail-tracklist-title">${_esc(t.title || 'Unknown')}</span>
-                    ${durStr ? `<span class="issue-detail-tracklist-dur">${durStr}</span>` : ''}
-                    <span class="issue-detail-tracklist-meta">
-                        ${fmt ? `<span class="enhanced-format-badge ${fmtClass}">${_esc(fmt)}</span>` : ''}
-                        ${br ? `<span class="enhanced-bitrate ${brClass}">${br}k</span>` : ''}
-                    </span>
-                </div>
-            `;
-        });
-        trackListHtml = `
-            <div class="issue-detail-section">
-                <div class="issue-detail-section-title">Track Listing <span class="issue-detail-section-count">${snapshot.tracks.length} tracks</span></div>
-                <div class="issue-detail-tracklist">${rows}</div>
-            </div>
-        `;
-    }
-
-    // --- Admin response section ---
-    let adminResponseHtml = '';
-    if (admin) {
-        adminResponseHtml = `
-            <div class="issue-detail-section">
-                <div class="issue-detail-section-title">Admin Response</div>
-                <textarea class="issue-detail-response-textarea" id="issue-detail-response-input" placeholder="Write a response to the reporter..." rows="3">${_esc(issue.admin_response || '')}</textarea>
-            </div>
-        `;
-    } else if (issue.admin_response) {
-        adminResponseHtml = `
-            <div class="issue-detail-section">
-                <div class="issue-detail-section-title">Admin Response</div>
-                <div class="issue-detail-admin-response">${_esc(issue.admin_response)}</div>
-            </div>
-        `;
-    }
-
-    body.innerHTML = `
-        ${heroHtml}
-        ${issueInfoHtml}
-        ${actionButtonsHtml}
-        ${descriptionHtml}
-        ${metaGridHtml}
-        ${filePathHtml}
-        ${trackListHtml}
-        ${adminResponseHtml}
-    `;
-
-    // --- Footer with status action buttons ---
-    const safeId = parseInt(issue.id, 10);
-    let footerHtml = '<button class="enhanced-bulk-btn secondary" onclick="closeIssueDetailModal()">Close</button>';
-
-    if (admin) {
-        if (issue.status === 'open' || issue.status === 'in_progress') {
-            if (issue.status === 'open') {
-                footerHtml += `<button class="enhanced-bulk-btn issue-btn-progress" onclick="updateIssueStatus(${safeId}, 'in_progress')">Mark In Progress</button>`;
-            }
-            footerHtml += `<button class="enhanced-bulk-btn issue-btn-resolve" onclick="updateIssueStatus(${safeId}, 'resolved')">Resolve</button>`;
-            footerHtml += `<button class="enhanced-bulk-btn issue-btn-dismiss" onclick="updateIssueStatus(${safeId}, 'dismissed')">Dismiss</button>`;
-        } else {
-            footerHtml += `<button class="enhanced-bulk-btn issue-btn-reopen" onclick="updateIssueStatus(${safeId}, 'open')">Reopen</button>`;
-        }
-        footerHtml += `<button class="enhanced-bulk-btn issue-btn-delete" onclick="deleteIssue(${safeId})">Delete</button>`;
-    } else {
-        if (issue.status === 'open') {
-            footerHtml += `<button class="enhanced-bulk-btn issue-btn-delete" onclick="deleteIssue(${safeId})">Withdraw</button>`;
-        }
-    }
-
-    footer.innerHTML = footerHtml;
-
-    // --- Attach action button handlers ---
-    const dlBtn = document.getElementById('issue-action-download');
-    if (dlBtn) {
-        dlBtn.onclick = () => issueDownloadAlbum(spotifyAlbumId, artistName, albumName);
-    }
-    const wlBtn = document.getElementById('issue-action-wishlist');
-    if (wlBtn) {
-        wlBtn.onclick = () => issueAddToWishlist(spotifyAlbumId, artistName, albumName);
-    }
-}
-
-// --- Issue Action: Download Album ---
-async function issueDownloadAlbum(spotifyAlbumId, artistName, albumName) {
-    const btn = document.getElementById('issue-action-download');
-    if (!spotifyAlbumId && (!artistName || !albumName)) {
-        showToast('No album ID or artist/album info available for download', 'warning');
-        return;
-    }
-    try {
-        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
-
-        let response;
-        if (spotifyAlbumId) {
-            const albumParams = new URLSearchParams({ name: albumName || '', artist: artistName || '' });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${albumParams}`);
-        } else {
-            // No Spotify album ID — search for the album by name
-            const query = `${artistName} ${albumName}`;
-            const searchResp = await fetch('/api/enhanced-search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query })
-            });
-            if (!searchResp.ok) throw new Error('Album search failed');
-            const searchData = await searchResp.json();
-            const foundAlbum = searchData.spotify_albums?.[0];
-            if (!foundAlbum || !foundAlbum.id) {
-                showToast(`Could not find "${albumName}" by ${artistName}`, 'warning');
-                return;
-            }
-            const albumParams = new URLSearchParams({ name: foundAlbum.name || albumName, artist: foundAlbum.artist || artistName });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(foundAlbum.id)}?${albumParams}`);
-        }
-
-        if (!response.ok) {
-            if (response.status === 401) throw new Error('Spotify not authenticated');
-            throw new Error(`Failed to load album: ${response.status}`);
-        }
-
-        const albumData = await response.json();
-        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-            showToast(`No tracks available for "${albumName}"`, 'warning');
-            return;
-        }
-
-        // Close the issue modal first
-        closeIssueDetailModal();
-
-        const resolvedAlbumId = albumData.id || spotifyAlbumId || Date.now();
-        const virtualPlaylistId = `issue_download_${resolvedAlbumId}`;
-
-        // Enrich tracks with album metadata
-        const enrichedTracks = albumData.tracks.map(track => ({
-            ...track,
-            album: {
-                name: albumData.name,
-                id: albumData.id,
-                album_type: albumData.album_type || 'album',
-                images: albumData.images || [],
-                release_date: albumData.release_date,
-                total_tracks: albumData.total_tracks
-            }
-        }));
-
-        const playlistName = `[${artistName}] ${albumData.name}`;
-        const artistObject = { id: `issue_${artistName}`, name: artistName, image_url: '' };
-        const fullAlbumObject = {
-            name: albumData.name,
-            id: albumData.id,
-            album_type: albumData.album_type || 'album',
-            images: albumData.images || [],
-            image_url: albumData.images?.[0]?.url || null,
-            release_date: albumData.release_date,
-            total_tracks: albumData.total_tracks,
-            artists: albumData.artists || [{ name: artistName }]
-        };
-
-        await openDownloadMissingModalForArtistAlbum(
-            virtualPlaylistId, playlistName, enrichedTracks, fullAlbumObject, artistObject, true
-        );
-
-        // Register download bubble so it appears on the dashboard
-        const albumType = fullAlbumObject.album_type || 'album';
-        registerArtistDownload(artistObject, fullAlbumObject, virtualPlaylistId, albumType);
-
-    } catch (error) {
-        console.error('Issue download error:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        if (btn) { btn.disabled = false; btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download Album'; }
-    }
-}
-
-// --- Redownload Library Album (Enhanced View) ---
-async function redownloadLibraryAlbum(album, artistName, btn) {
-    const albumName = album.title || '';
-    const spotifyAlbumId = album.spotify_album_id || '';
-
-    if (!spotifyAlbumId && !albumName) {
-        showToast('No album ID or name available for redownload', 'warning');
-        return;
-    }
-
-    const origText = btn ? btn.innerHTML : '';
-    try {
-        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
-
-        let response;
-        if (spotifyAlbumId) {
-            const params = new URLSearchParams({ name: albumName, artist: artistName || '' });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${params}`);
-        }
-
-        // Fallback: search by name if no ID or direct fetch failed
-        if (!response || !response.ok) {
-            const query = `${artistName || ''} ${albumName}`.trim();
-            const searchResp = await fetch('/api/enhanced-search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query })
-            });
-            if (!searchResp.ok) throw new Error('Album search failed');
-            const searchData = await searchResp.json();
-            const found = searchData.spotify_albums?.[0] || searchData.itunes_albums?.[0];
-            if (!found || !found.id) {
-                showToast(`Could not find "${albumName}" by ${artistName || 'unknown'}`, 'warning');
-                return;
-            }
-            const params = new URLSearchParams({ name: found.name || albumName, artist: found.artist || artistName || '' });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(found.id)}?${params}`);
-        }
-
-        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
-
-        const albumData = await response.json();
-        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-            showToast(`No tracks found for "${albumName}"`, 'warning');
-            return;
-        }
-
-        const resolvedId = albumData.id || spotifyAlbumId || album.id;
-        const virtualPlaylistId = `library_redownload_${resolvedId}`;
-        const playlistName = `[${artistName || 'Unknown'}] ${albumData.name}`;
-
-        const enrichedTracks = albumData.tracks.map(track => ({
-            ...track,
-            album: {
-                name: albumData.name,
-                id: albumData.id,
-                album_type: albumData.album_type || 'album',
-                images: albumData.images || [],
-                release_date: albumData.release_date,
-                total_tracks: albumData.total_tracks
-            }
-        }));
-
-        const enhancedArtist = artistDetailPageState.enhancedData?.artist;
-        const artistObject = {
-            id: artistDetailPageState.currentArtistId || `library_${artistName || album.id}`,
-            name: artistName || '',
-            image_url: enhancedArtist?.thumb_url || ''
-        };
-        const fullAlbumObject = {
-            name: albumData.name,
-            id: albumData.id,
-            album_type: albumData.album_type || 'album',
-            images: albumData.images || [],
-            image_url: albumData.images?.[0]?.url || null,
-            release_date: albumData.release_date,
-            total_tracks: albumData.total_tracks,
-            artists: albumData.artists || [{ name: artistName || '' }]
-        };
-
-        await openDownloadMissingModalForArtistAlbum(
-            virtualPlaylistId, playlistName, enrichedTracks, fullAlbumObject, artistObject, true
-        );
-
-        // Register download bubble so it appears on the dashboard
-        const albumType = fullAlbumObject.album_type || 'album';
-        registerArtistDownload(artistObject, fullAlbumObject, virtualPlaylistId, albumType);
-
-    } catch (error) {
-        console.error('Redownload album error:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        if (btn) { btn.disabled = false; btn.innerHTML = origText; }
-    }
-}
-
-// --- Issue Action: Add to Wishlist ---
-async function issueAddToWishlist(spotifyAlbumId, artistName, albumName) {
-    const btn = document.getElementById('issue-action-wishlist');
-    if (!spotifyAlbumId && (!artistName || !albumName)) {
-        showToast('No album ID or artist/album info available', 'warning');
-        return;
-    }
-    try {
-        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
-
-        let response;
-        if (spotifyAlbumId) {
-            const albumParams = new URLSearchParams({ name: albumName || '', artist: artistName || '' });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${albumParams}`);
-        } else {
-            // No Spotify album ID — search for the album by name
-            const query = `${artistName} ${albumName}`;
-            const searchResp = await fetch('/api/enhanced-search', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ query })
-            });
-            if (!searchResp.ok) throw new Error('Album search failed');
-            const searchData = await searchResp.json();
-            const foundAlbum = searchData.spotify_albums?.[0];
-            if (!foundAlbum || !foundAlbum.id) {
-                showToast(`Could not find "${albumName}" by ${artistName}`, 'warning');
-                return;
-            }
-            const albumParams = new URLSearchParams({ name: foundAlbum.name || albumName, artist: foundAlbum.artist || artistName });
-            response = await fetch(`/api/spotify/album/${encodeURIComponent(foundAlbum.id)}?${albumParams}`);
-        }
-
-        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
-
-        const albumData = await response.json();
-        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
-            showToast(`No tracks available for "${albumName}"`, 'warning');
-            return;
-        }
-
-        // Close issue modal and open wishlist modal
-        closeIssueDetailModal();
-
-        const albumArtists = albumData.artists || [{ name: artistName }];
-        const album = {
-            name: albumData.name,
-            id: albumData.id,
-            album_type: albumData.album_type || 'album',
-            images: albumData.images || [],
-            release_date: albumData.release_date,
-            total_tracks: albumData.total_tracks,
-            artists: albumArtists
-        };
-        const artist = { id: null, name: artistName };
-
-        // Enrich tracks with album metadata — use album artist for wishlist grouping
-        // (Spotify returns per-track artists which can differ on compilations/soundtracks)
-        const tracks = albumData.tracks.map(t => ({
-            ...t,
-            artists: albumArtists,
-            album: album
-        }));
-
-        await openAddToWishlistModal(album, artist, tracks, albumData.album_type || 'album');
-
-    } catch (error) {
-        console.error('Issue wishlist error:', error);
-        showToast(`Error: ${error.message}`, 'error');
-    } finally {
-        if (btn) { btn.disabled = false; btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg> Add to Wishlist'; }
-    }
-}
-
-async function updateIssueStatus(issueId, newStatus) {
-    const payload = { status: newStatus };
-
-    // Include admin response if present
-    const responseInput = document.getElementById('issue-detail-response-input');
-    if (responseInput) {
-        payload.admin_response = responseInput.value.trim();
-    }
-
-    try {
-        const resp = await fetch(`/api/issues/${issueId}`, {
-            method: 'PUT',
-            headers: _issueHeaders({ 'Content-Type': 'application/json' }),
-            body: JSON.stringify(payload),
-        });
-        const data = await resp.json();
-        if (data.success) {
-            showToast(`Issue ${newStatus === 'resolved' ? 'resolved' : newStatus === 'dismissed' ? 'dismissed' : newStatus === 'in_progress' ? 'marked in progress' : 'reopened'}`, 'success');
-            closeIssueDetailModal();
-            // Refresh if on issues page
-            const issuesPage = document.getElementById('issues-page');
-            if (issuesPage && issuesPage.classList.contains('active')) {
-                loadIssuesPage();
-            }
-            loadIssuesBadge();
-        } else {
-            showToast(data.error || 'Failed to update issue', 'error');
-        }
-    } catch (e) {
-        console.error('Failed to update issue:', e);
-        showToast('Failed to update issue', 'error');
-    }
-}
-
-async function deleteIssue(issueId) {
-    if (!confirm('Are you sure you want to delete this issue?')) return;
-    try {
-        const resp = await fetch(`/api/issues/${issueId}`, { method: 'DELETE', headers: _issueHeaders() });
-        const data = await resp.json();
-        if (data.success) {
-            showToast('Issue deleted', 'success');
-            closeIssueDetailModal();
-            const issuesPage = document.getElementById('issues-page');
-            if (issuesPage && issuesPage.classList.contains('active')) {
-                loadIssuesPage();
-            }
-            loadIssuesBadge();
-        } else {
-            showToast(data.error || 'Failed to delete issue', 'error');
-        }
-    } catch (e) {
-        console.error('Failed to delete issue:', e);
-        showToast('Failed to delete issue', 'error');
-    }
-}
-
-function closeIssueDetailModal() {
-    const overlay = document.getElementById('issue-detail-overlay');
-    if (overlay) overlay.classList.add('hidden');
-}
-
-async function loadIssuesBadge() {
-    try {
-        const resp = await fetch('/api/issues/counts', { headers: _issueHeaders() });
-        const data = await resp.json();
-        if (!data.success) return;
-        const badge = document.getElementById('issues-nav-badge');
-        if (badge) {
-            const openCount = data.counts.open || 0;
-            badge.textContent = openCount;
-            badge.classList.toggle('hidden', openCount === 0);
-        }
-    } catch (e) { }
-}
-
-// ===== END ISSUES PAGE =====
-
-// --- Helpers ---
-
-function _esc(str) {
-    if (!str) return '';
-    const d = document.createElement('div');
-    d.textContent = str;
-    return d.innerHTML;
-}
-
-function _escAttr(str) {
-    if (!str) return '';
-    return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-}
-
-// ===== ENHANCE QUALITY MODAL =====
-
-let _enhanceQualityData = null;
-let _enhanceArtistId = null;
-
-const ENHANCE_TIER_MAP = {
-    'lossless': { num: 1, label: 'Lossless', cssClass: 'lossless' },
-    'high_lossy': { num: 2, label: 'High Lossy', cssClass: 'high-lossy' },
-    'standard_lossy': { num: 3, label: 'Standard Lossy', cssClass: 'standard-lossy' },
-    'low_lossy': { num: 4, label: 'Low Lossy', cssClass: 'low-lossy' },
-    'unknown': { num: 999, label: 'Unknown', cssClass: 'unknown' },
-};
-
-async function checkArtistEnhanceEligibility(artistId) {
-    const btn = document.getElementById('library-artist-enhance-btn');
-    if (!btn) return;
-    btn.classList.add('hidden');
-    _enhanceArtistId = artistId;
-
-    try {
-        const resp = await fetch(`/api/library/artist/${artistId}/quality-analysis`);
-        if (!resp.ok) return;
-        const data = await resp.json();
-        if (!data.success || !data.tracks || data.tracks.length === 0) return;
-
-        _enhanceQualityData = data;
-
-        // Show button if any tracks are below the user's min acceptable tier
-        const minTier = data.min_acceptable_tier || 1;
-        const belowCount = data.tracks.filter(t => t.tier_num > minTier).length;
-        if (belowCount > 0) {
-            btn.classList.remove('hidden');
-            btn.querySelector('.enhance-text').textContent = `Enhance Quality (${belowCount})`;
-        }
-    } catch (e) {
-        console.debug('Enhance eligibility check failed:', e);
-    }
-}
-
-async function playArtistRadio() {
-    try {
-        const artistId = artistDetailPageState.currentArtistId;
-        const artistName = artistDetailPageState.currentArtistName || '';
-        if (!artistId) {
-            showToast('No artist selected', 'error');
-            return;
-        }
-
-        // Get tracks from this artist's library
-        const resp = await fetch(`/api/library/artist/${artistId}/enhanced`);
-        if (!resp.ok) throw new Error('Failed to load artist data');
-        const data = await resp.json();
-        if (!data.success) throw new Error(data.error || 'Failed');
-
-        // Collect all tracks with file paths
-        const allTracks = [];
-        for (const album of (data.albums || [])) {
-            for (const track of (album.tracks || [])) {
-                if (track.file_path) {
-                    allTracks.push({ track, album });
-                }
-            }
-        }
-
-        if (!allTracks.length) {
-            showToast('No playable tracks found for this artist', 'error');
-            return;
-        }
-
-        // Pick a random track
-        const random = allTracks[Math.floor(Math.random() * allTracks.length)];
-        const albumArt = random.album.thumb_url || data.artist?.thumb_url || null;
-
-        // Clear existing queue and disable radio before starting fresh
-        npRadioMode = false;
-        clearQueue();
-        if (audioPlayer && !audioPlayer.paused) {
-            audioPlayer.pause();
-        }
-
-        // Play the track first, then enable radio mode after a short delay
-        // so currentTrack is set and the radio queue fill triggers
-        playLibraryTrack({
-            id: random.track.id,
-            title: random.track.title,
-            file_path: random.track.file_path,
-            bitrate: random.track.bitrate,
-            artist_id: artistId,
-            album_id: random.album.id,
-        }, random.album.title || '', artistName);
-
-        // Enable radio mode after track starts loading
-        setTimeout(() => {
-            npRadioMode = true;
-            const radioBtn = document.querySelector('.np-radio-btn');
-            if (radioBtn) radioBtn.classList.add('active');
-        }, 1000);
-
-        showToast(`Playing ${artistName} radio — similar tracks will auto-queue`, 'success');
-    } catch (e) {
-        showToast(`Failed to start artist radio: ${e.message}`, 'error');
-    }
-}
-
-function openEnhanceQualityModal() {
-    if (!_enhanceQualityData) return;
-    const data = _enhanceQualityData;
-
-    // Remove existing modal if any
-    const existing = document.getElementById('enhance-quality-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'enhance-quality-overlay';
-    overlay.className = 'enhance-modal-overlay';
-    overlay.onclick = (e) => { if (e.target === overlay) closeEnhanceQualityModal(); };
-
-    const minTier = data.min_acceptable_tier || 1;
-    const summary = data.quality_summary || {};
-
-    overlay.innerHTML = `
-        <div class="enhance-modal" onclick="event.stopPropagation()">
-            <div class="enhance-modal-header">
-                <h3>⚡ Enhance Quality — ${_esc(data.artist_name)}</h3>
-                <button class="enhance-modal-close" onclick="closeEnhanceQualityModal()">&times;</button>
-            </div>
-            <div class="enhance-summary-bar">
-                ${_buildEnhanceSummaryChips(summary)}
-            </div>
-            <div class="enhance-controls">
-                <div class="enhance-tier-selector">
-                    <label>Upgrade tracks below:</label>
-                    <select id="enhance-tier-dropdown" onchange="updateEnhanceThreshold(parseInt(this.value))">
-                        <option value="1" ${minTier <= 1 ? 'selected' : ''}>Lossless (FLAC/WAV)</option>
-                        <option value="2" ${minTier === 2 ? 'selected' : ''}>High Lossy (OGG/Opus)</option>
-                        <option value="3" ${minTier === 3 ? 'selected' : ''}>Standard Lossy (M4A/AAC)</option>
-                        <option value="4" ${minTier >= 4 ? 'selected' : ''}>Low Lossy (MP3/WMA)</option>
-                    </select>
-                </div>
-                <div class="enhance-select-controls">
-                    <button class="enhance-select-btn" onclick="enhanceSelectAll(true)">Select All Below</button>
-                    <button class="enhance-select-btn" onclick="enhanceSelectAll(false)">Deselect All</button>
-                    <span class="enhance-selected-count" id="enhance-selected-count">0 selected</span>
-                </div>
-            </div>
-            <div class="enhance-modal-body">
-                <table class="enhance-track-table">
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th>#</th>
-                            <th>Title</th>
-                            <th>Album</th>
-                            <th>Format</th>
-                            <th>Bitrate</th>
-                        </tr>
-                    </thead>
-                    <tbody id="enhance-track-tbody">
-                    </tbody>
-                </table>
-            </div>
-            <div class="enhance-modal-footer">
-                <div class="enhance-footer-info" id="enhance-footer-info"></div>
-                <div class="enhance-footer-actions">
-                    <button class="enhance-btn secondary" onclick="closeEnhanceQualityModal()">Cancel</button>
-                    <button class="enhance-btn primary" id="enhance-submit-btn" onclick="submitEnhanceQuality()" disabled>
-                        ⚡ Enhance 0 Tracks
-                    </button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-    renderEnhanceTrackRows(minTier);
-}
-
-function _buildEnhanceSummaryChips(summary) {
-    const chips = [
-        { key: 'lossless', label: 'FLAC', cssClass: 'lossless' },
-        { key: 'high_lossy', label: 'OGG/Opus', cssClass: 'high-lossy' },
-        { key: 'standard_lossy', label: 'M4A/AAC', cssClass: 'standard-lossy' },
-        { key: 'low_lossy', label: 'MP3/WMA', cssClass: 'low-lossy' },
-    ];
-    return chips
-        .filter(c => (summary[c.key] || 0) > 0)
-        .map(c => `
-            <div class="enhance-summary-chip ${c.cssClass}">
-                <span class="chip-count">${summary[c.key]}</span>
-                <span class="chip-label">${c.label}</span>
-            </div>
-        `).join('');
-}
-
-function renderEnhanceTrackRows(thresholdTier) {
-    const tbody = document.getElementById('enhance-track-tbody');
-    if (!tbody || !_enhanceQualityData) return;
-
-    const tracks = _enhanceQualityData.tracks;
-    // Sort: below-threshold first, then by album + track number
-    const sorted = [...tracks].sort((a, b) => {
-        const aBt = a.tier_num > thresholdTier ? 0 : 1;
-        const bBt = b.tier_num > thresholdTier ? 0 : 1;
-        if (aBt !== bBt) return aBt - bBt;
-        const albumCmp = (a.album_title || '').localeCompare(b.album_title || '');
-        if (albumCmp !== 0) return albumCmp;
-        return (a.disc_number || 1) * 1000 + (a.track_number || 0) - ((b.disc_number || 1) * 1000 + (b.track_number || 0));
-    });
-
-    tbody.innerHTML = sorted.map(track => {
-        const isBelow = track.tier_num > thresholdTier;
-        const tierInfo = ENHANCE_TIER_MAP[track.tier_name] || ENHANCE_TIER_MAP['unknown'];
-        const bitrateStr = track.bitrate ? `${track.bitrate} kbps` : '-';
-        return `
-            <tr class="enhance-track-row ${isBelow ? 'below-threshold' : 'above-threshold'}"
-                data-track-id="${_escAttr(track.track_id)}" data-tier="${track.tier_num}">
-                <td><input type="checkbox" class="enhance-track-check"
-                    ${isBelow ? 'checked' : ''} onchange="updateEnhanceSelectedCount()"></td>
-                <td>${track.track_number || '-'}</td>
-                <td>${_esc(track.title)}</td>
-                <td>${_esc(track.album_title)}</td>
-                <td><span class="enhance-format-badge ${tierInfo.cssClass}">${_esc(track.format)}</span></td>
-                <td><span class="enhance-bitrate">${bitrateStr}</span></td>
-            </tr>
-        `;
-    }).join('');
-
-    updateEnhanceSelectedCount();
-}
-
-function updateEnhanceThreshold(tierNum) {
-    const rows = document.querySelectorAll('.enhance-track-row');
-    rows.forEach(row => {
-        const trackTier = parseInt(row.dataset.tier);
-        const isBelow = trackTier > tierNum;
-        const cb = row.querySelector('.enhance-track-check');
-
-        row.classList.toggle('below-threshold', isBelow);
-        row.classList.toggle('above-threshold', !isBelow);
-        if (cb) cb.checked = isBelow;
-    });
-    updateEnhanceSelectedCount();
-}
-
-function enhanceSelectAll(select) {
-    const thresholdTier = parseInt(document.getElementById('enhance-tier-dropdown')?.value || '1');
-    const checks = document.querySelectorAll('.enhance-track-check');
-    checks.forEach(cb => {
-        const row = cb.closest('.enhance-track-row');
-        const trackTier = parseInt(row?.dataset.tier || '999');
-        if (select) {
-            cb.checked = trackTier > thresholdTier;
-        } else {
-            cb.checked = false;
-        }
-    });
-    updateEnhanceSelectedCount();
-}
-
-function updateEnhanceSelectedCount() {
-    const checks = document.querySelectorAll('.enhance-track-check:checked');
-    const count = checks.length;
-    const countEl = document.getElementById('enhance-selected-count');
-    const submitBtn = document.getElementById('enhance-submit-btn');
-
-    if (countEl) countEl.textContent = `${count} selected`;
-    if (submitBtn) {
-        submitBtn.textContent = `⚡ Enhance ${count} Track${count !== 1 ? 's' : ''}`;
-        submitBtn.disabled = count === 0;
-    }
-}
-
-async function submitEnhanceQuality() {
-    const checks = document.querySelectorAll('.enhance-track-check:checked');
-    const trackIds = [];
-    checks.forEach(cb => {
-        const row = cb.closest('.enhance-track-row');
-        if (row?.dataset.trackId) trackIds.push(row.dataset.trackId);
-    });
-
-    if (trackIds.length === 0) return;
-
-    const submitBtn = document.getElementById('enhance-submit-btn');
-    const footerInfo = document.getElementById('enhance-footer-info');
-    if (submitBtn) {
-        submitBtn.disabled = true;
-        submitBtn.innerHTML = '<span class="enhance-spinner"></span>Processing...';
-    }
-    if (footerInfo) footerInfo.textContent = 'Matching tracks to Spotify and adding to wishlist...';
-
-    try {
-        const resp = await fetch(`/api/library/artist/${_enhanceArtistId}/enhance`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ track_ids: trackIds })
-        });
-
-        const result = await resp.json();
-
-        if (result.success) {
-            const msg = `${result.enhanced_count} track${result.enhanced_count !== 1 ? 's' : ''} queued for enhancement`;
-            if (footerInfo) footerInfo.textContent = msg;
-
-            showToast(msg + (result.failed_count > 0 ? ` (${result.failed_count} failed)` : ''), 'success');
-
-            // Update button count
-            const enhBtn = document.getElementById('library-artist-enhance-btn');
-            if (enhBtn && result.enhanced_count > 0) {
-                const remaining = trackIds.length - result.enhanced_count;
-                if (remaining <= 0) {
-                    enhBtn.classList.add('hidden');
-                }
-            }
-
-            if (submitBtn) {
-                submitBtn.textContent = '✅ Done';
-                submitBtn.disabled = true;
-            }
-
-            // Auto-close after short delay
-            setTimeout(() => closeEnhanceQualityModal(), 1500);
-        } else {
-            throw new Error(result.error || 'Enhancement failed');
-        }
-    } catch (e) {
-        console.error('Enhance quality error:', e);
-        showToast(`Enhancement failed: ${e.message}`, 'error');
-        if (submitBtn) {
-            submitBtn.textContent = `⚡ Enhance ${trackIds.length} Tracks`;
-            submitBtn.disabled = false;
-        }
-        if (footerInfo) footerInfo.textContent = '';
-    }
-}
-
-function closeEnhanceQualityModal() {
-    const overlay = document.getElementById('enhance-quality-overlay');
-    if (overlay) {
-        overlay.classList.add('hidden');
-        setTimeout(() => overlay.remove(), 300);
-    }
-}
-
-// Global exports
-window.openEnhanceQualityModal = openEnhanceQualityModal;
-window.closeEnhanceQualityModal = closeEnhanceQualityModal;
-window.updateEnhanceThreshold = updateEnhanceThreshold;
-window.enhanceSelectAll = enhanceSelectAll;
-window.updateEnhanceSelectedCount = updateEnhanceSelectedCount;
-window.submitEnhanceQuality = submitEnhanceQuality;
-
-// ===== END ENHANCE QUALITY MODAL =====
-
-// ==================================================================================
-// PLAYLIST EXPLORER — Visual Discovery Tree
-// ==================================================================================
-
-const _explorer = {
-    initialized: false,
-    mode: 'albums',
-    artists: [],
-    selectedAlbums: new Set(),
-    expandedArtists: new Set(),
-    building: false,
-    playlistId: null,
-    meta: null,
-    _resizeTimer: null,
-};
-
-function initExplorer() {
-    if (_explorer.initialized) return;
-    _explorer.initialized = true;
-    _explorer._playlists = [];
-    _explorer._activeSource = null;
-
-    _explorerLoadPlaylists();
-
-    // Listen for discovery completion to auto-refresh playlist cards
-    if (typeof socket !== 'undefined') {
-        socket.on('discovery:progress', (data) => {
-            if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) return;
-            // Match mirrored playlist discovery events
-            if (data.phase === 'discovered' || data.phase === 'sync_complete' || data.complete) {
-                // Discovery finished — refresh playlists after brief delay for DB commit
-                setTimeout(() => _explorerLoadPlaylists(), 1500);
-            }
-            // Live progress update on cards during discovery
-            if (data.id && data.id.startsWith('mirrored_')) {
-                const plId = parseInt(data.id.replace('mirrored_', ''));
-                const card = document.querySelector(`.explorer-picker-card[data-id="${plId}"]`);
-                if (card) {
-                    const meta = card.querySelector('.explorer-picker-card-meta');
-                    if (meta && data.progress != null) {
-                        meta.innerHTML = `<span class="explorer-discovering-live">Discovering... ${Math.round(data.progress)}%</span>`;
-                    }
-                }
-            }
-        });
-    }
-}
-
-function _explorerLoadPlaylists() {
-    fetch('/api/mirrored-playlists')
-        .then(r => r.json())
-        .then(data => {
-            const playlists = Array.isArray(data) ? data : (data.playlists || []);
-            _explorer._playlists = playlists;
-
-            if (playlists.length === 0) {
-                const scroll = document.getElementById('explorer-picker-scroll');
-                if (scroll) scroll.innerHTML = '<div class="explorer-picker-empty">No mirrored playlists found. Sync a playlist first.</div>';
-                return;
-            }
-
-            // Group by source
-            const groups = {};
-            playlists.forEach(p => {
-                const src = (p.source || 'other').toLowerCase();
-                if (!groups[src]) groups[src] = [];
-                groups[src].push(p);
-            });
-
-            // Render source tabs
-            const tabsEl = document.getElementById('explorer-picker-tabs');
-            if (tabsEl) {
-                const sourceNames = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', file: 'File', other: 'Other' };
-                const sources = Object.keys(groups);
-                if (sources.length <= 1) {
-                    tabsEl.style.display = 'none';
-                } else {
-                    tabsEl.innerHTML = sources.map((src, i) => {
-                        const label = sourceNames[src] || src.charAt(0).toUpperCase() + src.slice(1);
-                        const count = groups[src].length;
-                        const isActive = _explorer._activeSource === src || (!_explorer._activeSource && i === 0);
-                        return `<button class="explorer-picker-tab ${isActive ? 'active' : ''}" data-source="${src}" onclick="explorerSwitchPickerTab('${src}')">${label} <span class="explorer-picker-tab-count">${count}</span></button>`;
-                    }).join('');
-                }
-
-                // Show active or first source
-                const activeSource = _explorer._activeSource || sources[0];
-                _explorer._activeSource = activeSource;
-                explorerRenderPickerCards(activeSource);
-            }
-        })
-        .catch(() => { });
-}
-
-function explorerSwitchPickerTab(source) {
-    _explorer._activeSource = source;
-    document.querySelectorAll('.explorer-picker-tab').forEach(t => t.classList.toggle('active', t.dataset.source === source));
-    explorerRenderPickerCards(source);
-}
-
-function explorerRenderPickerCards(source) {
-    const scroll = document.getElementById('explorer-picker-scroll');
-    if (!scroll) return;
-
-    const filtered = _explorer._playlists.filter(p => (p.source || 'other').toLowerCase() === source);
-    scroll.innerHTML = filtered.map(p => {
-        const img = p.image_url || '';
-        const total = p.total_count || p.track_count || 0;
-        const discovered = p.discovered_count || 0;
-        const pct = total > 0 ? Math.round((discovered / total) * 100) : 0;
-        const isReady = pct >= 50;
-        const isActive = _explorer.playlistId === p.id;
-        const isFullyDiscovered = pct === 100;
-        const wasExplored = !!(p.explored_at || p.explored);
-        const wishlisted = p.wishlisted_count || 0;
-        const inLibrary = p.in_library_count || 0;
-
-        // Status badge: checkmark if explored/in-library, star if ready, % if needs discovery
-        let statusBadge = '';
-        if (inLibrary > 0 && inLibrary >= total * 0.8) {
-            statusBadge = '<div class="explorer-picker-card-badge downloaded" title="Most tracks in library">&#10003;</div>';
-        } else if (wasExplored) {
-            statusBadge = '<div class="explorer-picker-card-badge explored" title="Already explored">&#10003;</div>';
-        } else if (wishlisted > 0) {
-            statusBadge = '<div class="explorer-picker-card-badge wishlisted" title="Tracks wishlisted">&#9829;</div>';
-        } else if (isFullyDiscovered) {
-            statusBadge = '<div class="explorer-picker-card-badge ready" title="Ready to explore">&#9733;</div>';
-        } else if (!isReady) {
-            statusBadge = `<div class="explorer-picker-card-badge needs-discovery" title="Needs discovery (${pct}%)">${pct}%</div>`;
-        }
-
-        // Meta line with status indicators
-        let metaHTML;
-        const statusParts = [];
-        if (inLibrary > 0) statusParts.push(`<span class="explorer-picker-in-library">${inLibrary} in library</span>`);
-        if (wishlisted > 0) statusParts.push(`<span class="explorer-picker-wishlisted">${wishlisted} wishlisted</span>`);
-
-        if (isFullyDiscovered) {
-            metaHTML = `${total} tracks &middot; <span class="explorer-picker-discovered">Fully discovered</span>`;
-        } else if (isReady) {
-            metaHTML = `${total} tracks &middot; ${pct}% discovered`;
-        } else {
-            metaHTML = `${total} tracks &middot; <span class="explorer-picker-not-ready">${pct}% discovered</span>`;
-        }
-        if (statusParts.length > 0) {
-            metaHTML += `<br>${statusParts.join(' &middot; ')}`;
-        }
-
-        // Discover button for undiscovered playlists (replaces redirect to Sync)
-        const discoverBtn = !isReady ? `<button class="explorer-picker-discover-btn" onclick="event.stopPropagation(); explorerStartDiscovery(${p.id})" title="Start discovery">Discover</button>` : '';
-
-        return `
-            <div class="explorer-picker-card ${isActive ? 'active' : ''} ${!isReady ? 'not-ready' : ''} ${wasExplored ? 'explored' : ''}"
-                 data-id="${p.id}"
-                 onclick="${isReady ? `explorerSelectPlaylist(${p.id}, this)` : ''}">
-                <div class="explorer-picker-card-art">
-                    ${img ? `<img src="${img}" alt="" loading="lazy">` : '<div class="explorer-picker-card-art-placeholder">&#9835;</div>'}
-                </div>
-                <div class="explorer-picker-card-info">
-                    <div class="explorer-picker-card-name-row">
-                        <div class="explorer-picker-card-name">${p.name || 'Untitled'}</div>
-                        ${statusBadge}
-                    </div>
-                    <div class="explorer-picker-card-meta">${metaHTML}</div>
-                    ${discoverBtn ? `<div class="explorer-picker-card-actions">${discoverBtn}</div>` : ''}
-                </div>
-            </div>
-        `;
-    }).join('');
-}
-
-function explorerSelectPlaylist(id, el) {
-    _explorer.playlistId = id;
-    document.querySelectorAll('.explorer-picker-card').forEach(c => c.classList.remove('active'));
-    if (el) el.classList.add('active');
-    // Update hint text
-    const hint = document.getElementById('explorer-build-hint');
-    const pl = _explorer._playlists.find(p => p.id === id);
-    if (hint && pl) hint.textContent = `Ready: ${pl.name}`;
-    else if (hint) hint.textContent = '';
-}
-
-function explorerRedirectToDiscover(playlistId) {
-    showToast('This playlist needs more tracks discovered before exploring. Redirecting to Sync...', 'info');
-    navigateToPage('sync');
-    setTimeout(() => {
-        const mirroredBtn = document.querySelector('.sync-tab-button[data-tab="mirrored"]');
-        if (mirroredBtn) mirroredBtn.click();
-    }, 200);
-}
-
-async function explorerStartDiscovery(playlistId) {
-    const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
-    const btn = card?.querySelector('.explorer-picker-discover-btn');
-    if (btn) { btn.disabled = true; btn.textContent = 'Starting...'; }
-
-    try {
-        if (typeof discoverMirroredPlaylist === 'function') {
-            await discoverMirroredPlaylist(playlistId);
-            if (btn) { btn.disabled = false; btn.textContent = 'Open'; btn.title = 'Reopen discovery modal'; }
-
-            // Poll for card updates while discovery is in progress
-            _explorerStartDiscoveryPoller(playlistId);
-        } else {
-            explorerRedirectToDiscover(playlistId);
-        }
-    } catch (err) {
-        showToast(`Discovery failed: ${err.message}`, 'error');
-        if (btn) { btn.disabled = false; btn.textContent = 'Discover'; }
-    }
-}
-
-function _explorerStartDiscoveryPoller(playlistId) {
-    // Poll every 5s to refresh playlist cards until this playlist is ready
-    if (_explorer._discoveryPoller) clearInterval(_explorer._discoveryPoller);
-    _explorer._discoveryPoller = setInterval(async () => {
-        // Stop polling if Explorer page isn't active
-        if (!document.getElementById('playlist-explorer-page')?.classList.contains('active')) {
-            clearInterval(_explorer._discoveryPoller);
-            _explorer._discoveryPoller = null;
-            return;
-        }
-        // Check if the mirrored playlist state shows discovery is done
-        const tempHash = `mirrored_${playlistId}`;
-        const state = youtubePlaylistStates[tempHash];
-        const isDone = state && (state.phase === 'discovered' || state.phase === 'sync_complete');
-
-        // Refresh cards from API
-        await _explorerLoadPlaylists();
-
-        // Stop polling once discovery is complete
-        if (isDone) {
-            clearInterval(_explorer._discoveryPoller);
-            _explorer._discoveryPoller = null;
-        }
-    }, 5000);
-}
-
-function explorerSetMode(mode) {
-    _explorer.mode = mode;
-    document.querySelectorAll('.explorer-mode-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.mode === mode);
-    });
-}
-
-async function explorerBuildTree() {
-    const playlistId = _explorer.playlistId;
-    if (!playlistId) {
-        showToast('Select a playlist first', 'error');
-        return;
-    }
-    if (_explorer.building) return;
-
-    _explorer.building = true;
-    _explorer.artists = [];
-    _explorer.selectedAlbums.clear();
-    _explorer.expandedArtists.clear();
-    _explorer.playlistId = playlistId;
-
-    const tree = document.getElementById('explorer-tree');
-    const svg = document.getElementById('explorer-svg');
-    const progress = document.getElementById('explorer-progress');
-    const actionBar = document.getElementById('explorer-action-bar');
-    const empty = document.getElementById('explorer-empty');
-    const buildBtn = document.getElementById('explorer-build-btn');
-
-    if (empty) empty.style.display = 'none';
-    if (actionBar) actionBar.style.display = 'none';
-    if (progress) progress.style.display = 'flex';
-    if (buildBtn) { buildBtn.disabled = true; buildBtn.textContent = 'Building...'; }
-    // Clear tree but preserve the SVG element (it lives inside the tree)
-    tree.innerHTML = '<svg class="explorer-svg" id="explorer-svg"></svg>';
-    _explorer._zoom = 1;
-    tree.style.transform = '';
-
-    try {
-        const response = await fetch('/api/playlist-explorer/build-tree', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ playlist_id: parseInt(playlistId), mode: _explorer.mode })
-        });
-
-        if (!response.ok) {
-            const err = await response.json();
-            throw new Error(err.error || 'Failed to build tree');
-        }
-
-        // Stream NDJSON
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-        let artistCount = 0;
-        let totalArtists = 0;
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-            buffer += decoder.decode(value, { stream: true });
-            const lines = buffer.split('\n');
-            buffer = lines.pop();
-
-            for (const line of lines) {
-                if (!line.trim()) continue;
-                try {
-                    const data = JSON.parse(line);
-
-                    if (data.type === 'meta') {
-                        _explorer.meta = data;
-                        totalArtists = data.total_artists;
-                        _explorerRenderRoot(data);
-                    } else if (data.type === 'artist') {
-                        artistCount++;
-                        _explorer.artists.push(data);
-                        _explorerRenderArtistNode(data, artistCount);
-
-                        // Lines drawn after streaming completes (not during — flex reflow drifts positions)
-
-                        // Update progress
-                        const pct = Math.round((artistCount / totalArtists) * 100);
-                        const fill = document.getElementById('explorer-progress-fill');
-                        const text = document.getElementById('explorer-progress-text');
-                        if (fill) fill.style.width = pct + '%';
-                        if (text) text.textContent = `Discovering artists... ${artistCount} of ${totalArtists}`;
-                    } else if (data.type === 'complete') {
-                        // Done
-                    }
-                } catch (e) {
-                    console.warn('Explorer: failed to parse NDJSON line', e);
-                }
-            }
-        }
-
-        // Tree built — show action bar, hide progress
-        if (actionBar) actionBar.style.display = 'flex';
-        if (progress) progress.style.display = 'none';
-        _explorerUpdateCount();
-
-        // Mark playlist as explored (server persists via explored_at; update local copy too)
-        const exploredPl = _explorer._playlists.find(p => p.id === playlistId);
-        if (exploredPl) {
-            exploredPl.explored_at = new Date().toISOString();
-            // Update card badge without full re-render
-            const card = document.querySelector(`.explorer-picker-card[data-id="${playlistId}"]`);
-            if (card) {
-                card.classList.add('explored');
-                const oldBadge = card.querySelector('.explorer-picker-card-badge');
-                const badgeHTML = '<div class="explorer-picker-card-badge explored" title="Already explored">&#10003;</div>';
-                if (oldBadge) {
-                    oldBadge.outerHTML = badgeHTML;
-                } else {
-                    // Insert badge into the name row
-                    const nameRow = card.querySelector('.explorer-picker-card-name-row');
-                    if (nameRow) {
-                        nameRow.insertAdjacentHTML('beforeend', badgeHTML);
-                    }
-                }
-                // Remove discover button if present (no longer needed)
-                const discoverBtn = card.querySelector('.explorer-picker-card-actions');
-                if (discoverBtn) discoverBtn.remove();
-            }
-        }
-
-        // Draw all connections now that the tree is stable
-        setTimeout(() => _explorerRedrawAllConnections(true), 100);
-
-    } catch (err) {
-        showToast('Explorer: ' + err.message, 'error');
-        if (empty) { empty.style.display = 'flex'; }
-        if (progress) progress.style.display = 'none';
-    } finally {
-        _explorer.building = false;
-        if (buildBtn) { buildBtn.disabled = false; buildBtn.textContent = 'Explore'; }
-    }
-}
-
-function _explorerRenderRoot(meta) {
-    const tree = document.getElementById('explorer-tree');
-    const rootHtml = `
-        <div class="explorer-tier explorer-tier-root">
-            <div class="explorer-node explorer-node-root" id="explorer-root">
-                <div class="explorer-node-glow"></div>
-                ${meta.playlist_image
-            ? `<img class="explorer-node-img" src="${meta.playlist_image}" alt="">`
-            : '<div class="explorer-node-img-placeholder">&#9835;</div>'
-        }
-                <div class="explorer-node-label">
-                    <div class="explorer-node-label-sub">SOURCE</div>
-                    <div class="explorer-node-label-main">${meta.playlist_name}</div>
-                    <div class="explorer-node-label-meta">${meta.total_tracks} tracks &middot; ${meta.total_artists} artists</div>
-                </div>
-            </div>
-        </div>
-        <div class="explorer-artist-tiers" id="explorer-artist-tiers"></div>
-    `;
-    tree.insertAdjacentHTML('afterbegin', rootHtml);
-    _explorer._artistRowSizes = []; // Track row capacities: [2, 3, 4, ...]
-    _explorer._artistCount = 0;
-    _explorer._currentRowIndex = 0;
-}
-
-function _explorerGetOrCreateRow() {
-    const container = document.getElementById('explorer-artist-tiers');
-    if (!container) return null;
-
-    // Determine row sizes: 2, 3, 4, 5... (tree shape)
-    const rowCapacity = _explorer._currentRowIndex + 2;
-    const existingRows = container.querySelectorAll('.explorer-tier-artists');
-    let currentRow = existingRows[existingRows.length - 1];
-
-    if (!currentRow || currentRow.children.length >= (_explorer._currentRowIndex + 2)) {
-        // Need a new row
-        _explorer._currentRowIndex = existingRows.length;
-        const newRow = document.createElement('div');
-        newRow.className = 'explorer-tier explorer-tier-artists';
-        container.appendChild(newRow);
-        return newRow;
-    }
-    return currentRow;
-}
-
-function _explorerRenderArtistNode(artist, index) {
-    const row = _explorerGetOrCreateRow();
-    if (!row) return;
-
-    _explorer._artistCount++;
-    const albumCount = artist.albums ? artist.albums.length : 0;
-    const safeKey = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
-    const hasError = !!artist.error;
-
-    const html = `
-        <div class="explorer-branch" id="explorer-branch-${safeKey}" style="--enter-delay: ${(index % 5) * 0.1}s">
-            <div class="explorer-node explorer-node-artist ${hasError ? 'error' : ''}"
-                 id="explorer-node-${safeKey}" data-key="${safeKey}"
-                 onclick="${hasError || albumCount === 0 ? '' : `explorerToggleArtist('${safeKey}')`}">
-                ${artist.image_url
-            ? `<img class="explorer-node-img" src="${artist.image_url}" alt="" loading="lazy">`
-            : ''
-        }
-                <div class="explorer-node-label">
-                    <div class="explorer-node-label-main">${artist.name || 'Unknown'}</div>
-                    <div class="explorer-node-label-meta">${hasError ? 'Not found' : albumCount + ' album' + (albumCount !== 1 ? 's' : '')}</div>
-                </div>
-                ${!hasError && albumCount > 0 ? '<div class="explorer-node-expand-hint">&#9662;</div>' : ''}
-                ${hasError ? '<div class="explorer-node-error-ring"></div>' : ''}
-            </div>
-            <div class="explorer-children" id="explorer-children-${safeKey}"></div>
-        </div>
-    `;
-    row.insertAdjacentHTML('beforeend', html);
-}
-
-function explorerToggleArtist(key) {
-    const children = document.getElementById(`explorer-children-${key}`);
-    const node = document.getElementById(`explorer-node-${key}`);
-    if (!children || !node) return;
-
-    const isExpanded = _explorer.expandedArtists.has(key);
-    if (isExpanded) {
-        _explorer.expandedArtists.delete(key);
-        children.innerHTML = '';
-        node.classList.remove('expanded');
-    } else {
-        _explorer.expandedArtists.add(key);
-        node.classList.add('expanded');
-
-        const artist = _explorer.artists.find(a => (a.name || '').replace(/[^a-zA-Z0-9]/g, '_') === key);
-        if (artist && artist.albums) {
-            const albumsHtml = artist.albums.map((album, i) => {
-                const id = album.spotify_id || `${key}_${i}`;
-                const selected = _explorer.selectedAlbums.has(id);
-                const owned = album.owned;
-                const inPlaylist = album.in_playlist;
-
-                const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
-                return `
-                    <div class="explorer-branch" style="--enter-delay: ${i * 0.06}s">
-                        <div class="explorer-node explorer-node-album ${selected ? 'selected' : ''} ${owned ? 'owned' : ''} ${inPlaylist ? 'in-playlist' : ''}"
-                             data-id="${id}" data-key="${id}"
-                             onclick="explorerToggleAlbum('${id}'); event.stopPropagation();"
-                             title="${(album.title || '').replace(/"/g, '&quot;')}\n${album.year || ''} · ${typeLabel} · ${album.track_count || '?'} tracks${owned ? '\n✓ Already in library' : ''}${inPlaylist ? '\n♫ Track from this playlist' : ''}\nClick to select · Double-click for tracklist">
-                            ${album.image_url
-                        ? `<img class="explorer-node-img" src="${album.image_url}" alt="" loading="lazy">`
-                        : ''
-                    }
-                            <div class="explorer-node-label">
-                                <div class="explorer-node-label-main">${album.title || 'Unknown'}</div>
-                                <div class="explorer-node-label-meta">${album.year || ''} &middot; ${album.track_count || '?'} tracks</div>
-                            </div>
-                            <div class="explorer-node-select ${selected ? 'active' : ''}">
-                                <svg viewBox="0 0 20 20"><polyline points="4 10 8 14 16 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                            </div>
-                            ${owned ? '<div class="explorer-node-badge-float owned">Owned</div>' : ''}
-                            ${inPlaylist ? '<div class="explorer-node-badge-float playlist">♫</div>' : ''}
-                        </div>
-                        <div class="explorer-children" id="explorer-tracks-${id}"></div>
-                    </div>
-                `;
-            }).join('');
-            children.innerHTML = albumsHtml;
-        }
-    }
-
-    // Redraw SVG after DOM settles
-    requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
-}
-
-async function explorerExpandAlbumTracks(spotifyAlbumId, nodeKey) {
-    if (!spotifyAlbumId) return;
-    const tracksContainer = document.getElementById(`explorer-tracks-${nodeKey}`);
-    if (!tracksContainer) return;
-
-    // Toggle: if already has content, collapse
-    if (tracksContainer.innerHTML) {
-        tracksContainer.innerHTML = '';
-        requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/playlist-explorer/album-tracks/${spotifyAlbumId}`);
-        const data = await response.json();
-        if (!data.success || !data.tracks) return;
-
-        const tracksHtml = data.tracks.map((t, i) => `
-            <div class="explorer-branch" style="--enter-delay: ${i * 0.03}s">
-                <div class="explorer-node explorer-node-track">
-                    <div class="explorer-node-label">
-                        <div class="explorer-node-label-main">${t.track_number}. ${t.name}</div>
-                        <div class="explorer-node-label-meta">${_formatDuration(t.duration_ms)}</div>
-                    </div>
-                </div>
-            </div>
-        `).join('');
-        tracksContainer.innerHTML = tracksHtml;
-        requestAnimationFrame(() => setTimeout(() => _explorerRedrawAllConnections(), 50));
-    } catch (e) {
-        console.error('Failed to load album tracks:', e);
-    }
-}
-
-function _formatDuration(ms) {
-    if (!ms) return '';
-    const m = Math.floor(ms / 60000);
-    const s = Math.floor((ms % 60000) / 1000);
-    return `${m}:${s.toString().padStart(2, '0')}`;
-}
-
-// Track double-click vs single-click on album nodes
-let _explorerClickTimer = null;
-let _explorerLastClickId = null;
-
-function explorerToggleAlbum(id) {
-    // Double-click detection: expand tracks
-    if (_explorerLastClickId === id && _explorerClickTimer) {
-        clearTimeout(_explorerClickTimer);
-        _explorerClickTimer = null;
-        _explorerLastClickId = null;
-        // Double-click — expand tracks
-        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
-        const spotifyId = id.includes('_') ? '' : id; // Only real IDs, not fallback keys
-        explorerExpandAlbumTracks(spotifyId, id);
-        return;
-    }
-
-    _explorerLastClickId = id;
-    _explorerClickTimer = setTimeout(() => {
-        _explorerClickTimer = null;
-        _explorerLastClickId = null;
-
-        // Single click — toggle selection
-        if (_explorer.selectedAlbums.has(id)) {
-            _explorer.selectedAlbums.delete(id);
-        } else {
-            _explorer.selectedAlbums.add(id);
-        }
-
-        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
-        if (node) {
-            const isSelected = _explorer.selectedAlbums.has(id);
-            node.classList.toggle('selected', isSelected);
-            const check = node.querySelector('.explorer-node-select');
-            if (check) check.classList.toggle('active', isSelected);
-        }
-
-        _explorerUpdateCount();
-    }, 250);
-
-    _explorerUpdateCount();
-}
-
-function explorerSelectAll() {
-    _explorer.artists.forEach(a => {
-        (a.albums || []).forEach(album => {
-            if (album.spotify_id && !album.owned) _explorer.selectedAlbums.add(album.spotify_id);
-        });
-    });
-    _explorerRefreshAllCards();
-    _explorerUpdateCount();
-}
-
-function explorerDeselectAll() {
-    _explorer.selectedAlbums.clear();
-    _explorerRefreshAllCards();
-    _explorerUpdateCount();
-}
-
-function _explorerRefreshAllCards() {
-    document.querySelectorAll('.explorer-node-album').forEach(node => {
-        const id = node.dataset.id;
-        const selected = _explorer.selectedAlbums.has(id);
-        node.classList.toggle('selected', selected);
-        const check = node.querySelector('.explorer-node-select');
-        if (check) check.classList.toggle('active', selected);
-    });
-}
-
-function _explorerUpdateCount() {
-    const el = document.getElementById('explorer-selection-count');
-    const count = _explorer.selectedAlbums.size;
-    if (el) el.textContent = `${count} album${count !== 1 ? 's' : ''} selected`;
-    _explorerRefreshArtistIndicators();
-}
-
-function _explorerRefreshArtistIndicators() {
-    // For each artist, check if any of their albums are selected — add visual indicator
-    _explorer.artists.forEach(artist => {
-        const key = (artist.name || '').replace(/[^a-zA-Z0-9]/g, '_');
-        const node = document.getElementById(`explorer-node-${key}`);
-        if (!node) return;
-        const hasSelected = (artist.albums || []).some(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
-        node.classList.toggle('has-selection', hasSelected);
-    });
-}
-
-function explorerAddToWishlist() {
-    if (_explorer.selectedAlbums.size === 0) {
-        showToast('No albums selected', 'error');
-        return;
-    }
-
-    // Group selected albums by artist with full metadata
-    const artistSections = [];
-    for (const artist of _explorer.artists) {
-        const artistId = artist.artist_id || artist.spotify_id;
-        if (!artist.albums) continue;
-        const selected = artist.albums.filter(a => a.spotify_id && _explorer.selectedAlbums.has(a.spotify_id));
-        if (selected.length === 0) continue;
-        artistSections.push({ artistId, name: artist.name, image: artist.image_url, albums: selected });
-    }
-
-    if (artistSections.length === 0) { showToast('No valid albums selected', 'error'); return; }
-
-    // Build confirmation modal (mirrors discog-modal pattern)
-    const overlay = document.createElement('div');
-    overlay.className = 'discog-modal-overlay';
-    overlay.id = 'explorer-wishlist-overlay';
-
-    const totalAlbums = artistSections.reduce((s, a) => s + a.albums.length, 0);
-    const totalTracks = artistSections.reduce((s, a) => s + a.albums.reduce((t, al) => t + (al.track_count || 0), 0), 0);
-
-    let cardsHtml = '';
-    artistSections.forEach(section => {
-        cardsHtml += `<div class="discog-section-header">${_esc(section.name)}</div>`;
-        section.albums.forEach((album, i) => {
-            const year = album.year || '';
-            const typeLabel = album.album_type === 'single' ? 'Single' : album.album_type === 'ep' ? 'EP' : 'Album';
-            cardsHtml += `
-                <label class="discog-card ${album.owned ? 'owned' : ''}" data-type="${album.album_type || 'album'}" data-artist-id="${section.artistId}" style="animation-delay:${i * 0.03}s">
-                    <input type="checkbox" class="discog-card-cb" data-album-id="${album.spotify_id}" data-tracks="${album.track_count || 0}" ${!album.owned ? 'checked' : ''} onchange="_explorerWishlistUpdateCount()">
-                    <div class="discog-card-art">
-                        ${album.image_url ? `<img src="${album.image_url}" alt="" loading="lazy">` : '<div class="discog-card-art-placeholder">&#9835;</div>'}
-                        ${album.owned ? '<span class="discog-card-status">&#10003;</span>' : ''}
-                    </div>
-                    <div class="discog-card-info">
-                        <div class="discog-card-title">${_esc(album.title || 'Unknown')}</div>
-                        <div class="discog-card-meta">${year}${year ? ' · ' : ''}${typeLabel} · ${album.track_count || '?'} tracks</div>
-                    </div>
-                    <div class="discog-card-check"></div>
-                </label>
-            `;
-        });
-    });
-
-    overlay.innerHTML = `
-        <div class="discog-modal">
-            <div class="discog-modal-hero" style="background-image:url('${artistSections[0]?.image || ''}')">
-                <div class="discog-modal-hero-overlay"></div>
-                <div class="discog-modal-hero-content">
-                    <h2 class="discog-modal-title">Add to Wishlist</h2>
-                    <p class="discog-modal-artist">${artistSections.length} artist${artistSections.length !== 1 ? 's' : ''} · ${totalAlbums} releases</p>
-                </div>
-                <button class="discog-modal-close" onclick="document.getElementById('explorer-wishlist-overlay')?.remove()">&times;</button>
-            </div>
-            <div class="discog-filter-bar">
-                <div class="discog-filters">
-                    <button class="discog-filter active" data-type="album" onclick="_explorerWishlistToggleFilter(this)">Albums</button>
-                    <button class="discog-filter active" data-type="ep" onclick="_explorerWishlistToggleFilter(this)">EPs</button>
-                    <button class="discog-filter active" data-type="single" onclick="_explorerWishlistToggleFilter(this)">Singles</button>
-                </div>
-                <div class="discog-select-actions">
-                    <button class="discog-select-btn" onclick="document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb').forEach(c=>{c.checked=true}); _explorerWishlistUpdateCount()">Select All</button>
-                    <button class="discog-select-btn" onclick="document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb').forEach(c=>{c.checked=false}); _explorerWishlistUpdateCount()">Deselect</button>
-                </div>
-            </div>
-            <div class="discog-grid" id="explorer-wishlist-grid">${cardsHtml}</div>
-            <div class="discog-progress" id="explorer-wishlist-progress" style="display:none;"></div>
-            <div class="discog-footer" id="explorer-wishlist-footer">
-                <div class="discog-footer-info" id="explorer-wishlist-info"></div>
-                <div class="discog-footer-actions">
-                    <button class="discog-cancel-btn" onclick="document.getElementById('explorer-wishlist-overlay')?.remove()">Cancel</button>
-                    <button class="discog-submit-btn" id="explorer-wishlist-submit">
-                        <span class="discog-submit-icon">&#11015;</span>
-                        <span id="explorer-wishlist-submit-text">Add to Wishlist</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    `;
-
-    document.body.appendChild(overlay);
-    requestAnimationFrame(() => overlay.classList.add('visible'));
-    _explorerWishlistUpdateCount();
-
-    document.getElementById('explorer-wishlist-submit')?.addEventListener('click', () => _explorerWishlistSubmit(artistSections));
-}
-
-function _explorerWishlistToggleFilter(btn) {
-    btn.classList.toggle('active');
-    const type = btn.dataset.type;
-    // Scoped to explorer wishlist modal only
-    document.querySelectorAll(`#explorer-wishlist-overlay .discog-card[data-type="${type}"]`).forEach(card => {
-        card.style.display = btn.classList.contains('active') ? '' : 'none';
-    });
-    _explorerWishlistUpdateCount();
-}
-
-function _explorerWishlistUpdateCount() {
-    const checked = document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked');
-    let releases = 0, tracks = 0;
-    checked.forEach(cb => {
-        if (cb.closest('.discog-card').style.display !== 'none') {
-            releases++;
-            tracks += parseInt(cb.dataset.tracks) || 0;
-        }
-    });
-    const info = document.getElementById('explorer-wishlist-info');
-    const btn = document.getElementById('explorer-wishlist-submit-text');
-    if (info) info.textContent = `${releases} release${releases !== 1 ? 's' : ''} · ${tracks} tracks`;
-    if (btn) btn.textContent = releases > 0 ? `Add ${releases} to Wishlist` : 'Select releases';
-    const submitBtn = document.getElementById('explorer-wishlist-submit');
-    if (submitBtn) submitBtn.disabled = releases === 0;
-}
-
-async function _explorerWishlistSubmit(artistSections) {
-    const grid = document.getElementById('explorer-wishlist-grid');
-    const progress = document.getElementById('explorer-wishlist-progress');
-    const filterBar = document.querySelector('#explorer-wishlist-overlay .discog-filter-bar');
-    const submitBtn = document.getElementById('explorer-wishlist-submit');
-
-    // Collect checked albums grouped by artist
-    const byArtist = {};
-    document.querySelectorAll('#explorer-wishlist-overlay .discog-card-cb:checked').forEach(cb => {
-        if (cb.closest('.discog-card').style.display === 'none') return;
-        const card = cb.closest('.discog-card');
-        const artistId = card.dataset.artistId;
-        const albumId = cb.dataset.albumId;
-        const title = card.querySelector('.discog-card-title')?.textContent || '';
-        const img = card.querySelector('.discog-card-art img')?.src || '';
-        if (!byArtist[artistId]) byArtist[artistId] = { albums: [], name: '' };
-        byArtist[artistId].albums.push({ id: albumId, title, img, tracks: parseInt(cb.dataset.tracks) || 0 });
-    });
-
-    // Fill in artist names
-    artistSections.forEach(s => { if (byArtist[s.artistId]) byArtist[s.artistId].name = s.name; });
-
-    // Switch to progress view
-    if (grid) grid.style.display = 'none';
-    if (filterBar) filterBar.style.display = 'none';
-    if (submitBtn) submitBtn.style.display = 'none';
-    if (progress) {
-        progress.style.display = '';
-        progress.innerHTML = '';
-        for (const [artistId, data] of Object.entries(byArtist)) {
-            data.albums.forEach(album => {
-                const item = document.createElement('div');
-                item.className = 'discog-progress-item active';
-                item.id = `explorer-prog-${album.id}`;
-                item.innerHTML = `
-                    <div class="discog-prog-art">${album.img ? `<img src="${album.img}">` : '&#9835;'}</div>
-                    <div class="discog-prog-info">
-                        <div class="discog-prog-title">${_esc(album.title)}</div>
-                        <div class="discog-prog-status">Waiting...</div>
-                    </div>
-                    <div class="discog-prog-icon"><div class="discog-spinner"></div></div>
-                `;
-                progress.appendChild(item);
-            });
-        }
-    }
-
-    const info = document.getElementById('explorer-wishlist-info');
-    if (info) info.textContent = 'Processing...';
-
-    let totalAdded = 0;
-
-    for (const [artistId, data] of Object.entries(byArtist)) {
-        // Sort by track count descending (deluxe editions first) BEFORE extracting IDs
-        data.albums.sort((a, b) => b.tracks - a.tracks);
-        const albumIds = data.albums.map(a => a.id);
-
-        try {
-            const response = await fetch(`/api/artist/${artistId}/download-discography`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ album_ids: albumIds, artist_name: data.name })
-            });
-
-            const reader = response.body.getReader();
-            const decoder = new TextDecoder();
-            let buffer = '';
-            while (true) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                buffer += decoder.decode(value, { stream: true });
-                const lines = buffer.split('\n');
-                buffer = lines.pop();
-                for (const line of lines) {
-                    if (!line.trim()) continue;
-                    try {
-                        const result = JSON.parse(line);
-                        if (result.status === 'complete') continue; // Summary line, skip
-                        const item = document.getElementById(`explorer-prog-${result.album_id}`);
-                        if (item) {
-                            const statusEl = item.querySelector('.discog-prog-status');
-                            const iconEl = item.querySelector('.discog-prog-icon');
-                            if (result.status === 'done') {
-                                const added = result.tracks_added || 0;
-                                const skipped = result.tracks_skipped || 0;
-                                totalAdded += added;
-                                if (statusEl) statusEl.textContent = `Added ${added} track${added !== 1 ? 's' : ''}${skipped > 0 ? `, ${skipped} skipped` : ''}`;
-                                if (iconEl) iconEl.innerHTML = '<span style="color:#4CAF50">&#10003;</span>';
-                                item.classList.remove('active');
-                                item.classList.add('done');
-                            } else if (result.status === 'error') {
-                                if (statusEl) statusEl.textContent = result.message || 'Error';
-                                if (iconEl) iconEl.innerHTML = '<span style="color:#ff4757">&#10007;</span>';
-                                item.classList.remove('active');
-                                item.classList.add('error');
-                            }
-                        }
-                    } catch (e) { }
-                }
-            }
-        } catch (e) {
-            console.error(`Explorer wishlist: failed for ${data.name}:`, e);
-        }
-    }
-
-    if (info) info.textContent = `Done — ${totalAdded} tracks added to wishlist`;
-    // Change cancel button label to "Close"
-    const cancelBtn = document.querySelector('#explorer-wishlist-overlay .discog-cancel-btn');
-    if (cancelBtn) cancelBtn.textContent = 'Close';
-    showToast(`Added ${totalAdded} tracks to wishlist`, 'success');
-
-    // Mark albums as added on the tree
-    _explorer.selectedAlbums.forEach(id => {
-        const node = document.querySelector(`.explorer-node-album[data-id="${id}"]`);
-        if (node) { node.classList.add('added'); node.classList.remove('selected'); }
-    });
-    _explorer.selectedAlbums.clear();
-    _explorerUpdateCount();
-    _explorerRefreshArtistIndicators();
-}
-
-function _explorerEnsureDefs() {
-    const svg = document.getElementById('explorer-svg');
-    if (!svg || svg.querySelector('defs')) return;
-    // Read accent color from CSS custom property
-    const accentRgb = getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '100,200,255';
-    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-    defs.innerHTML = `
-        <linearGradient id="explorer-grad-root" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color="rgba(${accentRgb}, 0.25)"/>
-            <stop offset="100%" stop-color="rgba(${accentRgb}, 0.06)"/>
-        </linearGradient>
-        <linearGradient id="explorer-grad-album" x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stop-color="rgba(${accentRgb}, 0.15)"/>
-            <stop offset="100%" stop-color="rgba(${accentRgb}, 0.04)"/>
-        </linearGradient>
-    `;
-    svg.appendChild(defs);
-}
-
-function _explorerDrawConnectionToArtist(artistIndex) {
-    // Incremental: draw ONLY this artist's connection. Don't clear existing.
-    // Flex reflow within the current row may shift siblings, but the visual drift
-    // is minor and gets corrected by the final redraw after streaming completes.
-    const svg = document.getElementById('explorer-svg');
-    const root = document.getElementById('explorer-root');
-    if (!svg || !root) return;
-
-    _explorerEnsureDefs();
-    _explorerSizeSvg();
-
-    const artistNodes = document.querySelectorAll('.explorer-node-artist');
-    const artistNode = artistNodes[artistIndex];
-    if (!artistNode) return;
-
-    const rc = _explorerGetPos(root);
-    const ac = _explorerGetPos(artistNode);
-    _explorerDrawCurve(svg, rc.cx, rc.bottom, ac.cx, ac.top, 'root', true);
-}
-
-function _explorerRedrawAllConnections(animate = false) {
-    const svg = document.getElementById('explorer-svg');
-    const root = document.getElementById('explorer-root');
-    if (!svg || !root) return;
-
-    _explorerEnsureDefs();
-    _explorerSizeSvg();
-
-    // Clear existing lines but keep defs
-    svg.querySelectorAll('path').forEach(p => p.remove());
-
-    const rc = _explorerGetPos(root);
-
-    document.querySelectorAll('.explorer-node-artist').forEach(artistNode => {
-        const ac = _explorerGetPos(artistNode);
-        _explorerDrawCurve(svg, rc.cx, rc.bottom, ac.cx, ac.top, 'root', animate);
-
-        if (artistNode.classList.contains('expanded')) {
-            const branch = artistNode.closest('.explorer-branch');
-            if (!branch) return;
-            branch.querySelectorAll(':scope > .explorer-children > .explorer-branch > .explorer-node-album').forEach(albumNode => {
-                const alc = _explorerGetPos(albumNode);
-                _explorerDrawCurve(svg, ac.cx, ac.bottom, alc.cx, alc.top, 'album', animate);
-
-                const albumBranch = albumNode.closest('.explorer-branch');
-                if (albumBranch) {
-                    albumBranch.querySelectorAll(':scope > .explorer-children > .explorer-branch > .explorer-node-track').forEach(trackNode => {
-                        const tc = _explorerGetPos(trackNode);
-                        _explorerDrawCurve(svg, alc.cx, alc.bottom, tc.cx, tc.top, 'track', animate);
-                    });
-                }
-            });
-        }
-    });
-}
-
-function _explorerSizeSvg() {
-    const svg = document.getElementById('explorer-svg');
-    const tree = document.getElementById('explorer-tree');
-    if (!svg || !tree) return;
-    // SVG is inside the tree. Use scrollWidth/scrollHeight which are unscaled.
-    // Add padding to ensure lines near edges aren't clipped.
-    const w = Math.max(tree.scrollWidth, tree.offsetWidth) + 40;
-    const h = Math.max(tree.scrollHeight, tree.offsetHeight) + 40;
-    svg.setAttribute('width', w);
-    svg.setAttribute('height', h);
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-}
-
-function _explorerGetPos(el) {
-    // SVG is inside the tree — positions are relative to tree, unscaled
-    const tree = document.getElementById('explorer-tree');
-    if (!tree) return { cx: 0, top: 0, bottom: 0 };
-    const tRect = tree.getBoundingClientRect();
-    const r = el.getBoundingClientRect();
-    const scale = _explorer._zoom || 1;
-    // getBoundingClientRect returns scaled coords; divide by scale to get unscaled tree-space coords
-    return {
-        cx: (r.left + r.width / 2 - tRect.left) / scale,
-        top: (r.top - tRect.top) / scale,
-        bottom: (r.bottom - tRect.top) / scale,
-    };
-}
-
-function _explorerDrawCurve(svg, x1, y1, x2, y2, type, animate) {
-    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    const midY = y1 + (y2 - y1) * 0.45;
-    path.setAttribute('d', `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`);
-
-    if (type === 'root') {
-        path.setAttribute('stroke', 'url(#explorer-grad-root)');
-        path.setAttribute('stroke-width', '1.5');
-    } else if (type === 'album') {
-        path.setAttribute('stroke', 'url(#explorer-grad-album)');
-        path.setAttribute('stroke-width', '1');
-    } else {
-        path.setAttribute('stroke', 'rgba(255,255,255,0.05)');
-        path.setAttribute('stroke-width', '0.8');
-    }
-    path.setAttribute('fill', 'none');
-
-    svg.appendChild(path);
-
-    if (animate) {
-        const len = path.getTotalLength();
-        path.setAttribute('class', 'explorer-line explorer-line-animated');
-        path.style.strokeDasharray = len;
-        path.style.strokeDashoffset = len;
-    } else {
-        path.setAttribute('class', 'explorer-line');
-    }
-}
-
-// ── Zoom & Pan ──
-_explorer._zoom = 1;
-_explorer._panX = 0;
-_explorer._panY = 0;
-_explorer._isPanning = false;
-_explorer._panStartX = 0;
-_explorer._panStartY = 0;
-_explorer._panStartScrollX = 0;
-_explorer._panStartScrollY = 0;
-
-function _explorerApplyTransform() {
-    const tree = document.getElementById('explorer-tree');
-    if (tree) {
-        tree.style.transform = `scale(${_explorer._zoom})`;
-        tree.style.transformOrigin = 'top center';
-    }
-    _explorerSizeSvg();
-    requestAnimationFrame(() => _explorerRedrawAllConnections());
-}
-
-function explorerZoom(delta) {
-    _explorer._zoom = Math.max(0.2, Math.min(3, _explorer._zoom + delta));
-    _explorerApplyTransform();
-}
-
-function explorerFitToView() {
-    const viewport = document.getElementById('explorer-viewport');
-    const tree = document.getElementById('explorer-tree');
-    if (!viewport || !tree) return;
-
-    // Reset zoom to measure natural size
-    _explorer._zoom = 1;
-    tree.style.transform = 'scale(1)';
-
-    requestAnimationFrame(() => {
-        const treeW = tree.scrollWidth;
-        const treeH = tree.scrollHeight;
-        const vpW = viewport.clientWidth - 40;
-        const vpH = viewport.clientHeight - 40;
-
-        if (treeW > 0 && treeH > 0) {
-            _explorer._zoom = Math.min(vpW / treeW, vpH / treeH, 1.5);
-            _explorer._zoom = Math.max(0.2, Math.min(3, _explorer._zoom));
-        }
-
-        _explorerApplyTransform();
-        viewport.scrollTop = 0;
-        viewport.scrollLeft = Math.max(0, (tree.scrollWidth * _explorer._zoom - vpW) / 2);
-    });
-}
-
-// Scroll wheel zoom (no modifier needed inside viewport)
-document.addEventListener('wheel', (e) => {
-    const viewport = document.getElementById('explorer-viewport');
-    if (!viewport || !viewport.contains(e.target)) return;
-    // Check if we're on the explorer page
-    const page = document.getElementById('playlist-explorer-page');
-    if (!page || !page.classList.contains('active')) return;
-
-    e.preventDefault();
-    const step = e.deltaY > 0 ? -0.08 : 0.08;
-    explorerZoom(step);
-}, { passive: false });
-
-// Middle-click / right-click drag to pan
-document.addEventListener('mousedown', (e) => {
-    const viewport = document.getElementById('explorer-viewport');
-    if (!viewport || !viewport.contains(e.target)) return;
-    // Middle click (button 1) or right click (button 2)
-    if (e.button !== 1 && e.button !== 2) return;
-
-    e.preventDefault();
-    _explorer._isPanning = true;
-    _explorer._panStartX = e.clientX;
-    _explorer._panStartY = e.clientY;
-    _explorer._panStartScrollX = viewport.scrollLeft;
-    _explorer._panStartScrollY = viewport.scrollTop;
-    viewport.style.cursor = 'grabbing';
-});
-
-document.addEventListener('mousemove', (e) => {
-    if (!_explorer._isPanning) return;
-    const viewport = document.getElementById('explorer-viewport');
-    if (!viewport) return;
-    const dx = e.clientX - _explorer._panStartX;
-    const dy = e.clientY - _explorer._panStartY;
-    viewport.scrollLeft = _explorer._panStartScrollX - dx;
-    viewport.scrollTop = _explorer._panStartScrollY - dy;
-});
-
-document.addEventListener('mouseup', (e) => {
-    if (!_explorer._isPanning) return;
-    _explorer._isPanning = false;
-    const viewport = document.getElementById('explorer-viewport');
-    if (viewport) viewport.style.cursor = '';
-});
-
-// Suppress context menu on right-click inside viewport (for panning)
-document.addEventListener('contextmenu', (e) => {
-    const viewport = document.getElementById('explorer-viewport');
-    if (viewport && viewport.contains(e.target)) {
-        e.preventDefault();
-    }
-});
-
-// Debounced redraw on resize
-window.addEventListener('resize', () => {
-    if (_explorer.artists.length === 0) return;
-    clearTimeout(_explorer._resizeTimer);
-    _explorer._resizeTimer = setTimeout(() => _explorerRedrawAllConnections(), 150);
-});
-
-
-// ==================================================================================
-// DASHBOARD — Recent Syncs Section
-// ==================================================================================
-
-// ==================================================================================
-// SERVER PLAYLIST MANAGER — Sync Page Server Tab
-// ==================================================================================
-
-let _serverPlaylists = [];
-let _serverEditorState = { playlistId: null, playlistName: '', tracks: [] };
-
-async function loadServerPlaylists() {
-    const container = document.getElementById('server-playlist-container');
-    const editor = document.getElementById('server-editor');
-    const btn = document.getElementById('server-refresh-btn');
-
-    if (editor) editor.style.display = 'none';
-    if (container) container.style.display = '';
-    if (btn) { btn.disabled = true; btn.textContent = '🔄 Loading...'; }
-
-    // Show skeleton loader
-    if (container) {
-        container.innerHTML = `<div class="server-pl-grid">${Array.from({ length: 6 }, (_, i) => `
-            <div class="server-pl-card server-pl-skeleton" style="animation-delay: ${i * 0.06}s">
-                <div class="server-pl-card-top">
-                    <div class="skeleton-box" style="width:44px;height:44px;border-radius:12px"></div>
-                    <div class="skeleton-box" style="width:28px;height:28px;border-radius:8px"></div>
-                </div>
-                <div class="server-pl-card-body">
-                    <div class="skeleton-box" style="width:${60 + Math.random() * 30}%;height:14px;border-radius:4px;margin-bottom:8px"></div>
-                    <div class="skeleton-box" style="width:40%;height:11px;border-radius:4px"></div>
-                </div>
-                <div class="server-pl-card-footer" style="border-top:1px solid rgba(255,255,255,0.05);padding-top:12px">
-                    <div class="skeleton-box" style="width:60px;height:10px;border-radius:3px"></div>
-                </div>
-            </div>`).join('')}</div>`;
-    }
-
-    try {
-        // Fetch server playlists, mirrored playlists, and sync history names in parallel
-        const [serverRes, mirroredRes, historyNamesRes] = await Promise.all([
-            fetch('/api/server/playlists'),
-            fetch('/api/mirrored-playlists'),
-            fetch('/api/sync/history/names'),
-        ]);
-        const data = await serverRes.json();
-        let mirroredAll = [];
-        try { mirroredAll = await mirroredRes.json(); } catch (_) { }
-        if (!Array.isArray(mirroredAll)) mirroredAll = [];
-        let historyNames = [];
-        try { historyNames = await historyNamesRes.json(); } catch (_) { }
-        if (!Array.isArray(historyNames)) historyNames = [];
-
-        if (!data.success || !data.playlists) {
-            if (container) container.innerHTML = `<div class="playlist-placeholder">${data.error || 'Could not load server playlists'}</div>`;
-            return;
-        }
-
-        // Separate synced vs non-synced playlists
-        const mirroredNames = new Set(mirroredAll.map(p => p.name.trim().toLowerCase()));
-        const syncedNames = new Set(historyNames.map(n => n.trim().toLowerCase()));
-        const synced = [];
-        const unsynced = [];
-        for (const pl of data.playlists) {
-            const key = pl.name.trim().toLowerCase();
-            if (mirroredNames.has(key) || syncedNames.has(key)) {
-                pl._synced = true;
-                synced.push(pl);
-            } else {
-                pl._synced = false;
-                unsynced.push(pl);
-            }
-        }
-
-        _serverPlaylists = [...synced, ...unsynced];
-        const title = document.getElementById('server-tab-title');
-        const serverName = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : '';
-        if (title) title.textContent = `Server Playlists (${serverName})`;
-
-        if (synced.length === 0 && unsynced.length === 0) {
-            if (container) container.innerHTML = '<div class="playlist-placeholder">No playlists found on your media server.</div>';
-            return;
-        }
-
-        // Server type icon SVG
-        const serverIcons = {
-            plex: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M11.643 0H4.68l7.679 12L4.68 24h6.963L19.32 12z"/></svg>',
-            jellyfin: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2C8.5 2 6 5.1 6 9c0 2.4 1.2 5.5 3.3 8.7.7 1 1.5 2 2.2 2.9.2.3.4.3.5.4.1 0 .3-.1.5-.4.7-.9 1.5-1.9 2.2-2.9C16.8 14.5 18 11.4 18 9c0-3.9-2.5-7-6-7z"/></svg>',
-            navidrome: '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>'
-        };
-        const sIcon = serverIcons[data.server_type] || serverIcons.plex;
-
-        function _renderPlCard(pl, i, isSynced) {
-            const hue = (i * 37 + 200) % 360;
-            const safeName = _esc(pl.name).replace(/'/g, "\\'");
-            const cardClass = isSynced ? 'server-pl-card' : 'server-pl-card server-pl-unsynced';
-            const action = isSynced ? 'Open Editor' : 'View Tracks';
-            return `
-            <div class="${cardClass}" onclick="openServerPlaylistEditor('${pl.id}', '${safeName}')" style="animation-delay: ${i * 0.04}s; --card-hue: ${hue}">
-                <div class="server-pl-card-glow"></div>
-                <div class="server-pl-card-top">
-                    <div class="server-pl-card-icon-wrap">
-                        <div class="server-pl-card-bars">
-                            <span></span><span></span><span></span><span></span>
-                        </div>
-                    </div>
-                    <div class="server-pl-card-badge">${sIcon}</div>
-                </div>
-                <div class="server-pl-card-body">
-                    <div class="server-pl-card-name">${_esc(pl.name)}</div>
-                    <div class="server-pl-card-meta">
-                        <span class="server-pl-track-count">${pl.track_count}</span> tracks
-                        ${isSynced ? '<span class="server-pl-synced-badge">Synced</span>' : ''}
-                    </div>
-                </div>
-                <div class="server-pl-card-footer">
-                    <span class="server-pl-card-action">${action}</span>
-                    <span class="server-pl-card-arrow">
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-                    </span>
-                </div>
-            </div>`;
-        }
-
-        let html = '';
-
-        if (synced.length > 0) {
-            html += `<div class="server-pl-section">
-                <div class="server-pl-section-header">
-                    <span class="server-pl-section-icon">&#128279;</span>
-                    <span class="server-pl-section-title">Synced Playlists</span>
-                    <span class="server-pl-section-count">${synced.length}</span>
-                </div>
-                <div class="server-pl-grid">${synced.map((pl, i) => _renderPlCard(pl, i, true)).join('')}</div>
-            </div>`;
-        }
-
-        if (unsynced.length > 0) {
-            html += `<div class="server-pl-section server-pl-section-unsynced">
-                <div class="server-pl-section-header">
-                    <span class="server-pl-section-icon">&#127925;</span>
-                    <span class="server-pl-section-title">Other Server Playlists</span>
-                    <span class="server-pl-section-count">${unsynced.length}</span>
-                </div>
-                <div class="server-pl-grid">${unsynced.map((pl, i) => _renderPlCard(pl, i + synced.length, false)).join('')}</div>
-            </div>`;
-        }
-
-        container.innerHTML = html;
-
-    } catch (e) {
-        if (container) container.innerHTML = `<div class="playlist-placeholder">Error: ${e.message}</div>`;
-    } finally {
-        if (btn) { btn.disabled = false; btn.textContent = '🔄 Refresh'; }
-    }
-}
-
-async function openServerPlaylistEditor(playlistId, playlistName) {
-    // Step 1: Look up mirrored playlists by name
-    let mirroredPlaylists = [];
-    try {
-        const res = await fetch('/api/mirrored-playlists');
-        const all = await res.json();
-        mirroredPlaylists = (Array.isArray(all) ? all : []).filter(p =>
-            p.name.trim().toLowerCase() === playlistName.trim().toLowerCase()
-        );
-    } catch (e) {
-        console.error('Failed to fetch mirrored playlists:', e);
-    }
-
-    if (mirroredPlaylists.length === 1) {
-        // Single match — go straight to compare
-        _openServerCompareView(playlistId, playlistName, mirroredPlaylists[0]);
-    } else if (mirroredPlaylists.length === 0) {
-        // No match — server-only view
-        _openServerCompareView(playlistId, playlistName, null);
-    } else {
-        // Multiple — disambiguation
-        _showServerDisambig(playlistId, playlistName, mirroredPlaylists);
-    }
-}
-
-// ── Disambiguation ──
-
-function _showServerDisambig(playlistId, playlistName, candidates) {
-    const overlay = document.getElementById('server-disambig-overlay');
-    const list = document.getElementById('server-disambig-list');
-    const subtitle = document.getElementById('server-disambig-subtitle');
-    if (!overlay || !list) return;
-
-    if (subtitle) subtitle.textContent = `"${playlistName}" was found on ${candidates.length} sources. Which one do you want to compare against?`;
-
-    const sourceIcons = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
-
-    list.innerHTML = candidates.map((p, i) => {
-        const icon = sourceIcons[p.source] || '📋';
-        const ago = timeAgo(p.mirrored_at || p.updated_at);
-        return `
-        <div class="server-disambig-card" onclick="selectDisambigPlaylist('${playlistId}', '${_esc(playlistName).replace(/'/g, "\\'")}', ${p.id})" style="animation-delay: ${i * 0.06}s">
-            <div class="server-disambig-icon">${icon}</div>
-            <div class="server-disambig-info">
-                <div class="server-disambig-name">${_esc(p.name)}</div>
-                <div class="server-disambig-details">
-                    <span class="source-badge">${_esc(p.source)}</span>
-                    <span>${p.track_count || 0} tracks</span>
-                    ${p.owner ? `<span>by ${_esc(p.owner)}</span>` : ''}
-                    <span>Mirrored ${ago}</span>
-                </div>
-            </div>
-            <div class="server-disambig-arrow">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-            </div>
-        </div>`;
-    }).join('');
-
-    overlay.classList.remove('hidden');
-    requestAnimationFrame(() => overlay.classList.add('visible'));
-
-    // Escape key + click backdrop to close
-    overlay.onclick = e => { if (e.target === overlay) closeServerDisambig(); };
-    window._disambigEsc = e => { if (e.key === 'Escape') closeServerDisambig(); };
-    document.addEventListener('keydown', window._disambigEsc);
-}
-
-function closeServerDisambig() {
-    const overlay = document.getElementById('server-disambig-overlay');
-    if (overlay) {
-        overlay.classList.remove('visible');
-        setTimeout(() => overlay.classList.add('hidden'), 250);
-    }
-    if (window._disambigEsc) { document.removeEventListener('keydown', window._disambigEsc); window._disambigEsc = null; }
-}
-
-async function selectDisambigPlaylist(playlistId, playlistName, mirroredId) {
-    closeServerDisambig();
-    try {
-        const res = await fetch(`/api/mirrored-playlists/${mirroredId}`);
-        const mirrored = await res.json();
-        _openServerCompareView(playlistId, playlistName, mirrored);
-    } catch (e) {
-        showToast('Failed to load mirrored playlist: ' + e.message, 'error');
-    }
-}
-
-// ── Compare View ──
-
-async function _openServerCompareView(playlistId, playlistName, mirroredPlaylist) {
-    const container = document.getElementById('server-playlist-container');
-    const editor = document.getElementById('server-editor');
-    if (!editor) return;
-
-    if (container) container.style.display = 'none';
-    editor.style.display = '';
-
-    const nameEl = document.getElementById('server-editor-name');
-    const metaEl = document.getElementById('server-editor-meta');
-    const banner = document.getElementById('server-no-source-banner');
-    const sourceScroll = document.getElementById('server-col-source-scroll');
-    const serverScroll = document.getElementById('server-col-server-scroll');
-
-    if (nameEl) nameEl.textContent = playlistName;
-    if (metaEl) metaEl.textContent = 'Loading comparison...';
-    if (banner) banner.style.display = 'none';
-    if (sourceScroll) sourceScroll.innerHTML = '<div style="text-align:center;padding:30px;color:rgba(255,255,255,0.2);font-size:12px">Loading...</div>';
-    if (serverScroll) serverScroll.innerHTML = '<div style="text-align:center;padding:30px;color:rgba(255,255,255,0.2);font-size:12px">Loading...</div>';
-
-    // Store state
-    _serverEditorState = {
-        playlistId,
-        playlistName,
-        mirroredPlaylist,
-        tracks: [],
-    };
-
-    // Build API URL
-    let url = `/api/server/playlist/${playlistId}/tracks?name=${encodeURIComponent(playlistName)}`;
-    if (mirroredPlaylist && mirroredPlaylist.id) {
-        url += `&mirrored_playlist_id=${mirroredPlaylist.id}`;
-    }
-
-    try {
-        const response = await fetch(url);
-        const data = await response.json();
-        if (!data.success) {
-            if (metaEl) metaEl.textContent = data.error || 'Failed to load';
-            return;
-        }
-
-        _serverEditorState.tracks = data.tracks || [];
-        _serverEditorState.serverType = data.server_type;
-
-        const tracks = _serverEditorState.tracks;
-        const serverLabel = data.server_type ? data.server_type.charAt(0).toUpperCase() + data.server_type.slice(1) : 'Server';
-
-        // Header metadata
-        if (metaEl) metaEl.textContent = `${serverLabel} · ${data.server_track_count || 0} server tracks · ${data.source_track_count || 0} source tracks`;
-
-        // Show no-source banner if needed
-        if (!mirroredPlaylist && banner) {
-            banner.style.display = '';
-        }
-
-        // Stats, filter counts, footer
-        _updateCompareStats(tracks);
-
-        // Column headers
-        const sourceLabel = mirroredPlaylist ? (mirroredPlaylist.source || 'source').charAt(0).toUpperCase() + (mirroredPlaylist.source || 'source').slice(1) : 'Source';
-        const sourceIconMap = { spotify: '🟢', tidal: '🌊', youtube: '▶️', beatport: '🎛️', deezer: '🟣', file: '📄' };
-        const serverIconMap = { plex: '🟠', jellyfin: '🟣', navidrome: '🔵' };
-
-        const srcIconEl = document.getElementById('server-col-source-icon');
-        const srcLabelEl = document.getElementById('server-col-source-label');
-        const srcCountEl = document.getElementById('server-col-source-count');
-        const svrIconEl = document.getElementById('server-col-server-icon');
-        const svrLabelEl = document.getElementById('server-col-server-label');
-        const svrCountEl = document.getElementById('server-col-server-count');
-
-        if (srcIconEl) srcIconEl.textContent = mirroredPlaylist ? (sourceIconMap[mirroredPlaylist.source] || '📋') : '📋';
-        if (srcLabelEl) srcLabelEl.textContent = sourceLabel;
-        if (srcCountEl) srcCountEl.textContent = `${data.source_track_count || 0} tracks`;
-        if (svrIconEl) svrIconEl.textContent = serverIconMap[data.server_type] || '💻';
-        if (svrLabelEl) svrLabelEl.textContent = serverLabel;
-        if (svrCountEl) svrCountEl.textContent = `${data.server_track_count || 0} tracks`;
-
-        // Render columns
-        _renderCompareColumns(tracks);
-
-        // Scroll linking
-        _setupScrollLinking();
-
-    } catch (e) {
-        if (metaEl) metaEl.textContent = 'Error: ' + e.message;
-    }
-}
-
-function _updateCompareStats(tracks) {
-    const matched = tracks.filter(t => t.match_status === 'matched').length;
-    const missing = tracks.filter(t => t.match_status === 'missing').length;
-    const extra = tracks.filter(t => t.match_status === 'extra').length;
-
-    const statsEl = document.getElementById('server-editor-stats');
-    if (statsEl) {
-        statsEl.innerHTML = `
-            <div class="server-editor-stat"><div class="server-editor-stat-num matched">${matched}</div><div class="server-editor-stat-label">Matched</div></div>
-            <div class="server-editor-stat"><div class="server-editor-stat-num missing">${missing}</div><div class="server-editor-stat-label">Missing</div></div>
-            ${extra > 0 ? `<div class="server-editor-stat"><div class="server-editor-stat-num extra">${extra}</div><div class="server-editor-stat-label">Extra</div></div>` : ''}
-        `;
-    }
-
-    const editor = document.getElementById('server-editor');
-    if (editor) {
-        editor.querySelectorAll('.discog-filter').forEach(btn => {
-            const f = btn.dataset.filter;
-            if (f === 'all') btn.textContent = `All (${tracks.length})`;
-            else if (f === 'matched') btn.textContent = `Matched (${matched})`;
-            else if (f === 'missing') btn.textContent = `Missing (${missing})`;
-            else if (f === 'extra') btn.textContent = `Extra (${extra})`;
-        });
-    }
-
-    const footer = document.getElementById('server-editor-footer');
-    if (footer) footer.textContent = `${matched}/${matched + missing} matched${extra > 0 ? ` · ${extra} extra on server` : ''}`;
-}
-
-function _formatDurationMs(ms) {
-    if (!ms) return '';
-    const s = Math.round(ms / 1000);
-    return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
-}
-
-function _renderCompareColumns(tracks) {
-    const sourceScroll = document.getElementById('server-col-source-scroll');
-    const serverScroll = document.getElementById('server-col-server-scroll');
-    if (!sourceScroll || !serverScroll) return;
-
-    let sourceHTML = '';
-    let serverHTML = '';
-
-    tracks.forEach((t, i) => {
-        const src = t.source_track;
-        const svr = t.server_track;
-        const status = t.match_status;
-        const pairId = `pair-${i}`;
-
-        // ── Source (left) column ──
-        if (src) {
-            const dur = _formatDurationMs(src.duration_ms);
-            sourceHTML += `
-            <div class="server-track-item ${status}" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
-                 onclick="_compareTrackClick('source', ${i})">
-                <div class="server-track-num">${src.position != null ? src.position : i + 1}</div>
-                <div class="server-track-art">
-                    ${src.image_url ? `<img src="${src.image_url}" alt="" loading="lazy">` : '<div class="server-track-art-empty"></div>'}
-                </div>
-                <div class="server-track-info">
-                    <div class="server-track-title">${_esc(src.name)}</div>
-                    <div class="server-track-artist">${_esc(src.artist || '')}</div>
-                </div>
-                <div class="server-track-duration">${dur}</div>
-                <div class="server-track-status-dot"></div>
-            </div>`;
-        } else {
-            // Extra track — no source
-            sourceHTML += `
-            <div class="server-track-item extra-gap" data-pair-id="${pairId}" data-index="${i}" data-status="${status}">
-                <div class="server-track-empty-slot extra">
-                    <span class="empty-slot-label">No source track</span>
-                </div>
-            </div>`;
-        }
-
-        // ── Server (right) column ──
-        if (svr) {
-            const dur = _formatDurationMs(svr.duration);
-            const conf = t.confidence != null ? t.confidence : null;
-            let confBadge = '';
-            if (status === 'matched' && conf != null) {
-                const pct = Math.round(conf * 100);
-                const cls = pct >= 100 ? 'exact' : pct >= 90 ? 'high' : 'fuzzy';
-                confBadge = `<span class="server-track-conf ${cls}" title="Title similarity">${pct}%</span>`;
-            }
-            serverHTML += `
-            <div class="server-track-item ${status}" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
-                 onclick="_compareTrackClick('server', ${i})">
-                <div class="server-track-num">${i + 1}</div>
-                <div class="server-track-art">
-                    ${svr.thumb ? `<img src="${svr.thumb}" alt="" loading="lazy">` : '<div class="server-track-art-empty"></div>'}
-                </div>
-                <div class="server-track-info">
-                    <div class="server-track-title">${_esc(svr.title)}</div>
-                    <div class="server-track-artist">${_esc(svr.artist || '')}</div>
-                </div>
-                ${confBadge}
-                <div class="server-track-duration">${dur}</div>
-                <div class="server-track-actions">
-                    ${status === 'matched' ? `<button class="server-track-swap-btn" onclick="event.stopPropagation(); serverSearchReplace(${i}, 'replace')" title="Swap for different version">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 16V4m0 0L3 8m4-4l4 4M17 8v12m0 0l4-4m-4 4l-4-4"/></svg>
-                    </button>` : ''}
-                    <button class="server-track-remove-btn" onclick="event.stopPropagation(); _serverRemoveTrack(${i}, '${svr.id}')" title="Remove from playlist">
-                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
-                    </button>
-                </div>
-                <div class="server-track-status-dot"></div>
-            </div>`;
-        } else {
-            // Missing on server — clickable empty slot
-            const hint = src ? `${src.artist || ''} — ${src.name}` : '';
-            serverHTML += `
-            <div class="server-track-item empty-slot-wrap" data-pair-id="${pairId}" data-index="${i}" data-status="${status}"
-                 onclick="serverSearchReplace(${i}, 'add')">
-                <div class="server-track-empty-slot missing">
-                    <div class="empty-slot-icon">
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                    </div>
-                    <span class="empty-slot-label">Find &amp; add</span>
-                    <span class="empty-slot-hint">${_esc(hint)}</span>
-                </div>
-            </div>`;
-        }
-    });
-
-    sourceScroll.innerHTML = sourceHTML;
-    serverScroll.innerHTML = serverHTML;
-}
-
-function _setupScrollLinking() {
-    const sourceScroll = document.getElementById('server-col-source-scroll');
-    const serverScroll = document.getElementById('server-col-server-scroll');
-    if (!sourceScroll || !serverScroll) return;
-
-    // Remove old listeners to prevent accumulation on refresh
-    if (window._serverScrollAC) window._serverScrollAC.abort();
-    window._serverScrollAC = new AbortController();
-    const signal = window._serverScrollAC.signal;
-
-    let syncing = false;
-
-    const syncScroll = (from, to) => {
-        if (syncing) return;
-        syncing = true;
-        const maxFrom = from.scrollHeight - from.clientHeight;
-        const maxTo = to.scrollHeight - to.clientHeight;
-        if (maxFrom > 0 && maxTo > 0) {
-            to.scrollTop = (from.scrollTop / maxFrom) * maxTo;
-        }
-        requestAnimationFrame(() => { syncing = false; });
-    };
-
-    sourceScroll.addEventListener('scroll', () => syncScroll(sourceScroll, serverScroll), { signal });
-    serverScroll.addEventListener('scroll', () => syncScroll(serverScroll, sourceScroll), { signal });
-}
-
-function _compareTrackClick(side, index) {
-    const otherSide = side === 'source' ? 'server' : 'source';
-    const otherScroll = document.getElementById(`server-col-${otherSide}-scroll`);
-    const pairId = `pair-${index}`;
-
-    // Clear previous highlights
-    document.querySelectorAll('.server-track-item.highlighted').forEach(el => el.classList.remove('highlighted'));
-
-    // Highlight both paired items
-    document.querySelectorAll(`[data-pair-id="${pairId}"]`).forEach(el => el.classList.add('highlighted'));
-
-    // Scroll the OTHER column to show the paired item
-    const target = otherScroll?.querySelector(`[data-pair-id="${pairId}"]`);
-    if (target) {
-        target.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
-}
-
-function _serverEditorRefresh() {
-    _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
-}
-
-function serverEditorBack() {
-    const container = document.getElementById('server-playlist-container');
-    const editor = document.getElementById('server-editor');
-    if (editor) editor.style.display = 'none';
-    if (container) container.style.display = '';
-}
-
-function _serverEditorFilter(btn, filter) {
-    btn.closest('.server-editor-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-
-    // Filter both columns simultaneously
-    ['server-col-source-scroll', 'server-col-server-scroll'].forEach(colId => {
-        document.querySelectorAll(`#${colId} .server-track-item`).forEach(item => {
-            const status = item.dataset.status;
-            item.style.display = (filter === 'all' || status === filter) ? '' : 'none';
-        });
-    });
-}
-
-// ── Track Search / Replace ──
-
-async function serverSearchReplace(trackIndex, mode) {
-    const track = _serverEditorState.tracks[trackIndex];
-    if (!track) return;
-
-    const src = track.source_track || {};
-    const svr = track.server_track || {};
-    // Search by track name only first (more reliable than "artist trackname" blob)
-    const searchQuery = src.name ? src.name.trim() : (svr.title || '').trim();
-    const contextArtist = src.artist || svr.artist || '';
-    const contextName = src.name || svr.title || '';
-
-    const existing = document.getElementById('server-search-overlay');
-    if (existing) existing.remove();
-
-    const overlay = document.createElement('div');
-    overlay.id = 'server-search-overlay';
-    overlay.className = 'server-search-overlay';
-    overlay.innerHTML = `
-        <div class="server-search-popover" id="server-search-popover">
-            <div class="server-search-header">
-                <div>
-                    <div class="server-search-title">${mode === 'replace' ? 'Swap Track' : 'Add Track to Server'}</div>
-                    ${contextName ? `<div class="server-search-context">
-                        <span class="server-search-context-label">Source:</span>
-                        <span class="server-search-context-artist">${_esc(contextArtist)}</span>
-                        <span class="server-search-context-sep">—</span>
-                        <span class="server-search-context-name">${_esc(contextName)}</span>
-                    </div>` : ''}
-                </div>
-                <button class="server-search-close" onclick="document.getElementById('server-search-overlay')?.remove()">&times;</button>
-            </div>
-            <div class="server-search-input-wrap">
-                <div class="server-search-input-icon">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                </div>
-                <input type="text" class="server-search-input" id="server-search-input" value="${_esc(searchQuery)}" placeholder="Search by track name, artist, or album..." onkeydown="if(event.key==='Enter') _serverSearchExecute()">
-            </div>
-            <div class="server-search-results-header" id="server-search-results-header"></div>
-            <div class="server-search-results" id="server-search-results">
-                <div class="server-search-hint">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="margin-bottom:6px;opacity:0.4"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-                    <br>Searching...
-                </div>
-            </div>
-        </div>
-    `;
-    // Click overlay background or press Escape to close
-    overlay.addEventListener('click', e => { if (e.target === overlay) overlay.remove(); });
-    overlay._escHandler = e => { if (e.key === 'Escape') overlay.remove(); };
-    document.addEventListener('keydown', overlay._escHandler);
-    // Clean up Escape listener when overlay is removed
-    const obs = new MutationObserver(() => {
-        if (!document.body.contains(overlay)) { document.removeEventListener('keydown', overlay._escHandler); obs.disconnect(); }
-    });
-    obs.observe(document.body, { childList: true });
-
-    const popover = overlay.querySelector('.server-search-popover');
-    popover.dataset.trackIndex = trackIndex;
-    popover.dataset.mode = mode;
-
-    document.body.appendChild(overlay);
-    requestAnimationFrame(() => overlay.classList.add('visible'));
-    document.getElementById('server-search-input')?.focus();
-    document.getElementById('server-search-input')?.select();
-
-    _serverSearchExecute();
-}
-
-async function _serverSearchExecute() {
-    const input = document.getElementById('server-search-input');
-    const results = document.getElementById('server-search-results');
-    const resultsHeader = document.getElementById('server-search-results-header');
-    const popover = document.getElementById('server-search-popover');
-    if (!input || !results || !popover) return;
-
-    const query = input.value.trim();
-    if (!query) {
-        results.innerHTML = '<div class="server-search-hint">Type a search query</div>';
-        if (resultsHeader) resultsHeader.textContent = '';
-        return;
-    }
-
-    results.innerHTML = '<div class="server-search-hint"><div class="server-search-spinner"></div>Searching library...</div>';
-    if (resultsHeader) resultsHeader.textContent = '';
-
-    try {
-        const response = await fetch(`/api/library/search-tracks?q=${encodeURIComponent(query)}&limit=20`);
-        const data = await response.json();
-
-        if (!data.success || !data.tracks || data.tracks.length === 0) {
-            results.innerHTML = `<div class="server-search-hint">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" style="margin-bottom:6px;opacity:0.3"><path d="M9.172 14.828a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-                <br>No results found<br><span style="font-size:10px;opacity:0.5">Try different keywords or a shorter query</span>
-            </div>`;
-            return;
-        }
-
-        const trackIndex = parseInt(popover.dataset.trackIndex);
-        const mode = popover.dataset.mode;
-
-        if (resultsHeader) resultsHeader.textContent = `${data.tracks.length} result${data.tracks.length !== 1 ? 's' : ''}`;
-
-        results.innerHTML = data.tracks.map((t, i) => {
-            const ext = (t.file_path || '').split('.').pop().toUpperCase();
-            const format = ['FLAC', 'MP3', 'OPUS', 'OGG', 'M4A', 'AAC', 'WAV'].includes(ext) ? (ext === 'M4A' ? 'AAC' : ext) : '';
-            const dur = _formatDurationMs(t.duration);
-            const bitrateStr = t.bitrate ? `${t.bitrate}k` : '';
-            return `
-                <div class="server-search-result" onclick="_serverSelectTrack(${trackIndex}, '${mode}', '${t.id}', this)" style="animation-delay:${i * 0.03}s">
-                    <div class="server-search-result-art">
-                        ${t.album_thumb_url ? `<img src="${t.album_thumb_url}" alt="" loading="lazy">` : '<div class="server-search-result-art-empty"></div>'}
-                    </div>
-                    <div class="server-search-result-info">
-                        <div class="server-search-result-title">${_esc(t.title)}</div>
-                        <div class="server-search-result-meta">${_esc(t.artist_name)}${t.album_title ? ` · ${_esc(t.album_title)}` : ''}</div>
-                    </div>
-                    <div class="server-search-result-details">
-                        ${format ? `<span class="server-search-format">${format}</span>` : ''}
-                        ${bitrateStr ? `<span class="server-search-bitrate">${bitrateStr}</span>` : ''}
-                        ${dur ? `<span class="server-search-dur">${dur}</span>` : ''}
-                    </div>
-                    <button class="server-search-select-btn">Select</button>
-                </div>
-            `;
-        }).join('');
-
-    } catch (e) {
-        results.innerHTML = `<div class="server-search-hint">Error: ${e.message}</div>`;
-    }
-}
-
-async function _serverSelectTrack(trackIndex, mode, newTrackId, el) {
-    const track = _serverEditorState.tracks[trackIndex];
-    if (!track) return;
-
-    const btn = el.querySelector('.server-search-select-btn');
-    if (btn) { btn.disabled = true; btn.textContent = '...'; }
-
-    try {
-        let response;
-        if (mode === 'replace') {
-            response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/replace-track`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    old_track_id: track.server_track?.id,
-                    new_track_id: newTrackId,
-                    playlist_name: _serverEditorState.playlistName,
-                })
-            });
-        } else {
-            // Calculate the server-side position for this track
-            // Count how many server tracks exist before this index
-            let serverPos = 0;
-            for (let k = 0; k < trackIndex; k++) {
-                if (_serverEditorState.tracks[k]?.server_track) serverPos++;
-            }
-            response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/add-track`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    track_id: newTrackId,
-                    playlist_name: _serverEditorState.playlistName,
-                    position: serverPos,
-                })
-            });
-        }
-
-        const data = await response.json();
-        if (data.success) {
-            showToast(data.message || 'Track updated', 'success');
-            document.getElementById('server-search-overlay')?.remove();
-            // Update playlist ID if server recreated it (Plex deletes+recreates)
-            if (data.new_playlist_id) _serverEditorState.playlistId = data.new_playlist_id;
-
-            // Re-fetch from server so the compare view reflects the actual server state
-            // and the matching algorithm can correctly wire up the newly added/replaced track
-            _openServerCompareView(_serverEditorState.playlistId, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
-        } else {
-            showToast(data.error || 'Failed to update track', 'error');
-            if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
-        }
-    } catch (e) {
-        showToast('Error: ' + e.message, 'error');
-        if (btn) { btn.disabled = false; btn.textContent = 'Select'; }
-    }
-}
-
-async function _serverRemoveTrack(trackIndex, serverTrackId) {
-    if (!serverTrackId) return;
-
-    const track = _serverEditorState.tracks[trackIndex];
-    const trackTitle = track?.server_track?.title || 'this track';
-
-    if (!await showConfirmDialog({ title: 'Remove Track', message: `Remove "${trackTitle}" from this playlist?`, confirmText: 'Remove', destructive: true })) return;
-
-    try {
-        const response = await fetch(`/api/server/playlist/${_serverEditorState.playlistId}/remove-track`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                track_id: serverTrackId,
-                playlist_name: _serverEditorState.playlistName,
-            })
-        });
-
-        const data = await response.json();
-        if (data.success) {
-            showToast(data.message || 'Track removed', 'success');
-            const pid = data.new_playlist_id || _serverEditorState.playlistId;
-            _serverEditorState.playlistId = pid;
-            _openServerCompareView(pid, _serverEditorState.playlistName, _serverEditorState.mirroredPlaylist);
-        } else {
-            showToast(data.error || 'Failed to remove track', 'error');
-        }
-    } catch (e) {
-        showToast('Error: ' + e.message, 'error');
-    }
-}
-
-
-// Auto-refresh sync cards every 30 seconds when on dashboard
-setInterval(() => {
-    if (typeof currentPage !== 'undefined' && currentPage === 'dashboard') {
-        loadDashboardSyncHistory();
-    }
-}, 30000);
-
-async function loadDashboardSyncHistory() {
-    const container = document.getElementById('sync-history-cards');
-    if (!container) return;
-
-    try {
-        const response = await fetch('/api/sync/history?limit=10');
-        if (!response.ok) return;
-
-        const data = await response.json();
-        // Filter to only show playlist syncs — not album downloads or wishlist processing
-        const entries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
-
-        if (entries.length === 0) {
-            container.innerHTML = '<div class="sync-history-empty">No syncs yet</div>';
-            return;
-        }
-
-        container.innerHTML = entries.map((entry, cardIndex) => {
-            const found = entry.tracks_found || 0;
-            const total = entry.total_tracks || 0;
-            const downloaded = entry.tracks_downloaded || 0;
-            const failed = entry.tracks_failed || 0;
-            const pct = total > 0 ? Math.round((found / total) * 100) : 0;
-
-            // Health color
-            let healthClass = 'health-good';
-            if (pct < 50) healthClass = 'health-bad';
-            else if (pct < 80) healthClass = 'health-warn';
-
-            // Source badge
-            const sourceLabels = { spotify: 'Spotify', tidal: 'Tidal', deezer: 'Deezer', youtube: 'YouTube', beatport: 'Beatport', wishlist: 'Wishlist' };
-            const sourceLabel = sourceLabels[entry.source] || entry.source || 'Unknown';
-
-            // Time
-            const timeStr = entry.started_at ? _relativeTime(entry.started_at) : '';
-
-            // Name
-            const name = entry.artist_name
-                ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
-                : entry.playlist_name || 'Unknown';
-
-            return `
-                <div class="sync-history-card ${healthClass}" onclick="openSyncDetailModal(${entry.id})" style="animation-delay: ${cardIndex * 0.05}s">
-                    <button class="sync-card-delete" onclick="event.stopPropagation(); deleteSyncHistoryCard(${entry.id}, this)" title="Remove">&times;</button>
-                    <div class="sync-card-thumb">
-                        ${entry.thumb_url ? `<img src="${entry.thumb_url}" alt="" loading="lazy">` : '<div class="sync-card-thumb-placeholder">&#9835;</div>'}
-                    </div>
-                    <div class="sync-card-info">
-                        <div class="sync-card-name">${typeof _esc === 'function' ? _esc(name) : name}</div>
-                        <div class="sync-card-meta">
-                            <span class="sync-card-source">${sourceLabel}</span>
-                            <span class="sync-card-time">${timeStr}</span>
-                        </div>
-                    </div>
-                    <div class="sync-card-stats">
-                        <div class="sync-card-pct">${pct}%</div>
-                        <div class="sync-card-bar">
-                            <div class="sync-card-bar-fill" style="width: ${pct}%"></div>
-                        </div>
-                        <div class="sync-card-counts">${found}/${total} matched${downloaded > 0 ? ` · ${downloaded} ⬇` : ''}${failed > 0 ? ` · ${failed} ✗` : ''}</div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-
-    } catch (e) {
-        console.warn('Failed to load sync history for dashboard:', e);
-    }
-}
-
-function _relativeTime(dateStr) {
-    try {
-        const d = new Date(dateStr);
-        const now = new Date();
-        const diffMs = now - d;
-        const mins = Math.floor(diffMs / 60000);
-        if (mins < 1) return 'just now';
-        if (mins < 60) return `${mins}m ago`;
-        const hrs = Math.floor(mins / 60);
-        if (hrs < 24) return `${hrs}h ago`;
-        const days = Math.floor(hrs / 24);
-        if (days < 7) return `${days}d ago`;
-        return d.toLocaleDateString();
-    } catch (e) { return ''; }
-}
-
-async function openSyncDetailModal(entryId) {
-    try {
-        showLoadingOverlay('Loading sync details...');
-        const response = await fetch(`/api/sync/history/${entryId}`);
-        const data = await response.json();
-        hideLoadingOverlay();
-
-        if (!data.success || !data.entry) {
-            showToast('Could not load sync details', 'error');
-            return;
-        }
-
-        const entry = data.entry;
-        const trackResults = entry.track_results || [];
-        const name = entry.artist_name
-            ? `${entry.artist_name} — ${entry.album_name || entry.playlist_name}`
-            : entry.playlist_name || 'Unknown';
-
-        // Build modal
-        const overlay = document.createElement('div');
-        overlay.className = 'discog-modal-overlay';
-        overlay.id = 'sync-detail-overlay';
-
-        const found = entry.tracks_found || 0;
-        const total = entry.total_tracks || 0;
-        const downloaded = entry.tracks_downloaded || 0;
-
-        let trackRowsHtml = '';
-        if (trackResults.length > 0) {
-            trackRowsHtml = trackResults.map((t, i) => {
-                const statusIcon = t.status === 'found' ? '✅' : '❌';
-                const statusClass = t.status === 'found' ? 'matched' : 'unmatched';
-                const confPct = Math.round((t.confidence || 0) * 100);
-                const confClass = confPct >= 80 ? 'conf-high' : confPct >= 50 ? 'conf-mid' : 'conf-low';
-                let dlIcon = '';
-                if (t.download_status === 'completed') dlIcon = '✅';
-                else if (t.download_status === 'failed') dlIcon = '❌';
-                else if (t.download_status === 'not_found') dlIcon = '🔇';
-                else if (t.download_status === 'cancelled') dlIcon = '🚫';
-
-                let dlDisplay = dlIcon;
-                if (!dlDisplay && t.download_status === 'wishlist') dlDisplay = '<span class="sync-dl-wishlist">→ Wishlist</span>';
-
-                return `
-                    <tr class="sync-detail-row ${statusClass}">
-                        <td class="sync-detail-num">${i + 1}</td>
-                        <td class="sync-detail-art">
-                            ${t.image_url ? `<img src="${t.image_url}" alt="" loading="lazy">` : '<div class="sync-detail-art-empty"></div>'}
-                        </td>
-                        <td class="sync-detail-track">${_esc(t.name || '')}</td>
-                        <td class="sync-detail-artist">${_esc(t.artist || '')}</td>
-                        <td class="sync-detail-album">${_esc(t.album || '')}</td>
-                        <td class="sync-detail-status">${statusIcon}</td>
-                        <td class="sync-detail-conf"><span class="conf-badge ${confClass}">${confPct}%</span></td>
-                        <td class="sync-detail-dl">${dlDisplay}</td>
-                    </tr>
-                `;
-            }).join('');
-        } else {
-            // Fallback to tracks_json if no track_results (old syncs before data caching)
-            const tracks = entry.tracks || [];
-            const esc = typeof _esc === 'function' ? _esc : s => s;
-            trackRowsHtml = `
-                <tr><td colspan="8" class="sync-detail-notice">
-                    <div class="sync-detail-notice-text">Per-track match data not available for this sync.<br>Re-sync this playlist to see detailed match results.</div>
-                </td></tr>
-            ` + tracks.map((t, i) => {
-                const artists = t.artists || [];
-                const artistName = artists.length > 0 ? (typeof artists[0] === 'string' ? artists[0] : artists[0]?.name || '') : '';
-                const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
-                return `
-                    <tr class="sync-detail-row no-data">
-                        <td class="sync-detail-num">${i + 1}</td>
-                        <td class="sync-detail-art"></td>
-                        <td class="sync-detail-track">${esc(t.name || '')}</td>
-                        <td class="sync-detail-artist">${esc(artistName)}</td>
-                        <td class="sync-detail-album">${esc(albumName)}</td>
-                        <td class="sync-detail-status" colspan="3"></td>
-                    </tr>
-                `;
-            }).join('');
-        }
-
-        // Count stats for filter bar
-        const matchedCount = trackResults.filter(t => t.status === 'found').length;
-        const unmatchedCount = trackResults.filter(t => t.status !== 'found').length;
-        const downloadedCount = trackResults.filter(t => t.download_status === 'completed').length;
-
-        overlay.innerHTML = `
-            <div class="discog-modal">
-                <div class="discog-modal-hero" ${entry.thumb_url ? `style="background-image:url('${entry.thumb_url}')"` : ''}>
-                    <div class="discog-modal-hero-overlay"></div>
-                    <div class="discog-modal-hero-content">
-                        <h2 class="discog-modal-title">Sync Details</h2>
-                        <p class="discog-modal-artist">${_esc(name)}</p>
-                    </div>
-                    <button class="discog-modal-close" onclick="document.getElementById('sync-detail-overlay')?.remove()">&times;</button>
-                </div>
-                <div class="discog-filter-bar">
-                    <div class="discog-filters">
-                        <button class="discog-filter active" data-filter="all" onclick="_syncDetailFilter(this, 'all')">All (${total})</button>
-                        <button class="discog-filter" data-filter="matched" onclick="_syncDetailFilter(this, 'matched')">Matched (${matchedCount})</button>
-                        <button class="discog-filter" data-filter="unmatched" onclick="_syncDetailFilter(this, 'unmatched')">Unmatched (${unmatchedCount})</button>
-                        ${downloadedCount > 0 ? `<button class="discog-filter" data-filter="downloaded" onclick="_syncDetailFilter(this, 'downloaded')">Downloaded (${downloadedCount})</button>` : ''}
-                    </div>
-                </div>
-                <div class="sync-detail-table-wrap">
-                    <table class="sync-detail-table">
-                        <thead>
-                            <tr>
-                                <th>#</th>
-                                <th></th>
-                                <th>Track</th>
-                                <th>Artist</th>
-                                <th>Album</th>
-                                <th>Match</th>
-                                <th>Conf.</th>
-                                <th>Status</th>
-                            </tr>
-                        </thead>
-                        <tbody id="sync-detail-tbody">
-                            ${trackRowsHtml}
-                        </tbody>
-                    </table>
-                </div>
-                <div class="discog-footer">
-                    <div class="discog-footer-info">${found} matched · ${downloaded} downloaded · ${total} total</div>
-                    <div class="discog-footer-actions">
-                        <button class="discog-cancel-btn" onclick="document.getElementById('sync-detail-overlay')?.remove()">Close</button>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        document.body.appendChild(overlay);
-        requestAnimationFrame(() => overlay.classList.add('visible'));
-
-    } catch (e) {
-        hideLoadingOverlay();
-        showToast('Failed to load sync details', 'error');
-    }
-}
-
-async function deleteSyncHistoryCard(entryId, btnEl) {
-    try {
-        const card = btnEl.closest('.sync-history-card');
-        if (card) {
-            card.style.opacity = '0';
-            card.style.transform = 'scale(0.9)';
-        }
-        const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
-        if (resp.ok) {
-            setTimeout(() => { if (card) card.remove(); }, 200);
-        }
-    } catch (e) {
-        console.warn('Failed to delete sync entry:', e);
-    }
-}
-
-function _syncDetailFilter(btn, filter) {
-    // Update active button
-    btn.closest('.discog-filters').querySelectorAll('.discog-filter').forEach(b => b.classList.remove('active'));
-    btn.classList.add('active');
-
-    // Filter rows
-    document.querySelectorAll('#sync-detail-tbody .sync-detail-row').forEach(row => {
-        if (filter === 'all') {
-            row.style.display = '';
-        } else if (filter === 'matched') {
-            row.style.display = row.classList.contains('matched') ? '' : 'none';
-        } else if (filter === 'unmatched') {
-            row.style.display = row.classList.contains('unmatched') ? '' : 'none';
-        } else if (filter === 'downloaded') {
-            const dlCell = row.querySelector('.sync-detail-dl');
-            row.style.display = dlCell && dlCell.textContent.trim() === '✅' ? '' : 'none';
-        }
-    });
-}
-
-
-// ============================================
-// ACTIVE DOWNLOADS PAGE — Centralized Live View
-// ============================================
-
-let _adlPoller = null;
-let _adlFilter = 'all';
-let _adlData = [];
-let _adlBatches = [];
-let _adlBatchHistory = [];
-let _adlExpandedBatches = new Set();
-let _adlBatchHistoryPoller = null;
-let _adlFilterBatchId = null; // When set, main list shows only this batch
-const _batchColorMap = {};
-const _batchCompletedAt = {}; // batch_id -> timestamp when first seen as complete
-let _batchColorNext = 0;
-
-function _getBatchColor(batchId) {
-    if (!batchId) return -1;
-    if (_batchColorMap[batchId] === undefined) {
-        // Deterministic color from batch_id hash for consistency across reloads
-        let hash = 0;
-        for (let i = 0; i < batchId.length; i++) hash = ((hash << 5) - hash + batchId.charCodeAt(i)) | 0;
-        _batchColorMap[batchId] = Math.abs(hash) % 8;
-    }
-    return _batchColorMap[batchId];
-}
-
-function loadActiveDownloadsPage() {
-    _adlFetch();
-    _adlFetchBatchHistory();
-    // Poll downloads every 2 seconds, history every 60 seconds
-    if (_adlPoller) clearInterval(_adlPoller);
-    _adlPoller = setInterval(() => {
-        if (currentPage === 'active-downloads') _adlFetch();
-        else { clearInterval(_adlPoller); _adlPoller = null; }
-    }, 2000);
-    if (_adlBatchHistoryPoller) clearInterval(_adlBatchHistoryPoller);
-    _adlBatchHistoryPoller = setInterval(() => {
-        if (currentPage === 'active-downloads') _adlFetchBatchHistory();
-        else { clearInterval(_adlBatchHistoryPoller); _adlBatchHistoryPoller = null; }
-    }, 60000);
-}
-
-function adlSetFilter(filter) {
-    _adlFilter = filter;
-    document.querySelectorAll('#adl-filter-pills .adl-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === filter));
-    _adlRender();
-}
-
-async function _adlFetch() {
-    try {
-        const resp = await fetch('/api/downloads/all?limit=300');
-        const data = await resp.json();
-        if (data.success) {
-            _adlData = data.downloads || [];
-            _adlBatches = data.batches || [];
-            _adlRender();
-            _adlRenderBatchPanel();
-            // Don't call _adlUpdateBadge() here — it counts the truncated
-            // 300-item local array. The WebSocket status push already
-            // maintains the badge with the real server-side active count.
-        }
-    } catch (e) {
-        console.error('Downloads page fetch error:', e);
-    }
-}
-
-function _adlUpdateBadge() {
-    const activeCount = _adlData.filter(d => ['downloading', 'searching', 'queued', 'pending', 'post_processing'].includes(d.status)).length;
-    _updateDlNavBadge(activeCount);
-}
-
-function _updateDlNavBadge(count) {
-    const badge = document.getElementById('dl-nav-badge');
-    if (badge) {
-        if (count > 0) {
-            badge.textContent = count;
-            badge.classList.remove('hidden');
-        } else {
-            badge.classList.add('hidden');
-        }
-    }
-}
-
-function _adlRender() {
-    const list = document.getElementById('adl-list');
-    const empty = document.getElementById('adl-empty');
-    const countEl = document.getElementById('adl-count');
-    if (!list) return;
-
-    // Apply filter
-    const activeStatuses = ['downloading', 'searching', 'post_processing'];
-    const queuedStatuses = ['queued'];
-    const completedStatuses = ['completed', 'skipped', 'already_owned'];
-    const failedStatuses = ['failed', 'not_found', 'cancelled'];
-
-    let filtered = _adlData;
-
-    // Batch filter: if a batch card is selected, narrow to that batch first
-    if (_adlFilterBatchId) {
-        filtered = filtered.filter(d => d.batch_id === _adlFilterBatchId);
-    }
-
-    if (_adlFilter === 'active') filtered = filtered.filter(d => activeStatuses.includes(d.status));
-    else if (_adlFilter === 'queued') filtered = filtered.filter(d => queuedStatuses.includes(d.status));
-    else if (_adlFilter === 'completed') filtered = filtered.filter(d => completedStatuses.includes(d.status));
-    else if (_adlFilter === 'failed') filtered = filtered.filter(d => failedStatuses.includes(d.status));
-
-    const completedN = _adlData.filter(d => [...completedStatuses, ...failedStatuses].includes(d.status)).length;
-
-    if (countEl) {
-        const activeN = _adlData.filter(d => activeStatuses.includes(d.status)).length;
-        const queuedN = _adlData.filter(d => queuedStatuses.includes(d.status)).length;
-        const total = _adlData.length;
-        const parts = [];
-        if (activeN > 0) parts.push(`${activeN} active`);
-        if (queuedN > 0) parts.push(`${queuedN} queued`);
-        parts.push(`${total} total`);
-        countEl.textContent = parts.join(' / ');
-    }
-
-    // Show/hide clear button
-    const clearBtn = document.getElementById('adl-clear-btn');
-    if (clearBtn) clearBtn.style.display = completedN > 0 ? '' : 'none';
-
-    // Show/hide cancel-all button — only visible when there's something to cancel
-    const cancelAllBtn = document.getElementById('adl-cancel-all-btn');
-    if (cancelAllBtn) {
-        const hasRunningWork = _adlData.some(d =>
-            [...activeStatuses, ...queuedStatuses].includes(d.status)
-        );
-        cancelAllBtn.style.display = hasRunningWork ? '' : 'none';
-    }
-
-    // Batch filter indicator banner
-    let existingBanner = document.getElementById('adl-batch-filter-banner');
-    if (_adlFilterBatchId) {
-        const batchInfo = _adlBatches.find(b => b.batch_id === _adlFilterBatchId);
-        const batchName = batchInfo ? batchInfo.batch_name : 'Unknown batch';
-        const colorIdx = _getBatchColor(_adlFilterBatchId);
-        const colorDot = colorIdx >= 0 ? `<span class="adl-filter-banner-dot" style="background:rgba(var(--batch-color-${colorIdx}),0.7)"></span>` : '';
-        if (!existingBanner) {
-            existingBanner = document.createElement('div');
-            existingBanner.id = 'adl-batch-filter-banner';
-            existingBanner.className = 'adl-batch-filter-banner';
-            list.parentNode.insertBefore(existingBanner, list);
-        }
-        existingBanner.innerHTML = `${colorDot}Showing: <strong>${_adlEsc(batchName)}</strong> <button class="adl-filter-banner-clear" onclick="_adlFilterByBatch('${_adlFilterBatchId}')">Clear filter</button>`;
-        existingBanner.style.display = '';
-    } else if (existingBanner) {
-        existingBanner.style.display = 'none';
-    }
-
-    if (filtered.length === 0) {
-        if (empty) empty.style.display = '';
-        // Clear any existing rows but keep the empty message
-        list.querySelectorAll('.adl-row').forEach(r => r.remove());
-        return;
-    }
-
-    if (empty) empty.style.display = 'none';
-
-    // Group by status category for section headers
-    const groups = { active: [], queued: [], completed: [], failed: [] };
-    for (const dl of filtered) {
-        const cls = _adlStatusClass(dl.status);
-        if (cls === 'active') groups.active.push(dl);
-        else if (cls === 'queued') groups.queued.push(dl);
-        else if (cls === 'completed') groups.completed.push(dl);
-        else groups.failed.push(dl);
-    }
-
-    let html = '';
-    const sections = [
-        { key: 'active', label: 'Active', items: groups.active },
-        { key: 'queued', label: 'Queued', items: groups.queued },
-        { key: 'completed', label: 'Completed', items: groups.completed },
-        { key: 'failed', label: 'Failed', items: groups.failed },
-    ];
-
-    for (const section of sections) {
-        if (section.items.length === 0) continue;
-        // Only show section headers in "all" filter mode
-        if (_adlFilter === 'all') {
-            html += `<div class="adl-section-header">${section.label} (${section.items.length})</div>`;
-        }
-        for (const dl of section.items) {
-            const statusClass = _adlStatusClass(dl.status);
-            const statusLabel = _adlStatusLabel(dl.status);
-            const title = _adlEsc(dl.title || 'Unknown Track');
-            const artist = _adlEsc(dl.artist || '');
-            const album = _adlEsc(dl.album || '');
-            const batchName = _adlEsc(dl.batch_name || '');
-            const error = dl.error ? _adlEsc(dl.error) : '';
-
-            const meta = [artist, album].filter(Boolean).join(' \u00B7 ');
-            const artHtml = dl.artwork
-                ? `<img class="adl-row-art" src="${_adlEsc(dl.artwork)}" alt="" onerror="this.style.display='none'">`
-                : '<div class="adl-row-art adl-row-art-empty"></div>';
-
-            // Track position: "3 of 19"
-            const posText = dl.batch_total > 1 ? `${(dl.track_index || 0) + 1} of ${dl.batch_total}` : '';
-
-            const colorIdx = _getBatchColor(dl.batch_id);
-            const colorBar = colorIdx >= 0
-                ? `<div class="adl-row-batch-color" style="background:rgba(var(--batch-color-${colorIdx}),0.6)"></div>`
-                : '';
-
-            // Per-row cancel only makes sense for in-flight tasks. Terminal
-            // states (completed/failed/cancelled) have nothing to cancel.
-            const isCancellable = statusClass === 'active' || statusClass === 'queued';
-            const cancelBtnHtml = isCancellable && dl.playlist_id && dl.track_index !== undefined
-                ? `<button class="adl-row-cancel" onclick="event.stopPropagation(); adlCancelRow(this, '${_adlEsc(dl.playlist_id)}', ${dl.track_index})" title="Cancel this download" aria-label="Cancel download">
-                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                   </button>`
-                : '';
-
-            html += `<div class="adl-row adl-row-${statusClass}" data-task-id="${dl.task_id}" data-batch-id="${dl.batch_id || ''}">
-                ${colorBar}
-                ${artHtml}
-                <div class="adl-row-info">
-                    <div class="adl-row-title">${title}</div>
-                    ${meta ? `<div class="adl-row-meta">${meta}</div>` : ''}
-                    ${batchName ? `<div class="adl-row-batch">${batchName}${posText ? ' &middot; Track ' + posText : ''}</div>` : ''}
-                    ${error ? `<div class="adl-row-error">${error}</div>` : ''}
-                </div>
-                <div class="adl-row-status ${statusClass}">
-                    <span class="adl-status-dot ${statusClass}"></span>
-                    ${statusLabel}
-                </div>
-                ${cancelBtnHtml}
-            </div>`;
-        }
-    }
-
-    // Preserve empty element, inject rows
-    const emptyEl = document.getElementById('adl-empty');
-    const emptyHtml = emptyEl ? emptyEl.outerHTML : '';
-    list.innerHTML = emptyHtml + html;
-    const newEmpty = document.getElementById('adl-empty');
-    if (newEmpty) newEmpty.style.display = filtered.length > 0 ? 'none' : '';
-}
-
-function _adlStatusClass(status) {
-    switch (status) {
-        case 'downloading': case 'searching': case 'post_processing': return 'active';
-        case 'queued': case 'pending': return 'queued';
-        case 'completed': case 'skipped': case 'already_owned': return 'completed';
-        case 'failed': case 'not_found': return 'failed';
-        case 'cancelled': return 'cancelled';
-        default: return 'queued';
-    }
-}
-
-function _adlStatusLabel(status) {
-    switch (status) {
-        case 'downloading': return '<span class="adl-spinner"></span>Downloading';
-        case 'searching': return '<span class="adl-spinner"></span>Searching';
-        case 'post_processing': return '<span class="adl-spinner"></span>Processing';
-        case 'queued': case 'pending': return 'Queued';
-        case 'completed': return 'Completed';
-        case 'skipped': return 'Skipped';
-        case 'already_owned': return 'Owned';
-        case 'failed': return 'Failed';
-        case 'not_found': return 'Not Found';
-        case 'cancelled': return 'Cancelled';
-        default: return status;
-    }
-}
-
-function _adlEsc(str) {
-    if (!str) return '';
-    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-async function adlClearCompleted() {
-    try {
-        const resp = await fetch('/api/downloads/clear-completed', { method: 'POST' });
-        const data = await resp.json();
-        if (data.success) {
-            if (typeof showToast === 'function') showToast(`Cleared ${data.cleared} downloads`, 'success');
-            _adlFetch();
-        }
-    } catch (e) {
-        console.error('Error clearing completed downloads:', e);
-    }
-}
-
-// ---- Batch Context Panel ----
-
-const _BATCH_FADE_SECONDS = 15; // Remove completed batches after this many seconds
-
-function _adlRenderBatchPanel() {
-    const container = document.getElementById('adl-batch-active');
-    const headerTitle = document.querySelector('.adl-batch-panel-title');
-    if (!container) return;
-
-    const now = Date.now();
-
-    // Filter out batches that completed more than FADE seconds ago
-    const visibleBatches = _adlBatches.filter(batch => {
-        const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
-        if (!isTerminal) {
-            delete _batchCompletedAt[batch.batch_id]; // Reset if it came back to life
-            return true;
-        }
-        if (!_batchCompletedAt[batch.batch_id]) {
-            _batchCompletedAt[batch.batch_id] = now;
-        }
-        const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
-        return elapsed < _BATCH_FADE_SECONDS;
-    });
-
-    // Update header with count
-    if (headerTitle) {
-        const activeCount = visibleBatches.filter(b => b.phase !== 'complete' && b.phase !== 'cancelled' && b.phase !== 'error').length;
-        headerTitle.textContent = activeCount > 0 ? `Batches (${activeCount})` : 'Batches';
-    }
-
-    if (visibleBatches.length === 0) {
-        container.innerHTML = `<div class="adl-batch-empty">
-            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" style="opacity:0.25;margin-bottom:6px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
-            <div>No active batches</div>
-            <div style="font-size:0.7rem;margin-top:2px;opacity:0.5">Start a download from Search, Sync, or Wishlist</div>
-        </div>`;
-        return;
-    }
-
-    let html = '';
-    for (const batch of visibleBatches) {
-        const colorIdx = _getBatchColor(batch.batch_id);
-        const colorStyle = colorIdx >= 0 ? `border-left-color: rgba(var(--batch-color-${colorIdx}), 0.6)` : '';
-        const isExpanded = _adlExpandedBatches.has(batch.batch_id);
-        const isFiltered = _adlFilterBatchId === batch.batch_id;
-        const total = batch.total || 1;
-        const done = batch.completed + batch.failed;
-        const pct = Math.round((done / total) * 100);
-        const hasFailed = batch.failed > 0;
-        const isTerminal = batch.phase === 'complete' || batch.phase === 'cancelled' || batch.phase === 'error';
-        const isActive = batch.phase === 'downloading' && batch.active > 0;
-
-        // Fade progress for completing batches
-        let fadeStyle = '';
-        if (isTerminal && _batchCompletedAt[batch.batch_id]) {
-            const elapsed = (now - _batchCompletedAt[batch.batch_id]) / 1000;
-            const fadeStart = _BATCH_FADE_SECONDS * 0.6;
-            if (elapsed > fadeStart) {
-                const fadeProgress = Math.min(1, (elapsed - fadeStart) / (_BATCH_FADE_SECONDS - fadeStart));
-                fadeStyle = `opacity: ${1 - fadeProgress};`;
-            }
-        }
-
-        const sourceBadge = batch.source_page
-            ? `<span class="adl-batch-card-source">${_adlEsc(batch.source_page)}</span>`
-            : '';
-
-        // Phase label with icon
-        let phaseText = '';
-        let phaseIcon = '';
-        if (batch.phase === 'analysis') {
-            phaseText = 'Analyzing...';
-            phaseIcon = '<span class="adl-spinner" style="margin-right:4px"></span>';
-        } else if (batch.phase === 'downloading') {
-            phaseText = `${batch.completed}/${total} tracks`;
-            if (batch.active > 0) phaseIcon = '<span class="adl-spinner" style="margin-right:4px"></span>';
-        } else if (batch.phase === 'complete') {
-            phaseText = `Done \u2014 ${batch.completed} tracks`;
-            phaseIcon = '<span style="color:#22c55e;margin-right:4px">\u2713</span>';
-        } else if (batch.phase === 'cancelled') {
-            phaseText = 'Cancelled';
-        } else if (batch.phase === 'error') {
-            phaseText = 'Error';
-        } else {
-            phaseText = batch.phase;
-        }
-
-        // Get first track artwork for batch thumbnail, fallback to initial
-        const batchTracks = _adlData.filter(d => d.batch_id === batch.batch_id);
-        const artworkTrack = batchTracks.find(t => t.artwork);
-        let thumbHtml;
-        if (artworkTrack) {
-            thumbHtml = `<img class="adl-batch-card-thumb" src="${_adlEsc(artworkTrack.artwork)}" alt="" onerror="this.outerHTML='<div class=\\'adl-batch-card-thumb adl-batch-card-thumb-fallback\\'>${_adlEsc((batch.batch_name || 'D')[0])}</div>'">`;
-        } else {
-            const initial = (batch.batch_name || 'D')[0].toUpperCase();
-            const bgColor = colorIdx >= 0 ? `rgba(var(--batch-color-${colorIdx}), 0.15)` : 'rgba(255,255,255,0.05)';
-            const fgColor = colorIdx >= 0 ? `rgba(var(--batch-color-${colorIdx}), 0.7)` : 'rgba(255,255,255,0.4)';
-            thumbHtml = `<div class="adl-batch-card-thumb adl-batch-card-thumb-fallback" style="background:${bgColor};color:${fgColor}">${initial}</div>`;
-        }
-
-        // Build expanded tracks list with per-track progress
-        let tracksHtml = '';
-        if (isExpanded) {
-            if (batchTracks.length > 0) {
-                tracksHtml = batchTracks.map(t => {
-                    const cls = _adlStatusClass(t.status);
-                    const progress = t.progress || 0;
-
-                    // Status indicator with detail
-                    let statusHtml = '';
-                    if (t.status === 'downloading' && progress > 0) {
-                        statusHtml = `<span class="adl-batch-track-status active">${Math.round(progress)}%</span>`;
-                    } else if (t.status === 'searching') {
-                        statusHtml = `<span class="adl-batch-track-status active"><span class="adl-spinner" style="width:8px;height:8px"></span></span>`;
-                    } else if (t.status === 'post_processing') {
-                        statusHtml = `<span class="adl-batch-track-status active" title="Processing">proc</span>`;
-                    } else if (cls === 'completed') {
-                        statusHtml = `<span class="adl-batch-track-status completed">\u2713</span>`;
-                    } else if (cls === 'failed') {
-                        statusHtml = `<span class="adl-batch-track-status failed">\u2717</span>`;
-                    } else {
-                        statusHtml = `<span class="adl-batch-track-status queued">\u00B7</span>`;
-                    }
-
-                    // Mini progress bar for downloading tracks
-                    const miniBar = t.status === 'downloading' && progress > 0
-                        ? `<div class="adl-batch-track-progress"><div class="adl-batch-track-progress-fill" style="width:${progress}%"></div></div>`
-                        : '';
-
-                    return `<div class="adl-batch-track-row">
-                        <span class="adl-batch-track-title">${_adlEsc(t.title || 'Unknown')}</span>
-                        ${statusHtml}
-                        ${miniBar}
-                    </div>`;
-                }).join('');
-            } else {
-                tracksHtml = '<div style="font-size:0.7rem;color:rgba(255,255,255,0.3);padding:4px 0">No tracks loaded</div>';
-            }
-        }
-
-        const cardClasses = ['adl-batch-card'];
-        if (isExpanded) cardClasses.push('expanded');
-        if (isActive) cardClasses.push('active-glow');
-        if (isFiltered) cardClasses.push('filtered');
-
-        const playlistId = _adlEsc(batch.playlist_id || '');
-
-        html += `<div class="${cardClasses.join(' ')}" style="${colorStyle}${fadeStyle}" data-batch-id="${batch.batch_id}" onclick="_adlToggleBatch('${batch.batch_id}')">
-            <div class="adl-batch-card-top">
-                ${thumbHtml}
-                <div class="adl-batch-card-info">
-                    <div class="adl-batch-card-name adl-batch-card-link" onclick="event.stopPropagation(); _adlOpenBatchModal('${batch.batch_id}', '${playlistId}', '${_adlEsc(batch.batch_name || 'Download')}')" title="Open download modal">${_adlEsc(batch.batch_name || 'Download')}</div>
-                    <div class="adl-batch-card-meta">${phaseIcon}${phaseText}</div>
-                </div>
-                ${sourceBadge}
-                <div class="adl-batch-card-actions">
-                    <button class="adl-batch-card-filter ${isFiltered ? 'active' : ''}" onclick="event.stopPropagation(); _adlFilterByBatch('${batch.batch_id}')" title="${isFiltered ? 'Show all downloads' : 'Filter to this batch'}">
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
-                    </button>
-                    ${!isTerminal ? `<button class="adl-batch-card-cancel" onclick="event.stopPropagation(); _adlCancelBatch('${batch.batch_id}')" title="Cancel batch">
-                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
-                    </button>` : ''}
-                </div>
-            </div>
-            <div class="adl-batch-progress">
-                <div class="adl-batch-progress-fill${hasFailed ? ' has-failed' : ''}" style="width:${pct}%"></div>
-            </div>
-            <div class="adl-batch-tracks">${tracksHtml}</div>
-        </div>`;
-    }
-
-    container.innerHTML = html;
-}
-
-function _adlToggleBatch(batchId) {
-    if (_adlExpandedBatches.has(batchId)) {
-        _adlExpandedBatches.delete(batchId);
-    } else {
-        _adlExpandedBatches.add(batchId);
-    }
-    _adlRenderBatchPanel();
-}
-
-function _adlOpenBatchModal(batchId, playlistId, batchName) {
-    // For wishlist batches, navigate to wishlist and show modal
-    if (playlistId === 'wishlist') {
-        const clientProcess = activeDownloadProcesses['wishlist'];
-        if (clientProcess && clientProcess.modalElement && document.body.contains(clientProcess.modalElement)) {
-            clientProcess.modalElement.style.display = 'flex';
-            if (typeof WishlistModalState !== 'undefined') WishlistModalState.setVisible();
-        } else {
-            rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
-        }
-        return;
-    }
-
-    // For other batches, try to show existing modal or rehydrate
-    for (const [pid, process] of Object.entries(activeDownloadProcesses)) {
-        if (process.batchId === batchId && process.modalElement && document.body.contains(process.modalElement)) {
-            process.modalElement.style.display = 'flex';
-            return;
-        }
-    }
-    // Rehydrate from server
-    rehydrateModal({ playlist_id: playlistId, playlist_name: batchName, batch_id: batchId }, true);
-}
-
-function _adlFilterByBatch(batchId) {
-    if (_adlFilterBatchId === batchId) {
-        _adlFilterBatchId = null; // Toggle off
-    } else {
-        _adlFilterBatchId = batchId;
-    }
-    _adlRender();
-    _adlRenderBatchPanel();
-}
-
-async function adlCancelRow(btnEl, playlistId, trackIndex) {
-    // Per-row cancel on the Downloads page. Uses the same atomic cancel
-    // endpoint the modal cancel buttons use, so worker slots free properly.
-    if (!playlistId || trackIndex === undefined || trackIndex === null) {
-        showToast('Cannot cancel — missing task coordinates', 'error');
-        return;
-    }
-    // Lock the button so rapid clicks don't fire duplicate requests
-    if (btnEl) {
-        if (btnEl.dataset.cancelling === '1') return;
-        btnEl.dataset.cancelling = '1';
-        btnEl.classList.add('adl-row-cancel-pending');
-    }
-    try {
-        const resp = await fetch('/api/downloads/cancel_task_v2', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                playlist_id: playlistId,
-                track_index: trackIndex
-            })
-        });
-        const data = await resp.json();
-        if (data.success) {
-            const name = data.task_info && data.task_info.track_name ? data.task_info.track_name : 'Track';
-            showToast(`Cancelled "${name}"`, 'info');
-            _adlFetch();
-        } else {
-            showToast(data.error || 'Cancel failed', 'error');
-            if (btnEl) {
-                btnEl.dataset.cancelling = '0';
-                btnEl.classList.remove('adl-row-cancel-pending');
-            }
-        }
-    } catch (e) {
-        console.error('ADL row cancel error:', e);
-        showToast('Cancel request failed', 'error');
-        if (btnEl) {
-            btnEl.dataset.cancelling = '0';
-            btnEl.classList.remove('adl-row-cancel-pending');
-        }
-    }
-}
-
-async function _adlCancelBatch(batchId) {
-    const batch = _adlBatches.find(b => b.batch_id === batchId);
-    const batchName = batch ? batch.batch_name : 'this batch';
-    const confirmed = await showConfirmDialog({
-        title: 'Cancel Batch',
-        message: `Cancel "${batchName}"? All active and queued downloads in this batch will be stopped.`,
-        confirmText: 'Cancel Batch',
-        destructive: true
-    });
-    if (!confirmed) return;
-    try {
-        const resp = await fetch(`/api/playlists/${batchId}/cancel_batch`, { method: 'POST' });
-        const data = await resp.json();
-        if (data.success) {
-            showToast(`Cancelled ${data.cancelled_tasks} downloads`, 'info');
-            _adlFetch();
-        } else {
-            showToast(data.error || 'Failed to cancel batch', 'error');
-        }
-    } catch (e) {
-        showToast('Failed to cancel batch', 'error');
-    }
-}
-
-async function adlCancelAll() {
-    // Cancel every batch with active/queued work — equivalent to clicking
-    // "Cancel All" inside each running download modal. Uses the same
-    // /api/playlists/<batch_id>/cancel_batch endpoint the per-batch card
-    // cancel uses, so worker slots free atomically.
-    const runningBatches = _adlBatches.filter(b => (b.active || 0) > 0 || (b.queued || 0) > 0);
-    if (runningBatches.length === 0) {
-        showToast('No active batches to cancel', 'info');
-        return;
-    }
-
-    const totalTasks = runningBatches.reduce((sum, b) => sum + (b.active || 0) + (b.queued || 0), 0);
-    const batchWord = runningBatches.length === 1 ? 'batch' : 'batches';
-    const taskWord = totalTasks === 1 ? 'task' : 'tasks';
-    const confirmed = await showConfirmDialog({
-        title: 'Cancel All Downloads',
-        message: `Cancel ${totalTasks} ${taskWord} across ${runningBatches.length} ${batchWord}? Active and queued downloads will be stopped and added to the wishlist.`,
-        confirmText: 'Cancel All',
-        destructive: true
-    });
-    if (!confirmed) return;
-
-    const btn = document.getElementById('adl-cancel-all-btn');
-    if (btn) {
-        btn.disabled = true;
-        btn.classList.add('adl-cancel-all-pending');
-    }
-
-    let cancelled = 0;
-    let failed = 0;
-    // Sequential so we don't hammer the backend — cancel_batch takes a lock
-    // internally and parallel calls would mostly serialize anyway.
-    for (const batch of runningBatches) {
-        try {
-            const resp = await fetch(`/api/playlists/${batch.batch_id}/cancel_batch`, { method: 'POST' });
-            const data = await resp.json();
-            if (data.success) {
-                cancelled += (data.cancelled_tasks || 0);
-            } else {
-                failed += 1;
-                console.warn(`cancel_batch failed for ${batch.batch_id}:`, data.error);
-            }
-        } catch (e) {
-            failed += 1;
-            console.warn(`cancel_batch exception for ${batch.batch_id}:`, e);
-        }
-    }
-
-    if (btn) {
-        btn.disabled = false;
-        btn.classList.remove('adl-cancel-all-pending');
-    }
-
-    if (cancelled > 0 && failed === 0) {
-        showToast(`Cancelled ${cancelled} downloads`, 'success');
-    } else if (cancelled > 0 && failed > 0) {
-        showToast(`Cancelled ${cancelled} downloads (${failed} batches failed)`, 'info');
-    } else {
-        showToast('Failed to cancel any downloads', 'error');
-    }
-
-    _adlFetch();
-}
-
-// ---- Batch History ----
-
-async function _adlFetchBatchHistory() {
-    try {
-        const resp = await fetch('/api/downloads/batch-history?days=7&limit=50');
-        const data = await resp.json();
-        if (data.success) {
-            _adlBatchHistory = data.history || [];
-            _adlRenderBatchHistory();
-        }
-    } catch (e) {
-        console.debug('Batch history fetch error:', e);
-    }
-}
-
-function _adlRenderBatchHistory() {
-    const section = document.getElementById('adl-batch-history-section');
-    const list = document.getElementById('adl-batch-history-list');
-    if (!section || !list) return;
-
-    if (_adlBatchHistory.length === 0) {
-        section.style.display = 'none';
-        return;
-    }
-
-    section.style.display = '';
-
-    list.innerHTML = _adlBatchHistory.map(h => {
-        const name = _adlEsc(h.playlist_name || 'Unknown');
-        const downloaded = h.tracks_downloaded || 0;
-        const failed = h.tracks_failed || 0;
-        const total = h.total_tracks || 0;
-        const statsParts = [`${downloaded}/${total}`];
-        if (failed > 0) statsParts.push(`<span style="color:#ef4444">${failed} failed</span>`);
-
-        let dateText = '';
-        if (h.completed_at) {
-            try {
-                const d = new Date(h.completed_at);
-                const now = new Date();
-                const diffMs = now - d;
-                const diffH = Math.floor(diffMs / 3600000);
-                if (diffH < 1) dateText = 'just now';
-                else if (diffH < 24) dateText = `${diffH}h ago`;
-                else dateText = `${Math.floor(diffH / 24)}d ago`;
-            } catch (e) {
-                dateText = '';
-            }
-        }
-
-        const sourceLabel = h.source_page ? `<span class="adl-batch-card-source" style="font-size:0.6rem;padding:0 4px">${_adlEsc(h.source_page)}</span>` : '';
-
-        // Source type color dot
-        const sourceColors = { wishlist: '168, 85, 247', sync: '59, 130, 246', album: '16, 185, 129' };
-        const dotColor = sourceColors[h.source_page] || '255, 255, 255';
-        const histDot = `<span class="adl-batch-history-dot" style="background:rgba(${dotColor}, 0.6)"></span>`;
-
-        return `<div class="adl-batch-history-item">
-            ${histDot}
-            <div class="adl-batch-history-name">${name} ${sourceLabel}</div>
-            <div class="adl-batch-history-stats">${statsParts.join(' ')}</div>
-            <div class="adl-batch-history-date">${dateText}</div>
-        </div>`;
-    }).join('');
-}
-
-function adlToggleBatchHistory() {
-    const section = document.getElementById('adl-batch-history-section');
-    if (section) section.classList.toggle('expanded');
-}
-
-function adlToggleBatchPanel() {
-    const panel = document.getElementById('adl-batch-panel');
-    if (panel) panel.classList.toggle('collapsed');
-}
-
-window.adlSetFilter = adlSetFilter;
-window.adlClearCompleted = adlClearCompleted;
-window._adlToggleBatch = _adlToggleBatch;
-window._adlOpenBatchModal = _adlOpenBatchModal;
-window._adlFilterByBatch = _adlFilterByBatch;
-window._adlCancelBatch = _adlCancelBatch;
-window.adlCancelRow = adlCancelRow;
-window.adlCancelAll = adlCancelAll;
-window.adlToggleBatchHistory = adlToggleBatchHistory;
-window.adlToggleBatchPanel = adlToggleBatchPanel;
diff --git a/webui/static/search.js b/webui/static/search.js
new file mode 100644
index 00000000..2931d91b
--- /dev/null
+++ b/webui/static/search.js
@@ -0,0 +1,1543 @@
+// SEARCH FUNCTIONALITY
+// ===============================
+
+function initializeSearch() {
+    // --- FIX: Corrected the element IDs to match the HTML ---
+    const searchInput = document.getElementById('downloads-search-input');
+    const searchButton = document.getElementById('downloads-search-btn');
+
+    // Add this line to get the cancel button
+    const cancelButton = document.getElementById('downloads-cancel-btn');
+
+    if (searchButton && searchInput) {
+        searchButton.addEventListener('click', performDownloadsSearch);
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') performDownloadsSearch();
+        });
+    }
+
+    // Add this event listener for the cancel button
+    if (cancelButton) {
+        cancelButton.addEventListener('click', () => {
+            if (searchAbortController) {
+                searchAbortController.abort(); // This cancels the fetch request
+                console.log("Search cancelled by user.");
+            }
+        });
+    }
+}
+
+// ===============================
+// SEARCH MODE TOGGLE
+// ===============================
+
+let searchModeToggleInitialized = false;
+
+function initializeSearchModeToggle() {
+    // Only initialize once to prevent duplicate event listeners
+    if (searchModeToggleInitialized) {
+        console.log('Search mode toggle already initialized, skipping...');
+        return;
+    }
+
+    const toggleContainer = document.querySelector('.search-mode-toggle');
+    const modeBtns = document.querySelectorAll('.search-mode-btn');
+    const basicSection = document.getElementById('basic-search-section');
+    const enhancedSection = document.getElementById('enhanced-search-section');
+
+    if (!toggleContainer || !modeBtns.length || !basicSection || !enhancedSection) {
+        console.warn('Search mode toggle elements not found');
+        return;
+    }
+
+    searchModeToggleInitialized = true;
+    console.log('✅ Initializing search mode toggle (first time only)');
+
+    modeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const mode = btn.dataset.mode;
+
+            // Update button active states
+            modeBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            // Update toggle slider position
+            toggleContainer.setAttribute('data-active', mode);
+
+            // Toggle sections
+            if (mode === 'basic') {
+                basicSection.classList.add('active');
+                enhancedSection.classList.remove('active');
+                console.log('Switched to basic search mode');
+            } else {
+                basicSection.classList.remove('active');
+                enhancedSection.classList.add('active');
+                console.log('Switched to enhanced search mode');
+            }
+        });
+    });
+
+    // Initialize enhanced search
+    const enhancedInput = document.getElementById('enhanced-search-input');
+    const enhancedSearchBtn = document.getElementById('enhanced-search-btn');
+    const enhancedCancelBtn = document.getElementById('enhanced-cancel-btn');
+    const enhancedDropdown = document.getElementById('enhanced-dropdown');
+    const loadingState = document.getElementById('enhanced-loading');
+    const emptyState = document.getElementById('enhanced-empty');
+    const resultsContainer = document.getElementById('enhanced-results-container');
+
+    let debounceTimer = null;
+    let abortController = null;
+
+    // Multi-source search state
+    let _enhancedSearchData = null;   // Full response with all sources
+    let _activeSearchSource = null;   // Currently displayed source tab
+    let _altSourceController = null;  // AbortController for alternate source fetches
+
+    const SOURCE_LABELS = {
+        spotify: { text: 'Spotify', tabClass: 'enh-tab-spotify', badgeClass: 'enh-badge-spotify' },
+        itunes: { text: 'Apple Music', tabClass: 'enh-tab-itunes', badgeClass: 'enh-badge-itunes' },
+        deezer: { text: 'Deezer', tabClass: 'enh-tab-deezer', badgeClass: 'enh-badge-deezer' },
+        discogs: { text: 'Discogs', tabClass: 'enh-tab-discogs', badgeClass: 'enh-badge-discogs' },
+        hydrabase: { text: 'Hydrabase', tabClass: 'enh-tab-hydrabase', badgeClass: 'enh-badge-hydrabase' },
+        youtube_videos: { text: 'Music Videos', tabClass: 'enh-tab-youtube', badgeClass: 'enh-badge-youtube' },
+        musicbrainz: { text: 'MusicBrainz', tabClass: 'enh-tab-musicbrainz', badgeClass: 'enh-badge-musicbrainz' },
+    };
+
+    // Live search with debouncing
+    if (enhancedInput) {
+        enhancedInput.addEventListener('input', (e) => {
+            const query = e.target.value.trim();
+
+            // Show/hide cancel button
+            if (enhancedCancelBtn) {
+                enhancedCancelBtn.classList.toggle('hidden', query.length === 0);
+            }
+
+            // Clear debounce timer
+            clearTimeout(debounceTimer);
+
+            // Hide dropdown if query too short
+            if (query.length < 2) {
+                hideDropdown();
+                return;
+            }
+
+            // Debounce search
+            debounceTimer = setTimeout(() => {
+                performEnhancedSearch(query);
+            }, 300);
+        });
+
+        enhancedInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                const query = e.target.value.trim();
+                if (query.length >= 2) {
+                    clearTimeout(debounceTimer);
+                    performEnhancedSearch(query);
+                }
+            }
+        });
+    }
+
+    if (enhancedSearchBtn) {
+        enhancedSearchBtn.addEventListener('click', (e) => {
+            // Prevent click from bubbling to document (which would close the dropdown)
+            e.stopPropagation();
+
+            // Get fresh references (in case we navigated away and back)
+            const dropdown = document.getElementById('enhanced-dropdown');
+            const results = document.getElementById('enhanced-results-container');
+
+            if (!dropdown) return;
+
+            // Toggle the dropdown visibility to show/hide previous search results
+            if (dropdown.classList.contains('hidden')) {
+                // Check if there are results to show by looking for actual content
+                const hasResults = results &&
+                    !results.classList.contains('hidden') &&
+                    results.children.length > 0;
+
+                if (hasResults) {
+                    showDropdown();
+                } else {
+                    showToast('No previous results to show. Type to search!', 'info');
+                }
+            } else {
+                hideDropdown();
+            }
+        });
+    }
+
+    if (enhancedCancelBtn) {
+        enhancedCancelBtn.addEventListener('click', () => {
+            enhancedInput.value = '';
+            enhancedCancelBtn.classList.add('hidden');
+            hideDropdown();
+        });
+    }
+
+    // Close button inside dropdown (mobile)
+    const dropdownCloseBtn = document.getElementById('enhanced-dropdown-close');
+    if (dropdownCloseBtn) {
+        dropdownCloseBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            hideDropdown();
+        });
+    }
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', (e) => {
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown && !dropdown.classList.contains('hidden')) {
+            const isClickInside = e.target.closest('.enhanced-search-input-wrapper');
+            if (!isClickInside) {
+                hideDropdown();
+            }
+        }
+    });
+
+    async function performEnhancedSearch(query) {
+        console.log('Enhanced search:', query);
+        const searchId = Date.now() + Math.random();
+
+        // Show loading state with correct source name
+        showDropdown();
+        const loadingText = document.getElementById('enhanced-loading-text');
+        if (loadingText) {
+            loadingText.textContent = `Searching across ${currentMusicSourceName} and your library...`;
+        }
+        loadingState.classList.remove('hidden');
+        emptyState.classList.add('hidden');
+        resultsContainer.classList.add('hidden');
+
+        // Abort previous requests (primary + alternates)
+        if (abortController) {
+            abortController.abort();
+        }
+        if (_altSourceController) {
+            _altSourceController.abort();
+        }
+        abortController = new AbortController();
+        _altSourceController = new AbortController();
+
+        // Initialize multi-source state early so alternate fetches can write to it
+        _enhancedSearchData = { db_artists: [], primary_source: null, sources: {}, searchId, query };
+
+        try {
+            const response = await fetch('/api/enhanced-search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query }),
+                signal: abortController.signal
+            });
+
+            if (!response.ok) throw new Error('Search failed');
+
+            const data = await response.json();
+            console.log('Enhanced results:', data);
+
+            // Store multi-source state
+            const primarySource = data.primary_source || data.metadata_source || 'deezer';
+            _activeSearchSource = primarySource;
+            _enhancedSearchData = _enhancedSearchData || {};
+            _enhancedSearchData.db_artists = data.db_artists;
+            _enhancedSearchData.primary_source = primarySource;
+            if (!_enhancedSearchData.sources) _enhancedSearchData.sources = {};
+            _enhancedSearchData.sources[primarySource] = {
+                artists: data.spotify_artists || [],
+                albums: data.spotify_albums || [],
+                tracks: data.spotify_tracks || [],
+                available: true,
+            };
+
+            // Calculate total from primary source
+            const total = (data.db_artists?.length || 0) +
+                (data.spotify_artists?.length || 0) +
+                (data.spotify_albums?.length || 0) +
+                (data.spotify_tracks?.length || 0);
+
+            // Hide loading
+            loadingState.classList.add('hidden');
+
+            if (total === 0) {
+                emptyState.classList.remove('hidden');
+            } else {
+                renderSourceTabs(_enhancedSearchData);
+                renderDropdownResults(data);
+                resultsContainer.classList.remove('hidden');
+            }
+
+            // Alternate sources now start after the primary response has landed.
+            // This avoids speculative fan-out for short or aborted searches.
+            _queueAlternateSourceFetches(data.alternate_sources || [], query, searchId);
+
+        } catch (error) {
+            if (error.name !== 'AbortError') {
+                console.error('Enhanced search error:', error);
+                loadingState.classList.add('hidden');
+                emptyState.classList.remove('hidden');
+            }
+        }
+    }
+
+    function renderDropdownResults(data) {
+        // Music Videos tab — don't render regular sections
+        if (_activeSearchSource === 'youtube_videos') return;
+
+        // Determine source badge from active tab (not just primary)
+        const displaySource = _activeSearchSource || data.metadata_source || 'spotify';
+        const sourceInfo = SOURCE_LABELS[displaySource] || SOURCE_LABELS.spotify;
+        const sourceBadge = { text: sourceInfo.text, class: sourceInfo.badgeClass };
+
+        // Render DB Artists
+        renderCompactSection(
+            'enh-db-artists-section',
+            'enh-db-artists-list',
+            'enh-db-artists-count',
+            data.db_artists || [],
+            (artist) => ({
+                image: artist.image_url,
+                placeholder: '📚',
+                name: artist.name,
+                meta: 'In Your Library',
+                badge: { text: 'Library', class: 'enh-badge-library' },
+                onClick: () => {
+                    console.log(`🎵 Opening library artist detail: ${artist.name} (ID: ${artist.id})`);
+                    hideDropdown();
+                    navigateToArtistDetail(artist.id, artist.name);
+                }
+            })
+        );
+
+        // Render Artists (source-aware badge)
+        renderCompactSection(
+            'enh-spotify-artists-section',
+            'enh-spotify-artists-list',
+            'enh-spotify-artists-count',
+            data.spotify_artists || [],
+            (artist) => ({
+                image: artist.image_url,
+                placeholder: '🎤',
+                name: artist.name,
+                meta: 'Artist',
+                badge: sourceBadge,
+                onClick: async () => {
+                    const sourceOverride = _activeSearchSource;
+                    console.log(`🎵 Opening artist detail: ${artist.name} (ID: ${artist.id}, source: ${sourceOverride})`);
+                    hideDropdown();
+
+                    // Navigate to Artists page
+                    navigateToPage('artists');
+
+                    // Small delay to let the page load
+                    await new Promise(resolve => setTimeout(resolve, 100));
+
+                    // Load the artist details with source context
+                    await selectArtistForDetail(artist, {
+                        source: sourceOverride,
+                        plugin: artist.external_urls?.hydrabase_plugin,
+                    });
+                }
+            })
+        );
+
+        // Split albums from singles/EPs (albums is the catch-all for unknown types)
+        const allAlbums = data.spotify_albums || [];
+        const singlesAndEPs = allAlbums.filter(a => a.album_type === 'single' || a.album_type === 'ep');
+        const albums = allAlbums.filter(a => a.album_type !== 'single' && a.album_type !== 'ep');
+
+        // Render Albums
+        renderCompactSection(
+            'enh-albums-section',
+            'enh-albums-list',
+            'enh-albums-count',
+            albums,
+            (album) => ({
+                image: album.image_url,
+                placeholder: '💿',
+                name: album.name,
+                meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
+                onClick: () => handleEnhancedSearchAlbumClick(album)
+            })
+        );
+
+        // Render Singles & EPs
+        renderCompactSection(
+            'enh-singles-section',
+            'enh-singles-list',
+            'enh-singles-count',
+            singlesAndEPs,
+            (album) => ({
+                image: album.image_url,
+                placeholder: '🎶',
+                name: album.name,
+                meta: `${album.artist} • ${album.release_date ? album.release_date.substring(0, 4) : 'N/A'}`,
+                onClick: () => handleEnhancedSearchAlbumClick(album)
+            })
+        );
+
+        // Render Tracks
+        renderCompactSection(
+            'enh-tracks-section',
+            'enh-tracks-list',
+            'enh-tracks-count',
+            data.spotify_tracks || [],
+            (track) => {
+                const duration = formatDuration(track.duration_ms);
+                return {
+                    image: track.image_url,
+                    placeholder: '🎵',
+                    name: track.name,
+                    meta: `${track.artist} • ${track.album}`,
+                    duration: duration,
+                    onClick: () => handleEnhancedSearchTrackClick(track),
+                    onPlay: () => streamEnhancedSearchTrack(track)
+                };
+            }
+        );
+
+        // Lazy load artist images that are missing
+        lazyLoadEnhancedSearchArtistImages();
+
+        // Async library ownership check — doesn't block rendering
+        _checkSearchResultsLibraryOwnership(data);
+    }
+
+    async function _checkSearchResultsLibraryOwnership(data) {
+        try {
+            const allAlbums = data.spotify_albums || [];
+            const allTracks = data.spotify_tracks || [];
+            if (!allAlbums.length && !allTracks.length) return;
+
+            const resp = await fetch('/api/enhanced-search/library-check', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    albums: allAlbums.map(a => ({ name: a.name, artist: a.artist })),
+                    tracks: allTracks.map(t => ({ name: t.name, artist: t.artist })),
+                }),
+            });
+            const result = await resp.json();
+
+            // Tag album cards with staggered animation
+            const albumCards = document.querySelectorAll('#enh-albums-list .enh-compact-item, #enh-singles-list .enh-compact-item');
+            const albumResults = result.albums || [];
+            let delay = 0;
+            albumCards.forEach((card, i) => {
+                if (albumResults[i]) {
+                    setTimeout(() => {
+                        const badge = document.createElement('div');
+                        badge.className = 'enh-item-lib-badge';
+                        badge.textContent = 'In Library';
+                        card.appendChild(badge);
+                    }, delay);
+                    delay += 30;
+                }
+            });
+
+            // Tag track rows + wire up library playback
+            const trackCards = document.querySelectorAll('#enh-tracks-list .enh-compact-item');
+            const trackResults = result.tracks || [];
+            trackCards.forEach((card, i) => {
+                const tr = trackResults[i];
+                if (tr && tr.in_library) {
+                    setTimeout(() => {
+                        const badge = document.createElement('div');
+                        badge.className = 'enh-item-lib-badge';
+                        badge.textContent = 'In Library';
+                        card.appendChild(badge);
+
+                        // Replace stream button to play from library instead of searching
+                        if (tr.file_path) {
+                            const playBtn = card.querySelector('.enh-item-play-btn');
+                            if (playBtn) {
+                                const newBtn = playBtn.cloneNode(true);
+                                newBtn.title = 'Play from library';
+                                newBtn.textContent = '▶';
+                                const trackInfo = tr;
+                                newBtn.addEventListener('click', (e) => {
+                                    e.stopPropagation();
+                                    playLibraryTrack(
+                                        { id: trackInfo.track_id, title: trackInfo.title, file_path: trackInfo.file_path, _stats_image: trackInfo.album_thumb_url || null },
+                                        trackInfo.album_title || '',
+                                        trackInfo.artist_name || ''
+                                    );
+                                });
+                                playBtn.replaceWith(newBtn);
+                            }
+                        }
+                    }, delay);
+                    delay += 30;
+                } else if (tr && tr.in_wishlist) {
+                    setTimeout(() => {
+                        if (!card.querySelector('.enh-item-wishlist-badge')) {
+                            const badge = document.createElement('div');
+                            badge.className = 'enh-item-wishlist-badge';
+                            badge.textContent = 'In Wishlist';
+                            card.appendChild(badge);
+                        }
+                    }, delay);
+                    delay += 30;
+                }
+            });
+        } catch (e) {
+            console.debug('Library check failed:', e);
+        }
+    }
+
+    function _queueAlternateSourceFetches(alternateSources, query, searchId) {
+        if (!Array.isArray(alternateSources) || alternateSources.length === 0) return;
+
+        // Fetch metadata sources first, then YouTube last so it does not compete
+        // with the primary artist/album/track results for early attention.
+        const orderedSources = ['spotify', 'itunes', 'deezer', 'discogs', 'musicbrainz', 'hydrabase', 'youtube_videos']
+            .filter(src => alternateSources.includes(src) && src !== _activeSearchSource);
+
+        orderedSources.forEach((src, index) => {
+            setTimeout(() => {
+                if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
+                _fetchAlternateSource(src, query, searchId);
+            }, index * 150);
+        });
+    }
+
+    async function _fetchAlternateSource(sourceName, query, searchId) {
+        try {
+            if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
+
+            const response = await fetch(`/api/enhanced-search/source/${sourceName}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query }),
+                signal: _altSourceController?.signal,
+            });
+            if (!response.ok) return;
+            if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
+
+            // Stream NDJSON — render each search type (artists, albums, tracks) as it arrives
+            if (!_enhancedSearchData.sources[sourceName]) {
+                const loadingSet = sourceName === 'youtube_videos' ? new Set(['videos']) : new Set(['artists', 'albums', 'tracks']);
+                _enhancedSearchData.sources[sourceName] = { artists: [], albums: [], tracks: [], videos: [], available: true, _loading: loadingSet };
+            }
+            const sourceData = _enhancedSearchData.sources[sourceName];
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, { stream: true });
+
+                let newlineIdx;
+                while ((newlineIdx = buffer.indexOf('\n')) !== -1) {
+                    const line = buffer.slice(0, newlineIdx).trim();
+                    buffer = buffer.slice(newlineIdx + 1);
+                    if (!line) continue;
+                    if (!_enhancedSearchData || _enhancedSearchData.searchId !== searchId) return;
+
+                    try {
+                        const chunk = JSON.parse(line);
+                        if (chunk.type === 'artists') { sourceData.artists = chunk.data; if (sourceData._loading) sourceData._loading.delete('artists'); }
+                        else if (chunk.type === 'albums') { sourceData.albums = chunk.data; if (sourceData._loading) sourceData._loading.delete('albums'); }
+                        else if (chunk.type === 'tracks') { sourceData.tracks = chunk.data; if (sourceData._loading) sourceData._loading.delete('tracks'); }
+                        else if (chunk.type === 'videos') { sourceData.videos = chunk.data; if (sourceData._loading) sourceData._loading.delete('videos'); }
+                        else if (chunk.type === 'done') { delete sourceData._loading; break; }
+
+                        // Re-render tabs + content if this is the active source
+                        if (_enhancedSearchData.primary_source) {
+                            renderSourceTabs(_enhancedSearchData);
+                            if (_activeSearchSource === sourceName) {
+                                window._switchEnhSourceTab(sourceName);
+                            }
+                        }
+                    } catch (parseErr) {
+                        console.debug(`NDJSON parse error for ${sourceName}:`, parseErr);
+                    }
+                }
+            }
+
+            // Final render
+            if (_enhancedSearchData && _enhancedSearchData.searchId === searchId && _enhancedSearchData.primary_source) {
+                renderSourceTabs(_enhancedSearchData);
+            }
+        } catch (e) {
+            if (e.name !== 'AbortError') {
+                console.debug(`Alternate source ${sourceName} failed:`, e);
+            }
+        }
+    }
+
+    function renderSourceTabs(data) {
+        const tabBar = document.getElementById('enh-source-tabs');
+        if (!tabBar) return;
+
+        const sources = data.sources || {};
+        const primary = data.primary_source || 'spotify';
+
+        // Build tab list: primary first, then alternates sorted alphabetically.
+        // Hide completed zero-result sources so the bar stays focused.
+        const sourceNames = Object.keys(sources).filter(s => sources[s].available);
+        const visibleSources = sourceNames.filter(name => {
+            const src = sources[name] || {};
+            const count = name === 'youtube_videos'
+                ? (src.videos?.length || 0)
+                : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
+            const isLoading = !!(src._loading && src._loading.size > 0);
+            return isLoading || count > 0 || name === _activeSearchSource;
+        });
+        if (visibleSources.length <= 1) {
+            tabBar.classList.add('hidden');
+            tabBar.innerHTML = '';
+            return;
+        }
+
+        // Primary tab first, then others
+        const ordered = [primary, ...visibleSources.filter(s => s !== primary).sort()];
+
+        tabBar.innerHTML = ordered.map(name => {
+            const info = SOURCE_LABELS[name] || { text: name, tabClass: '' };
+            const src = sources[name] || {};
+            const count = name === 'youtube_videos'
+                ? (src.videos?.length || 0)
+                : (src.artists?.length || 0) + (src.albums?.length || 0) + (src.tracks?.length || 0);
+            const isActive = name === _activeSearchSource;
+            return `<button class="enh-source-tab ${info.tabClass} ${isActive ? 'active' : ''}"
+                            onclick="window._switchEnhSourceTab('${name}')"
+                            data-source="${name}">
+                        ${info.text}<span class="enh-tab-count">(${count})</span>
+                    </button>`;
+        }).join('');
+
+        tabBar.classList.remove('hidden');
+    }
+
+    // Expose tab switch globally (onclick from HTML)
+    window._switchEnhSourceTab = function (sourceName) {
+        if (!_enhancedSearchData || !_enhancedSearchData.sources) return;
+        const src = _enhancedSearchData.sources[sourceName];
+        if (!src) return;
+
+        _activeSearchSource = sourceName;
+
+        // Update tab active states
+        document.querySelectorAll('.enh-source-tab').forEach(tab => {
+            tab.classList.toggle('active', tab.dataset.source === sourceName);
+        });
+
+        // Music Videos tab — render video cards instead of regular sections
+        if (sourceName === 'youtube_videos') {
+            // Hide ALL regular sections including wrappers
+            ['enh-db-artists-section', 'enh-spotify-artists-section', 'enh-albums-section', 'enh-singles-section', 'enh-tracks-section'].forEach(id => {
+                const el = document.getElementById(id);
+                if (el) el.classList.add('hidden');
+            });
+            // Hide the artists wrapper div too
+            const artistsWrapper = document.querySelector('.enh-artists-wrapper');
+            if (artistsWrapper) artistsWrapper.style.display = 'none';
+            _renderVideoResults(src.videos || []);
+            resultsContainer.classList.remove('hidden');
+            return;
+        }
+
+        // Hide videos section and restore regular layout when switching to a metadata tab
+        const videosSec = document.getElementById('enh-videos-section');
+        if (videosSec) videosSec.classList.add('hidden');
+        const artistsWrapper = document.querySelector('.enh-artists-wrapper');
+        if (artistsWrapper) artistsWrapper.style.display = '';
+
+        // Build data in the shape renderDropdownResults expects
+        const viewData = {
+            db_artists: _enhancedSearchData.db_artists,
+            spotify_artists: src.artists || [],
+            spotify_albums: src.albums || [],
+            spotify_tracks: src.tracks || [],
+            metadata_source: sourceName,
+        };
+
+        renderDropdownResults(viewData);
+        resultsContainer.classList.remove('hidden');
+
+        // Show loading spinners for categories still streaming
+        if (src._loading && src._loading.size > 0) {
+            const loadingHtml = '<div class="enh-section-loading"><div class="server-search-spinner" style="width:16px;height:16px"></div><span>Loading...</span></div>';
+            if (src._loading.has('artists')) {
+                const sec = document.getElementById('enh-spotify-artists-section');
+                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-spotify-artists-list').innerHTML = loadingHtml; }
+            }
+            if (src._loading.has('albums')) {
+                const sec = document.getElementById('enh-albums-section');
+                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-albums-list').innerHTML = loadingHtml; }
+                const sec2 = document.getElementById('enh-singles-section');
+                if (sec2) { sec2.classList.remove('hidden'); document.getElementById('enh-singles-list').innerHTML = loadingHtml; }
+            }
+            if (src._loading.has('tracks')) {
+                const sec = document.getElementById('enh-tracks-section');
+                if (sec) { sec.classList.remove('hidden'); document.getElementById('enh-tracks-list').innerHTML = loadingHtml; }
+            }
+        }
+    };
+
+    function _renderVideoResults(videos) {
+        let section = document.getElementById('enh-videos-section');
+        if (!section) {
+            // Create the section dynamically if it doesn't exist
+            const container = document.getElementById('enhanced-results-container');
+            if (!container) return;
+            section = document.createElement('div');
+            section.id = 'enh-videos-section';
+            section.className = 'enh-dropdown-section';
+            section.innerHTML = `
+                <div class="enh-section-header">
+                    <span class="enh-section-icon">🎬</span>
+                    <h4 class="enh-section-title">Music Videos</h4>
+                    <span class="enh-section-count" id="enh-videos-count">0</span>
+                </div>
+                <div class="enh-video-grid" id="enh-videos-list"></div>
+            `;
+            container.appendChild(section);
+        }
+
+        section.classList.remove('hidden');
+        const countEl = document.getElementById('enh-videos-count');
+        const listEl = document.getElementById('enh-videos-list');
+        if (countEl) countEl.textContent = videos.length;
+
+        if (!videos.length) {
+            listEl.innerHTML = '<div class="enh-empty-state">No music videos found</div>';
+            return;
+        }
+
+        listEl.innerHTML = videos.map(v => {
+            const duration = v.duration ? `${Math.floor(v.duration / 60)}:${String(v.duration % 60).padStart(2, '0')}` : '';
+            const views = v.view_count ? _formatViewCount(v.view_count) : '';
+            return `
+                <div class="enh-video-card" data-video-id="${v.video_id}" onclick="_downloadMusicVideo(this, ${JSON.stringify(v).replace(/"/g, '&quot;')})">
+                    <div class="enh-video-thumb">
+                        <img src="${v.thumbnail}" alt="" loading="lazy" onerror="this.style.display='none'">
+                        <div class="enh-video-play">▶</div>
+                        <div class="enh-video-progress-ring hidden">
+                            <svg viewBox="0 0 36 36">
+                                <circle class="enh-video-progress-bg" cx="18" cy="18" r="15.5" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="3"/>
+                                <circle class="enh-video-progress-bar" cx="18" cy="18" r="15.5" fill="none" stroke="rgb(var(--accent-rgb))" stroke-width="3" stroke-dasharray="97.4" stroke-dashoffset="97.4" stroke-linecap="round" transform="rotate(-90 18 18)"/>
+                            </svg>
+                        </div>
+                        <div class="enh-video-done hidden">✓</div>
+                        <div class="enh-video-error hidden">✗</div>
+                        ${duration ? `<span class="enh-video-duration">${duration}</span>` : ''}
+                    </div>
+                    <div class="enh-video-info">
+                        <div class="enh-video-title" title="${v.title.replace(/"/g, '&quot;')}">${v.title}</div>
+                        <div class="enh-video-channel">${v.channel}${views ? ` · ${views} views` : ''}</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    function _formatViewCount(count) {
+        if (count >= 1000000000) return `${(count / 1000000000).toFixed(1)}B`;
+        if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+        if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+        return String(count);
+    }
+
+    // Lazy load artist images for enhanced search results
+    async function lazyLoadEnhancedSearchArtistImages() {
+        const artistLists = [
+            document.getElementById('enh-db-artists-list'),
+            document.getElementById('enh-spotify-artists-list')
+        ];
+
+        for (const list of artistLists) {
+            if (!list) continue;
+
+            const cardsNeedingImages = list.querySelectorAll('[data-needs-image="true"]');
+            if (cardsNeedingImages.length === 0) continue;
+
+            console.log(`🖼️ Lazy loading ${cardsNeedingImages.length} artist images in enhanced search`);
+
+            for (const card of cardsNeedingImages) {
+                const artistId = card.dataset.artistId;
+                if (!artistId) continue;
+
+                try {
+                    const imgUrl = _activeSearchSource && _activeSearchSource !== 'spotify'
+                        ? `/api/artist/${artistId}/image?source=${_activeSearchSource}`
+                        : `/api/artist/${artistId}/image`;
+                    const response = await fetch(imgUrl);
+                    const data = await response.json();
+
+                    if (data.success && data.image_url) {
+                        // Find the placeholder and replace with image
+                        const placeholder = card.querySelector('.enh-item-image-placeholder');
+                        if (placeholder) {
+                            const img = document.createElement('img');
+                            img.src = data.image_url;
+                            img.className = 'enh-item-image artist-image';
+                            img.alt = card.querySelector('.enh-item-name')?.textContent || 'Artist';
+                            placeholder.replaceWith(img);
+
+                            // Apply dynamic glow
+                            extractImageColors(data.image_url, (colors) => {
+                                applyDynamicGlow(card, colors);
+                            });
+                        }
+                        card.dataset.needsImage = 'false';
+                        console.log(`✅ Loaded image for artist ${artistId}`);
+                    }
+                } catch (error) {
+                    console.warn(`⚠️ Failed to load image for artist ${artistId}:`, error);
+                }
+            }
+        }
+    }
+
+    function formatDuration(durationMs) {
+        if (!durationMs) return '';
+        const totalSeconds = Math.floor(durationMs / 1000);
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    }
+
+    function renderCompactSection(sectionId, listId, countId, items, mapItem) {
+        const section = document.getElementById(sectionId);
+        const list = document.getElementById(listId);
+        const count = document.getElementById(countId);
+
+        if (!list) return;
+
+        list.innerHTML = '';
+
+        if (!items || items.length === 0) {
+            section.classList.add('hidden');
+            return;
+        }
+
+        section.classList.remove('hidden');
+        count.textContent = items.length;
+
+        // Determine type based on section ID
+        const isArtist = sectionId.includes('artists');
+        const isAlbum = sectionId.includes('albums') || sectionId.includes('singles');
+        const isTrack = sectionId.includes('tracks');
+
+        // Add appropriate grid class to list
+        if (isArtist) {
+            list.classList.add('enh-artists-grid');
+        } else if (isAlbum) {
+            list.classList.add('enh-albums-grid');
+        } else if (isTrack) {
+            list.classList.add('enh-tracks-list');
+        }
+
+        items.forEach(item => {
+            const config = mapItem(item);
+            const elem = document.createElement('div');
+
+            // Add appropriate card class
+            if (isArtist) {
+                elem.className = 'enh-compact-item artist-card';
+                // Add data attributes for lazy loading
+                if (item.id) {
+                    elem.dataset.artistId = item.id;
+                    elem.dataset.needsImage = config.image ? 'false' : 'true';
+                }
+            } else if (isAlbum) {
+                elem.className = 'enh-compact-item album-card';
+            } else if (isTrack) {
+                elem.className = 'enh-compact-item track-item';
+            }
+
+            // Build image HTML with type-specific classes
+            let imageClass = 'enh-item-image';
+            let placeholderClass = 'enh-item-image-placeholder';
+
+            if (isArtist) {
+                imageClass += ' artist-image';
+                placeholderClass += ' artist-placeholder';
+            } else if (isAlbum) {
+                imageClass += ' album-cover';
+                placeholderClass += ' album-placeholder';
+            } else if (isTrack) {
+                imageClass += ' track-cover';
+                placeholderClass += ' track-placeholder';
+            }
+
+            const imageHtml = config.image
+                ? `<img src="${escapeHtml(config.image)}" class="${imageClass}" alt="${escapeHtml(config.name)}">`
+                : `<div class="${placeholderClass}" data-lazy-image="true">${config.placeholder}</div>`;
+
+            const badgeHtml = config.badge
+                ? `<div class="enh-item-badge ${config.badge.class}">${config.badge.text}</div>`
+                : '';
+
+            const durationHtml = config.duration && isTrack
+                ? `<div class="enh-item-duration">
+                     ${escapeHtml(config.duration)}
+                     <button class="enh-item-play-btn" title="Stream this track">▶</button>
+                   </div>`
+                : '';
+
+            elem.innerHTML = `
+                ${imageHtml}
+                <div class="enh-item-info">
+                    <div class="enh-item-name">${escapeHtml(config.name)}</div>
+                    <div class="enh-item-meta">${escapeHtml(config.meta)}</div>
+                </div>
+                ${durationHtml}
+                ${badgeHtml}
+            `;
+
+            elem.addEventListener('click', config.onClick);
+
+            // Add play button handler for tracks
+            if (isTrack && config.onPlay) {
+                const playBtn = elem.querySelector('.enh-item-play-btn');
+                if (playBtn) {
+                    playBtn.addEventListener('click', (e) => {
+                        e.stopPropagation(); // Don't trigger main onClick
+                        config.onPlay();
+                    });
+                }
+            }
+
+            list.appendChild(elem);
+
+            // Extract colors from image for dynamic glow effect
+            if (config.image) {
+                extractImageColors(config.image, (colors) => {
+                    applyDynamicGlow(elem, colors);
+                });
+            }
+        });
+    }
+
+    async function handleEnhancedSearchAlbumClick(album) {
+        console.log(`💿 Enhanced search album clicked: ${album.name} by ${album.artist}`);
+
+        hideDropdown();
+        showLoadingOverlay('Loading album...');
+
+        try {
+            // Fetch full album data with tracks — pass source for correct routing
+            const albumParams = new URLSearchParams({ name: album.name || '', artist: album.artist || '' });
+            if (_activeSearchSource && _activeSearchSource !== 'spotify') {
+                albumParams.set('source', _activeSearchSource);
+            }
+            // Pass Hydrabase plugin origin so server routes to correct client
+            if (album.external_urls?.hydrabase_plugin) {
+                albumParams.set('plugin', album.external_urls.hydrabase_plugin);
+            }
+            const response = await fetch(`/api/spotify/album/${album.id}?${albumParams}`);
+
+            if (!response.ok) {
+                if (response.status === 401) {
+                    throw new Error('Spotify not authenticated. Please check your API settings.');
+                }
+                throw new Error(`Failed to load album: ${response.status}`);
+            }
+
+            const albumData = await response.json();
+
+            if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+                hideLoadingOverlay();
+                showToast(`No tracks available for "${album.name}". This release may have been delisted or is not available in your region.`, 'warning');
+                return;
+            }
+
+            console.log(`✅ Loaded ${albumData.tracks.length} tracks for ${albumData.name}`);
+
+            // Create virtual playlist ID for enhanced search albums
+            const virtualPlaylistId = `enhanced_search_album_${album.id}`;
+
+            // Check if modal already exists and show it
+            if (activeDownloadProcesses[virtualPlaylistId]) {
+                console.log(`📱 Reopening existing modal for ${album.name}`);
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process.modalElement) {
+                    if (process.status === 'complete') {
+                        showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+                    }
+                    process.modalElement.style.display = 'flex';
+                    hideLoadingOverlay();
+                    return;
+                }
+            }
+
+            // Enrich each track with full album object (needed for wishlist functionality)
+            const enrichedTracks = albumData.tracks.map(track => ({
+                ...track,
+                album: {
+                    name: albumData.name,
+                    id: albumData.id,
+                    album_type: albumData.album_type || 'album',
+                    images: albumData.images || [],
+                    release_date: albumData.release_date,
+                    total_tracks: albumData.total_tracks
+                }
+            }));
+
+            console.log(`📦 Enriched ${enrichedTracks.length} tracks with album metadata`);
+
+            // Format playlist name
+            const playlistName = `[${album.artist}] ${albumData.name}`;
+
+            // Create artist object for the modal — extract ID from album data
+            const firstArtist = (albumData.artists || [])[0] || {};
+            const artistObject = {
+                id: firstArtist.id || album.id?.split?.('_')?.[0] || '',
+                name: firstArtist.name || album.artist,
+                image_url: firstArtist.image_url || firstArtist.images?.[0]?.url || '',
+                source: _activeSearchSource || '',
+            };
+
+            // Prepare full album object for modal
+            const fullAlbumObject = {
+                name: albumData.name,
+                id: albumData.id,
+                album_type: albumData.album_type || 'album',
+                images: albumData.images || [],
+                release_date: albumData.release_date,
+                total_tracks: albumData.total_tracks,
+                artists: albumData.artists || [{ name: album.artist }]
+            };
+
+            // Open download missing tracks modal
+            await openDownloadMissingModalForArtistAlbum(
+                virtualPlaylistId,
+                playlistName,
+                enrichedTracks,
+                fullAlbumObject,
+                artistObject,
+                false // Don't show loading overlay, we already have one
+            );
+
+            // Register this download in search bubbles
+            registerSearchDownload(
+                {
+                    id: album.id,
+                    name: albumData.name,
+                    artist: album.artist,
+                    image_url: albumData.images?.[0]?.url || null,
+                    images: albumData.images || []
+                },
+                'album',
+                virtualPlaylistId,
+                album.artist // artistName for grouping
+            );
+
+            hideLoadingOverlay();
+
+        } catch (error) {
+            hideLoadingOverlay();
+            console.error('❌ Error handling enhanced search album click:', error);
+            showToast(`Error opening album: ${error.message}`, 'error');
+        }
+    }
+
+    async function streamEnhancedSearchTrack(track) {
+        console.log(`▶️ Stream enhanced search track: ${track.name} by ${track.artist}`);
+
+        hideDropdown();
+        showLoadingOverlay(`Searching for ${track.name}...`);
+
+        try {
+            // Send track metadata to backend for quick slskd search
+            const response = await fetch('/api/enhanced-search/stream-track', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    track_name: track.name,
+                    artist_name: track.artist,
+                    album_name: track.album,
+                    duration_ms: track.duration_ms
+                })
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || 'Failed to search for track');
+            }
+
+            const data = await response.json();
+
+            if (!data.success || !data.result) {
+                throw new Error('No suitable track found');
+            }
+
+            const slskdResult = data.result;
+
+            // Check if audio format is supported (YouTube/Tidal use encoded filenames, skip check)
+            const isStreamingSource = slskdResult.username === 'youtube' || slskdResult.username === 'tidal' || slskdResult.username === 'qobuz' || slskdResult.username === 'hifi';
+            if (!isStreamingSource && slskdResult.filename && !isAudioFormatSupported(slskdResult.filename)) {
+                const format = getFileExtension(slskdResult.filename);
+                hideLoadingOverlay();
+                showToast(`Sorry, ${format.toUpperCase()} format is not supported in your browser. Try downloading instead.`, 'error');
+                return;
+            }
+
+            console.log(`✅ Found track to stream:`, slskdResult);
+            console.log(`🎵 Track details - Username: ${slskdResult.username}, Filename: ${slskdResult.filename}`);
+
+            hideLoadingOverlay();
+
+            // Use existing startStream function to play the track
+            console.log(`📡 Calling startStream() with result...`);
+            await startStream(slskdResult);
+            console.log(`✅ startStream() completed`);
+
+        } catch (error) {
+            hideLoadingOverlay();
+            console.error('❌ Error streaming enhanced search track:', error);
+            showToast(`Failed to stream track: ${error.message}`, 'error');
+        }
+    }
+
+    async function handleEnhancedSearchTrackClick(track) {
+        console.log(`🎵 Enhanced search track clicked: ${track.name} by ${track.artist}`);
+
+        hideDropdown();
+        showLoadingOverlay('Loading track...');
+
+        try {
+            // Create virtual playlist ID for enhanced search tracks
+            const virtualPlaylistId = `enhanced_search_track_${track.id}`;
+
+            // Check if modal already exists and show it
+            if (activeDownloadProcesses[virtualPlaylistId]) {
+                console.log(`📱 Reopening existing modal for ${track.name}`);
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process.modalElement) {
+                    if (process.status === 'complete') {
+                        showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+                    }
+                    process.modalElement.style.display = 'flex';
+                    hideLoadingOverlay();
+                    return;
+                }
+            }
+
+            // Enrich track with album object (needed for wishlist functionality)
+            const enrichedTrack = {
+                id: track.id,
+                name: track.name,
+                artists: [track.artist], // Convert string to array for modal compatibility
+                album: {
+                    name: track.album,
+                    id: null,
+                    album_type: 'single',
+                    images: track.image_url ? [{ url: track.image_url }] : [],
+                    release_date: track.release_date || null,
+                    total_tracks: 1
+                },
+                duration_ms: track.duration_ms,
+                popularity: track.popularity || 0,
+                preview_url: track.preview_url || null,
+                external_urls: track.external_urls || null,
+                image_url: track.image_url
+            };
+
+            console.log(`📦 Enriched track with album metadata`);
+
+            // Format playlist name
+            const playlistName = `${track.artist} - ${track.name}`;
+
+            // Create minimal artist object for the modal
+            const artistObject = {
+                id: null,
+                name: track.artist
+            };
+
+            // Prepare album object for modal (single track)
+            const albumObject = {
+                name: track.album,
+                id: null,
+                album_type: 'single',
+                images: track.image_url ? [{ url: track.image_url }] : [],
+                release_date: track.release_date || null,
+                total_tracks: 1,
+                artists: [{ name: track.artist }]
+            };
+
+            // Open download missing tracks modal with single track
+            await openDownloadMissingModalForArtistAlbum(
+                virtualPlaylistId,
+                playlistName,
+                [enrichedTrack], // Array with single track
+                albumObject,
+                artistObject,
+                false
+            );
+
+            // Register this download in search bubbles
+            registerSearchDownload(
+                {
+                    id: track.id,
+                    name: track.name,
+                    artist: track.artist,
+                    image_url: track.image_url,
+                    images: track.image_url ? [{ url: track.image_url }] : []
+                },
+                'track',
+                virtualPlaylistId,
+                track.artist // artistName for grouping
+            );
+
+            hideLoadingOverlay();
+
+        } catch (error) {
+            hideLoadingOverlay();
+            console.error('❌ Error handling enhanced search track click:', error);
+            showToast(`Error opening track: ${error.message}`, 'error');
+        }
+    }
+
+    async function searchSlskdFor(type, item) {
+        const mainResultsArea = document.getElementById('enhanced-main-results-area');
+        if (!mainResultsArea) return;
+
+        // Show loading in main results area
+        mainResultsArea.innerHTML = `
+            <div style="text-align: center; padding: 60px 20px; color: rgba(255,255,255,0.7);">
+                <div style="width: 40px; height: 40px; margin: 0 auto 16px; border: 3px solid rgba(138,43,226,0.2); border-top-color: rgba(138,43,226,0.8); border-radius: 50%; animation: spin 1s linear infinite;"></div>
+                <p>Searching for ${type === 'album' ? 'album' : 'track'}...</p>
+            </div>
+        `;
+
+        const query = `${item.artist} ${item.name}`;
+
+        try {
+            const response = await fetch('/api/search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query })
+            });
+
+            const data = await response.json();
+
+            if (data.error) {
+                showToast(`Search error: ${data.error}`, 'error');
+                return;
+            }
+
+            // Filter results
+            const filtered = data.results.filter(r => r.result_type === type);
+
+            // Render slskd results in main area
+            renderSlskdInMainArea(filtered, type, item);
+
+        } catch (error) {
+            console.error('Slskd search error:', error);
+            showToast('Search failed', 'error');
+            mainResultsArea.innerHTML = '<div class="search-results-placeholder"><p>Search failed. Please try again.</p></div>';
+        }
+    }
+
+    function renderSlskdInMainArea(results, type, originalItem) {
+        const mainResultsArea = document.getElementById('enhanced-main-results-area');
+        if (!mainResultsArea) return;
+
+        if (!results || results.length === 0) {
+            mainResultsArea.innerHTML = '<div class="search-results-placeholder"><p>No matches found for this ' + type + '.</p></div>';
+            return;
+        }
+
+        // Render results using same style as basic search
+        mainResultsArea.innerHTML = results.map(result => {
+            const title = type === 'album'
+                ? `${result.album_title} (${result.tracks ? result.tracks.length : 0} tracks)`
+                : result.title;
+
+            return `
+                <div class="result-card">
+                    <div class="result-card-header">
+                        <h4 class="result-title">${escapeHtml(title)}</h4>
+                        <button class="download-result-btn" data-result='${JSON.stringify(result).replace(/'/g, "&#39;")}' data-type="${type}">
+                            💾 Download
+                        </button>
+                    </div>
+                    <div class="result-meta">
+                        ${result.bitrate ? `<span class="meta-badge">${result.bitrate} kbps</span>` : ''}
+                        ${result.format ? `<span class="meta-badge">${result.format.toUpperCase()}</span>` : ''}
+                        ${result.size ? `<span class="meta-badge">${(result.size / 1024 / 1024).toFixed(1)} MB</span>` : ''}
+                        ${result.username ? `<span class="meta-badge">👤 ${escapeHtml(result.username)}</span>` : ''}
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        // Attach download handlers
+        mainResultsArea.querySelectorAll('.download-result-btn').forEach(btn => {
+            btn.addEventListener('click', async function () {
+                const result = JSON.parse(this.dataset.result);
+                const type = this.dataset.type;
+
+                this.disabled = true;
+                this.textContent = 'Downloading...';
+
+                try {
+                    const downloadData = type === 'album'
+                        ? { result_type: 'album', tracks: result.tracks || [] }
+                        : { result_type: 'track', username: result.username, filename: result.filename, size: result.size };
+
+                    const response = await fetch('/api/download', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(downloadData)
+                    });
+
+                    const data = await response.json();
+
+                    if (data.error) {
+                        showToast(`Download error: ${data.error}`, 'error');
+                        this.disabled = false;
+                        this.innerHTML = '💾 Download';
+                    } else {
+                        showToast('Download started!', 'success');
+                        this.innerHTML = '✅ Added';
+                    }
+                } catch (error) {
+                    console.error('Download error:', error);
+                    showToast('Download failed', 'error');
+                    this.disabled = false;
+                    this.innerHTML = '💾 Download';
+                }
+            });
+        });
+    }
+
+    function showDropdown() {
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown) {
+            dropdown.classList.remove('hidden');
+            updateToggleButtonState();
+        }
+        // Hide the page header + search mode toggle to reclaim space
+        const header = document.querySelector('#downloads-page .downloads-header');
+        const modeToggle = document.querySelector('.search-mode-toggle-container');
+        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
+        if (header) header.classList.add('enh-results-active-hide');
+        if (modeToggle) modeToggle.classList.add('enh-results-active-hide');
+        if (slskdPlaceholder) slskdPlaceholder.classList.add('enh-results-active-hide');
+    }
+
+    function hideDropdown() {
+        const dropdown = document.getElementById('enhanced-dropdown');
+        if (dropdown) {
+            dropdown.classList.add('hidden');
+            updateToggleButtonState();
+        }
+        // Restore hidden elements
+        const header = document.querySelector('#downloads-page .downloads-header');
+        const modeToggle = document.querySelector('.search-mode-toggle-container');
+        const slskdPlaceholder = document.querySelector('#enhanced-search-section .search-results-container');
+        if (header) header.classList.remove('enh-results-active-hide');
+        if (modeToggle) modeToggle.classList.remove('enh-results-active-hide');
+        if (slskdPlaceholder) slskdPlaceholder.classList.remove('enh-results-active-hide');
+    }
+
+    function updateToggleButtonState() {
+        // Get fresh references
+        const btn = document.getElementById('enhanced-search-btn');
+        const dropdown = document.getElementById('enhanced-dropdown');
+
+        if (!btn || !dropdown) return;
+
+        const btnIcon = btn.querySelector('.btn-icon');
+        const btnText = btn.querySelector('.btn-text');
+
+        if (dropdown.classList.contains('hidden')) {
+            // Dropdown is hidden - button should say "Show Results"
+            if (btnIcon) btnIcon.textContent = '👁️';
+            if (btnText) btnText.textContent = 'Show Results';
+        } else {
+            // Dropdown is visible - button should say "Hide Results"
+            if (btnIcon) btnIcon.textContent = '🙈';
+            if (btnText) btnText.textContent = 'Hide Results';
+        }
+    }
+}
+
+async function performSearch() {
+    const query = document.getElementById('search-input').value.trim();
+    if (!query) {
+        showToast('Please enter a search term', 'error');
+        return;
+    }
+
+    try {
+        showLoadingOverlay('Searching...');
+        displaySearchResults([]);  // Clear previous results
+
+        const response = await fetch(API.search, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query })
+        });
+
+        const data = await response.json();
+
+        if (data.error) {
+            showToast(`Search error: ${data.error}`, 'error');
+            return;
+        }
+
+        searchResults = data.results || [];
+        displaySearchResults(searchResults);
+
+        if (searchResults.length === 0) {
+            showToast('No results found', 'error');
+        } else {
+            showToast(`Found ${searchResults.length} results`, 'success');
+        }
+
+    } catch (error) {
+        console.error('Error performing search:', error);
+        showToast('Search failed', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function displaySearchResults(results) {
+    const resultsContainer = document.getElementById('search-results');
+
+    if (!results.length) {
+        resultsContainer.innerHTML = '<div class="no-results">No search results</div>';
+        return;
+    }
+
+    resultsContainer.innerHTML = results.map((result, index) => {
+        const isAlbum = result.type === 'album';
+        const sizeText = isAlbum ?
+            `${result.track_count || 0} tracks, ${(result.size_mb || 0).toFixed(1)} MB` :
+            `${(result.file_size / 1024 / 1024).toFixed(1)} MB, ${result.bitrate || 0}kbps`;
+
+        return `
+            <div class="search-result-item" onclick="selectResult(${index})">
+                <div class="result-header">
+                    <div class="result-info">
+                        <div class="result-title">${escapeHtml(result.title)}</div>
+                        <div class="result-artist">${escapeHtml(result.artist)}</div>
+                        ${result.album ? `<div class="result-album">${escapeHtml(result.album)}</div>` : ''}
+                    </div>
+                    <div class="result-actions">
+                        <button class="stream-button" onclick="event.stopPropagation(); streamTrack(${index})">
+                            ▷ Stream
+                        </button>
+                        <button class="download-button" onclick="event.stopPropagation(); startDownload(${index})">
+                            ⬇ Download
+                        </button>
+                    </div>
+                </div>
+                <div class="result-details">
+                    <span class="result-size">${sizeText}</span>
+                    <span class="result-user">by ${escapeHtml(result.username)}</span>
+                    ${result.quality ? `<span class="result-quality">${escapeHtml(result.quality)}</span>` : ''}
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function selectResult(index) {
+    const result = searchResults[index];
+    if (!result) return;
+
+    console.log('Selected result:', result);
+    // Could show detailed view or additional actions here
+}
+
+
+async function startDownload(index) {
+    const result = searchResults[index];
+    if (!result) return;
+
+    try {
+        const response = await fetch('/api/downloads/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(result)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast('Download started', 'success');
+        } else {
+            showToast(`Download failed: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error starting download:', error);
+        showToast('Failed to start download', 'error');
+    }
+}
+
+// ===============================
+// PAGE DATA LOADING
+// ===============================
+
+async function loadInitialData() {
+    try {
+        // Load artist bubble state first
+        await hydrateArtistBubblesFromSnapshot();
+
+        // Load search bubble state
+        await hydrateSearchBubblesFromSnapshot();
+
+        // Load discover download state
+        await hydrateDiscoverDownloadsFromSnapshot();
+
+        // Navigate to user's home page (or dashboard for admin)
+        const homePage = getProfileHomePage();
+        const urlPage = _getPageFromPath();
+        const targetPage = (urlPage && urlPage !== 'dashboard' && isPageAllowed(urlPage))
+            ? urlPage
+            : homePage;
+
+        history.replaceState({ page: targetPage }, '', (targetPage === 'dashboard' ? '/' : '/' + targetPage) + window.location.search + window.location.hash);
+
+        if (targetPage !== 'dashboard') {
+            navigateToPage(targetPage, { skipPushState: true });
+        } else {
+            await loadDashboardData();
+            loadDashboardSyncHistory();
+        }
+    } catch (error) {
+        console.error('Error loading initial data:', error);
+    }
+}
+
+async function loadDashboardData() {
+    try {
+        const response = await fetch(API.activity);
+        const data = await response.json();
+
+        const activityFeed = document.getElementById('activity-feed');
+        if (data.activities && data.activities.length) {
+            activityFeed.innerHTML = data.activities.map(activity => `
+                <div class="activity-item">
+                    <span class="activity-time">${activity.time}</span>
+                    <span class="activity-text">${escapeHtml(activity.text)}</span>
+                </div>
+            `).join('');
+        }
+
+        // Initialize wishlist count when dashboard loads
+        await updateWishlistCount();
+
+        // Start periodic refresh of wishlist count (every 30 seconds, matching GUI behavior)
+        stopWishlistCountPolling(); // Ensure no duplicates
+        wishlistCountInterval = setInterval(updateWishlistCount, 30000);
+
+    } catch (error) {
+        console.error('Error loading dashboard data:', error);
+    }
+}
+
+// ===========================================
+
diff --git a/webui/static/settings.js b/webui/static/settings.js
new file mode 100644
index 00000000..7d10dabf
--- /dev/null
+++ b/webui/static/settings.js
@@ -0,0 +1,3658 @@
+// SUPPORT MODAL
+// ===============================
+
+function showSupportModal() {
+    const overlay = document.getElementById('support-modal-overlay');
+    if (overlay) overlay.classList.remove('hidden');
+}
+
+function closeSupportModal() {
+    const overlay = document.getElementById('support-modal-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+async function copyAddress(address, cryptoName) {
+    try {
+        // navigator.clipboard requires HTTPS — use fallback for HTTP (Docker)
+        if (navigator.clipboard && window.isSecureContext) {
+            await navigator.clipboard.writeText(address);
+        } else {
+            const textarea = document.createElement('textarea');
+            textarea.value = address;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+        }
+        showToast(`${cryptoName} address copied to clipboard`, 'success');
+    } catch (error) {
+        console.error('Failed to copy address:', error);
+        // Show the address so user can copy manually
+        showToast(`${cryptoName}: ${address}`, 'info');
+    }
+}
+
+// ===============================
+// SETTINGS FUNCTIONALITY
+// ===============================
+
+let settingsAutoSaveTimer = null;
+
+function debouncedAutoSaveSettings() {
+    if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
+    settingsAutoSaveTimer = setTimeout(() => saveSettings(true), 2000);
+}
+
+function handleManualSaveClick() {
+    if (settingsAutoSaveTimer) clearTimeout(settingsAutoSaveTimer);
+    saveSettings(false);
+}
+
+function initializeSettings() {
+    // This function is called when the settings page is loaded.
+    // It attaches event listeners to all interactive elements on the page.
+
+    // Accent color listeners (live preview + custom picker toggle)
+    initAccentColorListeners();
+
+    // Main save button (manual save, non-quiet)
+    // Uses named function reference so addEventListener deduplicates across repeated calls
+    const saveButton = document.getElementById('save-settings');
+    if (saveButton) {
+        saveButton.addEventListener('click', handleManualSaveClick);
+    }
+
+    // Debounced auto-save on all settings inputs
+    // Uses named function reference (debouncedAutoSaveSettings) so addEventListener deduplicates
+    const settingsPage = document.getElementById('settings-page');
+    if (settingsPage) {
+        settingsPage.querySelectorAll('input[type="text"], input[type="url"], input[type="password"], input[type="number"], input[type="range"]').forEach(input => {
+            input.addEventListener('input', debouncedAutoSaveSettings);
+        });
+        settingsPage.querySelectorAll('input[type="checkbox"], select').forEach(input => {
+            input.addEventListener('change', debouncedAutoSaveSettings);
+        });
+    }
+
+    // Server toggle buttons
+    const plexToggle = document.getElementById('plex-toggle');
+    if (plexToggle) {
+        plexToggle.addEventListener('click', () => toggleServer('plex'));
+    }
+    const jellyfinToggle = document.getElementById('jellyfin-toggle');
+    if (jellyfinToggle) {
+        jellyfinToggle.addEventListener('click', () => toggleServer('jellyfin'));
+    }
+
+    // Auto-detect buttons
+    const detectSlskdBtn = document.querySelector('#soulseek-url + .detect-button');
+    if (detectSlskdBtn) {
+        detectSlskdBtn.addEventListener('click', autoDetectSlskd);
+    }
+    const detectPlexBtn = document.querySelector('#plex-container .detect-button');
+    if (detectPlexBtn) {
+        detectPlexBtn.addEventListener('click', autoDetectPlex);
+    }
+    const detectJellyfinBtn = document.querySelector('#jellyfin-container .detect-button');
+    if (detectJellyfinBtn) {
+        detectJellyfinBtn.addEventListener('click', autoDetectJellyfin);
+    }
+
+    // Test connection buttons
+    // Test button event listeners removed - they use onclick attributes in HTML to avoid double firing
+}
+
+function resetFileOrganizationTemplates() {
+    // Reset templates to defaults
+    const defaults = {
+        album: '$albumartist/$albumartist - $album/$track - $title',
+        single: '$artist/$artist - $title/$title',
+        playlist: '$playlist/$artist - $title',
+        video: '$artist/$title-video'
+    };
+
+    document.getElementById('template-album-path').value = defaults.album;
+    document.getElementById('template-single-path').value = defaults.single;
+    document.getElementById('template-playlist-path').value = defaults.playlist;
+    document.getElementById('template-video-path').value = defaults.video;
+
+    debouncedAutoSaveSettings();
+}
+
+function validateFileOrganizationTemplates() {
+    const errors = [];
+
+    // Valid variables for each template type
+    const validVars = {
+        album: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$disc', '$discnum', '$cdnum', '$year', '$quality'],
+        single: ['$artist', '$albumartist', '$artistletter', '$album', '$albumtype', '$title', '$track', '$year', '$quality'],
+        playlist: ['$artist', '$artistletter', '$playlist', '$title', '$year', '$quality'],
+        video: ['$artist', '$artistletter', '$title', '$year']
+    };
+
+    // Get template values
+    const albumPath = document.getElementById('template-album-path').value.trim();
+    const singlePath = document.getElementById('template-single-path').value.trim();
+    const playlistPath = document.getElementById('template-playlist-path').value.trim();
+
+    // Validate album template
+    if (albumPath) {
+        if (albumPath.endsWith('/')) {
+            errors.push('Album template cannot end with /');
+        }
+        if (albumPath.startsWith('/')) {
+            errors.push('Album template cannot start with /');
+        }
+        if (!albumPath.includes('/')) {
+            errors.push('Album template must include at least one folder (use / separator)');
+        }
+        if (albumPath.includes('//')) {
+            errors.push('Album template cannot have consecutive slashes //');
+        }
+        // Check for likely typos of valid variables (case-insensitive to catch $Album, $ARTIST, etc.)
+        const albumVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
+        const foundVars = albumPath.match(albumVarPattern) || [];
+        foundVars.forEach(v => {
+            // Normalize ${var} to $var for validation
+            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
+            const lowerVar = normalized.toLowerCase();
+            // Check if lowercase version exists in valid vars
+            const isValid = validVars.album.some(validVar => validVar.toLowerCase() === lowerVar);
+            if (!isValid) {
+                errors.push(`Invalid variable "${normalized}" in album template. Valid: ${validVars.album.join(', ')}`);
+            } else if (normalized !== lowerVar && validVars.album.includes(lowerVar)) {
+                // Variable is valid but has wrong case
+                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
+            }
+        });
+    }
+
+    // Validate single template
+    if (singlePath) {
+        if (singlePath.endsWith('/')) {
+            errors.push('Single template cannot end with /');
+        }
+        if (singlePath.startsWith('/')) {
+            errors.push('Single template cannot start with /');
+        }
+        // Note: single template is allowed to have no slash (flat file: "$artist - $title")
+        if (singlePath.includes('//')) {
+            errors.push('Single template cannot have consecutive slashes //');
+        }
+        const singleVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
+        const foundVars = singlePath.match(singleVarPattern) || [];
+        foundVars.forEach(v => {
+            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
+            const lowerVar = normalized.toLowerCase();
+            const isValid = validVars.single.some(validVar => validVar.toLowerCase() === lowerVar);
+            if (!isValid) {
+                errors.push(`Invalid variable "${normalized}" in single template. Valid: ${validVars.single.join(', ')}`);
+            } else if (normalized !== lowerVar && validVars.single.includes(lowerVar)) {
+                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
+            }
+        });
+    }
+
+    // Validate playlist template
+    if (playlistPath) {
+        if (playlistPath.endsWith('/')) {
+            errors.push('Playlist template cannot end with /');
+        }
+        if (playlistPath.startsWith('/')) {
+            errors.push('Playlist template cannot start with /');
+        }
+        if (!playlistPath.includes('/')) {
+            errors.push('Playlist template must include at least one folder (use / separator)');
+        }
+        if (playlistPath.includes('//')) {
+            errors.push('Playlist template cannot have consecutive slashes //');
+        }
+        const playlistVarPattern = /\$\{([a-zA-Z]+)\}|\$([a-zA-Z]+)/g;
+        const foundVars = playlistPath.match(playlistVarPattern) || [];
+        foundVars.forEach(v => {
+            const normalized = v.startsWith('${') ? '$' + v.slice(2, -1) : v;
+            const lowerVar = normalized.toLowerCase();
+            const isValid = validVars.playlist.some(validVar => validVar.toLowerCase() === lowerVar);
+            if (!isValid) {
+                errors.push(`Invalid variable "${normalized}" in playlist template. Valid: ${validVars.playlist.join(', ')}`);
+            } else if (normalized !== lowerVar && validVars.playlist.includes(lowerVar)) {
+                errors.push(`Variable "${normalized}" should be lowercase: "${lowerVar}"`);
+            }
+        });
+    }
+
+    return errors;
+}
+
+// Settings redesign — tab switching + service accordions
+function switchSettingsTab(tab) {
+    // Update tab bar
+    document.querySelectorAll('.stg-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tab));
+    // Show/hide settings groups and section headers by data-stg attribute
+    document.querySelectorAll('#settings-page [data-stg]').forEach(g => {
+        g.style.display = g.dataset.stg === tab ? '' : 'none';
+    });
+    // Re-apply collapsed state on section bodies (tab switch resets inline display)
+    document.querySelectorAll('#settings-page .settings-section-body.collapsed').forEach(b => {
+        b.style.display = 'none';
+    });
+    // Also hide/show the column wrappers if they're empty in this tab
+    document.querySelectorAll('#settings-page .settings-left-column, #settings-page .settings-right-column, #settings-page .settings-third-column').forEach(col => {
+        const hasVisible = Array.from(col.querySelectorAll('.settings-group[data-stg]')).some(g => g.style.display !== 'none');
+        col.style.display = hasVisible ? '' : 'none';
+    });
+    // Re-apply conditional visibility (quality profile, source containers, etc.)
+    if (typeof updateDownloadSourceUI === 'function') {
+        try { updateDownloadSourceUI(); } catch (e) { }
+    }
+    // Load DB maintenance info when switching to Advanced tab
+    if (tab === 'advanced' && typeof loadDbMaintenanceInfo === 'function') {
+        try { loadDbMaintenanceInfo(); } catch (e) { }
+    }
+    // Initialize live log viewer when switching to Logs tab
+    if (tab === 'logs') {
+        _logViewerInit();
+    } else {
+        _logViewerStop();
+    }
+    // Refresh the green/yellow header gradient when arriving on Connections
+    if (tab === 'connections') {
+        try { applyServiceStatusGradients(); } catch (e) { }
+    }
+}
+
+// ── Settings → Connections: per-service status gradient + verify wiring ──
+// Gradient shows green when the user has filled in credentials, yellow when empty.
+// It's based purely on config presence (cheap, no API calls). The verify layer —
+// which runs on expand / Expand All — surfaces whether those credentials actually
+// work, via an inline warning bar inside the expanded panel.
+
+let _stgServiceStatusState = {};  // service -> {configured: bool}
+let _stgServiceVerifyInFlight = {};  // service -> true while a verify call is running
+
+async function applyServiceStatusGradients() {
+    try {
+        const resp = await fetch('/api/settings/config-status');
+        if (!resp.ok) return;
+        const data = await resp.json();
+        _stgServiceStatusState = data || {};
+        document.querySelectorAll('#settings-page .stg-service[data-service]').forEach(card => {
+            const service = card.getAttribute('data-service');
+            const header = card.querySelector('.stg-service-header');
+            if (!service || !header) return;
+            const configured = !!(data[service] && data[service].configured);
+            header.classList.toggle('status-configured', configured);
+            header.classList.toggle('status-missing', !configured);
+            // Ensure the header has a spinner placeholder for the verify-checking state
+            if (!header.querySelector('.stg-service-verify-spinner')) {
+                const spinner = document.createElement('span');
+                spinner.className = 'stg-service-verify-spinner';
+                // Insert before the chevron on the right
+                const chevron = header.querySelector('.stg-service-chevron');
+                if (chevron) header.insertBefore(spinner, chevron);
+                else header.appendChild(spinner);
+            }
+        });
+    } catch (e) {
+        console.warn('[Settings Status] Failed to apply gradients:', e);
+    }
+}
+
+function _stgSetCheckingState(service, isChecking) {
+    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
+    if (!card) return;
+    const header = card.querySelector('.stg-service-header');
+    const body = card.querySelector('.stg-service-body');
+    if (header) {
+        header.classList.toggle('status-checking', !!isChecking);
+        // Lazy-create the spinner element so it's there even if
+        // applyServiceStatusGradients() hasn't run yet.
+        if (!header.querySelector('.stg-service-verify-spinner')) {
+            const spinner = document.createElement('span');
+            spinner.className = 'stg-service-verify-spinner';
+            const chevron = header.querySelector('.stg-service-chevron');
+            if (chevron) header.insertBefore(spinner, chevron);
+            else header.appendChild(spinner);
+        }
+    }
+    if (!body) return;
+    const existing = body.querySelector('.stg-service-verify-status');
+    if (isChecking) {
+        if (!existing) {
+            const status = document.createElement('div');
+            status.className = 'stg-service-verify-status';
+            status.textContent = 'Testing connection…';
+            body.insertBefore(status, body.firstChild);
+        }
+    } else if (existing) {
+        existing.remove();
+    }
+}
+
+function _stgShowVerifyWarning(service, message) {
+    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
+    if (!card) return;
+    const body = card.querySelector('.stg-service-body');
+    if (!body) return;
+    const existing = body.querySelector('.stg-service-warning');
+    if (existing) existing.remove();
+    const warning = document.createElement('div');
+    warning.className = 'stg-service-warning';
+    warning.innerHTML = `
+        <span class="stg-service-warning-icon">&#9888;</span>
+        <span class="stg-service-warning-text"></span>
+    `;
+    warning.querySelector('.stg-service-warning-text').textContent =
+        message || 'Connection test failed.';
+    body.insertBefore(warning, body.firstChild);
+}
+
+function _stgClearVerifyWarning(service) {
+    const card = document.querySelector(`#settings-page .stg-service[data-service="${service}"]`);
+    if (!card) return;
+    const existing = card.querySelector('.stg-service-warning');
+    if (existing) existing.remove();
+}
+
+async function _stgRefreshAfterSave() {
+    // Called after a successful settings save. Cheap gradient refresh always,
+    // plus re-verify any cards the user currently has expanded (so they see
+    // immediate feedback on credentials they just edited). Collapsed cards
+    // keep their cached verify result until the user expands them.
+    try {
+        await applyServiceStatusGradients();
+        const expandedServices = Array.from(
+            document.querySelectorAll('#settings-page .stg-service.expanded[data-service]')
+        )
+            .map(card => card.getAttribute('data-service'))
+            .filter(Boolean);
+        if (expandedServices.length > 0) {
+            _stgVerifyServices(expandedServices, { force: true });
+        }
+    } catch (e) {
+        console.warn('[Settings Status] Post-save refresh failed:', e);
+    }
+}
+
+async function _stgVerifyServices(services, { force = false } = {}) {
+    if (!services || !services.length) return {};
+    // Mark all as checking immediately so the user sees spinners/status lines
+    services.forEach(svc => {
+        _stgServiceVerifyInFlight[svc] = true;
+        _stgSetCheckingState(svc, true);
+        _stgClearVerifyWarning(svc);
+    });
+    try {
+        const url = '/api/settings/verify' + (force ? '?force=true' : '');
+        const resp = await fetch(url, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ services })
+        });
+        const data = await resp.json();
+        services.forEach(svc => {
+            _stgServiceVerifyInFlight[svc] = false;
+            _stgSetCheckingState(svc, false);
+            const result = data[svc];
+            if (result && result.success === false) {
+                _stgShowVerifyWarning(svc, result.error || result.message || '');
+            }
+        });
+        return data;
+    } catch (e) {
+        console.warn('[Settings Verify] Network error:', e);
+        services.forEach(svc => {
+            _stgServiceVerifyInFlight[svc] = false;
+            _stgSetCheckingState(svc, false);
+            _stgShowVerifyWarning(svc, 'Unable to reach the verification endpoint.');
+        });
+        return {};
+    }
+}
+
+function toggleStgService(el) {
+    const service = el.closest('.stg-service');
+    if (service) {
+        const wasExpanded = service.classList.contains('expanded');
+        service.classList.toggle('expanded');
+        // Fire verify when expanding a single card (not on collapse). The backend
+        // caches per service for 5 min, so rapid expand/collapse won't re-ping.
+        if (!wasExpanded) {
+            const serviceName = service.getAttribute('data-service');
+            if (serviceName && !_stgServiceVerifyInFlight[serviceName]) {
+                _stgVerifyServices([serviceName]);
+            }
+        }
+    }
+}
+function toggleAllServiceAccordions(btn) {
+    const services = document.querySelectorAll('#settings-page .stg-service');
+    const allExpanded = Array.from(services).every(s => s.classList.contains('expanded'));
+    const willExpand = !allExpanded;
+    services.forEach(s => s.classList.toggle('expanded', willExpand));
+    btn.textContent = allExpanded ? 'Expand All' : 'Collapse All';
+
+    // On Expand All, fire a single batched verify for every service that has a
+    // data-service attribute. Backend caps concurrency at 3 to avoid rate limits.
+    // Skipped on Collapse All.
+    if (willExpand) {
+        const serviceNames = Array.from(services)
+            .map(s => s.getAttribute('data-service'))
+            .filter(Boolean)
+            .filter(name => !_stgServiceVerifyInFlight[name]);
+        if (serviceNames.length > 0) {
+            _stgVerifyServices(serviceNames);
+        }
+    }
+}
+
+// ── Hybrid source priority list (drag-and-drop) ──
+const HYBRID_SOURCES = [
+    { id: 'soulseek', name: 'Soulseek', icon: 'https://raw.githubusercontent.com/slskd/slskd/master/docs/icon.png', emoji: '🎵' },
+    { id: 'youtube', name: 'YouTube', icon: 'https://www.svgrepo.com/show/13671/youtube.svg', emoji: '▶️' },
+    { id: 'tidal', name: 'Tidal', icon: 'https://www.svgrepo.com/show/519734/tidal.svg', emoji: '🌊' },
+    { id: 'qobuz', name: 'Qobuz', icon: 'https://www.svgrepo.com/show/504778/qobuz.svg', emoji: '🎧' },
+    { id: 'hifi', name: 'HiFi', icon: null, emoji: '🎶' },
+    { id: 'deezer_dl', name: 'Deezer', icon: 'https://www.svgrepo.com/show/519734/deezer.svg', emoji: '🎧' },
+    { id: 'lidarr', name: 'Lidarr', icon: null, emoji: '📦' },
+];
+
+let _hybridSourceOrder = ['soulseek', 'youtube'];
+let _hybridSourceEnabled = { soulseek: true, youtube: true, tidal: false, qobuz: false, hifi: false, deezer_dl: false, lidarr: false };
+let _hybridVisualOrder = null; // Full visual order including disabled sources
+
+function buildHybridSourceList() {
+    const container = document.getElementById('hybrid-source-list');
+    if (!container) return;
+
+    container.innerHTML = '';
+    // Build visual order: use persisted visual order, or enabled first + disabled at bottom
+    if (!_hybridVisualOrder) {
+        _hybridVisualOrder = [..._hybridSourceOrder];
+        for (const src of HYBRID_SOURCES) {
+            if (!_hybridVisualOrder.includes(src.id)) _hybridVisualOrder.push(src.id);
+        }
+    }
+    const allIds = _hybridVisualOrder;
+
+    allIds.forEach((srcId, idx) => {
+        const src = HYBRID_SOURCES.find(s => s.id === srcId);
+        if (!src) return;
+        const enabled = _hybridSourceEnabled[srcId] !== false;
+        const isInOrder = _hybridSourceOrder.includes(srcId);
+        const priorityNum = isInOrder && enabled ? _hybridSourceOrder.indexOf(srcId) + 1 : '';
+
+        const item = document.createElement('div');
+        item.className = `hybrid-source-item${enabled ? '' : ' disabled'}`;
+        item.draggable = true;
+        item.dataset.sourceId = srcId;
+
+        item.innerHTML = `
+            <span class="hybrid-source-arrows">
+                <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', -1)" title="Move up">▲</button>
+                <button class="hybrid-arrow-btn" onclick="moveHybridSource('${srcId}', 1)" title="Move down">▼</button>
+            </span>
+            ${src.icon
+                ? `<img class="hybrid-source-icon" src="${src.icon}" alt="${src.name}" onerror="this.outerHTML='<span class=\\'hybrid-source-icon emoji-icon\\'>${src.emoji}</span>'">`
+                : `<span class="hybrid-source-icon emoji-icon">${src.emoji}</span>`
+            }
+            <span class="hybrid-source-name">${src.name}</span>
+            <span class="hybrid-source-priority">${priorityNum}</span>
+            <label class="hybrid-source-toggle">
+                <input type="checkbox" ${enabled ? 'checked' : ''} onchange="toggleHybridSource('${srcId}', this.checked)">
+                <span class="toggle-track"></span>
+            </label>
+        `;
+
+        container.appendChild(item);
+    });
+
+    // Sync hidden selects for backward compat
+    _syncHybridHiddenSelects();
+}
+
+function moveHybridSource(srcId, direction) {
+    if (!_hybridVisualOrder) return;
+    const idx = _hybridVisualOrder.indexOf(srcId);
+    if (idx < 0) return;
+    const newIdx = idx + direction;
+    if (newIdx < 0 || newIdx >= _hybridVisualOrder.length) return;
+
+    // Swap in visual order
+    [_hybridVisualOrder[idx], _hybridVisualOrder[newIdx]] = [_hybridVisualOrder[newIdx], _hybridVisualOrder[idx]];
+
+    // Rebuild enabled order from visual order
+    _hybridSourceOrder = _hybridVisualOrder.filter(id => _hybridSourceEnabled[id] !== false);
+    buildHybridSourceList();
+    updateDownloadSourceUI();
+    debouncedAutoSaveSettings();
+}
+
+function toggleHybridSource(srcId, enabled) {
+    _hybridSourceEnabled[srcId] = enabled;
+    // Rebuild enabled order from visual order so priority matches position
+    if (_hybridVisualOrder) {
+        _hybridSourceOrder = _hybridVisualOrder.filter(id => _hybridSourceEnabled[id] !== false);
+    }
+    buildHybridSourceList();
+    updateDownloadSourceUI();
+    debouncedAutoSaveSettings();
+}
+
+function _syncHybridOrderFromDOM() {
+    const container = document.getElementById('hybrid-source-list');
+    if (!container) return;
+    const items = container.querySelectorAll('.hybrid-source-item');
+    const newOrder = [];
+    items.forEach(item => {
+        const id = item.dataset.sourceId;
+        if (_hybridSourceEnabled[id] !== false) {
+            newOrder.push(id);
+        }
+    });
+    _hybridSourceOrder = newOrder;
+}
+
+function _syncHybridHiddenSelects() {
+    // Keep hidden selects in sync for backward compat with saveSettings
+    const primary = document.getElementById('hybrid-primary-source');
+    const secondary = document.getElementById('hybrid-secondary-source');
+    if (primary && _hybridSourceOrder.length > 0) primary.value = _hybridSourceOrder[0];
+    if (secondary && _hybridSourceOrder.length > 1) secondary.value = _hybridSourceOrder[1];
+}
+
+function getHybridOrder() {
+    return _hybridSourceOrder.filter(s => _hybridSourceEnabled[s] !== false);
+}
+
+function loadHybridSourceOrder(settings) {
+    const order = settings.download_source?.hybrid_order;
+    const sourceStatus = settings._source_status || {};
+
+    if (order && Array.isArray(order) && order.length > 0) {
+        _hybridSourceOrder = order;
+        _hybridSourceEnabled = {};
+        for (const src of HYBRID_SOURCES) {
+            _hybridSourceEnabled[src.id] = order.includes(src.id);
+        }
+    } else {
+        // Legacy: fall back to primary/secondary
+        const primary = settings.download_source?.hybrid_primary || 'soulseek';
+        const secondary = settings.download_source?.hybrid_secondary || 'youtube';
+        _hybridSourceOrder = [primary, secondary];
+        _hybridSourceEnabled = {};
+        for (const src of HYBRID_SOURCES) {
+            _hybridSourceEnabled[src.id] = src.id === primary || src.id === secondary;
+        }
+    }
+
+    // Auto-disable sources that aren't configured on the server
+    let changed = false;
+    for (const src of HYBRID_SOURCES) {
+        if (_hybridSourceEnabled[src.id] && sourceStatus[src.id] === false) {
+            _hybridSourceEnabled[src.id] = false;
+            changed = true;
+        }
+    }
+    if (changed) {
+        _hybridSourceOrder = _hybridSourceOrder.filter(id => _hybridSourceEnabled[id] !== false);
+    }
+
+    _hybridVisualOrder = null; // Reset so buildHybridSourceList rebuilds it
+    buildHybridSourceList();
+}
+
+function updateLossyBitrateOptions() {
+    const codec = document.getElementById('lossy-copy-codec')?.value || 'mp3';
+    const bitrateSelect = document.getElementById('lossy-copy-bitrate');
+    if (!bitrateSelect) return;
+    const opt320 = bitrateSelect.querySelector('option[value="320"]');
+    if (codec === 'opus') {
+        // Opus max is 256kbps per channel — hide 320 option
+        if (opt320) opt320.disabled = true;
+        if (bitrateSelect.value === '320') bitrateSelect.value = '256';
+    } else {
+        if (opt320) opt320.disabled = false;
+    }
+}
+
+function updatePlexConfigurationButtons() {
+    const plexUrl = document.getElementById('plex-url');
+    const plexToken = document.getElementById('plex-token');
+    const hasPlexConfig = Boolean((plexUrl?.value || '').trim() || (plexToken?.value || '').trim());
+    const plexViewConfigButton = document.getElementById('plex-view-config-button');
+    const plexLinkToPlexButton = document.getElementById('plex-link-to-plex-button');
+    const plexManualConfigButton = document.getElementById('plex-manual-config-button');
+    const plexUrlActions = document.getElementById('plex-url-actions');
+    const plexTokenActions = document.getElementById('plex-token-actions');
+    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
+
+    if (plexViewConfigButton) plexViewConfigButton.style.display = hasPlexConfig ? '' : 'none';
+    if (plexLinkToPlexButton) plexLinkToPlexButton.style.display = hasPlexConfig ? 'none' : '';
+    if (plexManualConfigButton) plexManualConfigButton.style.display = hasPlexConfig ? 'none' : '';
+    if (plexUrlActions) plexUrlActions.style.display = hasPlexConfig ? 'none' : 'flex';
+    if (plexTokenActions) plexTokenActions.style.display = hasPlexConfig ? 'none' : 'flex';
+    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
+}
+
+async function loadSettingsData() {
+    try {
+        const response = await fetch(API.settings);
+        const settings = await response.json();
+
+        // Populate Spotify settings
+        document.getElementById('spotify-client-id').value = settings.spotify?.client_id || '';
+        document.getElementById('spotify-client-secret').value = settings.spotify?.client_secret || '';
+        document.getElementById('spotify-redirect-uri').value = settings.spotify?.redirect_uri || 'http://127.0.0.1:8888/callback';
+        document.getElementById('spotify-callback-display').textContent = settings.spotify?.redirect_uri || 'http://127.0.0.1:8888/callback';
+
+        // Populate Tidal settings
+        document.getElementById('tidal-client-id').value = settings.tidal?.client_id || '';
+        document.getElementById('tidal-client-secret').value = settings.tidal?.client_secret || '';
+        document.getElementById('tidal-redirect-uri').value = settings.tidal?.redirect_uri || 'http://127.0.0.1:8889/tidal/callback';
+        document.getElementById('tidal-callback-display').textContent = settings.tidal?.redirect_uri || 'http://127.0.0.1:8889/tidal/callback';
+
+        // Populate Deezer OAuth settings
+        document.getElementById('deezer-app-id').value = settings.deezer?.app_id || '';
+        document.getElementById('deezer-app-secret').value = settings.deezer?.app_secret || '';
+        document.getElementById('deezer-redirect-uri').value = settings.deezer?.redirect_uri || 'http://127.0.0.1:8008/deezer/callback';
+        document.getElementById('deezer-callback-display').textContent = settings.deezer?.redirect_uri || 'http://127.0.0.1:8008/deezer/callback';
+
+        // Add event listeners to update display URLs when input changes
+        document.getElementById('spotify-redirect-uri').addEventListener('input', function () {
+            document.getElementById('spotify-callback-display').textContent = this.value || 'http://127.0.0.1:8888/callback';
+        });
+
+        document.getElementById('tidal-redirect-uri').addEventListener('input', function () {
+            document.getElementById('tidal-callback-display').textContent = this.value || 'http://127.0.0.1:8889/tidal/callback';
+        });
+
+        document.getElementById('deezer-redirect-uri').addEventListener('input', function () {
+            document.getElementById('deezer-callback-display').textContent = this.value || 'http://127.0.0.1:8008/deezer/callback';
+        });
+
+        // Populate Plex settings
+        const plexUrlInput = document.getElementById('plex-url');
+        const plexTokenInput = document.getElementById('plex-token');
+        if (plexUrlInput) plexUrlInput.value = settings.plex?.base_url || '';
+        if (plexTokenInput) plexTokenInput.value = settings.plex?.token || '';
+        if (plexUrlInput) plexUrlInput.addEventListener('input', updatePlexConfigurationButtons);
+        if (plexTokenInput) plexTokenInput.addEventListener('input', updatePlexConfigurationButtons);
+        updatePlexConfigurationButtons();
+
+        // Populate Jellyfin settings
+        document.getElementById('jellyfin-url').value = settings.jellyfin?.base_url || '';
+        document.getElementById('jellyfin-api-key').value = settings.jellyfin?.api_key || '';
+        document.getElementById('jellyfin-timeout').value = settings.jellyfin?.api_timeout || 120;
+
+        // Populate Navidrome settings
+        document.getElementById('navidrome-url').value = settings.navidrome?.base_url || '';
+        document.getElementById('navidrome-username').value = settings.navidrome?.username || '';
+        document.getElementById('navidrome-password').value = settings.navidrome?.password || '';
+
+        // Set active server and toggle visibility
+        const activeServer = settings.active_media_server || 'plex';
+        toggleServer(activeServer);
+
+        // Load Plex music libraries if Plex is the active server
+        if (activeServer === 'plex') {
+            loadPlexMusicLibraries();
+        }
+
+        // Load Jellyfin users and music libraries if Jellyfin is the active server
+        if (activeServer === 'jellyfin') {
+            loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
+        }
+
+        // Load Navidrome music folders if Navidrome is the active server
+        if (activeServer === 'navidrome') {
+            loadNavidromeMusicFolders();
+        }
+
+        // Populate Soulseek settings
+        document.getElementById('soulseek-url').value = settings.soulseek?.slskd_url || '';
+        document.getElementById('soulseek-api-key').value = settings.soulseek?.api_key || '';
+        document.getElementById('soulseek-search-timeout').value = settings.soulseek?.search_timeout || 60;
+        document.getElementById('soulseek-search-timeout-buffer').value = settings.soulseek?.search_timeout_buffer || 15;
+        document.getElementById('soulseek-min-peer-speed').value = settings.soulseek?.min_peer_upload_speed || 0;
+        document.getElementById('soulseek-max-peer-queue').value = settings.soulseek?.max_peer_queue || 0;
+        document.getElementById('soulseek-download-timeout').value = Math.round((settings.soulseek?.download_timeout || 600) / 60);
+        document.getElementById('soulseek-auto-clear-searches').checked = settings.soulseek?.auto_clear_searches !== false;
+
+        // Populate ListenBrainz settings
+        document.getElementById('listenbrainz-base-url').value = settings.listenbrainz?.base_url || '';
+        document.getElementById('listenbrainz-token').value = settings.listenbrainz?.token || '';
+
+        // Populate AcoustID settings
+        document.getElementById('acoustid-api-key').value = settings.acoustid?.api_key || '';
+        document.getElementById('acoustid-enabled').checked = settings.acoustid?.enabled || false;
+
+        // Populate Last.fm settings
+        document.getElementById('lastfm-api-key').value = settings.lastfm?.api_key || '';
+        document.getElementById('lastfm-api-secret').value = settings.lastfm?.api_secret || '';
+        document.getElementById('lastfm-scrobble-enabled').checked = settings.lastfm?.scrobble_enabled === true;
+        const lfmStatus = document.getElementById('lastfm-scrobble-status');
+        if (lfmStatus) {
+            lfmStatus.textContent = settings.lastfm?.session_key ? 'Authorized' : 'Not authorized';
+        }
+
+        // Populate ListenBrainz scrobble toggle
+        document.getElementById('listenbrainz-scrobble-enabled').checked = settings.listenbrainz?.scrobble_enabled === true;
+
+        // Populate Genius settings
+        document.getElementById('genius-access-token').value = settings.genius?.access_token || '';
+
+        // Populate iTunes settings
+        document.getElementById('itunes-country').value = settings.itunes?.country || 'US';
+
+        // Populate Discogs settings
+        document.getElementById('discogs-token').value = settings.discogs?.token || '';
+
+        // Populate Metadata source setting
+        document.getElementById('metadata-fallback-source').value = settings.metadata?.fallback_source || 'itunes';
+
+        // Populate Hydrabase settings
+        const hbConfig = settings.hydrabase || {};
+        document.getElementById('hydrabase-url').value = hbConfig.url || '';
+        document.getElementById('hydrabase-api-key').value = hbConfig.api_key || '';
+        document.getElementById('hydrabase-auto-connect').checked = hbConfig.auto_connect || false;
+        // Check live connection status + add Hydrabase to fallback dropdown if connected
+        fetch('/api/hydrabase/status').then(r => r.json()).then(s => {
+            const btn = document.getElementById('hydrabase-connect-btn');
+            const statusEl = document.getElementById('hydrabase-settings-status');
+            if (s.connected) {
+                if (btn) btn.textContent = 'Disconnect';
+                if (statusEl) { statusEl.textContent = 'Connected'; statusEl.style.color = '#4caf50'; }
+                // Add Hydrabase to fallback source dropdown
+                const fbSelect = document.getElementById('metadata-fallback-source');
+                if (fbSelect && !fbSelect.querySelector('option[value="hydrabase"]')) {
+                    const opt = document.createElement('option');
+                    opt.value = 'hydrabase';
+                    opt.textContent = 'Hydrabase (P2P)';
+                    fbSelect.appendChild(opt);
+                }
+                // Restore selection if it was hydrabase
+                if ((settings.metadata?.fallback_source) === 'hydrabase') {
+                    fbSelect.value = 'hydrabase';
+                }
+            }
+        }).catch(() => { });
+
+        // Populate Download settings (right column)
+        document.getElementById('download-path').value = settings.soulseek?.download_path || './downloads';
+        document.getElementById('transfer-path').value = settings.soulseek?.transfer_path || './Transfer';
+        document.getElementById('staging-path').value = settings.import?.staging_path || './Staging';
+        document.getElementById('music-videos-path').value = settings.library?.music_videos_path || './MusicVideos';
+
+        // Populate Download Source settings
+        document.getElementById('download-source-mode').value = settings.download_source?.mode || 'soulseek';
+        document.getElementById('stream-source').value = settings.download_source?.stream_source || 'youtube';
+        document.getElementById('max-concurrent-downloads').value = settings.download_source?.max_concurrent || '3';
+        loadHybridSourceOrder(settings);
+        document.getElementById('tidal-download-quality').value = settings.tidal_download?.quality || 'lossless';
+        document.getElementById('tidal-allow-fallback').checked = settings.tidal_download?.allow_fallback !== false;
+        document.getElementById('qobuz-quality').value = settings.qobuz?.quality || 'lossless';
+        document.getElementById('qobuz-allow-fallback').checked = settings.qobuz?.allow_fallback !== false;
+        document.getElementById('hifi-download-quality').value = settings.hifi_download?.quality || 'lossless';
+        document.getElementById('hifi-allow-fallback').checked = settings.hifi_download?.allow_fallback !== false;
+        document.getElementById('deezer-download-quality').value = settings.deezer_download?.quality || 'flac';
+        document.getElementById('deezer-allow-fallback').checked = settings.deezer_download?.allow_fallback !== false;
+        document.getElementById('deezer-download-arl').value = settings.deezer_download?.arl || '';
+        document.getElementById('lidarr-url').value = settings.lidarr_download?.url || '';
+        document.getElementById('lidarr-api-key').value = settings.lidarr_download?.api_key || '';
+        // Sync ARL to connections tab field + bidirectional listeners
+        const _connArl = document.getElementById('deezer-connection-arl');
+        const _dlArl = document.getElementById('deezer-download-arl');
+        if (_connArl) _connArl.value = settings.deezer_download?.arl || '';
+        if (_connArl && _dlArl) {
+            _connArl.addEventListener('input', () => { _dlArl.value = _connArl.value; });
+            _dlArl.addEventListener('input', () => { _connArl.value = _dlArl.value; });
+        }
+
+        // Populate YouTube settings
+        document.getElementById('youtube-cookies-browser').value = settings.youtube?.cookies_browser || '';
+        document.getElementById('youtube-download-delay').value = settings.youtube?.download_delay ?? 3;
+
+        // Update UI based on download source mode
+        updateDownloadSourceUI();
+
+        // Populate Database settings
+        document.getElementById('max-workers').value = settings.database?.max_workers || '5';
+
+        // Populate Post-Processing settings
+        document.getElementById('metadata-enabled').checked = settings.metadata_enhancement?.enabled !== false;
+        document.getElementById('embed-album-art').checked = settings.metadata_enhancement?.embed_album_art !== false;
+        document.getElementById('cover-art-download').checked = settings.metadata_enhancement?.cover_art_download !== false;
+        document.getElementById('prefer-caa-art').checked = settings.metadata_enhancement?.prefer_caa_art === true;
+        document.getElementById('lrclib-enabled').checked = settings.metadata_enhancement?.lrclib_enabled !== false;
+        document.getElementById('replaygain-enabled').checked = settings.post_processing?.replaygain_enabled === true;
+        // Load service master toggles
+        document.getElementById('embed-spotify').checked = settings.spotify?.embed_tags !== false;
+        document.getElementById('embed-itunes').checked = settings.itunes?.embed_tags !== false;
+        document.getElementById('embed-musicbrainz').checked = settings.musicbrainz?.embed_tags !== false;
+        document.getElementById('embed-deezer').checked = settings.deezer?.embed_tags !== false;
+        document.getElementById('embed-audiodb').checked = settings.audiodb?.embed_tags !== false;
+        document.getElementById('embed-tidal').checked = settings.tidal?.embed_tags !== false;
+        document.getElementById('embed-qobuz').checked = settings.qobuz?.embed_tags !== false;
+        document.getElementById('embed-lastfm').checked = settings.lastfm?.embed_tags !== false;
+        document.getElementById('embed-genius').checked = settings.genius?.embed_tags !== false;
+        // Load per-tag toggles from data-config attributes
+        document.querySelectorAll('[data-config]').forEach(cb => {
+            const path = cb.dataset.config.split('.');
+            let val = settings;
+            for (const key of path) { val = val?.[key]; }
+            cb.checked = val !== false;
+        });
+        // Apply service disabled state to child tags
+        ['spotify', 'itunes', 'musicbrainz', 'deezer', 'audiodb', 'tidal', 'qobuz', 'lastfm', 'genius'].forEach(svc => {
+            const master = document.getElementById('embed-' + svc);
+            if (master) toggleServiceTags(master, svc);
+        });
+        document.getElementById('post-processing-options').style.display = settings.metadata_enhancement?.enabled !== false ? 'block' : 'none';
+
+        // Populate File Organization settings
+        document.getElementById('file-organization-enabled').checked = settings.file_organization?.enabled !== false;
+        document.getElementById('template-album-path').value = settings.file_organization?.templates?.album_path || '$albumartist/$albumartist - $album/$track - $title';
+        document.getElementById('template-single-path').value = settings.file_organization?.templates?.single_path || '$artist/$artist - $title/$title';
+        document.getElementById('template-playlist-path').value = settings.file_organization?.templates?.playlist_path || '$playlist/$artist - $title';
+        document.getElementById('template-video-path').value = settings.file_organization?.templates?.video_path || '$artist/$title-video';
+        document.getElementById('disc-label').value = settings.file_organization?.disc_label || 'Disc';
+        document.getElementById('collab-artist-mode').value = settings.file_organization?.collab_artist_mode || 'first';
+        document.getElementById('artist-separator').value = settings.metadata_enhancement?.tags?.artist_separator || ', ';
+        document.getElementById('write-multi-artist').checked = settings.metadata_enhancement?.tags?.write_multi_artist || false;
+        document.getElementById('feat-in-title').checked = settings.metadata_enhancement?.tags?.feat_in_title || false;
+        document.getElementById('allow-duplicate-tracks').checked = settings.wishlist?.allow_duplicate_tracks !== false;
+
+        // Populate Playlist Sync settings
+        document.getElementById('create-backup').checked = settings.playlist_sync?.create_backup !== false;
+
+        // Populate Post-Download Conversion settings
+        document.getElementById('downsample-hires').checked = settings.lossy_copy?.downsample_hires === true;
+        document.getElementById('lossy-copy-enabled').checked = settings.lossy_copy?.enabled === true;
+        document.getElementById('lossy-copy-codec').value = settings.lossy_copy?.codec || 'mp3';
+        document.getElementById('lossy-copy-bitrate').value = settings.lossy_copy?.bitrate || '320';
+        updateLossyBitrateOptions();
+        document.getElementById('lossy-copy-delete-original').checked = settings.lossy_copy?.delete_original === true;
+
+        // Populate Listening Stats settings
+        document.getElementById('listening-stats-enabled').checked = settings.listening_stats?.enabled === true;
+        document.getElementById('listening-stats-interval').value = settings.listening_stats?.poll_interval || 30;
+        document.getElementById('lossy-copy-options').style.display =
+            settings.lossy_copy?.enabled ? 'block' : 'none';
+
+        // Populate Music Library Paths
+        const _musicPaths = settings.library?.music_paths || [];
+        renderMusicPaths(_musicPaths);
+
+        // Populate Content Filter settings
+        document.getElementById('allow-explicit').checked = settings.content_filter?.allow_explicit !== false;
+
+        // Populate Genre Whitelist
+        const gwEnabled = settings.genre_whitelist?.enabled === true;
+        document.getElementById('genre-whitelist-enabled').checked = gwEnabled;
+        const gwContainer = document.getElementById('genre-whitelist-container');
+        if (gwContainer) gwContainer.style.display = gwEnabled ? '' : 'none';
+        if (gwEnabled) {
+            _genreWhitelistRender(settings.genre_whitelist?.genres || []);
+        }
+
+        // Populate Import settings
+        document.getElementById('import-replace-lower-quality').checked = settings.import?.replace_lower_quality === true;
+
+        // Populate M3U Export settings
+        document.getElementById('m3u-export-enabled').checked = settings.m3u_export?.enabled === true;
+        document.getElementById('m3u-entry-base-path').value = settings.m3u_export?.entry_base_path || '';
+
+        // Populate UI Appearance settings
+        const accentPreset = settings.ui_appearance?.accent_preset || '#1db954';
+        const accentCustom = settings.ui_appearance?.accent_color || '#1db954';
+        const presetSelect = document.getElementById('accent-preset');
+        const customPicker = document.getElementById('accent-custom-color');
+        const customGroup = document.getElementById('custom-color-group');
+        if (presetSelect) {
+            // Check if the saved preset matches a dropdown option
+            const presetOptions = Array.from(presetSelect.options).map(o => o.value);
+            if (presetOptions.includes(accentPreset)) {
+                presetSelect.value = accentPreset;
+            } else {
+                presetSelect.value = 'custom';
+            }
+            if (presetSelect.value === 'custom') {
+                if (customGroup) customGroup.style.display = '';
+                if (customPicker) customPicker.value = accentCustom;
+                applyAccentColor(accentCustom);
+            } else {
+                if (customGroup) customGroup.style.display = 'none';
+                applyAccentColor(accentPreset);
+            }
+        }
+
+        // Sidebar visualizer type
+        const vizType = settings.ui_appearance?.sidebar_visualizer || 'bars';
+        const vizSelect = document.getElementById('sidebar-visualizer-type');
+        if (vizSelect) vizSelect.value = vizType;
+        sidebarVisualizerType = vizType;
+
+        // Background particles toggle
+        const particlesEnabled = settings.ui_appearance?.particles_enabled !== false; // default true
+        const particlesCheckbox = document.getElementById('particles-enabled');
+        if (particlesCheckbox) particlesCheckbox.checked = particlesEnabled;
+        applyParticlesSetting(particlesEnabled);
+
+        // Worker orbs toggle
+        const workerOrbsEnabled = settings.ui_appearance?.worker_orbs_enabled !== false; // default true
+        const workerOrbsCheckbox = document.getElementById('worker-orbs-enabled');
+        if (workerOrbsCheckbox) workerOrbsCheckbox.checked = workerOrbsEnabled;
+        applyWorkerOrbsSetting(workerOrbsEnabled);
+
+        // Reduce effects toggle
+        const reduceEffects = settings.ui_appearance?.reduce_effects === true; // default false
+        const reduceCheckbox = document.getElementById('reduce-effects-enabled');
+        if (reduceCheckbox) reduceCheckbox.checked = reduceEffects;
+        applyReduceEffects(reduceEffects);
+
+        // Populate Logging information
+        const logLevelSelect = document.getElementById('log-level-select');
+        if (logLevelSelect) logLevelSelect.value = settings.logging?.level || 'INFO';
+        document.getElementById('log-path-display').textContent = settings.logging?.path || 'logs/app.log';
+
+        // Load Discovery Lookback Period setting
+        try {
+            const lookbackResponse = await fetch('/api/discovery/lookback-period');
+            const lookbackData = await lookbackResponse.json();
+            if (lookbackData.period) {
+                document.getElementById('discovery-lookback-period').value = lookbackData.period;
+            }
+        } catch (error) {
+            console.error('Error loading discovery lookback period:', error);
+        }
+
+        // Load Hemisphere setting
+        try {
+            const hemiResponse = await fetch('/api/discovery/hemisphere');
+            const hemiData = await hemiResponse.json();
+            if (hemiData.hemisphere) {
+                document.getElementById('discovery-hemisphere').value = hemiData.hemisphere;
+            }
+        } catch (error) {
+            console.error('Error loading hemisphere setting:', error);
+        }
+
+        // Load current log level
+        try {
+            const logLevelResponse = await fetch('/api/settings/log-level');
+            const logLevelData = await logLevelResponse.json();
+            if (logLevelData.success && logLevelData.level) {
+                document.getElementById('log-level-select').value = logLevelData.level;
+            }
+        } catch (error) {
+            console.error('Error loading log level:', error);
+        }
+
+        // Load security settings
+        try {
+            const requirePin = settings.security?.require_pin_on_launch || false;
+            document.getElementById('security-require-pin').checked = requirePin;
+
+            // Check if admin has a PIN set
+            const profilesRes = await fetch('/api/profiles');
+            const profilesData = await profilesRes.json();
+            const adminProfile = (profilesData.profiles || []).find(p => p.is_admin);
+            const adminHasPin = adminProfile?.has_pin || false;
+
+            // Show/hide PIN setup vs change sections
+            document.getElementById('security-pin-setup').style.display = adminHasPin ? 'none' : 'block';
+            document.getElementById('security-change-pin-section').style.display = adminHasPin ? 'block' : 'none';
+
+            // If no PIN, disable the toggle
+            if (!adminHasPin) {
+                document.getElementById('security-require-pin').checked = false;
+                document.getElementById('security-require-pin').disabled = true;
+            }
+        } catch (error) {
+            console.error('Error loading security settings:', error);
+        }
+
+        // Check dev mode status
+        try {
+            const devResponse = await fetch('/api/dev-mode');
+            const devData = await devResponse.json();
+            if (devData.enabled) {
+                document.getElementById('dev-mode-status').textContent = 'Active';
+                document.getElementById('dev-mode-status').style.color = 'rgb(var(--accent-light-rgb))';
+                document.getElementById('hydrabase-nav').style.display = '';
+                document.getElementById('hydrabase-button-container').style.display = '';
+            }
+        } catch (error) {
+            console.error('Error checking dev mode:', error);
+        }
+
+    } catch (error) {
+        console.error('Error loading settings:', error);
+        showToast('Failed to load settings', 'error');
+    }
+}
+
+async function changeLogLevel() {
+    const selector = document.getElementById('log-level-select');
+    const level = selector.value;
+
+    try {
+        const response = await fetch('/api/settings/log-level', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ level: level })
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            showToast(`Log level changed to ${level}`, 'success');
+            console.log(`Log level changed to: ${level}`);
+        } else {
+            showToast(`Failed to change log level: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error changing log level:', error);
+        showToast('Failed to change log level', 'error');
+    }
+}
+
+function updateMediaServerFields() {
+    const serverType = document.getElementById('media-server-type').value;
+    const urlInput = document.getElementById('media-server-url');
+    const tokenInput = document.getElementById('media-server-token');
+
+    if (serverType === 'plex') {
+        urlInput.placeholder = 'http://localhost:32400';
+        tokenInput.placeholder = 'Plex Token';
+    } else {
+        urlInput.placeholder = 'http://localhost:8096';
+        tokenInput.placeholder = 'Jellyfin API Key';
+    }
+}
+
+let _plexPinAuthRequestId = null;
+let _plexPinAuthPollInterval = null;
+
+function showPlexConfiguration(disableFields = false, isManualConfig = false) {
+    stopPlexPinAuthPolling();
+    const plexConfig = document.getElementById('plex-configuration');
+    const plexSetup = document.getElementById('plex-setup');
+    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
+    const plexUrl = document.getElementById('plex-url');
+    const plexToken = document.getElementById('plex-token');
+    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
+
+    if (plexConfig) plexConfig.style.display = '';
+    if (plexSetup) plexSetup.style.display = 'none';
+    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
+    if (plexUrl) plexUrl.disabled = disableFields;
+    if (plexToken) plexToken.disabled = disableFields;
+    if (plexLibraryContainer && isManualConfig) {
+        plexLibraryContainer.style.display = 'none';
+    }
+    setPlexConfigActionButton(isManualConfig);
+    updatePlexConfigurationButtons();
+}
+
+function showPlexSetup() {
+    const plexConfig = document.getElementById('plex-configuration');
+    const plexSetup = document.getElementById('plex-setup');
+    const plexPinAuthFlow = document.getElementById('plex-pin-auth-flow');
+    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
+
+    if (plexConfig) plexConfig.style.display = 'none';
+    if (plexSetup) plexSetup.style.display = '';
+    if (plexPinAuthFlow) plexPinAuthFlow.style.display = 'none';
+    if (plexLibraryContainer) plexLibraryContainer.style.display = 'none';
+    setPlexConfigActionButton(false);
+}
+
+function setPlexConfigActionButton(isManualConfig) {
+    const actionButton = document.getElementById('plex-config-action-button');
+    if (!actionButton) return;
+
+    if (isManualConfig) {
+        actionButton.textContent = 'Cancel';
+        actionButton.onclick = showPlexSetup;
+        actionButton.title = 'Cancel manual Plex configuration';
+    } else {
+        actionButton.textContent = 'Clear Configuration';
+        actionButton.onclick = clearPlexConfiguration;
+        actionButton.title = 'Clear saved Plex configuration';
+    }
+}
+
+async function startPlexPinAuth() {
+    const setupButtons = document.getElementById('plex-setup-buttons');
+    const authFlow = document.getElementById('plex-pin-auth-flow');
+    const statusEl = document.getElementById('plex-pin-status');
+    if (setupButtons) setupButtons.style.display = 'none';
+    if (authFlow) authFlow.style.display = '';
+    if (statusEl) statusEl.textContent = 'Starting Plex authorization...';
+
+    try {
+        showLoadingOverlay('Starting Plex authorization...');
+        const response = await fetch('/api/plex/pin/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to start Plex PIN flow');
+        }
+
+        _plexPinAuthRequestId = result.request_id;
+        const pinCodeEl = document.getElementById('plex-pin-code');
+        if (pinCodeEl) pinCodeEl.textContent = result.code || '';
+        if (statusEl) {
+            statusEl.textContent = result.expires_in
+                ? `Enter this code at plex.tv/link. Code expires in ${result.expires_in} seconds.`
+                : 'Enter this code at plex.tv/link. Waiting for authorization...';
+        }
+
+        startPlexPinAuthPolling();
+    } catch (error) {
+        console.error('Plex PIN auth start failed:', error);
+        showToast(error.message || 'Failed to start Plex authorization', 'error');
+        cancelPlexPinAuth();
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function startPlexPinAuthPolling() {
+    stopPlexPinAuthPolling();
+    if (!_plexPinAuthRequestId) return;
+    _plexPinAuthPollInterval = setInterval(pollPlexPinAuthStatus, 5000);
+    pollPlexPinAuthStatus();
+}
+
+function stopPlexPinAuthPolling() {
+    if (_plexPinAuthPollInterval) {
+        clearInterval(_plexPinAuthPollInterval);
+        _plexPinAuthPollInterval = null;
+    }
+}
+
+async function pollPlexPinAuthStatus() {
+    if (!_plexPinAuthRequestId) return;
+    try {
+        const response = await fetch(`/api/plex/pin/status?request_id=${encodeURIComponent(_plexPinAuthRequestId)}`);
+        const result = await response.json();
+        const statusEl = document.getElementById('plex-pin-status');
+
+        if (!result.success && result.expired) {
+            if (statusEl) statusEl.textContent = 'PIN code expired. Generate a new code to continue.';
+            stopPlexPinAuthPolling();
+            return;
+        }
+
+        if (result.success) {
+            stopPlexPinAuthPolling();
+            if (statusEl) statusEl.textContent = 'Authorization complete! Saving Plex configuration...';
+            document.getElementById('plex-url').value = result.found_url || '';
+            document.getElementById('plex-token').value = result.token || '';
+            if (typeof saveSettings === 'function') {
+                await saveSettings(true);
+            }
+            showToast('Plex successfully linked', 'success');
+            showPlexConfiguration(true);
+            await testConnection('plex');
+            return;
+        }
+
+        if (result.status) {
+            if (statusEl) statusEl.textContent = result.status;
+            return;
+        }
+
+        if (result.error) {
+            if (statusEl) statusEl.textContent = result.error;
+            return;
+        }
+    } catch (error) {
+        console.error('Error polling Plex PIN status:', error);
+        const statusEl = document.getElementById('plex-pin-status');
+        if (statusEl) statusEl.textContent = 'Unable to contact Plex auth status. Retrying...';
+    }
+}
+
+function cancelPlexPinAuth() {
+    stopPlexPinAuthPolling();
+    _plexPinAuthRequestId = null;
+    const setupButtons = document.getElementById('plex-setup-buttons');
+    const authFlow = document.getElementById('plex-pin-auth-flow');
+    if (setupButtons) setupButtons.style.display = '';
+    if (authFlow) authFlow.style.display = 'none';
+}
+
+function restartPlexPinAuth() {
+    cancelPlexPinAuth();
+    startPlexPinAuth();
+}
+
+async function clearPlexConfiguration() {
+    cancelPlexPinAuth();
+    const plexUrl = document.getElementById('plex-url');
+    const plexToken = document.getElementById('plex-token');
+    const plexConfig = document.getElementById('plex-configuration');
+    const plexSetup = document.getElementById('plex-setup');
+    const plexSetupButtons = document.getElementById('plex-setup-buttons');
+    const plexViewConfigButton = document.getElementById('plex-view-config-button');
+    const plexLinkToPlexButton = document.getElementById('plex-link-to-plex-button');
+    const plexManualConfigButton = document.getElementById('plex-manual-config-button');
+
+    if (plexUrl) plexUrl.value = '';
+    if (plexToken) plexToken.value = '';
+    if (plexConfig) plexConfig.style.display = 'none';
+    if (plexSetup) plexSetup.style.display = '';
+    if (plexSetupButtons) plexSetupButtons.style.display = '';
+    if (plexViewConfigButton) plexViewConfigButton.style.display = 'none';
+    if (plexLinkToPlexButton) plexLinkToPlexButton.style.display = '';
+    if (plexManualConfigButton) plexManualConfigButton.style.display = '';
+
+    const plexLibraryContainer = document.getElementById('plex-library-selector-container');
+    const plexLibrarySelect = document.getElementById('plex-music-library');
+    if (plexLibrarySelect) {
+        plexLibrarySelect.innerHTML = '<option value="">Select a music library</option>';
+    }
+    if (plexLibraryContainer) {
+        plexLibraryContainer.style.display = 'none';
+    }
+
+    updatePlexConfigurationButtons();
+
+    try {
+        await fetch('/api/plex/clear-library', { method: 'POST' });
+    } catch (e) {
+        console.warn('Failed to clear Plex library preference:', e);
+    }
+
+    if (typeof saveSettings === 'function') {
+        saveSettings(true);
+    }
+    if (typeof showToast === 'function') {
+        showToast('Plex configuration cleared', 'success');
+    }
+}
+
+function toggleServer(serverType) {
+    // Update toggle buttons
+    document.getElementById('plex-toggle').classList.remove('active');
+    document.getElementById('jellyfin-toggle').classList.remove('active');
+    document.getElementById('navidrome-toggle').classList.remove('active');
+    document.getElementById('soulsync-toggle')?.classList.remove('active');
+    document.getElementById(`${serverType}-toggle`)?.classList.add('active');
+
+    // Show/hide server containers
+    document.getElementById('plex-container').classList.toggle('hidden', serverType !== 'plex');
+    document.getElementById('jellyfin-container').classList.toggle('hidden', serverType !== 'jellyfin');
+    document.getElementById('navidrome-container').classList.toggle('hidden', serverType !== 'navidrome');
+    document.getElementById('soulsync-container')?.classList.toggle('hidden', serverType !== 'soulsync');
+
+    // Show Plex setup when Plex is selected; otherwise hide both Plex panels
+    const plexConfig = document.getElementById('plex-configuration');
+    const plexSetup = document.getElementById('plex-setup');
+    if (plexConfig) plexConfig.style.display = serverType === 'plex' ? 'none' : '';
+    if (plexSetup) plexSetup.style.display = serverType === 'plex' ? '' : 'none';
+
+    // Load Plex music libraries when switching to Plex
+    if (serverType === 'plex') {
+        loadPlexMusicLibraries();
+    }
+
+    // Load Jellyfin users and music libraries when switching to Jellyfin
+    if (serverType === 'jellyfin') {
+        loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
+    }
+
+    // Load Navidrome music folders when switching to Navidrome
+    if (serverType === 'navidrome') {
+        loadNavidromeMusicFolders();
+    }
+
+    // Auto-save after server toggle change
+    debouncedAutoSaveSettings();
+}
+
+function updateDownloadSourceUI() {
+    const mode = document.getElementById('download-source-mode').value;
+    const hybridContainer = document.getElementById('hybrid-settings-container');
+    const soulseekContainer = document.getElementById('soulseek-settings-container');
+    const tidalContainer = document.getElementById('tidal-download-settings-container');
+    const qobuzContainer = document.getElementById('qobuz-settings-container');
+    const youtubeContainer = document.getElementById('youtube-settings-container');
+    const hifiContainer = document.getElementById('hifi-download-settings-container');
+    const deezerDlContainer = document.getElementById('deezer-download-settings-container');
+    const lidarrContainer = document.getElementById('lidarr-download-settings-container');
+
+    hybridContainer.style.display = mode === 'hybrid' ? 'block' : 'none';
+
+    // Determine which sources are active
+    let activeSources = new Set();
+    if (mode === 'hybrid') {
+        const order = getHybridOrder();
+        for (const src of order) activeSources.add(src);
+        // Fallback: if no sources enabled, at least show soulseek
+        if (activeSources.size === 0) activeSources.add('soulseek');
+    } else {
+        activeSources.add(mode);
+    }
+
+    soulseekContainer.style.display = activeSources.has('soulseek') ? 'block' : 'none';
+    tidalContainer.style.display = activeSources.has('tidal') ? 'block' : 'none';
+    qobuzContainer.style.display = activeSources.has('qobuz') ? 'block' : 'none';
+    youtubeContainer.style.display = activeSources.has('youtube') ? 'block' : 'none';
+    hifiContainer.style.display = activeSources.has('hifi') ? 'block' : 'none';
+    if (deezerDlContainer) deezerDlContainer.style.display = activeSources.has('deezer_dl') ? 'block' : 'none';
+    if (lidarrContainer) lidarrContainer.style.display = activeSources.has('lidarr') ? 'block' : 'none';
+
+    // Quality profile is Soulseek-only and downloads-tab-only
+    const qualityProfileSection = document.getElementById('quality-profile-section');
+    if (qualityProfileSection) {
+        const activeTab = document.querySelector('.stg-tab.active');
+        const onDownloadsTab = activeTab && activeTab.dataset.tab === 'downloads';
+        qualityProfileSection.style.display = (activeSources.has('soulseek') && onDownloadsTab) ? '' : 'none';
+    }
+
+    if (activeSources.has('tidal')) {
+        checkTidalDownloadAuthStatus();
+    }
+    if (activeSources.has('qobuz')) {
+        checkQobuzAuthStatus();
+    }
+    if (activeSources.has('hifi')) {
+        testHiFiConnection();
+    }
+}
+
+function updateHybridSecondaryOptions() {
+    const primary = document.getElementById('hybrid-primary-source').value;
+    const secondary = document.getElementById('hybrid-secondary-source');
+    const currentValue = secondary.value;
+    const allSources = [
+        { value: 'soulseek', label: 'Soulseek' },
+        { value: 'youtube', label: 'YouTube' },
+        { value: 'tidal', label: 'Tidal' },
+        { value: 'qobuz', label: 'Qobuz' },
+        { value: 'hifi', label: 'HiFi' },
+    ];
+
+    secondary.innerHTML = '';
+    for (const source of allSources) {
+        if (source.value === primary) continue;
+        const opt = document.createElement('option');
+        opt.value = source.value;
+        opt.textContent = source.label;
+        secondary.appendChild(opt);
+    }
+
+    // Restore previous selection if still valid, otherwise pick first available
+    if (currentValue !== primary) {
+        secondary.value = currentValue;
+    }
+
+    // Refresh source-specific settings visibility based on new primary/secondary
+    updateDownloadSourceUI();
+}
+
+// ===============================
+// QUALITY PROFILE FUNCTIONS
+// ===============================
+
+let currentQualityProfile = null;
+
+async function loadQualityProfile() {
+    try {
+        const response = await fetch('/api/quality-profile');
+        const data = await response.json();
+
+        if (data.success) {
+            currentQualityProfile = data.profile;
+            populateQualityProfileUI(currentQualityProfile);
+        }
+    } catch (error) {
+        console.error('Error loading quality profile:', error);
+    }
+}
+
+function populateQualityProfileUI(profile) {
+    // Update preset buttons
+    document.querySelectorAll('.preset-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    const activePresetBtn = document.querySelector(`.preset-button[onclick*="${profile.preset}"]`);
+    if (activePresetBtn) {
+        activePresetBtn.classList.add('active');
+    }
+
+    // Populate each quality tier
+    const qualities = ['flac', 'mp3_320', 'mp3_256', 'mp3_192'];
+    qualities.forEach(quality => {
+        const config = profile.qualities[quality];
+        if (config) {
+            // Set enabled checkbox
+            const enabledCheckbox = document.getElementById(`quality-${quality}-enabled`);
+            if (enabledCheckbox) {
+                enabledCheckbox.checked = config.enabled;
+            }
+
+            // Set min/max sliders
+            const minSlider = document.getElementById(`${quality}-min`);
+            const maxSlider = document.getElementById(`${quality}-max`);
+            if (minSlider && maxSlider) {
+                minSlider.value = config.min_kbps;
+                maxSlider.value = config.max_kbps;
+                updateQualityRange(quality);
+            }
+
+            // Set priority display
+            const prioritySpan = document.getElementById(`priority-${quality}`);
+            if (prioritySpan) {
+                prioritySpan.textContent = `Priority: ${config.priority}`;
+            }
+
+            // Toggle sliders visibility
+            const sliders = document.getElementById(`sliders-${quality}`);
+            if (sliders) {
+                if (config.enabled) {
+                    sliders.classList.remove('disabled');
+                } else {
+                    sliders.classList.add('disabled');
+                }
+            }
+
+            // FLAC-specific: restore bit depth selector and fallback toggle
+            if (quality === 'flac') {
+                const bitDepthValue = config.bit_depth || 'any';
+                document.querySelectorAll('.bit-depth-btn').forEach(btn => {
+                    btn.classList.toggle('active', btn.getAttribute('data-value') === bitDepthValue);
+                });
+                const bitDepthSelector = document.getElementById('flac-bit-depth-selector');
+                if (bitDepthSelector) {
+                    if (config.enabled) {
+                        bitDepthSelector.classList.remove('disabled');
+                    } else {
+                        bitDepthSelector.classList.add('disabled');
+                    }
+                }
+                // Show/hide and restore fallback toggle
+                const fallbackToggle = document.getElementById('flac-fallback-toggle');
+                if (fallbackToggle) {
+                    fallbackToggle.style.display = bitDepthValue === 'any' ? 'none' : 'block';
+                }
+                const fallbackCb = document.getElementById('flac-bit-depth-fallback');
+                if (fallbackCb) {
+                    fallbackCb.checked = config.bit_depth_fallback !== false;
+                }
+            }
+        }
+    });
+
+    // Set fallback checkbox
+    const fallbackCheckbox = document.getElementById('quality-fallback-enabled');
+    if (fallbackCheckbox) {
+        fallbackCheckbox.checked = profile.fallback_enabled;
+    }
+}
+
+function updateQualityRange(quality) {
+    const minSlider = document.getElementById(`${quality}-min`);
+    const maxSlider = document.getElementById(`${quality}-max`);
+    const minValue = document.getElementById(`${quality}-min-value`);
+    const maxValue = document.getElementById(`${quality}-max-value`);
+
+    if (!minSlider || !maxSlider || !minValue || !maxValue) return;
+
+    let min = parseInt(minSlider.value);
+    let max = parseInt(maxSlider.value);
+
+    // Ensure min doesn't exceed max
+    if (min > max) {
+        min = max;
+        minSlider.value = min;
+    }
+
+    // Ensure max doesn't go below min
+    if (max < min) {
+        max = min;
+        maxSlider.value = max;
+    }
+
+    minValue.textContent = `${min} kbps`;
+    maxValue.textContent = `${max} kbps`;
+}
+
+function toggleQuality(quality) {
+    const checkbox = document.getElementById(`quality-${quality}-enabled`);
+    const sliders = document.getElementById(`sliders-${quality}`);
+
+    if (checkbox && sliders) {
+        if (checkbox.checked) {
+            sliders.classList.remove('disabled');
+        } else {
+            sliders.classList.add('disabled');
+        }
+    }
+
+    // Also toggle FLAC bit depth selector
+    if (quality === 'flac') {
+        const bitDepthSelector = document.getElementById('flac-bit-depth-selector');
+        if (bitDepthSelector && checkbox) {
+            if (checkbox.checked) {
+                bitDepthSelector.classList.remove('disabled');
+            } else {
+                bitDepthSelector.classList.add('disabled');
+            }
+        }
+    }
+
+    // Mark preset as custom when manually changing
+    if (currentQualityProfile) {
+        currentQualityProfile.preset = 'custom';
+        document.querySelectorAll('.preset-button').forEach(btn => {
+            btn.classList.remove('active');
+        });
+    }
+}
+
+function setFlacBitDepth(value) {
+    document.querySelectorAll('.bit-depth-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.getAttribute('data-value') === value);
+    });
+
+    // Show/hide fallback toggle — only relevant when a specific bit depth is selected
+    const fallbackToggle = document.getElementById('flac-fallback-toggle');
+    if (fallbackToggle) {
+        fallbackToggle.style.display = value === 'any' ? 'none' : 'block';
+    }
+
+    // Mark preset as custom when manually changing
+    if (currentQualityProfile) {
+        currentQualityProfile.preset = 'custom';
+        document.querySelectorAll('.preset-button').forEach(btn => {
+            btn.classList.remove('active');
+        });
+    }
+
+    debouncedAutoSaveSettings();
+}
+
+function setFlacBitDepthFallback(enabled) {
+    if (currentQualityProfile) {
+        currentQualityProfile.preset = 'custom';
+        document.querySelectorAll('.preset-button').forEach(btn => {
+            btn.classList.remove('active');
+        });
+    }
+    debouncedAutoSaveSettings();
+}
+
+async function applyQualityPreset(presetName) {
+    try {
+        showLoadingOverlay(`Applying ${presetName} preset...`);
+
+        const response = await fetch(`/api/quality-profile/preset/${presetName}`, {
+            method: 'POST'
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            currentQualityProfile = data.profile;
+            populateQualityProfileUI(currentQualityProfile);
+            showToast(`Applied '${presetName}' preset`, 'success');
+        } else {
+            showToast(`Failed to apply preset: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error applying quality preset:', error);
+        showToast('Failed to apply preset', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function collectQualityProfileFromUI() {
+    const profile = {
+        version: 2,
+        preset: 'custom', // Will be overridden if a preset is active
+        qualities: {},
+        fallback_enabled: document.getElementById('quality-fallback-enabled')?.checked ?? true
+    };
+
+    const qualities = ['flac', 'mp3_320', 'mp3_256', 'mp3_192'];
+
+    qualities.forEach((quality, index) => {
+        const enabled = document.getElementById(`quality-${quality}-enabled`)?.checked || false;
+        const minSlider = document.getElementById(`${quality}-min`);
+        const maxSlider = document.getElementById(`${quality}-max`);
+
+        // Preserve priority from the currently loaded profile instead of using array order
+        const existingPriority = currentQualityProfile?.qualities?.[quality]?.priority ?? (index + 1);
+
+        profile.qualities[quality] = {
+            enabled: enabled,
+            min_kbps: parseInt(minSlider?.value || 0),
+            max_kbps: parseInt(maxSlider?.value || 99999),
+            priority: existingPriority
+        };
+
+        // Add FLAC-specific bit_depth and fallback settings
+        if (quality === 'flac') {
+            const activeBtn = document.querySelector('.bit-depth-btn.active');
+            profile.qualities[quality].bit_depth = activeBtn ? activeBtn.getAttribute('data-value') : 'any';
+            const fallbackCb = document.getElementById('flac-bit-depth-fallback');
+            profile.qualities[quality].bit_depth_fallback = fallbackCb ? fallbackCb.checked : true;
+        }
+    });
+
+    // Check if current profile matches a preset
+    if (currentQualityProfile && currentQualityProfile.preset !== 'custom') {
+        profile.preset = currentQualityProfile.preset;
+    }
+
+    return profile;
+}
+
+async function saveQualityProfile() {
+    try {
+        const profile = collectQualityProfileFromUI();
+
+        const response = await fetch('/api/quality-profile', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(profile)
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            currentQualityProfile = profile;
+            console.log('Quality profile saved successfully');
+            return true;
+        } else {
+            console.error('Failed to save quality profile:', data.error);
+            return false;
+        }
+    } catch (error) {
+        console.error('Error saving quality profile:', error);
+        return false;
+    }
+}
+
+// ===============================
+// END QUALITY PROFILE FUNCTIONS
+// ===============================
+
+async function toggleHydrabaseFromSettings() {
+    const statusEl = document.getElementById('hydrabase-settings-status');
+    const btn = document.getElementById('hydrabase-connect-btn');
+    const url = document.getElementById('hydrabase-url').value.trim();
+    const apiKey = document.getElementById('hydrabase-api-key').value.trim();
+
+    if (!url || !apiKey) {
+        if (statusEl) statusEl.textContent = 'URL and API Key required';
+        return;
+    }
+
+    // Save settings first
+    await saveSettings(true);
+
+    try {
+        // Check current status
+        const statusRes = await fetch('/api/hydrabase/status');
+        const statusData = await statusRes.json();
+
+        if (statusData.connected) {
+            // Disconnect
+            await fetch('/api/hydrabase/disconnect', { method: 'POST' });
+            if (btn) btn.textContent = 'Connect';
+            if (statusEl) { statusEl.textContent = 'Disconnected'; statusEl.style.color = 'rgba(255,255,255,0.4)'; }
+            // Remove from fallback dropdown + reset to iTunes if was selected
+            const fbSel2 = document.getElementById('metadata-fallback-source');
+            if (fbSel2) {
+                const hbOpt = fbSel2.querySelector('option[value="hydrabase"]');
+                if (hbOpt) {
+                    if (fbSel2.value === 'hydrabase') fbSel2.value = 'itunes';
+                    hbOpt.remove();
+                }
+            }
+            showToast('Hydrabase disconnected', 'info');
+        } else {
+            // Connect
+            const res = await fetch('/api/hydrabase/connect', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ url, api_key: apiKey })
+            });
+            const data = await res.json();
+            if (data.success) {
+                if (btn) btn.textContent = 'Disconnect';
+                if (statusEl) { statusEl.textContent = 'Connected'; statusEl.style.color = '#4caf50'; }
+                // Add to fallback dropdown
+                const fbSel = document.getElementById('metadata-fallback-source');
+                if (fbSel && !fbSel.querySelector('option[value="hydrabase"]')) {
+                    const opt = document.createElement('option');
+                    opt.value = 'hydrabase';
+                    opt.textContent = 'Hydrabase (P2P)';
+                    fbSel.appendChild(opt);
+                }
+                showToast('Hydrabase connected', 'success');
+            } else {
+                if (statusEl) statusEl.textContent = data.error || 'Connection failed';
+                showToast('Hydrabase connection failed', 'error');
+            }
+        }
+    } catch (e) {
+        if (statusEl) statusEl.textContent = 'Error';
+        showToast('Hydrabase connection error', 'error');
+    }
+}
+
+// ── Music Library Paths ──
+function renderMusicPaths(paths) {
+    const container = document.getElementById('music-paths-list');
+    if (!container) return;
+    if (!paths || paths.length === 0) {
+        container.innerHTML = '<div style="color: rgba(255,255,255,0.3); font-size: 0.85em; padding: 4px 0;">No paths configured. Click "Add Path" to add your music folder(s).</div>';
+        return;
+    }
+    container.innerHTML = paths.map((p, i) => `
+        <div class="form-group music-path-row" style="margin-bottom: 4px;">
+            <input type="text" class="music-path-input" value="${escapeHtml(p)}" placeholder="/music or C:\\Music" style="flex:1;">
+            <button class="test-button" onclick="_removeMusicPathRow(this)" style="padding: 8px 12px; color: #ef5350; border-color: rgba(239,83,80,0.3);">&times;</button>
+        </div>
+    `).join('');
+    // Attach auto-save to dynamically rendered inputs
+    container.querySelectorAll('.music-path-input').forEach(input => {
+        input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
+    });
+}
+
+function addMusicPathRow() {
+    const container = document.getElementById('music-paths-list');
+    if (!container) return;
+    // Clear the "no paths" message if present
+    const placeholder = container.querySelector('div[style*="color: rgba"]');
+    if (placeholder && !container.querySelector('.music-path-row')) placeholder.remove();
+    const row = document.createElement('div');
+    row.className = 'form-group music-path-row';
+    row.style.marginBottom = '4px';
+    row.innerHTML = `
+        <input type="text" class="music-path-input" value="" placeholder="/music or C:\\Music" style="flex:1;">
+        <button class="test-button" onclick="_removeMusicPathRow(this)" style="padding: 8px 12px; color: #ef5350; border-color: rgba(239,83,80,0.3);">&times;</button>
+    `;
+    container.appendChild(row);
+    const input = row.querySelector('input');
+    input.focus();
+    // Auto-save when the user finishes typing a path
+    input.addEventListener('change', () => { if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings(); });
+}
+
+function _removeMusicPathRow(btn) {
+    btn.closest('.music-path-row').remove();
+    // Auto-save after removing a path
+    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
+}
+
+function collectMusicPaths() {
+    const inputs = document.querySelectorAll('.music-path-input');
+    const paths = [];
+    inputs.forEach(input => {
+        const val = input.value.trim();
+        if (val) paths.push(val);
+    });
+    return paths;
+}
+
+// ── Genre Whitelist ──
+let _genreWhitelistCache = [];
+
+function _genreWhitelistRender(genres) {
+    _genreWhitelistCache = genres && genres.length ? genres : [];
+    const container = document.getElementById('genre-whitelist-chips');
+    const countEl = document.getElementById('genre-whitelist-count');
+    if (!container) return;
+    if (!_genreWhitelistCache.length) {
+        container.innerHTML = '<div style="color:rgba(255,255,255,0.3);font-size:13px;padding:4px 0;">No genres configured. Click "Reset to Defaults" to load the default whitelist.</div>';
+        if (countEl) countEl.textContent = '';
+        return;
+    }
+    const searchVal = (document.getElementById('genre-whitelist-search')?.value || '').toLowerCase();
+    const filtered = searchVal ? _genreWhitelistCache.filter(g => g.toLowerCase().includes(searchVal)) : _genreWhitelistCache;
+    container.innerHTML = filtered.map(g =>
+        `<span class="genre-chip">${escapeHtml(g)}<button class="genre-chip-x" onclick="_genreWhitelistRemove('${escapeHtml(g.replace(/'/g, "\\'"))}')">&times;</button></span>`
+    ).join('');
+    if (countEl) countEl.textContent = `${_genreWhitelistCache.length} genres`;
+}
+
+function _genreWhitelistRemove(genre) {
+    _genreWhitelistCache = _genreWhitelistCache.filter(g => g !== genre);
+    _genreWhitelistRender(_genreWhitelistCache);
+    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
+}
+
+function _genreWhitelistAdd(genre) {
+    genre = genre.trim();
+    if (!genre) return;
+    if (_genreWhitelistCache.some(g => g.toLowerCase() === genre.toLowerCase())) return;
+    _genreWhitelistCache.push(genre);
+    _genreWhitelistCache.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
+    _genreWhitelistRender(_genreWhitelistCache);
+    if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
+}
+
+async function _genreWhitelistReset() {
+    try {
+        const resp = await fetch('/api/genre-whitelist/defaults');
+        const data = await resp.json();
+        if (data.genres) {
+            _genreWhitelistCache = data.genres;
+            _genreWhitelistRender(_genreWhitelistCache);
+            if (typeof debouncedAutoSaveSettings === 'function') debouncedAutoSaveSettings();
+            showToast(`Loaded ${data.genres.length} default genres`, 'success');
+        }
+    } catch (e) {
+        showToast('Failed to load defaults', 'error');
+    }
+}
+
+// Toggle whitelist container visibility + init
+document.addEventListener('change', (e) => {
+    if (e.target.id === 'genre-whitelist-enabled') {
+        const container = document.getElementById('genre-whitelist-container');
+        if (container) container.style.display = e.target.checked ? '' : 'none';
+        // Auto-populate with defaults on first enable if empty
+        if (e.target.checked && _genreWhitelistCache.length === 0) {
+            _genreWhitelistReset();
+        }
+    }
+});
+
+// Search/add handler
+document.addEventListener('keydown', (e) => {
+    if (e.target.id === 'genre-whitelist-search' && e.key === 'Enter') {
+        e.preventDefault();
+        _genreWhitelistAdd(e.target.value);
+        e.target.value = '';
+    }
+});
+document.addEventListener('input', (e) => {
+    if (e.target.id === 'genre-whitelist-search') {
+        _genreWhitelistRender(_genreWhitelistCache);
+    }
+});
+
+function _collectGenreWhitelist() {
+    return _genreWhitelistCache;
+}
+
+// ── Live Log Viewer ──
+let _logViewerActive = false;
+let _logViewerFilter = '';
+let _logViewerSource = 'app';
+let _logViewerSearch = '';
+const _LOG_MAX_LINES = 2000;
+
+function _logClassify(line) {
+    // Exact logger format first
+    if (line.includes(' - DEBUG - ')) return 'DEBUG';
+    if (line.includes(' - INFO - ')) return 'INFO';
+    if (line.includes(' - WARNING - ')) return 'WARNING';
+    if (line.includes(' - ERROR - ') || line.includes(' - CRITICAL - ')) return 'ERROR';
+    // Heuristic for print() output
+    const ll = line.toLowerCase();
+    if (ll.includes('error') || ll.includes('traceback') || ll.includes('exception') || ll.includes('failed')) return 'ERROR';
+    if (ll.includes('warning') || ll.includes('warn')) return 'WARNING';
+    if (ll.includes('debug')) return 'DEBUG';
+    return 'INFO';
+}
+
+function _logClassToCSS(level) {
+    return { DEBUG: 'log-debug', INFO: 'log-info', WARNING: 'log-warning', ERROR: 'log-error' }[level] || 'log-plain';
+}
+
+async function _logViewerInit() {
+    if (_logViewerActive) return;
+    _logViewerActive = true;
+    _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
+
+    // Fetch initial tail
+    try {
+        const params = new URLSearchParams({ source: _logViewerSource, lines: 300 });
+        if (_logViewerFilter) params.set('level', _logViewerFilter);
+        if (_logViewerSearch) params.set('search', _logViewerSearch);
+        const resp = await fetch(`/api/logs/tail?${params}`);
+        const data = await resp.json();
+        if (data.lines) {
+            const container = document.getElementById('log-viewer-lines');
+            if (container) {
+                container.innerHTML = '';
+                _logViewerAppendLines(data.lines);
+            }
+        }
+    } catch (e) {
+        console.warn('Failed to load initial logs:', e);
+    }
+
+    // Subscribe to live updates
+    if (typeof socket !== 'undefined' && socket && socket.connected) {
+        socket.emit('logs:subscribe', { source: _logViewerSource });
+        socket.on('logs:live', _logViewerOnLive);
+    }
+}
+
+function _logViewerStop() {
+    if (!_logViewerActive) return;
+    _logViewerActive = false;
+    if (typeof socket !== 'undefined' && socket) {
+        socket.off('logs:live', _logViewerOnLive);
+        socket.emit('logs:unsubscribe', {});
+    }
+}
+
+function _logViewerOnLive(data) {
+    if (!_logViewerActive || !data.lines) return;
+    if (data.source !== _logViewerSource) return;
+    let lines = data.lines;
+    // Apply level filter client-side for live lines
+    if (_logViewerFilter) {
+        lines = lines.filter(l => _logClassify(l) === _logViewerFilter);
+    }
+    // Apply search filter
+    if (_logViewerSearch) {
+        const s = _logViewerSearch.toLowerCase();
+        lines = lines.filter(l => l.toLowerCase().includes(s));
+    }
+    if (lines.length > 0) _logViewerAppendLines(lines);
+}
+
+function _logViewerAppendLines(lines) {
+    const container = document.getElementById('log-viewer-lines');
+    if (!container) return;
+    const autoScroll = document.getElementById('log-viewer-autoscroll')?.checked;
+    const terminal = document.getElementById('log-viewer-terminal');
+
+    const frag = document.createDocumentFragment();
+    for (const line of lines) {
+        const div = document.createElement('div');
+        div.className = 'log-line ' + _logClassToCSS(_logClassify(line));
+        div.textContent = line;
+        frag.appendChild(div);
+    }
+    container.appendChild(frag);
+
+    // Trim old lines
+    while (container.children.length > _LOG_MAX_LINES) {
+        container.removeChild(container.firstChild);
+    }
+
+    // Update count
+    const countEl = document.getElementById('log-viewer-line-count');
+    if (countEl) countEl.textContent = `${container.children.length} lines`;
+
+    // Auto-scroll
+    if (autoScroll && terminal) {
+        terminal.scrollTop = terminal.scrollHeight;
+    }
+}
+
+async function _logViewerChangeSource() {
+    _logViewerStop();
+    _logViewerSource = document.getElementById('log-viewer-source')?.value || 'app';
+    const container = document.getElementById('log-viewer-lines');
+    if (container) container.innerHTML = '<div class="log-line log-info">Loading...</div>';
+    await _logViewerInit();
+}
+
+function _logViewerFilterLevel(btn) {
+    document.querySelectorAll('.log-filter-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    _logViewerFilter = btn.dataset.level || '';
+    _logViewerReload();
+}
+
+let _logSearchDebounce = null;
+function _logViewerOnSearch(input) {
+    clearTimeout(_logSearchDebounce);
+    _logSearchDebounce = setTimeout(() => {
+        _logViewerSearch = (input.value || '').trim();
+        _logViewerReload();
+    }, 300);
+}
+
+function _logViewerReload() {
+    _logViewerStop();
+    const container = document.getElementById('log-viewer-lines');
+    if (container) container.innerHTML = '<div class="log-line log-info">Loading...</div>';
+    _logViewerInit();
+}
+
+function _logViewerCopy() {
+    const container = document.getElementById('log-viewer-lines');
+    if (!container) return;
+    const text = Array.from(container.children).map(el => el.textContent).join('\n');
+    if (navigator.clipboard && window.isSecureContext) {
+        navigator.clipboard.writeText(text).then(() => showToast('Logs copied', 'success'));
+    } else {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.cssText = 'position:fixed;left:-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        showToast('Logs copied', 'success');
+    }
+}
+
+function _logViewerClear() {
+    const container = document.getElementById('log-viewer-lines');
+    if (container) container.innerHTML = '';
+    const countEl = document.getElementById('log-viewer-line-count');
+    if (countEl) countEl.textContent = '0 lines';
+}
+
+// ── Database Maintenance ──
+async function loadDbMaintenanceInfo() {
+    try {
+        const resp = await fetch('/api/database/maintenance/info');
+        const data = await resp.json();
+        if (!data.success) return;
+        const sizeEl = document.getElementById('db-size-display');
+        const freeEl = document.getElementById('db-freepages-display');
+        const vacEl = document.getElementById('db-autovacuum-display');
+        if (sizeEl) sizeEl.textContent = data.total_size_display;
+        if (freeEl) freeEl.textContent = data.free_pages > 0
+            ? `${data.free_pages.toLocaleString()} (${data.free_size_display} reclaimable)`
+            : 'None — database is fully compacted';
+        if (vacEl) vacEl.textContent = data.auto_vacuum_label;
+        // Hide enable button if already incremental
+        const incBtn = document.getElementById('db-incvacuum-btn');
+        if (incBtn && data.auto_vacuum === 2) {
+            incBtn.textContent = 'Incremental Vacuum Enabled';
+            incBtn.disabled = true;
+            incBtn.style.opacity = '0.5';
+        }
+    } catch (e) { console.error('Error loading DB maintenance info:', e); }
+}
+
+async function runDatabaseVacuum() {
+    const btn = document.getElementById('db-vacuum-btn');
+    const status = document.getElementById('db-vacuum-status');
+    if (!confirm('This will compact the database by rewriting it. The database will be locked during this operation. For large databases this may take over a minute. Continue?')) return;
+    btn.disabled = true;
+    btn.textContent = 'Compacting...';
+    if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Running VACUUM — this may take a while...'; }
+    try {
+        const resp = await fetch('/api/database/maintenance/vacuum', { method: 'POST' });
+        const data = await resp.json();
+        if (data.success) {
+            showToast(`Database compacted in ${data.elapsed_seconds}s — saved ${data.saved_display}`, 'success');
+            if (status) { status.style.color = '#4caf50'; status.textContent = `Done in ${data.elapsed_seconds}s. Saved ${data.saved_display}.`; }
+            loadDbMaintenanceInfo();
+        } else {
+            showToast('Vacuum failed: ' + (data.error || 'Unknown error'), 'error');
+            if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
+        }
+    } catch (e) {
+        showToast('Vacuum failed: ' + e.message, 'error');
+        if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Compact Database (VACUUM)';
+    }
+}
+
+async function enableIncrementalVacuum() {
+    const btn = document.getElementById('db-incvacuum-btn');
+    const status = document.getElementById('db-vacuum-status');
+    if (!confirm('This will enable incremental vacuum mode. It requires a one-time full VACUUM to activate, which locks the database and may take over a minute on large databases. Continue?')) return;
+    btn.disabled = true;
+    btn.textContent = 'Enabling...';
+    if (status) { status.style.display = 'block'; status.style.background = 'rgba(255,255,255,0.04)'; status.style.color = 'rgba(255,255,255,0.6)'; status.textContent = 'Enabling incremental vacuum — this may take a while...'; }
+    try {
+        const resp = await fetch('/api/database/maintenance/enable-incremental-vacuum', { method: 'POST' });
+        const data = await resp.json();
+        if (data.success) {
+            const msg = data.already_enabled ? 'Already enabled' : `Enabled in ${data.elapsed_seconds}s — saved ${data.saved_display}`;
+            showToast(msg, 'success');
+            if (status) { status.style.color = '#4caf50'; status.textContent = msg; }
+            loadDbMaintenanceInfo();
+        } else {
+            showToast('Failed: ' + (data.error || 'Unknown error'), 'error');
+            if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + (data.error || 'Unknown error'); }
+        }
+    } catch (e) {
+        showToast('Failed: ' + e.message, 'error');
+        if (status) { status.style.color = '#ef5350'; status.textContent = 'Failed: ' + e.message; }
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Enable Incremental Vacuum';
+    }
+}
+
+async function activateDevMode() {
+    const password = document.getElementById('dev-mode-password').value;
+    try {
+        const response = await fetch('/api/dev-mode', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ password })
+        });
+        const data = await response.json();
+        if (data.success) {
+            document.getElementById('dev-mode-status').textContent = 'Active';
+            document.getElementById('dev-mode-status').style.color = 'rgb(var(--accent-light-rgb))';
+            document.getElementById('hydrabase-nav').style.display = '';
+            document.getElementById('hydrabase-button-container').style.display = '';
+            document.getElementById('dev-mode-password').value = '';
+            showToast('Dev mode activated', 'success');
+        } else {
+            showToast('Invalid password', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to activate dev mode', 'error');
+    }
+}
+
+// ── Hydrabase Functions ──
+
+let _hydrabaseConnected = false;
+
+async function hydrabaseToggleConnection() {
+    if (_hydrabaseConnected) {
+        await hydrabaseDisconnect();
+    } else {
+        await hydrabaseConnect();
+    }
+}
+
+async function hydrabaseConnect() {
+    const url = document.getElementById('hydra-ws-url').value.trim();
+    const apiKey = document.getElementById('hydra-api-key').value.trim();
+    if (!url || !apiKey) {
+        showToast('URL and API key required', 'error');
+        return;
+    }
+    const statusEl = document.getElementById('hydra-connection-status');
+    const btn = document.getElementById('hydra-connect-btn');
+    statusEl.textContent = 'Connecting...';
+    statusEl.style.color = '#f0ad4e';
+    try {
+        const response = await fetch('/api/hydrabase/connect', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url, api_key: apiKey })
+        });
+        const data = await response.json();
+        if (data.success) {
+            _hydrabaseConnected = true;
+            statusEl.textContent = 'Connected';
+            statusEl.style.color = 'rgb(var(--accent-light-rgb))';
+            btn.textContent = 'Disconnect';
+            showToast('Connected to Hydrabase', 'success');
+        } else {
+            statusEl.textContent = 'Failed';
+            statusEl.style.color = '#f44336';
+            showToast(data.error || 'Connection failed', 'error');
+        }
+    } catch (e) {
+        statusEl.textContent = 'Error';
+        statusEl.style.color = '#f44336';
+        showToast('Connection error', 'error');
+    }
+}
+
+async function hydrabaseDisconnect() {
+    try {
+        await fetch('/api/hydrabase/disconnect', { method: 'POST' });
+    } catch (e) { }
+    _hydrabaseConnected = false;
+    document.getElementById('hydra-connection-status').textContent = 'Disconnected';
+    document.getElementById('hydra-connection-status').style.color = '#888';
+    document.getElementById('hydra-connect-btn').textContent = 'Connect';
+    // Dev mode is disabled on disconnect — hide Hydrabase nav and update settings status
+    document.getElementById('hydrabase-nav').style.display = 'none';
+    document.getElementById('hydrabase-button-container').style.display = 'none';
+    const devStatus = document.getElementById('dev-mode-status');
+    if (devStatus) {
+        devStatus.textContent = 'Inactive';
+        devStatus.style.color = '#888';
+    }
+    showToast('Disconnected — dev mode disabled', 'success');
+    navigateToPage('settings');
+}
+
+async function loadHydrabaseComparisons() {
+    const container = document.getElementById('hydra-comparisons-container');
+    if (!container) return;
+    try {
+        const response = await fetch('/api/hydrabase/comparisons');
+        const data = await response.json();
+        if (!data.success || !data.comparisons?.length) {
+            container.innerHTML = '<p style="color: #666; font-size: 13px;">No comparisons yet. Search with Hydrabase active to generate comparisons.</p>';
+            return;
+        }
+        let html = '';
+        for (const comp of data.comparisons) {
+            const time = new Date(comp.timestamp * 1000).toLocaleTimeString();
+            html += `<div style="background: rgba(30, 30, 30, 0.6); border-radius: 8px; padding: 10px; margin-bottom: 8px;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;">
+                    <strong style="color: #fff;">"${comp.query}"</strong>
+                    <span style="color: #666; font-size: 11px;">${time}</span>
+                </div>
+                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; font-size: 12px;">
+                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3);">
+                        <div style="color: rgba(139, 92, 246, 1); font-weight: 600; margin-bottom: 2px;">Hydrabase</div>
+                        <div style="color: #aaa;">${comp.hydrabase?.tracks || 0}T / ${comp.hydrabase?.artists || 0}A / ${comp.hydrabase?.albums || 0}Al</div>
+                    </div>
+                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(29, 185, 84, 0.15); border: 1px solid rgba(29, 185, 84, 0.3);">
+                        <div style="color: rgb(var(--accent-light-rgb)); font-weight: 600; margin-bottom: 2px;">Spotify</div>
+                        <div style="color: #aaa;">${comp.spotify?.tracks || 0}T / ${comp.spotify?.artists || 0}A / ${comp.spotify?.albums || 0}Al</div>
+                    </div>
+                    <div style="padding: 6px 8px; border-radius: 6px; background: rgba(251, 93, 93, 0.15); border: 1px solid rgba(251, 93, 93, 0.3);">
+                        <div style="color: #fb5d5d; font-weight: 600; margin-bottom: 2px;">${comp.fallback_source === 'deezer' ? 'Deezer' : 'iTunes'}</div>
+                        <div style="color: #aaa;">${(comp.fallback || comp.itunes)?.tracks || 0}T / ${(comp.fallback || comp.itunes)?.artists || 0}A / ${(comp.fallback || comp.itunes)?.albums || 0}Al</div>
+                    </div>
+                </div>
+            </div>`;
+        }
+        container.innerHTML = html;
+    } catch (e) {
+        container.innerHTML = '<p style="color: #f44336; font-size: 13px;">Failed to load comparisons.</p>';
+    }
+}
+
+async function hydrabaseSendRaw(textareaId) {
+    const textarea = document.getElementById(textareaId);
+    const raw = textarea.value.trim();
+    if (!raw) {
+        showToast('Payload is empty', 'error');
+        return;
+    }
+    if (!_hydrabaseConnected) {
+        showToast('Not connected to Hydrabase', 'error');
+        return;
+    }
+    let payload;
+    try {
+        payload = JSON.parse(raw);
+    } catch (e) {
+        showToast('Invalid JSON payload', 'error');
+        return;
+    }
+    // Auto-inject a fresh nonce if not set or zero
+    if (!payload.nonce) {
+        payload.nonce = Date.now();
+    }
+    const responseArea = document.getElementById('hydra-response');
+    responseArea.textContent = 'Sending...';
+    try {
+        const response = await fetch('/api/hydrabase/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ payload })
+        });
+        const data = await response.json();
+        if (data.success) {
+            responseArea.textContent = JSON.stringify(data.data, null, 2);
+        } else {
+            responseArea.textContent = 'Error: ' + (data.error || 'Unknown error');
+            if (data.error && data.error.includes('Not connected')) {
+                _hydrabaseConnected = false;
+                document.getElementById('hydra-connection-status').textContent = 'Disconnected';
+                document.getElementById('hydra-connection-status').style.color = '#888';
+                document.getElementById('hydra-connect-btn').textContent = 'Connect';
+            }
+        }
+    } catch (e) {
+        responseArea.textContent = 'Error: ' + e.message;
+    }
+}
+
+// ── Tag embedding accordion helpers ──
+function toggleTagGroup(header) {
+    const body = header.nextElementSibling;
+    const arrow = header.querySelector('.tag-group-arrow');
+    if (body.style.display === 'none') {
+        body.style.display = 'block';
+        arrow.classList.add('open');
+    } else {
+        body.style.display = 'none';
+        arrow.classList.remove('open');
+    }
+}
+
+function toggleServiceTags(masterCheckbox, serviceName) {
+    const group = masterCheckbox.closest('.tag-service-group');
+    if (!group) return;
+    const body = group.querySelector('.tag-service-body');
+    if (!body) return;
+    const childCheckboxes = body.querySelectorAll('input[type="checkbox"]');
+    childCheckboxes.forEach(cb => {
+        const label = cb.closest('.checkbox-label');
+        if (masterCheckbox.checked) {
+            if (label) label.classList.remove('disabled-tag');
+            cb.disabled = false;
+        } else {
+            if (label) label.classList.add('disabled-tag');
+            cb.disabled = true;
+        }
+    });
+}
+
+function _collectServiceTags(serviceName) {
+    const tags = {};
+    document.querySelectorAll(`[data-config^="${serviceName}.tags."]`).forEach(cb => {
+        const key = cb.dataset.config.split('.').pop();
+        tags[key] = cb.checked;
+    });
+    return tags;
+}
+
+function _getTagConfig(path) {
+    const el = document.querySelector(`[data-config="${path}"]`);
+    return el ? el.checked : true;
+}
+
+async function saveSettings(quiet = false) {
+    // Validate file organization templates before saving
+    const validationErrors = validateFileOrganizationTemplates();
+    if (validationErrors.length > 0) {
+        if (!quiet) showToast('Template validation failed: ' + validationErrors.join(', '), 'error');
+        return;
+    }
+
+    // Determine active server from toggle buttons
+    let activeServer = 'plex';
+    if (document.getElementById('jellyfin-toggle').classList.contains('active')) {
+        activeServer = 'jellyfin';
+    } else if (document.getElementById('navidrome-toggle').classList.contains('active')) {
+        activeServer = 'navidrome';
+    } else if (document.getElementById('soulsync-toggle')?.classList.contains('active')) {
+        activeServer = 'soulsync';
+    }
+
+    const settings = {
+        active_media_server: activeServer,
+        spotify: {
+            client_id: document.getElementById('spotify-client-id').value,
+            client_secret: document.getElementById('spotify-client-secret').value,
+            redirect_uri: document.getElementById('spotify-redirect-uri').value,
+            embed_tags: document.getElementById('embed-spotify').checked,
+            tags: _collectServiceTags('spotify')
+        },
+        tidal: {
+            client_id: document.getElementById('tidal-client-id').value,
+            client_secret: document.getElementById('tidal-client-secret').value,
+            redirect_uri: document.getElementById('tidal-redirect-uri').value,
+            embed_tags: document.getElementById('embed-tidal').checked,
+            tags: _collectServiceTags('tidal')
+        },
+        plex: {
+            base_url: document.getElementById('plex-url').value,
+            token: document.getElementById('plex-token').value
+        },
+        jellyfin: {
+            base_url: document.getElementById('jellyfin-url').value,
+            api_key: document.getElementById('jellyfin-api-key').value,
+            api_timeout: parseInt(document.getElementById('jellyfin-timeout').value) || 30
+        },
+        navidrome: {
+            base_url: document.getElementById('navidrome-url').value,
+            username: document.getElementById('navidrome-username').value,
+            password: document.getElementById('navidrome-password').value
+        },
+        soulseek: {
+            slskd_url: document.getElementById('soulseek-url').value,
+            api_key: document.getElementById('soulseek-api-key').value,
+            download_path: document.getElementById('download-path').value,
+            transfer_path: document.getElementById('transfer-path').value,
+            search_timeout: parseInt(document.getElementById('soulseek-search-timeout').value) || 60,
+            search_timeout_buffer: parseInt(document.getElementById('soulseek-search-timeout-buffer').value) || 15,
+            min_peer_upload_speed: parseInt(document.getElementById('soulseek-min-peer-speed').value) || 0,
+            max_peer_queue: parseInt(document.getElementById('soulseek-max-peer-queue').value) || 0,
+            download_timeout: (parseInt(document.getElementById('soulseek-download-timeout').value) || 10) * 60,
+            auto_clear_searches: document.getElementById('soulseek-auto-clear-searches').checked
+        },
+        listenbrainz: {
+            base_url: document.getElementById('listenbrainz-base-url').value,
+            token: document.getElementById('listenbrainz-token').value,
+            scrobble_enabled: document.getElementById('listenbrainz-scrobble-enabled').checked,
+        },
+        acoustid: {
+            api_key: document.getElementById('acoustid-api-key').value,
+            enabled: document.getElementById('acoustid-enabled').checked
+        },
+        lastfm: {
+            api_key: document.getElementById('lastfm-api-key').value,
+            api_secret: document.getElementById('lastfm-api-secret').value,
+            scrobble_enabled: document.getElementById('lastfm-scrobble-enabled').checked,
+            embed_tags: document.getElementById('embed-lastfm').checked,
+            tags: _collectServiceTags('lastfm')
+        },
+        genius: {
+            access_token: document.getElementById('genius-access-token').value,
+            embed_tags: document.getElementById('embed-genius').checked,
+            tags: _collectServiceTags('genius')
+        },
+        itunes: {
+            country: document.getElementById('itunes-country').value || 'US',
+            embed_tags: document.getElementById('embed-itunes').checked,
+            tags: _collectServiceTags('itunes')
+        },
+        discogs: {
+            token: document.getElementById('discogs-token').value,
+        },
+        metadata: {
+            fallback_source: document.getElementById('metadata-fallback-source').value || 'itunes'
+        },
+        hydrabase: {
+            url: document.getElementById('hydrabase-url').value,
+            api_key: document.getElementById('hydrabase-api-key').value,
+            auto_connect: document.getElementById('hydrabase-auto-connect').checked
+        },
+        download_source: {
+            mode: document.getElementById('download-source-mode').value,
+            hybrid_primary: document.getElementById('hybrid-primary-source').value,
+            hybrid_secondary: document.getElementById('hybrid-secondary-source').value,
+            hybrid_order: getHybridOrder(),
+            stream_source: document.getElementById('stream-source').value,
+            max_concurrent: parseInt(document.getElementById('max-concurrent-downloads').value) || 3,
+        },
+        tidal_download: {
+            quality: document.getElementById('tidal-download-quality').value || 'lossless',
+            allow_fallback: document.getElementById('tidal-allow-fallback').checked,
+        },
+        hifi_download: {
+            quality: document.getElementById('hifi-download-quality').value || 'lossless',
+            allow_fallback: document.getElementById('hifi-allow-fallback').checked,
+        },
+        deezer_download: {
+            quality: document.getElementById('deezer-download-quality').value || 'flac',
+            arl: document.getElementById('deezer-download-arl').value || '',
+            allow_fallback: document.getElementById('deezer-allow-fallback').checked,
+        },
+        lidarr_download: {
+            url: document.getElementById('lidarr-url').value || '',
+            api_key: document.getElementById('lidarr-api-key').value || '',
+        },
+        qobuz: {
+            quality: document.getElementById('qobuz-quality').value || 'lossless',
+            embed_tags: document.getElementById('embed-qobuz').checked,
+            tags: _collectServiceTags('qobuz'),
+            allow_fallback: document.getElementById('qobuz-allow-fallback').checked,
+        },
+        database: {
+            max_workers: parseInt(document.getElementById('max-workers').value)
+        },
+        metadata_enhancement: {
+            enabled: document.getElementById('metadata-enabled').checked,
+            embed_album_art: document.getElementById('embed-album-art').checked,
+            cover_art_download: document.getElementById('cover-art-download').checked,
+            prefer_caa_art: document.getElementById('prefer-caa-art').checked,
+            lrclib_enabled: document.getElementById('lrclib-enabled').checked,
+            tags: {
+                quality_tag: _getTagConfig('metadata_enhancement.tags.quality_tag'),
+                genre_merge: _getTagConfig('metadata_enhancement.tags.genre_merge'),
+                artist_separator: document.getElementById('artist-separator').value,
+                write_multi_artist: document.getElementById('write-multi-artist').checked,
+                feat_in_title: document.getElementById('feat-in-title').checked
+            }
+        },
+        musicbrainz: {
+            embed_tags: document.getElementById('embed-musicbrainz').checked,
+            tags: _collectServiceTags('musicbrainz')
+        },
+        deezer: {
+            app_id: document.getElementById('deezer-app-id').value,
+            app_secret: document.getElementById('deezer-app-secret').value,
+            redirect_uri: document.getElementById('deezer-redirect-uri').value,
+            embed_tags: document.getElementById('embed-deezer').checked,
+            tags: _collectServiceTags('deezer')
+        },
+        audiodb: {
+            embed_tags: document.getElementById('embed-audiodb').checked,
+            tags: _collectServiceTags('audiodb')
+        },
+        file_organization: {
+            enabled: document.getElementById('file-organization-enabled').checked,
+            disc_label: document.getElementById('disc-label').value,
+            collab_artist_mode: document.getElementById('collab-artist-mode').value,
+            templates: {
+                album_path: document.getElementById('template-album-path').value,
+                single_path: document.getElementById('template-single-path').value,
+                playlist_path: document.getElementById('template-playlist-path').value,
+                video_path: document.getElementById('template-video-path').value
+            }
+        },
+        wishlist: {
+            allow_duplicate_tracks: document.getElementById('allow-duplicate-tracks').checked
+        },
+        playlist_sync: {
+            create_backup: document.getElementById('create-backup').checked
+        },
+        content_filter: {
+            allow_explicit: document.getElementById('allow-explicit').checked
+        },
+        genre_whitelist: {
+            enabled: document.getElementById('genre-whitelist-enabled').checked,
+            genres: _collectGenreWhitelist(),
+        },
+        post_processing: {
+            replaygain_enabled: document.getElementById('replaygain-enabled').checked,
+        },
+        library: {
+            music_paths: collectMusicPaths(),
+            music_videos_path: document.getElementById('music-videos-path').value || './MusicVideos'
+        },
+        import: {
+            replace_lower_quality: document.getElementById('import-replace-lower-quality').checked,
+            staging_path: document.getElementById('staging-path').value || './Staging'
+        },
+        lossy_copy: {
+            enabled: document.getElementById('lossy-copy-enabled').checked,
+            codec: document.getElementById('lossy-copy-codec').value,
+            bitrate: document.getElementById('lossy-copy-bitrate').value,
+            delete_original: document.getElementById('lossy-copy-delete-original').checked,
+            downsample_hires: document.getElementById('downsample-hires').checked
+        },
+        listening_stats: {
+            enabled: document.getElementById('listening-stats-enabled').checked,
+            poll_interval: parseInt(document.getElementById('listening-stats-interval').value) || 30,
+        },
+        m3u_export: {
+            enabled: document.getElementById('m3u-export-enabled').checked,
+            entry_base_path: document.getElementById('m3u-entry-base-path').value || ''
+        },
+        ui_appearance: {
+            accent_preset: document.getElementById('accent-preset')?.value || '#1db954',
+            accent_color: document.getElementById('accent-custom-color')?.value || '#1db954',
+            sidebar_visualizer: document.getElementById('sidebar-visualizer-type')?.value || 'bars',
+            particles_enabled: document.getElementById('particles-enabled')?.checked !== false,
+            worker_orbs_enabled: document.getElementById('worker-orbs-enabled')?.checked !== false,
+            reduce_effects: document.getElementById('reduce-effects-enabled')?.checked === true
+        },
+        youtube: {
+            cookies_browser: document.getElementById('youtube-cookies-browser').value,
+            download_delay: parseInt(document.getElementById('youtube-download-delay').value) || 3,
+        },
+        security: {
+            require_pin_on_launch: document.getElementById('security-require-pin')?.checked || false,
+        }
+    };
+
+    try {
+        if (!quiet) showLoadingOverlay('Saving settings...');
+
+        // Save main settings
+        const response = await fetch(API.settings, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(settings)
+        });
+
+        const result = await response.json();
+
+        // Save quality profile
+        const qualityProfileSaved = await saveQualityProfile();
+
+        // Save discovery lookback period
+        let lookbackSaved = true;
+        try {
+            const lookbackPeriod = document.getElementById('discovery-lookback-period').value;
+            const lookbackResponse = await fetch('/api/discovery/lookback-period', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ period: lookbackPeriod })
+            });
+            const lookbackResult = await lookbackResponse.json();
+            lookbackSaved = lookbackResult.success === true;
+        } catch (error) {
+            console.error('Error saving discovery lookback period:', error);
+            lookbackSaved = false;
+        }
+
+        // Save hemisphere setting
+        try {
+            const hemisphere = document.getElementById('discovery-hemisphere').value;
+            await fetch('/api/discovery/hemisphere', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ hemisphere })
+            });
+        } catch (error) {
+            console.error('Error saving hemisphere setting:', error);
+        }
+
+        if (result.success && qualityProfileSaved && lookbackSaved) {
+            showToast(quiet ? 'Settings auto-saved' : 'Settings saved successfully', 'success');
+            _forceServiceStatusRefresh();
+            _stgRefreshAfterSave();
+        } else if (result.success && qualityProfileSaved && !lookbackSaved) {
+            showToast('Settings saved, but discovery lookback period failed to save', 'warning');
+            _forceServiceStatusRefresh();
+            _stgRefreshAfterSave();
+        } else if (result.success && !qualityProfileSaved) {
+            showToast('Settings saved, but quality profile failed to save', 'warning');
+            _forceServiceStatusRefresh();
+            _stgRefreshAfterSave();
+        } else {
+            showToast(`Failed to save settings: ${result.error}`, 'error', 'set-services');
+        }
+    } catch (error) {
+        console.error('Error saving settings:', error);
+        showToast('Failed to save settings', 'error', 'set-services');
+    } finally {
+        if (!quiet) hideLoadingOverlay();
+    }
+}
+
+async function authorizeLastfmScrobbling() {
+    try {
+        // Save settings first so API secret is stored
+        await saveSettings();
+        const resp = await fetch('/api/lastfm/auth-url');
+        const data = await resp.json();
+        if (data.success && data.url) {
+            window.open(data.url, '_blank', 'width=600,height=500');
+            showToast('Authorize SoulSync in the Last.fm window that opened', 'info');
+        } else {
+            showToast(data.error || 'Could not generate auth URL', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to start Last.fm authorization', 'error');
+    }
+}
+
+async function testConnection(service) {
+    try {
+        showLoadingOverlay(`Testing ${service} connection...`);
+
+        const response = await fetch(API.testConnection, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ service })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            // Use backend's message which contains dynamic source name
+            showToast(result.message || `${service} connection successful`, 'success');
+
+            // Load music libraries after successful connection
+            if (service === 'plex') {
+                loadPlexMusicLibraries();
+            } else if (service === 'jellyfin') {
+                loadJellyfinUsers().then(() => loadJellyfinMusicLibraries());
+            } else if (service === 'navidrome') {
+                loadNavidromeMusicFolders();
+            }
+        } else {
+            showToast(`${service} connection failed: ${result.error}`, 'error', 'gs-connecting');
+        }
+    } catch (error) {
+        console.error(`Error testing ${service} connection:`, error);
+        showToast(`Failed to test ${service} connection`, 'error', 'gs-connecting');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function clearQuarantine() {
+    if (!await showConfirmDialog({ title: 'Clear Quarantine', message: 'Delete all files in the quarantine folder? This cannot be undone.', confirmText: 'Delete', destructive: true })) return;
+    try {
+        showLoadingOverlay('Clearing quarantine folder...');
+        const response = await fetch('/api/quarantine/clear', { method: 'POST' });
+        const result = await response.json();
+        if (result.success) {
+            showToast(result.message || 'Quarantine cleared', 'success');
+        } else {
+            showToast(`Failed to clear quarantine: ${result.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error clearing quarantine:', error);
+        showToast('Failed to clear quarantine', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+// ======================== API Key Management ========================
+
+async function loadApiKeys() {
+    const container = document.getElementById('api-keys-list');
+    if (!container) return;
+
+    try {
+        const response = await fetch('/api/v1/api-keys-internal');
+        if (response.ok) {
+            const data = await response.json();
+            renderApiKeys(data.data?.keys || []);
+        } else {
+            container.innerHTML = '<div style="color: #666; font-size: 13px;">No API keys configured.</div>';
+        }
+    } catch (e) {
+        container.innerHTML = '<div style="color: #666; font-size: 13px;">No API keys configured.</div>';
+    }
+}
+
+function renderApiKeys(keys) {
+    const container = document.getElementById('api-keys-list');
+    if (!container) return;
+
+    if (!keys || keys.length === 0) {
+        container.innerHTML = '<div style="color: #666; font-size: 13px; padding: 4px 0;">No API keys yet. Generate one below.</div>';
+        return;
+    }
+
+    container.innerHTML = keys.map(k => `
+        <div style="display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; margin-bottom: 4px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px;">
+            <div style="flex: 1; min-width: 0;">
+                <div style="font-size: 13px; color: #e0e0e0; font-weight: 500;">${k.label || 'Unnamed'}</div>
+                <div style="font-size: 11px; color: #666; margin-top: 2px;">
+                    <code>${k.key_prefix || 'sk_...'}...</code>
+                    &middot; Created ${k.created_at ? new Date(k.created_at).toLocaleDateString() : 'unknown'}
+                    ${k.last_used_at ? '&middot; Last used ' + new Date(k.last_used_at).toLocaleDateString() : ''}
+                </div>
+            </div>
+            <button onclick="revokeApiKey('${k.id}', '${(k.label || 'this key').replace(/'/g, "\\'")}')"
+                style="padding: 4px 10px; background: rgba(255,82,82,0.1); border: 1px solid rgba(255,82,82,0.2); color: #ff5252; border-radius: 4px; cursor: pointer; font-size: 11px; white-space: nowrap;">
+                Revoke
+            </button>
+        </div>
+    `).join('');
+}
+
+async function generateApiKey() {
+    const labelInput = document.getElementById('api-key-label');
+    const label = labelInput ? labelInput.value.trim() : '';
+
+    try {
+        const response = await fetch('/api/v1/api-keys-internal/generate', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ label: label || 'Default' })
+        });
+        const data = await response.json();
+
+        if (data.success && data.data?.key) {
+            const keyDisplay = document.getElementById('api-key-generated');
+            const keyValue = document.getElementById('api-key-value');
+            if (keyDisplay && keyValue) {
+                keyValue.textContent = data.data.key;
+                keyDisplay.style.display = 'block';
+            }
+            if (labelInput) labelInput.value = '';
+            showToast('API key generated! Copy it now.', 'success');
+            loadApiKeys();
+        } else {
+            showToast(data.error?.message || 'Failed to generate API key', 'error');
+        }
+    } catch (error) {
+        console.error('Error generating API key:', error);
+        showToast('Failed to generate API key', 'error');
+    }
+}
+
+function copyApiKey() {
+    const keyValue = document.getElementById('api-key-value');
+    if (keyValue) {
+        navigator.clipboard.writeText(keyValue.textContent).then(() => {
+            showToast('API key copied to clipboard', 'success');
+        }).catch(() => {
+            // Fallback for older browsers
+            const range = document.createRange();
+            range.selectNode(keyValue);
+            window.getSelection().removeAllRanges();
+            window.getSelection().addRange(range);
+            document.execCommand('copy');
+            showToast('API key copied', 'success');
+        });
+    }
+}
+
+async function revokeApiKey(keyId, label) {
+    if (!await showConfirmDialog({ title: 'Revoke API Key', message: `Revoke API key "${label}"? Any apps using this key will stop working.`, confirmText: 'Revoke', destructive: true })) return;
+
+    try {
+        const response = await fetch(`/api/v1/api-keys-internal/revoke/${keyId}`, { method: 'DELETE' });
+        const data = await response.json();
+        if (data.success) {
+            showToast('API key revoked', 'success');
+            loadApiKeys();
+        } else {
+            showToast(data.error?.message || 'Failed to revoke key', 'error');
+        }
+    } catch (error) {
+        console.error('Error revoking API key:', error);
+        showToast('Failed to revoke key', 'error');
+    }
+}
+
+// Dashboard-specific test functions that create activity items
+async function testDashboardConnection(service) {
+    try {
+        showLoadingOverlay(`Testing ${service} service...`);
+
+        const response = await fetch(API.testDashboardConnection, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ service })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            // Use backend's message which contains dynamic source name
+            showToast(result.message || `${service} service verified`, 'success');
+            // Refresh status indicators immediately so UI reflects the new state
+            fetchAndUpdateServiceStatus();
+        } else {
+            showToast(`${service} service check failed: ${result.error}`, 'error');
+        }
+    } catch (error) {
+        console.error(`Error testing ${service} service:`, error);
+        showToast(`Failed to test ${service} service`, 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+// Individual Auto-detect functions - same as GUI
+async function autoDetectPlex() {
+    try {
+        showLoadingOverlay('Auto-detecting Plex server...');
+
+        const response = await fetch('/api/detect-media-server', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ server_type: 'plex' })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            document.getElementById('plex-url').value = result.found_url;
+            showToast(`Plex server detected: ${result.found_url}`, 'success');
+        } else {
+            showToast(result.error, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error auto-detecting Plex:', error);
+        showToast('Failed to auto-detect Plex server', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function autoDetectJellyfin() {
+    try {
+        showLoadingOverlay('Auto-detecting Jellyfin server...');
+
+        const response = await fetch('/api/detect-media-server', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ server_type: 'jellyfin' })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            document.getElementById('jellyfin-url').value = result.found_url;
+            showToast(`Jellyfin server detected: ${result.found_url}`, 'success');
+        } else {
+            showToast(result.error, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error auto-detecting Jellyfin:', error);
+        showToast('Failed to auto-detect Jellyfin server', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function autoDetectNavidrome() {
+    try {
+        showLoadingOverlay('Auto-detecting Navidrome server...');
+
+        const response = await fetch('/api/detect-media-server', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ server_type: 'navidrome' })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            document.getElementById('navidrome-url').value = result.found_url;
+            showToast(`Navidrome server detected: ${result.found_url}`, 'success');
+        } else {
+            showToast(result.error, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error auto-detecting Navidrome:', error);
+        showToast('Failed to auto-detect Navidrome server', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function autoDetectSlskd() {
+    try {
+        showLoadingOverlay('Auto-detecting Soulseek (slskd) server...');
+
+        const response = await fetch('/api/detect-soulseek', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            document.getElementById('soulseek-url').value = result.found_url;
+            showToast(`Soulseek server detected: ${result.found_url}`, 'success');
+        } else {
+            showToast(result.error, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error auto-detecting Soulseek:', error);
+        showToast('Failed to auto-detect Soulseek server', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+
+function cancelDetection(service) {
+    const progressDiv = document.getElementById(`${service}-detection-progress`);
+    progressDiv.classList.add('hidden');
+    showToast(`${service} detection cancelled`, 'error');
+}
+
+function updateStatusDisplays() {
+    // Update status displays based on current service status
+    // This would be called after status updates
+    const services = ['spotify', 'media-server', 'soulseek'];
+    services.forEach(service => {
+        const display = document.getElementById(`${service}-status-display`);
+        if (display) {
+            // Status will be updated by the regular status monitoring
+        }
+    });
+}
+
+async function authenticateSpotify() {
+    try {
+        showLoadingOverlay('Saving credentials and starting Spotify authentication...');
+        // Save settings first to ensure client_id/client_secret are persisted
+        await saveSettings();
+        showToast('Spotify authentication started', 'success');
+        window.open('/auth/spotify', '_blank');
+    } catch (error) {
+        console.error('Error authenticating Spotify:', error);
+        showToast('Failed to start Spotify authentication', 'error', 'gs-connecting');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function disconnectSpotify() {
+    const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
+    if (!await showConfirmDialog({ title: 'Disconnect Spotify', message: `Disconnect Spotify? The app will switch to ${fallbackName} for metadata.` })) {
+        return;
+    }
+    try {
+        showLoadingOverlay('Disconnecting Spotify...');
+        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Spotify disconnected. Now using ${fallbackName}.`, 'success');
+            // Immediately refresh status to update UI
+            await fetchAndUpdateServiceStatus();
+        } else {
+            showToast(`Failed to disconnect: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error disconnecting Spotify:', error);
+        showToast('Failed to disconnect Spotify', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function clearSpotifyCacheAndFallback() {
+    const fallbackName = currentMusicSourceName !== 'Spotify' ? currentMusicSourceName : 'the configured fallback source';
+    if (!await showConfirmDialog({
+        title: 'Clear Spotify Cache',
+        message: `This will clear the Spotify token cache and switch metadata to ${fallbackName}. You can re-authenticate later.`
+    })) return;
+    try {
+        showLoadingOverlay('Clearing Spotify cache...');
+        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
+        const data = await response.json();
+        if (data.success) {
+            showToast(data.message || `Switched to ${fallbackName}`, 'success');
+            await fetchAndUpdateServiceStatus();
+        } else {
+            showToast(`Failed: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        showToast('Failed to clear Spotify cache', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+// ── Spotify Rate Limit Handling ───────────────────────────────────────────
+let _spotifyRateLimitShown = false;
+let _spotifyInCooldown = false;
+let _rateLimitModalOpen = false;
+let _rateLimitCountdownInterval = null;
+let _rateLimitExpiresAt = 0;
+
+function handleSpotifyRateLimit(rateLimitInfo) {
+    if (!rateLimitInfo || !rateLimitInfo.active) {
+        if (_spotifyRateLimitShown) {
+            _spotifyRateLimitShown = false;
+            closeRateLimitModal();
+            showToast('Spotify access restored', 'success');
+            // Refresh discover page if user is on it — data source switched back to Spotify
+            if (currentPage === 'discover') {
+                console.log('Spotify restored — refreshing discover page data');
+                loadDiscoverPage();
+            }
+        }
+        return;
+    }
+    // Update countdown if modal is open (status pushes every 10s keep it accurate)
+    if (_rateLimitModalOpen && rateLimitInfo.remaining_seconds) {
+        _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
+    }
+    if (!_spotifyRateLimitShown) {
+        _spotifyRateLimitShown = true;
+        _spotifyInCooldown = false;
+        showRateLimitModal(rateLimitInfo);
+        // Refresh discover page if user is on it — data source switched to iTunes
+        if (currentPage === 'discover') {
+            console.log('Spotify rate limited — refreshing discover page with iTunes data');
+            loadDiscoverPage();
+        }
+    }
+}
+
+function showRateLimitModal(rateLimitInfo) {
+    const overlay = document.getElementById('rate-limit-modal-overlay');
+    if (!overlay) return;
+
+    // Populate details
+    const banDuration = document.getElementById('rate-limit-ban-duration');
+    const endpoint = document.getElementById('rate-limit-endpoint');
+    const countdown = document.getElementById('rate-limit-countdown');
+
+    banDuration.textContent = formatRateLimitDuration(rateLimitInfo.retry_after || rateLimitInfo.remaining_seconds);
+    endpoint.textContent = rateLimitInfo.endpoint || 'unknown';
+    countdown.textContent = formatRateLimitDuration(rateLimitInfo.remaining_seconds);
+
+    // Set expiry for live countdown
+    _rateLimitExpiresAt = Date.now() + (rateLimitInfo.remaining_seconds * 1000);
+
+    // Start live countdown timer
+    if (_rateLimitCountdownInterval) clearInterval(_rateLimitCountdownInterval);
+    _rateLimitCountdownInterval = setInterval(() => {
+        const remaining = Math.max(0, Math.round((_rateLimitExpiresAt - Date.now()) / 1000));
+        countdown.textContent = formatRateLimitDuration(remaining);
+        if (remaining <= 0) {
+            clearInterval(_rateLimitCountdownInterval);
+            _rateLimitCountdownInterval = null;
+        }
+    }, 1000);
+
+    overlay.classList.remove('hidden');
+    _rateLimitModalOpen = true;
+}
+
+function closeRateLimitModal() {
+    const overlay = document.getElementById('rate-limit-modal-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    if (_rateLimitCountdownInterval) {
+        clearInterval(_rateLimitCountdownInterval);
+        _rateLimitCountdownInterval = null;
+    }
+    _rateLimitModalOpen = false;
+}
+
+async function disconnectSpotifyFromRateLimit() {
+    closeRateLimitModal();
+    try {
+        showLoadingOverlay('Disconnecting Spotify...');
+        const response = await fetch('/api/spotify/disconnect', { method: 'POST' });
+        const data = await response.json();
+        if (data.success) {
+            _spotifyRateLimitShown = false;
+            showToast(`Spotify disconnected. Now using ${currentMusicSourceName}.`, 'success');
+            await fetchAndUpdateServiceStatus();
+            if (currentPage === 'discover') {
+                loadDiscoverPage();
+            }
+        } else {
+            showToast(`Failed to disconnect: ${data.error}`, 'error');
+        }
+    } catch (error) {
+        console.error('Error disconnecting Spotify:', error);
+        showToast('Failed to disconnect Spotify', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function formatRateLimitDuration(seconds) {
+    if (!seconds || seconds <= 0) return '0s';
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = seconds % 60;
+    if (h > 0) return `${h}h ${m}m`;
+    if (m > 0) return `${m}m ${s}s`;
+    return `${s}s`;
+}
+
+async function authenticateTidal() {
+    try {
+        showLoadingOverlay('Saving credentials and starting Tidal authentication...');
+        // Save settings first to ensure credentials are persisted
+        await saveSettings();
+        showToast('Tidal authentication started', 'success');
+        window.open('/auth/tidal', '_blank');
+    } catch (error) {
+        console.error('Error authenticating Tidal:', error);
+        showToast('Failed to start Tidal authentication', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+async function authenticateDeezer() {
+    try {
+        showLoadingOverlay('Saving credentials and starting Deezer authentication...');
+        await saveSettings();
+        showToast('Deezer authentication started', 'success');
+        window.open('/auth/deezer', '_blank');
+    } catch (error) {
+        console.error('Error authenticating Deezer:', error);
+        showToast('Failed to start Deezer authentication', 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+// ===== Tidal Download Auth (Device Flow) =====
+
+async function testHiFiConnection() {
+    const statusEl = document.getElementById('hifi-connection-status');
+    const btn = document.getElementById('hifi-test-btn');
+    if (!statusEl) return;
+    statusEl.textContent = 'Checking...';
+    statusEl.style.color = '#aaa';
+    try {
+        const resp = await fetch('/api/hifi/status');
+        const data = await resp.json();
+        if (data.available) {
+            statusEl.textContent = `Connected (v${data.version || '?'})`;
+            statusEl.style.color = '#4caf50';
+        } else {
+            statusEl.textContent = 'No instances reachable';
+            statusEl.style.color = '#ff9800';
+        }
+    } catch (e) {
+        statusEl.textContent = 'Connection error';
+        statusEl.style.color = '#f44336';
+    }
+}
+
+async function testLidarrConnection() {
+    const statusEl = document.getElementById('lidarr-connection-status');
+    if (!statusEl) return;
+    statusEl.textContent = 'Checking...';
+    statusEl.style.color = '#aaa';
+    try {
+        // Save settings first so the backend has the URL/key
+        await saveSettings();
+        const resp = await fetch('/api/test-connection', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ service: 'lidarr' })
+        });
+        const data = await resp.json();
+        if (data.success) {
+            statusEl.textContent = 'Connected';
+            statusEl.style.color = '#4caf50';
+        } else {
+            statusEl.textContent = data.error || 'Connection failed';
+            statusEl.style.color = '#f44336';
+        }
+    } catch (e) {
+        statusEl.textContent = 'Connection error';
+        statusEl.style.color = '#f44336';
+    }
+}
+
+async function checkHiFiInstances() {
+    const panel = document.getElementById('hifi-instances-panel');
+    const btn = document.getElementById('hifi-instances-check-btn');
+    if (!panel) return;
+    panel.style.display = 'block';
+    panel.innerHTML = '<div style="color: rgba(255,255,255,0.4); font-size: 0.85em; padding: 8px 0;">Checking instances...</div>';
+    if (btn) { btn.disabled = true; btn.textContent = 'Checking...'; }
+    try {
+        const resp = await fetch('/api/hifi/instances');
+        const data = await resp.json();
+        if (!data.instances || data.instances.length === 0) {
+            panel.innerHTML = '<div style="color: #ff9800; font-size: 0.85em;">No instances configured.</div>';
+            return;
+        }
+        const _statusIcon = (inst) => {
+            if (inst.can_download) return '<span style="color:#4caf50">● Download</span>';
+            if (inst.can_search) return '<span style="color:#ff9800">● Search only</span>';
+            if (inst.status === 'online') return '<span style="color:#ff9800">● Online (limited)</span>';
+            if (inst.status === 'ssl_error') return '<span style="color:#f44336">● SSL error</span>';
+            if (inst.status === 'timeout') return '<span style="color:#f44336">● Timeout</span>';
+            if (inst.status === 'offline') return '<span style="color:#f44336">● Offline</span>';
+            return `<span style="color:#f44336">● ${escapeHtml(inst.status)}</span>`;
+        };
+        panel.innerHTML = data.instances.map(inst => {
+            const isActive = inst.url === data.active;
+            const ver = inst.version ? ` v${inst.version}` : '';
+            const activeTag = isActive ? ' <span style="color:rgb(var(--accent-rgb));font-weight:600;font-size:0.75em;">(ACTIVE)</span>' : '';
+            return `<div style="display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:0.82em;">
+                <span style="color:rgba(255,255,255,0.6);font-family:monospace;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(inst.url)}${ver}${activeTag}</span>
+                <span style="flex-shrink:0;margin-left:12px;">${_statusIcon(inst)}</span>
+            </div>`;
+        }).join('');
+    } catch (e) {
+        panel.innerHTML = `<div style="color:#f44336;font-size:0.85em;">Error checking instances: ${escapeHtml(e.message)}</div>`;
+    } finally {
+        if (btn) { btn.disabled = false; btn.textContent = 'Check All Instances'; }
+    }
+}
+
+async function testDeezerDownloadConnection() {
+    const statusEl = document.getElementById('deezer-download-status');
+    if (!statusEl) return;
+    statusEl.textContent = 'Checking...';
+    statusEl.style.color = '#aaa';
+    try {
+        // Save the ARL first so the backend can use it
+        const arl = document.getElementById('deezer-download-arl')?.value || '';
+        if (!arl) {
+            statusEl.textContent = 'No ARL token provided';
+            statusEl.style.color = '#ff9800';
+            return;
+        }
+        const resp = await fetch('/api/deezer-download/test', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ arl }),
+        });
+        const data = await resp.json();
+        if (data.success) {
+            statusEl.textContent = `Connected as ${data.user || 'Unknown'} (${data.tier || 'Free'})`;
+            statusEl.style.color = '#4caf50';
+        } else {
+            statusEl.textContent = data.error || 'Authentication failed';
+            statusEl.style.color = '#f44336';
+        }
+    } catch (e) {
+        statusEl.textContent = 'Connection error';
+        statusEl.style.color = '#f44336';
+    }
+}
+
+async function checkTidalDownloadAuthStatus() {
+    const statusEl = document.getElementById('tidal-download-auth-status');
+    const btn = document.getElementById('tidal-download-auth-btn');
+    try {
+        const resp = await fetch('/api/tidal/download/auth/status');
+        const data = await resp.json();
+        if (data.authenticated) {
+            statusEl.textContent = 'Authenticated';
+            statusEl.style.color = '#4caf50';
+            btn.textContent = 'Re-link Tidal Account';
+        } else {
+            statusEl.textContent = 'Not authenticated';
+            statusEl.style.color = '#ff9800';
+            btn.textContent = 'Link Tidal Account';
+        }
+    } catch (e) {
+        statusEl.textContent = '';
+    }
+}
+
+let _tidalAuthPollTimer = null;
+
+async function startTidalDownloadAuth() {
+    const btn = document.getElementById('tidal-download-auth-btn');
+    const statusEl = document.getElementById('tidal-download-auth-status');
+    const codeEl = document.getElementById('tidal-download-auth-code');
+
+    btn.disabled = true;
+    btn.textContent = 'Starting...';
+    statusEl.textContent = '';
+
+    try {
+        const resp = await fetch('/api/tidal/download/auth/start', { method: 'POST' });
+        const data = await resp.json();
+
+        if (!resp.ok || !data.success) {
+            throw new Error(data.error || 'Failed to start auth');
+        }
+
+        // Show the link/code to the user
+        const uri = data.verification_uri || '';
+        const code = data.user_code || '';
+        codeEl.style.display = 'block';
+        codeEl.innerHTML = `Go to <a href="${uri}" target="_blank" style="color:rgb(var(--accent-rgb));">${uri}</a> and enter code: <strong>${code}</strong>`;
+        btn.textContent = 'Waiting for approval...';
+        statusEl.textContent = 'Waiting...';
+        statusEl.style.color = '#ff9800';
+
+        // Poll for completion
+        if (_tidalAuthPollTimer) clearInterval(_tidalAuthPollTimer);
+        _tidalAuthPollTimer = setInterval(async () => {
+            try {
+                const checkResp = await fetch('/api/tidal/download/auth/check');
+                const checkData = await checkResp.json();
+
+                if (checkData.status === 'completed') {
+                    clearInterval(_tidalAuthPollTimer);
+                    _tidalAuthPollTimer = null;
+                    codeEl.style.display = 'none';
+                    statusEl.textContent = 'Authenticated';
+                    statusEl.style.color = '#4caf50';
+                    btn.disabled = false;
+                    btn.textContent = 'Re-link Tidal Account';
+                    showToast('Tidal download account linked successfully', 'success');
+                } else if (checkData.status === 'error') {
+                    clearInterval(_tidalAuthPollTimer);
+                    _tidalAuthPollTimer = null;
+                    codeEl.style.display = 'none';
+                    statusEl.textContent = 'Auth failed';
+                    statusEl.style.color = '#f44336';
+                    btn.disabled = false;
+                    btn.textContent = 'Link Tidal Account';
+                    showToast('Tidal auth failed: ' + (checkData.message || 'Unknown error'), 'error');
+                }
+                // status === 'pending' — keep polling
+            } catch (pollErr) {
+                console.error('Tidal auth poll error:', pollErr);
+            }
+        }, 3000);
+
+    } catch (error) {
+        console.error('Tidal download auth error:', error);
+        showToast('Failed to start Tidal auth: ' + error.message, 'error');
+        btn.disabled = false;
+        btn.textContent = 'Link Tidal Account';
+        codeEl.style.display = 'none';
+    }
+}
+
+// ===============================
+// QOBUZ AUTH FUNCTIONS
+// ===============================
+
+async function checkQobuzAuthStatus() {
+    try {
+        const resp = await fetch('/api/qobuz/auth/status');
+        const data = await resp.json();
+
+        // Update downloads tab section
+        const formEl = document.getElementById('qobuz-auth-form');
+        const loggedInEl = document.getElementById('qobuz-auth-logged-in');
+        const userInfoEl = document.getElementById('qobuz-auth-user-info');
+
+        // Update connections tab section
+        const connFormEl = document.getElementById('qobuz-connection-form');
+        const connLoggedInEl = document.getElementById('qobuz-connection-logged-in');
+        const connUserInfoEl = document.getElementById('qobuz-connection-user-info');
+
+        if (data.authenticated) {
+            const user = data.user || {};
+            const label = `Connected: ${user.display_name || 'Qobuz User'} (${user.subscription || 'Active'})`;
+
+            if (userInfoEl) { userInfoEl.textContent = label; }
+            if (loggedInEl) loggedInEl.style.display = 'flex';
+            if (formEl) formEl.style.display = 'none';
+
+            if (connUserInfoEl) { connUserInfoEl.textContent = label; }
+            if (connLoggedInEl) connLoggedInEl.style.display = 'flex';
+            if (connFormEl) connFormEl.style.display = 'none';
+        } else {
+            if (loggedInEl) loggedInEl.style.display = 'none';
+            if (formEl) formEl.style.display = 'block';
+
+            if (connLoggedInEl) connLoggedInEl.style.display = 'none';
+            if (connFormEl) connFormEl.style.display = 'block';
+        }
+    } catch (e) {
+        console.error('Qobuz auth status check failed:', e);
+    }
+}
+
+async function loginQobuzFromConnections() {
+    const btn = document.getElementById('qobuz-connection-login-btn');
+    const statusEl = document.getElementById('qobuz-connection-status');
+    const email = document.getElementById('qobuz-connection-email').value.trim();
+    const password = document.getElementById('qobuz-connection-password').value;
+
+    if (!email || !password) {
+        showToast('Please enter your Qobuz email and password', 'warning');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    statusEl.textContent = '';
+
+    try {
+        const resp = await fetch('/api/qobuz/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email, password }),
+        });
+        const data = await resp.json();
+
+        if (data.success) {
+            showToast('Qobuz connected successfully!', 'success');
+            document.getElementById('qobuz-connection-password').value = '';
+            checkQobuzAuthStatus();
+        } else {
+            statusEl.textContent = data.error || 'Login failed';
+            statusEl.style.color = '#ff5555';
+            showToast(data.error || 'Qobuz login failed', 'error');
+        }
+    } catch (error) {
+        console.error('Qobuz login error:', error);
+        statusEl.textContent = 'Connection error';
+        statusEl.style.color = '#ff5555';
+        showToast('Failed to connect to Qobuz', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Connect Qobuz';
+    }
+}
+
+async function loginQobuzWithToken() {
+    const btn = document.getElementById('qobuz-token-login-btn');
+    const statusEl = document.getElementById('qobuz-token-status');
+    const token = document.getElementById('qobuz-connection-token').value.trim();
+
+    if (!token) {
+        showToast('Please paste your Qobuz auth token', 'warning');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    if (statusEl) statusEl.textContent = '';
+
+    try {
+        const resp = await fetch('/api/qobuz/auth/token', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ token }),
+        });
+        const data = await resp.json();
+
+        if (data.success) {
+            showToast('Qobuz connected via token!', 'success');
+            document.getElementById('qobuz-connection-token').value = '';
+            checkQobuzAuthStatus();
+        } else {
+            if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
+            showToast(data.error || 'Qobuz token login failed', 'error');
+        }
+    } catch (error) {
+        console.error('Qobuz token login error:', error);
+        if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
+        showToast('Failed to connect to Qobuz', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Connect with Token';
+    }
+}
+
+async function loginQobuzWithTokenFromDownloads() {
+    const btn = document.getElementById('qobuz-download-token-btn');
+    const statusEl = document.getElementById('qobuz-download-token-status');
+    const token = document.getElementById('qobuz-download-token').value.trim();
+
+    if (!token) {
+        showToast('Please paste your Qobuz auth token', 'warning');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    if (statusEl) statusEl.textContent = '';
+
+    try {
+        const resp = await fetch('/api/qobuz/auth/token', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ token }),
+        });
+        const data = await resp.json();
+
+        if (data.success) {
+            showToast('Qobuz connected via token!', 'success');
+            document.getElementById('qobuz-download-token').value = '';
+            checkQobuzAuthStatus();
+        } else {
+            if (statusEl) { statusEl.textContent = data.error || 'Token login failed'; statusEl.style.color = '#ff5555'; }
+            showToast(data.error || 'Qobuz token login failed', 'error');
+        }
+    } catch (error) {
+        console.error('Qobuz token login error:', error);
+        if (statusEl) { statusEl.textContent = 'Connection error'; statusEl.style.color = '#ff5555'; }
+        showToast('Failed to connect to Qobuz', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Connect with Token';
+    }
+}
+
+async function loginQobuz() {
+    const btn = document.getElementById('qobuz-login-btn');
+    const statusEl = document.getElementById('qobuz-auth-status');
+    const email = document.getElementById('qobuz-email').value.trim();
+    const password = document.getElementById('qobuz-password').value;
+
+    if (!email || !password) {
+        showToast('Please enter your Qobuz email and password', 'warning');
+        return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    statusEl.textContent = '';
+
+    try {
+        const resp = await fetch('/api/qobuz/auth/login', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email, password }),
+        });
+
+        const data = await resp.json();
+
+        if (data.success) {
+            showToast('Qobuz connected successfully!', 'success');
+            // Clear password field
+            document.getElementById('qobuz-password').value = '';
+            checkQobuzAuthStatus();
+        } else {
+            statusEl.textContent = data.error || 'Login failed';
+            statusEl.style.color = '#ff5555';
+            showToast(data.error || 'Qobuz login failed', 'error');
+        }
+    } catch (error) {
+        console.error('Qobuz login error:', error);
+        statusEl.textContent = 'Connection error';
+        statusEl.style.color = '#ff5555';
+        showToast('Failed to connect to Qobuz', 'error');
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Connect Qobuz';
+    }
+}
+
+async function logoutQobuz() {
+    try {
+        await fetch('/api/qobuz/auth/logout', { method: 'POST' });
+        showToast('Qobuz disconnected', 'success');
+        checkQobuzAuthStatus();
+    } catch (e) {
+        console.error('Qobuz logout error:', e);
+    }
+}
+
+const PATH_INPUT_IDS = {
+    download: 'download-path',
+    transfer: 'transfer-path',
+    staging: 'staging-path',
+    'music-videos': 'music-videos-path',
+    'm3u-entry-base': 'm3u-entry-base-path'
+};
+
+function togglePathLock(pathType, btn) {
+    const input = document.getElementById(PATH_INPUT_IDS[pathType]);
+    if (!input) return;
+    const isLocked = input.hasAttribute('readonly');
+    if (isLocked) {
+        input.removeAttribute('readonly');
+        input.focus();
+        btn.textContent = 'Lock';
+        btn.classList.remove('locked');
+    } else {
+        input.setAttribute('readonly', '');
+        btn.textContent = 'Unlock';
+        btn.classList.add('locked');
+    }
+}
+
+
+// ===============================
+
diff --git a/webui/static/stats-automations.js b/webui/static/stats-automations.js
new file mode 100644
index 00000000..88fbf2a3
--- /dev/null
+++ b/webui/static/stats-automations.js
@@ -0,0 +1,7576 @@
+// IMPORT PAGE (full page, replaces old modal)
+// ===================================================================
+
+let importJobIdCounter = 0;
+
+const importPageState = {
+    stagingFiles: [],
+    selectedSingles: new Set(),
+    albumData: null,          // response from /api/import/album/match
+    matchOverrides: {},       // { trackIndex: stagingFileIndex }  — manual drag-drop overrides
+    singlesManualMatches: {}, // { stagingFileIndex: { id, name, artist, album, ... } }
+    initialized: false,
+    activeTab: 'album',
+    tapSelectedChip: null,    // for mobile tap-to-assign fallback
+};
+
+// ===============================
+// STATS PAGE
+// ===============================
+
+let _statsRange = '7d';
+let _statsTimelineChart = null;
+let _statsGenreChart = null;
+let _statsDbStorageChart = null;
+let _statsInitialized = false;
+
+function initializeStatsPage() {
+    if (_statsInitialized) {
+        loadStatsData();
+        return;
+    }
+    _statsInitialized = true;
+
+    // Time range buttons
+    const rangeContainer = document.getElementById('stats-time-range');
+    if (rangeContainer) {
+        rangeContainer.addEventListener('click', (e) => {
+            const btn = e.target.closest('.stats-range-btn');
+            if (!btn) return;
+            _statsRange = btn.dataset.range;
+            rangeContainer.querySelectorAll('.stats-range-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            loadStatsData();
+        });
+    }
+
+    loadStatsData();
+    _updateStatsLastSynced();
+}
+
+async function triggerStatsSync() {
+    const btn = document.getElementById('stats-sync-btn');
+    if (btn) btn.classList.add('syncing');
+
+    try {
+        const resp = await fetch('/api/listening-stats/sync', { method: 'POST' });
+        const data = await resp.json();
+        if (data.success) {
+            showToast('Syncing listening data...', 'info');
+            // Wait a few seconds for the sync to complete, then reload
+            setTimeout(async () => {
+                await loadStatsData();
+                _updateStatsLastSynced();
+                if (btn) btn.classList.remove('syncing');
+                showToast('Listening stats updated', 'success');
+            }, 5000);
+        } else {
+            showToast(data.error || 'Sync failed', 'error');
+            if (btn) btn.classList.remove('syncing');
+        }
+    } catch (e) {
+        showToast('Sync failed', 'error');
+        if (btn) btn.classList.remove('syncing');
+    }
+}
+
+async function _updateStatsLastSynced() {
+    const el = document.getElementById('stats-last-synced');
+    if (!el) return;
+    try {
+        const resp = await fetch('/api/listening-stats/status');
+        const data = await resp.json();
+        if (data.stats && data.stats.last_poll) {
+            el.textContent = `Last synced: ${data.stats.last_poll}`;
+        } else {
+            el.textContent = 'Not synced yet';
+        }
+    } catch {
+        el.textContent = '';
+    }
+}
+
+async function loadStatsData() {
+    // Show loading state
+    document.querySelectorAll('.stats-card-value').forEach(el => el.style.opacity = '0.3');
+
+    // Single cached endpoint — instant response
+    let data;
+    try {
+        const resp = await fetch(`/api/stats/cached?range=${_statsRange}`);
+        data = await resp.json();
+    } catch {
+        data = {};
+    }
+
+    if (!data.success) {
+        // Cache not available — show empty state, user should hit Sync
+        data = {
+            overview: {}, top_artists: [], top_albums: [], top_tracks: [],
+            timeline: [], genres: [], recent: [], health: {}
+        };
+    }
+
+    const overview = data.overview || {};
+    const emptyEl = document.getElementById('stats-empty');
+    const hasData = (overview.total_plays || 0) > 0;
+
+    if (emptyEl) {
+        emptyEl.classList.toggle('hidden', hasData);
+    }
+    // Hide main content sections when no data
+    const mainSections = document.querySelectorAll('.stats-overview, .stats-main-grid, .stats-full-width');
+    mainSections.forEach(el => el.style.display = hasData ? '' : 'none');
+
+    // Overview cards
+    const _fmt = (n) => {
+        if (!n) return '0';
+        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+        return n.toLocaleString();
+    };
+    const _fmtTime = (ms) => {
+        if (!ms) return '0h';
+        const hours = Math.floor(ms / 3600000);
+        const mins = Math.floor((ms % 3600000) / 60000);
+        if (hours > 0) return `${hours}h ${mins}m`;
+        return `${mins}m`;
+    };
+
+    // Restore opacity
+    document.querySelectorAll('.stats-card-value').forEach(el => el.style.opacity = '1');
+
+    _setText('stats-total-plays', _fmt(overview.total_plays));
+    _setText('stats-listening-time', _fmtTime(overview.total_time_ms));
+    _setText('stats-unique-artists', _fmt(overview.unique_artists));
+    _setText('stats-unique-albums', _fmt(overview.unique_albums));
+    _setText('stats-unique-tracks', _fmt(overview.unique_tracks));
+
+    // Top Artists — visual bubbles
+    _renderTopArtistsVisual(data.top_artists || []);
+
+    // Top Artists — ranked list
+    _renderRankedList('stats-top-artists', data.top_artists || [], (item, i) => `
+        <div class="stats-ranked-item">
+            <span class="stats-ranked-num">${i + 1}</span>
+            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
+            <div class="stats-ranked-info">
+                <div class="stats-ranked-name">${item.id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.id}','${_esc(item.name).replace(/'/g, "\\'")}'),300)">${_esc(item.name)}</a>` : _esc(item.name)}${item.soul_id && !String(item.soul_id).startsWith('soul_unnamed_') ? ' <img src="/static/trans2.png" style="width:12px;height:12px;vertical-align:middle;opacity:0.5;" title="SoulID">' : ''}</div>
+                <div class="stats-ranked-meta">${item.global_listeners ? _fmt(item.global_listeners) + ' global listeners' : ''}</div>
+            </div>
+            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
+        </div>
+    `);
+
+    // Top Albums
+    _renderRankedList('stats-top-albums', data.top_albums || [], (item, i) => `
+        <div class="stats-ranked-item">
+            <span class="stats-ranked-num">${i + 1}</span>
+            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
+            <div class="stats-ranked-info">
+                <div class="stats-ranked-name">${_esc(item.name)}</div>
+                <div class="stats-ranked-meta">${item.artist_id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.artist_id}','${_esc(item.artist || '').replace(/'/g, "\\'")}'),300)">${_esc(item.artist || '')}</a>` : _esc(item.artist || '')}</div>
+            </div>
+            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
+        </div>
+    `);
+
+    // Top Tracks
+    _renderRankedList('stats-top-tracks', data.top_tracks || [], (item, i) => `
+        <div class="stats-ranked-item">
+            <span class="stats-ranked-num">${i + 1}</span>
+            ${item.image_url ? `<img class="stats-ranked-img" src="${item.image_url}" alt="" onerror="this.style.display='none'">` : ''}
+            <div class="stats-ranked-info">
+                <div class="stats-ranked-name">${_esc(item.name)}</div>
+                <div class="stats-ranked-meta">${item.artist_id ? `<a class="stats-artist-link" onclick="navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${item.artist_id}','${_esc(item.artist || '').replace(/'/g, "\\'")}'),300)">${_esc(item.artist || '')}</a>` : _esc(item.artist || '')}${item.album ? ' · ' + _esc(item.album) : ''}</div>
+            </div>
+            <button class="stats-play-btn" onclick="event.stopPropagation();playStatsTrack('${_esc(item.name).replace(/'/g, "\\'")}','${_esc(item.artist || '').replace(/'/g, "\\'")}','${_esc(item.album || '').replace(/'/g, "\\'")}')" title="Play">▶</button>
+            <span class="stats-ranked-count">${_fmt(item.play_count)} plays</span>
+        </div>
+    `);
+
+    // Timeline chart
+    _renderTimelineChart(data.timeline || []);
+
+    // Genre chart
+    _renderGenreChart(data.genres || []);
+
+    // Library health
+    _renderLibraryHealth(data.health || {});
+
+    // DB storage chart (separate fetch — not part of cached stats)
+    _loadDbStorageChart();
+
+    // Recent plays
+    _renderRecentPlays(data.recent || []);
+}
+
+function _renderTopArtistsVisual(artists) {
+    const el = document.getElementById('stats-top-artists-visual');
+    if (!el || !artists.length) { if (el) el.innerHTML = ''; return; }
+
+    const top5 = artists.slice(0, 5);
+    const maxPlays = top5[0]?.play_count || 1;
+    const _fmt = (n) => {
+        if (!n) return '0';
+        if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+        return n.toString();
+    };
+
+    el.innerHTML = `<div class="stats-artist-bubbles">
+        ${top5.map((a, i) => {
+        const pct = Math.round((a.play_count / maxPlays) * 100);
+        const size = 44 + (4 - i) * 6; // Largest first: 68, 62, 56, 50, 44
+        return `<div class="stats-artist-bubble" onclick="${a.id ? `navigateToPage('library');setTimeout(()=>navigateToArtistDetail('${a.id}','${_esc(a.name).replace(/'/g, "\\\\'")}'),300)` : ''}" style="cursor:${a.id ? 'pointer' : 'default'}">
+                <div class="stats-bubble-img" style="width:${size}px;height:${size}px;${a.image_url ? `background-image:url('${a.image_url}')` : ''}">
+                    ${!a.image_url ? `<span>${(a.name || '?')[0]}</span>` : ''}
+                </div>
+                <div class="stats-bubble-bar-container">
+                    <div class="stats-bubble-bar" style="width:${pct}%"></div>
+                </div>
+                <div class="stats-bubble-name">${_esc(a.name)}</div>
+                <div class="stats-bubble-count">${_fmt(a.play_count)}</div>
+            </div>`;
+    }).join('')}
+    </div>`;
+}
+
+function _setText(id, text) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text;
+}
+
+function _renderRankedList(containerId, items, template) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+    el.innerHTML = items.length
+        ? items.map((item, i) => template(item, i)).join('')
+        : '<div style="color:rgba(255,255,255,0.3);font-size:0.85em;padding:12px;">No data yet</div>';
+}
+
+function _renderTimelineChart(data) {
+    const canvas = document.getElementById('stats-timeline-chart');
+    if (!canvas || typeof Chart === 'undefined') return;
+
+    if (_statsTimelineChart) _statsTimelineChart.destroy();
+
+    _statsTimelineChart = new Chart(canvas, {
+        type: 'bar',
+        data: {
+            labels: data.map(d => d.date),
+            datasets: [{
+                label: 'Plays',
+                data: data.map(d => d.plays),
+                backgroundColor: `rgba(${getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '29,185,84'}, 0.5)`,
+                borderColor: `rgba(${getComputedStyle(document.documentElement).getPropertyValue('--accent-rgb').trim() || '29,185,84'}, 0.8)`,
+                borderWidth: 1,
+                borderRadius: 4,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: {
+                x: { grid: { display: false }, ticks: { color: 'rgba(255,255,255,0.3)', font: { size: 10 }, maxTicksLimit: 12 } },
+                y: { grid: { color: 'rgba(255,255,255,0.04)' }, ticks: { color: 'rgba(255,255,255,0.3)', font: { size: 10 } }, beginAtZero: true },
+            }
+        }
+    });
+}
+
+function _renderGenreChart(data) {
+    const canvas = document.getElementById('stats-genre-chart');
+    const legend = document.getElementById('stats-genre-legend');
+    if (!canvas || typeof Chart === 'undefined') return;
+
+    if (_statsGenreChart) _statsGenreChart.destroy();
+
+    const colors = [
+        '#1db954', '#1ed760', '#4ade80', '#7c3aed', '#a855f7',
+        '#ec4899', '#f43f5e', '#f97316', '#eab308', '#06b6d4',
+        '#3b82f6', '#6366f1', '#14b8a6', '#84cc16', '#f59e0b',
+    ];
+
+    const top = data.slice(0, 10);
+
+    _statsGenreChart = new Chart(canvas, {
+        type: 'doughnut',
+        data: {
+            labels: top.map(g => g.genre),
+            datasets: [{
+                data: top.map(g => g.play_count),
+                backgroundColor: colors.slice(0, top.length),
+                borderWidth: 0,
+                hoverOffset: 6,
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: true,
+            cutout: '65%',
+            plugins: { legend: { display: false } },
+        }
+    });
+
+    if (legend) {
+        legend.innerHTML = top.map((g, i) => `
+            <div class="stats-genre-legend-item">
+                <span class="stats-genre-dot" style="background:${colors[i]}"></span>
+                <span>${g.genre}</span>
+                <span class="stats-genre-pct">${g.percentage}%</span>
+            </div>
+        `).join('');
+    }
+}
+
+function _renderLibraryHealth(data) {
+    if (!data || !data.total_tracks) return;
+
+    const _fmt = (n) => {
+        if (!n) return '0';
+        if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+        if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+        return n.toLocaleString();
+    };
+
+    _setText('stats-unplayed', `${_fmt(data.unplayed_count)} (${data.unplayed_percentage || 0}%)`);
+    _setText('stats-total-duration', data.total_duration_ms ? `${Math.floor(data.total_duration_ms / 3600000)}h` : '0h');
+    _setText('stats-total-tracks-count', _fmt(data.total_tracks));
+
+    // Format bar
+    const bar = document.getElementById('stats-format-bar');
+    if (bar && data.format_breakdown) {
+        const total = Object.values(data.format_breakdown).reduce((s, v) => s + v, 0) || 1;
+        const fmtColors = { FLAC: '#3b82f6', MP3: '#f97316', Opus: '#a855f7', AAC: '#14b8a6', OGG: '#eab308', WAV: '#ec4899', Other: '#555' };
+
+        bar.innerHTML = Object.entries(data.format_breakdown).map(([fmt, count]) => {
+            const pct = (count / total * 100).toFixed(1);
+            return `<div class="stats-format-segment" style="flex:${count};background:${fmtColors[fmt] || '#555'}" title="${fmt}: ${count} tracks (${pct}%)">${pct > 8 ? fmt : ''}</div>`;
+        }).join('');
+    }
+
+    // Enrichment coverage
+    const enrichEl = document.getElementById('stats-enrichment-coverage');
+    if (enrichEl && data.enrichment_coverage) {
+        const ec = data.enrichment_coverage;
+        const services = [
+            { name: 'Spotify', pct: ec.spotify || 0, color: '#1db954' },
+            { name: 'MusicBrainz', pct: ec.musicbrainz || 0, color: '#ba55d3' },
+            { name: 'Deezer', pct: ec.deezer || 0, color: '#a238ff' },
+            { name: 'Last.fm', pct: ec.lastfm || 0, color: '#d51007' },
+            { name: 'iTunes', pct: ec.itunes || 0, color: '#fc3c44' },
+            { name: 'AudioDB', pct: ec.audiodb || 0, color: '#1a9fff' },
+            { name: 'Genius', pct: ec.genius || 0, color: '#ffff64' },
+            { name: 'Tidal', pct: ec.tidal || 0, color: '#00ffff' },
+            { name: 'Qobuz', pct: ec.qobuz || 0, color: '#4285f4' },
+        ];
+        enrichEl.innerHTML = services.map(s => `
+            <div class="stats-enrich-item">
+                <span class="stats-enrich-name">${s.name}</span>
+                <div class="stats-enrich-bar"><div class="stats-enrich-fill" style="width:${s.pct}%;background:${s.color}"></div></div>
+                <span class="stats-enrich-pct">${s.pct}%</span>
+            </div>
+        `).join('');
+    }
+}
+
+async function _loadDbStorageChart() {
+    try {
+        const resp = await fetch('/api/stats/db-storage');
+        const data = await resp.json();
+        if (!data.success || !data.tables || !data.tables.length) return;
+        _renderDbStorageChart(data.tables, data.total_file_size, data.method);
+    } catch (e) {
+        console.debug('DB storage chart load failed:', e);
+    }
+}
+
+function _renderDbStorageChart(tables, totalFileSize, method) {
+    const canvas = document.getElementById('stats-db-storage-chart');
+    if (!canvas || typeof Chart === 'undefined') return;
+
+    if (_statsDbStorageChart) _statsDbStorageChart.destroy();
+
+    // Top 8 tables, group rest as "Other"
+    const top = tables.slice(0, 8);
+    const rest = tables.slice(8);
+    const restSize = rest.reduce((s, t) => s + t.size, 0);
+    if (restSize > 0) top.push({ name: 'Other', size: restSize });
+
+    const colors = ['#3b82f6', '#f97316', '#a855f7', '#14b8a6', '#eab308', '#ec4899', '#6366f1', '#22c55e', '#555'];
+
+    _statsDbStorageChart = new Chart(canvas, {
+        type: 'doughnut',
+        data: {
+            labels: top.map(t => t.name),
+            datasets: [{
+                data: top.map(t => t.size),
+                backgroundColor: colors.slice(0, top.length),
+                borderWidth: 0,
+                hoverOffset: 4,
+            }],
+        },
+        options: {
+            responsive: false,
+            cutout: '65%',
+            plugins: {
+                legend: { display: false },
+                tooltip: {
+                    callbacks: {
+                        label: (ctx) => {
+                            const val = ctx.parsed;
+                            if (method === 'dbstat') {
+                                if (val > 1048576) return ` ${(val / 1048576).toFixed(1)} MB`;
+                                return ` ${(val / 1024).toFixed(0)} KB`;
+                            }
+                            return ` ${val.toLocaleString()} rows`;
+                        }
+                    }
+                }
+            },
+        },
+    });
+
+    // Center label — total file size
+    const totalEl = document.getElementById('stats-db-total');
+    if (totalEl) {
+        let sizeStr;
+        if (totalFileSize > 1073741824) sizeStr = (totalFileSize / 1073741824).toFixed(2) + ' GB';
+        else if (totalFileSize > 1048576) sizeStr = (totalFileSize / 1048576).toFixed(1) + ' MB';
+        else sizeStr = (totalFileSize / 1024).toFixed(0) + ' KB';
+        totalEl.innerHTML = `<div class="stats-db-total-value">${sizeStr}</div><div class="stats-db-total-label">Total Size</div>`;
+    }
+
+    // Legend
+    const legendEl = document.getElementById('stats-db-legend');
+    if (legendEl) {
+        legendEl.innerHTML = top.map((t, i) => {
+            let sizeLabel;
+            if (method === 'dbstat') {
+                if (t.size > 1048576) sizeLabel = (t.size / 1048576).toFixed(1) + ' MB';
+                else sizeLabel = (t.size / 1024).toFixed(0) + ' KB';
+            } else {
+                sizeLabel = t.size.toLocaleString() + ' rows';
+            }
+            return `<div class="stats-db-legend-item">
+                <span class="stats-db-legend-dot" style="background:${colors[i]}"></span>
+                <span class="stats-db-legend-name">${t.name}</span>
+                <span class="stats-db-legend-size">${sizeLabel}</span>
+            </div>`;
+        }).join('');
+    }
+}
+
+async function playStatsTrack(title, artist, album) {
+    try {
+        const resp = await fetch('/api/stats/resolve-track', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title, artist }),
+        });
+        const data = await resp.json();
+        if (!data.success || !data.track) {
+            showToast(data.error || 'Track not found in library', 'error');
+            return;
+        }
+        const t = data.track;
+        playLibraryTrack({
+            id: t.id,
+            title: t.title,
+            file_path: t.file_path,
+            bitrate: t.bitrate,
+            artist_id: t.artist_id,
+            album_id: t.album_id,
+            _stats_image: t.image_url || null,
+        }, t.album_title || album || '', t.artist_name || artist || '');
+    } catch (e) {
+        showToast('Failed to play track', 'error');
+    }
+}
+
+function _renderRecentPlays(tracks) {
+    const el = document.getElementById('stats-recent-plays');
+    if (!el) return;
+
+    if (!tracks.length) {
+        el.innerHTML = '<div style="color:rgba(255,255,255,0.3);font-size:0.85em;padding:12px;">No recent plays</div>';
+        return;
+    }
+
+    const _ago = (dateStr) => {
+        if (!dateStr) return '';
+        const diff = Date.now() - new Date(dateStr).getTime();
+        const mins = Math.floor(diff / 60000);
+        if (mins < 60) return `${mins}m ago`;
+        const hours = Math.floor(mins / 60);
+        if (hours < 24) return `${hours}h ago`;
+        const days = Math.floor(hours / 24);
+        if (days < 30) return `${days}d ago`;
+        return `${Math.floor(days / 30)}mo ago`;
+    };
+
+    el.innerHTML = tracks.map(t => `
+        <div class="stats-recent-item">
+            <button class="stats-play-btn stats-play-btn-sm" onclick="event.stopPropagation();playStatsTrack('${_esc(t.title).replace(/'/g, "\\'")}','${_esc(t.artist || '').replace(/'/g, "\\'")}','${_esc(t.album || '').replace(/'/g, "\\'")}')" title="Play">▶</button>
+            <span class="stats-recent-title">${_esc(t.title)}</span>
+            <span class="stats-recent-artist">${_esc(t.artist || '')}</span>
+            <span class="stats-recent-time">${_ago(t.played_at)}</span>
+        </div>
+    `).join('');
+}
+
+// --- Initialization ---
+
+function initializeImportPage() {
+    if (!importPageState.initialized) {
+        importPageState.initialized = true;
+        importPageRefreshStaging();
+        importPageLoadAutoGroups();
+        importPageLoadSuggestions();
+    }
+}
+
+async function importPageRefreshStaging() {
+    // Clear finished jobs from the queue
+    importPageClearFinishedJobs();
+
+    try {
+        const resp = await fetch('/api/import/staging/files');
+        const data = await resp.json();
+        if (!data.success) {
+            document.getElementById('import-page-staging-path').textContent = `Import folder: error`;
+            return;
+        }
+
+        importPageState.stagingFiles = data.files || [];
+        document.getElementById('import-page-staging-path').textContent = `Import: ${data.staging_path || 'Not configured'}`;
+
+        const totalSize = importPageState.stagingFiles.reduce((s, f) => s + (f.size || 0), 0);
+        const sizeStr = totalSize > 1073741824 ? `${(totalSize / 1073741824).toFixed(1)} GB`
+            : totalSize > 1048576 ? `${(totalSize / 1048576).toFixed(0)} MB`
+                : `${(totalSize / 1024).toFixed(0)} KB`;
+        document.getElementById('import-page-staging-stats').textContent =
+            `${importPageState.stagingFiles.length} file${importPageState.stagingFiles.length !== 1 ? 's' : ''}${totalSize ? ' · ' + sizeStr : ''}`;
+
+        // Refresh the current tab view after data is loaded
+        if (importPageState.activeTab === 'singles') {
+            importPageRenderSinglesList();
+        } else if (importPageState.activeTab === 'album') {
+            importPageLoadAutoGroups();
+        }
+        // Always refresh suggestions and groups in background
+        importPageLoadSuggestions();
+    } catch (err) {
+        console.error('Failed to refresh staging:', err);
+    }
+}
+
+function importPageSwitchTab(tab) {
+    importPageState.activeTab = tab;
+    document.getElementById('import-page-tab-album').classList.toggle('active', tab === 'album');
+    document.getElementById('import-page-tab-singles').classList.toggle('active', tab === 'singles');
+    document.getElementById('import-page-tab-auto')?.classList.toggle('active', tab === 'auto');
+    document.getElementById('import-page-album-content').classList.toggle('active', tab === 'album');
+    document.getElementById('import-page-singles-content')?.classList.toggle('active', tab === 'singles');
+    document.getElementById('import-page-auto-content')?.classList.toggle('active', tab === 'auto');
+
+    if (tab === 'singles' && importPageState.stagingFiles.length > 0) {
+        importPageRenderSinglesList();
+    }
+    if (tab === 'auto') {
+        _autoImportLoadStatus();
+        _autoImportLoadResults();
+        _autoImportStartPolling();
+    } else {
+        _autoImportStopPolling();
+    }
+}
+
+// ── Auto-Import Tab ──
+let _autoImportPollInterval = null;
+let _autoImportFilter = 'all';
+
+function _autoImportStartPolling() {
+    _autoImportStopPolling();
+    _autoImportPollInterval = setInterval(() => {
+        if (importPageState.activeTab === 'auto') {
+            _autoImportLoadStatus();
+            _autoImportLoadResults();
+        }
+    }, 5000);
+}
+
+function _autoImportStopPolling() {
+    if (_autoImportPollInterval) { clearInterval(_autoImportPollInterval); _autoImportPollInterval = null; }
+}
+
+async function _autoImportToggle(enabled) {
+    // Optimistically update toggle state so it doesn't flicker
+    const toggle = document.getElementById('auto-import-enabled');
+    if (toggle) toggle.checked = enabled;
+    const statusText = document.getElementById('auto-import-status-text');
+    if (statusText) statusText.textContent = enabled ? 'Starting...' : 'Stopping...';
+
+    try {
+        const res = await fetch('/api/auto-import/toggle', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ enabled })
+        });
+        const data = await res.json();
+        if (data.success) {
+            showToast(enabled ? 'Auto-import enabled' : 'Auto-import disabled', 'success');
+            _autoImportLoadStatus();
+        } else {
+            // Revert on failure
+            if (toggle) toggle.checked = !enabled;
+        }
+    } catch (e) {
+        showToast('Error: ' + e.message, 'error');
+        if (toggle) toggle.checked = !enabled;
+    }
+}
+
+async function _autoImportLoadStatus() {
+    try {
+        const res = await fetch('/api/auto-import/status');
+        const data = await res.json();
+        if (!data.success) return;
+
+        const toggle = document.getElementById('auto-import-enabled');
+        const statusText = document.getElementById('auto-import-status-text');
+        const settingsRow = document.getElementById('auto-import-settings-row');
+        const scanNowBtn = document.getElementById('auto-import-scan-now');
+        const progressEl = document.getElementById('auto-import-progress');
+        const progressText = document.getElementById('auto-import-progress-text');
+
+        if (toggle) toggle.checked = data.running;
+        if (settingsRow) settingsRow.style.display = data.running ? '' : 'none';
+        if (scanNowBtn) scanNowBtn.style.display = data.running ? '' : 'none';
+
+        // Live scan progress
+        if (progressEl) {
+            if (data.current_status === 'scanning') {
+                progressEl.style.display = '';
+                if (progressText) {
+                    const stats = data.stats || {};
+                    progressText.textContent = `Scanning: ${data.current_folder || '...'} (${stats.scanned || 0} processed)`;
+                }
+            } else {
+                progressEl.style.display = 'none';
+            }
+        }
+
+        if (statusText) {
+            if (data.paused) statusText.textContent = 'Paused';
+            else if (data.current_status === 'scanning') statusText.textContent = 'Scanning...';
+            else if (data.running) {
+                // Show last scan time
+                let watchText = 'Watching';
+                if (data.last_scan_time) {
+                    try {
+                        const lastScan = new Date(data.last_scan_time);
+                        const diffS = Math.floor((Date.now() - lastScan) / 1000);
+                        if (diffS < 60) watchText = `Watching (scanned ${diffS}s ago)`;
+                        else if (diffS < 3600) watchText = `Watching (scanned ${Math.floor(diffS / 60)}m ago)`;
+                    } catch (e) {}
+                }
+                statusText.textContent = watchText;
+            } else statusText.textContent = 'Disabled';
+            statusText.className = 'auto-import-status ' + (data.running ? (data.current_status === 'scanning' ? 'scanning' : 'active') : 'disabled');
+        }
+    } catch (e) {}
+}
+
+async function _autoImportLoadResults() {
+    const container = document.getElementById('auto-import-results');
+    if (!container) return;
+    try {
+        const res = await fetch('/api/auto-import/results?limit=100');
+        const data = await res.json();
+        if (!data.success || !data.results || data.results.length === 0) {
+            if (!container.querySelector('.auto-import-card')) {
+                container.innerHTML = `<div class="auto-import-empty">
+                    <p>No imports yet. Drop album folders or single tracks into your import folder.</p>
+                </div>`;
+            }
+            // Hide stats and filters
+            const statsEl = document.getElementById('auto-import-stats');
+            const filtersEl = document.getElementById('auto-import-filters');
+            if (statsEl) statsEl.style.display = 'none';
+            if (filtersEl) filtersEl.style.display = 'none';
+            return;
+        }
+
+        // Compute stats
+        const allResults = data.results;
+        const importedCount = allResults.filter(r => r.status === 'completed' || r.status === 'approved').length;
+        const reviewCount = allResults.filter(r => r.status === 'pending_review').length;
+        const failedCount = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification').length;
+
+        // Update stats
+        const statsEl = document.getElementById('auto-import-stats');
+        if (statsEl) {
+            statsEl.style.display = '';
+            document.getElementById('auto-import-stat-imported').textContent = `${importedCount} imported`;
+            document.getElementById('auto-import-stat-review').textContent = `${reviewCount} review`;
+            document.getElementById('auto-import-stat-failed').textContent = `${failedCount} failed`;
+        }
+
+        // Show filters
+        const filtersEl = document.getElementById('auto-import-filters');
+        if (filtersEl) {
+            filtersEl.style.display = '';
+            // Show batch action buttons when applicable
+            const approveAllBtn = document.getElementById('auto-import-approve-all');
+            const clearBtn = document.getElementById('auto-import-clear-completed');
+            if (approveAllBtn) approveAllBtn.style.display = reviewCount > 0 ? '' : 'none';
+            if (clearBtn) clearBtn.style.display = (importedCount + failedCount) > 0 ? '' : 'none';
+        }
+
+        // Apply filter
+        let filtered = allResults;
+        if (_autoImportFilter === 'pending') filtered = allResults.filter(r => r.status === 'pending_review');
+        else if (_autoImportFilter === 'imported') filtered = allResults.filter(r => r.status === 'completed' || r.status === 'approved');
+        else if (_autoImportFilter === 'failed') filtered = allResults.filter(r => r.status === 'failed' || r.status === 'needs_identification');
+
+        if (filtered.length === 0) {
+            const filterName = _autoImportFilter === 'pending' ? 'pending review' : _autoImportFilter;
+            container.innerHTML = `<div class="auto-import-empty"><p>No ${filterName} items.</p></div>`;
+            return;
+        }
+
+        container.innerHTML = filtered.map((r, idx) => {
+            const confPct = Math.round((r.confidence || 0) * 100);
+            const confClass = confPct >= 90 ? 'high' : confPct >= 70 ? 'medium' : 'low';
+            const statusLabels = {
+                'completed': 'Imported', 'pending_review': 'Needs Review',
+                'needs_identification': 'Unidentified', 'failed': 'Failed',
+                'scanning': 'Scanning...', 'matched': 'Matched',
+                'rejected': 'Dismissed', 'approved': 'Approved',
+            };
+            const statusIcons = {
+                'completed': '\u2713', 'pending_review': '\u26A0',
+                'needs_identification': '\u2717', 'failed': '\u2717',
+                'scanning': '\u231B', 'matched': '\u2713',
+                'rejected': '\u2715', 'approved': '\u2713',
+            };
+            const statusLabel = statusLabels[r.status] || r.status;
+            const statusIcon = statusIcons[r.status] || '';
+            const statusClass = r.status === 'completed' ? 'completed' : r.status === 'pending_review' ? 'review' :
+                r.status === 'failed' || r.status === 'needs_identification' ? 'failed' : 'neutral';
+
+            // Parse match data for track details
+            let matchCount = 0, totalTracks = 0, trackDetails = [];
+            if (r.match_data) {
+                try {
+                    const md = typeof r.match_data === 'string' ? JSON.parse(r.match_data) : r.match_data;
+                    matchCount = md.matched_count || 0;
+                    totalTracks = md.total_tracks || 0;
+                    if (md.matches) {
+                        trackDetails = md.matches.map(m => ({
+                            name: m.track_name || m.track?.name || 'Unknown',
+                            file: m.file ? m.file.split(/[/\\]/).pop() : '?',
+                            confidence: Math.round((m.confidence || 0) * 100),
+                        }));
+                    }
+                } catch (e) {}
+            }
+
+            const matchSummary = totalTracks > 0 ? `${matchCount}/${totalTracks} tracks` : `${r.total_files} files`;
+            const methodLabels = { tags: 'Tags', folder_name: 'Folder Name', acoustid: 'AcoustID', filename: 'Filename' };
+            const methodLabel = methodLabels[r.identification_method] || r.identification_method || '';
+
+            // Time ago
+            let timeAgo = '';
+            if (r.created_at) {
+                try {
+                    const d = new Date(r.created_at);
+                    const diffM = Math.floor((Date.now() - d) / 60000);
+                    if (diffM < 1) timeAgo = 'just now';
+                    else if (diffM < 60) timeAgo = `${diffM}m ago`;
+                    else if (diffM < 1440) timeAgo = `${Math.floor(diffM / 60)}h ago`;
+                    else timeAgo = `${Math.floor(diffM / 1440)}d ago`;
+                } catch (e) {}
+            }
+
+            let actions = '';
+            if (r.status === 'pending_review') {
+                actions = `<div class="auto-import-actions">
+                    <button class="watchlist-action-btn watchlist-action-primary" onclick="event.stopPropagation(); _autoImportApprove(${r.id})">Approve & Import</button>
+                    <button class="watchlist-action-btn watchlist-action-secondary" onclick="event.stopPropagation(); _autoImportReject(${r.id})">Dismiss</button>
+                </div>`;
+            }
+
+            // Expanded track list (hidden by default)
+            let trackListHtml = '';
+            if (trackDetails.length > 0) {
+                trackListHtml = `<div class="auto-import-track-list" id="auto-import-tracks-${idx}">
+                    <div class="auto-import-track-list-header">
+                        <span>Track</span><span>Matched File</span><span>Conf</span>
+                    </div>
+                    ${trackDetails.map(t => {
+                        const tConfClass = t.confidence >= 90 ? 'high' : t.confidence >= 70 ? 'medium' : 'low';
+                        return `<div class="auto-import-track-row">
+                            <span class="auto-import-track-name">${escapeHtml(t.name)}</span>
+                            <span class="auto-import-track-file">${escapeHtml(t.file)}</span>
+                            <span class="auto-import-track-conf auto-import-conf-${tConfClass}">${t.confidence}%</span>
+                        </div>`;
+                    }).join('')}
+                </div>`;
+            }
+
+            return `<div class="auto-import-card auto-import-${statusClass}" onclick="_autoImportToggleDetail(${idx})" style="cursor:pointer">
+                <div class="auto-import-card-top">
+                    <div class="auto-import-card-left">
+                        ${r.image_url ? `<img class="auto-import-card-art" src="${r.image_url}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="auto-import-card-art-fallback" style="display:none">\uD83D\uDCBF</div>` : `<div class="auto-import-card-art-fallback">\uD83D\uDCBF</div>`}
+                    </div>
+                    <div class="auto-import-card-center">
+                        <div class="auto-import-card-album">${escapeHtml(r.album_name || r.folder_name)}</div>
+                        <div class="auto-import-card-artist">${escapeHtml(r.artist_name || 'Unknown Artist')}</div>
+                        <div class="auto-import-card-meta">
+                            <span>${matchSummary}</span>
+                            ${methodLabel ? `<span class="auto-import-method-badge">${methodLabel}</span>` : ''}
+                            ${timeAgo ? `<span>${timeAgo}</span>` : ''}
+                        </div>
+                        ${r.error_message ? `<div class="auto-import-card-error">${escapeHtml(r.error_message)}</div>` : ''}
+                    </div>
+                    <div class="auto-import-card-right">
+                        <div class="auto-import-status-badge auto-import-badge-${statusClass}">${statusIcon} ${statusLabel}</div>
+                        <div class="auto-import-confidence-bar">
+                            <div class="auto-import-confidence-fill auto-import-conf-${confClass}" style="width:${confPct}%"></div>
+                        </div>
+                        <div class="auto-import-confidence-text">${confPct}% confidence</div>
+                        ${actions}
+                    </div>
+                </div>
+                <div class="auto-import-card-folder-path">${escapeHtml(r.folder_name)}</div>
+                ${trackListHtml}
+            </div>`;
+        }).join('');
+
+    } catch (e) {}
+}
+
+async function _autoImportSaveSettings() {
+    const confidence = (document.getElementById('auto-import-confidence')?.value || 90) / 100;
+    const interval = parseInt(document.getElementById('auto-import-interval')?.value || 60);
+    try {
+        await fetch('/api/auto-import/settings', {
+            method: 'POST', headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ confidence_threshold: confidence, scan_interval: interval })
+        });
+        showToast('Settings saved', 'success');
+    } catch (e) { showToast('Error', 'error'); }
+}
+
+function _autoImportSetFilter(filter) {
+    _autoImportFilter = filter;
+    document.querySelectorAll('#auto-import-filters .adl-pill').forEach(p =>
+        p.classList.toggle('active', p.dataset.filter === filter));
+    _autoImportLoadResults();
+}
+
+async function _autoImportScanNow() {
+    try {
+        const res = await fetch('/api/auto-import/scan-now', { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast('Scan triggered', 'success');
+            _autoImportLoadStatus();
+        } else {
+            showToast(data.error || 'Failed to trigger scan', 'error');
+        }
+    } catch (e) { showToast('Error: ' + e.message, 'error'); }
+}
+
+async function _autoImportApproveAll() {
+    const confirmed = await showConfirmDialog({
+        title: 'Approve All',
+        message: 'Approve and import all pending review items?',
+        confirmText: 'Approve All',
+    });
+    if (!confirmed) return;
+    try {
+        const res = await fetch('/api/auto-import/approve-all', { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Approved ${data.count || 0} items`, 'success');
+            _autoImportLoadResults();
+        } else {
+            showToast(data.error || 'Failed', 'error');
+        }
+    } catch (e) { showToast('Error: ' + e.message, 'error'); }
+}
+
+async function _autoImportClearCompleted() {
+    try {
+        const res = await fetch('/api/auto-import/clear-completed', { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Cleared ${data.count || 0} imported items`, 'success');
+            _autoImportLoadResults();
+        } else {
+            showToast(data.error || 'Failed', 'error');
+        }
+    } catch (e) { showToast('Error: ' + e.message, 'error'); }
+}
+
+function _autoImportToggleDetail(idx) {
+    const trackList = document.getElementById(`auto-import-tracks-${idx}`);
+    if (trackList) {
+        trackList.classList.toggle('expanded');
+    }
+}
+window._autoImportToggleDetail = _autoImportToggleDetail;
+window._autoImportSetFilter = _autoImportSetFilter;
+window._autoImportScanNow = _autoImportScanNow;
+window._autoImportApproveAll = _autoImportApproveAll;
+window._autoImportClearCompleted = _autoImportClearCompleted;
+
+async function _autoImportApprove(id) {
+    try {
+        const res = await fetch(`/api/auto-import/approve/${id}`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) { showToast('Approved', 'success'); _autoImportLoadResults(); }
+        else showToast(data.error || 'Failed', 'error');
+    } catch (e) { showToast('Error', 'error'); }
+}
+
+async function _autoImportReject(id) {
+    try {
+        const res = await fetch(`/api/auto-import/reject/${id}`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) { showToast('Dismissed', 'success'); _autoImportLoadResults(); }
+        else showToast(data.error || 'Failed', 'error');
+    } catch (e) { showToast('Error', 'error'); }
+}
+
+// --- Album Tab: Auto-Detected Groups (from file tags) ---
+
+async function importPageLoadAutoGroups() {
+    const grid = document.getElementById('import-page-suggestions-grid');
+    if (!grid) return;
+
+    try {
+        const resp = await fetch('/api/import/staging/groups');
+        if (!resp.ok) return;
+        const data = await resp.json();
+
+        if (!data.success || !data.groups || data.groups.length === 0) return;
+
+        // Build auto-groups section above suggestions
+        let groupsContainer = document.getElementById('import-page-auto-groups');
+        if (!groupsContainer) {
+            groupsContainer = document.createElement('div');
+            groupsContainer.id = 'import-page-auto-groups';
+            groupsContainer.style.marginBottom = '16px';
+            const suggestionsSection = document.getElementById('import-page-suggestions');
+            if (suggestionsSection) {
+                suggestionsSection.parentNode.insertBefore(groupsContainer, suggestionsSection);
+            } else {
+                grid.parentNode.insertBefore(groupsContainer, grid);
+            }
+        }
+
+        groupsContainer.innerHTML = `
+            <div style="font-size:0.82em;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:10px;">
+                Auto-Detected Albums
+            </div>
+            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;">
+                ${data.groups.map((g, idx) => `
+                    <div class="import-page-album-card" style="cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);transition:all 0.2s;"
+                         onmouseenter="this.style.borderColor='rgba(255,255,255,0.12)';this.style.background='rgba(255,255,255,0.05)'"
+                         onmouseleave="this.style.borderColor='rgba(255,255,255,0.06)';this.style.background='rgba(255,255,255,0.03)'"
+                         onclick="importPageMatchAutoGroup(${idx})">
+                        <div style="width:48px;height:48px;border-radius:8px;background:rgba(var(--accent-rgb,29,185,84),0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.2em;">
+                            ${g.file_count}
+                        </div>
+                        <div style="min-width:0;">
+                            <div style="font-size:0.92em;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.album)}">${_esc(g.album)}</div>
+                            <div style="font-size:0.8em;color:rgba(255,255,255,0.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${_escAttr(g.artist)}">${_esc(g.artist)} · ${g.file_count} tracks</div>
+                        </div>
+                    </div>
+                `).join('')}
+            </div>
+        `;
+
+        // Store groups for click handler
+        importPageState._autoGroups = data.groups;
+    } catch (err) {
+        console.warn('Failed to load auto-groups:', err);
+    }
+}
+
+async function importPageMatchAutoGroup(groupIdx) {
+    const group = importPageState._autoGroups?.[groupIdx];
+    if (!group) return;
+
+    // Search for the album by name + artist
+    const query = `${group.artist} ${group.album}`;
+    const searchInput = document.getElementById('import-page-album-search-input');
+    if (searchInput) searchInput.value = query;
+
+    // Hide suggestions/groups, show search results
+    const suggestionsEl = document.getElementById('import-page-suggestions');
+    const groupsEl = document.getElementById('import-page-auto-groups');
+    if (suggestionsEl) suggestionsEl.style.display = 'none';
+    if (groupsEl) groupsEl.style.display = 'none';
+
+    const grid = document.getElementById('import-page-album-results');
+    if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
+
+    try {
+        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
+        const data = await resp.json();
+
+        if (data.success && data.albums && data.albums.length > 0) {
+            // Store file_paths filter so match only includes this group's files
+            importPageState._autoGroupFilePaths = group.file_paths;
+
+            // Render results — user picks the right album
+            grid.innerHTML = data.albums.map(a => _renderSuggestionCard(a)).join('');
+        } else {
+            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found — try searching manually</div>';
+        }
+    } catch (err) {
+        console.error('Auto-group search failed:', err);
+        if (grid) grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Search failed</div>';
+    }
+}
+
+// --- Album Tab: Suggestions (server-side cache, just fetch and render) ---
+
+async function importPageLoadSuggestions() {
+    const section = document.getElementById('import-page-suggestions');
+    const grid = document.getElementById('import-page-suggestions-grid');
+    if (!section || !grid) return;
+
+    try {
+        const resp = await fetch('/api/import/staging/suggestions');
+        if (!resp.ok) return;
+        const data = await resp.json();
+
+        if (!data.success || !data.suggestions || data.suggestions.length === 0) {
+            if (!data.ready) {
+                // Server is still building cache — show placeholder, retry shortly
+                section.style.display = '';
+                grid.innerHTML = '<div style="color:#888;font-size:13px;padding:8px;">Loading suggestions...</div>';
+                setTimeout(() => importPageLoadSuggestions(), 3000);
+            } else {
+                section.style.display = 'none';
+                grid.innerHTML = '';
+            }
+            return;
+        }
+
+        section.style.display = '';
+        grid.innerHTML = data.suggestions.map(a => _renderSuggestionCard(a)).join('');
+    } catch (err) {
+        // Network error or server not ready — fail silently
+        console.warn('Failed to load import suggestions:', err);
+    }
+}
+
+function _renderSuggestionCard(a) {
+    return `<div class="import-page-album-card" onclick="importPageSelectAlbum('${a.id}')">
+        <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+        <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
+        <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
+        <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
+    </div>`;
+}
+
+// --- Album Tab: Search ---
+
+async function importPageSearchAlbum() {
+    const query = document.getElementById('import-page-album-search-input').value.trim();
+    if (!query) return;
+
+    document.getElementById('import-page-suggestions').style.display = 'none';
+    const groupsEl = document.getElementById('import-page-auto-groups');
+    if (groupsEl) groupsEl.style.display = 'none';
+    const grid = document.getElementById('import-page-album-results');
+    grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Searching...</div>';
+
+    try {
+        const resp = await fetch(`/api/import/search/albums?q=${encodeURIComponent(query)}&limit=12`);
+        const data = await resp.json();
+        if (!data.success || !data.albums.length) {
+            grid.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">No albums found</div>';
+            return;
+        }
+        grid.innerHTML = data.albums.map(a => `
+            <div class="import-page-album-card" onclick="importPageSelectAlbum('${a.id}')">
+                <img src="${a.image_url || '/static/placeholder.png'}" alt="${_escAttr(a.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+                <div class="import-page-album-card-title" title="${_escAttr(a.name)}">${_esc(a.name)}</div>
+                <div class="import-page-album-card-artist" title="${_escAttr(a.artist)}">${_esc(a.artist)}</div>
+                <div class="import-page-album-card-meta">${a.total_tracks} tracks · ${a.release_date ? a.release_date.substring(0, 4) : ''}</div>
+            </div>
+        `).join('');
+        document.getElementById('import-page-album-clear-btn').classList.remove('hidden');
+    } catch (err) {
+        grid.innerHTML = `<div style="color:#ef4444;text-align:center;padding:20px;">Error: ${err.message}</div>`;
+    }
+}
+
+// --- Album Tab: Select Album & Match ---
+
+async function importPageSelectAlbum(albumId) {
+    document.getElementById('import-page-album-search-section').classList.add('hidden');
+    document.getElementById('import-page-album-match-section').classList.remove('hidden');
+
+    const matchList = document.getElementById('import-page-match-list');
+    matchList.innerHTML = '<div style="color:#888;text-align:center;padding:20px;">Matching files to tracklist...</div>';
+
+    try {
+        // Include file_paths filter if matching from an auto-group
+        const matchBody = { album_id: albumId };
+        if (importPageState._autoGroupFilePaths) {
+            matchBody.file_paths = importPageState._autoGroupFilePaths;
+            importPageState._autoGroupFilePaths = null; // clear after use
+        }
+        const resp = await fetch('/api/import/album/match', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(matchBody)
+        });
+        const data = await resp.json();
+        if (!data.success) {
+            matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${data.error}</div>`;
+            return;
+        }
+
+        importPageState.albumData = data;
+        importPageState.matchOverrides = {};
+
+        // Render hero
+        const album = data.album;
+        document.getElementById('import-page-album-hero').innerHTML = `
+            <img src="${album.image_url || '/static/placeholder.png'}" alt="${_escAttr(album.name)}" loading="lazy" onerror="this.src='/static/placeholder.png'">
+            <div class="import-page-album-hero-info">
+                <div class="import-page-album-hero-title">${_esc(album.name)}</div>
+                <div class="import-page-album-hero-artist">${_esc(album.artist)}</div>
+                <div class="import-page-album-hero-meta">${album.total_tracks} tracks · ${album.release_date ? album.release_date.substring(0, 4) : ''}</div>
+            </div>
+        `;
+
+        importPageRenderMatchList();
+    } catch (err) {
+        matchList.innerHTML = `<div style="color:#ef4444;padding:20px;">Error: ${err.message}</div>`;
+    }
+}
+
+function importPageRenderMatchList() {
+    const data = importPageState.albumData;
+    if (!data) return;
+
+    const matchList = document.getElementById('import-page-match-list');
+    const overrides = importPageState.matchOverrides;
+
+    // Build effective matches: auto-match overridden by manual overrides
+    // Also track which staging files are used (auto or override)
+    const usedStagingFiles = new Set();
+
+    // First pass: collect overridden indices
+    Object.values(overrides).forEach(sfIdx => usedStagingFiles.add(sfIdx));
+
+    // Build rows
+    let matchedCount = 0;
+    const rows = data.matches.map((m, idx) => {
+        let file = null;
+        let confidence = m.confidence;
+        let isOverride = false;
+
+        if (overrides.hasOwnProperty(idx)) {
+            const sfIdx = overrides[idx];
+            if (sfIdx === -1) {
+                // Forcibly unmatched — no file
+                file = null;
+            } else {
+                // Manual override
+                file = importPageState.stagingFiles[sfIdx] || null;
+                confidence = 1.0;
+                isOverride = true;
+                usedStagingFiles.add(sfIdx);
+            }
+        } else if (m.staging_file) {
+            file = m.staging_file;
+            // Check if this file was reassigned to another track via override
+            const autoFileName = m.staging_file.filename;
+            const reassigned = Object.entries(overrides).some(([tIdx, sfIdx]) => {
+                const sf = importPageState.stagingFiles[sfIdx];
+                return sf && sf.filename === autoFileName && parseInt(tIdx) !== idx;
+            });
+            if (!reassigned) {
+                usedStagingFiles.add(-1); // placeholder — auto-matched file
+            } else {
+                file = null; // file was reassigned elsewhere
+            }
+        }
+
+        if (file) matchedCount++;
+        const confPercent = Math.round(confidence * 100);
+        const confClass = confidence >= 0.7 ? '' : 'low';
+
+        return `
+            <div class="import-page-match-row ${file ? 'matched' : ''}"
+                 ondragover="importPageHandleDragOver(event)" ondragleave="this.classList.remove('drag-over')" ondrop="importPageHandleDrop(event, ${idx})"
+                 onclick="importPageTapAssign(${idx})">
+                <span class="import-page-match-num">${m.spotify_track.track_number}</span>
+                <span class="import-page-match-track">${_esc(m.spotify_track.name)}</span>
+                <span class="import-page-match-file ${file ? 'has-file' : ''}">
+                    ${file
+                ? `<span class="import-page-match-file-name">${_esc(file.filename)}</span>
+                           <span class="import-page-match-confidence ${confClass}">${confPercent}%</span>`
+                : `<span class="import-page-match-drop-zone">Drop a file here</span>`}
+                </span>
+                <span>${file ? `<button class="import-page-match-unmatch" onclick="event.stopPropagation(); importPageUnmatchTrack(${idx})">✕</button>` : ''}</span>
+            </div>
+        `;
+    });
+
+    matchList.innerHTML = rows.join('');
+
+    // Unmatched file pool
+    const unmatchedFiles = [];
+    importPageState.stagingFiles.forEach((f, i) => {
+        // Check if used by override
+        if (Object.values(overrides).includes(i)) return;
+        // Check if used by auto-match (not overridden away)
+        const autoUsed = data.matches.some((m, mIdx) => {
+            if (overrides.hasOwnProperty(mIdx)) return false;
+            return m.staging_file && m.staging_file.filename === f.filename;
+        });
+        if (autoUsed) return;
+        unmatchedFiles.push({ file: f, index: i });
+    });
+
+    const poolChips = document.getElementById('import-page-pool-chips');
+    document.getElementById('import-page-unmatched-count').textContent = unmatchedFiles.length;
+
+    if (unmatchedFiles.length === 0) {
+        poolChips.innerHTML = '<span class="import-page-pool-empty">All files matched</span>';
+    } else {
+        poolChips.innerHTML = unmatchedFiles.map(({ file, index }) => `
+            <span class="import-page-file-chip ${importPageState.tapSelectedChip === index ? 'selected' : ''}"
+                  draggable="true" ondragstart="importPageStartDrag(event, ${index})"
+                  onclick="event.stopPropagation(); importPageTapSelectChip(${index})">
+                ${_esc(file.filename)}
+            </span>
+        `).join('');
+    }
+
+    // Stats & button
+    document.getElementById('import-page-match-stats').textContent = `${matchedCount} of ${data.matches.length} tracks matched`;
+    const processBtn = document.getElementById('import-page-album-process-btn');
+    processBtn.disabled = matchedCount === 0;
+    processBtn.textContent = `Process ${matchedCount} Track${matchedCount !== 1 ? 's' : ''}`;
+}
+
+// --- Album Tab: Drag and Drop ---
+
+function importPageStartDrag(event, stagingFileIndex) {
+    event.dataTransfer.setData('text/plain', stagingFileIndex.toString());
+    event.dataTransfer.effectAllowed = 'move';
+}
+
+function importPageHandleDragOver(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    event.currentTarget.classList.add('drag-over');
+    // Remove drag-over from others
+    document.querySelectorAll('.import-page-match-row.drag-over').forEach(el => {
+        if (el !== event.currentTarget) el.classList.remove('drag-over');
+    });
+}
+
+function importPageHandleDrop(event, trackIndex) {
+    event.preventDefault();
+    event.currentTarget.classList.remove('drag-over');
+    const stagingFileIndex = parseInt(event.dataTransfer.getData('text/plain'));
+    if (isNaN(stagingFileIndex)) return;
+
+    // Remove this staging file from any other track it was assigned to
+    Object.keys(importPageState.matchOverrides).forEach(k => {
+        if (importPageState.matchOverrides[k] === stagingFileIndex) {
+            delete importPageState.matchOverrides[k];
+        }
+    });
+
+    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
+    importPageState.tapSelectedChip = null;
+    importPageRenderMatchList();
+}
+
+// Mobile tap-to-assign fallback
+function importPageTapSelectChip(stagingFileIndex) {
+    if (importPageState.tapSelectedChip === stagingFileIndex) {
+        importPageState.tapSelectedChip = null;
+    } else {
+        importPageState.tapSelectedChip = stagingFileIndex;
+    }
+    importPageRenderMatchList();
+}
+
+function importPageTapAssign(trackIndex) {
+    if (importPageState.tapSelectedChip === null) return;
+    const stagingFileIndex = importPageState.tapSelectedChip;
+
+    // Remove from any other track
+    Object.keys(importPageState.matchOverrides).forEach(k => {
+        if (importPageState.matchOverrides[k] === stagingFileIndex) {
+            delete importPageState.matchOverrides[k];
+        }
+    });
+
+    importPageState.matchOverrides[trackIndex] = stagingFileIndex;
+    importPageState.tapSelectedChip = null;
+    importPageRenderMatchList();
+}
+
+function importPageUnmatchTrack(trackIndex) {
+    delete importPageState.matchOverrides[trackIndex];
+    // Also remove auto-match by setting override to -1 special value? No — just delete override and let auto-match stay.
+    // Actually, to truly unmatch: we need to suppress the auto-match too.
+    // We'll use a sentinel: override = -1 means "forcibly unmatched"
+    const m = importPageState.albumData?.matches[trackIndex];
+    if (m && m.staging_file) {
+        importPageState.matchOverrides[trackIndex] = -1; // sentinel: force no match
+    }
+    importPageRenderMatchList();
+}
+
+function importPageAutoRematch() {
+    importPageState.matchOverrides = {};
+    importPageState.tapSelectedChip = null;
+    importPageRenderMatchList();
+}
+
+// --- Album Tab: Process ---
+
+function importPageProcessAlbum() {
+    const data = importPageState.albumData;
+    if (!data) return;
+
+    // Build effective matches with overrides applied
+    const overrides = importPageState.matchOverrides;
+    const effectiveMatches = [];
+    data.matches.forEach((m, idx) => {
+        if (overrides.hasOwnProperty(idx)) {
+            if (overrides[idx] === -1) return; // forcibly unmatched — skip
+            const sf = importPageState.stagingFiles[overrides[idx]];
+            effectiveMatches.push({ ...m, staging_file: sf, confidence: 1.0 });
+        } else if (m.staging_file !== null) {
+            effectiveMatches.push(m);
+        }
+    });
+
+    if (effectiveMatches.length === 0) return;
+
+    // Add to queue and reset search immediately so user can queue more
+    const album = data.album;
+    _importQueueAdd({
+        type: 'album',
+        label: album.name,
+        sublabel: `${album.artist} · ${effectiveMatches.length} tracks`,
+        imageUrl: album.image_url,
+        items: effectiveMatches,
+        albumData: album,
+    });
+
+    importPageResetAlbumSearch();
+}
+
+function importPageResetAlbumSearch() {
+    importPageState.albumData = null;
+    importPageState.matchOverrides = {};
+    importPageState.tapSelectedChip = null;
+    importPageState._autoGroupFilePaths = null;
+
+    document.getElementById('import-page-album-search-section').classList.remove('hidden');
+    document.getElementById('import-page-album-match-section').classList.add('hidden');
+
+    // Clear search
+    document.getElementById('import-page-album-results').innerHTML = '';
+    document.getElementById('import-page-album-search-input').value = '';
+    document.getElementById('import-page-album-clear-btn').classList.add('hidden');
+
+    // Re-show auto-groups
+    const groupsEl = document.getElementById('import-page-auto-groups');
+    if (groupsEl) groupsEl.style.display = '';
+
+    // Refresh suggestions & staging
+    importPageLoadAutoGroups();
+    importPageLoadSuggestions();
+    importPageRefreshStaging();
+}
+
+// --- Singles Tab ---
+
+function importPageRenderSinglesList() {
+    const list = document.getElementById('import-page-singles-list');
+    const files = importPageState.stagingFiles;
+
+    if (files.length === 0) {
+        list.innerHTML = '<div class="import-page-empty-state">No audio files found in import folder</div>';
+        return;
+    }
+
+    list.innerHTML = files.map((f, i) => {
+        const isSelected = importPageState.selectedSingles.has(i);
+        const manualMatch = importPageState.singlesManualMatches[i];
+        const searchOpen = document.querySelector(`[data-singles-search="${i}"]`);
+
+        let html = `
+            <div class="import-page-single-item ${manualMatch ? 'matched' : ''}" data-single-idx="${i}">
+                <div class="import-page-single-checkbox ${isSelected ? 'checked' : ''}"
+                     onclick="importPageToggleSingle(${i})"></div>
+                <div class="import-page-single-info">
+                    <div class="import-page-single-filename">${_esc(f.filename)}</div>
+                    <div class="import-page-single-meta">
+                        ${f.title ? `<span>${_esc(f.title)}</span>` : ''}
+                        ${f.artist ? `<span>${_esc(f.artist)}</span>` : ''}
+                        ${f.extension ? `<span>${f.extension}</span>` : ''}
+                    </div>
+                    ${manualMatch ? `
+                        <div class="import-page-single-matched-info">
+                            &#10003; ${_esc(manualMatch.name)} - ${_esc(manualMatch.artist)}
+                            <span class="import-page-single-matched-change" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">change</span>
+                        </div>
+                    ` : ''}
+                </div>
+                <div class="import-page-single-actions">
+                    <button class="import-page-identify-btn" onclick="event.stopPropagation(); importPageOpenSingleSearch(${i})">
+                        &#128269; Identify
+                    </button>
+                </div>
+            </div>
+        `;
+        return html;
+    }).join('');
+
+    importPageUpdateSinglesProcessButton();
+}
+
+function importPageToggleSingle(idx) {
+    if (importPageState.selectedSingles.has(idx)) {
+        importPageState.selectedSingles.delete(idx);
+    } else {
+        importPageState.selectedSingles.add(idx);
+    }
+    // Update checkbox UI without full re-render
+    const item = document.querySelector(`[data-single-idx="${idx}"]`);
+    if (item) {
+        const cb = item.querySelector('.import-page-single-checkbox');
+        if (cb) cb.classList.toggle('checked', importPageState.selectedSingles.has(idx));
+    }
+    importPageUpdateSinglesProcessButton();
+}
+
+function importPageSelectAllSingles() {
+    const allSelected = importPageState.selectedSingles.size === importPageState.stagingFiles.length;
+    if (allSelected) {
+        importPageState.selectedSingles.clear();
+    } else {
+        importPageState.stagingFiles.forEach((_, i) => importPageState.selectedSingles.add(i));
+    }
+    document.getElementById('import-page-select-all-text').textContent = allSelected ? 'Select All' : 'Deselect All';
+    // Update all checkboxes
+    document.querySelectorAll('.import-page-single-checkbox').forEach((cb, i) => {
+        cb.classList.toggle('checked', importPageState.selectedSingles.has(i));
+    });
+    importPageUpdateSinglesProcessButton();
+}
+
+function importPageUpdateSinglesProcessButton() {
+    const btn = document.getElementById('import-page-singles-process-btn');
+    const count = importPageState.selectedSingles.size;
+    btn.textContent = `Process Selected (${count})`;
+    btn.disabled = count === 0;
+}
+
+function importPageOpenSingleSearch(fileIdx) {
+    const item = document.querySelector(`[data-single-idx="${fileIdx}"]`);
+    if (!item) return;
+
+    // Remove any existing search panel
+    const existing = item.querySelector('.import-page-single-search-panel');
+    if (existing) {
+        existing.remove();
+        return;
+    }
+
+    // Close other open panels
+    document.querySelectorAll('.import-page-single-search-panel').forEach(p => p.remove());
+
+    const f = importPageState.stagingFiles[fileIdx];
+    const defaultQuery = [f.artist, f.title].filter(Boolean).join(' ') || f.filename.replace(/\.[^.]+$/, '');
+
+    const panel = document.createElement('div');
+    panel.className = 'import-page-single-search-panel';
+    panel.innerHTML = `
+        <div class="import-page-single-search-bar">
+            <input type="text" class="import-page-single-search-input"
+                   value="${_escAttr(defaultQuery)}" placeholder="Search artist - title..."
+                   onkeydown="if(event.key==='Enter')importPageSearchSingleTrack(${fileIdx}, this.value)">
+            <button class="import-page-single-search-go"
+                    onclick="importPageSearchSingleTrack(${fileIdx}, this.previousElementSibling.value)">Search</button>
+        </div>
+        <div class="import-page-single-search-results" id="import-single-results-${fileIdx}"></div>
+    `;
+    item.appendChild(panel);
+
+    // Auto-search
+    const input = panel.querySelector('input');
+    input.focus();
+    if (defaultQuery) {
+        importPageSearchSingleTrack(fileIdx, defaultQuery);
+    }
+}
+
+async function importPageSearchSingleTrack(fileIdx, query) {
+    if (!query || !query.trim()) return;
+
+    const resultsDiv = document.getElementById(`import-single-results-${fileIdx}`);
+    if (!resultsDiv) return;
+    resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">Searching...</div>';
+
+    try {
+        const resp = await fetch(`/api/import/search/tracks?q=${encodeURIComponent(query.trim())}&limit=6`);
+        const data = await resp.json();
+        if (!data.success || !data.tracks.length) {
+            resultsDiv.innerHTML = '<div style="color:#888;padding:8px;font-size:12px;">No results found</div>';
+            return;
+        }
+        // Store results in a temp cache so we can reference by index
+        window._importSingleSearchResults = window._importSingleSearchResults || {};
+        window._importSingleSearchResults[fileIdx] = data.tracks;
+
+        resultsDiv.innerHTML = data.tracks.map((t, tIdx) => {
+            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+            return `
+                <div class="import-page-single-result-item" onclick="importPageSelectSingleMatch(${fileIdx}, ${tIdx})">
+                    ${t.image_url ? `<img class="import-page-single-result-img" src="${t.image_url}" onerror="this.src='/static/placeholder.png'">` : ''}
+                    <div class="import-page-single-result-info">
+                        <div class="import-page-single-result-name">${_esc(t.name)} - ${_esc(t.artist)}</div>
+                        <div class="import-page-single-result-detail">${_esc(t.album)}${dur ? ' · ' + dur : ''}</div>
+                    </div>
+                    <button class="import-page-single-result-select">Select</button>
+                </div>
+            `;
+        }).join('');
+    } catch (err) {
+        resultsDiv.innerHTML = `<div style="color:#ef4444;padding:8px;font-size:12px;">Error: ${err.message}</div>`;
+    }
+}
+
+function importPageSelectSingleMatch(fileIdx, trackIdx) {
+    const trackData = window._importSingleSearchResults?.[fileIdx]?.[trackIdx];
+    if (!trackData) return;
+    importPageState.singlesManualMatches[fileIdx] = trackData;
+
+    // Auto-select this file
+    importPageState.selectedSingles.add(fileIdx);
+
+    // Close search panel and re-render this item
+    importPageRenderSinglesList();
+}
+
+// --- Singles Tab: Process ---
+
+function importPageProcessSingles() {
+    if (importPageState.selectedSingles.size === 0) return;
+
+    const filesToProcess = Array.from(importPageState.selectedSingles).map(i => {
+        const f = importPageState.stagingFiles[i];
+        const manualMatch = importPageState.singlesManualMatches[i];
+        if (manualMatch) {
+            return { ...f, spotify_override: manualMatch };
+        }
+        return f;
+    });
+
+    // Add to queue and reset immediately
+    _importQueueAdd({
+        type: 'singles',
+        label: `${filesToProcess.length} Single${filesToProcess.length !== 1 ? 's' : ''}`,
+        sublabel: filesToProcess.map(f => f.title || f.filename).slice(0, 3).join(', ') + (filesToProcess.length > 3 ? '...' : ''),
+        imageUrl: null,
+        items: filesToProcess,
+    });
+
+    importPageState.selectedSingles.clear();
+    importPageState.singlesManualMatches = {};
+    importPageUpdateSinglesProcessButton();
+    importPageRefreshStaging();
+}
+
+// --- Processing Queue ---
+
+const _importQueue = []; // { id, type, label, sublabel, imageUrl, status, processed, total, errors }
+
+function _importQueueAdd(job) {
+    const id = ++importJobIdCounter;
+    const entry = {
+        id,
+        type: job.type,
+        label: job.label,
+        sublabel: job.sublabel,
+        imageUrl: job.imageUrl,
+        status: 'running',   // running | done | error
+        processed: 0,
+        total: job.items.length,
+        errors: [],
+    };
+    _importQueue.push(entry);
+    _importQueueRender();
+
+    // Fire and forget — runs in background
+    _importQueueRunJob(entry, job);
+}
+
+async function _importQueueRunJob(entry, job) {
+    for (let i = 0; i < job.items.length; i++) {
+        const itemName = job.type === 'album'
+            ? (job.items[i].spotify_track?.name || `Track ${i + 1}`)
+            : (job.items[i].title || job.items[i].filename || `File ${i + 1}`);
+
+        // Update status with current track info
+        entry.sublabel = `Processing ${i + 1}/${job.items.length}: ${itemName}`;
+        _importQueueRender();
+
+        try {
+            let resp;
+            if (job.type === 'album') {
+                resp = await fetch('/api/import/album/process', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        album: job.albumData,
+                        matches: [job.items[i]]
+                    })
+                });
+            } else {
+                resp = await fetch('/api/import/singles/process', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ files: [job.items[i]] })
+                });
+            }
+
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = await resp.json();
+            if (data.success) entry.processed += (data.processed || 0);
+            if (data.errors && data.errors.length > 0) entry.errors.push(...data.errors);
+        } catch (err) {
+            entry.errors.push(`${itemName}: ${err.message}`);
+        }
+
+        _importQueueRender();
+    }
+
+    entry.status = entry.errors.length > 0 && entry.processed === 0 ? 'error' : 'done';
+    _importQueueRender();
+
+    // Refresh staging and suggestions since files moved
+    importPageRefreshStaging();
+    importPageLoadSuggestions();
+}
+
+function _importQueueRender() {
+    const container = document.getElementById('import-page-queue');
+    const list = document.getElementById('import-page-queue-list');
+    const clearBtn = document.getElementById('import-page-queue-clear');
+    if (!container || !list) return;
+
+    if (_importQueue.length === 0) {
+        container.classList.add('hidden');
+        return;
+    }
+
+    container.classList.remove('hidden');
+
+    // Show clear button only if there are finished jobs
+    const hasFinished = _importQueue.some(j => j.status !== 'running');
+    clearBtn.style.display = hasFinished ? '' : 'none';
+
+    list.innerHTML = _importQueue.map(j => {
+        const pct = j.total > 0 ? Math.round((j.processed / j.total) * 100) : 0;
+        const fillClass = j.status === 'error' ? 'error' : '';
+        let statusText, statusClass;
+        if (j.status === 'running') {
+            statusText = `${j.processed}/${j.total}`;
+            statusClass = '';
+        } else if (j.status === 'done') {
+            statusText = j.errors.length > 0 ? `${j.processed}/${j.total} (${j.errors.length} err)` : 'Done';
+            statusClass = j.errors.length > 0 ? 'error' : 'done';
+        } else {
+            statusText = 'Failed';
+            statusClass = 'error';
+        }
+
+        return `
+            <div class="import-page-queue-item">
+                ${j.imageUrl
+                ? `<img class="import-page-queue-art" src="${j.imageUrl}" onerror="this.src='/static/placeholder.png'">`
+                : `<div class="import-page-queue-art" style="background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,0.3);">&#9834;</div>`}
+                <div class="import-page-queue-info">
+                    <div class="import-page-queue-name">${_esc(j.label)}</div>
+                    <div class="import-page-queue-detail">${_esc(j.sublabel)}</div>
+                </div>
+                <div class="import-page-queue-progress">
+                    <div class="import-page-queue-bar">
+                        <div class="import-page-queue-fill ${fillClass}" style="width:${j.status === 'done' || j.status === 'error' ? 100 : pct}%"></div>
+                    </div>
+                    <div class="import-page-queue-status ${statusClass}">${statusText}</div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function importPageClearFinishedJobs() {
+    for (let i = _importQueue.length - 1; i >= 0; i--) {
+        if (_importQueue[i].status !== 'running') {
+            _importQueue.splice(i, 1);
+        }
+    }
+    _importQueueRender();
+}
+
+// ── Import File Tab ──────────────────────────────────────────────────
+
+let _importFileState = {
+    rawText: '',
+    fileName: '',
+    fileType: '',      // 'csv' or 'text'
+    headers: [],       // CSV column headers
+    rows: [],          // raw parsed rows (arrays for csv, strings for text)
+    columnMap: {},     // { columnIndex: 'track_name' | 'artist_name' | 'album_name' | 'duration' | 'skip' }
+    parsedTracks: []   // final [{track_name, artist_name, album_name, duration_ms}]
+};
+
+function _initImportFileTab() {
+    const dropzone = document.getElementById('import-file-dropzone');
+    const fileInput = document.getElementById('import-file-input');
+    if (!dropzone || !fileInput) return;
+
+    dropzone.addEventListener('click', () => fileInput.click());
+    dropzone.addEventListener('dragover', (e) => { e.preventDefault(); dropzone.classList.add('drag-over'); });
+    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
+    dropzone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropzone.classList.remove('drag-over');
+        const file = e.dataTransfer.files[0];
+        if (file) _importFileRead(file);
+    });
+    fileInput.addEventListener('change', () => {
+        if (fileInput.files[0]) _importFileRead(fileInput.files[0]);
+        fileInput.value = '';
+    });
+
+    // Enable/disable import button based on playlist name
+    const nameInput = document.getElementById('import-file-playlist-name');
+    if (nameInput) {
+        nameInput.addEventListener('input', () => {
+            const btn = document.getElementById('import-file-import-btn');
+            if (btn) btn.disabled = !nameInput.value.trim();
+        });
+    }
+}
+
+function _importFileRead(file) {
+    const ext = file.name.split('.').pop().toLowerCase();
+    if (!['csv', 'tsv', 'txt'].includes(ext)) {
+        showToast('Unsupported file type. Use CSV, TSV, or TXT.', 'error');
+        return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        _importFileState.rawText = e.target.result;
+        _importFileState.fileName = file.name;
+        _importFileState.fileType = (ext === 'txt') ? 'text' : 'csv';
+        _importFileParseAndPreview();
+    };
+    reader.readAsText(file);
+}
+
+function _importFileDetectDelimiter(firstLine) {
+    const tab = (firstLine.match(/\t/g) || []).length;
+    const semi = (firstLine.match(/;/g) || []).length;
+    const comma = (firstLine.match(/,/g) || []).length;
+    if (tab >= comma && tab >= semi && tab > 0) return '\t';
+    if (semi >= comma && semi > 0) return ';';
+    return ',';
+}
+
+function _importFileParseCsv(text, delimiter) {
+    const lines = text.split(/\r?\n/).filter(l => l.trim());
+    if (lines.length < 2) return { headers: [], rows: [] };
+
+    // Parse CSV with basic quote handling
+    function parseLine(line) {
+        const result = [];
+        let current = '';
+        let inQuotes = false;
+        for (let i = 0; i < line.length; i++) {
+            const ch = line[i];
+            if (ch === '"') {
+                if (inQuotes && i + 1 < line.length && line[i + 1] === '"') {
+                    current += '"';
+                    i++;
+                } else {
+                    inQuotes = !inQuotes;
+                }
+            } else if (ch === delimiter && !inQuotes) {
+                result.push(current.trim());
+                current = '';
+            } else {
+                current += ch;
+            }
+        }
+        result.push(current.trim());
+        return result;
+    }
+
+    const headers = parseLine(lines[0]);
+    const rows = [];
+    for (let i = 1; i < lines.length; i++) {
+        const row = parseLine(lines[i]);
+        if (row.some(cell => cell)) rows.push(row);
+    }
+    return { headers, rows };
+}
+
+function _importFileAutoMapColumns(headers) {
+    const map = {};
+    const lowerHeaders = headers.map(h => h.toLowerCase().trim());
+
+    const trackPatterns = ['track_name', 'track name', 'track', 'title', 'song', 'song_name', 'song name', 'name'];
+    const artistPatterns = ['artist_name', 'artist name', 'artist', 'artists', 'performer'];
+    const albumPatterns = ['album_name', 'album name', 'album'];
+    const durationPatterns = ['duration', 'duration_ms', 'length', 'time'];
+
+    function findMatch(patterns) {
+        for (const p of patterns) {
+            const idx = lowerHeaders.indexOf(p);
+            if (idx !== -1 && !(idx in map)) return idx;
+        }
+        return -1;
+    }
+
+    const trackIdx = findMatch(trackPatterns);
+    if (trackIdx !== -1) map[trackIdx] = 'track_name';
+
+    const artistIdx = findMatch(artistPatterns);
+    if (artistIdx !== -1) map[artistIdx] = 'artist_name';
+
+    const albumIdx = findMatch(albumPatterns);
+    if (albumIdx !== -1) map[albumIdx] = 'album_name';
+
+    const durIdx = findMatch(durationPatterns);
+    if (durIdx !== -1) map[durIdx] = 'duration';
+
+    return map;
+}
+
+function _importFileParseAndPreview() {
+    const state = _importFileState;
+    const text = state.rawText;
+
+    if (state.fileType === 'text') {
+        // Plain text: one track per line
+        const lines = text.split(/\r?\n/).filter(l => l.trim());
+        state.rows = lines;
+        state.headers = [];
+        state.columnMap = {};
+    } else {
+        // CSV/TSV
+        const firstLine = text.split(/\r?\n/)[0] || '';
+        const delimiter = _importFileDetectDelimiter(firstLine);
+        const { headers, rows } = _importFileParseCsv(text, delimiter);
+        state.headers = headers;
+        state.rows = rows;
+        state.columnMap = _importFileAutoMapColumns(headers);
+    }
+
+    _importFileBuildTracks();
+    _importFileRenderPreview();
+}
+
+function _importFileBuildTracks() {
+    const state = _importFileState;
+    state.parsedTracks = [];
+
+    if (state.fileType === 'text') {
+        const orderEl = document.getElementById('import-file-text-order');
+        const sepEl = document.getElementById('import-file-text-separator');
+        const order = orderEl ? orderEl.value : 'artist-title';
+        const sep = sepEl ? sepEl.value : ' - ';
+
+        for (const line of state.rows) {
+            const parts = line.split(sep);
+            if (parts.length >= 2) {
+                const a = parts[0].trim();
+                const b = parts.slice(1).join(sep).trim();
+                state.parsedTracks.push({
+                    track_name: order === 'artist-title' ? b : a,
+                    artist_name: order === 'artist-title' ? a : b,
+                    album_name: '',
+                    duration_ms: 0
+                });
+            } else {
+                // Can't split — treat whole line as track name
+                state.parsedTracks.push({
+                    track_name: line.trim(),
+                    artist_name: '',
+                    album_name: '',
+                    duration_ms: 0
+                });
+            }
+        }
+    } else {
+        // CSV mapped
+        const map = state.columnMap;
+        const trackCol = Object.keys(map).find(k => map[k] === 'track_name');
+        const artistCol = Object.keys(map).find(k => map[k] === 'artist_name');
+        const albumCol = Object.keys(map).find(k => map[k] === 'album_name');
+        const durCol = Object.keys(map).find(k => map[k] === 'duration');
+
+        for (const row of state.rows) {
+            const track = trackCol !== undefined ? (row[trackCol] || '') : '';
+            const artist = artistCol !== undefined ? (row[artistCol] || '') : '';
+            const album = albumCol !== undefined ? (row[albumCol] || '') : '';
+            let dur = durCol !== undefined ? (row[durCol] || '') : '';
+
+            // Parse duration: could be ms, seconds, or mm:ss
+            let durationMs = 0;
+            if (dur) {
+                dur = dur.trim();
+                if (dur.includes(':')) {
+                    const parts = dur.split(':');
+                    durationMs = (parseInt(parts[0]) * 60 + parseInt(parts[1] || 0)) * 1000;
+                } else {
+                    const num = parseFloat(dur);
+                    durationMs = num > 10000 ? num : num * 1000; // assume ms if > 10000, else seconds
+                }
+                if (isNaN(durationMs)) durationMs = 0;
+            }
+
+            state.parsedTracks.push({
+                track_name: track,
+                artist_name: artist,
+                album_name: album,
+                duration_ms: durationMs
+            });
+        }
+    }
+}
+
+function _importFileRenderPreview() {
+    const state = _importFileState;
+    const validTracks = state.parsedTracks.filter(t => t.track_name || t.artist_name);
+
+    // Show/hide sections
+    document.getElementById('import-file-upload-zone').style.display = 'none';
+    document.getElementById('import-file-preview-section').style.display = '';
+
+    // File info
+    document.getElementById('import-file-name-label').textContent = state.fileName;
+    document.getElementById('import-file-track-count').textContent = `${validTracks.length} track${validTracks.length !== 1 ? 's' : ''} parsed`;
+
+    // Show format controls based on file type
+    document.getElementById('import-file-text-format').style.display = state.fileType === 'text' ? '' : 'none';
+    document.getElementById('import-file-column-mapping').style.display = state.fileType === 'csv' ? '' : 'none';
+
+    // Render column mapping for CSV
+    if (state.fileType === 'csv') {
+        _importFileRenderColumnMapping();
+    }
+
+    // Pre-fill playlist name from filename (strip extension)
+    const nameInput = document.getElementById('import-file-playlist-name');
+    if (nameInput && !nameInput.value) {
+        nameInput.value = state.fileName.replace(/\.[^.]+$/, '');
+    }
+    // Update button state
+    const btn = document.getElementById('import-file-import-btn');
+    if (btn) btn.disabled = !nameInput.value.trim();
+
+    // Render preview table
+    const tbody = document.getElementById('import-file-preview-tbody');
+    tbody.innerHTML = '';
+
+    state.parsedTracks.forEach((t, i) => {
+        const valid = !!(t.track_name || t.artist_name);
+        const tr = document.createElement('tr');
+        if (!valid) tr.classList.add('invalid-row');
+        tr.innerHTML = `
+            <td>${i + 1}</td>
+            <td>${_esc(t.track_name)}</td>
+            <td>${_esc(t.artist_name)}</td>
+            <td>${_esc(t.album_name)}</td>
+        `;
+        tbody.appendChild(tr);
+    });
+}
+
+function _importFileRenderColumnMapping() {
+    const state = _importFileState;
+    const container = document.getElementById('import-file-mapping-selects');
+    container.innerHTML = '';
+
+    const options = ['skip', 'track_name', 'artist_name', 'album_name', 'duration'];
+    const optLabels = { skip: 'Skip', track_name: 'Track', artist_name: 'Artist', album_name: 'Album', duration: 'Duration' };
+
+    state.headers.forEach((header, idx) => {
+        const mapped = state.columnMap[idx] || 'skip';
+        const wrap = document.createElement('div');
+        wrap.className = 'import-file-col-map';
+        if (mapped === 'track_name') wrap.classList.add('mapped-track');
+        else if (mapped === 'artist_name') wrap.classList.add('mapped-artist');
+        else if (mapped === 'album_name') wrap.classList.add('mapped-album');
+
+        const label = document.createElement('span');
+        label.className = 'import-file-col-label';
+        label.textContent = header;
+        label.title = header;
+
+        const sel = document.createElement('select');
+        sel.className = 'import-file-select';
+        options.forEach(o => {
+            const opt = document.createElement('option');
+            opt.value = o;
+            opt.textContent = optLabels[o];
+            if (o === mapped) opt.selected = true;
+            sel.appendChild(opt);
+        });
+        sel.addEventListener('change', () => {
+            if (sel.value === 'skip') {
+                delete state.columnMap[idx];
+            } else {
+                // Remove this mapping from any other column
+                for (const k of Object.keys(state.columnMap)) {
+                    if (state.columnMap[k] === sel.value) delete state.columnMap[k];
+                }
+                state.columnMap[idx] = sel.value;
+            }
+            _importFileBuildTracks();
+            _importFileRenderPreview();
+        });
+
+        wrap.appendChild(label);
+        wrap.appendChild(sel);
+        container.appendChild(wrap);
+    });
+}
+
+function importFileReparse() {
+    _importFileBuildTracks();
+    _importFileRenderPreview();
+}
+
+function importFileClear() {
+    _importFileState = {
+        rawText: '', fileName: '', fileType: '',
+        headers: [], rows: [], columnMap: {}, parsedTracks: []
+    };
+    document.getElementById('import-file-upload-zone').style.display = '';
+    document.getElementById('import-file-preview-section').style.display = 'none';
+    document.getElementById('import-file-playlist-name').value = '';
+    document.getElementById('import-file-preview-tbody').innerHTML = '';
+}
+
+function importFileSubmit() {
+    const nameInput = document.getElementById('import-file-playlist-name');
+    const name = nameInput ? nameInput.value.trim() : '';
+    if (!name) {
+        showToast('Please enter a playlist name.', 'error');
+        nameInput && nameInput.focus();
+        return;
+    }
+
+    const tracks = _importFileState.parsedTracks.filter(t => t.track_name || t.artist_name);
+    if (!tracks.length) {
+        showToast('No valid tracks to import.', 'error');
+        return;
+    }
+
+    // Use a unique ID based on timestamp so multiple imports don't collide
+    const sourceId = `file_${Date.now()}`;
+
+    mirrorPlaylist('file', sourceId, name, tracks, {
+        description: `Imported from ${_importFileState.fileName}`,
+        owner: 'local'
+    });
+
+    showToast(`Imported "${name}" with ${tracks.length} tracks`, 'success');
+    importFileClear();
+
+    // Switch to mirrored tab so user sees the result
+    const mirroredBtn = document.querySelector('.sync-tab-button[data-tab="mirrored"]');
+    if (mirroredBtn) {
+        mirroredBtn.click();
+        // Reload mirrored playlists to show the new one
+        setTimeout(() => loadMirroredPlaylists(), 500);
+    }
+}
+
+// ── Mirrored Playlists ────────────────────────────────────────────────
+
+let mirroredPlaylistsLoaded = false;
+
+/**
+ * Fire-and-forget helper: send parsed playlist data to be mirrored on the backend.
+ */
+function mirrorPlaylist(source, sourceId, name, tracks, metadata = {}) {
+    const normalizedTracks = tracks.map(t => ({
+        track_name: t.track_name || t.name || '',
+        artist_name: t.artist_name || (Array.isArray(t.artists) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : t.artists || ''),
+        album_name: t.album_name || (typeof t.album === 'object' ? (t.album && t.album.name) : t.album) || '',
+        duration_ms: t.duration_ms || 0,
+        image_url: t.image_url || (t.album && typeof t.album === 'object' && t.album.images && t.album.images[0] ? t.album.images[0].url : null),
+        source_track_id: t.source_track_id || t.id || t.spotify_track_id || '',
+        extra_data: t.extra_data || null
+    }));
+
+    fetch('/api/mirror-playlist', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+            source,
+            source_playlist_id: String(sourceId),
+            name,
+            tracks: normalizedTracks,
+            description: metadata.description || '',
+            owner: metadata.owner || '',
+            image_url: metadata.image_url || ''
+        })
+    }).then(r => r.json()).then(data => {
+        if (data.success) console.log(`Mirrored ${source} playlist: ${name} (${normalizedTracks.length} tracks)`);
+    }).catch(err => console.warn('Mirror save failed:', err));
+}
+
+/**
+ * Load and render all mirrored playlists into the Mirrored tab.
+ */
+async function loadMirroredPlaylists() {
+    const container = document.getElementById('mirrored-playlist-container');
+    if (!container) return;
+    container.innerHTML = `<div class="playlist-placeholder">Loading mirrored playlists...</div>`;
+
+    try {
+        const res = await fetch('/api/mirrored-playlists');
+        const playlists = await res.json();
+        if (playlists.error) throw new Error(playlists.error);
+
+        if (!playlists.length) {
+            container.innerHTML = `<div class="playlist-placeholder">Playlists you parse from any service will appear here as persistent backups.</div>`;
+            return;
+        }
+
+        container.innerHTML = '';
+        playlists.forEach(p => renderMirroredCard(p, container));
+        mirroredPlaylistsLoaded = true;
+
+        // Hydrate discovery states from backend (survives page refresh)
+        await hydrateMirroredDiscoveryStates();
+    } catch (err) {
+        container.innerHTML = `<div class="playlist-placeholder">Error loading mirrored playlists: ${err.message}</div>`;
+    }
+}
+
+function renderMirroredCard(p, container) {
+    const ago = timeAgo(p.updated_at || p.mirrored_at);
+    const hash = `mirrored_${p.id}`;
+    const state = youtubePlaylistStates[hash];
+    const phase = state ? state.phase : null;
+
+    // Build phase indicator
+    let phaseHtml = '';
+    if (phase === 'discovering') {
+        const pct = state.discoveryProgress || state.discovery_progress || 0;
+        phaseHtml = `<span style="color:#a78bfa;">Discovering ${pct}%</span>`;
+    } else if (phase === 'discovered') {
+        const matches = state.spotifyMatches || state.spotify_matches || 0;
+        const total = state.spotify_total || p.track_count;
+        phaseHtml = `<span style="color:#22c55e;">Discovered ${matches}/${total}</span>`;
+    } else if (phase === 'syncing' || phase === 'sync_complete') {
+        phaseHtml = `<span style="color:#3b82f6;">${phase === 'syncing' ? 'Syncing...' : 'Synced'}</span>`;
+    } else if (phase === 'downloading') {
+        phaseHtml = `<span style="color:#f59e0b;">Downloading...</span>`;
+    } else if (phase === 'download_complete') {
+        phaseHtml = `<span style="color:#22c55e;">Downloaded</span>`;
+    }
+
+    const sourceIcons = { spotify: '🎵', tidal: '🌊', youtube: '▶', beatport: '🎛', file: '📄' };
+    const srcIcon = sourceIcons[p.source] || '📋';
+
+    // Discovery ratio
+    const disc = p.discovered_count || 0;
+    const tot = p.total_count || p.track_count || 0;
+    let ratioHtml = '';
+    if (disc > 0) {
+        const complete = disc >= tot;
+        const srcName = typeof currentMusicSourceName !== 'undefined' ? currentMusicSourceName : 'metadata';
+        ratioHtml = `<span class="discovery-ratio${complete ? ' complete' : ''}">${disc}/${tot} discovered on ${srcName}</span>`;
+    }
+
+    const card = document.createElement('div');
+    card.className = 'mirrored-playlist-card';
+    card.id = `mirrored-card-${p.id}`;
+    card.innerHTML = `
+        <div class="source-icon ${_escAttr(p.source)}">${srcIcon}</div>
+        <div class="mirrored-card-info">
+            <div class="card-name">${_esc(p.name)}</div>
+            <div class="card-meta">
+                <span class="source-badge ${_escAttr(p.source)}">${_esc(p.source)}</span>
+                <span>${p.track_count} tracks</span>
+                <span>Mirrored ${ago}</span>
+                ${ratioHtml}
+                ${phaseHtml}
+            </div>
+        </div>
+        ${disc > 0 ? `<button class="mirrored-card-clear" onclick="event.stopPropagation(); clearMirroredDiscovery(${p.id}, '${_escAttr(p.name)}')" title="Clear discovery data">↺</button>` : ''}
+        <button class="mirrored-card-delete" onclick="event.stopPropagation(); deleteMirroredPlaylist(${p.id}, '${_escAttr(p.name)}')" title="Delete mirror">✕</button>
+    `;
+    card.addEventListener('click', () => {
+        const st = youtubePlaylistStates[hash];
+        // Treat as non-fresh if phase is set, or if a poller/discovery modal exists
+        const hasActiveDiscovery = activeYouTubePollers[hash] || document.getElementById(`youtube-discovery-modal-${hash}`);
+        if (st && ((st.phase && st.phase !== 'fresh') || hasActiveDiscovery)) {
+            if (st.phase === 'downloading' || st.phase === 'download_complete') {
+                // Open download modal directly (follows Tidal/YouTube card click pattern)
+                const spotifyPlaylistId = st.convertedSpotifyPlaylistId;
+                if (spotifyPlaylistId && activeDownloadProcesses[spotifyPlaylistId]) {
+                    // Modal already exists — just show it
+                    const process = activeDownloadProcesses[spotifyPlaylistId];
+                    if (process.modalElement) {
+                        if (process.status === 'complete') {
+                            showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+                        }
+                        process.modalElement.style.display = 'flex';
+                    }
+                } else if (spotifyPlaylistId) {
+                    // Need to rehydrate the download modal
+                    rehydrateMirroredDownloadModal(hash, st);
+                } else {
+                    // No converted playlist ID yet, fall back to discovery modal
+                    openYouTubeDiscoveryModal(hash);
+                }
+            } else {
+                openYouTubeDiscoveryModal(hash);
+                if (st.phase === 'discovering' && !activeYouTubePollers[hash]) {
+                    startYouTubeDiscoveryPolling(hash);
+                }
+            }
+        } else {
+            openMirroredPlaylistModal(p.id);
+        }
+    });
+    container.appendChild(card);
+}
+
+function updateMirroredCardPhase(urlHash, phase) {
+    // Update the state phase (updateYouTubeCardPhase skips this for mirrored playlists due to no cardElement)
+    const state = youtubePlaylistStates[urlHash];
+    if (state) state.phase = phase;
+
+    // Extract the numeric ID from urlHash (e.g., 'mirrored_3' → '3')
+    const mirroredId = urlHash.replace('mirrored_', '');
+    const card = document.getElementById(`mirrored-card-${mirroredId}`);
+    if (!card) return;
+
+    const metaEl = card.querySelector('.card-meta');
+    if (!metaEl) return;
+
+    // Remove old phase indicator
+    const oldPhase = metaEl.querySelector('span[style]');
+    if (oldPhase) oldPhase.remove();
+
+    // Add new phase indicator
+    let phaseHtml = '';
+    switch (phase) {
+        case 'discovering':
+            phaseHtml = `<span style="color:#a78bfa;">Discovering...</span>`;
+            break;
+        case 'discovered':
+            const matches = state?.spotifyMatches || state?.spotify_matches || 0;
+            const total = state?.spotify_total || 0;
+            phaseHtml = `<span style="color:#22c55e;">Discovered ${matches}/${total}</span>`;
+            break;
+        case 'syncing':
+            phaseHtml = `<span style="color:#3b82f6;">Syncing...</span>`;
+            break;
+        case 'sync_complete':
+            phaseHtml = `<span style="color:#3b82f6;">Synced</span>`;
+            break;
+        case 'downloading':
+            phaseHtml = `<span style="color:#f59e0b;">Downloading...</span>`;
+            break;
+        case 'download_complete':
+            phaseHtml = `<span style="color:#22c55e;">Downloaded</span>`;
+            break;
+    }
+    if (phaseHtml) {
+        metaEl.insertAdjacentHTML('beforeend', phaseHtml);
+    }
+}
+
+async function rehydrateMirroredDownloadModal(urlHash, state) {
+    try {
+        if (!state || !state.playlist) {
+            showToast('Cannot open download modal - invalid playlist data', 'error');
+            return;
+        }
+
+        console.log(`💧 [Rehydration] Rehydrating mirrored download modal for: ${state.playlist.name}`);
+
+        // Get discovery results from backend if not already loaded
+        let discoveryRes = state.discoveryResults || state.discovery_results;
+        if (!discoveryRes || discoveryRes.length === 0) {
+            console.log(`🔍 Fetching discovery results from backend for mirrored playlist: ${urlHash}`);
+            const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
+            if (stateResponse.ok) {
+                const fullState = await stateResponse.json();
+                state.discovery_results = fullState.discovery_results;
+                state.discoveryResults = fullState.discovery_results;
+                state.convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
+                state.download_process_id = fullState.download_process_id;
+                discoveryRes = fullState.discovery_results;
+                console.log(`✅ Loaded ${discoveryRes?.length || 0} discovery results from backend`);
+            } else {
+                showToast('Error loading playlist data', 'error');
+                return;
+            }
+        }
+
+        // Extract Spotify tracks from discovery results
+        const spotifyTracks = (discoveryRes || [])
+            .filter(r => r.spotify_data || (r.spotify_track && r.status_class === 'found'))
+            .map(r => {
+                if (r.spotify_data) return r.spotify_data;
+                const albumData = r.spotify_album || 'Unknown Album';
+                return {
+                    id: r.spotify_id || 'unknown',
+                    name: r.spotify_track || 'Unknown Track',
+                    artists: r.spotify_artist ? [r.spotify_artist] : ['Unknown Artist'],
+                    album: typeof albumData === 'object' ? albumData : { name: albumData, album_type: 'album', images: [] },
+                    duration_ms: 0
+                };
+            });
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        const virtualPlaylistId = state.convertedSpotifyPlaylistId;
+        const playlistName = state.playlist.name;
+
+        // Create the download modal
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // If we have a download process ID, set up the modal for the running/complete state
+        if (state.download_process_id) {
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                process.status = state.phase === 'download_complete' ? 'complete' : 'running';
+                process.batchId = state.download_process_id;
+
+                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+
+                if (state.phase === 'downloading') {
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Start polling for live updates
+                    startModalDownloadPolling(virtualPlaylistId);
+                    console.log(`🔄 Started polling for active mirrored download: ${state.download_process_id}`);
+                } else if (state.phase === 'download_complete') {
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'none';
+                    console.log(`✅ Showing completed mirrored download results: ${state.download_process_id}`);
+
+                    // Fetch final results to populate the modal
+                    try {
+                        const response = await fetch(`/api/playlists/${state.download_process_id}/download_status`);
+                        if (response.ok) {
+                            const data = await response.json();
+                            if (data.phase === 'complete' && data.tasks) {
+                                updateCompletedModalResults(virtualPlaylistId, data);
+                            }
+                        }
+                    } catch (err) {
+                        console.warn('Could not load completed download results:', err);
+                    }
+                }
+            }
+        }
+
+        console.log(`✅ Successfully rehydrated mirrored download modal for: ${state.playlist.name}`);
+    } catch (error) {
+        console.error('❌ Error rehydrating mirrored download modal:', error);
+        showToast('Error opening download modal', 'error');
+    }
+}
+
+async function hydrateMirroredDiscoveryStates() {
+    try {
+        const res = await fetch('/api/mirrored-playlists/discovery-states');
+        const data = await res.json();
+        if (data.error || !data.states || data.states.length === 0) return;
+
+        console.log(`Hydrating ${data.states.length} mirrored discovery states`);
+
+        for (const s of data.states) {
+            const hash = s.url_hash;
+
+            youtubePlaylistStates[hash] = {
+                playlist: s.playlist,
+                phase: s.phase,
+                discovery_results: s.discovery_results || [],
+                discoveryResults: s.discovery_results || [],
+                discovery_progress: s.discovery_progress || 0,
+                discoveryProgress: s.discovery_progress || 0,
+                spotify_matches: s.spotify_matches || 0,
+                spotifyMatches: s.spotify_matches || 0,
+                spotify_total: s.spotify_total || 0,
+                status: s.status || '',
+                url: s.playlist?.url || '',
+                sync_playlist_id: null,
+                converted_spotify_playlist_id: s.converted_spotify_playlist_id,
+                convertedSpotifyPlaylistId: s.converted_spotify_playlist_id,
+                download_process_id: s.download_process_id,
+                created_at: Date.now() / 1000,
+                last_accessed: Date.now() / 1000,
+                discovery_future: null,
+                sync_progress: {},
+                is_mirrored_playlist: true,
+                mirrored_source: s.playlist?.source || ''
+            };
+
+            // Update the card to reflect the current phase
+            const card = document.getElementById(`mirrored-card-${s.playlist_id}`);
+            if (card) {
+                const metaEl = card.querySelector('.card-meta');
+                if (metaEl) {
+                    // Remove old phase span and add new one
+                    const oldPhase = metaEl.querySelector('span[style]');
+                    if (oldPhase) oldPhase.remove();
+
+                    if (s.phase === 'discovering') {
+                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#a78bfa;">Discovering ${s.discovery_progress || 0}%</span>`);
+                    } else if (s.phase === 'discovered') {
+                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#22c55e;">Discovered ${s.spotify_matches || 0}/${s.spotify_total || 0}</span>`);
+                    } else if (s.phase === 'syncing' || s.phase === 'sync_complete') {
+                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#3b82f6;">${s.phase === 'syncing' ? 'Syncing...' : 'Synced'}</span>`);
+                    } else if (s.phase === 'downloading') {
+                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#f59e0b;">Downloading...</span>`);
+                    } else if (s.phase === 'download_complete') {
+                        metaEl.insertAdjacentHTML('beforeend', `<span style="color:#22c55e;">Downloaded</span>`);
+                    }
+                }
+            }
+
+            // Resume polling if discovery is in progress
+            if (s.phase === 'discovering' && !activeYouTubePollers[hash]) {
+                startYouTubeDiscoveryPolling(hash);
+            }
+        }
+    } catch (err) {
+        console.warn('Failed to hydrate mirrored discovery states:', err);
+    }
+}
+
+function timeAgo(dateStr) {
+    if (!dateStr) return '';
+    // Handle ISO formats: "Z" suffix, "+00:00" offset, or bare (assume UTC)
+    let ts = dateStr;
+    if (!ts.includes('Z') && !ts.includes('+') && !ts.includes('-', 10)) ts += 'Z';
+    const diff = Date.now() - new Date(ts).getTime();
+    const secs = Math.floor(diff / 1000);
+    if (secs < 5) return 'just now';
+    if (secs < 60) return `${secs}s ago`;
+    const mins = Math.floor(secs / 60);
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    if (days < 30) return `${days}d ago`;
+    return `${Math.floor(days / 30)}mo ago`;
+}
+
+/**
+ * Open modal showing all tracks in a mirrored playlist.
+ */
+async function openMirroredPlaylistModal(playlistId) {
+    showLoadingOverlay('Loading mirrored playlist...');
+    try {
+        const res = await fetch(`/api/mirrored-playlists/${playlistId}`);
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+
+        hideLoadingOverlay();
+
+        // Remove any existing modal
+        const old = document.getElementById('mirrored-track-modal');
+        if (old) old.remove();
+
+        const overlay = document.createElement('div');
+        overlay.id = 'mirrored-track-modal';
+        overlay.className = 'mirrored-modal-overlay';
+
+        const tracks = data.tracks || [];
+        const source = data.source || 'unknown';
+        const sourceIcons = { spotify: '🎵', tidal: '🌊', youtube: '▶', beatport: '🎛' };
+        const sourceIcon = sourceIcons[source] || '📋';
+
+        const trackRows = tracks.map(t => {
+            const dur = t.duration_ms ? `${Math.floor(t.duration_ms / 60000)}:${String(Math.floor((t.duration_ms % 60000) / 1000)).padStart(2, '0')}` : '';
+            return `<div class="mirrored-track-row">
+                <span class="track-pos">${t.position}</span>
+                <span class="track-title">${_esc(t.track_name)}</span>
+                <span class="track-artist">${_esc(t.artist_name)}</span>
+                <span class="track-album">${_esc(t.album_name)}</span>
+                <span class="track-duration">${dur}</span>
+            </div>`;
+        }).join('');
+
+        overlay.innerHTML = `
+            <div class="mirrored-modal">
+                <div class="mirrored-modal-header">
+                    <div class="mirrored-modal-hero">
+                        <div class="mirrored-modal-hero-icon ${_escAttr(source)}">${sourceIcon}</div>
+                        <div class="mirrored-modal-hero-info">
+                            <h2 class="mirrored-modal-hero-title">${_esc(data.name)}</h2>
+                            <div class="mirrored-modal-hero-subtitle">
+                                <span class="mirrored-modal-hero-badge">${_esc(source)}</span>
+                                <span>${tracks.length} tracks</span>
+                                <span>&middot;</span>
+                                <span>Mirrored ${timeAgo(data.updated_at || data.mirrored_at)}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <span class="mirrored-modal-close" onclick="closeMirroredModal()">&times;</span>
+                </div>
+                <div class="mirrored-modal-tracks">
+                    <div class="mirrored-track-header">
+                        <span>#</span><span>Track</span><span>Artist</span><span>Album</span><span style="text-align:right">Time</span>
+                    </div>
+                    ${trackRows}
+                </div>
+                <div class="mirrored-modal-footer">
+                    <div class="mirrored-modal-footer-left">
+                        <button class="mirrored-btn-delete" onclick="closeMirroredModal(); deleteMirroredPlaylist(${playlistId}, '${_escAttr(data.name)}')">Delete Mirror</button>
+                    </div>
+                    <div class="mirrored-modal-footer-right" style="display:flex;gap:10px;">
+                        <button class="mirrored-btn-close" onclick="closeMirroredModal()">Close</button>
+                        <button class="mirrored-btn-discover" onclick="discoverMirroredPlaylist(${playlistId})">Discover</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        overlay.addEventListener('click', e => { if (e.target === overlay) closeMirroredModal(); });
+        document.body.appendChild(overlay);
+    } catch (err) {
+        hideLoadingOverlay();
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+function closeMirroredModal() {
+    const m = document.getElementById('mirrored-track-modal');
+    if (m) m.remove();
+}
+
+/**
+ * Delete a mirrored playlist after confirmation.
+ */
+async function clearMirroredDiscovery(playlistId, name) {
+    if (!await showConfirmDialog({ title: 'Clear Discovery Data', message: `Clear discovery data for "${name}"? You can re-discover afterwards to get updated cover art.` })) return;
+    try {
+        const res = await fetch(`/api/mirrored-playlists/${playlistId}/clear-discovery`, { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Cleared discovery for ${name} (${data.cleared} tracks)`, 'success');
+            // Signal cancellation to any running worker, then clear state
+            const hash = `mirrored_${playlistId}`;
+            if (youtubePlaylistStates[hash]) {
+                youtubePlaylistStates[hash].phase = 'cancelled';
+            }
+            delete youtubePlaylistStates[hash];
+            const staleModal = document.getElementById(`youtube-discovery-modal-${hash}`);
+            if (staleModal) staleModal.remove();
+            loadMirroredPlaylists();
+        } else {
+            showToast(data.error || 'Failed to clear discovery', 'error');
+        }
+    } catch (err) {
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+// ==================== Discovery Pool Modal ====================
+
+let _discoveryPoolOverlay = null;
+let _discoveryPoolData = null;
+let _discoveryPoolView = 'categories'; // 'categories' | 'failed' | 'matched'
+let _discoveryPoolPlaylistFilter = null;
+
+async function loadDiscoveryPoolStats() {
+    try {
+        const res = await fetch('/api/discovery-pool');
+        const data = await res.json();
+        const matchedEl = document.getElementById('discovery-pool-matched-count');
+        const failedEl = document.getElementById('discovery-pool-failed-count');
+        if (matchedEl) matchedEl.textContent = data.stats.matched || 0;
+        if (failedEl) failedEl.textContent = data.stats.failed || 0;
+    } catch (e) { }
+}
+
+async function openDiscoveryPoolModal(playlistId = null) {
+    _discoveryPoolPlaylistFilter = playlistId;
+    _discoveryPoolView = 'categories';
+
+    // Fetch pool data
+    let url = '/api/discovery-pool';
+    if (playlistId) url += `?playlist_id=${playlistId}`;
+    try {
+        const res = await fetch(url);
+        _discoveryPoolData = await res.json();
+    } catch (err) {
+        showToast('Failed to load discovery pool', 'error');
+        return;
+    }
+
+    // Remove existing overlay if present
+    if (_discoveryPoolOverlay) _discoveryPoolOverlay.remove();
+
+    const overlay = document.createElement('div');
+    overlay.className = 'modal-overlay';
+    overlay.id = 'discovery-pool-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) closeDiscoveryPoolModal(); };
+
+    const playlistOptions = (_discoveryPoolData.playlists || [])
+        .map(p => `<option value="${p.id}" ${playlistId == p.id ? 'selected' : ''}>${_esc(p.name)}</option>`)
+        .join('');
+
+    const failedCount = _discoveryPoolData.stats.failed || 0;
+    const matchedCount = _discoveryPoolData.stats.matched || 0;
+
+    overlay.innerHTML = `
+        <div class="modal-container playlist-modal">
+            <div class="playlist-modal-header">
+                <div class="playlist-header-content">
+                    <h2>Discovery Pool</h2>
+                    <div class="playlist-quick-info">
+                        <span class="playlist-track-count" id="pool-header-matched">${matchedCount} Matched</span>
+                        <span class="playlist-owner ${failedCount > 0 ? 'pool-header-failed-highlight' : ''}" id="pool-header-failed">${failedCount} Failed</span>
+                        <select class="pool-playlist-filter" onchange="filterDiscoveryPool(this.value)">
+                            <option value="">All Playlists</option>
+                            ${playlistOptions}
+                        </select>
+                    </div>
+                </div>
+                <span class="playlist-modal-close" onclick="closeDiscoveryPoolModal()">&times;</span>
+            </div>
+
+            <div class="playlist-modal-body">
+                <div class="pool-category-grid" id="pool-category-grid">
+                    <div class="pool-category-card failed" onclick="showPoolList('failed')">
+                        <div class="pool-category-fallback failed"></div>
+                        <div class="pool-category-overlay"></div>
+                        <div class="pool-category-content">
+                            <div class="pool-category-icon">&#9888;</div>
+                            <div class="pool-category-count failed" id="pool-cat-failed-count">${failedCount}</div>
+                            <div class="pool-category-label">tracks need attention</div>
+                        </div>
+                        <div class="pool-category-top-bar failed"></div>
+                    </div>
+                    <div class="pool-category-card matched" onclick="showPoolList('matched')">
+                        <div class="pool-category-fallback matched" id="pool-matched-bg"></div>
+                        <div class="pool-category-overlay"></div>
+                        <div class="pool-category-content">
+                            <div class="pool-category-icon">&#10003;</div>
+                            <div class="pool-category-count matched" id="pool-cat-matched-count">${matchedCount}</div>
+                            <div class="pool-category-label">cached matches</div>
+                        </div>
+                        <div class="pool-category-top-bar matched"></div>
+                    </div>
+                </div>
+
+                <div class="pool-list-view" id="pool-list-view" style="display: none;">
+                    <div class="pool-list-header">
+                        <button class="pool-back-btn" onclick="showPoolCategories()">&larr; Back</button>
+                        <span class="pool-list-title" id="pool-list-title"></span>
+                        <input type="text" class="pool-list-search" id="pool-list-search" placeholder="Filter tracks..." oninput="renderPoolList()">
+                    </div>
+                    <div class="pool-list-content" id="pool-list-content"></div>
+                </div>
+            </div>
+
+            <div class="playlist-modal-footer">
+                <div class="playlist-modal-footer-left"></div>
+                <div class="playlist-modal-footer-right">
+                    <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeDiscoveryPoolModal()">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    overlay.style.display = 'flex';
+    _discoveryPoolOverlay = overlay;
+
+    // Build matched mosaic if images available
+    _buildPoolMatchedMosaic();
+}
+
+function _buildPoolMatchedMosaic() {
+    const entries = _discoveryPoolData.matched || [];
+    const images = [];
+    for (const e of entries) {
+        const md = e.matched_data || {};
+        if (md.image_url && images.indexOf(md.image_url) === -1) {
+            images.push(md.image_url);
+            if (images.length >= 20) break;
+        }
+    }
+    const bgEl = document.getElementById('pool-matched-bg');
+    if (!bgEl || images.length < 4) return; // keep fallback gradient
+
+    // Build mosaic rows similar to wishlist
+    bgEl.innerHTML = '';
+    bgEl.className = 'wishlist-mosaic-background';
+    const rows = 4;
+    const imgPerRow = Math.ceil(images.length / rows) * 2; // duplicate for seamless loop
+    for (let r = 0; r < rows; r++) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'wishlist-mosaic-row-wrapper';
+        const row = document.createElement('div');
+        row.className = 'wishlist-mosaic-row' + (r % 2 === 1 ? ' scroll-right' : '');
+        row.style.setProperty('--speed', (25 + r * 5) + 's');
+        row.style.animationDelay = (r * 0.15) + 's';
+        for (let i = 0; i < imgPerRow; i++) {
+            const img = images[(i + r * 3) % images.length];
+            const tile = document.createElement('div');
+            tile.className = 'wishlist-mosaic-tile';
+            tile.innerHTML = `<div class="wishlist-mosaic-image" style="background-image: url('${img}')"></div>`;
+            row.appendChild(tile);
+        }
+        wrapper.appendChild(row);
+        bgEl.appendChild(wrapper);
+    }
+}
+
+function closeDiscoveryPoolModal() {
+    if (_discoveryPoolOverlay) {
+        _discoveryPoolOverlay.remove();
+        _discoveryPoolOverlay = null;
+    }
+    _discoveryPoolData = null;
+    // Refresh dashboard stats
+    loadDiscoveryPoolStats();
+}
+
+function showPoolCategories() {
+    _discoveryPoolView = 'categories';
+    const grid = document.getElementById('pool-category-grid');
+    const list = document.getElementById('pool-list-view');
+    if (grid) grid.style.display = '';
+    if (list) list.style.display = 'none';
+}
+
+function showPoolList(category) {
+    _discoveryPoolView = category;
+    const grid = document.getElementById('pool-category-grid');
+    const list = document.getElementById('pool-list-view');
+    if (grid) grid.style.display = 'none';
+    if (list) list.style.display = '';
+
+    const titleEl = document.getElementById('pool-list-title');
+    if (titleEl) titleEl.textContent = category === 'failed' ? 'Failed Tracks' : 'Matched Tracks';
+
+    // Clear search filter when switching views
+    const searchEl = document.getElementById('pool-list-search');
+    if (searchEl) searchEl.value = '';
+
+    renderPoolList();
+}
+
+async function filterDiscoveryPool(playlistId) {
+    _discoveryPoolPlaylistFilter = playlistId || null;
+    let url = '/api/discovery-pool';
+    if (playlistId) url += `?playlist_id=${playlistId}`;
+    try {
+        const res = await fetch(url);
+        _discoveryPoolData = await res.json();
+        // Update header counts
+        _updatePoolHeaderCounts();
+        // Update category card counts
+        const failedCountEl = document.getElementById('pool-cat-failed-count');
+        const matchedCountEl = document.getElementById('pool-cat-matched-count');
+        if (failedCountEl) failedCountEl.textContent = _discoveryPoolData.stats.failed || 0;
+        if (matchedCountEl) matchedCountEl.textContent = _discoveryPoolData.stats.matched || 0;
+        // If viewing a list, refresh it
+        if (_discoveryPoolView === 'failed' || _discoveryPoolView === 'matched') {
+            renderPoolList();
+        }
+    } catch (err) {
+        showToast('Failed to filter discovery pool', 'error');
+    }
+}
+
+function _updatePoolHeaderCounts() {
+    if (!_discoveryPoolData) return;
+    const failedCount = _discoveryPoolData.stats.failed || 0;
+    const matchedCount = _discoveryPoolData.stats.matched || 0;
+    const matchedEl = document.getElementById('pool-header-matched');
+    const failedEl = document.getElementById('pool-header-failed');
+    if (matchedEl) matchedEl.textContent = `${matchedCount} Matched`;
+    if (failedEl) {
+        failedEl.textContent = `${failedCount} Failed`;
+        failedEl.classList.toggle('pool-header-failed-highlight', failedCount > 0);
+    }
+}
+
+function renderPoolList() {
+    const container = document.getElementById('pool-list-content');
+    if (!container || !_discoveryPoolData) return;
+
+    // Client-side search filter
+    const searchEl = document.getElementById('pool-list-search');
+    const query = (searchEl ? searchEl.value : '').toLowerCase().trim();
+
+    if (_discoveryPoolView === 'failed') {
+        let tracks = _discoveryPoolData.failed || [];
+        if (query) {
+            tracks = tracks.filter(t =>
+                (t.track_name || '').toLowerCase().includes(query) ||
+                (t.artist_name || '').toLowerCase().includes(query) ||
+                (t.playlist_name || '').toLowerCase().includes(query)
+            );
+        }
+        if (tracks.length === 0) {
+            container.innerHTML = query
+                ? '<div class="pool-empty">No failed tracks match your filter.</div>'
+                : '<div class="pool-empty">No failed discoveries. All tracks matched successfully.</div>';
+            return;
+        }
+        container.innerHTML = tracks.map(t => `
+            <div class="pool-track-row pool-failed">
+                <div class="pool-track-info">
+                    <div class="pool-track-name">${_esc(t.track_name)}</div>
+                    <div class="pool-track-meta">
+                        <span class="pool-track-artist">${_esc(t.artist_name)}</span>
+                        <span class="pool-track-playlist-badge">${_esc(t.playlist_name)}</span>
+                    </div>
+                </div>
+                <button class="playlist-modal-btn playlist-modal-btn-primary pool-fix-btn" onclick="openPoolFixModal(${t.id}, '${_escAttr(t.track_name)}', '${_escAttr(t.artist_name)}')">Fix Match</button>
+            </div>
+        `).join('');
+    } else {
+        let entries = _discoveryPoolData.matched || [];
+        if (query) {
+            entries = entries.filter(e => {
+                const md = e.matched_data || {};
+                const matchedName = md.name || '';
+                return (e.original_title || '').toLowerCase().includes(query) ||
+                    (e.original_artist || '').toLowerCase().includes(query) ||
+                    matchedName.toLowerCase().includes(query);
+            });
+        }
+        if (entries.length === 0) {
+            container.innerHTML = query
+                ? '<div class="pool-empty">No matched tracks match your filter.</div>'
+                : '<div class="pool-empty">No cached discovery matches yet.</div>';
+            return;
+        }
+        container.innerHTML = entries.map(e => {
+            const md = e.matched_data || {};
+            const matchedArtists = (md.artists || []).map(a => typeof a === 'string' ? a : (a.name || '')).join(', ');
+            const conf = Math.round((e.confidence || 0) * 100);
+            const confClass = conf >= 80 ? 'high' : (conf >= 70 ? 'mid' : 'low');
+            const album = md.album || {};
+            const albumImages = (typeof album === 'object' && album.images) ? album.images : [];
+            const imgUrl = md.image_url || (albumImages.length > 0 ? albumImages[0].url || '' : '');
+            return `
+                <div class="pool-track-row pool-matched">
+                    ${imgUrl ? `<img class="pool-match-image" src="${_esc(imgUrl)}" alt="" onerror="this.style.display='none'" />` : '<div class="pool-match-image-placeholder"></div>'}
+                    <div class="pool-track-info">
+                        <div class="pool-track-name">${_esc(e.original_title)}</div>
+                        <div class="pool-track-meta">
+                            <span class="pool-track-artist">${_esc(e.original_artist)}</span>
+                            <span class="pool-track-arrow">&rarr;</span>
+                            <span class="pool-match-name">${_esc(md.name || '?')}</span>
+                            <span class="pool-match-provider">${_esc(e.provider)}</span>
+                        </div>
+                    </div>
+                    <span class="pool-confidence-badge ${confClass}">${conf}%</span>
+                    <span class="pool-use-count">${e.use_count}&times;</span>
+                    <button class="pool-rematch-btn" onclick="rematchPoolCacheEntry(${e.id}, '${_escAttr(e.original_title)}', '${_escAttr(e.original_artist)}')" title="Rematch this track">Rematch</button>
+                    <button class="pool-remove-btn" onclick="removePoolCacheEntry(${e.id})" title="Remove cached match">&times;</button>
+                </div>
+            `;
+        }).join('');
+    }
+}
+
+function rematchPoolCacheEntry(cacheId, originalTitle, originalArtist) {
+    // Open the fix modal in "rematch" mode — saves to cache instead of mirrored tracks
+    openPoolRematchModal(cacheId, originalTitle, originalArtist);
+}
+
+function openPoolRematchModal(cacheId, trackName, artistName) {
+    // Reuses the fix modal UI but saves via the rematch endpoint
+    let fixOverlay = document.getElementById('pool-fix-overlay');
+    if (fixOverlay) fixOverlay.remove();
+
+    fixOverlay = document.createElement('div');
+    fixOverlay.className = 'pool-fix-overlay';
+    fixOverlay.id = 'pool-fix-overlay';
+    fixOverlay.addEventListener('mousedown', (e) => {
+        if (e.target === fixOverlay) {
+            e.preventDefault();
+            closePoolFixModal();
+        }
+    });
+
+    fixOverlay.innerHTML = `
+        <div class="pool-fix-modal" onmousedown="event.stopPropagation()">
+            <div class="pool-fix-header">
+                <h2>Rematch Track</h2>
+                <button class="pool-fix-close" onclick="closePoolFixModal()" title="Close">✕</button>
+            </div>
+            <div class="pool-fix-body">
+                <div class="pool-fix-source">
+                    <div class="pool-fix-source-label">Current Match</div>
+                    <div class="pool-fix-source-row">
+                        <span class="pool-fix-source-title">${_esc(trackName)}</span>
+                        <span class="pool-fix-source-sep">—</span>
+                        <span class="pool-fix-source-artist">${_esc(artistName)}</span>
+                    </div>
+                </div>
+                <div class="pool-fix-search">
+                    <div class="pool-fix-input-row">
+                        <div class="pool-fix-input-wrap">
+                            <label for="pool-fix-track-input">Track</label>
+                            <input type="text" id="pool-fix-track-input" placeholder="Track name" value="${_escAttr(trackName)}">
+                        </div>
+                        <div class="pool-fix-input-wrap">
+                            <label for="pool-fix-artist-input">Artist</label>
+                            <input type="text" id="pool-fix-artist-input" placeholder="Artist name" value="${_escAttr(artistName)}">
+                        </div>
+                        <button class="pool-fix-search-btn" onclick="searchPoolFix()">Search</button>
+                    </div>
+                </div>
+                <div class="pool-fix-results-area">
+                    <div id="pool-fix-results" class="pool-fix-results-list">
+                        <div class="pool-fix-empty">Searching...</div>
+                    </div>
+                </div>
+            </div>
+            <div class="pool-fix-footer">
+                <button class="pool-fix-cancel" onclick="closePoolFixModal()">Cancel</button>
+            </div>
+        </div>
+    `;
+
+    // Store rematch context
+    fixOverlay.dataset.mode = 'rematch';
+    fixOverlay.dataset.cacheId = cacheId;
+    fixOverlay.dataset.originalTitle = trackName;
+    fixOverlay.dataset.originalArtist = artistName;
+    document.body.appendChild(fixOverlay);
+
+    const trackInput = fixOverlay.querySelector('#pool-fix-track-input');
+    const artistInput = fixOverlay.querySelector('#pool-fix-artist-input');
+    const enterHandler = (e) => { if (e.key === 'Enter') searchPoolFix(); };
+    trackInput.addEventListener('keypress', enterHandler);
+    artistInput.addEventListener('keypress', enterHandler);
+    trackInput.focus();
+    trackInput.select();
+
+    setTimeout(() => searchPoolFix(), 500);
+}
+
+async function removePoolCacheEntry(entryId) {
+    if (!await showConfirmDialog({ title: 'Remove Cache Entry', message: 'Remove this cached match? The track will be re-discovered fresh next time.' })) return;
+    try {
+        const res = await fetch(`/api/discovery-pool/cache/${entryId}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            showToast('Cache entry removed', 'success');
+            filterDiscoveryPool(_discoveryPoolPlaylistFilter || '');
+        } else {
+            showToast(data.error || 'Failed to remove', 'error');
+        }
+    } catch (err) {
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+// --- Pool Fix Sub-Modal ---
+
+function openPoolFixModal(trackId, trackName, artistName) {
+    // Create sub-modal overlay inside the pool modal
+    let fixOverlay = document.getElementById('pool-fix-overlay');
+    if (fixOverlay) fixOverlay.remove();
+
+    fixOverlay = document.createElement('div');
+    fixOverlay.className = 'pool-fix-overlay';
+    fixOverlay.id = 'pool-fix-overlay';
+
+    // Only close on click to the overlay itself — use a dedicated close zone
+    // to prevent accidental dismissal when clicking near inputs
+    fixOverlay.addEventListener('mousedown', (e) => {
+        if (e.target === fixOverlay) {
+            e.preventDefault(); // Prevent stealing focus from inputs
+            closePoolFixModal();
+        }
+    });
+
+    fixOverlay.innerHTML = `
+        <div class="pool-fix-modal" onmousedown="event.stopPropagation()">
+            <div class="pool-fix-header">
+                <h2>Fix Track Match</h2>
+                <button class="pool-fix-close" onclick="closePoolFixModal()" title="Close">✕</button>
+            </div>
+            <div class="pool-fix-body">
+                <div class="pool-fix-source">
+                    <div class="pool-fix-source-label">Original Track</div>
+                    <div class="pool-fix-source-row">
+                        <span class="pool-fix-source-title">${_esc(trackName)}</span>
+                        <span class="pool-fix-source-sep">—</span>
+                        <span class="pool-fix-source-artist">${_esc(artistName)}</span>
+                    </div>
+                </div>
+                <div class="pool-fix-search">
+                    <div class="pool-fix-input-row">
+                        <div class="pool-fix-input-wrap">
+                            <label for="pool-fix-track-input">Track</label>
+                            <input type="text" id="pool-fix-track-input" placeholder="Track name" value="${_escAttr(trackName)}">
+                        </div>
+                        <div class="pool-fix-input-wrap">
+                            <label for="pool-fix-artist-input">Artist</label>
+                            <input type="text" id="pool-fix-artist-input" placeholder="Artist name" value="${_escAttr(artistName)}">
+                        </div>
+                        <button class="pool-fix-search-btn" onclick="searchPoolFix()">Search</button>
+                    </div>
+                </div>
+                <div class="pool-fix-results-area">
+                    <div id="pool-fix-results" class="pool-fix-results-list">
+                        <div class="pool-fix-empty">Searching...</div>
+                    </div>
+                </div>
+            </div>
+            <div class="pool-fix-footer">
+                <button class="pool-fix-cancel" onclick="closePoolFixModal()">Cancel</button>
+            </div>
+        </div>
+    `;
+
+    fixOverlay.dataset.trackId = trackId;
+    document.body.appendChild(fixOverlay);
+
+    // Add enter key support
+    const trackInput = fixOverlay.querySelector('#pool-fix-track-input');
+    const artistInput = fixOverlay.querySelector('#pool-fix-artist-input');
+    const enterHandler = (e) => { if (e.key === 'Enter') searchPoolFix(); };
+    trackInput.addEventListener('keypress', enterHandler);
+    artistInput.addEventListener('keypress', enterHandler);
+
+    // Focus the track input
+    trackInput.focus();
+    trackInput.select();
+
+    // Auto-search after a delay
+    setTimeout(() => searchPoolFix(), 500);
+}
+
+function closePoolFixModal() {
+    const fixOverlay = document.getElementById('pool-fix-overlay');
+    if (fixOverlay) fixOverlay.remove();
+}
+
+async function searchPoolFix() {
+    const trackInput = document.getElementById('pool-fix-track-input');
+    const artistInput = document.getElementById('pool-fix-artist-input');
+    const resultsContainer = document.getElementById('pool-fix-results');
+    if (!trackInput || !resultsContainer) return;
+
+    const trackVal = trackInput.value.trim();
+    const artistVal = artistInput.value.trim();
+    if (!trackVal && !artistVal) {
+        resultsContainer.innerHTML = '<div class="pool-fix-empty">Enter a search term</div>';
+        return;
+    }
+
+    resultsContainer.innerHTML = '<div class="pool-fix-empty"><div class="pool-fix-spinner"></div>Searching...</div>';
+
+    try {
+        const params = new URLSearchParams();
+        if (trackVal) params.set('track', trackVal);
+        if (artistVal) params.set('artist', artistVal);
+        params.set('limit', '20');
+        const res = await fetch(`/api/spotify/search_tracks?${params.toString()}`);
+        const data = await res.json();
+        const tracks = data.tracks || [];
+
+        if (tracks.length === 0) {
+            resultsContainer.innerHTML = '<div class="pool-fix-empty">No results found</div>';
+            return;
+        }
+
+        resultsContainer.innerHTML = tracks.map((track) => {
+            const artists = (track.artists || []).join(', ');
+            const duration = track.duration_ms ? formatDuration(track.duration_ms) : '';
+            const albumText = track.album ? ` · ${_esc(track.album)}` : '';
+            return `
+                <div class="pool-fix-result" onclick='selectPoolFixTrack(${JSON.stringify(track).replace(/'/g, "&#39;")})'>
+                    <div class="pool-fix-result-main">
+                        <div class="pool-fix-result-title">${_esc(track.name || 'Unknown')}</div>
+                        <div class="pool-fix-result-meta">${_esc(artists)}${albumText}</div>
+                    </div>
+                    ${duration ? `<div class="pool-fix-result-dur">${duration}</div>` : ''}
+                </div>
+            `;
+        }).join('');
+    } catch (err) {
+        resultsContainer.innerHTML = `<div class="pool-fix-empty">Search failed: ${_esc(err.message)}</div>`;
+    }
+}
+
+async function selectPoolFixTrack(track) {
+    const fixOverlay = document.getElementById('pool-fix-overlay');
+    if (!fixOverlay) return;
+
+    // Confirm selection
+    const artists = (track.artists || []).join(', ');
+    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
+
+    const isRematch = fixOverlay.dataset.mode === 'rematch';
+
+    try {
+        let res, data;
+        if (isRematch) {
+            // Rematch mode: save new match to discovery cache
+            res = await fetch('/api/discovery-pool/rematch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    cache_id: parseInt(fixOverlay.dataset.cacheId),
+                    original_title: fixOverlay.dataset.originalTitle,
+                    original_artist: fixOverlay.dataset.originalArtist,
+                    spotify_track: track,
+                }),
+            });
+            data = await res.json();
+        } else {
+            // Normal fix mode: save to mirrored track
+            const trackId = parseInt(fixOverlay.dataset.trackId);
+            res = await fetch('/api/discovery-pool/fix', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    track_id: trackId,
+                    spotify_track: track,
+                }),
+            });
+            data = await res.json();
+        }
+
+        if (data.success) {
+            showToast(`Matched: ${track.name}`, 'success');
+            closePoolFixModal();
+            // Refresh pool data
+            filterDiscoveryPool(_discoveryPoolPlaylistFilter || '');
+        } else {
+            showToast(data.error || 'Failed to fix track', 'error');
+        }
+    } catch (err) {
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+async function deleteMirroredPlaylist(playlistId, name) {
+    if (!await showConfirmDialog({ title: 'Delete Playlist', message: `Delete mirrored playlist "${name}"?`, confirmText: 'Delete', destructive: true })) return;
+    try {
+        const res = await fetch(`/api/mirrored-playlists/${playlistId}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Deleted mirror: ${name}`, 'success');
+            loadMirroredPlaylists();
+        } else {
+            showToast(data.error || 'Failed to delete', 'error');
+        }
+    } catch (err) {
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+/**
+ * Launch the existing discovery modal for a mirrored playlist by creating
+ * a temporary entry in youtubePlaylistStates and reusing openYouTubeDiscoveryModal.
+ */
+async function discoverMirroredPlaylist(playlistId) {
+    closeMirroredModal();
+    const tempHash = `mirrored_${playlistId}`;
+
+    // If state already exists (discovery in progress or completed), just reopen the modal
+    const existingState = youtubePlaylistStates[tempHash];
+    const hasActiveDiscovery = activeYouTubePollers[tempHash] || document.getElementById(`youtube-discovery-modal-${tempHash}`);
+    if (existingState && (existingState.phase !== 'fresh' || hasActiveDiscovery)) {
+        openYouTubeDiscoveryModal(tempHash);
+        // Resume polling if discovery is in progress but poller stopped
+        if (existingState.phase === 'discovering' && !activeYouTubePollers[tempHash]) {
+            startYouTubeDiscoveryPolling(tempHash);
+        }
+        return;
+    }
+
+    showLoadingOverlay('Preparing discovery...');
+    try {
+        // Register the mirrored playlist on the backend so the YouTube discovery pipeline can find it
+        const prepRes = await fetch(`/api/mirrored-playlists/${playlistId}/prepare-discovery`, { method: 'POST' });
+        const prepData = await prepRes.json();
+        if (prepData.error) throw new Error(prepData.error);
+
+        // Also fetch the full data for the frontend state
+        const res = await fetch(`/api/mirrored-playlists/${playlistId}`);
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        hideLoadingOverlay();
+
+        // Build tracks in the format the discovery modal expects
+        const tracks = (data.tracks || []).map(t => ({
+            id: t.source_track_id || `mirrored_${t.id}`,
+            name: t.track_name,
+            artists: [t.artist_name],
+            album: t.album_name || '',
+            duration_ms: t.duration_ms || 0
+        }));
+
+        // Check if backend returned cached results
+        if (prepData.from_cache) {
+            // Fetch the pre-populated status from the backend
+            const statusRes = await fetch(`/api/youtube/discovery/status/${tempHash}`);
+            const statusData = await statusRes.json();
+            if (statusData.error) throw new Error(statusData.error);
+
+            youtubePlaylistStates[tempHash] = {
+                playlist: {
+                    name: data.name,
+                    tracks: tracks,
+                    track_count: tracks.length
+                },
+                phase: statusData.phase || 'discovered',
+                discovery_results: statusData.results || [],
+                discoveryResults: statusData.results || [],
+                discovery_progress: statusData.progress || 100,
+                spotify_matches: statusData.spotify_matches || 0,
+                spotifyMatches: statusData.spotify_matches || 0,
+                spotify_total: tracks.length,
+                status: statusData.status || 'complete',
+                url: `mirrored://${data.source}/${data.source_playlist_id}`,
+                sync_playlist_id: null,
+                converted_spotify_playlist_id: null,
+                download_process_id: null,
+                created_at: Date.now() / 1000,
+                last_accessed: Date.now() / 1000,
+                discovery_future: null,
+                sync_progress: {},
+                is_mirrored_playlist: true,
+                mirrored_source: data.source
+            };
+
+            const cached = prepData.cached_matches || 0;
+            const total = prepData.total_tracks || tracks.length;
+            showToast(`Loaded ${cached}/${total} cached discovery results`, 'success');
+        } else {
+            // No cached data — fresh state
+            youtubePlaylistStates[tempHash] = {
+                playlist: {
+                    name: data.name,
+                    tracks: tracks,
+                    track_count: tracks.length
+                },
+                phase: 'fresh',
+                discovery_results: [],
+                discovery_progress: 0,
+                spotify_matches: 0,
+                spotify_total: tracks.length,
+                status: 'parsed',
+                url: `mirrored://${data.source}/${data.source_playlist_id}`,
+                sync_playlist_id: null,
+                converted_spotify_playlist_id: null,
+                download_process_id: null,
+                created_at: Date.now() / 1000,
+                last_accessed: Date.now() / 1000,
+                discovery_future: null,
+                sync_progress: {},
+                is_mirrored_playlist: true,
+                mirrored_source: data.source
+            };
+        }
+
+        openYouTubeDiscoveryModal(tempHash);
+    } catch (err) {
+        hideLoadingOverlay();
+        showToast(`Error: ${err.message}`, 'error');
+    }
+}
+
+// ===============================
+// AUTOMATIONS — Visual Builder
+// ===============================
+
+async function retryFailedMirroredDiscovery(urlHash) {
+    // Extract playlist ID from url_hash (format: "mirrored_<id>")
+    const playlistId = urlHash.replace('mirrored_', '');
+    try {
+        const res = await fetch(`/api/mirrored-playlists/${playlistId}/retry-failed-discovery`, { method: 'POST' });
+        const data = await res.json();
+        if (data.error) {
+            showToast(`Error: ${data.error}`, 'error');
+            return;
+        }
+        if (data.retry_count === 0) {
+            showToast('All tracks already found!', 'success');
+            return;
+        }
+
+        // Update frontend state to discovering
+        const state = youtubePlaylistStates[urlHash];
+        if (state) {
+            state.phase = 'discovering';
+            state.status = 'discovering';
+            state.discovery_progress = 0;
+        }
+
+        // Update modal buttons to show discovering state
+        updateYouTubeModalButtons(urlHash, 'discovering');
+
+        // Start polling for progress
+        startYouTubeDiscoveryPolling(urlHash);
+
+        showToast(`Retrying ${data.retry_count} failed tracks...`, 'info');
+    } catch (err) {
+        showToast(`Error retrying discovery: ${err.message}`, 'error');
+    }
+}
+
+let _autoBlocks = null; // cached block definitions from /api/automations/blocks
+let _autoBuilder = { editId: null, when: null, do: null, then: [], isSystem: false };
+
+let _autoMirroredPlaylists = null; // cached mirrored playlist list
+let _autoSpotifyAuthenticated = false; // whether Spotify is authed (for refresh filtering)
+
+const _autoIcons = {
+    schedule: '\u23F1\uFE0F', daily_time: '\u{1F570}\uFE0F', weekly_time: '\uD83D\uDCC5', app_started: '\uD83D\uDE80', track_downloaded: '\u2B07\uFE0F', batch_complete: '\u2705',
+    watchlist_new_release: '\uD83D\uDD14', playlist_synced: '\uD83D\uDD04',
+    playlist_changed: '\u270F\uFE0F',
+    process_wishlist: '\uD83D\uDCCB', scan_watchlist: '\uD83D\uDC41\uFE0F',
+    scan_library: '\uD83D\uDD04', refresh_mirrored: '\uD83D\uDCC2', sync_playlist: '\uD83D\uDD01',
+    discover_playlist: '\uD83D\uDD0D', discovery_completed: '\uD83D\uDD0D',
+    notify_only: '\uD83D\uDD14', discord_webhook: '\uD83D\uDCAC', pushbullet: '\uD83D\uDD14', telegram: '\u2709\uFE0F', webhook: '\uD83C\uDF10',
+    signal_received: '\u26A1', fire_signal: '\u26A1', run_script: '\uD83D\uDCBB',
+    // Phase 3
+    wishlist_processing_completed: '\u2705', watchlist_scan_completed: '\u2705',
+    database_update_completed: '\uD83D\uDDC4\uFE0F', download_failed: '\u274C',
+    download_quarantined: '\u26A0\uFE0F', wishlist_item_added: '\u2795',
+    watchlist_artist_added: '\uD83D\uDC64', watchlist_artist_removed: '\uD83D\uDC64',
+    import_completed: '\uD83D\uDCE5', mirrored_playlist_created: '\uD83D\uDCC2',
+    quality_scan_completed: '\uD83D\uDCCA', duplicate_scan_completed: '\uD83D\uDDC2\uFE0F', library_scan_completed: '\uD83D\uDCE1',
+    start_database_update: '\uD83D\uDDC4\uFE0F', run_duplicate_cleaner: '\uD83D\uDDC2\uFE0F',
+    clear_quarantine: '\uD83D\uDDD1\uFE0F', cleanup_wishlist: '\uD83E\uDDF9',
+    update_discovery_pool: '\uD83E\uDDED', start_quality_scan: '\uD83D\uDCCA',
+    backup_database: '\uD83D\uDCBE',
+    refresh_beatport_cache: '\uD83C\uDFB5',
+    clean_search_history: '\uD83D\uDDD1\uFE0F',
+    clean_completed_downloads: '\u2705',
+    full_cleanup: '\uD83E\uDDF9',
+    playlist_pipeline: '\uD83D\uDE80',
+};
+
+// --- Inspiration Templates ---
+// --- Automation Hub Data ---
+
+// ── Automation Hub: One-Click Pipeline Groups ──
+const AUTO_HUB_GROUPS = [
+    {
+        id: 'playlist-pipeline', icon: '🚀', name: 'Playlist Pipeline (All-in-One)',
+        desc: 'Single automation that runs the full playlist lifecycle: refresh → discover → sync → download missing. No signal wiring needed.',
+        category: 'Sync', badge: '1 automation', color: '#8b5cf6',
+        steps: [
+            { label: 'Refresh', icon: '🔄', type: 'action' },
+            { label: 'Discover', icon: '🔍', type: 'action' },
+            { label: 'Sync', icon: '🔗', type: 'action' },
+            { label: 'Download', icon: '📥', type: 'action' },
+        ],
+        automations: [
+            { name: 'Playlist Pipeline', trigger_type: 'schedule', trigger_config: { interval: 6, unit: 'hours' }, action_type: 'playlist_pipeline', action_config: { all: true }, then_actions: [], group_name: 'Playlist Pipeline' },
+        ]
+    },
+    {
+        id: 'new-music-pipeline', icon: '🚀', name: 'New Music Pipeline',
+        desc: 'Full hands-free new music workflow. Scans your watchlist for releases, downloads them, cleans up, and notifies you.',
+        category: 'Discovery', badge: '4 automations', color: '#f97316',
+        steps: [
+            { label: 'Scan Artists', icon: '🔍', type: 'action' },
+            { label: 'Download', icon: '📥', type: 'action' },
+            { label: 'Cleanup', icon: '🧹', type: 'action' },
+            { label: 'Notify', icon: '🔔', type: 'notify' },
+        ],
+        automations: [
+            { name: 'New Music — Scan Watchlist', trigger_type: 'schedule', trigger_config: { interval: 12, unit: 'hours' }, action_type: 'scan_watchlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_scanned' } }], group_name: 'New Music Pipeline' },
+            { name: 'New Music — Download', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_scanned' }, action_type: 'process_wishlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_downloaded' } }], group_name: 'New Music Pipeline' },
+            { name: 'New Music — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_downloaded' }, action_type: 'full_cleanup', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'nm_cleaned' } }], group_name: 'New Music Pipeline' },
+            { name: 'New Music — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'nm_cleaned' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'New Music Pipeline', needs_notify: true },
+        ]
+    },
+    {
+        id: 'nightly-ops', icon: '🌙', name: 'Nightly Operations',
+        desc: 'Staggered overnight maintenance: scan, download, cleanup, and backup while you sleep.',
+        category: 'Maintenance', badge: '4 automations', color: '#8b5cf6',
+        steps: [
+            { label: '1AM Scan', icon: '🔍', type: 'action' },
+            { label: '2AM Download', icon: '📥', type: 'action' },
+            { label: '3AM Cleanup', icon: '🧹', type: 'action' },
+            { label: '4AM Backup', icon: '💾', type: 'action' },
+        ],
+        automations: [
+            { name: 'Nightly — 1AM Scan', trigger_type: 'daily_time', trigger_config: { time: '01:00' }, action_type: 'scan_watchlist', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
+            { name: 'Nightly — 2AM Download', trigger_type: 'daily_time', trigger_config: { time: '02:00' }, action_type: 'process_wishlist', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
+            { name: 'Nightly — 3AM Cleanup', trigger_type: 'daily_time', trigger_config: { time: '03:00' }, action_type: 'full_cleanup', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
+            { name: 'Nightly — 4AM Backup', trigger_type: 'daily_time', trigger_config: { time: '04:00' }, action_type: 'backup_database', action_config: {}, then_actions: [], group_name: 'Nightly Operations' },
+        ]
+    },
+    {
+        id: 'download-monitor', icon: '📊', name: 'Download Monitor',
+        desc: 'Stay informed about your downloads. Get notified on failures, quarantined files, and completed batches.',
+        category: 'Alerts', badge: '3 automations', color: '#ef4444',
+        steps: [
+            { label: 'Failures', icon: '❌', type: 'notify' },
+            { label: 'Quarantine', icon: '⚠️', type: 'notify' },
+            { label: 'Complete', icon: '✅', type: 'notify' },
+        ],
+        automations: [
+            { name: 'Alert — Download Failed', trigger_type: 'download_failed', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
+            { name: 'Alert — File Quarantined', trigger_type: 'download_quarantined', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
+            { name: 'Alert — Batch Complete', trigger_type: 'batch_complete', trigger_config: {}, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Download Monitor', needs_notify: true },
+        ]
+    },
+    {
+        id: 'library-guardian', icon: '🛡️', name: 'Library Guardian',
+        desc: 'Protect your library quality. After scans, runs quality checks and notifies you of any issues found.',
+        category: 'Maintenance', badge: '2 automations', color: '#f59e0b',
+        steps: [
+            { label: 'Quality Scan', icon: '✅', type: 'action' },
+            { label: 'Notify', icon: '🔔', type: 'notify' },
+        ],
+        automations: [
+            { name: 'Guardian — Quality Check', trigger_type: 'library_scan_completed', trigger_config: {}, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'guardian_quality_done' } }], group_name: 'Library Guardian' },
+            { name: 'Guardian — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'guardian_quality_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Library Guardian', needs_notify: true },
+        ]
+    },
+    {
+        id: 'startup-recovery', icon: '⚡', name: 'Startup Recovery',
+        desc: 'Self-heal after a restart. Scans your library, processes pending wishlist items, and cleans up automatically.',
+        category: 'Maintenance', badge: '3 automations', color: '#14b8a6',
+        steps: [
+            { label: 'Scan Library', icon: '📚', type: 'action' },
+            { label: 'Process Wishlist', icon: '📥', type: 'action' },
+            { label: 'Cleanup', icon: '🧹', type: 'action' },
+        ],
+        automations: [
+            { name: 'Startup — Scan Library', trigger_type: 'app_started', trigger_config: {}, action_type: 'scan_library', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'startup_scanned' } }], group_name: 'Startup Recovery' },
+            { name: 'Startup — Process Wishlist', trigger_type: 'signal_received', trigger_config: { signal_name: 'startup_scanned' }, action_type: 'process_wishlist', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'startup_processed' } }], group_name: 'Startup Recovery' },
+            { name: 'Startup — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'startup_processed' }, action_type: 'full_cleanup', action_config: {}, then_actions: [], group_name: 'Startup Recovery' },
+        ]
+    },
+    {
+        id: 'import-pipeline', icon: '📦', name: 'Import Pipeline',
+        desc: 'After importing files, automatically scans your library, runs a quality check, and notifies you when complete.',
+        category: 'Maintenance', badge: '3 automations', color: '#a855f7',
+        steps: [
+            { label: 'Scan Library', icon: '📚', type: 'action' },
+            { label: 'Quality Check', icon: '✅', type: 'action' },
+            { label: 'Notify', icon: '🔔', type: 'notify' },
+        ],
+        automations: [
+            { name: 'Import — Scan Library', trigger_type: 'import_completed', trigger_config: {}, action_type: 'scan_library', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'import_scanned' } }], group_name: 'Import Pipeline' },
+            { name: 'Import — Quality Check', trigger_type: 'signal_received', trigger_config: { signal_name: 'import_scanned' }, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'import_quality_done' } }], group_name: 'Import Pipeline' },
+            { name: 'Import — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'import_quality_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Import Pipeline', needs_notify: true },
+        ]
+    },
+    {
+        id: 'weekly-deep-clean', icon: '✨', name: 'Weekly Deep Clean',
+        desc: 'Comprehensive weekly sweep: find duplicates, check quality, clean up, back up, and report results.',
+        category: 'Maintenance', badge: '5 automations', color: '#ec4899',
+        steps: [
+            { label: 'Duplicates', icon: '📋', type: 'action' },
+            { label: 'Quality', icon: '✅', type: 'action' },
+            { label: 'Cleanup', icon: '🧹', type: 'action' },
+            { label: 'Backup', icon: '💾', type: 'action' },
+            { label: 'Notify', icon: '🔔', type: 'notify' },
+        ],
+        automations: [
+            { name: 'Deep Clean — Duplicates', trigger_type: 'weekly_time', trigger_config: { days: ['sunday'], time: '02:00' }, action_type: 'run_duplicate_cleaner', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_dedup_done' } }], group_name: 'Weekly Deep Clean' },
+            { name: 'Deep Clean — Quality', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_dedup_done' }, action_type: 'start_quality_scan', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_quality_done' } }], group_name: 'Weekly Deep Clean' },
+            { name: 'Deep Clean — Cleanup', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_quality_done' }, action_type: 'full_cleanup', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_cleanup_done' } }], group_name: 'Weekly Deep Clean' },
+            { name: 'Deep Clean — Backup', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_cleanup_done' }, action_type: 'backup_database', action_config: {}, then_actions: [{ type: 'fire_signal', config: { signal_name: 'dc_backup_done' } }], group_name: 'Weekly Deep Clean' },
+            { name: 'Deep Clean — Notify', trigger_type: 'signal_received', trigger_config: { signal_name: 'dc_backup_done' }, action_type: 'notify_only', action_config: {}, then_actions: [], group_name: 'Weekly Deep Clean', needs_notify: true },
+        ]
+    },
+    {
+        id: 'beatport-fresh', icon: '🎧', name: 'Beatport Fresh',
+        desc: 'Keep your Beatport charts and playlists up to date with a daily cache refresh.',
+        category: 'Discovery', badge: '1 automation', color: '#84cc16',
+        steps: [
+            { label: 'Refresh Cache', icon: '🔄', type: 'action' },
+        ],
+        automations: [
+            { name: 'Beatport — Daily Refresh', trigger_type: 'daily_time', trigger_config: { time: '05:00' }, action_type: 'refresh_beatport_cache', action_config: {}, then_actions: [], group_name: 'Beatport Fresh' },
+        ]
+    },
+];
+
+const AUTO_HUB_RECIPES = [
+    // Sync & Playlists
+    {
+        id: 'spotify-auto-sync', icon: '\uD83D\uDD01', name: 'Spotify Playlist Auto-Sync', desc: 'Refresh all mirrored playlists every 6 hours to keep them in sync with Spotify.',
+        category: 'Sync', difficulty: 'beginner', when: { type: 'schedule', config: { interval: 6, unit: 'hours' } }, do: { type: 'refresh_mirrored', config: {} }, then: []
+    },
+    {
+        id: 'release-radar-pipeline', icon: '\uD83D\uDCE1', name: 'Release Radar Pipeline', desc: 'Every Friday, refresh mirrored playlists, discover new tracks, then sync. Chain 3 automations for a full pipeline.',
+        category: 'Sync', difficulty: 'intermediate', when: { type: 'weekly_time', config: { days: ['friday'], time: '18:00' } }, do: { type: 'refresh_mirrored', config: {} }, then: [],
+        chain: ['Refresh Mirrored', 'Discover Playlist', 'Sync Playlist'], note: 'Create 3 separate automations and chain them with signals for the full pipeline.'
+    },
+    {
+        id: 'discover-weekly-grab', icon: '\uD83C\uDFB5', name: 'Discover Weekly Grab', desc: 'Every Monday, refresh your mirrored Discover Weekly to capture the new playlist before Spotify replaces it.',
+        category: 'Sync', difficulty: 'beginner', when: { type: 'weekly_time', config: { days: ['monday'], time: '08:00' } }, do: { type: 'refresh_mirrored', config: {} }, then: []
+    },
+    {
+        id: 'playlist-change-watcher', icon: '\uD83D\uDD14', name: 'Playlist Change Watcher', desc: 'Get a Discord notification whenever any tracked playlist changes.',
+        category: 'Sync', difficulty: 'beginner', when: { type: 'playlist_changed', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'discord_webhook', config: {} }]
+    },
+    {
+        id: 'new-mirror-discovery', icon: '\uD83D\uDD0D', name: 'New Mirror Auto-Discovery', desc: 'Automatically discover tracks when you mirror a new playlist.',
+        category: 'Sync', difficulty: 'beginner', when: { type: 'mirrored_playlist_created', config: {} }, do: { type: 'discover_playlist', config: {} }, then: []
+    },
+    // New Music Discovery
+    {
+        id: 'complete-new-release', icon: '\uD83D\uDE80', name: 'Complete New Release Pipeline', desc: 'Full hands-free chain: scan watchlist \u2192 process wishlist \u2192 quality scan \u2192 notify. Requires 3 automations linked by signals.',
+        category: 'Discovery', difficulty: 'advanced', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'watchlist_done' } }],
+        chain: ['Scan Watchlist', '\u26A1 watchlist_done', 'Process Wishlist', '\u26A1 wishlist_done', 'Quality Scan', 'Discord'],
+        note: 'Create 3 automations: (1) Schedule\u2192Scan Watchlist\u2192fire watchlist_done, (2) Signal watchlist_done\u2192Process Wishlist\u2192fire wishlist_done, (3) Signal wishlist_done\u2192Quality Scan\u2192Discord.'
+    },
+    {
+        id: 'new-release-monitor', icon: '\uD83D\uDD14', name: 'New Release Monitor', desc: 'Scan your watchlist for new releases every 12 hours.',
+        category: 'Discovery', difficulty: 'beginner', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: []
+    },
+    {
+        id: 'artist-watch-alert', icon: '\uD83C\uDFA4', name: 'Artist Watch Alert', desc: 'Get a Telegram notification when you add a new artist to your watchlist.',
+        category: 'Discovery', difficulty: 'beginner', when: { type: 'watchlist_artist_added', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'telegram', config: {} }]
+    },
+    {
+        id: 'discovery-pool-refresh', icon: '\uD83C\uDF10', name: 'Discovery Pool Refresh', desc: 'Refresh the discovery pool every night at 2 AM with fresh recommendations.',
+        category: 'Discovery', difficulty: 'beginner', when: { type: 'daily_time', config: { time: '02:00' } }, do: { type: 'update_discovery_pool', config: {} }, then: []
+    },
+    {
+        id: 'nightly-wishlist', icon: '\uD83C\uDF19', name: 'Nightly Wishlist Processor', desc: 'Process your wishlist at 3 AM every night while you sleep.',
+        category: 'Discovery', difficulty: 'beginner', when: { type: 'daily_time', config: { time: '03:00' } }, do: { type: 'process_wishlist', config: {} }, then: []
+    },
+    // Library Maintenance
+    {
+        id: 'full-library-maintenance', icon: '\uD83E\uDDF9', name: 'Full Library Maintenance', desc: 'Run full cleanup every Saturday at 5 AM \u2014 dedup, quarantine, wishlist tidy.',
+        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'weekly_time', config: { days: ['saturday'], time: '05:00' } }, do: { type: 'full_cleanup', config: {} }, then: []
+    },
+    {
+        id: 'post-batch-cleanup', icon: '\uD83E\uDDF9', name: 'Post-Batch Cleanup', desc: 'Run a full cleanup after any batch download completes.',
+        category: 'Maintenance', difficulty: 'beginner', when: { type: 'batch_complete', config: {} }, do: { type: 'full_cleanup', config: {} }, then: []
+    },
+    {
+        id: 'weekly-db-backup', icon: '\uD83D\uDCBE', name: 'Weekly Database Backup', desc: 'Back up your database every Sunday at 4 AM.',
+        category: 'Maintenance', difficulty: 'beginner', when: { type: 'weekly_time', config: { days: ['sunday'], time: '04:00' } }, do: { type: 'backup_database', config: {} }, then: []
+    },
+    {
+        id: 'quality-assurance', icon: '\u2705', name: 'Quality Assurance Pipeline', desc: 'After a library scan completes, run a quality scan and fire a signal when done.',
+        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'library_scan_completed', config: {} }, do: { type: 'start_quality_scan', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'quality_done' } }]
+    },
+    {
+        id: 'import-cleanup', icon: '\uD83D\uDCE5', name: 'Import Cleanup', desc: 'Automatically scan the library after an import completes to keep things tidy.',
+        category: 'Maintenance', difficulty: 'intermediate', when: { type: 'import_completed', config: {} }, do: { type: 'scan_library', config: {} }, then: []
+    },
+    // Notifications & Alerts
+    {
+        id: 'download-failure-alert', icon: '\u274C', name: 'Download Failure Alert', desc: 'Get notified via Discord when a download fails.',
+        category: 'Alerts', difficulty: 'beginner', when: { type: 'download_failed', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'discord_webhook', config: {} }]
+    },
+    {
+        id: 'quarantine-alert', icon: '\u26A0\uFE0F', name: 'Quarantine Alert', desc: 'Get a Pushbullet alert when a file is quarantined.',
+        category: 'Alerts', difficulty: 'beginner', when: { type: 'download_quarantined', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'pushbullet', config: {} }]
+    },
+    {
+        id: 'batch-complete-notify', icon: '\uD83C\uDFC1', name: 'Batch Complete Notification', desc: 'Get a Telegram message when a batch download finishes.',
+        category: 'Alerts', difficulty: 'beginner', when: { type: 'batch_complete', config: {} }, do: { type: 'notify_only', config: {} }, then: [{ type: 'telegram', config: {} }]
+    },
+    // Power User Chains
+    {
+        id: 'full-hands-free', icon: '\uD83E\uDD16', name: 'Full Hands-Free Pipeline', desc: 'The ultimate automation chain: scan \u2192 process \u2192 download \u2192 clean \u2192 notify. Requires 5 automations linked by signals.',
+        category: 'Chains', difficulty: 'advanced', when: { type: 'schedule', config: { interval: 12, unit: 'hours' } }, do: { type: 'scan_watchlist', config: {} }, then: [{ type: 'fire_signal', config: { signal_name: 'scan_done' } }],
+        chain: ['Scan Watchlist', '\u26A1 scan_done', 'Process Wishlist', '\u26A1 process_done', 'Full Cleanup', '\u26A1 cleanup_done', 'Quality Scan', 'Discord'],
+        note: 'Build 4-5 automations, each firing a signal for the next step. Start small and add stages.'
+    },
+    {
+        id: 'staggered-nightly', icon: '\uD83C\uDF03', name: 'Staggered Nightly Pipeline', desc: 'Spread tasks across the night: 1 AM scan, 2 AM process, 3 AM cleanup, 4 AM backup.',
+        category: 'Chains', difficulty: 'intermediate', when: { type: 'daily_time', config: { time: '01:00' } }, do: { type: 'scan_watchlist', config: {} }, then: [],
+        chain: ['1:00 Scan', '2:00 Process', '3:00 Cleanup', '4:00 Backup'],
+        note: 'Create 4 daily_time automations at staggered hours. No signals needed \u2014 just timing.'
+    },
+];
+
+const AUTO_HUB_GUIDES = [
+    {
+        id: 'auto-sync-playlists', icon: '\uD83D\uDD01', title: 'Auto-Sync Your Spotify Playlists', subtitle: 'Mirror a Spotify playlist and schedule automatic refreshes.', difficulty: 'beginner',
+        steps: [
+            'Go to the <strong>Playlists</strong> page and find a Spotify playlist you want to track.',
+            'Click <strong>Mirror Playlist</strong> to create a local copy.',
+            'Go to <strong>Automations</strong> and click <strong>New Automation</strong>.',
+            'Set WHEN to <strong>Schedule \u2192 Every 6 hours</strong>.',
+            'Set DO to <strong>Refresh Mirrored Playlists</strong>.',
+            'Save and enable \u2014 your playlist will now stay in sync automatically.'
+        ], relatedRecipes: ['spotify-auto-sync', 'discover-weekly-grab']
+    },
+    {
+        id: 'discord-download-alerts', icon: '\uD83D\uDCE2', title: 'Get Discord Alerts for Downloads', subtitle: 'Set up Discord webhook notifications for download events.', difficulty: 'beginner',
+        steps: [
+            'In Discord, go to your channel\'s settings \u2192 <strong>Integrations \u2192 Webhooks</strong>.',
+            'Create a webhook and copy the URL.',
+            'In SoulSync, go to <strong>Settings \u2192 Notifications</strong> and paste the Discord webhook URL.',
+            'Go to <strong>Automations \u2192 New Automation</strong>.',
+            'Set WHEN to <strong>Download Failed</strong> (or any event), DO to <strong>Notify Only</strong>, THEN to <strong>Discord</strong>.'
+        ], relatedRecipes: ['download-failure-alert', 'batch-complete-notify']
+    },
+    {
+        id: 'hands-free-pipeline', icon: '\uD83E\uDD16', title: 'Build a Hands-Free Library Pipeline', subtitle: 'Chain watchlist scanning, wishlist processing, and cleanup with signals.', difficulty: 'intermediate',
+        steps: [
+            'Create Automation 1: <strong>Schedule (12h) \u2192 Scan Watchlist</strong>, THEN fire signal <code>scan_done</code>.',
+            'Create Automation 2: <strong>Signal scan_done \u2192 Process Wishlist</strong>, THEN fire signal <code>process_done</code>.',
+            'Create Automation 3: <strong>Signal process_done \u2192 Full Cleanup</strong>.',
+            'Enable all three automations.',
+            'Test by manually running Automation 1 \u2014 watch the chain execute.',
+            'Add a THEN notification (Discord/Telegram) to the last automation for completion alerts.',
+            'Adjust the schedule interval based on how often you want new music checked.'
+        ], relatedRecipes: ['complete-new-release', 'full-hands-free']
+    },
+    {
+        id: 'signal-chains', icon: '\u26A1', title: 'Set Up Signal Chains', subtitle: 'Use fire_signal and signal_received to link automations together.', difficulty: 'advanced',
+        steps: [
+            'Understand the concept: <strong>fire_signal</strong> is a THEN action that emits a named signal. <strong>signal_received</strong> is a WHEN trigger that listens for it.',
+            'In your first automation, add a THEN action \u2192 <strong>Fire Signal</strong> and name it (e.g., <code>step1_done</code>).',
+            'Create a second automation with WHEN \u2192 <strong>Signal Received</strong> \u2192 signal name <code>step1_done</code>.',
+            'The second automation will fire automatically when the first one completes.',
+            'Chain up to 5 levels deep (safety limit). SoulSync detects cycles automatically.',
+            'Use descriptive signal names like <code>watchlist_scanned</code> or <code>cleanup_finished</code>.'
+        ], relatedRecipes: ['quality-assurance', 'complete-new-release']
+    },
+    {
+        id: 'nightly-maintenance', icon: '\uD83C\uDF19', title: 'Schedule Nightly Maintenance', subtitle: 'Set up backup, cleanup, and quality scans to run overnight.', difficulty: 'intermediate',
+        steps: [
+            'Create a <strong>Daily Time (04:00) \u2192 Backup Database</strong> automation.',
+            'Create a <strong>Weekly Time (Saturday, 05:00) \u2192 Full Cleanup</strong> automation.',
+            'Create a <strong>Daily Time (02:00) \u2192 Update Discovery Pool</strong> automation.',
+            'Stagger times by at least 1 hour to avoid resource contention.',
+            'Add Discord/Telegram notifications to any you want alerts for.'
+        ], relatedRecipes: ['weekly-db-backup', 'full-library-maintenance', 'staggered-nightly']
+    },
+];
+
+const AUTO_HUB_TIPS = [
+    { icon: '\u26A1', title: 'Signal Chaining 101', body: '<strong>fire_signal</strong> (a THEN action) emits a named event. <strong>signal_received</strong> (a WHEN trigger) listens for it. This lets you chain automations: when one finishes, the next starts automatically.', tag: 'Signals' },
+    { icon: '\u23F0', title: 'Stagger Your Schedules', body: 'If you have multiple timed automations, space them at least 1 hour apart. Running scan, process, and cleanup at the same time creates resource contention and can slow everything down.', tag: 'Performance' },
+    { icon: '\uD83C\uDFAF', title: 'Use Conditions to Filter', body: 'Add conditions to event triggers to only fire on specific artists, formats, or quality levels. For example, trigger only when a downloaded track\'s artist matches "Radiohead".', tag: 'Filtering' },
+    { icon: '\uD83D\uDCC1', title: 'Group Related Automations', body: 'Use the Group dropdown when creating automations to organize them. Groups like "Nightly", "Notifications", or "Pipeline" make it easy to find and manage related automations.', tag: 'Organization' },
+    { icon: '\uD83D\uDD04', title: 'Avoid Chain Loops', body: 'SoulSync has built-in cycle detection, but it\'s good practice to design signal names carefully. If A fires signal X and B listens for X and fires Y, make sure nothing fires X again downstream.', tag: 'Safety' },
+    { icon: '\uD83D\uDCDA', title: 'Stack THEN Actions', body: 'Each automation supports up to 3 THEN actions. Combine notification channels (Discord + Telegram) with a fire_signal to both notify yourself and trigger the next automation.', tag: 'Power' },
+    { icon: '\u2699\uFE0F', title: 'System vs Custom', body: 'System automations handle core tasks like Spotify enrichment and are managed automatically. Create custom automations to extend their behavior \u2014 trigger on their completion events.', tag: 'Basics' },
+    { icon: '\uD83E\uDDEA', title: 'Test with Notify Only', body: 'Set DO to <strong>Notify Only</strong> when testing a new trigger. You\'ll see when it fires without any side effects. Once you\'re confident in the timing, switch to the real action.', tag: 'Testing' },
+];
+
+const AUTO_HUB_REFERENCE = {
+    triggers: [
+        {
+            group: 'Time-Based', items: [
+                { type: 'schedule', label: 'Schedule', desc: 'Repeating interval (e.g., every 6 hours)' },
+                { type: 'daily_time', label: 'Daily Time', desc: 'Every day at a specific time (e.g., 03:00)' },
+                { type: 'weekly_time', label: 'Weekly Time', desc: 'Specific days + time (e.g., Saturday at 05:00)' },
+            ]
+        },
+        {
+            group: 'Download Events', items: [
+                { type: 'track_downloaded', label: 'Track Downloaded', desc: 'Fires when a single track download completes' },
+                { type: 'batch_complete', label: 'Batch Complete', desc: 'Fires when a batch download job finishes' },
+                { type: 'download_failed', label: 'Download Failed', desc: 'Fires when a download fails or errors out' },
+                { type: 'download_quarantined', label: 'File Quarantined', desc: 'Fires when a downloaded file is quarantined for quality issues' },
+            ]
+        },
+        {
+            group: 'Watchlist & Wishlist', items: [
+                { type: 'watchlist_new_release', label: 'New Release Found', desc: 'Fires when a watched artist has a new release' },
+                { type: 'watchlist_scan_completed', label: 'Watchlist Scan Done', desc: 'Fires after a full watchlist scan completes' },
+                { type: 'watchlist_artist_added', label: 'Artist Watched', desc: 'Fires when a new artist is added to the watchlist' },
+                { type: 'watchlist_artist_removed', label: 'Artist Unwatched', desc: 'Fires when an artist is removed from the watchlist' },
+                { type: 'wishlist_item_added', label: 'Wishlist Item Added', desc: 'Fires when a new item is added to the wishlist' },
+                { type: 'wishlist_processing_completed', label: 'Wishlist Processed', desc: 'Fires after the wishlist processor completes a run' },
+            ]
+        },
+        {
+            group: 'Playlists', items: [
+                { type: 'playlist_synced', label: 'Playlist Synced', desc: 'Fires when a playlist sync operation completes' },
+                { type: 'playlist_changed', label: 'Playlist Changed', desc: 'Fires when a tracked playlist has changes detected' },
+                { type: 'mirrored_playlist_created', label: 'Playlist Mirrored', desc: 'Fires when a new mirrored playlist is created' },
+                { type: 'discovery_completed', label: 'Discovery Complete', desc: 'Fires when playlist discovery finishes' },
+            ]
+        },
+        {
+            group: 'Library & System', items: [
+                { type: 'app_started', label: 'App Started', desc: 'Fires once when SoulSync starts up' },
+                { type: 'import_completed', label: 'Import Complete', desc: 'Fires when a library import operation finishes' },
+                { type: 'library_scan_completed', label: 'Library Scan Done', desc: 'Fires after a full library scan completes' },
+                { type: 'quality_scan_completed', label: 'Quality Scan Done', desc: 'Fires when a quality scan finishes' },
+                { type: 'duplicate_scan_completed', label: 'Duplicate Scan Done', desc: 'Fires when the duplicate scanner finishes' },
+                { type: 'database_update_completed', label: 'Database Updated', desc: 'Fires after a database update operation' },
+            ]
+        },
+        {
+            group: 'Signals', items: [
+                { type: 'signal_received', label: 'Signal Received', desc: 'Fires when a named signal is emitted by another automation\'s fire_signal THEN action' },
+            ]
+        },
+    ],
+    actions: [
+        {
+            group: 'Downloads & Sync', items: [
+                { type: 'playlist_pipeline', label: 'Playlist Pipeline', desc: 'Full lifecycle: refresh → discover → sync → download missing' },
+                { type: 'process_wishlist', label: 'Process Wishlist', desc: 'Download all pending wishlist items' },
+                { type: 'refresh_mirrored', label: 'Refresh Mirrored', desc: 'Refresh all mirrored playlists from their sources' },
+                { type: 'sync_playlist', label: 'Sync Playlist', desc: 'Sync a specific playlist to your library' },
+                { type: 'discover_playlist', label: 'Discover Playlist', desc: 'Run track discovery on mirrored playlists' },
+                { type: 'scan_watchlist', label: 'Scan Watchlist', desc: 'Check watched artists for new releases' },
+                { type: 'update_discovery_pool', label: 'Update Discovery', desc: 'Refresh the discovery pool with new recommendations' },
+            ]
+        },
+        {
+            group: 'Library Tools', items: [
+                { type: 'scan_library', label: 'Scan Library', desc: 'Full scan of local music library files' },
+                { type: 'start_quality_scan', label: 'Quality Scan', desc: 'Check library tracks for quality issues' },
+                { type: 'start_database_update', label: 'Update Database', desc: 'Run a database update/maintenance operation' },
+                { type: 'backup_database', label: 'Backup Database', desc: 'Create a backup of the music database' },
+            ]
+        },
+        {
+            group: 'Cleanup', items: [
+                { type: 'full_cleanup', label: 'Full Cleanup', desc: 'Run all cleanup tasks: dedup, quarantine, wishlist tidy' },
+                { type: 'run_duplicate_cleaner', label: 'Duplicate Cleaner', desc: 'Find and handle duplicate tracks' },
+                { type: 'clear_quarantine', label: 'Clear Quarantine', desc: 'Remove all quarantined files' },
+                { type: 'cleanup_wishlist', label: 'Clean Wishlist', desc: 'Remove completed/invalid wishlist items' },
+                { type: 'clean_search_history', label: 'Clean Search History', desc: 'Clear old search history entries' },
+                { type: 'clean_completed_downloads', label: 'Clean Downloads', desc: 'Remove completed download records' },
+            ]
+        },
+        {
+            group: 'Other', items: [
+                { type: 'notify_only', label: 'Notify Only', desc: 'No action \u2014 just trigger THEN notifications. Great for testing.' },
+            ]
+        },
+    ],
+    thenActions: [
+        {
+            group: 'Notifications', items: [
+                { type: 'discord_webhook', label: 'Discord Webhook', desc: 'Send a message to a Discord channel via webhook' },
+                { type: 'telegram', label: 'Telegram', desc: 'Send a message to a Telegram chat via bot' },
+                { type: 'pushbullet', label: 'Pushbullet', desc: 'Send a push notification via Pushbullet' },
+            ]
+        },
+        {
+            group: 'Chaining', items: [
+                { type: 'fire_signal', label: 'Fire Signal', desc: 'Emit a named signal that other automations can listen for with signal_received' },
+            ]
+        },
+    ],
+};
+
+// --- Load & Render List ---
+
+// Drag-and-drop state
+let _autoDragState = null;
+let _autoDragEnterCount = 0;
+let _autoDragExpandTimer = null;
+
+function _buildAutomationSection(id, label, automations, useGrid, options = {}) {
+    const groupName = options.groupName || null;
+    const isProtected = options.isProtected || false; // System, Hub sections
+
+    const section = document.createElement('div');
+    section.className = 'automations-section';
+    if (isProtected) section.classList.add('section-protected');
+    section.id = id;
+    if (groupName) section.dataset.groupName = groupName;
+    const collapsed = localStorage.getItem('auto_section_' + id) === '1';
+    if (collapsed) section.classList.add('collapsed');
+
+    const header = document.createElement('div');
+    header.className = 'automations-section-header';
+
+    // Group header actions (rename, bulk toggle, delete) — only for user groups
+    let actionsHtml = '';
+    if (groupName && !isProtected) {
+        const enabledCount = automations.filter(a => a.enabled).length;
+        const allEnabled = enabledCount === automations.length;
+        actionsHtml = `
+            <div class="section-actions" onclick="event.stopPropagation();">
+                <button class="section-action-btn" title="${allEnabled ? 'Disable all' : 'Enable all'}" onclick="_bulkToggleGroup('${_escAttr(groupName)}', ${allEnabled})">
+                    ${allEnabled ? '⏸' : '▶'}
+                </button>
+                <button class="section-action-btn" title="Rename group" onclick="_startRenameGroup('${_escAttr(groupName)}', this)">
+                    ✏️
+                </button>
+                <button class="section-action-btn section-action-danger" title="Delete group" onclick="_deleteGroup('${_escAttr(groupName)}')">
+                    🗑️
+                </button>
+            </div>
+        `;
+    }
+
+    header.innerHTML = `
+        <span class="section-chevron">&#9660;</span>
+        <span class="section-label">${label}</span>
+        <span class="section-count">${automations.length}</span>
+        ${actionsHtml}
+        <span class="section-line"></span>
+    `;
+    header.onclick = (e) => {
+        if (e.target.closest('.section-actions')) return;
+        section.classList.toggle('collapsed');
+        localStorage.setItem('auto_section_' + id, section.classList.contains('collapsed') ? '1' : '0');
+    };
+
+    const body = document.createElement('div');
+    body.className = 'automations-section-body';
+
+    // Drop zone setup (not for protected sections)
+    if (!isProtected) {
+        const dropGroupName = groupName; // null for "My Automations"
+        body.addEventListener('dragover', (e) => {
+            if (!_autoDragState) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'move';
+            body.classList.add('drop-target');
+        });
+        body.addEventListener('dragenter', (e) => {
+            if (!_autoDragState) return;
+            _autoDragEnterCount++;
+            body.classList.add('drop-target');
+            // Expand collapsed sections on drag-hover
+            if (section.classList.contains('collapsed')) {
+                _autoDragExpandTimer = setTimeout(() => {
+                    section.classList.remove('collapsed');
+                }, 500);
+            }
+        });
+        body.addEventListener('dragleave', (e) => {
+            if (!_autoDragState) return;
+            _autoDragEnterCount--;
+            if (_autoDragEnterCount <= 0) {
+                _autoDragEnterCount = 0;
+                body.classList.remove('drop-target');
+                if (_autoDragExpandTimer) { clearTimeout(_autoDragExpandTimer); _autoDragExpandTimer = null; }
+            }
+        });
+        body.addEventListener('drop', async (e) => {
+            e.preventDefault();
+            body.classList.remove('drop-target');
+            _autoDragEnterCount = 0;
+            if (!_autoDragState) return;
+            const draggedId = _autoDragState.id;
+            const fromGroup = _autoDragState.groupName;
+            if (fromGroup === dropGroupName) return; // Same group, no-op
+            try {
+                const res = await fetch('/api/automations/' + draggedId, {
+                    method: 'PUT',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ group_name: dropGroupName })
+                });
+                const data = await res.json();
+                if (data.error) throw new Error(data.error);
+                showToast(dropGroupName ? `Moved to "${dropGroupName}"` : 'Moved to My Automations', 'success');
+                await loadAutomations();
+            } catch (err) { showToast('Error: ' + err.message, 'error'); }
+        });
+    }
+
+    const container = document.createElement('div');
+    container.className = useGrid ? 'automations-grid' : 'automations-user-list';
+    automations.forEach(a => container.appendChild(renderAutomationCard(a)));
+    body.appendChild(container);
+    section.appendChild(header);
+    section.appendChild(body);
+    return section;
+}
+
+/**
+ * Delete a group — ungroups all automations (moves to My Automations).
+ */
+async function _deleteGroup(groupName) {
+    // Collect automation IDs in this group
+    const ids = [];
+    document.querySelectorAll(`.automations-section[data-group-name="${groupName}"] .automation-card`).forEach(card => {
+        if (card.dataset.id) ids.push(parseInt(card.dataset.id));
+    });
+
+    if (ids.length === 0) { await loadAutomations(); return; }
+
+    // Show choice dialog — ungroup or delete all
+    const choice = await _showDeleteGroupDialog(groupName, ids.length);
+    if (!choice) return;
+
+    try {
+        if (choice === 'ungroup') {
+            const res = await fetch('/api/automations/group', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ automation_ids: ids, group_name: null })
+            });
+            const data = await res.json();
+            if (data.error) throw new Error(data.error);
+            showToast(`Dissolved group "${groupName}" — ${data.updated} automations moved to My Automations`, 'success');
+        } else if (choice === 'delete_all') {
+            // Delete each automation
+            let deleted = 0;
+            for (const id of ids) {
+                try {
+                    const res = await fetch('/api/automations/' + id, { method: 'DELETE' });
+                    const data = await res.json();
+                    if (data.success) deleted++;
+                } catch (e) {}
+            }
+            showToast(`Deleted group "${groupName}" and ${deleted} automation${deleted !== 1 ? 's' : ''}`, 'success');
+        }
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+function _showDeleteGroupDialog(groupName, count) {
+    return new Promise((resolve) => {
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        overlay.style.display = 'flex';
+        overlay.onclick = (e) => { if (e.target === overlay) { overlay.remove(); resolve(null); } };
+
+        overlay.innerHTML = `
+            <div class="delete-group-dialog">
+                <div class="delete-group-icon">🗑️</div>
+                <h3 class="delete-group-title">Delete Group "${groupName}"</h3>
+                <p class="delete-group-message">This group contains ${count} automation${count !== 1 ? 's' : ''}. What would you like to do?</p>
+                <div class="delete-group-actions">
+                    <button class="delete-group-btn delete-group-keep" id="dg-ungroup">
+                        Keep Automations — move to My Automations
+                    </button>
+                    <button class="delete-group-btn delete-group-remove" id="dg-delete">
+                        Delete Everything — remove group and all ${count} automation${count !== 1 ? 's' : ''}
+                    </button>
+                    <button class="delete-group-btn delete-group-cancel" id="dg-cancel">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        `;
+
+        overlay.querySelector('#dg-ungroup').onclick = () => { overlay.remove(); resolve('ungroup'); };
+        overlay.querySelector('#dg-delete').onclick = () => { overlay.remove(); resolve('delete_all'); };
+        overlay.querySelector('#dg-cancel').onclick = () => { overlay.remove(); resolve(null); };
+
+        document.addEventListener('keydown', function esc(e) {
+            if (e.key === 'Escape') { overlay.remove(); resolve(null); document.removeEventListener('keydown', esc); }
+        });
+
+        document.body.appendChild(overlay);
+    });
+}
+
+/**
+ * Rename a group — inline edit on the section header label.
+ */
+function _startRenameGroup(groupName, btnEl) {
+    const section = btnEl.closest('.automations-section');
+    const labelEl = section?.querySelector('.section-label');
+    if (!labelEl) return;
+
+    const input = document.createElement('input');
+    input.className = 'section-rename-input';
+    input.value = groupName;
+    input.onclick = (e) => e.stopPropagation();
+
+    const originalText = labelEl.textContent;
+    labelEl.textContent = '';
+    labelEl.appendChild(input);
+    input.focus();
+    input.select();
+
+    const finish = async (save) => {
+        const newName = input.value.trim();
+        input.removeEventListener('blur', blurHandler);
+        if (!save || !newName || newName === groupName) {
+            labelEl.textContent = originalText;
+            return;
+        }
+
+        const ids = [];
+        section.querySelectorAll('.automation-card').forEach(card => {
+            if (card.dataset.id) ids.push(parseInt(card.dataset.id));
+        });
+
+        try {
+            const res = await fetch('/api/automations/group', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ automation_ids: ids, group_name: newName })
+            });
+            const data = await res.json();
+            if (data.error) throw new Error(data.error);
+            showToast(`Renamed to "${newName}"`, 'success');
+            await loadAutomations();
+        } catch (err) {
+            showToast('Error: ' + err.message, 'error');
+            labelEl.textContent = originalText;
+        }
+    };
+
+    input.addEventListener('keydown', (e) => {
+        e.stopPropagation();
+        if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+        if (e.key === 'Escape') { finish(false); }
+    });
+    const blurHandler = () => finish(true);
+    input.addEventListener('blur', blurHandler);
+}
+
+/**
+ * Bulk toggle all automations in a group.
+ */
+async function _bulkToggleGroup(groupName, currentlyAllEnabled) {
+    const ids = [];
+    document.querySelectorAll(`.automations-section[data-group-name="${groupName}"] .automation-card`).forEach(card => {
+        if (card.dataset.id) ids.push(parseInt(card.dataset.id));
+    });
+    if (ids.length === 0) return;
+
+    const targetEnabled = !currentlyAllEnabled;
+    try {
+        const res = await fetch('/api/automations/bulk-toggle', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ automation_ids: ids, enabled: targetEnabled })
+        });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast(`${targetEnabled ? 'Enabled' : 'Disabled'} ${data.updated} automations`, 'success');
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+async function loadAutomations() {
+    const list = document.getElementById('automations-list');
+    const empty = document.getElementById('automations-empty');
+    const statsBar = document.getElementById('automations-stats');
+    if (!list || !empty) return;
+    try {
+        const res = await fetch('/api/automations');
+        const automations = await res.json();
+        if (automations.error) throw new Error(automations.error);
+        if (!automations.length) {
+            list.innerHTML = ''; empty.style.display = '';
+            if (statsBar) statsBar.innerHTML = '';
+            return;
+        }
+        empty.style.display = 'none';
+        list.innerHTML = '';
+
+        const systemAutos = automations.filter(a => a.is_system);
+        const userAutos = automations.filter(a => !a.is_system);
+
+        if (systemAutos.length) {
+            list.appendChild(_buildAutomationSection('auto-section-system', 'System', systemAutos, true, { isProtected: true }));
+        }
+
+        // Automation Hub section
+        list.appendChild(_buildAutomationHub());
+
+        // User automations — split by group
+        const groups = [...new Set(userAutos.filter(a => a.group_name).map(a => a.group_name))].sort();
+        const ungrouped = userAutos.filter(a => !a.group_name);
+        groups.forEach(g => {
+            const groupAutos = userAutos.filter(a => a.group_name === g);
+            if (groupAutos.length) {
+                list.appendChild(_buildAutomationSection('auto-section-group-' + g.replace(/\W+/g, '_'), '\uD83D\uDCC1 ' + g, groupAutos, true, { groupName: g }));
+            }
+        });
+        if (ungrouped.length) {
+            list.appendChild(_buildAutomationSection('auto-section-custom', 'My Automations', ungrouped, true));
+        }
+
+        // Stats summary bar
+        if (statsBar) {
+            const total = automations.length;
+            const active = automations.filter(a => a.enabled).length;
+            const sys = systemAutos.length;
+            const custom = userAutos.length;
+            statsBar.innerHTML = `
+                <span class="auto-stat"><strong>${active}</strong> Active</span>
+                <span class="auto-stat"><strong>${sys}</strong> System</span>
+                <span class="auto-stat"><strong>${custom}</strong> Custom</span>
+            `;
+        }
+
+        // Filter bar — show when 6+ automations
+        _initAutoFilterBar(automations);
+        // Catch up on current automation progress
+        try {
+            const progRes = await fetch('/api/automations/progress');
+            const progData = await progRes.json();
+            if (!progData.error) updateAutomationProgressFromData(progData);
+        } catch (e) { }
+    } catch (err) {
+        list.innerHTML = ''; empty.style.display = '';
+        if (statsBar) statsBar.innerHTML = '';
+    }
+}
+
+// --- Automation Hub ---
+
+function _buildAutomationHub() {
+    const section = document.createElement('div');
+    section.className = 'automations-section';
+    section.id = 'auto-section-hub';
+    const collapsed = localStorage.getItem('auto_section_auto-section-hub') === '1';
+    if (collapsed) section.classList.add('collapsed');
+    const header = document.createElement('div');
+    header.className = 'automations-section-header';
+    header.innerHTML = `
+        <span class="section-chevron">&#9660;</span>
+        <span class="section-label">Automation Hub</span>
+        <span class="section-count">${AUTO_HUB_GROUPS.length} pipelines · ${AUTO_HUB_RECIPES.length} recipes</span>
+        <span class="section-line"></span>
+    `;
+    header.onclick = () => {
+        section.classList.toggle('collapsed');
+        localStorage.setItem('auto_section_auto-section-hub', section.classList.contains('collapsed') ? '1' : '0');
+    };
+    const body = document.createElement('div');
+    body.className = 'automations-section-body';
+
+    const activeTab = localStorage.getItem('auto_hub_tab') || 'pipelines';
+    const tabs = [
+        { id: 'pipelines', label: 'Pipelines' },
+        { id: 'recipes', label: 'Singles' },
+        { id: 'guides', label: 'Quick Start' },
+        { id: 'tips', label: 'Tips' },
+        { id: 'reference', label: 'Reference' },
+    ];
+
+    const tabBar = document.createElement('div');
+    tabBar.className = 'auto-hub-tabs';
+    tabs.forEach(t => {
+        const btn = document.createElement('button');
+        btn.className = 'auto-hub-tab' + (t.id === activeTab ? ' active' : '');
+        btn.textContent = t.label;
+        btn.dataset.tab = t.id;
+        btn.onclick = (e) => { e.stopPropagation(); _switchHubTab(t.id, body); };
+        tabBar.appendChild(btn);
+    });
+    body.appendChild(tabBar);
+
+    // Build all tab contents
+    const pipelinesPane = _buildHubPipelines();
+    pipelinesPane.id = 'auto-hub-pane-pipelines';
+    pipelinesPane.className = 'auto-hub-tab-content' + (activeTab === 'pipelines' ? ' active' : '');
+    body.appendChild(pipelinesPane);
+
+    const recipesPane = _buildHubRecipes();
+    recipesPane.id = 'auto-hub-pane-recipes';
+    recipesPane.className = 'auto-hub-tab-content' + (activeTab === 'recipes' ? ' active' : '');
+    body.appendChild(recipesPane);
+
+    const guidesPane = _buildHubGuides();
+    guidesPane.id = 'auto-hub-pane-guides';
+    guidesPane.className = 'auto-hub-tab-content' + (activeTab === 'guides' ? ' active' : '');
+    body.appendChild(guidesPane);
+
+    const tipsPane = _buildHubTips();
+    tipsPane.id = 'auto-hub-pane-tips';
+    tipsPane.className = 'auto-hub-tab-content' + (activeTab === 'tips' ? ' active' : '');
+    body.appendChild(tipsPane);
+
+    const refPane = _buildHubReference();
+    refPane.id = 'auto-hub-pane-reference';
+    refPane.className = 'auto-hub-tab-content' + (activeTab === 'reference' ? ' active' : '');
+    body.appendChild(refPane);
+
+    section.appendChild(header);
+    section.appendChild(body);
+    return section;
+}
+
+function _switchHubTab(tabId, bodyEl) {
+    const container = bodyEl || document.querySelector('#auto-section-hub .automations-section-body');
+    if (!container) return;
+    container.querySelectorAll('.auto-hub-tab').forEach(t => t.classList.toggle('active', t.dataset.tab === tabId));
+    container.querySelectorAll('.auto-hub-tab-content').forEach(p => p.classList.toggle('active', p.id === 'auto-hub-pane-' + tabId));
+    localStorage.setItem('auto_hub_tab', tabId);
+}
+
+function _buildHubPipelines() {
+    const pane = document.createElement('div');
+
+    const intro = document.createElement('div');
+    intro.className = 'auto-hub-pipeline-intro';
+    intro.innerHTML = 'One-click deployment — each pipeline creates multiple linked automations that work together.';
+    pane.appendChild(intro);
+
+    const grid = document.createElement('div');
+    grid.className = 'auto-hub-pipeline-grid';
+
+    AUTO_HUB_GROUPS.forEach(group => {
+        const card = document.createElement('div');
+        card.className = 'auto-hub-pipeline-card';
+        card.style.setProperty('--pipeline-color', group.color);
+
+        // Pipeline flow visualization
+        const stepsHtml = group.steps.map((step, i) => {
+            const nodeClass = step.type === 'notify' ? 'pipeline-node-notify' : 'pipeline-node-action';
+            return (i > 0 ? '<span class="pipeline-connector"></span>' : '') +
+                `<div class="pipeline-node ${nodeClass}">
+                    <span class="pipeline-node-icon">${step.icon}</span>
+                    <span class="pipeline-node-label">${step.label}</span>
+                </div>`;
+        }).join('');
+
+        card.innerHTML = `
+            <div class="pipeline-card-top">
+                <span class="pipeline-card-icon">${group.icon}</span>
+                <div class="pipeline-card-title-row">
+                    <div class="pipeline-card-name">${group.name}</div>
+                    <span class="pipeline-card-badge">${group.badge}</span>
+                </div>
+            </div>
+            <div class="pipeline-card-desc">${group.desc}</div>
+            <div class="pipeline-flow">${stepsHtml}</div>
+            <div class="pipeline-card-footer">
+                <button class="pipeline-deploy-btn" onclick="event.stopPropagation(); deployHubGroup('${group.id}')">Deploy Pipeline</button>
+            </div>
+        `;
+
+        card.addEventListener('click', (e) => {
+            if (e.target.closest('.pipeline-deploy-btn')) return;
+            showPipelineDetail(group.id);
+        });
+
+        grid.appendChild(card);
+    });
+
+    pane.appendChild(grid);
+    return pane;
+}
+
+function showPipelineDetail(groupId) {
+    const group = AUTO_HUB_GROUPS.find(g => g.id === groupId);
+    if (!group) return;
+
+    // Build automation detail list
+    const autoDetails = group.automations.map((auto, i) => {
+        const triggerLabel = _autoFormatTrigger(auto.trigger_type, auto.trigger_config);
+        const actionLabel = _autoFormatAction(auto.action_type);
+        const thenLabels = auto.then_actions.map(t => {
+            if (t.type === 'fire_signal') return `⚡ Signal: ${t.config.signal_name}`;
+            return _autoFormatNotify(t.type);
+        });
+        if (auto.needs_notify) thenLabels.push('🔔 Your notification');
+
+        return `
+            <div class="pipeline-detail-auto" style="--step-color: ${group.color}">
+                <div class="pipeline-detail-step-num">${i + 1}</div>
+                <div class="pipeline-detail-step-body">
+                    <div class="pipeline-detail-step-name">${auto.name}</div>
+                    <div class="pipeline-detail-step-flow">
+                        <span class="pipeline-detail-tag when">WHEN</span>
+                        <span class="pipeline-detail-tag-value">${_esc(triggerLabel)}</span>
+                        <span class="pipeline-detail-tag do">DO</span>
+                        <span class="pipeline-detail-tag-value">${_esc(actionLabel)}</span>
+                        ${thenLabels.length ? `<span class="pipeline-detail-tag then">THEN</span><span class="pipeline-detail-tag-value">${thenLabels.map(t => _esc(t)).join(', ')}</span>` : ''}
+                    </div>
+                </div>
+            </div>`;
+    }).join('');
+
+    // Build flow diagram
+    const flowHtml = group.steps.map((step, i) => {
+        const nodeClass = step.type === 'notify' ? 'pipeline-node-notify' : 'pipeline-node-action';
+        return (i > 0 ? '<span class="pipeline-connector"></span>' : '') +
+            `<div class="pipeline-node ${nodeClass}">
+                <span class="pipeline-node-icon">${step.icon}</span>
+                <span class="pipeline-node-label">${step.label}</span>
+            </div>`;
+    }).join('');
+
+    const overlay = document.createElement('div');
+    overlay.className = 'pipeline-detail-overlay';
+    overlay.innerHTML = `
+        <div class="pipeline-detail-modal" style="--pipeline-color: ${group.color}">
+            <button class="pipeline-detail-close" onclick="this.closest('.pipeline-detail-overlay').remove()">&times;</button>
+            <div class="pipeline-detail-header">
+                <span class="pipeline-detail-icon">${group.icon}</span>
+                <div>
+                    <div class="pipeline-detail-title">${group.name}</div>
+                    <div class="pipeline-detail-desc">${group.desc}</div>
+                </div>
+            </div>
+            <div class="pipeline-detail-flow" style="--pipeline-color: ${group.color}">${flowHtml}</div>
+            <div class="pipeline-detail-section-title">How It Works</div>
+            <div class="pipeline-detail-section-desc">This pipeline deploys ${group.automations.length} automations${group.automations.some(a => a.then_actions.some(t => t.type === 'fire_signal')) ? ' linked by signals — each step triggers the next automatically' : ' running on independent schedules'}.</div>
+            <div class="pipeline-detail-autos">${autoDetails}</div>
+            <button class="pipeline-deploy-btn" style="--pipeline-color: ${group.color}; margin-top: 8px;" onclick="this.closest('.pipeline-detail-overlay').remove(); deployHubGroup('${group.id}')">Deploy Pipeline</button>
+        </div>
+    `;
+
+    overlay.addEventListener('click', (e) => {
+        if (e.target === overlay) overlay.remove();
+    });
+
+    document.body.appendChild(overlay);
+}
+
+function _buildHubRecipes() {
+    const pane = document.createElement('div');
+    const categories = ['All', 'Sync', 'Discovery', 'Maintenance', 'Alerts', 'Chains'];
+    const difficulties = ['All', 'Beginner', 'Intermediate', 'Advanced'];
+
+    let activeCat = 'All', activeDiff = 'All';
+
+    // Category filters
+    const catFilters = document.createElement('div');
+    catFilters.className = 'auto-hub-filters';
+    categories.forEach(c => {
+        const pill = document.createElement('button');
+        pill.className = 'auto-hub-filter-pill' + (c === 'All' ? ' active' : '');
+        pill.textContent = c;
+        pill.dataset.filter = c;
+        pill.dataset.filterType = 'category';
+        pill.onclick = () => {
+            activeCat = c;
+            catFilters.querySelectorAll('.auto-hub-filter-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === c));
+            filterRecipes();
+        };
+        catFilters.appendChild(pill);
+    });
+    pane.appendChild(catFilters);
+
+    // Difficulty filters
+    const diffFilters = document.createElement('div');
+    diffFilters.className = 'auto-hub-filters';
+    difficulties.forEach(d => {
+        const pill = document.createElement('button');
+        pill.className = 'auto-hub-filter-pill' + (d === 'All' ? ' active' : '');
+        pill.textContent = d;
+        pill.dataset.filter = d;
+        pill.dataset.filterType = 'difficulty';
+        pill.onclick = () => {
+            activeDiff = d;
+            diffFilters.querySelectorAll('.auto-hub-filter-pill').forEach(p => p.classList.toggle('active', p.dataset.filter === d));
+            filterRecipes();
+        };
+        diffFilters.appendChild(pill);
+    });
+    pane.appendChild(diffFilters);
+
+    const grid = document.createElement('div');
+    grid.className = 'auto-hub-recipes-grid';
+
+    AUTO_HUB_RECIPES.forEach(r => {
+        const card = document.createElement('div');
+        card.className = 'auto-hub-recipe-card';
+        card.dataset.category = r.category;
+        card.dataset.difficulty = r.difficulty;
+
+        const trigLabel = _autoFormatTrigger(r.when.type, r.when.config);
+        const actLabel = _autoFormatAction(r.do.type);
+
+        let chainHTML = '';
+        if (r.chain) {
+            chainHTML = '<div class="auto-hub-recipe-chain">' + r.chain.map((step, i) => {
+                let cls = 'flow-action';
+                if (i === 0) cls = 'flow-trigger';
+                else if (step.startsWith('\u26A1')) cls = 'flow-notify';
+                return (i > 0 ? '<span class="flow-arrow">&rarr;</span>' : '') +
+                    `<span class="${cls}">${_esc(step)}</span>`;
+            }).join('') + '</div>';
+        } else {
+            chainHTML = `<div class="auto-hub-recipe-chain">
+                <span class="flow-trigger">${_esc(trigLabel)}</span>
+                <span class="flow-arrow">&rarr;</span>
+                <span class="flow-action">${_esc(actLabel)}</span>
+                ${r.then.length ? r.then.map(th => `<span class="flow-arrow">&rarr;</span><span class="flow-notify">${_esc(_autoFormatNotify(th.type))}</span>`).join('') : ''}
+            </div>`;
+        }
+
+        card.innerHTML = `
+            <div class="auto-hub-recipe-header">
+                <div class="auto-hub-recipe-icon">${r.icon}</div>
+                <div class="auto-hub-recipe-name">${_esc(r.name)}</div>
+                <span class="auto-hub-badge ${r.difficulty}">${_esc(r.difficulty)}</span>
+            </div>
+            <div class="auto-hub-recipe-desc">${_esc(r.desc)}</div>
+            ${chainHTML}
+            ${r.note ? `<div class="auto-hub-recipe-note">${_esc(r.note)}</div>` : ''}
+            <button class="auto-hub-recipe-use" onclick="event.stopPropagation(); useHubRecipe('${r.id}')">Use This</button>
+        `;
+        card.onclick = () => useHubRecipe(r.id);
+        grid.appendChild(card);
+    });
+    pane.appendChild(grid);
+
+    function filterRecipes() {
+        grid.querySelectorAll('.auto-hub-recipe-card').forEach(card => {
+            const catMatch = activeCat === 'All' || card.dataset.category === activeCat;
+            const diffMatch = activeDiff === 'All' || card.dataset.difficulty === activeDiff.toLowerCase();
+            card.style.display = (catMatch && diffMatch) ? '' : 'none';
+        });
+    }
+
+    return pane;
+}
+
+function _buildHubGuides() {
+    const pane = document.createElement('div');
+
+    const callout = document.createElement('div');
+    callout.className = 'auto-hub-callout';
+    callout.innerHTML = '<span class="auto-hub-callout-icon">\uD83D\uDCA1</span><span>Click any guide to expand step-by-step instructions. Related recipes let you jump straight to a pre-filled template.</span>';
+    pane.appendChild(callout);
+
+    AUTO_HUB_GUIDES.forEach(g => {
+        const card = document.createElement('div');
+        card.className = 'auto-hub-guide-card';
+
+        const headerEl = document.createElement('div');
+        headerEl.className = 'auto-hub-guide-header';
+        headerEl.innerHTML = `
+            <span class="auto-hub-guide-icon">${g.icon}</span>
+            <span class="auto-hub-guide-title">${_esc(g.title)}</span>
+            <span class="auto-hub-badge ${g.difficulty}">${_esc(g.difficulty)}</span>
+            <span class="auto-hub-guide-chevron">&#9660;</span>
+        `;
+        headerEl.onclick = () => card.classList.toggle('expanded');
+        card.appendChild(headerEl);
+
+        const bodyEl = document.createElement('div');
+        bodyEl.className = 'auto-hub-guide-body';
+        bodyEl.innerHTML = `
+            <div class="auto-hub-guide-subtitle">${_esc(g.subtitle)}</div>
+            <ol class="auto-hub-steps">${g.steps.map(s => `<li>${s}</li>`).join('')}</ol>
+            ${g.relatedRecipes.length ? `
+                <div class="auto-hub-guide-related">
+                    <span class="auto-hub-guide-related-label">Related:</span>
+                    ${g.relatedRecipes.map(rId => {
+            const recipe = AUTO_HUB_RECIPES.find(r => r.id === rId);
+            return recipe ? `<button class="auto-hub-guide-related-link" onclick="event.stopPropagation(); useHubRecipe('${rId}')">${recipe.icon} ${_esc(recipe.name)}</button>` : '';
+        }).join('')}
+                </div>
+            ` : ''}
+        `;
+        card.appendChild(bodyEl);
+        pane.appendChild(card);
+    });
+
+    return pane;
+}
+
+function _buildHubTips() {
+    const pane = document.createElement('div');
+
+    const callout = document.createElement('div');
+    callout.className = 'auto-hub-callout';
+    callout.innerHTML = '<span class="auto-hub-callout-icon">\u2728</span><span>Power-user tips to get the most out of your automations.</span>';
+    pane.appendChild(callout);
+
+    const grid = document.createElement('div');
+    grid.className = 'auto-hub-tips-grid';
+    AUTO_HUB_TIPS.forEach(t => {
+        const card = document.createElement('div');
+        card.className = 'auto-hub-tip-card';
+        card.innerHTML = `
+            <div class="auto-hub-tip-header">
+                <span class="auto-hub-tip-icon">${t.icon}</span>
+                <span class="auto-hub-tip-title">${_esc(t.title)}</span>
+                <span class="auto-hub-tip-tag">${_esc(t.tag)}</span>
+            </div>
+            <div class="auto-hub-tip-body">${t.body}</div>
+        `;
+        grid.appendChild(card);
+    });
+    pane.appendChild(grid);
+    return pane;
+}
+
+function _buildHubReference() {
+    const pane = document.createElement('div');
+    const sections = [
+        { label: 'Triggers (WHEN)', data: AUTO_HUB_REFERENCE.triggers },
+        { label: 'Actions (DO)', data: AUTO_HUB_REFERENCE.actions },
+        { label: 'Then Actions (THEN)', data: AUTO_HUB_REFERENCE.thenActions },
+    ];
+
+    sections.forEach(sec => {
+        const totalItems = sec.data.reduce((n, g) => n + g.items.length, 0);
+        const group = document.createElement('div');
+        group.className = 'auto-hub-ref-group';
+
+        const header = document.createElement('div');
+        header.className = 'auto-hub-ref-group-header';
+        header.innerHTML = `
+            <span class="auto-hub-ref-group-label">${_esc(sec.label)}</span>
+            <span class="auto-hub-ref-group-count">${totalItems}</span>
+            <span class="auto-hub-ref-chevron">&#9660;</span>
+        `;
+        header.onclick = () => group.classList.toggle('expanded');
+        group.appendChild(header);
+
+        const body = document.createElement('div');
+        body.className = 'auto-hub-ref-body';
+        sec.data.forEach(sub => {
+            body.innerHTML += `<div class="auto-hub-ref-subheader">${_esc(sub.group)}</div>`;
+            let tableHTML = '<table class="auto-hub-table"><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody>';
+            sub.items.forEach(item => {
+                tableHTML += `<tr><td>${_esc(item.label)}</td><td>${_esc(item.desc)}</td></tr>`;
+            });
+            tableHTML += '</tbody></table>';
+            body.innerHTML += tableHTML;
+        });
+        group.appendChild(body);
+        pane.appendChild(group);
+    });
+    return pane;
+}
+
+async function useHubRecipe(recipeId) {
+    const t = AUTO_HUB_RECIPES.find(r => r.id === recipeId);
+    if (!t) return;
+    await showAutomationBuilder();
+    document.getElementById('builder-name').value = t.name;
+    _autoBuilder.when = { type: t.when.type, config: JSON.parse(JSON.stringify(t.when.config)) };
+    _autoBuilder.do = { type: t.do.type, config: JSON.parse(JSON.stringify(t.do.config)) };
+    _autoBuilder.then = t.then.map(th => ({ type: th.type, config: JSON.parse(JSON.stringify(th.config)) }));
+    _renderBuilderSidebar();
+    _renderBuilderCanvas();
+    if (t.note) {
+        showToast(t.note, 'info');
+    }
+}
+
+async function deployHubGroup(groupId) {
+    const group = AUTO_HUB_GROUPS.find(g => g.id === groupId);
+    if (!group) return;
+
+    // Check if any automations need notifications — prompt for config
+    const needsNotify = group.automations.some(a => a.needs_notify);
+    let notifyConfig = null;
+
+    if (needsNotify) {
+        notifyConfig = await _promptNotifyConfig(group.name);
+        if (notifyConfig === null) return; // User cancelled
+        if (notifyConfig === false) notifyConfig = null; // Skip notifications, still deploy
+    }
+
+    // Deploy all automations in the group
+    let created = 0, failed = 0;
+    for (const auto of group.automations) {
+        try {
+            const payload = {
+                name: auto.name,
+                trigger_type: auto.trigger_type,
+                trigger_config: auto.trigger_config,
+                action_type: auto.action_type,
+                action_config: auto.action_config,
+                then_actions: [...auto.then_actions],
+                group_name: auto.group_name,
+                enabled: true,
+            };
+
+            // Inject notification config for automations that need it
+            if (auto.needs_notify && notifyConfig) {
+                payload.then_actions.push(notifyConfig);
+            }
+
+            const response = await fetch('/api/automations', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+
+            if (response.ok) {
+                created++;
+            } else {
+                const err = await response.json();
+                console.error(`Failed to create "${auto.name}":`, err);
+                failed++;
+            }
+        } catch (e) {
+            console.error(`Error creating "${auto.name}":`, e);
+            failed++;
+        }
+    }
+
+    if (created > 0) {
+        showToast(`Deployed "${group.name}" — ${created} automation${created > 1 ? 's' : ''} created${failed ? `, ${failed} failed` : ''}`, 'success');
+        loadAutomations();
+    } else {
+        showToast(`Failed to deploy "${group.name}"`, 'error');
+    }
+}
+
+function _promptNotifyConfig(groupName) {
+    return new Promise(resolve => {
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:10000;display:flex;align-items:center;justify-content:center;';
+
+        overlay.innerHTML = `
+            <div style="background:var(--bg-secondary, #1e1e2e);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:28px;max-width:420px;width:90%;color:var(--text-primary, #fff);font-family:inherit;">
+                <h3 style="margin:0 0 6px;font-size:1.1em;">Configure Notifications</h3>
+                <p style="margin:0 0 18px;font-size:0.85em;opacity:0.5;">${groupName} includes notification steps. Choose how to get notified.</p>
+                <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:18px;">
+                    <label style="font-size:0.85em;opacity:0.7;">Notification Type</label>
+                    <select id="deploy-notify-type" style="padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.9em;">
+                        <option value="discord_webhook">Discord Webhook</option>
+                        <option value="telegram">Telegram</option>
+                        <option value="pushbullet">Pushbullet</option>
+                        <option value="none">Skip Notifications</option>
+                    </select>
+                    <div id="deploy-notify-fields"></div>
+                </div>
+                <div style="display:flex;gap:10px;justify-content:flex-end;">
+                    <button id="deploy-notify-cancel" style="padding:8px 20px;border:1px solid rgba(255,255,255,0.1);border-radius:8px;background:transparent;color:rgba(255,255,255,0.7);cursor:pointer;font-size:0.88em;">Cancel</button>
+                    <button id="deploy-notify-confirm" style="padding:8px 20px;border:none;border-radius:8px;background:var(--accent-color,#1db954);color:#fff;cursor:pointer;font-size:0.88em;font-weight:600;">Deploy</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(overlay);
+
+        const typeSelect = overlay.querySelector('#deploy-notify-type');
+        const fieldsDiv = overlay.querySelector('#deploy-notify-fields');
+
+        function updateFields() {
+            const type = typeSelect.value;
+            if (type === 'discord_webhook') {
+                fieldsDiv.innerHTML = '<input id="deploy-notify-url" type="text" placeholder="Discord Webhook URL" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
+            } else if (type === 'telegram') {
+                fieldsDiv.innerHTML = '<input id="deploy-notify-token" type="text" placeholder="Bot Token" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;"><input id="deploy-notify-chat" type="text" placeholder="Chat ID" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
+            } else if (type === 'pushbullet') {
+                fieldsDiv.innerHTML = '<input id="deploy-notify-token" type="text" placeholder="Access Token" style="width:100%;padding:9px 12px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:8px;color:#fff;font-size:0.88em;margin-top:6px;box-sizing:border-box;">';
+            } else {
+                fieldsDiv.innerHTML = '';
+            }
+        }
+        typeSelect.addEventListener('change', updateFields);
+        updateFields();
+
+        overlay.querySelector('#deploy-notify-cancel').addEventListener('click', () => {
+            document.body.removeChild(overlay);
+            resolve(null);
+        });
+
+        overlay.querySelector('#deploy-notify-confirm').addEventListener('click', () => {
+            const type = typeSelect.value;
+            let config = {};
+            if (type === 'discord_webhook') {
+                config = { webhook_url: (overlay.querySelector('#deploy-notify-url')?.value || '').trim() };
+            } else if (type === 'telegram') {
+                config = { bot_token: (overlay.querySelector('#deploy-notify-token')?.value || '').trim(), chat_id: (overlay.querySelector('#deploy-notify-chat')?.value || '').trim() };
+            } else if (type === 'pushbullet') {
+                config = { access_token: (overlay.querySelector('#deploy-notify-token')?.value || '').trim() };
+            } else {
+                document.body.removeChild(overlay);
+                resolve(false); // Skip notifications but still deploy
+                return;
+            }
+            document.body.removeChild(overlay);
+            resolve({ type, config });
+        });
+
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) { document.body.removeChild(overlay); resolve(null); }
+        });
+    });
+}
+
+// --- Filter Bar ---
+function _initAutoFilterBar(automations) {
+    const bar = document.getElementById('auto-filter-bar');
+    if (!bar) return;
+    if (automations.length < 7) { bar.style.display = 'none'; return; }
+    bar.style.display = '';
+
+    // Populate trigger dropdown
+    const trigSel = document.getElementById('auto-filter-trigger');
+    const actSel = document.getElementById('auto-filter-action');
+    const trigTypes = [...new Set(automations.map(a => a.trigger_type))].sort();
+    const actTypes = [...new Set(automations.map(a => a.action_type))].sort();
+    const prevTrig = trigSel.value;
+    const prevAct = actSel.value;
+    trigSel.innerHTML = '<option value="">All Triggers</option>' + trigTypes.map(t =>
+        `<option value="${_escAttr(t)}">${_esc(_autoFormatTrigger(t, {}))}</option>`).join('');
+    actSel.innerHTML = '<option value="">All Actions</option>' + actTypes.map(t =>
+        `<option value="${_escAttr(t)}">${_esc(_autoFormatAction(t))}</option>`).join('');
+    trigSel.value = prevTrig;
+    actSel.value = prevAct;
+
+    // Bind events (use a flag to avoid double-binding)
+    if (!bar.dataset.bound) {
+        bar.dataset.bound = '1';
+        document.getElementById('auto-filter-search').addEventListener('input', _filterAutomations);
+        trigSel.addEventListener('change', _filterAutomations);
+        actSel.addEventListener('change', _filterAutomations);
+    }
+    _filterAutomations();
+}
+
+function _filterAutomations() {
+    const q = (document.getElementById('auto-filter-search').value || '').toLowerCase().trim();
+    const trigFilter = document.getElementById('auto-filter-trigger').value;
+    const actFilter = document.getElementById('auto-filter-action').value;
+    const cards = document.querySelectorAll('#automations-list .automation-card');
+    let visible = 0;
+    cards.forEach(card => {
+        const name = (card.querySelector('.automation-name')?.textContent || '').toLowerCase();
+        const trig = card.querySelector('.flow-trigger')?.textContent || '';
+        const act = card.querySelector('.flow-action')?.textContent || '';
+        // Match search text against name, trigger label, action label
+        const matchQ = !q || name.includes(q) || trig.toLowerCase().includes(q) || act.toLowerCase().includes(q);
+        // Match trigger/action type filters using data attributes
+        const matchTrig = !trigFilter || card.dataset.triggerType === trigFilter;
+        const matchAct = !actFilter || card.dataset.actionType === actFilter;
+        const show = matchQ && matchTrig && matchAct;
+        card.style.display = show ? '' : 'none';
+        if (show) visible++;
+    });
+    const countEl = document.getElementById('auto-filter-count');
+    if (countEl) {
+        countEl.textContent = (q || trigFilter || actFilter) ? `${visible} of ${cards.length}` : '';
+    }
+}
+
+// --- Group Dropdown ---
+let _activeGroupDropdown = null;
+
+function _showGroupDropdown(event, autoId, currentGroup) {
+    // Close any existing dropdown
+    _closeGroupDropdown();
+
+    const btn = event.currentTarget;
+    const card = btn.closest('.automation-card');
+    if (!card) return;
+
+    // Collect all existing group names from visible cards
+    const allGroups = new Set();
+    document.querySelectorAll('#automations-list .automation-card .automation-group-btn[data-group]').forEach(b => {
+        const g = b.dataset.group;
+        if (g) allGroups.add(g);
+    });
+
+    const dropdown = document.createElement('div');
+    dropdown.className = 'auto-group-dropdown';
+
+    let html = '';
+    if (currentGroup) {
+        html += `<div class="auto-group-option ungroup" onclick="_assignGroup(${autoId}, null)">Remove from group</div>`;
+        html += '<div class="auto-group-divider"></div>';
+    }
+    allGroups.forEach(g => {
+        const isActive = g === currentGroup;
+        html += `<div class="auto-group-option${isActive ? ' active' : ''}" onclick="_assignGroup(${autoId}, '${_escAttr(g)}')">${_esc(g)}</div>`;
+    });
+    if (allGroups.size) html += '<div class="auto-group-divider"></div>';
+    html += `<input class="auto-group-input" placeholder="New group name..." onkeydown="if(event.key==='Enter'){_assignGroup(${autoId}, this.value.trim()); event.preventDefault();}">`;
+
+    dropdown.innerHTML = html;
+
+    // Position dropdown on document.body to avoid overflow:hidden clipping
+    const rect = btn.getBoundingClientRect();
+    dropdown.style.position = 'fixed';
+    dropdown.style.right = (window.innerWidth - rect.right) + 'px';
+    dropdown.style.left = 'auto';
+    document.body.appendChild(dropdown);
+    _activeGroupDropdown = dropdown;
+
+    // Open upward if not enough room below
+    const dropdownHeight = dropdown.offsetHeight;
+    if (rect.bottom + 4 + dropdownHeight > window.innerHeight && rect.top - 4 - dropdownHeight > 0) {
+        dropdown.style.top = (rect.top - 4 - dropdownHeight) + 'px';
+    } else {
+        dropdown.style.top = (rect.bottom + 4) + 'px';
+    }
+
+    // Focus the input
+    setTimeout(() => dropdown.querySelector('.auto-group-input')?.focus(), 50);
+
+    // Close on outside click
+    const handler = (e) => {
+        if (!dropdown.contains(e.target) && e.target !== btn) {
+            _closeGroupDropdown();
+            document.removeEventListener('click', handler, true);
+        }
+    };
+    setTimeout(() => document.addEventListener('click', handler, true), 10);
+}
+
+function _closeGroupDropdown() {
+    if (_activeGroupDropdown) {
+        _activeGroupDropdown.remove();
+        _activeGroupDropdown = null;
+    }
+}
+
+async function _assignGroup(autoId, groupName) {
+    _closeGroupDropdown();
+    try {
+        const res = await fetch('/api/automations/' + autoId, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ group_name: groupName || null })
+        });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast(groupName ? `Moved to "${groupName}"` : 'Removed from group', 'success');
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+function renderAutomationCard(a) {
+    const card = document.createElement('div');
+    card.className = 'automation-card' + (a.enabled ? '' : ' disabled') + (a.is_system ? ' system' : '');
+    card.dataset.id = a.id;
+    card.dataset.triggerType = a.trigger_type || '';
+    card.dataset.actionType = a.action_type || '';
+
+    // Drag-and-drop (non-system only)
+    if (!a.is_system) {
+        card.draggable = true;
+        card.addEventListener('dragstart', (e) => {
+            _autoDragState = { id: a.id, groupName: a.group_name || null };
+            e.dataTransfer.setData('text/plain', String(a.id));
+            e.dataTransfer.effectAllowed = 'move';
+            card.classList.add('dragging');
+            // Dim protected sections during drag
+            document.querySelectorAll('.section-protected').forEach(s => s.classList.add('no-drop'));
+        });
+        card.addEventListener('dragend', () => {
+            card.classList.remove('dragging');
+            _autoDragState = null;
+            _autoDragEnterCount = 0;
+            document.querySelectorAll('.drop-target').forEach(el => el.classList.remove('drop-target'));
+            document.querySelectorAll('.no-drop').forEach(el => el.classList.remove('no-drop'));
+            if (_autoDragExpandTimer) { clearTimeout(_autoDragExpandTimer); _autoDragExpandTimer = null; }
+        });
+    }
+    const tIcon = _autoIcons[a.trigger_type] || '\u2699\uFE0F';
+    const aIcon = _autoIcons[a.action_type] || '\u2699\uFE0F';
+    const tl = tIcon + ' ' + _autoFormatTrigger(a.trigger_type, a.trigger_config);
+    const al = aIcon + ' ' + _autoFormatAction(a.action_type);
+    const thenItems = a.then_actions || [];
+    const actionDelay = a.action_config && a.action_config.delay ? a.action_config.delay : 0;
+    const metaParts = [];
+    if (a.last_run) metaParts.push('Last: ' + _autoTimeAgo(a.last_run));
+    const _timerTriggers = ['schedule', 'daily_time', 'weekly_time'];
+    if (a.next_run && a.enabled && _timerTriggers.includes(a.trigger_type)) metaParts.push('<span class="auto-next-run" data-next="' + _escAttr(a.next_run) + '">Next: ' + _autoTimeUntil(a.next_run) + '</span>');
+    if (!_timerTriggers.includes(a.trigger_type) && a.enabled) metaParts.push('Listening');
+    if (a.run_count) metaParts.push('<span class="auto-runs-link" onclick="event.stopPropagation(); showAutomationHistory(' + a.id + ', \'' + _escAttr(a.name) + '\', \'' + _escAttr(a.action_type || '') + '\')" title="View run history">Runs: ' + a.run_count + '</span>');
+    if (a.last_error) metaParts.push('Error: ' + _esc(a.last_error));
+
+    const dupeBtn = a.is_system ? '' :
+        `<button class="automation-dupe-btn" title="Duplicate" onclick="event.stopPropagation(); duplicateAutomation(${a.id})">&#128203;</button>`;
+    const groupBtn = a.is_system ? '' :
+        `<button class="automation-group-btn${a.group_name ? ' grouped' : ''}" data-group="${_escAttr(a.group_name || '')}" title="${a.group_name ? 'Group: ' + _escAttr(a.group_name) : 'Assign group'}" onclick="event.stopPropagation(); _showGroupDropdown(event, ${a.id}, ${a.group_name ? "'" + _escAttr(a.group_name) + "'" : 'null'})">&#128193;</button>`;
+    const deleteBtn = a.is_system ? '' :
+        `<button class="automation-delete-btn" title="Delete" onclick="event.stopPropagation(); deleteAutomation(${a.id}, '${_escAttr(a.name)}')">&#128465;</button>`;
+
+    card.innerHTML = `
+        <div class="automation-status ${a.enabled ? 'enabled' : 'disabled'}"></div>
+        <div class="automation-info">
+            <div class="automation-name">${_esc(a.name)}</div>
+            <div class="automation-flow">
+                <span class="flow-trigger">${_esc(tl)}</span>
+                <span class="flow-arrow">&rarr;</span>
+                ${actionDelay ? `<span class="flow-delay">\u23F3 ${actionDelay}m</span><span class="flow-arrow">&rarr;</span>` : ''}
+                <span class="flow-action">${_esc(al)}</span>
+                ${thenItems.length ? thenItems.map(t => `<span class="flow-arrow">&rarr;</span><span class="flow-notify">${_esc(_autoFormatNotify(t.type))}</span>`).join('') : ''}
+            </div>
+            <div class="automation-meta">${metaParts.join(' &middot; ')}</div>
+        </div>
+        <div class="automation-actions">
+            <button class="automation-run-btn" title="Run now" onclick="event.stopPropagation(); runAutomation(${a.id})">&#9654;</button>
+            <label class="automation-toggle" onclick="event.stopPropagation();">
+                <input type="checkbox" ${a.enabled ? 'checked' : ''} onchange="toggleAutomation(${a.id})">
+                <span class="toggle-slider"></span>
+            </label>
+            <button class="automation-edit-btn" title="Edit" onclick="event.stopPropagation(); showAutomationBuilder(${a.id})">&#9881;</button>
+            ${dupeBtn}
+            ${groupBtn}
+            ${deleteBtn}
+        </div>
+    `;
+    return card;
+}
+
+function _autoFormatTrigger(type, config) {
+    if (type === 'schedule' && config) return 'Every ' + (config.interval || 1) + ' ' + (config.unit || 'hours');
+    if (type === 'daily_time' && config) return 'Daily at ' + (config.time || '00:00');
+    if (type === 'weekly_time' && config) {
+        const days = (config.days || []).map(d => d.charAt(0).toUpperCase() + d.slice(1)).join(', ');
+        return (days || 'Every day') + ' at ' + (config.time || '00:00');
+    }
+    if (type === 'signal_received' && config) {
+        const sig = config.signal_name || 'unknown';
+        return 'Signal: ' + sig;
+    }
+    const labels = {
+        app_started: 'App Started', track_downloaded: 'Track Downloaded', batch_complete: 'Batch Complete',
+        watchlist_new_release: 'New Release Found', playlist_synced: 'Playlist Synced',
+        playlist_changed: 'Playlist Changed', discovery_completed: 'Discovery Complete',
+        wishlist_processing_completed: 'Wishlist Processed', watchlist_scan_completed: 'Watchlist Scan Done',
+        database_update_completed: 'Database Updated', download_failed: 'Download Failed',
+        download_quarantined: 'File Quarantined', wishlist_item_added: 'Wishlist Item Added',
+        watchlist_artist_added: 'Artist Watched', watchlist_artist_removed: 'Artist Unwatched',
+        import_completed: 'Import Complete', mirrored_playlist_created: 'Playlist Mirrored',
+        quality_scan_completed: 'Quality Scan Done', duplicate_scan_completed: 'Duplicate Scan Done',
+        library_scan_completed: 'Library Scan Done', signal_received: 'Signal Received'
+    };
+    let label = labels[type] || type || 'Unknown';
+    if (config && config.conditions && config.conditions.length) {
+        const first = config.conditions[0];
+        label += ' (' + first.field + ' ' + first.operator + ' "' + first.value + '"' +
+            (config.conditions.length > 1 ? ' +' + (config.conditions.length - 1) + ' more' : '') + ')';
+    }
+    return label;
+}
+function _autoFormatAction(type) {
+    const labels = {
+        process_wishlist: 'Process Wishlist', scan_watchlist: 'Scan Watchlist',
+        scan_library: 'Scan Library', refresh_mirrored: 'Refresh Mirrored',
+        sync_playlist: 'Sync Playlist', discover_playlist: 'Discover Playlist',
+        notify_only: 'Notify Only',
+        start_database_update: 'Update Database', run_duplicate_cleaner: 'Run Duplicate Cleaner',
+        clear_quarantine: 'Clear Quarantine', cleanup_wishlist: 'Clean Up Wishlist',
+        update_discovery_pool: 'Update Discovery', start_quality_scan: 'Run Quality Scan',
+        backup_database: 'Backup Database',
+        refresh_beatport_cache: 'Refresh Beatport Cache', clean_search_history: 'Clean Search History',
+        clean_completed_downloads: 'Clean Completed Downloads',
+        full_cleanup: 'Full Cleanup',
+        playlist_pipeline: 'Playlist Pipeline'
+    };
+    return labels[type] || type || 'Unknown';
+}
+function _autoFormatNotify(type) {
+    if (type === 'discord_webhook') return 'Discord';
+    if (type === 'pushbullet') return 'Pushbullet';
+    if (type === 'telegram') return 'Telegram';
+    if (type === 'fire_signal') return '\u26A1 Signal';
+    if (type === 'run_script') return '\uD83D\uDCBB Script';
+    return type || '';
+}
+function _autoParseUTC(ts) {
+    // If timestamp already has timezone info (+00:00 or Z), parse as-is; otherwise append Z to treat as UTC
+    if (/[Zz]$/.test(ts) || /[+-]\d{2}:\d{2}$/.test(ts)) return new Date(ts).getTime();
+    return new Date(ts + 'Z').getTime();
+}
+function _autoTimeAgo(ts) {
+    if (!ts) return 'Never';
+    const d = (Date.now() - _autoParseUTC(ts)) / 1000;
+    if (d < 60) return 'just now'; if (d < 3600) return Math.floor(d / 60) + 'm ago';
+    if (d < 86400) return Math.floor(d / 3600) + 'h ago'; return Math.floor(d / 86400) + 'd ago';
+}
+function _autoTimeUntil(ts) {
+    if (!ts) return '';
+    const d = (_autoParseUTC(ts) - Date.now()) / 1000;
+    if (d <= 0) return 'soon'; if (d < 60) return 'in ' + Math.ceil(d) + 's';
+    if (d < 3600) return 'in ' + Math.ceil(d / 60) + 'm'; if (d < 86400) return 'in ' + Math.round(d / 3600) + 'h';
+    return 'in ' + Math.round(d / 86400) + 'd';
+}
+
+// --- Live countdown for "Next: in Xs" ---
+setInterval(() => {
+    document.querySelectorAll('.auto-next-run[data-next]').forEach(el => {
+        el.textContent = 'Next: ' + _autoTimeUntil(el.dataset.next);
+    });
+}, 1000);
+
+// --- CRUD ---
+
+async function deleteAutomation(id, name) {
+    if (!await showConfirmDialog({ title: 'Delete Automation', message: `Delete automation "${name}"?`, confirmText: 'Delete', destructive: true })) return;
+    try {
+        const res = await fetch('/api/automations/' + id, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast('Automation deleted', 'success');
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+async function duplicateAutomation(id) {
+    try {
+        const res = await fetch('/api/automations/' + id + '/duplicate', { method: 'POST' });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast('Automation duplicated', 'success');
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+async function toggleAutomation(id) {
+    try {
+        const res = await fetch('/api/automations/' + id + '/toggle', { method: 'POST' });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+// --- Automation Progress Tracking ---
+const _autoProgressLogCounts = {};
+const _autoProgressHideTimers = {};
+
+function updateAutomationProgressFromData(data) {
+    for (const [aidStr, state] of Object.entries(data)) {
+        const aid = parseInt(aidStr);
+        const card = document.querySelector(`.automation-card[data-id="${aid}"]`);
+        if (!card) continue;
+
+        let panel = card.querySelector('.automation-output');
+        if (!panel) {
+            panel = document.createElement('div');
+            panel.className = 'automation-output';
+            panel.innerHTML = `
+                <div class="auto-progress-bar-wrap"><div class="auto-progress-bar" style="width:0%"></div></div>
+                <div class="auto-progress-phase"></div>
+                <div class="auto-progress-log"></div>
+            `;
+            card.appendChild(panel);
+            _autoProgressLogCounts[aid] = 0;
+        }
+
+        // Update progress bar
+        const bar = panel.querySelector('.auto-progress-bar');
+        bar.style.width = (state.progress || 0) + '%';
+
+        // Update phase text
+        const phaseEl = panel.querySelector('.auto-progress-phase');
+        phaseEl.textContent = state.phase || '';
+
+        // Status indicator on card
+        const statusDot = card.querySelector('.automation-status');
+
+        if (state.status === 'running') {
+            if (statusDot) statusDot.className = 'automation-status running';
+            card.classList.add('running');
+            panel.classList.add('visible');
+            panel.classList.remove('finished', 'error');
+            if (_autoProgressHideTimers[aid]) {
+                clearTimeout(_autoProgressHideTimers[aid]);
+                delete _autoProgressHideTimers[aid];
+            }
+            // Reset log for new run (handles re-run within hide window)
+            if (_autoProgressLogCounts[aid] > 0 && state.log && state.log.length < _autoProgressLogCounts[aid]) {
+                const existingLog = panel.querySelector('.auto-progress-log');
+                if (existingLog) existingLog.innerHTML = '';
+                _autoProgressLogCounts[aid] = 0;
+            }
+        } else if (state.status === 'finished' || state.status === 'error') {
+            if (statusDot) statusDot.className = 'automation-status ' + (card.querySelector('input[type=checkbox]')?.checked ? 'enabled' : 'disabled');
+            card.classList.remove('running');
+            bar.style.width = '100%';
+            panel.classList.add('finished');
+            if (state.status === 'error') panel.classList.add('error');
+            if (!_autoProgressHideTimers[aid]) {
+                _autoProgressHideTimers[aid] = setTimeout(() => {
+                    panel.classList.remove('visible');
+                    delete _autoProgressHideTimers[aid];
+                    _autoProgressLogCounts[aid] = 0;
+                }, 30000);
+            }
+        }
+
+        // Update log lines
+        const logEl = panel.querySelector('.auto-progress-log');
+        const rendered = _autoProgressLogCounts[aid] || 0;
+        const logLines = state.log || [];
+        if (logLines.length > rendered) {
+            // Normal append — log is still growing
+            for (let i = rendered; i < logLines.length; i++) {
+                const line = logLines[i];
+                const div = document.createElement('div');
+                div.className = 'auto-log-line ' + (line.type || 'info');
+                div.textContent = line.text;
+                logEl.appendChild(div);
+            }
+            _autoProgressLogCounts[aid] = logLines.length;
+            logEl.scrollTop = logEl.scrollHeight;
+        } else if (logLines.length === rendered && logLines.length >= 50) {
+            // Log buffer is full and rotating — replace last few lines
+            const children = logEl.children;
+            if (children.length > 0) {
+                const lastServerLine = logLines[logLines.length - 1];
+                const lastDomLine = children[children.length - 1];
+                if (lastServerLine && lastDomLine.textContent !== lastServerLine.text) {
+                    // Content changed — full re-render
+                    logEl.innerHTML = '';
+                    for (const line of logLines) {
+                        const div = document.createElement('div');
+                        div.className = 'auto-log-line ' + (line.type || 'info');
+                        div.textContent = line.text;
+                        logEl.appendChild(div);
+                    }
+                    _autoProgressLogCounts[aid] = logLines.length;
+                    logEl.scrollTop = logEl.scrollHeight;
+                }
+            }
+        }
+    }
+}
+
+async function runAutomation(id) {
+    try {
+        const res = await fetch('/api/automations/' + id + '/run', { method: 'POST' });
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast('Automation triggered', 'success');
+        setTimeout(() => loadAutomations(), 1500);
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+const _RESULT_DISPLAY_MAP = {
+    'start_database_update': [
+        { key: 'artists', label: 'Artists' },
+        { key: 'albums', label: 'Albums' },
+        { key: 'tracks', label: 'Tracks' },
+        { key: 'removed_artists', label: 'Removed Artists', hideZero: true },
+        { key: 'removed_albums', label: 'Removed Albums', hideZero: true },
+        { key: 'removed_tracks', label: 'Removed Tracks', hideZero: true },
+    ],
+    'deep_scan_library': [
+        { key: 'artists', label: 'Artists' },
+        { key: 'albums', label: 'Albums' },
+        { key: 'tracks', label: 'Tracks' },
+        { key: 'removed_artists', label: 'Removed Artists', hideZero: true },
+        { key: 'removed_albums', label: 'Removed Albums', hideZero: true },
+        { key: 'removed_tracks', label: 'Removed Tracks', hideZero: true },
+    ],
+    'scan_watchlist': [
+        { key: 'artists_scanned', label: 'Artists Scanned' },
+        { key: 'successful_scans', label: 'Successful' },
+        { key: 'new_tracks_found', label: 'New Tracks' },
+        { key: 'tracks_added_to_wishlist', label: 'Added to Wishlist' },
+    ],
+    'run_duplicate_cleaner': [
+        { key: 'files_scanned', label: 'Files Scanned' },
+        { key: 'duplicates_found', label: 'Duplicates Found' },
+        { key: 'files_deleted', label: 'Files Deleted' },
+        { key: 'space_freed_mb', label: 'Space Freed (MB)' },
+    ],
+    'start_quality_scan': [
+        { key: 'tracks_scanned', label: 'Tracks Scanned' },
+        { key: 'quality_met', label: 'Quality Met' },
+        { key: 'low_quality', label: 'Low Quality' },
+        { key: 'matched', label: 'Added to Wishlist' },
+    ],
+    'scan_library': [
+        { key: 'scan_duration_seconds', label: 'Duration (s)' },
+    ],
+    'backup_database': [
+        { key: 'size_mb', label: 'Backup Size (MB)' },
+    ],
+    'refresh_mirrored': [
+        { key: 'refreshed', label: 'Playlists Refreshed' },
+        { key: 'errors', label: 'Errors', hideZero: true },
+    ],
+    'clear_quarantine': [
+        { key: 'removed', label: 'Items Removed' },
+    ],
+    'cleanup_wishlist': [
+        { key: 'removed', label: 'Duplicates Removed' },
+    ],
+    'full_cleanup': [
+        { key: 'quarantine_removed', label: 'Quarantine Removed' },
+        { key: 'staging_removed', label: 'Import Dirs Removed' },
+        { key: 'total_removed', label: 'Total Items Removed' },
+    ],
+    'playlist_pipeline': [
+        { key: 'playlists_refreshed', label: 'Refreshed' },
+        { key: 'tracks_discovered', label: 'Discovered' },
+        { key: 'tracks_synced', label: 'Synced' },
+        { key: 'sync_skipped', label: 'Skipped', hideZero: true },
+        { key: 'wishlist_queued', label: 'Wishlist Queued' },
+        { key: 'duration_seconds', label: 'Duration (s)' },
+    ],
+};
+
+function _renderResultStats(resultJson, actionType) {
+    if (!resultJson || typeof resultJson !== 'object') return '';
+    var fields = _RESULT_DISPLAY_MAP[actionType];
+    var items = [];
+    if (fields) {
+        fields.forEach(function (f) {
+            var val = resultJson[f.key];
+            if (val == null) return;
+            if (f.hideZero && (val === 0 || val === '0')) return;
+            items.push({ label: f.label, value: val });
+        });
+    } else {
+        // Generic fallback: show all non-status, non-underscore keys
+        Object.keys(resultJson).forEach(function (k) {
+            if (k === 'status' || k.startsWith('_')) return;
+            var label = k.replace(/_/g, ' ').replace(/\b\w/g, function (c) { return c.toUpperCase(); });
+            items.push({ label: label, value: resultJson[k] });
+        });
+    }
+    if (items.length === 0) return '';
+    var html = '<div class="history-stats-grid">';
+    items.forEach(function (it) {
+        html += '<div class="history-stat-item"><div class="history-stat-label">' + _esc(it.label) + '</div><div class="history-stat-value">' + _esc(String(it.value)) + '</div></div>';
+    });
+    html += '</div>';
+    return html;
+}
+
+async function showAutomationHistory(automationId, automationName, actionType) {
+    let modal = document.getElementById('automation-history-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'automation-history-modal';
+        modal.className = 'modal-overlay';
+        document.body.appendChild(modal);
+    }
+    modal.innerHTML = '<div class="modal-container automation-history-modal"><div class="history-modal-header"><h3>Run History: ' + _esc(automationName) + '</h3><button class="history-close-btn" onclick="document.getElementById(\'automation-history-modal\').style.display=\'none\'">&times;</button></div><div class="history-modal-body"><div class="history-loading">Loading...</div></div></div>';
+    modal.style.display = 'flex';
+    modal.onclick = function (e) { if (e.target === modal) modal.style.display = 'none'; };
+
+    try {
+        const res = await fetch('/api/automations/' + automationId + '/history?limit=50');
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        const body = modal.querySelector('.history-modal-body');
+        if (!data.history || data.history.length === 0) {
+            body.innerHTML = '<div class="history-empty">No run history yet. History will be recorded on future runs.</div>';
+            return;
+        }
+        let html = '<div class="history-entries">';
+        data.history.forEach(function (entry) {
+            const statusClass = 'history-status-' + (entry.status || 'completed');
+            const statusLabel = (entry.status || 'completed').charAt(0).toUpperCase() + (entry.status || 'completed').slice(1);
+            const timeAgo = _autoTimeAgo(entry.started_at);
+            const duration = entry.duration_seconds != null ? _formatDuration(entry.duration_seconds) : '';
+            const summary = entry.summary ? _esc(entry.summary) : '';
+            const hasLogs = entry.log_lines && entry.log_lines.length > 0;
+            const entryId = 'history-entry-' + entry.id;
+
+            html += '<div class="history-entry">';
+            html += '<div class="history-entry-header" onclick="var el=document.getElementById(\'' + entryId + '\'); if(el) el.classList.toggle(\'expanded\')">';
+            html += '<span class="history-status-badge ' + statusClass + '">' + statusLabel + '</span>';
+            html += '<span class="history-time">' + timeAgo + '</span>';
+            if (duration) html += '<span class="history-duration">' + duration + '</span>';
+            if (hasLogs) html += '<span class="history-expand-icon">&#9660;</span>';
+            html += '</div>';
+            if (summary) html += '<div class="history-summary">' + summary + '</div>';
+            if (entry.result_json && typeof entry.result_json === 'object') {
+                html += _renderResultStats(entry.result_json, actionType);
+            }
+            if (hasLogs) {
+                html += '<div id="' + entryId + '" class="history-log-section">';
+                entry.log_lines.forEach(function (log) {
+                    html += '<div class="history-log-line history-log-' + (log.type || 'info') + '">' + _esc(log.text || '') + '</div>';
+                });
+                html += '</div>';
+            }
+            html += '</div>';
+        });
+        html += '</div>';
+        if (data.total > data.history.length) {
+            html += '<div class="history-total">Showing ' + data.history.length + ' of ' + data.total + ' runs</div>';
+        }
+        body.innerHTML = html;
+    } catch (err) {
+        const body = modal.querySelector('.history-modal-body');
+        if (body) body.innerHTML = '<div class="history-empty">Error loading history: ' + _esc(err.message) + '</div>';
+    }
+}
+
+function _formatDuration(seconds) {
+    if (seconds < 1) return '<1s';
+    if (seconds < 60) return Math.round(seconds) + 's';
+    var m = Math.floor(seconds / 60);
+    var s = Math.round(seconds % 60);
+    if (m < 60) return m + 'm ' + s + 's';
+    var h = Math.floor(m / 60);
+    m = m % 60;
+    return h + 'h ' + m + 'm';
+}
+
+async function saveAutomation() {
+    const name = document.getElementById('builder-name').value.trim();
+    if (!name) { showToast('Name is required', 'error'); return; }
+    if (!_autoBuilder.when) { showToast('Add a trigger (WHEN)', 'error'); return; }
+    if (!_autoBuilder.do) { showToast('Add an action (DO)', 'error'); return; }
+
+    // Read configs from DOM
+    const triggerConfig = _readPlacedConfig('when');
+    const actionConfig = _readPlacedConfig('do');
+
+    // Read THEN actions (multi-slot)
+    const thenActions = _autoBuilder.then.map((item, i) => ({
+        type: item.type,
+        config: _readPlacedConfig('then-' + i),
+    }));
+
+    // Read optional delay from DO slot
+    const delayEl = document.getElementById('cfg-do-delay');
+    const delayVal = delayEl ? parseInt(delayEl.value) : 0;
+    if (delayVal > 0) actionConfig.delay = delayVal;
+
+    const groupInput = document.getElementById('builder-group-name');
+    const groupName = groupInput ? groupInput.value.trim() : '';
+
+    const body = {
+        name,
+        trigger_type: _autoBuilder.when.type, trigger_config: triggerConfig,
+        action_type: _autoBuilder.do.type, action_config: actionConfig,
+        then_actions: thenActions,
+        group_name: groupName || null,
+    };
+
+    try {
+        let res;
+        if (_autoBuilder.editId) {
+            res = await fetch('/api/automations/' + _autoBuilder.editId, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+        } else {
+            res = await fetch('/api/automations', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+        }
+        const data = await res.json();
+        if (data.error) throw new Error(data.error);
+        showToast(_autoBuilder.editId ? 'Automation updated' : 'Automation created', 'success');
+        hideAutomationBuilder();
+        await loadAutomations();
+    } catch (err) { showToast('Error: ' + err.message, 'error'); }
+}
+
+// --- Builder View ---
+
+async function showAutomationBuilder(editId) {
+    // Load block definitions (always refresh)
+    try {
+        const res = await fetch('/api/automations/blocks');
+        _autoBlocks = await res.json();
+    } catch (e) {
+        if (!_autoBlocks) { showToast('Failed to load blocks', 'error'); return; }
+    }
+
+    _autoMirroredPlaylists = null; // invalidate so it re-fetches
+    _autoSpotifyAuthenticated = false;
+    _autoBuilder = { editId: editId || null, when: null, do: null, then: [], isSystem: false };
+
+    // Populate group datalist from existing automations
+    try {
+        const allRes = await fetch('/api/automations');
+        const allAutos = await allRes.json();
+        const groupSet = new Set();
+        if (Array.isArray(allAutos)) allAutos.forEach(a => { if (a.group_name) groupSet.add(a.group_name); });
+        const datalist = document.getElementById('builder-group-list');
+        if (datalist) datalist.innerHTML = [...groupSet].sort().map(g => `<option value="${_escAttr(g)}">`).join('');
+    } catch (e) { }
+
+    // If editing, load automation data
+    if (editId) {
+        try {
+            const res = await fetch('/api/automations/' + editId);
+            const a = await res.json();
+            if (a.error) throw new Error(a.error);
+            document.getElementById('builder-name').value = a.name || '';
+            const groupInput = document.getElementById('builder-group-name');
+            if (groupInput) groupInput.value = a.group_name || '';
+            _autoBuilder.when = { type: a.trigger_type, config: a.trigger_config || {} };
+            _autoBuilder.do = { type: a.action_type, config: a.action_config || {} };
+            // Load then_actions array
+            _autoBuilder.then = (a.then_actions || []).map(item => ({
+                type: item.type, config: item.config || {}
+            }));
+            // Backward compat: if no then_actions but has notify_type
+            if (!_autoBuilder.then.length && a.notify_type) {
+                _autoBuilder.then = [{ type: a.notify_type, config: a.notify_config || {} }];
+            }
+            _autoBuilder.isSystem = !!a.is_system;
+        } catch (err) { showToast('Failed to load automation', 'error'); return; }
+    } else {
+        document.getElementById('builder-name').value = '';
+        const groupInput = document.getElementById('builder-group-name');
+        if (groupInput) groupInput.value = '';
+    }
+
+    // System automations: lock the name field and hide group
+    document.getElementById('builder-name').readOnly = _autoBuilder.isSystem;
+    const groupEl = document.getElementById('builder-group-name');
+    if (groupEl) groupEl.style.display = _autoBuilder.isSystem ? 'none' : '';
+
+    _renderBuilderSidebar();
+    _renderBuilderCanvas();
+
+    document.getElementById('automations-list-view').style.display = 'none';
+    document.getElementById('automations-builder-view').style.display = '';
+}
+
+function hideAutomationBuilder() {
+    document.getElementById('automations-builder-view').style.display = 'none';
+    document.getElementById('automations-list-view').style.display = '';
+    document.getElementById('builder-name').readOnly = false;
+    _autoBuilder = { editId: null, when: null, do: null, then: [], isSystem: false };
+}
+
+// --- Sidebar ---
+
+function _renderBuilderSidebar() {
+    const sidebar = document.getElementById('builder-sidebar');
+    if (!sidebar || !_autoBlocks) return;
+
+    let html = '';
+    const sections = [
+        { key: 'triggers', title: 'Triggers', slot: 'when' },
+        { key: 'actions', title: 'Actions', slot: 'do' },
+        { key: 'notifications', title: 'Then', slot: 'then' },
+    ];
+
+    sections.forEach(sec => {
+        html += `<div class="sidebar-section"><div class="sidebar-section-title">${sec.title}</div>`;
+        (_autoBlocks[sec.key] || []).forEach(block => {
+            const icon = _autoIcons[block.type] || '\u2699\uFE0F';
+            const disabled = !block.available;
+            const helpKey = 'auto-' + block.type;
+            const hasHelp = !!TOOL_HELP_CONTENT[helpKey];
+            html += `<div class="block-item${disabled ? ' coming-soon' : ''}" ${!disabled ? `draggable="true" ondragstart="_autoDragStart(event,'${block.type}','${sec.slot}')" onclick="_autoClickBlock('${block.type}','${sec.slot}')"` : ''}>
+                <div class="block-item-icon">${icon}</div>
+                <div class="block-item-text">
+                    <div class="block-item-label">${_esc(block.label)}</div>
+                    <div class="block-item-desc">${_esc(block.description)}</div>
+                </div>
+                ${disabled ? '<span class="coming-soon-badge">Soon</span>' : ''}
+                ${hasHelp ? `<button class="tool-help-button block-help-btn" onclick="event.stopPropagation(); openToolHelpModal('${helpKey}')" title="Learn more">?</button>` : ''}
+            </div>`;
+        });
+        html += '</div>';
+    });
+    sidebar.innerHTML = html;
+}
+
+// --- Canvas ---
+
+function _renderBuilderCanvas() {
+    const canvas = document.getElementById('builder-canvas');
+    if (!canvas) return;
+
+    let html = '';
+
+    // WHEN slot
+    const whenData = _autoBuilder.when;
+    html += '<span class="flow-slot-label when">WHEN</span>';
+    if (whenData) {
+        html += `<div class="flow-slot filled" id="slot-when" ondragover="_autoDragOver(event,'when')" ondragleave="_autoDragLeave(event,'when')" ondrop="_autoDrop(event,'when')">
+            ${_renderPlacedBlock('when', whenData)}
+        </div>`;
+    } else {
+        html += `<div class="flow-slot empty" id="slot-when" ondragover="_autoDragOver(event,'when')" ondragleave="_autoDragLeave(event,'when')" ondrop="_autoDrop(event,'when')">
+            <div class="flow-slot-prompt">Drag a trigger here — WHEN does this run?</div>
+        </div>`;
+    }
+
+    html += '<div class="flow-connector"></div>';
+
+    // DO slot
+    const doData = _autoBuilder.do;
+    html += '<span class="flow-slot-label do">DO</span>';
+    if (doData) {
+        html += `<div class="flow-slot filled" id="slot-do" ondragover="_autoDragOver(event,'do')" ondragleave="_autoDragLeave(event,'do')" ondrop="_autoDrop(event,'do')">
+            ${_renderPlacedBlock('do', doData)}
+        </div>`;
+    } else {
+        html += `<div class="flow-slot empty" id="slot-do" ondragover="_autoDragOver(event,'do')" ondragleave="_autoDragLeave(event,'do')" ondrop="_autoDrop(event,'do')">
+            <div class="flow-slot-prompt">Drag an action here — WHAT should it do?</div>
+        </div>`;
+    }
+
+    html += '<div class="flow-connector"></div>';
+
+    // THEN section (multi-slot, 1-3 items)
+    html += '<span class="flow-slot-label then">THEN</span>';
+    if (_autoBuilder.then.length > 0) {
+        _autoBuilder.then.forEach((item, i) => {
+            if (i > 0) html += '<div class="flow-connector small"></div>';
+            html += `<div class="flow-slot filled then-slot" id="slot-then-${i}">
+                ${_renderPlacedBlock('then-' + i, item)}
+            </div>`;
+        });
+    }
+    if (_autoBuilder.then.length < 3) {
+        if (_autoBuilder.then.length > 0) html += '<div class="flow-connector small"></div>';
+        html += `<div class="flow-slot empty then-add" id="slot-then-add"
+            ondragover="_autoDragOver(event,'then')" ondragleave="_autoDragLeave(event,'then')" ondrop="_autoDrop(event,'then')">
+            <div class="flow-slot-prompt">${_autoBuilder.then.length === 0
+                ? 'Drag a then-action here (optional)'
+                : '+ Add another (max 3)'}</div>
+        </div>`;
+    }
+
+    canvas.innerHTML = html;
+    // Load mirrored playlist selects if any are present
+    _autoLoadMirroredSelects();
+    // Set up checkbox state for refresh_mirrored
+    ['when', 'do'].forEach(sk => {
+        const allCb = document.getElementById('cfg-' + sk + '-all');
+        if (allCb) _autoTogglePlaylistSelect(sk);
+    });
+    // Also check then slots
+    _autoBuilder.then.forEach((item, i) => {
+        const allCb = document.getElementById('cfg-then-' + i + '-all');
+        if (allCb) _autoTogglePlaylistSelect('then-' + i);
+    });
+}
+
+function _renderPlacedBlock(slotKey, data) {
+    const blockDef = _findBlockDef(data.type);
+    const icon = _autoIcons[data.type] || '\u2699\uFE0F';
+    const label = blockDef ? blockDef.label : data.type;
+    const configHtml = _renderBlockConfigFields(slotKey, data.type, data.config || {});
+
+    // Add optional delay field for action blocks
+    let delayHtml = '';
+    if (slotKey === 'do') {
+        const delayVal = (data.config && data.config.delay) || '';
+        delayHtml = `<div class="placed-block-config"><div class="config-row">
+            <label>Delay (minutes)</label>
+            <input type="number" id="cfg-${slotKey}-delay" value="${delayVal}" min="0" placeholder="0" style="width:80px;" title="Wait before executing action">
+        </div></div>`;
+    }
+
+    // System automations: lock trigger and action slots (no remove, no replace)
+    const locked = _autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do');
+    const removeBtn = locked ? '' : `<button class="placed-block-remove" onclick="_autoRemoveBlock('${slotKey}')">\u2715</button>`;
+
+    return `<div class="placed-block${locked ? ' locked' : ''}" data-type="${_escAttr(data.type)}">
+        <div class="placed-block-header">
+            <span class="placed-block-icon">${icon}</span>
+            <span class="placed-block-label">${_esc(label)}</span>
+            ${removeBtn}
+        </div>
+        ${configHtml ? '<div class="placed-block-config">' + configHtml + '</div>' : ''}
+        ${delayHtml}
+    </div>`;
+}
+
+function _renderBlockConfigFields(slotKey, blockType, config) {
+    if (blockType === 'schedule') {
+        const interval = config.interval || 6;
+        const unit = config.unit || 'hours';
+        return `<div class="config-row">
+            <label>Every</label>
+            <input type="number" id="cfg-${slotKey}-interval" value="${interval}" min="1" style="width:70px;">
+            <select id="cfg-${slotKey}-unit">
+                <option value="minutes"${unit === 'minutes' ? ' selected' : ''}>Minutes</option>
+                <option value="hours"${unit === 'hours' ? ' selected' : ''}>Hours</option>
+                <option value="days"${unit === 'days' ? ' selected' : ''}>Days</option>
+            </select>
+        </div>`;
+    }
+    if (blockType === 'daily_time') {
+        const timeVal = config.time || '03:00';
+        return `<div class="config-row">
+            <label>At</label>
+            <input type="time" id="cfg-${slotKey}-time" value="${timeVal}">
+        </div>`;
+    }
+    if (blockType === 'weekly_time') {
+        const timeVal = config.time || '03:00';
+        const selectedDays = config.days || [];
+        const allDays = [['mon', 'Mon'], ['tue', 'Tue'], ['wed', 'Wed'], ['thu', 'Thu'], ['fri', 'Fri'], ['sat', 'Sat'], ['sun', 'Sun']];
+        let dayHtml = '<div class="config-row"><label>Days</label><div class="day-picker" id="cfg-' + slotKey + '-days">';
+        allDays.forEach(([val, lbl]) => {
+            const active = selectedDays.includes(val) ? ' active' : '';
+            dayHtml += `<button type="button" class="day-btn${active}" data-day="${val}" onclick="this.classList.toggle('active')">${lbl}</button>`;
+        });
+        dayHtml += '</div></div>';
+        return `<div class="config-row">
+            <label>At</label>
+            <input type="time" id="cfg-${slotKey}-time" value="${timeVal}">
+        </div>${dayHtml}`;
+    }
+
+    // Event triggers with conditions
+    const blockDef = _findBlockDef(blockType);
+    if (blockDef && blockDef.has_conditions) {
+        return _renderConditionBuilder(slotKey, blockDef, config);
+    }
+
+    if (blockType === 'process_wishlist') {
+        const cat = config.category || 'all';
+        return `<div class="config-row">
+            <label>Category</label>
+            <select id="cfg-${slotKey}-category">
+                <option value="all"${cat === 'all' ? ' selected' : ''}>All</option>
+                <option value="albums"${cat === 'albums' ? ' selected' : ''}>Albums</option>
+                <option value="singles"${cat === 'singles' ? ' selected' : ''}>Singles</option>
+            </select>
+        </div>`;
+    }
+    if (blockType === 'signal_received') {
+        const sigName = _escAttr(config.signal_name || '');
+        const knownSignals = (_autoBlocks && _autoBlocks.known_signals) || [];
+        return `<div class="config-row">
+            <label>Signal Name</label>
+            <input type="text" id="cfg-${slotKey}-signal_name" value="${sigName}"
+                list="known-signals-list-${slotKey}" placeholder="e.g. libraryReady"
+                oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9_\\-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '')"
+                style="font-family:monospace;">
+            <datalist id="known-signals-list-${slotKey}">
+                ${knownSignals.map(s => `<option value="${s}">`).join('')}
+            </datalist>
+        </div>
+        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Triggers when another automation fires this signal</div>`;
+    }
+    if (blockType === 'fire_signal') {
+        const sigName = _escAttr(config.signal_name || '');
+        const knownSignals = (_autoBlocks && _autoBlocks.known_signals) || [];
+        return `<div class="config-row">
+            <label>Signal Name</label>
+            <input type="text" id="cfg-${slotKey}-signal_name" value="${sigName}"
+                list="known-signals-fire-${slotKey}" placeholder="e.g. libraryReady"
+                oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9_\\-]/g, '_').replace(/_+/g, '_').replace(/^_|_$/g, '')"
+                style="font-family:monospace;">
+            <datalist id="known-signals-fire-${slotKey}">
+                ${knownSignals.map(s => `<option value="${s}">`).join('')}
+            </datalist>
+        </div>
+        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Other automations with "Signal Received" trigger will wake up</div>`;
+    }
+    if (blockType === 'run_script') {
+        const scriptName = _escAttr(config.script_name || '');
+        const timeout = config.timeout || 60;
+        // Fetch scripts list and populate
+        const selectId = `cfg-${slotKey}-script_name`;
+        setTimeout(async () => {
+            try {
+                const resp = await fetch('/api/scripts');
+                const data = await resp.json();
+                const sel = document.getElementById(selectId);
+                if (sel && data.scripts) {
+                    sel.innerHTML = '<option value="">Select a script...</option>' +
+                        data.scripts.map(s => `<option value="${_escAttr(s.name)}"${s.name === scriptName ? ' selected' : ''}>${escapeHtml(s.name)} (${s.extension})</option>`).join('');
+                }
+            } catch (e) { console.warn('Failed to load scripts:', e); }
+        }, 100);
+        return `<div class="config-row">
+            <label>Script</label>
+            <select id="${selectId}">
+                <option value="${scriptName}">${scriptName || 'Loading...'}</option>
+            </select>
+        </div>
+        <div class="config-row">
+            <label>Timeout</label>
+            <input type="number" id="cfg-${slotKey}-timeout" value="${timeout}" min="5" max="300" style="width:80px;"> seconds
+        </div>
+        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Place scripts in the <code>scripts/</code> folder. Supported: .sh, .py, .bat, .ps1</div>`;
+    }
+    if (blockType === 'scan_watchlist' || blockType === 'scan_library' || blockType === 'notify_only') {
+        return '<div class="config-row" style="color:rgba(255,255,255,0.4);font-size:12px;">No configuration needed</div>';
+    }
+    if (blockType === 'refresh_mirrored') {
+        const allChecked = config.all ? ' checked' : '';
+        return `<div class="config-row">
+            <label>Playlist</label>
+            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-block-type="refresh_mirrored" data-value="${_escAttr(config.playlist_id || '')}">
+                <option value="">Loading...</option>
+            </select>
+        </div>
+        <div class="config-row">
+            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Refresh all mirrored playlists</label>
+        </div>`;
+    }
+    if (blockType === 'sync_playlist') {
+        return `<div class="config-row">
+            <label>Playlist</label>
+            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
+                <option value="">Loading...</option>
+            </select>
+        </div>`;
+    }
+    if (blockType === 'discover_playlist') {
+        const allChecked = config.all ? ' checked' : '';
+        return `<div class="config-row">
+            <label>Playlist</label>
+            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
+                <option value="">Loading...</option>
+            </select>
+        </div>
+        <div class="config-row">
+            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Discover all mirrored playlists</label>
+        </div>`;
+    }
+    if (blockType === 'playlist_pipeline') {
+        const allChecked = config.all ? ' checked' : '';
+        const skipWishlistChecked = config.skip_wishlist ? ' checked' : '';
+        return `<div class="config-row">
+            <label>Playlist</label>
+            <select id="cfg-${slotKey}-playlist_id" class="mirrored-playlist-select" data-value="${_escAttr(config.playlist_id || '')}">
+                <option value="">Loading...</option>
+            </select>
+        </div>
+        <div class="config-row">
+            <label><input type="checkbox" id="cfg-${slotKey}-all"${allChecked} onchange="_autoTogglePlaylistSelect('${slotKey}')"> Process all mirrored playlists</label>
+        </div>
+        <div class="config-row">
+            <label><input type="checkbox" id="cfg-${slotKey}-skip_wishlist"${skipWishlistChecked}> Skip wishlist processing</label>
+        </div>
+        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">Runs 4 phases: Refresh → Discover → Sync → Download Missing</div>`;
+    }
+    // Shared variable tags builder for notification types
+    function _notifyVarHtml(slotKey) {
+        let allVars = ['time', 'name', 'run_count', 'status'];
+        const triggerDef = _autoBuilder.when ? _findBlockDef(_autoBuilder.when.type) : null;
+        if (triggerDef && triggerDef.variables) {
+            triggerDef.variables.forEach(v => { if (!allVars.includes(v)) allVars.push(v); });
+        }
+        let html = '<div class="variable-tags">';
+        allVars.forEach(v => { html += `<span class="variable-tag" onclick="_autoInsertVar('cfg-${slotKey}-message','{${v}}')">{${v}}</span>`; });
+        return html + '</div>';
+    }
+
+    if (blockType === 'discord_webhook') {
+        const url = _escAttr(config.webhook_url || '');
+        return `<div class="config-row">
+            <label>Webhook URL</label>
+            <input type="text" id="cfg-${slotKey}-webhook_url" value="${url}" placeholder="https://discord.com/api/webhooks/...">
+        </div>
+        <div class="config-row">
+            <label>Message</label>
+            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || '{name} completed with status: {status}'}</textarea>
+        </div>
+        ${_notifyVarHtml(slotKey)}`;
+    }
+    if (blockType === 'pushbullet') {
+        const token = _escAttr(config.access_token || '');
+        return `<div class="config-row">
+            <label>Access Token</label>
+            <input type="text" id="cfg-${slotKey}-access_token" value="${token}" placeholder="o.xxxxxxxxxxxxxxxxxxxx">
+        </div>
+        <div class="config-row">
+            <label>Title</label>
+            <input type="text" id="cfg-${slotKey}-title" value="${_escAttr(config.title || '{name}')}" placeholder="Notification title">
+        </div>
+        <div class="config-row">
+            <label>Message</label>
+            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || 'Completed with status: {status}'}</textarea>
+        </div>
+        ${_notifyVarHtml(slotKey)}`;
+    }
+    if (blockType === 'telegram') {
+        const botToken = _escAttr(config.bot_token || '');
+        const chatId = _escAttr(config.chat_id || '');
+        return `<div class="config-row">
+            <label>Bot Token</label>
+            <input type="text" id="cfg-${slotKey}-bot_token" value="${botToken}" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11">
+        </div>
+        <div class="config-row">
+            <label>Chat ID</label>
+            <input type="text" id="cfg-${slotKey}-chat_id" value="${chatId}" placeholder="-1001234567890 or @channelname">
+        </div>
+        <div class="config-row">
+            <label>Message</label>
+            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || '{name} completed with status: {status}'}</textarea>
+        </div>
+        ${_notifyVarHtml(slotKey)}`;
+    }
+    if (blockType === 'webhook') {
+        const url = _escAttr(config.url || '');
+        const hdrs = (config.headers || '').replace(/"/g, '&quot;');
+        return `<div class="config-row">
+            <label>URL</label>
+            <input type="text" id="cfg-${slotKey}-url" value="${url}" placeholder="https://your-server.com/hook">
+        </div>
+        <div class="config-row">
+            <label>Headers <span style="opacity:0.4;font-weight:400">(one per line, Key: Value)</span></label>
+            <textarea id="cfg-${slotKey}-headers" placeholder="Authorization: Bearer token123\nX-Custom: value" style="font-family:monospace;font-size:11px;">${hdrs}</textarea>
+        </div>
+        <div class="config-row">
+            <label>Custom Message <span style="opacity:0.4;font-weight:400">(optional)</span></label>
+            <textarea id="cfg-${slotKey}-message" placeholder="Message with {variables}...">${config.message || ''}</textarea>
+        </div>
+        <div class="config-row" style="color:rgba(255,255,255,0.35);font-size:11px;">
+            Sends a JSON POST with all event variables. Custom message added as "message" field if set.
+        </div>
+        ${_notifyVarHtml(slotKey)}`;
+    }
+    return '';
+}
+
+// --- Condition Builder ---
+
+function _renderConditionBuilder(slotKey, blockDef, config) {
+    const conditions = config.conditions || [];
+    const match = config.match || 'all';
+    const fields = blockDef.condition_fields || [];
+
+    let html = '<div class="condition-builder" id="conditions-' + slotKey + '">';
+    html += `<div class="config-row condition-header">
+        <label>Match</label>
+        <select id="cfg-${slotKey}-match" class="condition-match-select">
+            <option value="all"${match === 'all' ? ' selected' : ''}>All conditions</option>
+            <option value="any"${match === 'any' ? ' selected' : ''}>Any condition</option>
+        </select>
+    </div>`;
+
+    html += '<div id="condition-rows-' + slotKey + '">';
+    if (conditions.length) {
+        conditions.forEach((cond, i) => {
+            html += _renderConditionRow(slotKey, i, fields, cond);
+        });
+    }
+    html += '</div>';
+
+    html += `<button class="add-condition-btn" onclick="_autoAddCondition('${slotKey}')">+ Add Condition</button>`;
+    html += '</div>';
+
+    if (!conditions.length) {
+        html += '<div class="config-row" style="color:rgba(255,255,255,0.35);font-size:12px;margin-top:4px;">No conditions = triggers on every event</div>';
+    }
+
+    return html;
+}
+
+function _renderConditionRow(slotKey, index, fields, cond) {
+    const field = cond ? cond.field : (fields[0] || '');
+    const operator = cond ? cond.operator : 'equals';
+    const value = cond ? _escAttr(cond.value) : '';
+
+    let fieldOpts = '';
+    fields.forEach(f => { fieldOpts += `<option value="${f}"${f === field ? ' selected' : ''}>${f}</option>`; });
+
+    // For playlist-related triggers, use a mirrored playlist dropdown instead of free text
+    const triggerType = _autoBuilder.when ? _autoBuilder.when.type : '';
+    const usePlaylistSelect = ((triggerType === 'playlist_changed' || triggerType === 'discovery_completed') && field === 'playlist_name');
+    const valueHtml = usePlaylistSelect
+        ? `<select class="cond-value mirrored-playlist-name-select" data-slot="${slotKey}" data-idx="${index}" data-value="${value}"></select>`
+        : `<input type="text" class="cond-value" data-slot="${slotKey}" data-idx="${index}" value="${value}" placeholder="value...">`;
+
+    return `<div class="condition-row" data-index="${index}">
+        <select class="cond-field" data-slot="${slotKey}" data-idx="${index}">${fieldOpts}</select>
+        <select class="cond-operator" data-slot="${slotKey}" data-idx="${index}">
+            <option value="equals"${operator === 'equals' ? ' selected' : ''}>equals</option>
+            <option value="contains"${operator === 'contains' ? ' selected' : ''}>contains</option>
+            <option value="starts_with"${operator === 'starts_with' ? ' selected' : ''}>starts with</option>
+            <option value="not_contains"${operator === 'not_contains' ? ' selected' : ''}>not contains</option>
+        </select>
+        ${valueHtml}
+        <button class="remove-condition-btn" onclick="_autoRemoveCondition('${slotKey}',${index})">\u2715</button>
+    </div>`;
+}
+
+function _autoAddCondition(slotKey) {
+    const data = _autoBuilder[slotKey];
+    if (!data) return;
+    if (!data.config) data.config = {};
+    if (!data.config.conditions) data.config.conditions = [];
+
+    // Save existing conditions from DOM before re-render
+    _autoSaveConditionsFromDOM(slotKey);
+
+    const blockDef = _findBlockDef(data.type);
+    const fields = blockDef ? (blockDef.condition_fields || []) : [];
+    data.config.conditions.push({ field: fields[0] || '', operator: 'contains', value: '' });
+    _renderBuilderCanvas();
+    // Re-populate mirrored playlist selects if needed
+    _autoLoadMirroredSelects();
+}
+
+function _autoRemoveCondition(slotKey, index) {
+    const data = _autoBuilder[slotKey];
+    if (!data || !data.config || !data.config.conditions) return;
+    _autoSaveConditionsFromDOM(slotKey);
+    data.config.conditions.splice(index, 1);
+    _renderBuilderCanvas();
+    _autoLoadMirroredSelects();
+}
+
+function _autoSaveConditionsFromDOM(slotKey) {
+    const data = _autoBuilder[slotKey];
+    if (!data || !data.config) return;
+    const container = document.getElementById('condition-rows-' + slotKey);
+    if (!container) return;
+    const rows = container.querySelectorAll('.condition-row');
+    const conditions = [];
+    rows.forEach(row => {
+        const field = row.querySelector('.cond-field')?.value || '';
+        const operator = row.querySelector('.cond-operator')?.value || 'contains';
+        const value = row.querySelector('.cond-value')?.value || '';
+        conditions.push({ field, operator, value });
+    });
+    data.config.conditions = conditions;
+    // Also save match mode
+    const matchEl = document.getElementById('cfg-' + slotKey + '-match');
+    if (matchEl) data.config.match = matchEl.value;
+}
+
+// --- Mirrored Playlist Select ---
+
+function _autoTogglePlaylistSelect(slotKey) {
+    const allCb = document.getElementById('cfg-' + slotKey + '-all');
+    const sel = document.getElementById('cfg-' + slotKey + '-playlist_id');
+    if (sel) sel.disabled = allCb && allCb.checked;
+}
+
+async function _autoLoadMirroredSelects() {
+    const selects = document.querySelectorAll('.mirrored-playlist-select');
+    const nameSelects = document.querySelectorAll('.mirrored-playlist-name-select');
+    if (!selects.length && !nameSelects.length) return;
+
+    if (!_autoMirroredPlaylists) {
+        try {
+            const res = await fetch('/api/mirrored-playlists/list');
+            const data = await res.json();
+            // New format returns { playlists, spotify_authenticated }
+            if (Array.isArray(data)) {
+                // Backward compat: old format was plain array
+                _autoMirroredPlaylists = data;
+                _autoSpotifyAuthenticated = false;
+            } else {
+                _autoMirroredPlaylists = data.playlists || [];
+                _autoSpotifyAuthenticated = data.spotify_authenticated || false;
+            }
+        } catch (e) { _autoMirroredPlaylists = []; _autoSpotifyAuthenticated = false; }
+    }
+
+    selects.forEach(sel => {
+        const savedValue = sel.dataset.value || '';
+        const isRefresh = sel.dataset.blockType === 'refresh_mirrored';
+        sel.innerHTML = '<option value="">-- Select playlist --</option>';
+        _autoMirroredPlaylists.forEach(p => {
+            // For refresh selects: hide file playlists, hide spotify (library) if not authed
+            if (isRefresh) {
+                if (p.source === 'file' || p.source === 'beatport') return;
+                if (p.source === 'spotify' && !_autoSpotifyAuthenticated) return;
+            }
+            sel.innerHTML += `<option value="${p.id}"${String(p.id) === savedValue ? ' selected' : ''}>${_esc(p.name)}</option>`;
+        });
+    });
+
+    nameSelects.forEach(sel => {
+        const savedValue = sel.dataset.value || '';
+        sel.innerHTML = '<option value="">-- Select playlist --</option>';
+        _autoMirroredPlaylists.forEach(p => {
+            sel.innerHTML += `<option value="${_escAttr(p.name)}"${p.name === savedValue ? ' selected' : ''}>${_esc(p.name)}</option>`;
+        });
+    });
+}
+
+function _readPlacedConfig(slotKey) {
+    let data;
+    if (slotKey.startsWith('then-')) {
+        const idx = parseInt(slotKey.split('-')[1]);
+        data = _autoBuilder.then[idx];
+    } else {
+        data = _autoBuilder[slotKey];
+    }
+    if (!data) return {};
+    const type = data.type;
+    if (type === 'schedule') {
+        return {
+            interval: parseInt(document.getElementById('cfg-' + slotKey + '-interval')?.value) || 6,
+            unit: document.getElementById('cfg-' + slotKey + '-unit')?.value || 'hours',
+        };
+    }
+    if (type === 'daily_time') {
+        return { time: document.getElementById('cfg-' + slotKey + '-time')?.value || '03:00' };
+    }
+    if (type === 'weekly_time') {
+        const daysEl = document.getElementById('cfg-' + slotKey + '-days');
+        const days = daysEl ? Array.from(daysEl.querySelectorAll('.day-btn.active')).map(b => b.dataset.day) : [];
+        return {
+            time: document.getElementById('cfg-' + slotKey + '-time')?.value || '03:00',
+            days,
+        };
+    }
+    // Event triggers with conditions
+    const blockDef = _findBlockDef(type);
+    if (blockDef && blockDef.has_conditions) {
+        _autoSaveConditionsFromDOM(slotKey);
+        return {
+            conditions: (data.config && data.config.conditions) || [],
+            match: document.getElementById('cfg-' + slotKey + '-match')?.value || 'all',
+        };
+    }
+    if (type === 'process_wishlist') {
+        return { category: document.getElementById('cfg-' + slotKey + '-category')?.value || 'all' };
+    }
+    if (type === 'refresh_mirrored') {
+        const allCb = document.getElementById('cfg-' + slotKey + '-all');
+        return {
+            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
+            all: allCb ? allCb.checked : false,
+        };
+    }
+    if (type === 'sync_playlist') {
+        return { playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '' };
+    }
+    if (type === 'discover_playlist') {
+        const allCb = document.getElementById('cfg-' + slotKey + '-all');
+        return {
+            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
+            all: allCb ? allCb.checked : false,
+        };
+    }
+    if (type === 'playlist_pipeline') {
+        const allCb = document.getElementById('cfg-' + slotKey + '-all');
+        const skipWl = document.getElementById('cfg-' + slotKey + '-skip_wishlist');
+        return {
+            playlist_id: document.getElementById('cfg-' + slotKey + '-playlist_id')?.value || '',
+            all: allCb ? allCb.checked : false,
+            skip_wishlist: skipWl ? skipWl.checked : false,
+        };
+    }
+    if (type === 'signal_received' || type === 'fire_signal') {
+        return { signal_name: document.getElementById('cfg-' + slotKey + '-signal_name')?.value?.trim() || '' };
+    }
+    if (type === 'run_script') {
+        return {
+            script_name: document.getElementById('cfg-' + slotKey + '-script_name')?.value || '',
+            timeout: parseInt(document.getElementById('cfg-' + slotKey + '-timeout')?.value || '60') || 60,
+        };
+    }
+    if (type === 'discord_webhook') {
+        return {
+            webhook_url: document.getElementById('cfg-' + slotKey + '-webhook_url')?.value?.trim() || '',
+            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
+        };
+    }
+    if (type === 'pushbullet') {
+        return {
+            access_token: document.getElementById('cfg-' + slotKey + '-access_token')?.value?.trim() || '',
+            title: document.getElementById('cfg-' + slotKey + '-title')?.value || '',
+            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
+        };
+    }
+    if (type === 'telegram') {
+        return {
+            bot_token: document.getElementById('cfg-' + slotKey + '-bot_token')?.value?.trim() || '',
+            chat_id: document.getElementById('cfg-' + slotKey + '-chat_id')?.value?.trim() || '',
+            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
+        };
+    }
+    if (type === 'webhook') {
+        return {
+            url: document.getElementById('cfg-' + slotKey + '-url')?.value?.trim() || '',
+            headers: document.getElementById('cfg-' + slotKey + '-headers')?.value || '',
+            message: document.getElementById('cfg-' + slotKey + '-message')?.value || '',
+        };
+    }
+    return {};
+}
+
+function _findBlockDef(type) {
+    if (!_autoBlocks) return null;
+    for (const cat of ['triggers', 'actions', 'notifications']) {
+        const found = (_autoBlocks[cat] || []).find(b => b.type === type);
+        if (found) return found;
+    }
+    return null;
+}
+
+// --- Drag & Drop ---
+
+function _autoDragStart(e, blockType, slotCategory) {
+    e.dataTransfer.setData('text/plain', JSON.stringify({ type: blockType, slot: slotCategory }));
+    e.dataTransfer.effectAllowed = 'copy';
+}
+
+function _autoDragOver(e, slotKey) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    const targetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
+    document.getElementById(targetId)?.classList.add('drag-over');
+}
+
+function _autoDragLeave(e, slotKey) {
+    const targetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
+    document.getElementById(targetId)?.classList.remove('drag-over');
+}
+
+function _autoDrop(e, slotKey) {
+    e.preventDefault();
+    const dropTargetId = slotKey === 'then' ? 'slot-then-add' : 'slot-' + slotKey;
+    document.getElementById(dropTargetId)?.classList.remove('drag-over');
+    if (_autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do')) return;
+    try {
+        const data = JSON.parse(e.dataTransfer.getData('text/plain'));
+        // Handle THEN slot (append to array)
+        if (slotKey === 'then') {
+            if (data.slot !== 'then') { showToast('Wrong slot — drop ' + data.slot + ' blocks here', 'error'); return; }
+            if (_autoBuilder.then.length >= 3) { showToast('Maximum 3 then-actions', 'error'); return; }
+            _autoBuilder.then.push({ type: data.type, config: {} });
+        } else {
+            if (data.slot !== slotKey) { showToast('Wrong slot — drop ' + data.slot + ' blocks here', 'error'); return; }
+            _autoBuilder[slotKey] = { type: data.type, config: {} };
+        }
+        _renderBuilderCanvas();
+    } catch (err) { }
+}
+
+// Click-to-add (alternative to drag)
+function _autoClickBlock(blockType, slotCategory) {
+    if (_autoBuilder.isSystem && (slotCategory === 'when' || slotCategory === 'do')) return;
+    if (slotCategory === 'then') {
+        if (_autoBuilder.then.length >= 3) { showToast('Maximum 3 then-actions', 'error'); return; }
+        _autoBuilder.then.push({ type: blockType, config: {} });
+    } else {
+        _autoBuilder[slotCategory] = { type: blockType, config: {} };
+    }
+    _renderBuilderCanvas();
+}
+
+function _autoRemoveBlock(slotKey) {
+    if (_autoBuilder.isSystem && (slotKey === 'when' || slotKey === 'do')) return;
+    // Handle then-N slots
+    if (slotKey.startsWith('then-')) {
+        const idx = parseInt(slotKey.split('-')[1]);
+        if (!isNaN(idx) && idx >= 0 && idx < _autoBuilder.then.length) {
+            _autoBuilder.then.splice(idx, 1);
+        }
+    } else {
+        _autoBuilder[slotKey] = null;
+    }
+    _renderBuilderCanvas();
+}
+
+// Variable insertion
+function _autoInsertVar(textareaId, variable) {
+    const el = document.getElementById(textareaId);
+    if (!el) return;
+    const start = el.selectionStart, end = el.selectionEnd;
+    el.value = el.value.substring(0, start) + variable + el.value.substring(end);
+    el.selectionStart = el.selectionEnd = start + variable.length;
+    el.focus();
+}
+
+// ===== ISSUES PAGE =====
+
+const ISSUE_CATEGORIES = {
+    wrong_track: { label: 'Wrong Track', icon: '&#10060;', description: 'This file plays a completely different song than expected', applies: ['track'] },
+    wrong_metadata: { label: 'Wrong Metadata', icon: '&#9998;', description: 'Title, artist, year, or other tags are incorrect', applies: ['track', 'album'] },
+    wrong_cover: { label: 'Wrong Cover Art', icon: '&#128247;', description: 'The album artwork is wrong or missing', applies: ['album'] },
+    wrong_artist: { label: 'Wrong Artist', icon: '&#128100;', description: 'This track is filed under the wrong artist', applies: ['track'] },
+    duplicate_tracks: { label: 'Duplicate Tracks', icon: '&#128257;', description: 'The same track appears more than once in this album', applies: ['album'] },
+    missing_tracks: { label: 'Missing Tracks', icon: '&#10067;', description: 'Tracks that should be here are missing from this album', applies: ['album'] },
+    audio_quality: { label: 'Audio Quality', icon: '&#127925;', description: 'Audio has quality issues — clipping, low bitrate, silence, etc.', applies: ['track'] },
+    wrong_album: { label: 'Wrong Album', icon: '&#128191;', description: 'This track belongs to a different album', applies: ['track'] },
+    incomplete_album: { label: 'Incomplete Album', icon: '&#9888;', description: 'Album is partially downloaded — some tracks present, others not', applies: ['album'] },
+    other: { label: 'Other', icon: '&#128172;', description: 'Any other issue not listed above', applies: ['track', 'album'] },
+};
+
+const ISSUE_STATUS_META = {
+    open: { label: 'Open', cls: 'issue-status-open' },
+    in_progress: { label: 'In Progress', cls: 'issue-status-progress' },
+    resolved: { label: 'Resolved', cls: 'issue-status-resolved' },
+    dismissed: { label: 'Dismissed', cls: 'issue-status-dismissed' },
+};
+
+let _issuesPageState = { loaded: false };
+
+function _issueHeaders(extra) {
+    const h = { 'X-Profile-Id': String(currentProfile ? currentProfile.id : 1) };
+    if (extra) Object.assign(h, extra);
+    return h;
+}
+
+async function loadIssuesPage() {
+    const admin = isEnhancedAdmin();
+    const subtitle = document.getElementById('issues-subtitle');
+    if (subtitle) {
+        subtitle.textContent = admin ? 'Manage and resolve reported library problems' : 'Track and resolve library problems';
+    }
+    await Promise.all([loadIssuesList(), loadIssuesCounts()]);
+}
+
+async function loadIssuesCounts() {
+    try {
+        const resp = await fetch('/api/issues/counts', { headers: _issueHeaders() });
+        const data = await resp.json();
+        if (!data.success) return;
+        const counts = data.counts;
+        const statsEl = document.getElementById('issues-stats');
+        if (!statsEl) return;
+        const total = (counts.open || 0) + (counts.in_progress || 0) + (counts.resolved || 0) + (counts.dismissed || 0);
+        statsEl.innerHTML = `
+            <div class="issues-stat-card issues-stat-open">
+                <div class="issues-stat-number">${counts.open || 0}</div>
+                <div class="issues-stat-label">Open</div>
+            </div>
+            <div class="issues-stat-card issues-stat-progress">
+                <div class="issues-stat-number">${counts.in_progress || 0}</div>
+                <div class="issues-stat-label">In Progress</div>
+            </div>
+            <div class="issues-stat-card issues-stat-resolved">
+                <div class="issues-stat-number">${counts.resolved || 0}</div>
+                <div class="issues-stat-label">Resolved</div>
+            </div>
+            <div class="issues-stat-card issues-stat-dismissed">
+                <div class="issues-stat-number">${counts.dismissed || 0}</div>
+                <div class="issues-stat-label">Dismissed</div>
+            </div>
+            <div class="issues-stat-card issues-stat-total">
+                <div class="issues-stat-number">${total}</div>
+                <div class="issues-stat-label">Total</div>
+            </div>
+        `;
+        // Update nav badge
+        const badge = document.getElementById('issues-nav-badge');
+        if (badge) {
+            const openCount = counts.open || 0;
+            badge.textContent = openCount;
+            badge.classList.toggle('hidden', openCount === 0);
+        }
+    } catch (e) {
+        console.error('Failed to load issue counts:', e);
+    }
+}
+
+async function loadIssuesList() {
+    const listEl = document.getElementById('issues-list');
+    if (!listEl) return;
+    listEl.innerHTML = '<div class="issues-loading"><div class="issues-spinner"></div>Loading issues...</div>';
+
+    const statusFilter = document.getElementById('issues-filter-status')?.value || '';
+    const categoryFilter = document.getElementById('issues-filter-category')?.value || '';
+
+    let url = '/api/issues?';
+    if (statusFilter) url += `status=${encodeURIComponent(statusFilter)}&`;
+    if (categoryFilter) url += `category=${encodeURIComponent(categoryFilter)}&`;
+
+    try {
+        const profileId = currentProfile ? currentProfile.id : 1;
+        const resp = await fetch(url, { headers: { 'X-Profile-Id': String(profileId) } });
+        const data = await resp.json();
+        if (!data.success || !data.issues || data.issues.length === 0) {
+            listEl.innerHTML = `
+                <div class="issues-empty">
+                    <div class="issues-empty-icon">&#128269;</div>
+                    <div class="issues-empty-title">No issues found</div>
+                    <div class="issues-empty-text">${statusFilter || categoryFilter ? 'Try adjusting your filters' : 'No issues have been reported yet'}</div>
+                </div>
+            `;
+            return;
+        }
+        listEl.innerHTML = '';
+        data.issues.forEach(issue => {
+            listEl.appendChild(renderIssueCard(issue));
+        });
+    } catch (e) {
+        console.error('Failed to load issues:', e);
+        listEl.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Failed to load issues</div></div>';
+    }
+}
+
+function renderIssueCard(issue) {
+    const card = document.createElement('div');
+    card.className = 'issue-card';
+    card.dataset.issueId = issue.id;
+    card.onclick = () => showIssueDetailModal(issue.id);
+
+    const catMeta = ISSUE_CATEGORIES[issue.category] || ISSUE_CATEGORIES.other;
+    const statusMeta = ISSUE_STATUS_META[issue.status] || ISSUE_STATUS_META.open;
+    const admin = isEnhancedAdmin();
+
+    let snapshot = {};
+    try { snapshot = typeof issue.snapshot_data === 'string' ? JSON.parse(issue.snapshot_data || '{}') : (issue.snapshot_data || {}); } catch (e) { }
+
+    const entityLabel = issue.entity_type === 'track' ? 'Track' : (issue.entity_type === 'album' ? 'Album' : 'Artist');
+    const entityName = snapshot.title || snapshot.name || `${entityLabel} #${issue.entity_id}`;
+    const artistName = snapshot.artist_name || '';
+    const albumName = snapshot.album_title || '';
+    const thumbUrl = snapshot.thumb_url || snapshot.album_thumb || '';
+
+    const createdDate = issue.created_at ? new Date(issue.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '';
+    const createdTime = issue.created_at ? new Date(issue.created_at).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }) : '';
+
+    // Priority indicator
+    const priorityCls = issue.priority === 'high' ? 'issue-priority-high' : (issue.priority === 'low' ? 'issue-priority-low' : 'issue-priority-normal');
+
+    let thumbHtml = '';
+    if (thumbUrl) {
+        thumbHtml = `<img class="issue-card-thumb" src="${_escAttr(thumbUrl)}" alt="" onerror="this.style.display='none'">`;
+    } else {
+        thumbHtml = `<div class="issue-card-thumb-placeholder">${catMeta.icon}</div>`;
+    }
+
+    let metaLine = '';
+    if (issue.entity_type === 'track') {
+        metaLine = [artistName, albumName].filter(Boolean).map(s => _esc(s)).join(' &mdash; ');
+    } else if (issue.entity_type === 'album') {
+        metaLine = artistName ? _esc(artistName) : '';
+    }
+
+    let profileBadge = '';
+    if (admin && issue.reporter_name) {
+        profileBadge = `<span class="issue-card-profile">by ${_esc(issue.reporter_name)}</span>`;
+    }
+
+    let adminResponseIndicator = '';
+    if (issue.admin_response) {
+        adminResponseIndicator = '<span class="issue-card-responded" title="Admin has responded">&#128172;</span>';
+    }
+
+    card.innerHTML = `
+        <div class="issue-card-left">
+            ${thumbHtml}
+        </div>
+        <div class="issue-card-center">
+            <div class="issue-card-title-row">
+                <span class="issue-card-category-icon" title="${_escAttr(catMeta.label)}">${catMeta.icon}</span>
+                <span class="issue-card-title">${_esc(issue.title)}</span>
+                ${adminResponseIndicator}
+            </div>
+            <div class="issue-card-entity">
+                <span class="issue-card-entity-type">${_esc(entityLabel)}</span>
+                <span class="issue-card-entity-name">${_esc(entityName)}</span>
+                ${metaLine ? `<span class="issue-card-meta-line">${metaLine}</span>` : ''}
+            </div>
+            ${issue.description ? `<div class="issue-card-description">${_esc(issue.description)}</div>` : ''}
+            <div class="issue-card-footer">
+                <span class="issue-card-date">${_esc(createdDate)} ${_esc(createdTime)}</span>
+                ${profileBadge}
+            </div>
+        </div>
+        <div class="issue-card-right">
+            <span class="issue-status-badge ${statusMeta.cls}">${_esc(statusMeta.label)}</span>
+            <span class="issue-priority-dot ${priorityCls}" title="${_esc(issue.priority)} priority"></span>
+        </div>
+    `;
+    return card;
+}
+
+// --- Report Issue Modal ---
+
+let _reportIssueState = {};
+
+function showReportIssueModal(entityType, entityId, entityName, artistName, albumTitle) {
+    _reportIssueState = { entityType, entityId, entityName, artistName, albumTitle: albumTitle || '' };
+    const overlay = document.getElementById('report-issue-overlay');
+    const titleEl = document.getElementById('report-issue-title');
+    const body = document.getElementById('report-issue-body');
+    if (!overlay || !body) return;
+
+    const entityLabel = entityType === 'track' ? 'Track' : (entityType === 'album' ? 'Album' : 'Artist');
+    titleEl.textContent = `Report Issue — ${entityLabel}`;
+
+    body.innerHTML = `
+        <div class="report-issue-entity-info">
+            <div class="report-issue-entity-name">${_esc(entityName)}</div>
+            ${artistName ? `<div class="report-issue-entity-artist">${_esc(artistName)}${albumTitle ? ' &mdash; ' + _esc(albumTitle) : ''}</div>` : ''}
+        </div>
+        <div class="report-issue-section">
+            <label class="report-issue-label">What's the problem?</label>
+            <div class="report-issue-category-grid" id="report-issue-categories">
+                ${Object.entries(ISSUE_CATEGORIES)
+            .filter(([, cat]) => !cat.applies || cat.applies.includes(entityType))
+            .map(([key, cat]) => `
+                    <div class="report-issue-category-card" data-category="${_escAttr(key)}" onclick="selectIssueCategory(this, '${_escAttr(key)}')">
+                        <div class="report-issue-category-icon">${cat.icon}</div>
+                        <div class="report-issue-category-label">${_esc(cat.label)}</div>
+                        <div class="report-issue-category-desc">${_esc(cat.description)}</div>
+                    </div>
+                `).join('')}
+            </div>
+        </div>
+        <div class="report-issue-section" id="report-issue-details-section" style="display:none">
+            <label class="report-issue-label">Title</label>
+            <input type="text" class="report-issue-input" id="report-issue-input-title" placeholder="Brief summary of the issue..." maxlength="200" oninput="event.target._userEdited = true">
+            <label class="report-issue-label" style="margin-top:12px">Details <span class="report-issue-optional">(optional)</span></label>
+            <textarea class="report-issue-textarea" id="report-issue-input-desc" placeholder="Provide more details about what's wrong — what you expected vs what you see..." rows="4" maxlength="2000"></textarea>
+            <label class="report-issue-label" style="margin-top:12px">Priority</label>
+            <div class="report-issue-priority-row">
+                <button class="report-issue-priority-btn" data-priority="low" onclick="selectIssuePriority(this, 'low')">Low</button>
+                <button class="report-issue-priority-btn selected" data-priority="normal" onclick="selectIssuePriority(this, 'normal')">Normal</button>
+                <button class="report-issue-priority-btn" data-priority="high" onclick="selectIssuePriority(this, 'high')">High</button>
+            </div>
+        </div>
+    `;
+
+    _reportIssueState.selectedCategory = null;
+    _reportIssueState.selectedPriority = 'normal';
+    const submitBtn = document.getElementById('report-issue-submit-btn');
+    if (submitBtn) submitBtn.disabled = true;
+
+    overlay.classList.remove('hidden');
+}
+
+function selectIssueCategory(el, category) {
+    document.querySelectorAll('.report-issue-category-card').forEach(c => c.classList.remove('selected'));
+    el.classList.add('selected');
+    _reportIssueState.selectedCategory = category;
+
+    const detailsSection = document.getElementById('report-issue-details-section');
+    if (detailsSection) detailsSection.style.display = '';
+
+    // Auto-generate title based on category
+    const titleInput = document.getElementById('report-issue-input-title');
+    const catMeta = ISSUE_CATEGORIES[category];
+    if (titleInput && !titleInput._userEdited) {
+        const entityName = _reportIssueState.entityName || '';
+        titleInput.value = `${catMeta.label}: ${entityName}`;
+    }
+
+    const submitBtn = document.getElementById('report-issue-submit-btn');
+    if (submitBtn) submitBtn.disabled = false;
+}
+
+function selectIssuePriority(el, priority) {
+    document.querySelectorAll('.report-issue-priority-btn').forEach(b => b.classList.remove('selected'));
+    el.classList.add('selected');
+    _reportIssueState.selectedPriority = priority;
+}
+
+function closeReportIssueModal() {
+    const overlay = document.getElementById('report-issue-overlay');
+    if (overlay) overlay.classList.add('hidden');
+    _reportIssueState = {};
+}
+
+async function submitIssue() {
+    if (_reportIssueState._submitting) return;
+    const category = _reportIssueState.selectedCategory;
+    if (!category) {
+        showToast('Please select an issue category', 'error');
+        return;
+    }
+
+    const titleInput = document.getElementById('report-issue-input-title');
+    const descInput = document.getElementById('report-issue-input-desc');
+    const title = (titleInput?.value || '').trim();
+    const description = (descInput?.value || '').trim();
+
+    if (!title) {
+        showToast('Please provide a title for the issue', 'error');
+        return;
+    }
+
+    _reportIssueState._submitting = true;
+    const submitBtn = document.getElementById('report-issue-submit-btn');
+    if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Submitting...';
+    }
+
+    try {
+        const resp = await fetch('/api/issues', {
+            method: 'POST',
+            headers: _issueHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({
+                profile_id: currentProfile ? currentProfile.id : 1,
+                entity_type: _reportIssueState.entityType,
+                entity_id: String(_reportIssueState.entityId),
+                category: category,
+                title: title,
+                description: description,
+                priority: _reportIssueState.selectedPriority || 'normal',
+            }),
+        });
+        const data = await resp.json();
+        if (data.success) {
+            showToast('Issue reported successfully', 'success');
+            closeReportIssueModal();
+            // Refresh issues page if visible
+            const issuesPage = document.getElementById('issues-page');
+            if (issuesPage && issuesPage.classList.contains('active')) {
+                loadIssuesPage();
+            }
+            // Update badge
+            loadIssuesBadge();
+        } else {
+            showToast(data.error || 'Failed to submit issue', 'error');
+        }
+    } catch (e) {
+        console.error('Failed to submit issue:', e);
+        showToast('Failed to submit issue', 'error');
+    } finally {
+        _reportIssueState._submitting = false;
+        if (submitBtn) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Submit Issue';
+        }
+    }
+}
+
+// --- Issue Detail Modal ---
+
+async function showIssueDetailModal(issueId) {
+    const overlay = document.getElementById('issue-detail-overlay');
+    const body = document.getElementById('issue-detail-body');
+    const footer = document.getElementById('issue-detail-footer');
+    const titleEl = document.getElementById('issue-detail-title');
+    if (!overlay || !body) return;
+
+    body.innerHTML = '<div class="issues-loading"><div class="issues-spinner"></div>Loading...</div>';
+    footer.innerHTML = '<button class="enhanced-bulk-btn secondary" onclick="closeIssueDetailModal()">Close</button>';
+    overlay.classList.remove('hidden');
+
+    try {
+        const resp = await fetch(`/api/issues/${issueId}`, { headers: _issueHeaders() });
+        const data = await resp.json();
+        if (!data.success || !data.issue) {
+            body.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Issue not found</div></div>';
+            return;
+        }
+        renderIssueDetail(data.issue, body, footer, titleEl);
+    } catch (e) {
+        console.error('Failed to load issue:', e);
+        body.innerHTML = '<div class="issues-empty"><div class="issues-empty-title">Failed to load issue</div></div>';
+    }
+}
+
+function renderIssueDetail(issue, body, footer, titleEl) {
+    const admin = isEnhancedAdmin();
+    const catMeta = ISSUE_CATEGORIES[issue.category] || ISSUE_CATEGORIES.other;
+    const statusMeta = ISSUE_STATUS_META[issue.status] || ISSUE_STATUS_META.open;
+
+    let snapshot = {};
+    try { snapshot = typeof issue.snapshot_data === 'string' ? JSON.parse(issue.snapshot_data || '{}') : (issue.snapshot_data || {}); } catch (e) { }
+
+    const entityLabel = issue.entity_type === 'track' ? 'Track' : (issue.entity_type === 'album' ? 'Album' : 'Artist');
+    const entityName = snapshot.title || snapshot.name || `${entityLabel} #${issue.entity_id}`;
+    const artistName = snapshot.artist_name || (issue.entity_type === 'artist' ? snapshot.name : '') || '';
+    const albumTitle = issue.entity_type === 'album' ? (snapshot.title || '') : (snapshot.album_title || '');
+    const artistId = issue.entity_type === 'artist' ? snapshot.id : snapshot.artist_id;
+
+    // Resolve image URLs — album art and artist photo
+    let artistThumb = '';
+    let albumThumb = '';
+    if (issue.entity_type === 'album') {
+        albumThumb = snapshot.thumb_url || '';
+        artistThumb = snapshot.artist_thumb || '';
+    } else if (issue.entity_type === 'track') {
+        albumThumb = snapshot.album_thumb || '';
+        artistThumb = snapshot.artist_thumb || '';
+    } else {
+        // Artist issue
+        artistThumb = snapshot.thumb_url || '';
+    }
+
+    // Determine the album-level Spotify ID for download/wishlist actions
+    const spotifyAlbumId = snapshot.spotify_album_id || '';
+
+    console.log('Issue detail snapshot:', { entityType: issue.entity_type, albumThumb, artistThumb, spotifyAlbumId, snapshotKeys: Object.keys(snapshot) });
+
+    const createdDate = issue.created_at ? new Date(issue.created_at).toLocaleString() : 'Unknown';
+    const resolvedDate = issue.resolved_at ? new Date(issue.resolved_at).toLocaleString() : '';
+
+    titleEl.textContent = `Issue #${issue.id}`;
+
+    // --- Build external links chips ---
+    function _extLinks(snap) {
+        const links = [];
+        if (snap.spotify_artist_id) links.push({ svc: 'Spotify', type: 'Artist', url: `https://open.spotify.com/artist/${snap.spotify_artist_id}`, cls: 'ext-spotify' });
+        if (snap.spotify_album_id) links.push({ svc: 'Spotify', type: 'Album', url: `https://open.spotify.com/album/${snap.spotify_album_id}`, cls: 'ext-spotify' });
+        if (snap.spotify_track_id) links.push({ svc: 'Spotify', type: 'Track', url: `https://open.spotify.com/track/${snap.spotify_track_id}`, cls: 'ext-spotify' });
+        if (snap.artist_musicbrainz_id) links.push({ svc: 'MusicBrainz', type: 'Artist', url: `https://musicbrainz.org/artist/${snap.artist_musicbrainz_id}`, cls: 'ext-mb' });
+        if (snap.musicbrainz_release_id) links.push({ svc: 'MusicBrainz', type: 'Release', url: `https://musicbrainz.org/release/${snap.musicbrainz_release_id}`, cls: 'ext-mb' });
+        if (snap.musicbrainz_recording_id) links.push({ svc: 'MusicBrainz', type: 'Recording', url: `https://musicbrainz.org/recording/${snap.musicbrainz_recording_id}`, cls: 'ext-mb' });
+        if (snap.artist_deezer_id) links.push({ svc: 'Deezer', type: 'Artist', url: `https://www.deezer.com/artist/${snap.artist_deezer_id}`, cls: 'ext-deezer' });
+        if (snap.album_deezer_id) links.push({ svc: 'Deezer', type: 'Album', url: `https://www.deezer.com/album/${snap.album_deezer_id}`, cls: 'ext-deezer' });
+        if (snap.track_deezer_id) links.push({ svc: 'Deezer', type: 'Track', url: `https://www.deezer.com/track/${snap.track_deezer_id}`, cls: 'ext-deezer' });
+        if (snap.artist_tidal_id) links.push({ svc: 'Tidal', type: 'Artist', url: `https://listen.tidal.com/artist/${snap.artist_tidal_id}`, cls: 'ext-tidal' });
+        if (snap.album_tidal_id) links.push({ svc: 'Tidal', type: 'Album', url: `https://listen.tidal.com/album/${snap.album_tidal_id}`, cls: 'ext-tidal' });
+        if (snap.artist_qobuz_id) links.push({ svc: 'Qobuz', type: 'Artist', cls: 'ext-qobuz', id: snap.artist_qobuz_id });
+        if (snap.album_qobuz_id) links.push({ svc: 'Qobuz', type: 'Album', cls: 'ext-qobuz', id: snap.album_qobuz_id });
+        return links;
+    }
+
+    const extLinks = _extLinks(snapshot);
+    let extLinksHtml = '';
+    if (extLinks.length > 0) {
+        const chips = extLinks.map(l => {
+            if (l.url) {
+                return `<a class="issue-ext-chip ${l.cls}" href="${_escAttr(l.url)}" target="_blank" rel="noopener" title="${_escAttr(l.svc + ' ' + l.type)}">${_esc(l.svc)} <span class="issue-ext-chip-type">${_esc(l.type)}</span></a>`;
+            }
+            return `<span class="issue-ext-chip ${l.cls}" title="${_escAttr(l.svc + ' ' + l.type + ': ' + l.id)}">${_esc(l.svc)} <span class="issue-ext-chip-type">${_esc(l.type)}</span></span>`;
+        }).join('');
+        extLinksHtml = `<div class="issue-ext-chips" style="margin-top:8px">${chips}</div>`;
+    }
+
+    // --- Build enhanced-library-style album/track widget ---
+    // Determine which album data to show (for album issues it's the entity, for track issues it's the parent)
+    const showAlbumWidget = (issue.entity_type === 'album' || issue.entity_type === 'track');
+    const albumName = issue.entity_type === 'album' ? (snapshot.title || '') : (snapshot.album_title || '');
+    const albumYear = snapshot.year || '';
+    const albumLabel = snapshot.label || '';
+    const albumType = snapshot.record_type || '';
+    const albumTrackCount = issue.entity_type === 'album' ? (snapshot.track_count || '') : (snapshot.album_track_count || '');
+    const albumGenres = snapshot.genres || [];
+
+    // --- Build the hero section (artist photo + album art + info) ---
+    let heroHtml = '';
+    if (showAlbumWidget) {
+        // Genre tags
+        let genreTagsHtml = '';
+        if (Array.isArray(albumGenres) && albumGenres.length > 0) {
+            genreTagsHtml = `<div class="issue-hero-genres">${albumGenres.slice(0, 5).map(g => `<span class="issue-hero-genre-tag">${_esc(g)}</span>`).join('')}</div>`;
+        }
+
+        // Album meta line
+        const albumMetaParts = [];
+        if (albumYear) albumMetaParts.push(String(albumYear));
+        if (albumType) albumMetaParts.push(albumType.charAt(0).toUpperCase() + albumType.slice(1));
+        if (albumTrackCount) albumMetaParts.push(albumTrackCount + ' tracks');
+        if (albumLabel) albumMetaParts.push(albumLabel);
+
+        // For track issues, show the track title under the album
+        const trackNameLine = issue.entity_type === 'track' && entityName
+            ? `<div class="issue-hero-track-name">&#9835; ${_esc(entityName)}</div>` : '';
+
+        heroHtml = `
+            <div class="issue-hero">
+                <div class="issue-hero-art-group">
+                    ${artistThumb ? `<img class="issue-hero-artist-thumb" src="${_escAttr(artistThumb)}" alt="" onerror="this.style.display='none'">` : ''}
+                    ${albumThumb ? `<img class="issue-hero-album-art" src="${_escAttr(albumThumb)}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">` : ''}
+                    <div class="issue-hero-album-placeholder" style="${albumThumb ? 'display:none' : ''}">${catMeta.icon}</div>
+                </div>
+                <div class="issue-hero-info">
+                    ${artistName ? `<div class="issue-hero-artist">${_esc(artistName)}</div>` : ''}
+                    <div class="issue-hero-album">${_esc(albumName)}</div>
+                    ${trackNameLine}
+                    ${albumMetaParts.length > 0 ? `<div class="issue-hero-meta">${_esc(albumMetaParts.join(' \u00B7 '))}</div>` : ''}
+                    ${genreTagsHtml}
+                    ${extLinksHtml}
+                </div>
+            </div>
+        `;
+    } else {
+        // Artist-level issue — simpler hero
+        heroHtml = `
+            <div class="issue-hero">
+                <div class="issue-hero-art-group">
+                    ${artistThumb ? `<img class="issue-hero-album-art" src="${_escAttr(artistThumb)}" alt="" onerror="this.style.display='none'">` : `<div class="issue-hero-album-placeholder">${catMeta.icon}</div>`}
+                </div>
+                <div class="issue-hero-info">
+                    <div class="issue-hero-album">${_esc(entityName)}</div>
+                    ${extLinksHtml}
+                </div>
+            </div>
+        `;
+    }
+
+    // --- Issue info bar ---
+    let issueInfoHtml = `
+        <div class="issue-detail-info-bar">
+            <div class="issue-detail-info-left">
+                <span class="issue-status-badge ${statusMeta.cls}">${_esc(statusMeta.label)}</span>
+                <span class="issue-priority-dot issue-priority-${_escAttr(issue.priority || 'normal')}" title="${_esc((issue.priority || 'normal'))} priority"></span>
+                <span class="issue-detail-category">${catMeta.icon} ${_esc(catMeta.label)}</span>
+            </div>
+            <div class="issue-detail-info-right">
+                <span class="issue-detail-date">Reported ${_esc(createdDate)}</span>
+                ${issue.reporter_name && admin ? `<span class="issue-detail-profile">by ${_esc(issue.reporter_name)}</span>` : ''}
+                ${resolvedDate ? `<span class="issue-detail-date">Resolved ${_esc(resolvedDate)}</span>` : ''}
+            </div>
+        </div>
+    `;
+
+    // --- Issue description ---
+    let descriptionHtml = `
+        <div class="issue-detail-section">
+            <div class="issue-detail-section-title">Issue</div>
+            <div class="issue-detail-title-text">${_esc(issue.title)}</div>
+            ${issue.description ? `<div class="issue-detail-description">${_esc(issue.description)}</div>` : '<div class="issue-detail-no-desc">No additional details provided</div>'}
+        </div>
+    `;
+
+    // --- Action buttons (Download Album / Add to Wishlist) for admin ---
+    let actionButtonsHtml = '';
+    if (admin && (issue.entity_type === 'album' || issue.entity_type === 'track')) {
+        actionButtonsHtml = `
+            <div class="issue-action-buttons">
+                <button class="issue-action-btn issue-action-download" id="issue-action-download" title="Download this album">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                    Download Album
+                </button>
+                <button class="issue-action-btn issue-action-wishlist" id="issue-action-wishlist" title="Add all tracks to wishlist">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg>
+                    Add to Wishlist
+                </button>
+            </div>
+        `;
+    }
+
+    // --- Metadata grid for track-level issues ---
+    let metaGridHtml = '';
+    if (issue.entity_type === 'track') {
+        const metaItems = [];
+        if (snapshot.track_number) metaItems.push({ icon: '#', label: 'Track', value: String(snapshot.track_number) });
+        if (snapshot.duration) metaItems.push({ icon: '&#9719;', label: 'Duration', value: typeof snapshot.duration === 'number' ? formatDurationMs(snapshot.duration) : String(snapshot.duration) });
+        if (snapshot.format) metaItems.push({ icon: '&#128190;', label: 'Format', value: snapshot.format });
+        if (snapshot.bitrate) metaItems.push({ icon: '&#127926;', label: 'Bitrate', value: snapshot.bitrate + ' kbps' });
+        if (snapshot.bpm) metaItems.push({ icon: '&#9835;', label: 'BPM', value: String(snapshot.bpm) });
+        if (snapshot.quality) metaItems.push({ icon: '&#9733;', label: 'Quality', value: snapshot.quality });
+        if (metaItems.length > 0) {
+            metaGridHtml = `
+                <div class="issue-detail-section">
+                    <div class="issue-detail-section-title">Track Details</div>
+                    <div class="issue-detail-meta-grid">
+                        ${metaItems.map(m => `
+                            <div class="issue-meta-item">
+                                <span class="issue-meta-icon">${m.icon}</span>
+                                <span class="issue-meta-label">${_esc(m.label)}</span>
+                                <span class="issue-meta-value">${_esc(m.value)}</span>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            `;
+        }
+    }
+
+    // --- File path display for tracks ---
+    let filePathHtml = '';
+    if (snapshot.file_path) {
+        filePathHtml = `
+            <div class="issue-detail-section">
+                <div class="issue-detail-section-title">File Path</div>
+                <div class="issue-detail-filepath">${_esc(snapshot.file_path)}</div>
+            </div>
+        `;
+    }
+
+    // --- Enhanced-library-style track listing ---
+    let trackListHtml = '';
+    if (snapshot.tracks && Array.isArray(snapshot.tracks) && snapshot.tracks.length > 0) {
+        let lastDisc = null;
+        let rows = '';
+        const hasMultiDisc = snapshot.tracks.some(tr => (tr.disc_number || 1) > 1);
+        snapshot.tracks.forEach(t => {
+            const disc = t.disc_number || 1;
+            if (hasMultiDisc && disc !== lastDisc) {
+                rows += `<div class="issue-detail-tracklist-disc">Disc ${disc}</div>`;
+                lastDisc = disc;
+            }
+            const fmt = t.format || (t.file_path ? t.file_path.split('.').pop().toUpperCase() : '');
+            const fmtLower = fmt.toLowerCase();
+            const fmtClass = fmtLower === 'flac' ? 'flac' : (fmtLower === 'mp3' ? 'mp3' : 'other');
+            const br = t.bitrate ? parseInt(t.bitrate) : 0;
+            const brClass = br >= 320 || fmtLower === 'flac' ? 'high' : (br >= 192 ? 'medium' : 'low');
+            const durStr = t.duration && typeof t.duration === 'number' ? formatDurationMs(t.duration) : '';
+
+            rows += `
+                <div class="issue-detail-tracklist-row">
+                    <span class="issue-detail-tracklist-num">${_esc(String(t.track_number || '-'))}</span>
+                    <span class="issue-detail-tracklist-title">${_esc(t.title || 'Unknown')}</span>
+                    ${durStr ? `<span class="issue-detail-tracklist-dur">${durStr}</span>` : ''}
+                    <span class="issue-detail-tracklist-meta">
+                        ${fmt ? `<span class="enhanced-format-badge ${fmtClass}">${_esc(fmt)}</span>` : ''}
+                        ${br ? `<span class="enhanced-bitrate ${brClass}">${br}k</span>` : ''}
+                    </span>
+                </div>
+            `;
+        });
+        trackListHtml = `
+            <div class="issue-detail-section">
+                <div class="issue-detail-section-title">Track Listing <span class="issue-detail-section-count">${snapshot.tracks.length} tracks</span></div>
+                <div class="issue-detail-tracklist">${rows}</div>
+            </div>
+        `;
+    }
+
+    // --- Admin response section ---
+    let adminResponseHtml = '';
+    if (admin) {
+        adminResponseHtml = `
+            <div class="issue-detail-section">
+                <div class="issue-detail-section-title">Admin Response</div>
+                <textarea class="issue-detail-response-textarea" id="issue-detail-response-input" placeholder="Write a response to the reporter..." rows="3">${_esc(issue.admin_response || '')}</textarea>
+            </div>
+        `;
+    } else if (issue.admin_response) {
+        adminResponseHtml = `
+            <div class="issue-detail-section">
+                <div class="issue-detail-section-title">Admin Response</div>
+                <div class="issue-detail-admin-response">${_esc(issue.admin_response)}</div>
+            </div>
+        `;
+    }
+
+    body.innerHTML = `
+        ${heroHtml}
+        ${issueInfoHtml}
+        ${actionButtonsHtml}
+        ${descriptionHtml}
+        ${metaGridHtml}
+        ${filePathHtml}
+        ${trackListHtml}
+        ${adminResponseHtml}
+    `;
+
+    // --- Footer with status action buttons ---
+    const safeId = parseInt(issue.id, 10);
+    let footerHtml = '<button class="enhanced-bulk-btn secondary" onclick="closeIssueDetailModal()">Close</button>';
+
+    if (admin) {
+        if (issue.status === 'open' || issue.status === 'in_progress') {
+            if (issue.status === 'open') {
+                footerHtml += `<button class="enhanced-bulk-btn issue-btn-progress" onclick="updateIssueStatus(${safeId}, 'in_progress')">Mark In Progress</button>`;
+            }
+            footerHtml += `<button class="enhanced-bulk-btn issue-btn-resolve" onclick="updateIssueStatus(${safeId}, 'resolved')">Resolve</button>`;
+            footerHtml += `<button class="enhanced-bulk-btn issue-btn-dismiss" onclick="updateIssueStatus(${safeId}, 'dismissed')">Dismiss</button>`;
+        } else {
+            footerHtml += `<button class="enhanced-bulk-btn issue-btn-reopen" onclick="updateIssueStatus(${safeId}, 'open')">Reopen</button>`;
+        }
+        footerHtml += `<button class="enhanced-bulk-btn issue-btn-delete" onclick="deleteIssue(${safeId})">Delete</button>`;
+    } else {
+        if (issue.status === 'open') {
+            footerHtml += `<button class="enhanced-bulk-btn issue-btn-delete" onclick="deleteIssue(${safeId})">Withdraw</button>`;
+        }
+    }
+
+    footer.innerHTML = footerHtml;
+
+    // --- Attach action button handlers ---
+    const dlBtn = document.getElementById('issue-action-download');
+    if (dlBtn) {
+        dlBtn.onclick = () => issueDownloadAlbum(spotifyAlbumId, artistName, albumName);
+    }
+    const wlBtn = document.getElementById('issue-action-wishlist');
+    if (wlBtn) {
+        wlBtn.onclick = () => issueAddToWishlist(spotifyAlbumId, artistName, albumName);
+    }
+}
+
+// --- Issue Action: Download Album ---
+async function issueDownloadAlbum(spotifyAlbumId, artistName, albumName) {
+    const btn = document.getElementById('issue-action-download');
+    if (!spotifyAlbumId && (!artistName || !albumName)) {
+        showToast('No album ID or artist/album info available for download', 'warning');
+        return;
+    }
+    try {
+        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
+
+        let response;
+        if (spotifyAlbumId) {
+            const albumParams = new URLSearchParams({ name: albumName || '', artist: artistName || '' });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${albumParams}`);
+        } else {
+            // No Spotify album ID — search for the album by name
+            const query = `${artistName} ${albumName}`;
+            const searchResp = await fetch('/api/enhanced-search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query })
+            });
+            if (!searchResp.ok) throw new Error('Album search failed');
+            const searchData = await searchResp.json();
+            const foundAlbum = searchData.spotify_albums?.[0];
+            if (!foundAlbum || !foundAlbum.id) {
+                showToast(`Could not find "${albumName}" by ${artistName}`, 'warning');
+                return;
+            }
+            const albumParams = new URLSearchParams({ name: foundAlbum.name || albumName, artist: foundAlbum.artist || artistName });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(foundAlbum.id)}?${albumParams}`);
+        }
+
+        if (!response.ok) {
+            if (response.status === 401) throw new Error('Spotify not authenticated');
+            throw new Error(`Failed to load album: ${response.status}`);
+        }
+
+        const albumData = await response.json();
+        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+            showToast(`No tracks available for "${albumName}"`, 'warning');
+            return;
+        }
+
+        // Close the issue modal first
+        closeIssueDetailModal();
+
+        const resolvedAlbumId = albumData.id || spotifyAlbumId || Date.now();
+        const virtualPlaylistId = `issue_download_${resolvedAlbumId}`;
+
+        // Enrich tracks with album metadata
+        const enrichedTracks = albumData.tracks.map(track => ({
+            ...track,
+            album: {
+                name: albumData.name,
+                id: albumData.id,
+                album_type: albumData.album_type || 'album',
+                images: albumData.images || [],
+                release_date: albumData.release_date,
+                total_tracks: albumData.total_tracks
+            }
+        }));
+
+        const playlistName = `[${artistName}] ${albumData.name}`;
+        const artistObject = { id: `issue_${artistName}`, name: artistName, image_url: '' };
+        const fullAlbumObject = {
+            name: albumData.name,
+            id: albumData.id,
+            album_type: albumData.album_type || 'album',
+            images: albumData.images || [],
+            image_url: albumData.images?.[0]?.url || null,
+            release_date: albumData.release_date,
+            total_tracks: albumData.total_tracks,
+            artists: albumData.artists || [{ name: artistName }]
+        };
+
+        await openDownloadMissingModalForArtistAlbum(
+            virtualPlaylistId, playlistName, enrichedTracks, fullAlbumObject, artistObject, true
+        );
+
+        // Register download bubble so it appears on the dashboard
+        const albumType = fullAlbumObject.album_type || 'album';
+        registerArtistDownload(artistObject, fullAlbumObject, virtualPlaylistId, albumType);
+
+    } catch (error) {
+        console.error('Issue download error:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        if (btn) { btn.disabled = false; btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download Album'; }
+    }
+}
+
+// --- Redownload Library Album (Enhanced View) ---
+async function redownloadLibraryAlbum(album, artistName, btn) {
+    const albumName = album.title || '';
+    const spotifyAlbumId = album.spotify_album_id || '';
+
+    if (!spotifyAlbumId && !albumName) {
+        showToast('No album ID or name available for redownload', 'warning');
+        return;
+    }
+
+    const origText = btn ? btn.innerHTML : '';
+    try {
+        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
+
+        let response;
+        if (spotifyAlbumId) {
+            const params = new URLSearchParams({ name: albumName, artist: artistName || '' });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${params}`);
+        }
+
+        // Fallback: search by name if no ID or direct fetch failed
+        if (!response || !response.ok) {
+            const query = `${artistName || ''} ${albumName}`.trim();
+            const searchResp = await fetch('/api/enhanced-search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query })
+            });
+            if (!searchResp.ok) throw new Error('Album search failed');
+            const searchData = await searchResp.json();
+            const found = searchData.spotify_albums?.[0] || searchData.itunes_albums?.[0];
+            if (!found || !found.id) {
+                showToast(`Could not find "${albumName}" by ${artistName || 'unknown'}`, 'warning');
+                return;
+            }
+            const params = new URLSearchParams({ name: found.name || albumName, artist: found.artist || artistName || '' });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(found.id)}?${params}`);
+        }
+
+        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
+
+        const albumData = await response.json();
+        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+            showToast(`No tracks found for "${albumName}"`, 'warning');
+            return;
+        }
+
+        const resolvedId = albumData.id || spotifyAlbumId || album.id;
+        const virtualPlaylistId = `library_redownload_${resolvedId}`;
+        const playlistName = `[${artistName || 'Unknown'}] ${albumData.name}`;
+
+        const enrichedTracks = albumData.tracks.map(track => ({
+            ...track,
+            album: {
+                name: albumData.name,
+                id: albumData.id,
+                album_type: albumData.album_type || 'album',
+                images: albumData.images || [],
+                release_date: albumData.release_date,
+                total_tracks: albumData.total_tracks
+            }
+        }));
+
+        const enhancedArtist = artistDetailPageState.enhancedData?.artist;
+        const artistObject = {
+            id: artistDetailPageState.currentArtistId || `library_${artistName || album.id}`,
+            name: artistName || '',
+            image_url: enhancedArtist?.thumb_url || ''
+        };
+        const fullAlbumObject = {
+            name: albumData.name,
+            id: albumData.id,
+            album_type: albumData.album_type || 'album',
+            images: albumData.images || [],
+            image_url: albumData.images?.[0]?.url || null,
+            release_date: albumData.release_date,
+            total_tracks: albumData.total_tracks,
+            artists: albumData.artists || [{ name: artistName || '' }]
+        };
+
+        await openDownloadMissingModalForArtistAlbum(
+            virtualPlaylistId, playlistName, enrichedTracks, fullAlbumObject, artistObject, true
+        );
+
+        // Register download bubble so it appears on the dashboard
+        const albumType = fullAlbumObject.album_type || 'album';
+        registerArtistDownload(artistObject, fullAlbumObject, virtualPlaylistId, albumType);
+
+    } catch (error) {
+        console.error('Redownload album error:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        if (btn) { btn.disabled = false; btn.innerHTML = origText; }
+    }
+}
+
+// --- Issue Action: Add to Wishlist ---
+async function issueAddToWishlist(spotifyAlbumId, artistName, albumName) {
+    const btn = document.getElementById('issue-action-wishlist');
+    if (!spotifyAlbumId && (!artistName || !albumName)) {
+        showToast('No album ID or artist/album info available', 'warning');
+        return;
+    }
+    try {
+        if (btn) { btn.disabled = true; btn.textContent = 'Loading...'; }
+
+        let response;
+        if (spotifyAlbumId) {
+            const albumParams = new URLSearchParams({ name: albumName || '', artist: artistName || '' });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(spotifyAlbumId)}?${albumParams}`);
+        } else {
+            // No Spotify album ID — search for the album by name
+            const query = `${artistName} ${albumName}`;
+            const searchResp = await fetch('/api/enhanced-search', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ query })
+            });
+            if (!searchResp.ok) throw new Error('Album search failed');
+            const searchData = await searchResp.json();
+            const foundAlbum = searchData.spotify_albums?.[0];
+            if (!foundAlbum || !foundAlbum.id) {
+                showToast(`Could not find "${albumName}" by ${artistName}`, 'warning');
+                return;
+            }
+            const albumParams = new URLSearchParams({ name: foundAlbum.name || albumName, artist: foundAlbum.artist || artistName });
+            response = await fetch(`/api/spotify/album/${encodeURIComponent(foundAlbum.id)}?${albumParams}`);
+        }
+
+        if (!response.ok) throw new Error(`Failed to load album: ${response.status}`);
+
+        const albumData = await response.json();
+        if (!albumData || !albumData.tracks || albumData.tracks.length === 0) {
+            showToast(`No tracks available for "${albumName}"`, 'warning');
+            return;
+        }
+
+        // Close issue modal and open wishlist modal
+        closeIssueDetailModal();
+
+        const albumArtists = albumData.artists || [{ name: artistName }];
+        const album = {
+            name: albumData.name,
+            id: albumData.id,
+            album_type: albumData.album_type || 'album',
+            images: albumData.images || [],
+            release_date: albumData.release_date,
+            total_tracks: albumData.total_tracks,
+            artists: albumArtists
+        };
+        const artist = { id: null, name: artistName };
+
+        // Enrich tracks with album metadata — use album artist for wishlist grouping
+        // (Spotify returns per-track artists which can differ on compilations/soundtracks)
+        const tracks = albumData.tracks.map(t => ({
+            ...t,
+            artists: albumArtists,
+            album: album
+        }));
+
+        await openAddToWishlistModal(album, artist, tracks, albumData.album_type || 'album');
+
+    } catch (error) {
+        console.error('Issue wishlist error:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        if (btn) { btn.disabled = false; btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/></svg> Add to Wishlist'; }
+    }
+}
+
+async function updateIssueStatus(issueId, newStatus) {
+    const payload = { status: newStatus };
+
+    // Include admin response if present
+    const responseInput = document.getElementById('issue-detail-response-input');
+    if (responseInput) {
+        payload.admin_response = responseInput.value.trim();
+    }
+
+    try {
+        const resp = await fetch(`/api/issues/${issueId}`, {
+            method: 'PUT',
+            headers: _issueHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify(payload),
+        });
+        const data = await resp.json();
+        if (data.success) {
+            showToast(`Issue ${newStatus === 'resolved' ? 'resolved' : newStatus === 'dismissed' ? 'dismissed' : newStatus === 'in_progress' ? 'marked in progress' : 'reopened'}`, 'success');
+            closeIssueDetailModal();
+            // Refresh if on issues page
+            const issuesPage = document.getElementById('issues-page');
+            if (issuesPage && issuesPage.classList.contains('active')) {
+                loadIssuesPage();
+            }
+            loadIssuesBadge();
+        } else {
+            showToast(data.error || 'Failed to update issue', 'error');
+        }
+    } catch (e) {
+        console.error('Failed to update issue:', e);
+        showToast('Failed to update issue', 'error');
+    }
+}
+
+async function deleteIssue(issueId) {
+    if (!confirm('Are you sure you want to delete this issue?')) return;
+    try {
+        const resp = await fetch(`/api/issues/${issueId}`, { method: 'DELETE', headers: _issueHeaders() });
+        const data = await resp.json();
+        if (data.success) {
+            showToast('Issue deleted', 'success');
+            closeIssueDetailModal();
+            const issuesPage = document.getElementById('issues-page');
+            if (issuesPage && issuesPage.classList.contains('active')) {
+                loadIssuesPage();
+            }
+            loadIssuesBadge();
+        } else {
+            showToast(data.error || 'Failed to delete issue', 'error');
+        }
+    } catch (e) {
+        console.error('Failed to delete issue:', e);
+        showToast('Failed to delete issue', 'error');
+    }
+}
+
+function closeIssueDetailModal() {
+    const overlay = document.getElementById('issue-detail-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+async function loadIssuesBadge() {
+    try {
+        const resp = await fetch('/api/issues/counts', { headers: _issueHeaders() });
+        const data = await resp.json();
+        if (!data.success) return;
+        const badge = document.getElementById('issues-nav-badge');
+        if (badge) {
+            const openCount = data.counts.open || 0;
+            badge.textContent = openCount;
+            badge.classList.toggle('hidden', openCount === 0);
+        }
+    } catch (e) { }
+}
+
+// ===== END ISSUES PAGE =====
+
+// --- Helpers ---
+
+function _esc(str) {
+    if (!str) return '';
+    const d = document.createElement('div');
+    d.textContent = str;
+    return d.innerHTML;
+}
+
+function _escAttr(str) {
+    if (!str) return '';
+    return String(str).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+// ===== ENHANCE QUALITY MODAL =====
+
+let _enhanceQualityData = null;
+let _enhanceArtistId = null;
+
+const ENHANCE_TIER_MAP = {
+    'lossless': { num: 1, label: 'Lossless', cssClass: 'lossless' },
+    'high_lossy': { num: 2, label: 'High Lossy', cssClass: 'high-lossy' },
+    'standard_lossy': { num: 3, label: 'Standard Lossy', cssClass: 'standard-lossy' },
+    'low_lossy': { num: 4, label: 'Low Lossy', cssClass: 'low-lossy' },
+    'unknown': { num: 999, label: 'Unknown', cssClass: 'unknown' },
+};
+
+async function checkArtistEnhanceEligibility(artistId) {
+    const btn = document.getElementById('library-artist-enhance-btn');
+    if (!btn) return;
+    btn.classList.add('hidden');
+    _enhanceArtistId = artistId;
+
+    try {
+        const resp = await fetch(`/api/library/artist/${artistId}/quality-analysis`);
+        if (!resp.ok) return;
+        const data = await resp.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) return;
+
+        _enhanceQualityData = data;
+
+        // Show button if any tracks are below the user's min acceptable tier
+        const minTier = data.min_acceptable_tier || 1;
+        const belowCount = data.tracks.filter(t => t.tier_num > minTier).length;
+        if (belowCount > 0) {
+            btn.classList.remove('hidden');
+            btn.querySelector('.enhance-text').textContent = `Enhance Quality (${belowCount})`;
+        }
+    } catch (e) {
+        console.debug('Enhance eligibility check failed:', e);
+    }
+}
+
+async function playArtistRadio() {
+    try {
+        const artistId = artistDetailPageState.currentArtistId;
+        const artistName = artistDetailPageState.currentArtistName || '';
+        if (!artistId) {
+            showToast('No artist selected', 'error');
+            return;
+        }
+
+        // Get tracks from this artist's library
+        const resp = await fetch(`/api/library/artist/${artistId}/enhanced`);
+        if (!resp.ok) throw new Error('Failed to load artist data');
+        const data = await resp.json();
+        if (!data.success) throw new Error(data.error || 'Failed');
+
+        // Collect all tracks with file paths
+        const allTracks = [];
+        for (const album of (data.albums || [])) {
+            for (const track of (album.tracks || [])) {
+                if (track.file_path) {
+                    allTracks.push({ track, album });
+                }
+            }
+        }
+
+        if (!allTracks.length) {
+            showToast('No playable tracks found for this artist', 'error');
+            return;
+        }
+
+        // Pick a random track
+        const random = allTracks[Math.floor(Math.random() * allTracks.length)];
+        const albumArt = random.album.thumb_url || data.artist?.thumb_url || null;
+
+        // Clear existing queue and disable radio before starting fresh
+        npRadioMode = false;
+        clearQueue();
+        if (audioPlayer && !audioPlayer.paused) {
+            audioPlayer.pause();
+        }
+
+        // Play the track first, then enable radio mode after a short delay
+        // so currentTrack is set and the radio queue fill triggers
+        playLibraryTrack({
+            id: random.track.id,
+            title: random.track.title,
+            file_path: random.track.file_path,
+            bitrate: random.track.bitrate,
+            artist_id: artistId,
+            album_id: random.album.id,
+        }, random.album.title || '', artistName);
+
+        // Enable radio mode after track starts loading
+        setTimeout(() => {
+            npRadioMode = true;
+            const radioBtn = document.querySelector('.np-radio-btn');
+            if (radioBtn) radioBtn.classList.add('active');
+        }, 1000);
+
+        showToast(`Playing ${artistName} radio — similar tracks will auto-queue`, 'success');
+    } catch (e) {
+        showToast(`Failed to start artist radio: ${e.message}`, 'error');
+    }
+}
+
+function openEnhanceQualityModal() {
+    if (!_enhanceQualityData) return;
+    const data = _enhanceQualityData;
+
+    // Remove existing modal if any
+    const existing = document.getElementById('enhance-quality-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'enhance-quality-overlay';
+    overlay.className = 'enhance-modal-overlay';
+    overlay.onclick = (e) => { if (e.target === overlay) closeEnhanceQualityModal(); };
+
+    const minTier = data.min_acceptable_tier || 1;
+    const summary = data.quality_summary || {};
+
+    overlay.innerHTML = `
+        <div class="enhance-modal" onclick="event.stopPropagation()">
+            <div class="enhance-modal-header">
+                <h3>⚡ Enhance Quality — ${_esc(data.artist_name)}</h3>
+                <button class="enhance-modal-close" onclick="closeEnhanceQualityModal()">&times;</button>
+            </div>
+            <div class="enhance-summary-bar">
+                ${_buildEnhanceSummaryChips(summary)}
+            </div>
+            <div class="enhance-controls">
+                <div class="enhance-tier-selector">
+                    <label>Upgrade tracks below:</label>
+                    <select id="enhance-tier-dropdown" onchange="updateEnhanceThreshold(parseInt(this.value))">
+                        <option value="1" ${minTier <= 1 ? 'selected' : ''}>Lossless (FLAC/WAV)</option>
+                        <option value="2" ${minTier === 2 ? 'selected' : ''}>High Lossy (OGG/Opus)</option>
+                        <option value="3" ${minTier === 3 ? 'selected' : ''}>Standard Lossy (M4A/AAC)</option>
+                        <option value="4" ${minTier >= 4 ? 'selected' : ''}>Low Lossy (MP3/WMA)</option>
+                    </select>
+                </div>
+                <div class="enhance-select-controls">
+                    <button class="enhance-select-btn" onclick="enhanceSelectAll(true)">Select All Below</button>
+                    <button class="enhance-select-btn" onclick="enhanceSelectAll(false)">Deselect All</button>
+                    <span class="enhance-selected-count" id="enhance-selected-count">0 selected</span>
+                </div>
+            </div>
+            <div class="enhance-modal-body">
+                <table class="enhance-track-table">
+                    <thead>
+                        <tr>
+                            <th></th>
+                            <th>#</th>
+                            <th>Title</th>
+                            <th>Album</th>
+                            <th>Format</th>
+                            <th>Bitrate</th>
+                        </tr>
+                    </thead>
+                    <tbody id="enhance-track-tbody">
+                    </tbody>
+                </table>
+            </div>
+            <div class="enhance-modal-footer">
+                <div class="enhance-footer-info" id="enhance-footer-info"></div>
+                <div class="enhance-footer-actions">
+                    <button class="enhance-btn secondary" onclick="closeEnhanceQualityModal()">Cancel</button>
+                    <button class="enhance-btn primary" id="enhance-submit-btn" onclick="submitEnhanceQuality()" disabled>
+                        ⚡ Enhance 0 Tracks
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    renderEnhanceTrackRows(minTier);
+}
+
+function _buildEnhanceSummaryChips(summary) {
+    const chips = [
+        { key: 'lossless', label: 'FLAC', cssClass: 'lossless' },
+        { key: 'high_lossy', label: 'OGG/Opus', cssClass: 'high-lossy' },
+        { key: 'standard_lossy', label: 'M4A/AAC', cssClass: 'standard-lossy' },
+        { key: 'low_lossy', label: 'MP3/WMA', cssClass: 'low-lossy' },
+    ];
+    return chips
+        .filter(c => (summary[c.key] || 0) > 0)
+        .map(c => `
+            <div class="enhance-summary-chip ${c.cssClass}">
+                <span class="chip-count">${summary[c.key]}</span>
+                <span class="chip-label">${c.label}</span>
+            </div>
+        `).join('');
+}
+
+function renderEnhanceTrackRows(thresholdTier) {
+    const tbody = document.getElementById('enhance-track-tbody');
+    if (!tbody || !_enhanceQualityData) return;
+
+    const tracks = _enhanceQualityData.tracks;
+    // Sort: below-threshold first, then by album + track number
+    const sorted = [...tracks].sort((a, b) => {
+        const aBt = a.tier_num > thresholdTier ? 0 : 1;
+        const bBt = b.tier_num > thresholdTier ? 0 : 1;
+        if (aBt !== bBt) return aBt - bBt;
+        const albumCmp = (a.album_title || '').localeCompare(b.album_title || '');
+        if (albumCmp !== 0) return albumCmp;
+        return (a.disc_number || 1) * 1000 + (a.track_number || 0) - ((b.disc_number || 1) * 1000 + (b.track_number || 0));
+    });
+
+    tbody.innerHTML = sorted.map(track => {
+        const isBelow = track.tier_num > thresholdTier;
+        const tierInfo = ENHANCE_TIER_MAP[track.tier_name] || ENHANCE_TIER_MAP['unknown'];
+        const bitrateStr = track.bitrate ? `${track.bitrate} kbps` : '-';
+        return `
+            <tr class="enhance-track-row ${isBelow ? 'below-threshold' : 'above-threshold'}"
+                data-track-id="${_escAttr(track.track_id)}" data-tier="${track.tier_num}">
+                <td><input type="checkbox" class="enhance-track-check"
+                    ${isBelow ? 'checked' : ''} onchange="updateEnhanceSelectedCount()"></td>
+                <td>${track.track_number || '-'}</td>
+                <td>${_esc(track.title)}</td>
+                <td>${_esc(track.album_title)}</td>
+                <td><span class="enhance-format-badge ${tierInfo.cssClass}">${_esc(track.format)}</span></td>
+                <td><span class="enhance-bitrate">${bitrateStr}</span></td>
+            </tr>
+        `;
+    }).join('');
+
+    updateEnhanceSelectedCount();
+}
+
+function updateEnhanceThreshold(tierNum) {
+    const rows = document.querySelectorAll('.enhance-track-row');
+    rows.forEach(row => {
+        const trackTier = parseInt(row.dataset.tier);
+        const isBelow = trackTier > tierNum;
+        const cb = row.querySelector('.enhance-track-check');
+
+        row.classList.toggle('below-threshold', isBelow);
+        row.classList.toggle('above-threshold', !isBelow);
+        if (cb) cb.checked = isBelow;
+    });
+    updateEnhanceSelectedCount();
+}
+
+function enhanceSelectAll(select) {
+    const thresholdTier = parseInt(document.getElementById('enhance-tier-dropdown')?.value || '1');
+    const checks = document.querySelectorAll('.enhance-track-check');
+    checks.forEach(cb => {
+        const row = cb.closest('.enhance-track-row');
+        const trackTier = parseInt(row?.dataset.tier || '999');
+        if (select) {
+            cb.checked = trackTier > thresholdTier;
+        } else {
+            cb.checked = false;
+        }
+    });
+    updateEnhanceSelectedCount();
+}
+
+function updateEnhanceSelectedCount() {
+    const checks = document.querySelectorAll('.enhance-track-check:checked');
+    const count = checks.length;
+    const countEl = document.getElementById('enhance-selected-count');
+    const submitBtn = document.getElementById('enhance-submit-btn');
+
+    if (countEl) countEl.textContent = `${count} selected`;
+    if (submitBtn) {
+        submitBtn.textContent = `⚡ Enhance ${count} Track${count !== 1 ? 's' : ''}`;
+        submitBtn.disabled = count === 0;
+    }
+}
+
+async function submitEnhanceQuality() {
+    const checks = document.querySelectorAll('.enhance-track-check:checked');
+    const trackIds = [];
+    checks.forEach(cb => {
+        const row = cb.closest('.enhance-track-row');
+        if (row?.dataset.trackId) trackIds.push(row.dataset.trackId);
+    });
+
+    if (trackIds.length === 0) return;
+
+    const submitBtn = document.getElementById('enhance-submit-btn');
+    const footerInfo = document.getElementById('enhance-footer-info');
+    if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = '<span class="enhance-spinner"></span>Processing...';
+    }
+    if (footerInfo) footerInfo.textContent = 'Matching tracks to Spotify and adding to wishlist...';
+
+    try {
+        const resp = await fetch(`/api/library/artist/${_enhanceArtistId}/enhance`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ track_ids: trackIds })
+        });
+
+        const result = await resp.json();
+
+        if (result.success) {
+            const msg = `${result.enhanced_count} track${result.enhanced_count !== 1 ? 's' : ''} queued for enhancement`;
+            if (footerInfo) footerInfo.textContent = msg;
+
+            showToast(msg + (result.failed_count > 0 ? ` (${result.failed_count} failed)` : ''), 'success');
+
+            // Update button count
+            const enhBtn = document.getElementById('library-artist-enhance-btn');
+            if (enhBtn && result.enhanced_count > 0) {
+                const remaining = trackIds.length - result.enhanced_count;
+                if (remaining <= 0) {
+                    enhBtn.classList.add('hidden');
+                }
+            }
+
+            if (submitBtn) {
+                submitBtn.textContent = '✅ Done';
+                submitBtn.disabled = true;
+            }
+
+            // Auto-close after short delay
+            setTimeout(() => closeEnhanceQualityModal(), 1500);
+        } else {
+            throw new Error(result.error || 'Enhancement failed');
+        }
+    } catch (e) {
+        console.error('Enhance quality error:', e);
+        showToast(`Enhancement failed: ${e.message}`, 'error');
+        if (submitBtn) {
+            submitBtn.textContent = `⚡ Enhance ${trackIds.length} Tracks`;
+            submitBtn.disabled = false;
+        }
+        if (footerInfo) footerInfo.textContent = '';
+    }
+}
+
+function closeEnhanceQualityModal() {
+    const overlay = document.getElementById('enhance-quality-overlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+        setTimeout(() => overlay.remove(), 300);
+    }
+}
+
+// Global exports
+window.openEnhanceQualityModal = openEnhanceQualityModal;
+window.closeEnhanceQualityModal = closeEnhanceQualityModal;
+window.updateEnhanceThreshold = updateEnhanceThreshold;
+window.enhanceSelectAll = enhanceSelectAll;
+window.updateEnhanceSelectedCount = updateEnhanceSelectedCount;
+window.submitEnhanceQuality = submitEnhanceQuality;
+
+// ===== END ENHANCE QUALITY MODAL =====
+
diff --git a/webui/static/sync-services.js b/webui/static/sync-services.js
new file mode 100644
index 00000000..4dc00ed8
--- /dev/null
+++ b/webui/static/sync-services.js
@@ -0,0 +1,9077 @@
+// TIDAL PLAYLIST MANAGEMENT (YouTube-style cards with Tidal colors)
+// ===================================================================
+
+async function loadTidalPlaylists() {
+    const container = document.getElementById('tidal-playlist-container');
+    const refreshBtn = document.getElementById('tidal-refresh-btn');
+
+    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading Tidal playlists...</div>`;
+    refreshBtn.disabled = true;
+    refreshBtn.textContent = '🔄 Loading...';
+
+    try {
+        const response = await fetch('/api/tidal/playlists');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Tidal playlists');
+        }
+
+        tidalPlaylists = await response.json();
+        renderTidalPlaylists();
+        tidalPlaylistsLoaded = true;
+
+        console.log(`🎵 Loaded ${tidalPlaylists.length} Tidal playlists`);
+
+        // Auto-mirror Tidal playlists: fetch tracks in background then mirror
+        // Cards render instantly from metadata; tracks load per-playlist without blocking UI
+        for (const p of tidalPlaylists) {
+            // Skip if already have tracks from a previous load
+            if (p.tracks && p.tracks.length > 0) {
+                mirrorPlaylist('tidal', p.id, p.name, p.tracks.map(t => ({
+                    track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
+                    album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
+                    source_track_id: t.id || ''
+                })), { owner: p.owner, image_url: p.image_url, description: p.description });
+                continue;
+            }
+            // Fetch tracks on-demand for this playlist
+            try {
+                const fullResp = await fetch(`/api/tidal/playlist/${p.id}`);
+                if (fullResp.ok) {
+                    const fullData = await fullResp.json();
+                    if (fullData.tracks && fullData.tracks.length > 0) {
+                        p.tracks = fullData.tracks;
+                        p.track_count = fullData.tracks.length;
+                        // Update card track count in UI
+                        const countEl = document.querySelector(`#tidal-card-${p.id} .playlist-card-track-count`);
+                        if (countEl) countEl.textContent = `${fullData.tracks.length} tracks`;
+                        // Mirror with full track data
+                        mirrorPlaylist('tidal', p.id, p.name, fullData.tracks.map(t => ({
+                            track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
+                            album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
+                            source_track_id: t.id || ''
+                        })), { owner: p.owner, image_url: p.image_url, description: p.description });
+                    }
+                }
+            } catch (e) {
+                console.warn(`Failed to fetch tracks for Tidal playlist ${p.name}: ${e.message}`);
+            }
+        }
+
+        // Load and apply saved discovery states from backend (like YouTube)
+        await loadTidalPlaylistStatesFromBackend();
+
+    } catch (error) {
+        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
+        showToast(`Error loading Tidal playlists: ${error.message}`, 'error');
+    } finally {
+        refreshBtn.disabled = false;
+        refreshBtn.textContent = '🔄 Refresh';
+    }
+}
+
+function renderTidalPlaylists() {
+    const container = document.getElementById('tidal-playlist-container');
+    if (tidalPlaylists.length === 0) {
+        container.innerHTML = `<div class="playlist-placeholder">No Tidal playlists found.</div>`;
+        return;
+    }
+
+    container.innerHTML = tidalPlaylists.map(p => {
+        // Initialize state if not exists (fresh state like sync.py)
+        if (!tidalPlaylistStates[p.id]) {
+            tidalPlaylistStates[p.id] = {
+                phase: 'fresh',
+                playlist: p
+            };
+        }
+
+        return createTidalCard(p);
+    }).join('');
+
+    // Add click handlers to cards
+    tidalPlaylists.forEach(p => {
+        const card = document.getElementById(`tidal-card-${p.id}`);
+        if (card) {
+            card.addEventListener('click', () => handleTidalCardClick(p.id));
+        }
+    });
+}
+
+function createTidalCard(playlist) {
+    const state = tidalPlaylistStates[playlist.id];
+    const phase = state.phase;
+
+    // Get phase-specific button text (like YouTube cards)
+    let buttonText = getActionButtonText(phase);
+    let phaseText = getPhaseText(phase);
+    let phaseColor = getPhaseColor(phase);
+
+    return `
+        <div class="youtube-playlist-card tidal-playlist-card" id="tidal-card-${playlist.id}">
+            <div class="playlist-card-icon">🎵</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">${playlist.track_count} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                <!-- Progress will be dynamically updated based on phase -->
+            </div>
+            <button class="playlist-card-action-btn">${buttonText}</button>
+        </div>
+    `;
+}
+
+async function handleTidalCardClick(playlistId) {
+    // Robust state validation
+    const state = tidalPlaylistStates[playlistId];
+    if (!state) {
+        console.error(`❌ [Card Click] No state found for Tidal playlist: ${playlistId}`);
+        showToast('Playlist state not found - try refreshing the page', 'error');
+        return;
+    }
+
+    // Validate required state data
+    if (!state.playlist) {
+        console.error(`❌ [Card Click] No playlist data found for Tidal playlist: ${playlistId}`);
+        showToast('Playlist data missing - try refreshing the page', 'error');
+        return;
+    }
+
+    // Validate phase
+    if (!state.phase) {
+        console.warn(`⚠️ [Card Click] No phase set for Tidal playlist ${playlistId} - defaulting to 'fresh'`);
+        state.phase = 'fresh';
+    }
+
+    console.log(`🎵 [Card Click] Tidal card clicked: ${playlistId}, Phase: ${state.phase}`);
+
+    if (state.phase === 'fresh') {
+        // Fetch tracks if not yet loaded (metadata-only listing doesn't include them)
+        if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
+            console.log(`🎵 Fetching tracks for Tidal playlist: ${state.playlist.name}`);
+            showLoadingOverlay(`Loading ${state.playlist.name}...`);
+            try {
+                const resp = await fetch(`/api/tidal/playlist/${playlistId}`);
+                if (resp.ok) {
+                    const fullData = await resp.json();
+                    if (fullData.tracks && fullData.tracks.length > 0) {
+                        // Convert to Track-like objects for the discovery modal
+                        state.playlist.tracks = fullData.tracks.map(t => ({
+                            id: t.id, name: t.name, artists: t.artists || [],
+                            album: t.album || '', duration_ms: t.duration_ms || 0,
+                            track_number: t.track_number || 0
+                        }));
+                        // Update card count
+                        const countEl = document.querySelector(`#tidal-card-${playlistId} .playlist-card-track-count`);
+                        if (countEl) countEl.textContent = `${state.playlist.tracks.length} tracks`;
+                    }
+                }
+            } catch (e) {
+                console.error(`Failed to fetch Tidal playlist tracks: ${e}`);
+                hideLoadingOverlay();
+            }
+        }
+
+        if (!state.playlist.tracks || state.playlist.tracks.length === 0) {
+            hideLoadingOverlay();
+            showToast('Could not load tracks for this playlist', 'error');
+            return;
+        }
+
+        hideLoadingOverlay();
+        console.log(`🎵 Ready with ${state.playlist.tracks.length} Tidal tracks for discovery`);
+
+        // Open discovery modal - phase will be updated when discovery actually starts
+        openTidalDiscoveryModal(playlistId, state.playlist);
+
+    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
+        // Reopen existing modal with preserved discovery results (like GUI sync.py)
+        console.log(`🎵 [Card Click] Opening Tidal discovery modal for ${state.phase} phase`);
+
+        // Validate that we have discovery results to show
+        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
+            console.warn(`⚠️ [Card Click] Discovered phase but no discovery results found - attempting to reload from backend`);
+
+            // Try to fetch from backend as fallback
+            try {
+                const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    if (fullState.discovery_results) {
+                        // Merge backend state with current state
+                        state.discovery_results = fullState.discovery_results;
+                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
+                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
+                        tidalPlaylistStates[playlistId] = { ...tidalPlaylistStates[playlistId], ...state };
+                        console.log(`✅ [Card Click] Restored ${fullState.discovery_results.length} discovery results from backend`);
+                    }
+                }
+            } catch (error) {
+                console.error(`❌ [Card Click] Failed to fetch discovery results from backend: ${error}`);
+            }
+        }
+
+        openTidalDiscoveryModal(playlistId, state.playlist);
+    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
+        // Open download modal if we have the converted playlist ID
+        if (state.convertedSpotifyPlaylistId) {
+            console.log(`🔍 [Card Click] Opening download modal for Tidal playlist: ${state.playlist.name} (phase: ${state.phase})`);
+            // Check if modal already exists, if not create it
+            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
+                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
+                if (process.modalElement) {
+                    console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
+                    process.modalElement.style.display = 'flex';
+                } else {
+                    console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
+                    await rehydrateTidalDownloadModal(playlistId, state);
+                }
+            } else {
+                // Need to create the download modal - fetch the discovery results
+                console.log(`🔧 [Card Click] Rehydrating Tidal download modal for ${state.phase} phase`);
+                await rehydrateTidalDownloadModal(playlistId, state);
+            }
+        } else {
+            console.error('❌ [Card Click] No converted Spotify playlist ID found for Tidal download modal');
+            console.log('📊 [Card Click] Available state data:', Object.keys(state));
+
+            // Fallback: try to open discovery modal if we have discovery results
+            if (state.discovery_results && state.discovery_results.length > 0) {
+                console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${state.discovery_results.length} results`);
+                openTidalDiscoveryModal(playlistId, state.playlist);
+            } else {
+                showToast('Unable to open download modal - missing playlist data', 'error');
+            }
+        }
+    }
+}
+
+async function rehydrateTidalDownloadModal(playlistId, state) {
+    try {
+        // Robust state validation for rehydration
+        if (!state || !state.playlist) {
+            console.error(`❌ [Rehydration] Invalid state data for Tidal playlist: ${playlistId}`);
+            showToast('Cannot open download modal - invalid playlist data', 'error');
+            return;
+        }
+
+        console.log(`💧 [Rehydration] Rehydrating Tidal download modal for: ${state.playlist.name}`);
+
+        // Get discovery results from backend if not already loaded
+        if (!state.discovery_results) {
+            console.log(`🔍 Fetching discovery results from backend for Tidal playlist: ${playlistId}`);
+            const stateResponse = await fetch(`/api/tidal/state/${playlistId}`);
+            if (stateResponse.ok) {
+                const fullState = await stateResponse.json();
+                state.discovery_results = fullState.discovery_results;
+                state.convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
+                state.download_process_id = fullState.download_process_id;
+                console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
+            } else {
+                console.error('❌ Failed to fetch Tidal discovery results from backend');
+                showToast('Error loading playlist data', 'error');
+                return;
+            }
+        }
+
+        // Extract Spotify tracks from discovery results
+        const spotifyTracks = [];
+        for (const result of state.discovery_results) {
+            if (result.spotify_data) {
+                spotifyTracks.push(result.spotify_data);
+            }
+        }
+
+        if (spotifyTracks.length === 0) {
+            console.error('❌ No Spotify tracks found for download modal');
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        const virtualPlaylistId = state.convertedSpotifyPlaylistId;
+        const playlistName = state.playlist.name;
+
+        // Create the download modal
+        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // If we have a download process ID, set up the modal for the running state
+        if (state.download_process_id) {
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                process.status = state.phase === 'download_complete' ? 'complete' : 'running';
+                process.batchId = state.download_process_id;
+
+                // Update UI based on phase
+                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+
+                if (state.phase === 'downloading') {
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Start polling for live updates
+                    startModalDownloadPolling(virtualPlaylistId);
+                    console.log(`🔄 Started polling for active Tidal download: ${state.download_process_id}`);
+                } else if (state.phase === 'download_complete') {
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'none';
+                    console.log(`✅ Showing completed Tidal download results: ${state.download_process_id}`);
+
+                    // For completed downloads, fetch the final results once to populate the modal
+                    try {
+                        const response = await fetch(`/api/playlists/${state.download_process_id}/download_status`);
+                        if (response.ok) {
+                            const data = await response.json();
+                            if (data.phase === 'complete' && data.tasks) {
+                                console.log(`📊 [Rehydration] Loading ${data.tasks.length} completed tasks for modal display`);
+                                // Process the completed tasks to update modal display
+                                updateCompletedModalResults(virtualPlaylistId, data);
+                            } else {
+                                console.warn(`⚠️ [Rehydration] Unexpected data from download_status: phase=${data.phase}, tasks=${data.tasks?.length || 0}`);
+                            }
+                        } else {
+                            console.error(`❌ [Rehydration] Failed to fetch download status: ${response.status} ${response.statusText}`);
+                        }
+                    } catch (error) {
+                        console.error(`❌ [Rehydration] Error fetching final results for completed download: ${error}`);
+                        // Show a user-friendly message but still allow modal to open
+                        showToast('Could not load download results - modal may show incomplete data', 'warning', 3000);
+                    }
+                }
+            }
+        }
+
+        console.log(`✅ Successfully rehydrated Tidal download modal for: ${state.playlist.name}`);
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating Tidal download modal:`, error);
+        showToast('Error opening download modal', 'error');
+    }
+}
+
+function updateCompletedModalResults(playlistId, downloadData) {
+    /**
+     * Update a completed download modal with final results
+     * This reuses the existing status polling logic but applies it once for completed state
+     */
+    console.log(`📊 [Completed Results] Updating modal ${playlistId} with final download results`);
+
+    // Validate input data
+    if (!downloadData || !downloadData.tasks) {
+        console.error(`❌ [Completed Results] Invalid download data for playlist ${playlistId}:`, downloadData);
+        return;
+    }
+
+    try {
+        // Update analysis progress to 100%
+        const analysisProgressFill = document.getElementById(`analysis-progress-fill-${playlistId}`);
+        const analysisProgressText = document.getElementById(`analysis-progress-text-${playlistId}`);
+        if (analysisProgressFill) analysisProgressFill.style.width = '100%';
+        if (analysisProgressText) analysisProgressText.textContent = 'Analysis complete!';
+
+        // Update analysis results and stats
+        if (downloadData.analysis_results) {
+            updateTrackAnalysisResults(playlistId, downloadData.analysis_results);
+            const foundCount = downloadData.analysis_results.filter(r => r.found).length;
+            const missingCount = downloadData.analysis_results.filter(r => !r.found).length;
+
+            const statFound = document.getElementById(`stat-found-${playlistId}`);
+            const statMissing = document.getElementById(`stat-missing-${playlistId}`);
+            if (statFound) statFound.textContent = foundCount;
+            if (statMissing) statMissing.textContent = missingCount;
+        }
+
+        // Process completed tasks to update individual track statuses
+        const missingTracks = (downloadData.analysis_results || []).filter(r => !r.found);
+        let completedCount = 0;
+        let failedOrCancelledCount = 0;
+        let notFoundCount = 0;
+
+        (downloadData.tasks || []).forEach(task => {
+            const row = document.querySelector(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index="${task.track_index}"]`);
+            if (!row) return;
+
+            row.dataset.taskId = task.task_id;
+            const statusEl = document.getElementById(`download-${playlistId}-${task.track_index}`);
+            const actionsEl = document.getElementById(`actions-${playlistId}-${task.track_index}`);
+
+            let statusText = '';
+            switch (task.status) {
+                case 'pending': statusText = '⏸️ Pending'; break;
+                case 'searching': statusText = '🔍 Searching...'; break;
+                case 'downloading': statusText = `⏬ Downloading... ${Math.round(task.progress || 0)}%`; break;
+                case 'post_processing': statusText = '⌛ Processing...'; break; // NEW VERIFICATION WORKFLOW
+                case 'completed': statusText = '✅ Completed'; completedCount++; break;
+                case 'not_found': statusText = '🔇 Not Found'; notFoundCount++; break;
+                case 'failed': statusText = '❌ Failed'; failedOrCancelledCount++; break;
+                case 'cancelled': statusText = '🚫 Cancelled'; failedOrCancelledCount++; break;
+                default: statusText = `⚪ ${task.status}`; break;
+            }
+
+            if (statusEl) {
+                statusEl.textContent = statusText;
+                if ((task.status === 'failed' || task.status === 'cancelled' || task.status === 'not_found') && task.error_message) {
+                    statusEl.classList.add('has-error-tooltip');
+                    statusEl.dataset.errorMsg = task.error_message;
+                    _ensureErrorTooltipListeners(statusEl);
+                }
+                if (task.status === 'not_found' && task.has_candidates) {
+                    statusEl.classList.add('has-candidates');
+                    statusEl.dataset.taskId = task.task_id;
+                    _ensureCandidatesClickListener(statusEl);
+                }
+            }
+            if (actionsEl) actionsEl.innerHTML = '-'; // Remove action buttons for completed tasks
+        });
+
+        // Update download progress to final state
+        const totalFinished = completedCount + failedOrCancelledCount + notFoundCount;
+        const missingCount = missingTracks.length;
+        const progressPercent = missingCount > 0 ? (totalFinished / missingCount) * 100 : 100;
+
+        const downloadProgressFill = document.getElementById(`download-progress-fill-${playlistId}`);
+        const downloadProgressText = document.getElementById(`download-progress-text-${playlistId}`);
+        const statDownloaded = document.getElementById(`stat-downloaded-${playlistId}`);
+
+        if (downloadProgressFill) downloadProgressFill.style.width = `${progressPercent}%`;
+        if (downloadProgressText) downloadProgressText.textContent = `${completedCount}/${missingCount} completed (${progressPercent.toFixed(0)}%)`;
+        if (statDownloaded) statDownloaded.textContent = completedCount;
+
+        console.log(`✅ [Completed Results] Updated modal with ${completedCount} completed, ${notFoundCount} not found, ${failedOrCancelledCount} failed tasks`);
+
+    } catch (error) {
+        console.error(`❌ [Completed Results] Error updating completed modal results:`, error);
+    }
+}
+
+function updateTidalCardPhase(playlistId, phase) {
+    const state = tidalPlaylistStates[playlistId];
+    if (!state) return;
+
+    state.phase = phase;
+
+    // Re-render the card with new phase
+    const card = document.getElementById(`tidal-card-${playlistId}`);
+    if (card) {
+        const oldButtonText = card.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
+        const newCardHtml = createTidalCard(state.playlist);
+        card.outerHTML = newCardHtml;
+
+        // Verify the card was actually updated
+        const updatedCard = document.getElementById(`tidal-card-${playlistId}`);
+        const newButtonText = updatedCard?.querySelector('.playlist-card-action-btn')?.textContent || 'unknown';
+
+        console.log(`🔄 [Card Update] Re-rendered Tidal card ${playlistId}:`);
+        console.log(`   📊 Phase: ${phase}`);
+        console.log(`   🔘 Button text: "${oldButtonText}" → "${newButtonText}"`);
+        console.log(`   ✅ Expected: "${getActionButtonText(phase)}"`);
+
+        if (newButtonText !== getActionButtonText(phase)) {
+            console.error(`❌ [Card Update] Button text mismatch! Expected "${getActionButtonText(phase)}", got "${newButtonText}"`);
+        }
+
+        // Re-attach click handler
+        const newCard = document.getElementById(`tidal-card-${playlistId}`);
+        if (newCard) {
+            newCard.addEventListener('click', () => handleTidalCardClick(playlistId));
+            console.debug(`🔗 [Card Update] Reattached click handler for Tidal card: ${playlistId}`);
+        } else {
+            console.error(`❌ [Card Update] Failed to find new card after rendering: tidal-card-${playlistId}`);
+        }
+
+        // If we have sync progress and we're in sync/sync_complete phase, restore it
+        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
+            setTimeout(() => {
+                updateTidalCardSyncProgress(playlistId, state.lastSyncProgress);
+            }, 0);
+        }
+    }
+
+    console.log(`🎵 Updated Tidal card phase: ${playlistId} -> ${phase}`);
+}
+
+async function openTidalDiscoveryModal(playlistId, playlistData) {
+    console.log(`🎵 Opening Tidal discovery modal (reusing YouTube modal): ${playlistData.name}`);
+
+    // Create a fake YouTube-style urlHash for the modal system
+    const fakeUrlHash = `tidal_${playlistId}`;
+
+    // Get current Tidal card state to check if discovery is already done or in progress
+    const tidalCardState = tidalPlaylistStates[playlistId];
+    const isAlreadyDiscovered = tidalCardState && (tidalCardState.phase === 'discovered' || tidalCardState.phase === 'syncing' || tidalCardState.phase === 'sync_complete');
+    const isCurrentlyDiscovering = tidalCardState && tidalCardState.phase === 'discovering';
+
+    // Prepare discovery results in the correct format for modal
+    let transformedResults = [];
+    let actualMatches = 0;
+    if (isAlreadyDiscovered && tidalCardState.discovery_results) {
+        transformedResults = tidalCardState.discovery_results.map((result, index) => {
+            // Check multiple status formats
+            const isFound = result.status === 'found' ||
+                result.status === '✅ Found' ||
+                result.status_class === 'found' ||
+                result.spotify_data ||
+                result.spotify_track;
+            if (isFound) actualMatches++;
+
+            return {
+                index: index,
+                yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
+                yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                status: isFound ? '✅ Found' : '❌ Not Found',
+                status_class: isFound ? 'found' : 'not-found',
+                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                    (Array.isArray(result.spotify_data.artists)
+                        ? result.spotify_data.artists
+                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                            .filter(Boolean)
+                            .join(', ') || '-'
+                        : result.spotify_data.artists)
+                    : (result.spotify_artist || '-'),
+                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                spotify_data: result.spotify_data, // Pass through spotify_data
+                spotify_id: result.spotify_id, // Pass through spotify_id
+                manual_match: result.manual_match // Pass through manual match flag
+            };
+        });
+        console.log(`🎵 Tidal modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
+    }
+
+    // Create YouTube-compatible state structure  
+    const modalPhase = tidalCardState ? tidalCardState.phase : 'fresh';
+    youtubePlaylistStates[fakeUrlHash] = {
+        phase: modalPhase,
+        playlist: {
+            name: playlistData.name,
+            tracks: playlistData.tracks
+        },
+        is_tidal_playlist: true,  // Flag to identify this as Tidal
+        tidal_playlist_id: playlistId,
+        discovery_progress: isAlreadyDiscovered ? 100 : 0,
+        spotify_matches: isAlreadyDiscovered ? actualMatches : 0, // Backend format (snake_case)
+        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0, // Frontend format (camelCase) - for button logic
+        spotify_total: playlistData.tracks.length,
+        discovery_results: transformedResults,
+        discoveryResults: transformedResults, // Both formats for compatibility
+        discoveryProgress: isAlreadyDiscovered ? 100 : 0 // Frontend format for modal progress display
+    };
+
+    // Only start discovery if not already discovered AND not currently discovering
+    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
+        // Start Tidal discovery process automatically (like sync.py)
+        try {
+            console.log(`🔍 Starting Tidal discovery for: ${playlistData.name}`);
+
+            const response = await fetch(`/api/tidal/discovery/start/${playlistId}`, {
+                method: 'POST'
+            });
+
+            const result = await response.json();
+
+            if (result.error) {
+                console.error('❌ Error starting Tidal discovery:', result.error);
+                showToast(`Error starting discovery: ${result.error}`, 'error');
+                return;
+            }
+
+            console.log('✅ Tidal discovery started, beginning polling...');
+
+            // Update phase to discovering now that backend discovery is actually started
+            tidalPlaylistStates[playlistId].phase = 'discovering';
+            updateTidalCardPhase(playlistId, 'discovering');
+
+            // Update modal phase to match
+            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
+
+            // Start polling for progress
+            startTidalDiscoveryPolling(fakeUrlHash, playlistId);
+
+        } catch (error) {
+            console.error('❌ Error starting Tidal discovery:', error);
+            showToast(`Error starting discovery: ${error.message}`, 'error');
+        }
+    } else if (isCurrentlyDiscovering) {
+        // Resume polling if discovery is already in progress (like YouTube)
+        console.log(`🔄 Resuming Tidal discovery polling for: ${playlistData.name}`);
+        startTidalDiscoveryPolling(fakeUrlHash, playlistId);
+    } else if (tidalCardState && tidalCardState.phase === 'syncing') {
+        // Resume sync polling if sync is in progress
+        console.log(`🔄 Resuming Tidal sync polling for: ${playlistData.name}`);
+        startTidalSyncPolling(fakeUrlHash);
+    } else {
+        console.log('✅ Using existing results - no need to re-discover');
+    }
+
+    // Reuse YouTube discovery modal (exact sync.py pattern)
+    openYouTubeDiscoveryModal(fakeUrlHash);
+}
+
+function startTidalDiscoveryPolling(fakeUrlHash, playlistId) {
+    console.log(`🔄 Starting Tidal discovery polling for: ${playlistId}`);
+
+    // Stop any existing polling
+    if (activeYouTubePollers[fakeUrlHash]) {
+        clearInterval(activeYouTubePollers[fakeUrlHash]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [playlistId] });
+        _discoveryProgressCallbacks[playlistId] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
+                return;
+            }
+            // Transform to YouTube modal format
+            const transformed = {
+                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
+                complete: data.complete,
+                results: (data.results || []).map((r, i) => {
+                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
+                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
+                    return {
+                        index: i, yt_track: r.tidal_track ? r.tidal_track.name : 'Unknown',
+                        yt_artist: r.tidal_track ? (r.tidal_track.artists ? r.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
+                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
+                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
+                        spotify_artist: r.spotify_data && r.spotify_data.artists
+                            ? (Array.isArray(r.spotify_data.artists)
+                                ? (r.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : r.spotify_data.artists)
+                            : (r.spotify_artist || '-'),
+                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
+                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
+                        wing_it_fallback: isWingIt
+                    };
+                })
+            };
+            const st = youtubePlaylistStates[fakeUrlHash];
+            if (st) {
+                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
+                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
+                st.discovery_results = data.results; st.discoveryResults = transformed.results;
+                st.phase = data.phase;
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
+            }
+            if (tidalPlaylistStates[playlistId]) {
+                tidalPlaylistStates[playlistId].phase = data.phase;
+                tidalPlaylistStates[playlistId].discovery_results = data.results;
+                tidalPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
+                tidalPlaylistStates[playlistId].discovery_progress = data.progress;
+                updateTidalCardPhase(playlistId, data.phase);
+            }
+            updateTidalCardProgress(playlistId, data);
+            if (data.complete) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/tidal/discovery/status/${playlistId}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling Tidal discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+                return;
+            }
+
+            // Transform Tidal results to YouTube modal format first
+            const transformedStatus = {
+                progress: status.progress,
+                spotify_matches: status.spotify_matches,
+                spotify_total: status.spotify_total,
+                complete: status.complete,
+                results: status.results.map((result, index) => {
+                    const isFound = result.status === 'found' ||
+                        result.status === '✅ Found' ||
+                        result.status_class === 'found' ||
+                        result.spotify_data ||
+                        result.spotify_track;
+
+                    return {
+                        index: index,
+                        yt_track: result.tidal_track ? result.tidal_track.name : 'Unknown',
+                        yt_artist: result.tidal_track ? (result.tidal_track.artists ? result.tidal_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isFound ? '✅ Found' : '❌ Not Found',
+                        status_class: isFound ? 'found' : 'not-found',
+                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                        spotify_artist: result.spotify_data && result.spotify_data.artists
+                            ? (Array.isArray(result.spotify_data.artists)
+                                ? (result.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : result.spotify_data.artists)
+                            : (result.spotify_artist || '-'),
+                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                        spotify_data: result.spotify_data, // Pass through
+                        spotify_id: result.spotify_id, // Pass through
+                        manual_match: result.manual_match // Pass through
+                    };
+                })
+            };
+
+            // Update fake YouTube state with Tidal discovery results
+            const state = youtubePlaylistStates[fakeUrlHash];
+            if (state) {
+                state.discovery_progress = status.progress; // Backend format
+                state.discoveryProgress = status.progress; // Frontend format - for modal progress display
+                state.spotify_matches = status.spotify_matches; // Backend format
+                state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
+                state.discovery_results = status.results; // Backend format
+                state.discoveryResults = transformedStatus.results; // Frontend format - for button logic  
+                state.phase = status.phase;
+
+                // Update modal with transformed data (reuse YouTube modal update logic)
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
+
+                // Update Tidal card phase and save discovery results FIRST
+                if (tidalPlaylistStates[playlistId]) {
+                    tidalPlaylistStates[playlistId].phase = status.phase;
+                    tidalPlaylistStates[playlistId].discovery_results = status.results;
+                    tidalPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
+                    tidalPlaylistStates[playlistId].discovery_progress = status.progress;
+                    updateTidalCardPhase(playlistId, status.phase);
+                }
+
+                // Update Tidal card progress AFTER phase update to avoid being overwritten
+                updateTidalCardProgress(playlistId, status);
+
+                console.log(`🔄 Tidal discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
+            }
+
+            // Stop polling when complete
+            if (status.complete) {
+                console.log(`✅ Tidal discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+            }
+
+        } catch (error) {
+            console.error('❌ Error polling Tidal discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[fakeUrlHash];
+        }
+    }, 1000); // Poll every second like YouTube
+
+    // Store poller reference (reuse YouTube poller storage)
+    activeYouTubePollers[fakeUrlHash] = pollInterval;
+}
+
+async function loadTidalPlaylistStatesFromBackend() {
+    // Load all stored Tidal playlist discovery states from backend (similar to YouTube hydration)
+    try {
+        console.log('🎵 Loading Tidal playlist states from backend...');
+
+        const response = await fetch('/api/tidal/playlists/states');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Tidal playlist states');
+        }
+
+        const data = await response.json();
+        const states = data.states || [];
+
+        console.log(`🎵 Found ${states.length} stored Tidal playlist states in backend`);
+
+        if (states.length === 0) {
+            console.log('🎵 No Tidal playlist states to hydrate');
+            return;
+        }
+
+        // Apply states to existing playlist cards
+        for (const stateInfo of states) {
+            await applyTidalPlaylistState(stateInfo);
+        }
+
+        // Rehydrate download modals for Tidal playlists in downloading/download_complete phases
+        for (const stateInfo of states) {
+            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
+                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
+
+                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
+
+                if (!activeDownloadProcesses[convertedPlaylistId]) {
+                    console.log(`💧 Rehydrating download modal for Tidal playlist: ${stateInfo.playlist_id}`);
+                    try {
+                        // Get the playlist data
+                        const playlistData = tidalPlaylists.find(p => p.id === stateInfo.playlist_id);
+                        if (!playlistData) {
+                            console.warn(`⚠️ Playlist data not found for rehydration: ${stateInfo.playlist_id}`);
+                            continue;
+                        }
+
+                        // Create the download modal using the Tidal-specific function
+                        const spotifyTracks = tidalPlaylistStates[stateInfo.playlist_id]?.discovery_results
+                            ?.filter(result => result.spotify_data)
+                            ?.map(result => result.spotify_data) || [];
+
+                        if (spotifyTracks.length > 0) {
+                            await openDownloadMissingModalForTidal(
+                                convertedPlaylistId,
+                                playlistData.name,
+                                spotifyTracks
+                            );
+
+                            // Set the modal to running state with the correct batch ID
+                            const process = activeDownloadProcesses[convertedPlaylistId];
+                            if (process) {
+                                process.status = 'running';
+                                process.batchId = stateInfo.download_process_id;
+
+                                // Update UI to running state
+                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                                if (beginBtn) beginBtn.style.display = 'none';
+                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                                // Start polling for this process
+                                startModalDownloadPolling(convertedPlaylistId);
+
+                                console.log(`✅ Rehydrated Tidal download modal for batch ${stateInfo.download_process_id}`);
+                            }
+                        } else {
+                            console.warn(`⚠️ No Spotify tracks found for Tidal playlist rehydration: ${stateInfo.playlist_id}`);
+                        }
+                    } catch (error) {
+                        console.error(`❌ Error rehydrating Tidal download modal for ${stateInfo.playlist_id}:`, error);
+                    }
+                }
+            }
+        }
+
+        console.log('✅ Tidal playlist states loaded and applied');
+
+    } catch (error) {
+        console.error('❌ Error loading Tidal playlist states:', error);
+    }
+}
+
+async function applyTidalPlaylistState(stateInfo) {
+    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
+
+    try {
+        console.log(`🎵 Applying saved state for Tidal playlist: ${playlist_id}, Phase: ${phase}`);
+
+        // Find the playlist data from the loaded playlists
+        const playlistData = tidalPlaylists.find(p => p.id === playlist_id);
+        if (!playlistData) {
+            console.warn(`⚠️ Playlist data not found for state ${playlist_id} - skipping`);
+            return;
+        }
+
+        // Update local state
+        if (!tidalPlaylistStates[playlist_id]) {
+            // Initialize state if it doesn't exist
+            tidalPlaylistStates[playlist_id] = {
+                playlist: playlistData,
+                phase: 'fresh'
+            };
+        }
+
+        // Update with backend state
+        tidalPlaylistStates[playlist_id].phase = phase;
+        tidalPlaylistStates[playlist_id].discovery_progress = discovery_progress;
+        tidalPlaylistStates[playlist_id].spotify_matches = spotify_matches;
+        tidalPlaylistStates[playlist_id].discovery_results = discovery_results;
+        tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
+        tidalPlaylistStates[playlist_id].download_process_id = download_process_id;
+        tidalPlaylistStates[playlist_id].playlist = playlistData; // Ensure playlist data is set
+
+        // Fetch full discovery results for non-fresh playlists (matching YouTube pattern)
+        if (phase !== 'fresh' && phase !== 'discovering') {
+            try {
+                console.log(`🔍 Fetching full discovery results for Tidal playlist: ${playlistData.name}`);
+                const stateResponse = await fetch(`/api/tidal/state/${playlist_id}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    console.log(`📋 Retrieved full Tidal state with ${fullState.discovery_results?.length || 0} discovery results`);
+
+                    // Store full discovery results in local state (matching YouTube pattern)
+                    if (fullState.discovery_results && tidalPlaylistStates[playlist_id]) {
+                        tidalPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
+                        tidalPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
+                        tidalPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
+                        tidalPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
+                        tidalPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
+                        console.log(`✅ Restored ${fullState.discovery_results.length} discovery results for Tidal playlist: ${playlistData.name}`);
+                    }
+                } else {
+                    console.warn(`⚠️ Could not fetch full discovery results for Tidal playlist: ${playlistData.name}`);
+                }
+            } catch (error) {
+                console.warn(`⚠️ Error fetching full discovery results for Tidal playlist ${playlistData.name}:`, error.message);
+            }
+        }
+
+        // Update the card UI to reflect the saved state
+        updateTidalCardPhase(playlist_id, phase);
+
+        // Update card progress if we have discovery results
+        if (phase === 'discovered' && tidalPlaylistStates[playlist_id]) {
+            const progressInfo = {
+                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
+                spotify_matches: tidalPlaylistStates[playlist_id].spotify_matches || 0
+            };
+            updateTidalCardProgress(playlist_id, progressInfo);
+        }
+
+        // Handle active polling resumption (matching YouTube/Beatport pattern)
+        if (phase === 'discovering') {
+            console.log(`🔍 Resuming discovery polling for Tidal: ${playlistData.name}`);
+            const fakeUrlHash = `tidal_${playlist_id}`;
+            startTidalDiscoveryPolling(fakeUrlHash, playlist_id);
+        } else if (phase === 'syncing') {
+            console.log(`🔄 Resuming sync polling for Tidal: ${playlistData.name}`);
+            const fakeUrlHash = `tidal_${playlist_id}`;
+            startTidalSyncPolling(fakeUrlHash);
+        }
+
+        console.log(`✅ Applied saved state for Tidal playlist: ${playlist_id} -> ${phase}`);
+
+    } catch (error) {
+        console.error(`❌ Error applying Tidal playlist state for ${playlist_id}:`, error);
+    }
+}
+
+function updateTidalCardProgress(playlistId, progress) {
+    const state = tidalPlaylistStates[playlistId];
+    if (!state) return;
+
+    const card = document.getElementById(`tidal-card-${playlistId}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+    if (!progressElement) return;
+
+    const total = progress.spotify_total || 0;
+    const matches = progress.spotify_matches || 0;
+    const failed = total - matches;
+    const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
+
+    progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
+    progressElement.classList.remove('hidden'); // Show progress during discovery
+
+    console.log('🎵 Updated Tidal card progress:', playlistId, `${matches}/${total} (${percentage}%)`);
+}
+
+// ===============================
+// TIDAL SYNC FUNCTIONALITY
+// ===============================
+
+async function startTidalPlaylistSync(urlHash) {
+    try {
+        console.log('🎵 Starting Tidal playlist sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_tidal_playlist) {
+            console.error('❌ Invalid Tidal playlist state for sync');
+            return;
+        }
+
+        const playlistId = state.tidal_playlist_id;
+        const response = await fetch(`/api/tidal/sync/start/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Capture sync_playlist_id for WebSocket subscription
+        const syncPlaylistId = result.sync_playlist_id;
+        if (state) state.syncPlaylistId = syncPlaylistId;
+
+        // Update card and modal to syncing phase
+        updateTidalCardPhase(playlistId, 'syncing');
+
+        // Update modal buttons if modal is open
+        updateTidalModalButtons(urlHash, 'syncing');
+
+        // Start sync polling
+        startTidalSyncPolling(urlHash, syncPlaylistId);
+
+        showToast('Tidal playlist sync started!', 'success');
+
+    } catch (error) {
+        console.error('❌ Error starting Tidal sync:', error);
+        showToast(`Error starting sync: ${error.message}`, 'error');
+    }
+}
+
+function startTidalSyncPolling(urlHash, syncPlaylistId) {
+    // Stop any existing polling
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    const state = youtubePlaylistStates[urlHash];
+    const playlistId = state.tidal_playlist_id;
+
+    // Resolve syncPlaylistId from argument or stored state
+    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
+
+    // Phase 6: Subscribe via WebSocket
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateTidalCardSyncProgress(playlistId, progress);
+            updateTidalModalSyncProgress(urlHash, progress);
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateTidalCardPhase(playlistId, 'sync_complete');
+                updateTidalModalButtons(urlHash, 'sync_complete');
+                showToast('Tidal playlist sync complete!', 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateTidalCardPhase(playlistId, 'discovered');
+                updateTidalModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    // Define the polling function (HTTP fallback)
+    const pollFunction = async () => {
+        if (socketConnected) return; // Phase 6: WS handles updates
+        try {
+            const response = await fetch(`/api/tidal/sync/status/${playlistId}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling Tidal sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            updateTidalCardSyncProgress(playlistId, status.progress);
+            updateTidalModalSyncProgress(urlHash, status.progress);
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateTidalCardPhase(playlistId, 'sync_complete');
+                updateTidalModalButtons(urlHash, 'sync_complete');
+                showToast('Tidal playlist sync complete!', 'success');
+            } else if (status.sync_status === 'error') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (tidalPlaylistStates[playlistId]) tidalPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateTidalCardPhase(playlistId, 'discovered');
+                updateTidalModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
+            }
+        } catch (error) {
+            console.error('❌ Error polling Tidal sync:', error);
+            if (activeYouTubePollers[urlHash]) {
+                clearInterval(activeYouTubePollers[urlHash]);
+                delete activeYouTubePollers[urlHash];
+            }
+        }
+    };
+
+    // Run immediately to get current status (skip if WS active)
+    if (!socketConnected) pollFunction();
+
+    // Then continue polling at regular intervals
+    const pollInterval = setInterval(pollFunction, 1000);
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+async function cancelTidalSync(urlHash) {
+    try {
+        console.log('❌ Cancelling Tidal sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_tidal_playlist) {
+            console.error('❌ Invalid Tidal playlist state');
+            return;
+        }
+
+        const playlistId = state.tidal_playlist_id;
+        const response = await fetch(`/api/tidal/sync/cancel/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error cancelling sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Stop polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Phase 6: Clean up WS subscription
+        const syncId = state && state.syncPlaylistId;
+        if (syncId && _syncProgressCallbacks[syncId]) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
+            delete _syncProgressCallbacks[syncId];
+        }
+
+        // Revert to discovered phase
+        updateTidalCardPhase(playlistId, 'discovered');
+        updateTidalModalButtons(urlHash, 'discovered');
+
+        showToast('Tidal sync cancelled', 'info');
+
+    } catch (error) {
+        console.error('❌ Error cancelling Tidal sync:', error);
+        showToast(`Error cancelling sync: ${error.message}`, 'error');
+    }
+}
+
+function updateTidalCardSyncProgress(playlistId, progress) {
+    const state = tidalPlaylistStates[playlistId];
+    if (!state || !state.playlist || !progress) return;
+
+    // Save the progress for later restoration
+    state.lastSyncProgress = progress;
+
+    const card = document.getElementById(`tidal-card-${playlistId}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    // Build clean status counter HTML exactly like YouTube cards
+    let statusCounterHTML = '';
+    if (progress && progress.total_tracks > 0) {
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const processed = matched + failed;
+        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+        statusCounterHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat matched-tracks">✓ ${matched}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat failed-tracks">✗ ${failed}</span>
+                <span class="sync-stat percentage">(${percentage}%)</span>
+            </div>
+        `;
+    }
+
+    // Only update if we have valid sync progress, otherwise preserve existing discovery results
+    if (statusCounterHTML) {
+        progressElement.innerHTML = statusCounterHTML;
+    }
+
+    console.log(`🎵 Updated Tidal card sync progress: ♪ ${progress?.total_tracks || 0} / ✓ ${progress?.matched_tracks || 0} / ✗ ${progress?.failed_tracks || 0}`);
+}
+
+function updateTidalModalSyncProgress(urlHash, progress) {
+    const statusDisplay = document.getElementById(`tidal-sync-status-${urlHash}`);
+    if (!statusDisplay || !progress) return;
+
+    console.log(`📊 Updating Tidal modal sync progress for ${urlHash}:`, progress);
+
+    // Update individual counters exactly like YouTube sync
+    const totalEl = document.getElementById(`tidal-total-${urlHash}`);
+    const matchedEl = document.getElementById(`tidal-matched-${urlHash}`);
+    const failedEl = document.getElementById(`tidal-failed-${urlHash}`);
+    const percentageEl = document.getElementById(`tidal-percentage-${urlHash}`);
+
+    const total = progress.total_tracks || 0;
+    const matched = progress.matched_tracks || 0;
+    const failed = progress.failed_tracks || 0;
+
+    if (totalEl) totalEl.textContent = total;
+    if (matchedEl) matchedEl.textContent = matched;
+    if (failedEl) failedEl.textContent = failed;
+
+    // Calculate percentage like YouTube sync
+    if (total > 0) {
+        const processed = matched + failed;
+        const percentage = Math.round((processed / total) * 100);
+        if (percentageEl) percentageEl.textContent = percentage;
+    }
+
+    console.log(`📊 Tidal modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
+}
+
+function updateTidalModalButtons(urlHash, phase) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (!modal) return;
+
+    const footerLeft = modal.querySelector('.modal-footer-left');
+    if (footerLeft) {
+        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
+    }
+}
+
+async function startTidalDownloadMissing(urlHash) {
+    try {
+        console.log('🔍 Starting download missing tracks for Tidal playlist:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_tidal_playlist) {
+            console.error('❌ Invalid Tidal playlist state for download');
+            return;
+        }
+
+        // Tidal reuses youtubePlaylistStates infrastructure, so get results from there
+        const discoveryResults = state.discoveryResults || state.discovery_results;
+
+        if (!discoveryResults) {
+            showToast('No discovery results available for download', 'error');
+            return;
+        }
+
+        // Convert Tidal discovery results to Spotify tracks format (same as YouTube)
+        const spotifyTracks = [];
+        for (const result of discoveryResults) {
+            if (result.spotify_data) {
+                spotifyTracks.push(result.spotify_data);
+            } else if (result.spotify_track && result.status_class === 'found') {
+                // Build from individual fields (automatic discovery format)
+                // Convert album to proper object format for wishlist compatibility
+                const albumData = result.spotify_album || 'Unknown Album';
+                const albumObject = typeof albumData === 'object' && albumData !== null
+                    ? albumData
+                    : {
+                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
+                        album_type: 'album',
+                        images: []
+                    };
+
+                spotifyTracks.push({
+                    id: result.spotify_id || 'unknown',
+                    name: result.spotify_track || 'Unknown Track',
+                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
+                    album: albumObject,
+                    duration_ms: 0
+                });
+            }
+        }
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        // Create a virtual playlist for the download system
+        const virtualPlaylistId = `tidal_${state.tidal_playlist_id}`;
+        const playlistName = state.playlist.name;
+
+        // Store reference for card navigation (same as YouTube)
+        state.convertedSpotifyPlaylistId = virtualPlaylistId;
+
+        // Close the discovery modal if it's open (same as YouTube)
+        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (discoveryModal) {
+            discoveryModal.classList.add('hidden');
+            console.log('🔄 Closed Tidal discovery modal to show download modal');
+        }
+
+        // Open download missing tracks modal for Tidal playlist
+        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // Phase will change to 'downloading' when user clicks "Begin Analysis" button
+
+    } catch (error) {
+        console.error('❌ Error starting download missing tracks:', error);
+        showToast(`Error starting downloads: ${error.message}`, 'error');
+    }
+}
+
+async function openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks) {
+    showLoadingOverlay('Loading Tidal playlist...');
+    // Check if a process is already active for this virtual playlist
+    if (activeDownloadProcesses[virtualPlaylistId]) {
+        console.log(`Modal for ${virtualPlaylistId} already exists. Showing it.`);
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process.modalElement) {
+            if (process.status === 'complete') {
+                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+            }
+            process.modalElement.style.display = 'flex';
+        }
+        return;
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for Tidal playlist: ${virtualPlaylistId}`);
+
+    // Create virtual playlist object for compatibility with existing modal logic
+    const virtualPlaylist = {
+        id: virtualPlaylistId,
+        name: playlistName,
+        track_count: spotifyTracks.length
+    };
+
+    // Store the tracks in the cache for the modal to use
+    playlistTrackCache[virtualPlaylistId] = spotifyTracks;
+    currentPlaylistTracks = spotifyTracks;
+    currentModalPlaylistId = virtualPlaylistId;
+
+    let modal = document.createElement('div');
+    modal.id = `download-missing-modal-${virtualPlaylistId}`;
+    modal.className = 'download-missing-modal';
+    modal.style.display = 'none';
+    document.body.appendChild(modal);
+
+    // Register the new process in our global state tracker using the same structure as Spotify
+    activeDownloadProcesses[virtualPlaylistId] = {
+        status: 'idle',
+        modalElement: modal,
+        poller: null,
+        batchId: null,
+        playlist: virtualPlaylist,
+        tracks: spotifyTracks
+    };
+
+    // Generate hero section with dynamic source detection (same as YouTube/Beatport)
+    const source = virtualPlaylistId.startsWith('beatport_') ? 'Beatport' :
+        virtualPlaylistId.startsWith('tidal_') ? 'Tidal' :
+            virtualPlaylistId.startsWith('listenbrainz_') ? 'ListenBrainz' :
+                virtualPlaylistId.startsWith('spotify_public_') ? 'Spotify' :
+                    virtualPlaylistId.startsWith('spotify:') ? 'Spotify' :
+                        virtualPlaylistId.startsWith('discover_') ? 'SoulSync' :
+                            virtualPlaylistId.startsWith('seasonal_') ? 'SoulSync' :
+                                virtualPlaylistId.startsWith('spotify_library_') ? 'SoulSync' :
+                                    virtualPlaylistId.startsWith('build_playlist_') ? 'SoulSync' :
+                                        virtualPlaylistId.startsWith('decade_') ? 'SoulSync' :
+                                            virtualPlaylistId === 'build_playlist_custom' ? 'SoulSync' :
+                                                'YouTube';
+
+    const heroContext = {
+        type: 'playlist',
+        playlist: { name: playlistName, owner: source },
+        trackCount: spotifyTracks.length,
+        playlistId: virtualPlaylistId
+    };
+
+    // Use the exact same modal HTML structure as the existing Spotify modal
+    modal.innerHTML = `
+        <div class="download-missing-modal-content" data-context="playlist">
+            <div class="download-missing-modal-header">
+                ${generateDownloadModalHeroSection(heroContext)}
+            </div>
+
+            <div class="download-missing-modal-body">
+                <div class="download-progress-section">
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            🔍 Library Analysis
+                            <span id="analysis-progress-text-${virtualPlaylistId}">Ready to start</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill analysis" id="analysis-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            ⏬ Downloads
+                            <span id="download-progress-text-${virtualPlaylistId}">Waiting for analysis</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill download" id="download-progress-fill-${virtualPlaylistId}"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="download-tracks-section">
+                    <div class="download-tracks-header">
+                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
+                        <span class="track-selection-count" id="track-selection-count-${virtualPlaylistId}">${spotifyTracks.length} / ${spotifyTracks.length} tracks selected</span>
+                    </div>
+                    <div class="download-tracks-table-container">
+                        <table class="download-tracks-table">
+                            <thead>
+                                <tr>
+                                    <th class="track-select-header">
+                                        <input type="checkbox" class="track-select-all"
+                                               id="select-all-${virtualPlaylistId}" checked
+                                               onchange="toggleAllTrackSelections('${virtualPlaylistId}', this.checked)">
+                                    </th>
+                                    <th>#</th>
+                                    <th>Track</th>
+                                    <th>Artist</th>
+                                    <th>Duration</th>
+                                    <th>Library Match</th>
+                                    <th>Download Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="download-tracks-tbody-${virtualPlaylistId}">
+                                ${spotifyTracks.map((track, index) => `
+                                    <tr data-track-index="${index}">
+                                        <td class="track-select-cell">
+                                            <input type="checkbox" class="track-select-cb"
+                                                   data-track-index="${index}" checked
+                                                   onchange="updateTrackSelectionCount('${virtualPlaylistId}')">
+                                        </td>
+                                        <td class="track-number">${index + 1}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
+                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
+                                        <td class="track-match-status match-checking" id="match-${virtualPlaylistId}-${index}">🔍 Pending</td>
+                                        <td class="track-download-status" id="download-${virtualPlaylistId}-${index}">-</td>
+                                        <td class="track-actions" id="actions-${virtualPlaylistId}-${index}">-</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="download-missing-modal-footer">
+                <div class="download-phase-controls">
+                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="force-download-all-${virtualPlaylistId}">
+                            <span>Force Download All</span>
+                        </label>
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="playlist-folder-mode-${virtualPlaylistId}">
+                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
+                        </label>
+                    </div>
+                    <button class="download-control-btn primary" id="begin-analysis-btn-${virtualPlaylistId}" onclick="startMissingTracksProcess('${virtualPlaylistId}')">
+                        Begin Analysis
+                    </button>
+                    <button class="download-control-btn" id="add-to-wishlist-btn-${virtualPlaylistId}" onclick="addModalTracksToWishlist('${virtualPlaylistId}')" style="background-color: #9333ea; color: white;">
+                        Add to Wishlist
+                    </button>
+                    <button class="download-control-btn danger" id="cancel-all-btn-${virtualPlaylistId}" onclick="cancelAllOperations('${virtualPlaylistId}')" style="display: none;">
+                        Cancel All
+                    </button>
+                </div>
+                <div class="modal-close-section">
+                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${virtualPlaylistId}')">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    applyProgressiveTrackRendering(virtualPlaylistId, spotifyTracks.length);
+    modal.style.display = 'flex';
+    hideLoadingOverlay();
+}
+
+
+// ===================================================================
+// DEEZER ARL PLAYLIST MANAGEMENT (Spotify-identical pattern)
+// ===================================================================
+
+async function loadDeezerArlPlaylists() {
+    const container = document.getElementById('deezer-arl-playlist-container');
+    const refreshBtn = document.getElementById('deezer-arl-refresh-btn');
+
+    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading playlists...</div>`;
+    refreshBtn.disabled = true;
+    refreshBtn.textContent = '🔄 Loading...';
+
+    try {
+        const response = await fetch('/api/deezer/arl-playlists');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Deezer playlists');
+        }
+        deezerArlPlaylists = await response.json();
+        renderDeezerArlPlaylists();
+        deezerArlPlaylistsLoaded = true;
+
+        // Check for active syncs or downloads and rehydrate UI
+        await checkForActiveProcesses();
+        for (const p of deezerArlPlaylists) {
+            const arlId = `deezer_arl_${p.id}`;
+            try {
+                const syncResp = await fetch(`/api/sync/status/${arlId}`);
+                if (syncResp.ok) {
+                    const syncState = await syncResp.json();
+                    if (syncState.status === 'syncing') {
+                        // Re-attach sync polling and update card UI
+                        if (!spotifyPlaylists.find(sp => sp.id === arlId)) {
+                            spotifyPlaylists.push({ id: arlId, name: p.name, track_count: p.track_count || 0, image_url: p.image_url || '', owner: p.owner || '' });
+                        }
+                        updateCardToSyncing(arlId, syncState.progress?.progress || 0, syncState.progress);
+                        startSyncPolling(arlId);
+                        console.log(`🔄 Rehydrated active sync for Deezer ARL playlist: ${p.name}`);
+                    }
+                }
+            } catch (e) { /* No active sync — normal */ }
+        }
+
+    } catch (error) {
+        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
+        showToast(`Error loading Deezer playlists: ${error.message}`, 'error');
+    } finally {
+        refreshBtn.disabled = false;
+        refreshBtn.textContent = '🔄 Refresh';
+    }
+}
+
+function renderDeezerArlPlaylists() {
+    const container = document.getElementById('deezer-arl-playlist-container');
+    if (deezerArlPlaylists.length === 0) {
+        container.innerHTML = `<div class="playlist-placeholder">No Deezer playlists found.</div>`;
+        return;
+    }
+
+    container.innerHTML = deezerArlPlaylists.map(p => {
+        const arlId = `deezer_arl_${p.id}`;
+        let statusClass = 'status-never-synced';
+        if (p.sync_status && p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
+
+        return `
+        <div class="playlist-card deezer-arl-playlist-card" data-playlist-id="${arlId}">
+            <div class="playlist-card-main">
+                <div class="playlist-card-content">
+                    <div class="playlist-card-name">${escapeHtml(p.name)}</div>
+                    <div class="playlist-card-info">
+                        <span>${p.track_count} tracks</span> •
+                        <span class="playlist-card-status ${statusClass}">${p.sync_status || 'Never Synced'}</span>
+                    </div>
+                    <div class="sync-progress-indicator" id="progress-${arlId}"></div>
+                </div>
+                <div class="playlist-card-actions">
+                    <button id="action-btn-${arlId}" onclick="openDeezerArlPlaylistDetailsModal(event, '${p.id}')">Sync / Download</button>
+                    <button id="progress-btn-${arlId}" class="view-progress-btn hidden" onclick="handleDeezerArlViewProgressClick(event, '${p.id}')">
+                        View Progress
+                    </button>
+                </div>
+            </div>
+        </div>
+        `;
+    }).join('');
+}
+
+function handleDeezerArlViewProgressClick(event, playlistId) {
+    event.stopPropagation();
+    const arlPlaylistId = `deezer_arl_${playlistId}`;
+    const process = activeDownloadProcesses[arlPlaylistId];
+    if (process && process.modalElement) {
+        process.modalElement.style.display = 'flex';
+    }
+}
+
+async function openDeezerArlPlaylistDetailsModal(event, playlistId) {
+    event.stopPropagation();
+
+    const playlist = deezerArlPlaylists.find(p => String(p.id) === String(playlistId));
+    if (!playlist) return;
+
+    const arlPlaylistId = `deezer_arl_${playlistId}`;
+    showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
+
+    try {
+        if (playlistTrackCache[arlPlaylistId]) {
+            const fullPlaylist = { ...playlist, id: arlPlaylistId, tracks: playlistTrackCache[arlPlaylistId] };
+            showDeezerArlPlaylistDetailsModal(fullPlaylist, playlistId);
+        } else {
+            const response = await fetch(`/api/deezer/arl-playlist/${playlistId}`);
+            const fullPlaylist = await response.json();
+            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
+
+            playlistTrackCache[arlPlaylistId] = fullPlaylist.tracks;
+
+            // Auto-mirror
+            mirrorPlaylist('deezer', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
+                track_name: t.name,
+                artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
+                album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
+                duration_ms: t.duration_ms || 0,
+                source_track_id: t.id || ''
+            })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
+
+            showDeezerArlPlaylistDetailsModal({ ...fullPlaylist, id: arlPlaylistId }, playlistId);
+        }
+    } catch (error) {
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function showDeezerArlPlaylistDetailsModal(playlist, originalDeezerPlaylistId) {
+    let modal = document.getElementById('deezer-arl-playlist-details-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'deezer-arl-playlist-details-modal';
+        modal.className = 'modal-overlay';
+        document.body.appendChild(modal);
+    }
+
+    const playlistId = playlist.id;
+    const activeProcess = activeDownloadProcesses[playlistId];
+    const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
+    const isSyncing = !!activeSyncPollers[playlistId];
+
+    modal.innerHTML = `
+        <div class="modal-container playlist-modal">
+            <div class="playlist-modal-header">
+                <div class="playlist-header-content">
+                    <h2>${escapeHtml(playlist.name)}</h2>
+                    <div class="playlist-quick-info">
+                        <span class="playlist-track-count">${playlist.track_count || (playlist.tracks ? playlist.tracks.length : 0)} tracks</span>
+                        <span class="playlist-owner">by ${escapeHtml(playlist.owner || '')}</span>
+                    </div>
+                    <div class="playlist-modal-sync-status" id="modal-sync-status-${playlistId}" style="display: none;">
+                        <span class="sync-stat total-tracks">♪ <span id="modal-total-${playlistId}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="modal-matched-${playlistId}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="modal-failed-${playlistId}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="modal-percentage-${playlistId}">0</span>%)</span>
+                    </div>
+                </div>
+                <span class="playlist-modal-close" onclick="closeDeezerArlPlaylistDetailsModal()">&times;</span>
+            </div>
+
+            <div class="playlist-modal-body">
+                ${playlist.description ? `<div class="playlist-description">${escapeHtml(playlist.description)}</div>` : ''}
+
+                <div class="playlist-tracks-container">
+                    <div class="playlist-tracks-list">
+                        ${(playlist.tracks || []).map((track, index) => `
+                            <div class="playlist-track-item">
+                                <span class="playlist-track-number">${index + 1}</span>
+                                <div class="playlist-track-info">
+                                    <div class="playlist-track-name">${escapeHtml(track.name)}</div>
+                                    <div class="playlist-track-artists">${formatArtists(track.artists)}</div>
+                                </div>
+                                <div class="playlist-track-duration">${formatDuration(track.duration_ms)}</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+
+            <div class="playlist-modal-footer">
+                <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closeDeezerArlPlaylistDetailsModal()">Close</button>
+                <button class="playlist-modal-btn playlist-modal-btn-tertiary" onclick="closeDeezerArlPlaylistDetailsModal(); openDownloadMissingModal('${playlistId}')">
+                    ${hasCompletedProcess ? '📊 View Download Results' : '📥 Download Missing Tracks'}
+                </button>
+                <button id="sync-btn-${playlistId}" class="playlist-modal-btn playlist-modal-btn-primary" onclick="startPlaylistSync('${playlistId}')" ${isSyncing ? 'disabled' : ''} ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>${isSyncing ? '⏳ Syncing...' : 'Sync Playlist'}</button>
+            </div>
+        </div>
+    `;
+
+    // Store playlist in spotifyPlaylists-compatible format for openDownloadMissingModal
+    if (!spotifyPlaylists.find(p => p.id === playlistId)) {
+        spotifyPlaylists.push({
+            id: playlistId,
+            name: playlist.name,
+            track_count: playlist.tracks ? playlist.tracks.length : 0,
+            image_url: playlist.image_url || '',
+            owner: playlist.owner || '',
+        });
+    }
+
+    modal.style.display = 'flex';
+}
+
+function closeDeezerArlPlaylistDetailsModal() {
+    const modal = document.getElementById('deezer-arl-playlist-details-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+function updateDeezerArlPlaylistCardUI(playlistId) {
+    const arlPlaylistId = `deezer_arl_${playlistId}`;
+    const process = activeDownloadProcesses[arlPlaylistId];
+    const progressBtn = document.getElementById(`progress-btn-${arlPlaylistId}`);
+    const actionBtn = document.getElementById(`action-btn-${arlPlaylistId}`);
+    const card = document.querySelector(`.playlist-card[data-playlist-id="${arlPlaylistId}"]`);
+
+    if (!progressBtn || !actionBtn) return;
+
+    if (process && process.status === 'running') {
+        progressBtn.classList.remove('hidden');
+        progressBtn.textContent = 'View Progress';
+        progressBtn.style.backgroundColor = '';
+        actionBtn.textContent = '📥 Downloading...';
+        actionBtn.disabled = true;
+        if (card) card.classList.remove('download-complete');
+    } else if (process && process.status === 'complete') {
+        progressBtn.classList.remove('hidden');
+        progressBtn.textContent = '📋 View Results';
+        progressBtn.style.backgroundColor = '#28a745';
+        progressBtn.style.color = 'white';
+        actionBtn.textContent = '✅ Ready for Review';
+        actionBtn.disabled = false;
+        if (card) card.classList.add('download-complete');
+    } else {
+        progressBtn.classList.add('hidden');
+        progressBtn.style.backgroundColor = '';
+        progressBtn.style.color = '';
+        actionBtn.textContent = 'Sync / Download';
+        actionBtn.disabled = false;
+        if (card) card.classList.remove('download-complete');
+    }
+}
+
+
+// ===================================================================
+// DEEZER PLAYLIST MANAGEMENT (URL-input like YouTube, reuses YouTube modal)
+// ===================================================================
+
+async function loadDeezerPlaylist() {
+    const urlInput = document.getElementById('deezer-url-input');
+    if (!urlInput) return;
+
+    const rawUrl = urlInput.value.trim();
+    if (!rawUrl) {
+        showToast('Please paste a Deezer playlist URL', 'error');
+        return;
+    }
+
+    // Extract playlist ID from URL
+    // Supports: deezer.com/playlist/{id}, deezer.com/{locale}/playlist/{id}, or raw numeric ID
+    let playlistId = null;
+    const urlMatch = rawUrl.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
+    if (urlMatch) {
+        playlistId = urlMatch[1];
+    } else if (/^\d+$/.test(rawUrl)) {
+        playlistId = rawUrl;
+    }
+
+    if (!playlistId) {
+        showToast('Invalid Deezer playlist URL. Expected format: deezer.com/playlist/{id}', 'error');
+        return;
+    }
+
+    // Check if already loaded
+    if (deezerPlaylists.find(p => String(p.id) === String(playlistId))) {
+        showToast('This playlist is already loaded', 'info');
+        urlInput.value = '';
+        return;
+    }
+
+    const parseBtn = document.getElementById('deezer-parse-btn');
+    if (parseBtn) {
+        parseBtn.disabled = true;
+        parseBtn.textContent = 'Loading...';
+    }
+
+    try {
+        const response = await fetch(`/api/deezer/playlist/${playlistId}`);
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Deezer playlist');
+        }
+
+        const playlist = await response.json();
+        deezerPlaylists.push(playlist);
+
+        // Auto-mirror Deezer playlist
+        if (playlist.tracks && playlist.tracks.length > 0) {
+            mirrorPlaylist('deezer', playlist.id, playlist.name, playlist.tracks.map(t => ({
+                track_name: t.name || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artists || ''),
+                album_name: typeof t.album === 'string' ? t.album : '', duration_ms: t.duration_ms || 0,
+                source_track_id: t.id || ''
+            })), { owner: playlist.owner, image_url: playlist.image_url, description: rawUrl });
+        }
+
+        // Save to URL history
+        saveUrlHistory('deezer', rawUrl, playlist.name);
+
+        renderDeezerPlaylists();
+        await loadDeezerPlaylistStatesFromBackend();
+
+        urlInput.value = '';
+        showToast(`Deezer playlist loaded: ${playlist.name} (${playlist.track_count || playlist.tracks.length} tracks)`, 'success');
+        console.log(`🎵 Loaded Deezer playlist: ${playlist.name}`);
+
+    } catch (error) {
+        showToast(`Error loading Deezer playlist: ${error.message}`, 'error');
+    } finally {
+        if (parseBtn) {
+            parseBtn.disabled = false;
+            parseBtn.textContent = 'Load Playlist';
+        }
+    }
+}
+
+function renderDeezerPlaylists() {
+    const container = document.getElementById('deezer-playlist-container');
+    if (deezerPlaylists.length === 0) {
+        container.innerHTML = `<div class="playlist-placeholder">Paste a Deezer playlist URL above to get started.</div>`;
+        return;
+    }
+
+    container.innerHTML = deezerPlaylists.map(p => {
+        if (!deezerPlaylistStates[p.id]) {
+            deezerPlaylistStates[p.id] = {
+                phase: 'fresh',
+                playlist: p
+            };
+        }
+        return createDeezerCard(p);
+    }).join('');
+
+    // Add click handlers to cards
+    deezerPlaylists.forEach(p => {
+        const card = document.getElementById(`deezer-card-${p.id}`);
+        if (card) {
+            card.addEventListener('click', () => handleDeezerCardClick(p.id));
+        }
+    });
+}
+
+function createDeezerCard(playlist) {
+    const state = deezerPlaylistStates[playlist.id];
+    const phase = state.phase;
+
+    let buttonText = getActionButtonText(phase);
+    let phaseText = getPhaseText(phase);
+    let phaseColor = getPhaseColor(phase);
+
+    return `
+        <div class="youtube-playlist-card deezer-playlist-card" id="deezer-card-${playlist.id}">
+            <div class="playlist-card-icon">🎵</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">${playlist.track_count || playlist.tracks.length} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                <!-- Progress will be dynamically updated based on phase -->
+            </div>
+            <button class="playlist-card-action-btn">${buttonText}</button>
+        </div>
+    `;
+}
+
+async function handleDeezerCardClick(playlistId) {
+    const state = deezerPlaylistStates[playlistId];
+    if (!state) {
+        console.error(`No state found for Deezer playlist: ${playlistId}`);
+        showToast('Playlist state not found - try refreshing the page', 'error');
+        return;
+    }
+
+    if (!state.playlist) {
+        console.error(`No playlist data found for Deezer playlist: ${playlistId}`);
+        showToast('Playlist data missing - try refreshing the page', 'error');
+        return;
+    }
+
+    if (!state.phase) {
+        state.phase = 'fresh';
+    }
+
+    console.log(`🎵 [Card Click] Deezer card clicked: ${playlistId}, Phase: ${state.phase}`);
+
+    if (state.phase === 'fresh') {
+        console.log(`🎵 Using pre-loaded Deezer playlist data for: ${state.playlist.name}`);
+        openDeezerDiscoveryModal(playlistId, state.playlist);
+
+    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
+        console.log(`🎵 [Card Click] Opening Deezer discovery modal for ${state.phase} phase`);
+
+        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
+            try {
+                const stateResponse = await fetch(`/api/deezer/state/${playlistId}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    if (fullState.discovery_results) {
+                        state.discovery_results = fullState.discovery_results;
+                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
+                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
+                        deezerPlaylistStates[playlistId] = { ...deezerPlaylistStates[playlistId], ...state };
+                        console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
+                    }
+                }
+            } catch (error) {
+                console.error(`Failed to fetch discovery results from backend: ${error}`);
+            }
+        }
+
+        openDeezerDiscoveryModal(playlistId, state.playlist);
+    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
+        if (state.convertedSpotifyPlaylistId) {
+            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
+                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
+                if (process.modalElement) {
+                    process.modalElement.style.display = 'flex';
+                } else {
+                    await rehydrateDeezerDownloadModal(playlistId, state);
+                }
+            } else {
+                await rehydrateDeezerDownloadModal(playlistId, state);
+            }
+        } else {
+            if (state.discovery_results && state.discovery_results.length > 0) {
+                openDeezerDiscoveryModal(playlistId, state.playlist);
+            } else {
+                showToast('Unable to open download modal - missing playlist data', 'error');
+            }
+        }
+    }
+}
+
+async function rehydrateDeezerDownloadModal(playlistId, state) {
+    try {
+        if (!state || !state.playlist) {
+            showToast('Cannot open download modal - invalid playlist data', 'error');
+            return;
+        }
+
+        const spotifyTracks = state.discovery_results
+            ?.filter(result => result.spotify_data)
+            ?.map(result => result.spotify_data) || [];
+
+        if (spotifyTracks.length > 0) {
+            const virtualPlaylistId = state.convertedSpotifyPlaylistId || `deezer_${playlistId}`;
+            await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
+
+            if (state.download_process_id) {
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = state.download_process_id;
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+                    startModalDownloadPolling(virtualPlaylistId);
+                }
+            }
+        } else {
+            showToast('No Spotify tracks found for download', 'error');
+        }
+    } catch (error) {
+        console.error(`Error rehydrating Deezer download modal: ${error}`);
+    }
+}
+
+async function openDeezerDiscoveryModal(playlistId, playlistData) {
+    console.log(`🎵 Opening Deezer discovery modal (reusing YouTube modal): ${playlistData.name}`);
+
+    const fakeUrlHash = `deezer_${playlistId}`;
+
+    const deezerCardState = deezerPlaylistStates[playlistId];
+    const isAlreadyDiscovered = deezerCardState && (deezerCardState.phase === 'discovered' || deezerCardState.phase === 'syncing' || deezerCardState.phase === 'sync_complete');
+    const isCurrentlyDiscovering = deezerCardState && deezerCardState.phase === 'discovering';
+
+    let transformedResults = [];
+    let actualMatches = 0;
+    if (isAlreadyDiscovered && deezerCardState.discovery_results) {
+        transformedResults = deezerCardState.discovery_results.map((result, index) => {
+            const isFound = result.status === 'found' ||
+                result.status === '✅ Found' ||
+                result.status_class === 'found' ||
+                result.spotify_data ||
+                result.spotify_track;
+            if (isFound) actualMatches++;
+
+            return {
+                index: index,
+                yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
+                yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                status: isFound ? '✅ Found' : '❌ Not Found',
+                status_class: isFound ? 'found' : 'not-found',
+                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                    (Array.isArray(result.spotify_data.artists)
+                        ? result.spotify_data.artists
+                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                            .filter(Boolean)
+                            .join(', ') || '-'
+                        : result.spotify_data.artists)
+                    : (result.spotify_artist || '-'),
+                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                spotify_data: result.spotify_data,
+                spotify_id: result.spotify_id,
+                manual_match: result.manual_match
+            };
+        });
+        console.log(`🎵 Deezer modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
+    }
+
+    const modalPhase = deezerCardState ? deezerCardState.phase : 'fresh';
+    youtubePlaylistStates[fakeUrlHash] = {
+        phase: modalPhase,
+        playlist: {
+            name: playlistData.name,
+            tracks: playlistData.tracks
+        },
+        is_deezer_playlist: true,
+        deezer_playlist_id: playlistId,
+        discovery_progress: isAlreadyDiscovered ? 100 : 0,
+        spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
+        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
+        spotify_total: playlistData.tracks.length,
+        discovery_results: transformedResults,
+        discoveryResults: transformedResults,
+        discoveryProgress: isAlreadyDiscovered ? 100 : 0
+    };
+
+    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
+        try {
+            console.log(`🔍 Starting Deezer discovery for: ${playlistData.name}`);
+
+            const response = await fetch(`/api/deezer/discovery/start/${playlistId}`, {
+                method: 'POST'
+            });
+
+            const result = await response.json();
+
+            if (result.error) {
+                console.error('Error starting Deezer discovery:', result.error);
+                showToast(`Error starting discovery: ${result.error}`, 'error');
+                return;
+            }
+
+            console.log('Deezer discovery started, beginning polling...');
+
+            deezerPlaylistStates[playlistId].phase = 'discovering';
+            updateDeezerCardPhase(playlistId, 'discovering');
+            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
+
+            startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
+
+        } catch (error) {
+            console.error('Error starting Deezer discovery:', error);
+            showToast(`Error starting discovery: ${error.message}`, 'error');
+        }
+    } else if (isCurrentlyDiscovering) {
+        console.log(`🔄 Resuming Deezer discovery polling for: ${playlistData.name}`);
+        startDeezerDiscoveryPolling(fakeUrlHash, playlistId);
+    } else if (deezerCardState && deezerCardState.phase === 'syncing') {
+        console.log(`🔄 Resuming Deezer sync polling for: ${playlistData.name}`);
+        startDeezerSyncPolling(fakeUrlHash);
+    } else {
+        console.log('Using existing results - no need to re-discover');
+    }
+
+    openYouTubeDiscoveryModal(fakeUrlHash);
+}
+
+function startDeezerDiscoveryPolling(fakeUrlHash, playlistId) {
+    console.log(`🔄 Starting Deezer discovery polling for: ${playlistId}`);
+
+    if (activeYouTubePollers[fakeUrlHash]) {
+        clearInterval(activeYouTubePollers[fakeUrlHash]);
+    }
+
+    // WebSocket subscription
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [playlistId] });
+        _discoveryProgressCallbacks[playlistId] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
+                return;
+            }
+            const transformed = {
+                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
+                complete: data.complete,
+                results: (data.results || []).map((r, i) => {
+                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
+                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
+                    return {
+                        index: i, yt_track: r.deezer_track ? r.deezer_track.name : 'Unknown',
+                        yt_artist: r.deezer_track ? (r.deezer_track.artists ? r.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
+                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
+                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
+                        spotify_artist: r.spotify_data && r.spotify_data.artists
+                            ? (Array.isArray(r.spotify_data.artists)
+                                ? (r.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : r.spotify_data.artists)
+                            : (r.spotify_artist || '-'),
+                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
+                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
+                        wing_it_fallback: isWingIt
+                    };
+                })
+            };
+            const st = youtubePlaylistStates[fakeUrlHash];
+            if (st) {
+                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
+                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
+                st.discovery_results = data.results; st.discoveryResults = transformed.results;
+                st.phase = data.phase;
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
+            }
+            if (deezerPlaylistStates[playlistId]) {
+                deezerPlaylistStates[playlistId].phase = data.phase;
+                deezerPlaylistStates[playlistId].discovery_results = data.results;
+                deezerPlaylistStates[playlistId].spotify_matches = data.spotify_matches;
+                deezerPlaylistStates[playlistId].discovery_progress = data.progress;
+                updateDeezerCardPhase(playlistId, data.phase);
+            }
+            updateDeezerCardProgress(playlistId, data);
+            if (data.complete) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistId] }); delete _discoveryProgressCallbacks[playlistId];
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        if (socketConnected) return;
+        try {
+            const response = await fetch(`/api/deezer/discovery/status/${playlistId}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('Error polling Deezer discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+                return;
+            }
+
+            const transformedStatus = {
+                progress: status.progress,
+                spotify_matches: status.spotify_matches,
+                spotify_total: status.spotify_total,
+                complete: status.complete,
+                results: status.results.map((result, index) => {
+                    const isFound = result.status === 'found' ||
+                        result.status === '✅ Found' ||
+                        result.status_class === 'found' ||
+                        result.spotify_data ||
+                        result.spotify_track;
+
+                    return {
+                        index: index,
+                        yt_track: result.deezer_track ? result.deezer_track.name : 'Unknown',
+                        yt_artist: result.deezer_track ? (result.deezer_track.artists ? result.deezer_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isFound ? '✅ Found' : '❌ Not Found',
+                        status_class: isFound ? 'found' : 'not-found',
+                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                        spotify_artist: result.spotify_data && result.spotify_data.artists
+                            ? (Array.isArray(result.spotify_data.artists)
+                                ? (result.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : result.spotify_data.artists)
+                            : (result.spotify_artist || '-'),
+                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                        spotify_data: result.spotify_data,
+                        spotify_id: result.spotify_id,
+                        manual_match: result.manual_match
+                    };
+                })
+            };
+
+            const state = youtubePlaylistStates[fakeUrlHash];
+            if (state) {
+                state.discovery_progress = status.progress;
+                state.discoveryProgress = status.progress;
+                state.spotify_matches = status.spotify_matches;
+                state.spotifyMatches = status.spotify_matches;
+                state.discovery_results = status.results;
+                state.discoveryResults = transformedStatus.results;
+                state.phase = status.phase;
+
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
+
+                if (deezerPlaylistStates[playlistId]) {
+                    deezerPlaylistStates[playlistId].phase = status.phase;
+                    deezerPlaylistStates[playlistId].discovery_results = status.results;
+                    deezerPlaylistStates[playlistId].spotify_matches = status.spotify_matches;
+                    deezerPlaylistStates[playlistId].discovery_progress = status.progress;
+                    updateDeezerCardPhase(playlistId, status.phase);
+                }
+
+                updateDeezerCardProgress(playlistId, status);
+
+                console.log(`🔄 Deezer discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
+            }
+
+            if (status.complete) {
+                console.log(`Deezer discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+            }
+
+        } catch (error) {
+            console.error('Error polling Deezer discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[fakeUrlHash];
+        }
+    }, 1000);
+
+    activeYouTubePollers[fakeUrlHash] = pollInterval;
+}
+
+async function loadDeezerPlaylistStatesFromBackend() {
+    try {
+        console.log('🎵 Loading Deezer playlist states from backend...');
+
+        const response = await fetch('/api/deezer/playlists/states');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Deezer playlist states');
+        }
+
+        const data = await response.json();
+        const states = data.states || [];
+
+        console.log(`🎵 Found ${states.length} stored Deezer playlist states in backend`);
+
+        if (states.length === 0) return;
+
+        for (const stateInfo of states) {
+            await applyDeezerPlaylistState(stateInfo);
+        }
+
+        // Rehydrate download modals for Deezer playlists in downloading/download_complete phases
+        for (const stateInfo of states) {
+            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
+                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
+
+                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
+
+                if (!activeDownloadProcesses[convertedPlaylistId]) {
+                    console.log(`Rehydrating download modal for Deezer playlist: ${stateInfo.playlist_id}`);
+                    try {
+                        const playlistData = deezerPlaylists.find(p => String(p.id) === String(stateInfo.playlist_id));
+                        if (!playlistData) continue;
+
+                        const spotifyTracks = deezerPlaylistStates[stateInfo.playlist_id]?.discovery_results
+                            ?.filter(result => result.spotify_data)
+                            ?.map(result => result.spotify_data) || [];
+
+                        if (spotifyTracks.length > 0) {
+                            await openDownloadMissingModalForTidal(
+                                convertedPlaylistId,
+                                playlistData.name,
+                                spotifyTracks
+                            );
+
+                            const process = activeDownloadProcesses[convertedPlaylistId];
+                            if (process) {
+                                process.status = 'running';
+                                process.batchId = stateInfo.download_process_id;
+                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                                if (beginBtn) beginBtn.style.display = 'none';
+                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+                                startModalDownloadPolling(convertedPlaylistId);
+                            }
+                        }
+                    } catch (error) {
+                        console.error(`Error rehydrating Deezer download modal for ${stateInfo.playlist_id}:`, error);
+                    }
+                }
+            }
+        }
+
+        console.log('Deezer playlist states loaded and applied');
+
+    } catch (error) {
+        console.error('Error loading Deezer playlist states:', error);
+    }
+}
+
+async function applyDeezerPlaylistState(stateInfo) {
+    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
+
+    try {
+        console.log(`🎵 Applying saved state for Deezer playlist: ${playlist_id}, Phase: ${phase}`);
+
+        const playlistData = deezerPlaylists.find(p => String(p.id) === String(playlist_id));
+        if (!playlistData) {
+            console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
+            return;
+        }
+
+        if (!deezerPlaylistStates[playlist_id]) {
+            deezerPlaylistStates[playlist_id] = {
+                playlist: playlistData,
+                phase: 'fresh'
+            };
+        }
+
+        deezerPlaylistStates[playlist_id].phase = phase;
+        deezerPlaylistStates[playlist_id].discovery_progress = discovery_progress;
+        deezerPlaylistStates[playlist_id].spotify_matches = spotify_matches;
+        deezerPlaylistStates[playlist_id].discovery_results = discovery_results;
+        deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
+        deezerPlaylistStates[playlist_id].download_process_id = download_process_id;
+        deezerPlaylistStates[playlist_id].playlist = playlistData;
+
+        if (phase !== 'fresh' && phase !== 'discovering') {
+            try {
+                const stateResponse = await fetch(`/api/deezer/state/${playlist_id}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    if (fullState.discovery_results && deezerPlaylistStates[playlist_id]) {
+                        deezerPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
+                        deezerPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
+                        deezerPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
+                        deezerPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
+                        deezerPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
+                    }
+                }
+            } catch (error) {
+                console.warn(`Error fetching full discovery results for Deezer playlist ${playlistData.name}:`, error.message);
+            }
+        }
+
+        updateDeezerCardPhase(playlist_id, phase);
+
+        if (phase === 'discovered' && deezerPlaylistStates[playlist_id]) {
+            const progressInfo = {
+                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
+                spotify_matches: deezerPlaylistStates[playlist_id].spotify_matches || 0
+            };
+            updateDeezerCardProgress(playlist_id, progressInfo);
+        }
+
+        if (phase === 'discovering') {
+            const fakeUrlHash = `deezer_${playlist_id}`;
+            startDeezerDiscoveryPolling(fakeUrlHash, playlist_id);
+        } else if (phase === 'syncing') {
+            const fakeUrlHash = `deezer_${playlist_id}`;
+            startDeezerSyncPolling(fakeUrlHash);
+        }
+
+    } catch (error) {
+        console.error(`Error applying Deezer playlist state for ${playlist_id}:`, error);
+    }
+}
+
+function updateDeezerCardPhase(playlistId, phase) {
+    const state = deezerPlaylistStates[playlistId];
+    if (!state) return;
+
+    state.phase = phase;
+
+    const card = document.getElementById(`deezer-card-${playlistId}`);
+    if (card) {
+        const newCardHtml = createDeezerCard(state.playlist);
+        card.outerHTML = newCardHtml;
+
+        const newCard = document.getElementById(`deezer-card-${playlistId}`);
+        if (newCard) {
+            newCard.addEventListener('click', () => handleDeezerCardClick(playlistId));
+        }
+
+        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
+            setTimeout(() => {
+                updateDeezerCardSyncProgress(playlistId, state.lastSyncProgress);
+            }, 0);
+        }
+    }
+}
+
+function updateDeezerCardProgress(playlistId, progress) {
+    const state = deezerPlaylistStates[playlistId];
+    if (!state) return;
+
+    const card = document.getElementById(`deezer-card-${playlistId}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+    if (!progressElement) return;
+
+    progressElement.classList.remove('hidden');
+
+    const total = progress.spotify_total || 0;
+    const matches = progress.spotify_matches || 0;
+
+    if (total > 0) {
+        progressElement.innerHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat matched-tracks">✓ ${matches}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+            </div>
+        `;
+    }
+}
+
+// ===============================
+// DEEZER SYNC FUNCTIONALITY
+// ===============================
+
+async function startDeezerPlaylistSync(urlHash) {
+    try {
+        console.log('🎵 Starting Deezer playlist sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_deezer_playlist) {
+            console.error('Invalid Deezer playlist state for sync');
+            return;
+        }
+
+        const playlistId = state.deezer_playlist_id;
+        const response = await fetch(`/api/deezer/sync/start/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting sync: ${result.error}`, 'error');
+            return;
+        }
+
+        const syncPlaylistId = result.sync_playlist_id;
+        if (state) state.syncPlaylistId = syncPlaylistId;
+
+        updateDeezerCardPhase(playlistId, 'syncing');
+        updateDeezerModalButtons(urlHash, 'syncing');
+
+        startDeezerSyncPolling(urlHash, syncPlaylistId);
+
+        showToast('Deezer playlist sync started!', 'success');
+
+    } catch (error) {
+        console.error('Error starting Deezer sync:', error);
+        showToast(`Error starting sync: ${error.message}`, 'error');
+    }
+}
+
+function startDeezerSyncPolling(urlHash, syncPlaylistId) {
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    const state = youtubePlaylistStates[urlHash];
+    const playlistId = state.deezer_playlist_id;
+
+    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
+
+    // WebSocket subscription
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateDeezerCardSyncProgress(playlistId, progress);
+            updateDeezerModalSyncProgress(urlHash, progress);
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateDeezerCardPhase(playlistId, 'sync_complete');
+                updateDeezerModalButtons(urlHash, 'sync_complete');
+                showToast('Deezer playlist sync complete!', 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateDeezerCardPhase(playlistId, 'discovered');
+                updateDeezerModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    const pollFunction = async () => {
+        if (socketConnected) return;
+        try {
+            const response = await fetch(`/api/deezer/sync/status/${playlistId}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('Error polling Deezer sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            updateDeezerCardSyncProgress(playlistId, status.progress);
+            updateDeezerModalSyncProgress(urlHash, status.progress);
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateDeezerCardPhase(playlistId, 'sync_complete');
+                updateDeezerModalButtons(urlHash, 'sync_complete');
+                showToast('Deezer playlist sync complete!', 'success');
+            } else if (status.sync_status === 'error') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (deezerPlaylistStates[playlistId]) deezerPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateDeezerCardPhase(playlistId, 'discovered');
+                updateDeezerModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
+            }
+        } catch (error) {
+            console.error('Error polling Deezer sync:', error);
+            if (activeYouTubePollers[urlHash]) {
+                clearInterval(activeYouTubePollers[urlHash]);
+                delete activeYouTubePollers[urlHash];
+            }
+        }
+    };
+
+    if (!socketConnected) pollFunction();
+
+    const pollInterval = setInterval(pollFunction, 1000);
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+async function cancelDeezerSync(urlHash) {
+    try {
+        console.log('Cancelling Deezer sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_deezer_playlist) {
+            console.error('Invalid Deezer playlist state');
+            return;
+        }
+
+        const playlistId = state.deezer_playlist_id;
+        const response = await fetch(`/api/deezer/sync/cancel/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error cancelling sync: ${result.error}`, 'error');
+            return;
+        }
+
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        const syncId = state && state.syncPlaylistId;
+        if (syncId && _syncProgressCallbacks[syncId]) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
+            delete _syncProgressCallbacks[syncId];
+        }
+
+        updateDeezerCardPhase(playlistId, 'discovered');
+        updateDeezerModalButtons(urlHash, 'discovered');
+
+        showToast('Deezer sync cancelled', 'info');
+
+    } catch (error) {
+        console.error('Error cancelling Deezer sync:', error);
+        showToast(`Error cancelling sync: ${error.message}`, 'error');
+    }
+}
+
+function updateDeezerCardSyncProgress(playlistId, progress) {
+    const state = deezerPlaylistStates[playlistId];
+    if (!state || !state.playlist || !progress) return;
+
+    state.lastSyncProgress = progress;
+
+    const card = document.getElementById(`deezer-card-${playlistId}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    let statusCounterHTML = '';
+    if (progress && progress.total_tracks > 0) {
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const processed = matched + failed;
+        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+        statusCounterHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat matched-tracks">✓ ${matched}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat failed-tracks">✗ ${failed}</span>
+                <span class="sync-stat percentage">(${percentage}%)</span>
+            </div>
+        `;
+    }
+
+    if (statusCounterHTML) {
+        progressElement.innerHTML = statusCounterHTML;
+    }
+}
+
+function updateDeezerModalSyncProgress(urlHash, progress) {
+    const statusDisplay = document.getElementById(`deezer-sync-status-${urlHash}`);
+    if (!statusDisplay || !progress) return;
+
+    const totalEl = document.getElementById(`deezer-total-${urlHash}`);
+    const matchedEl = document.getElementById(`deezer-matched-${urlHash}`);
+    const failedEl = document.getElementById(`deezer-failed-${urlHash}`);
+    const percentageEl = document.getElementById(`deezer-percentage-${urlHash}`);
+
+    const total = progress.total_tracks || 0;
+    const matched = progress.matched_tracks || 0;
+    const failed = progress.failed_tracks || 0;
+
+    if (totalEl) totalEl.textContent = total;
+    if (matchedEl) matchedEl.textContent = matched;
+    if (failedEl) failedEl.textContent = failed;
+
+    if (total > 0) {
+        const processed = matched + failed;
+        const percentage = Math.round((processed / total) * 100);
+        if (percentageEl) percentageEl.textContent = percentage;
+    }
+}
+
+function updateDeezerModalButtons(urlHash, phase) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (!modal) return;
+
+    const footerLeft = modal.querySelector('.modal-footer-left');
+    if (footerLeft) {
+        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
+    }
+}
+
+async function startDeezerDownloadMissing(urlHash) {
+    try {
+        console.log('🔍 Starting download missing tracks for Deezer playlist:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_deezer_playlist) {
+            console.error('Invalid Deezer playlist state for download');
+            return;
+        }
+
+        const discoveryResults = state.discoveryResults || state.discovery_results;
+
+        if (!discoveryResults) {
+            showToast('No discovery results available for download', 'error');
+            return;
+        }
+
+        const spotifyTracks = [];
+        for (const result of discoveryResults) {
+            if (result.spotify_data) {
+                spotifyTracks.push(result.spotify_data);
+            } else if (result.spotify_track && result.status_class === 'found') {
+                const albumData = result.spotify_album || 'Unknown Album';
+                const albumObject = typeof albumData === 'object' && albumData !== null
+                    ? albumData
+                    : {
+                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
+                        album_type: 'album',
+                        images: []
+                    };
+
+                spotifyTracks.push({
+                    id: result.spotify_id || 'unknown',
+                    name: result.spotify_track || 'Unknown Track',
+                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
+                    album: albumObject,
+                    duration_ms: 0
+                });
+            }
+        }
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        const virtualPlaylistId = `deezer_${state.deezer_playlist_id}`;
+        const playlistName = state.playlist.name;
+
+        state.convertedSpotifyPlaylistId = virtualPlaylistId;
+
+        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (discoveryModal) {
+            discoveryModal.classList.add('hidden');
+        }
+
+        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
+
+    } catch (error) {
+        console.error('Error starting download missing tracks:', error);
+        showToast(`Error starting downloads: ${error.message}`, 'error');
+    }
+}
+
+
+// ===============================
+// SYNC PAGE FUNCTIONALITY (REDESIGNED)
+// ===============================
+
+function initializeSyncPage() {
+    // Logic for tab switching
+    const tabButtons = document.querySelectorAll('.sync-tab-button');
+    const syncSidebar = document.querySelector('.sync-sidebar');
+    const syncContentArea = document.querySelector('.sync-content-area');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabId = button.dataset.tab;
+            const previousActiveTab = document.querySelector('.sync-tab-button.active');
+            const previousTabId = previousActiveTab ? previousActiveTab.dataset.tab : null;
+
+            // Update button active state
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+
+            // Update content active state
+            document.querySelectorAll('.sync-tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            document.getElementById(`${tabId}-tab-content`).classList.add('active');
+
+            // Show/hide sidebar based on active tab (skip on mobile where sidebar is always hidden)
+            if (syncSidebar && syncContentArea) {
+                const isMobile = window.innerWidth <= 1300;
+                // Sidebar always hidden by default — shown only when sync is active
+                syncSidebar.style.display = 'none';
+                syncContentArea.style.gridTemplateColumns = '1fr';
+            }
+
+            // Auto-load Deezer ARL playlists on first tab activation
+            if (tabId === 'deezer' && !deezerArlPlaylistsLoaded) {
+                // Check ARL status first
+                fetch('/api/deezer/arl-status').then(r => r.json()).then(data => {
+                    const container = document.getElementById('deezer-arl-playlist-container');
+                    if (data.authenticated) {
+                        loadDeezerArlPlaylists();
+                    } else if (container) {
+                        container.innerHTML = `<div class="playlist-placeholder">Deezer ARL not configured. Add your ARL token in Settings &gt; Downloads to see your playlists here.</div>`;
+                    }
+                }).catch(() => { });
+            }
+
+            // Auto-load mirrored playlists on first tab activation
+            if (tabId === 'mirrored' && !mirroredPlaylistsLoaded) {
+                loadMirroredPlaylists();
+            }
+
+            // Auto-load server playlists on first tab activation
+            if (tabId === 'server' && !window._serverPlaylistsLoaded) {
+                window._serverPlaylistsLoaded = true;
+                loadServerPlaylists();
+            }
+
+            if (previousTabId === 'beatport' && tabId !== 'beatport') {
+                cleanupBeatportContent();
+            }
+
+            // Lazily load Beatport content the first time the Beatport tab is opened
+            if (tabId === 'beatport') {
+                ensureBeatportContentLoaded();
+            }
+        });
+    });
+
+    // If the Beatport tab is already active when Sync initializes, load it now.
+    const activeBeatportTab = document.querySelector('.sync-tab-button.active[data-tab="beatport"]');
+    if (activeBeatportTab) {
+        ensureBeatportContentLoaded();
+    }
+
+    // Logic for the Spotify refresh button
+    const refreshBtn = document.getElementById('spotify-refresh-btn');
+    if (refreshBtn) {
+        // Remove any old listeners to be safe, then add the new one
+        refreshBtn.removeEventListener('click', loadSpotifyPlaylists);
+        refreshBtn.addEventListener('click', loadSpotifyPlaylists);
+    }
+
+    // Logic for the Tidal refresh button
+    const tidalRefreshBtn = document.getElementById('tidal-refresh-btn');
+    if (tidalRefreshBtn) {
+        tidalRefreshBtn.removeEventListener('click', loadTidalPlaylists);
+        tidalRefreshBtn.addEventListener('click', loadTidalPlaylists);
+    }
+
+    // Logic for the Deezer ARL refresh button
+    const deezerArlRefreshBtn = document.getElementById('deezer-arl-refresh-btn');
+    if (deezerArlRefreshBtn) {
+        deezerArlRefreshBtn.removeEventListener('click', loadDeezerArlPlaylists);
+        deezerArlRefreshBtn.addEventListener('click', loadDeezerArlPlaylists);
+    }
+
+    // Logic for the Deezer Link parse button
+    const deezerParseBtn = document.getElementById('deezer-parse-btn');
+    if (deezerParseBtn) {
+        deezerParseBtn.addEventListener('click', loadDeezerPlaylist);
+    }
+    // Also allow Enter key in the Deezer input
+    const deezerUrlInput = document.getElementById('deezer-url-input');
+    if (deezerUrlInput) {
+        deezerUrlInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') loadDeezerPlaylist();
+        });
+    }
+
+    // Logic for the Mirrored refresh button
+    const mirroredRefreshBtn = document.getElementById('mirrored-refresh-btn');
+    if (mirroredRefreshBtn) {
+        mirroredRefreshBtn.addEventListener('click', loadMirroredPlaylists);
+    }
+
+    // Initialize import file tab
+    _initImportFileTab();
+
+    // Logic for the Beatport clear button
+    const beatportClearBtn = document.getElementById('beatport-clear-btn');
+    if (beatportClearBtn) {
+        beatportClearBtn.addEventListener('click', clearBeatportPlaylists);
+        // Set initial clear button state
+        updateBeatportClearButtonState();
+    }
+
+    // Logic for Beatport nested tabs
+    const beatportTabButtons = document.querySelectorAll('.beatport-tab-button');
+    beatportTabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const tabId = button.dataset.beatportTab;
+
+            // Update button active state
+            beatportTabButtons.forEach(btn => btn.classList.remove('active'));
+            button.classList.add('active');
+
+            // Update content active state
+            document.querySelectorAll('.beatport-tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            document.getElementById(`beatport-${tabId}-content`).classList.add('active');
+
+            // Initialize rebuild content lazily when the rebuild tab is selected
+            if (tabId === 'rebuild') {
+                ensureBeatportContentLoaded();
+            }
+        });
+    });
+
+    // Logic for Homepage Genre Explorer card
+    const genreExplorerCard = document.querySelector('[data-action="show-genres"]');
+    if (genreExplorerCard) {
+        genreExplorerCard.addEventListener('click', () => {
+            console.log('🎵 Genre Explorer card clicked');
+            showBeatportSubView('genres');
+            loadBeatportGenres();
+        });
+    }
+
+    // Setup homepage chart handlers (following genre page pattern to prevent duplicates)
+    setupHomepageChartTypeHandlers();
+
+    // Load homepage chart collections automatically (disabled since Browse Charts tab is hidden)
+    // loadDJChartsInline();
+    // loadFeaturedChartsInline();
+
+    // Logic for Beatport breadcrumb back buttons
+    const beatportBackButtons = document.querySelectorAll('.breadcrumb-back');
+    beatportBackButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Handle different back button types
+            if (button.id === 'genre-detail-back') {
+                showBeatportGenresView();
+            } else if (button.id === 'genre-charts-list-back') {
+                showBeatportGenreDetailViewFromBack();
+            } else {
+                showBeatportMainView();
+            }
+        });
+    });
+
+    // Logic for Beatport chart items
+    const beatportChartItems = document.querySelectorAll('.beatport-chart-item');
+    beatportChartItems.forEach(item => {
+        item.addEventListener('click', () => {
+            const chartType = item.dataset.chartType;
+            const chartId = item.dataset.chartId;
+            const chartName = item.dataset.chartName;
+            const chartEndpoint = item.dataset.chartEndpoint;
+            handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint);
+        });
+    });
+
+    // Logic for Beatport genre items
+    const beatportGenreItems = document.querySelectorAll('.beatport-genre-item');
+    beatportGenreItems.forEach(item => {
+        item.addEventListener('click', () => {
+            const genreSlug = item.dataset.genreSlug;
+            const genreId = item.dataset.genreId;
+            handleBeatportGenreClick(genreSlug, genreId);
+        });
+    });
+
+    // Logic for Rebuild page Top 10 containers - Beatport Top 10
+    const beatportTop10Container = document.getElementById('beatport-top10-list');
+    if (beatportTop10Container) {
+        beatportTop10Container.addEventListener('click', () => {
+            console.log('🎵 Beatport Top 10 container clicked on rebuild page');
+            handleRebuildBeatportTop10Click();
+        });
+    }
+
+    // Logic for Rebuild page Top 10 containers - Hype Top 10
+    const beatportHype10Container = document.getElementById('beatport-hype10-list');
+    if (beatportHype10Container) {
+        beatportHype10Container.addEventListener('click', () => {
+            console.log('🔥 Hype Top 10 container clicked on rebuild page');
+            handleRebuildHypeTop10Click();
+        });
+    }
+
+    // Logic for Rebuild page Hero Slider - individual slide click handlers will be set up in populateBeatportSlider
+    // Container-level click handler removed to allow individual slide clicks like top 10 releases
+
+    // Logic for the Start Sync button
+    const startSyncBtn = document.getElementById('start-sync-btn');
+    if (startSyncBtn) {
+        startSyncBtn.addEventListener('click', startSequentialSync);
+    }
+
+    // Logic for the YouTube parse button
+    const youtubeParseBtn = document.getElementById('youtube-parse-btn');
+    if (youtubeParseBtn) {
+        youtubeParseBtn.addEventListener('click', parseYouTubePlaylist);
+    }
+
+    // Logic for YouTube URL input (Enter key support)
+    const youtubeUrlInput = document.getElementById('youtube-url-input');
+    if (youtubeUrlInput) {
+        youtubeUrlInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                parseYouTubePlaylist();
+            }
+        });
+    }
+
+    // Logic for Spotify Public parse button
+    const spotifyPublicParseBtn = document.getElementById('spotify-public-parse-btn');
+    if (spotifyPublicParseBtn) {
+        spotifyPublicParseBtn.addEventListener('click', parseSpotifyPublicUrl);
+    }
+
+    // Logic for Spotify Public URL input (Enter key support)
+    const spotifyPublicUrlInput = document.getElementById('spotify-public-url-input');
+    if (spotifyPublicUrlInput) {
+        spotifyPublicUrlInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                parseSpotifyPublicUrl();
+            }
+        });
+    }
+
+    // Logic for Beatport Top 100 button
+    const beatportTop100Btn = document.getElementById('beatport-top100-btn');
+    if (beatportTop100Btn) {
+        beatportTop100Btn.addEventListener('click', handleBeatportTop100Click);
+    }
+
+    // Logic for Hype Top 100 button
+    const hypeTop100Btn = document.getElementById('hype-top100-btn');
+    if (hypeTop100Btn) {
+        hypeTop100Btn.addEventListener('click', handleHypeTop100Click);
+    }
+
+    // Initialize live log viewer
+    initializeLiveLogViewer();
+}
+
+
+// --- Event Handlers ---
+
+// --- Find and REPLACE the existing handleDbUpdateButtonClick function ---
+
+async function handleDbUpdateButtonClick() {
+    const button = document.getElementById('db-update-button');
+    const currentAction = button.textContent;
+
+    if (currentAction === 'Update Database') {
+        const refreshSelect = document.getElementById('db-refresh-type');
+        const isFullRefresh = refreshSelect.value === 'full';
+
+        if (isFullRefresh) {
+            // Replicates the QMessageBox confirmation from the GUI
+            const confirmed = await showConfirmDialog({ title: 'Full Refresh', message: 'This will clear and rebuild the database for the active server. It can take a long time.\n\nAre you sure you want to proceed?', confirmText: 'Proceed' });
+            if (!confirmed) return;
+        }
+
+        try {
+            button.disabled = true;
+            button.textContent = 'Starting...';
+            const response = await fetch('/api/database/update', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ full_refresh: isFullRefresh })
+            });
+
+            if (response.ok) {
+                showToast('Database update started!', 'success');
+                // Start polling immediately to get live status
+                checkAndUpdateDbProgress();
+            } else {
+                const errorData = await response.json();
+                showToast(`Error: ${errorData.error}`, 'error');
+                button.disabled = false;
+                button.textContent = 'Update Database';
+            }
+        } catch (error) {
+            showToast('Failed to start update process.', 'error');
+            button.disabled = false;
+            button.textContent = 'Update Database';
+        }
+
+    } else { // "Stop Update"
+        try {
+            const response = await fetch('/api/database/update/stop', { method: 'POST' });
+            if (response.ok) {
+                showToast('Stop request sent.', 'info');
+            } else {
+                showToast('Failed to send stop request.', 'error');
+            }
+        } catch (error) {
+            showToast('Error sending stop request.', 'error');
+        }
+    }
+}
+
+async function handleWishlistButtonClick() {
+    try {
+        const playlistId = 'wishlist';
+
+        console.log('🎵 [Wishlist Button] User clicked wishlist button - checking server state first');
+
+        // STEP 1: Always check server state first to detect any active wishlist processes
+        const response = await fetch('/api/active-processes');
+        if (!response.ok) {
+            throw new Error(`Failed to fetch active processes: ${response.status}`);
+        }
+
+        const data = await response.json();
+        const processes = data.active_processes || [];
+        const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
+
+        // STEP 2: Handle active server process - show current state immediately
+        if (serverWishlistProcess) {
+            console.log('🎯 [Wishlist Button] Server has active wishlist process:', {
+                batch_id: serverWishlistProcess.batch_id,
+                phase: serverWishlistProcess.phase,
+                auto_initiated: serverWishlistProcess.auto_initiated,
+                should_show: serverWishlistProcess.should_show_modal
+            });
+
+            // Clear any user-closed state since user explicitly requested to see modal
+            WishlistModalState.clearUserClosed();
+
+            // Check if we need to create/sync the frontend modal
+            const clientWishlistProcess = activeDownloadProcesses[playlistId];
+            const needsRehydration = !clientWishlistProcess ||
+                clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
+                !clientWishlistProcess.modalElement ||
+                !document.body.contains(clientWishlistProcess.modalElement);
+
+            if (needsRehydration) {
+                console.log('🔄 [Wishlist Button] Frontend modal needs sync/creation');
+                await rehydrateModal(serverWishlistProcess, true); // user-requested = true
+            } else {
+                console.log('✅ [Wishlist Button] Frontend modal already synced, showing existing modal');
+                clientWishlistProcess.modalElement.style.display = 'flex';
+                WishlistModalState.setVisible();
+            }
+            return;
+        }
+
+        // STEP 3: No active server process - check wishlist count and create fresh modal
+        console.log('📭 [Wishlist Button] No active server process, checking wishlist content');
+
+        const countResponse = await fetch('/api/wishlist/count');
+        if (!countResponse.ok) {
+            throw new Error(`Failed to fetch wishlist count: ${countResponse.status}`);
+        }
+
+        const countData = await countResponse.json();
+        if (countData.count === 0) {
+            showToast('Wishlist is empty. No tracks to download.', 'info');
+            return;
+        }
+
+        // STEP 4: Open wishlist overview modal (NEW - category selection)
+        console.log(`🆕 [Wishlist Button] Opening wishlist overview for ${countData.count} tracks`);
+        await openWishlistOverviewModal();
+
+    } catch (error) {
+        console.error('❌ [Wishlist Button] Error handling wishlist button click:', error);
+        showToast(`Error opening wishlist: ${error.message}`, 'error');
+    }
+}
+
+async function cleanupWishlist(playlistId) {
+    try {
+        // Show information dialog
+        const confirmed = await showConfirmDialog({
+            title: 'Cleanup Wishlist',
+            message: 'This will check all wishlist tracks against your music library and automatically remove any tracks that already exist in your database.\n\nThis is a safe operation that only removes tracks you already have. Continue with cleanup?'
+        });
+
+        if (!confirmed) {
+            return;
+        }
+
+        // Disable the cleanup button during the operation
+        const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
+        if (cleanupBtn) {
+            cleanupBtn.disabled = true;
+            cleanupBtn.textContent = '🧹 Cleaning...';
+        }
+
+        const response = await fetch('/api/wishlist/cleanup', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            const removedCount = result.removed_count || 0;
+            const processedCount = result.processed_count || 0;
+
+            if (removedCount > 0) {
+                showToast(`Wishlist cleanup completed: ${removedCount} tracks removed (${processedCount} checked)`, 'success');
+
+                // Refresh the modal content to show updated state
+                setTimeout(() => {
+                    openDownloadMissingWishlistModal();
+                }, 500);
+
+                // Update the wishlist count in the main dashboard
+                await updateWishlistCount();
+            } else {
+                showToast(`Wishlist cleanup completed: No tracks to remove (${processedCount} checked)`, 'info');
+            }
+        } else {
+            showToast(`Error cleaning wishlist: ${result.error}`, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error cleaning wishlist:', error);
+        showToast(`Error cleaning wishlist: ${error.message}`, 'error');
+    } finally {
+        // Re-enable the cleanup button
+        const cleanupBtn = document.getElementById(`cleanup-wishlist-btn-${playlistId}`);
+        if (cleanupBtn) {
+            cleanupBtn.disabled = false;
+            cleanupBtn.textContent = '🧹 Cleanup Wishlist';
+        }
+    }
+}
+
+async function clearWishlist(playlistId) {
+    try {
+        // Show confirmation dialog
+        const confirmed = await showConfirmDialog({
+            title: 'Clear Wishlist',
+            message: 'Are you sure you want to clear the entire wishlist?\n\nThis will permanently remove all failed tracks from the wishlist. This action cannot be undone.',
+            confirmText: 'Clear All',
+            destructive: true
+        });
+
+        if (!confirmed) {
+            return;
+        }
+
+        // Disable the clear button during the operation
+        const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
+        if (clearBtn) {
+            clearBtn.disabled = true;
+            clearBtn.textContent = 'Clearing...';
+        }
+
+        // Call the clear API endpoint
+        const response = await fetch('/api/wishlist/clear', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            showToast('Wishlist cleared successfully', 'success');
+
+            // Close the modal since there are no more tracks
+            closeDownloadMissingModal(playlistId);
+
+            // Update the wishlist count in the main dashboard
+            await updateWishlistCount();
+
+        } else {
+            showToast(`Failed to clear wishlist: ${result.error || 'Unknown error'}`, 'error');
+        }
+
+    } catch (error) {
+        console.error('Error clearing wishlist:', error);
+        showToast(`Error clearing wishlist: ${error.message}`, 'error');
+    } finally {
+        // Re-enable the clear button
+        const clearBtn = document.getElementById(`clear-wishlist-btn-${playlistId}`);
+        if (clearBtn) {
+            clearBtn.disabled = false;
+            clearBtn.textContent = '🗑️ Clear Wishlist';
+        }
+    }
+}
+
+
+// ===============================
+// BEATPORT CHARTS FUNCTIONALITY
+// ===============================
+
+function updateBeatportClearButtonState() {
+    const clearBtn = document.getElementById('beatport-clear-btn');
+    if (!clearBtn) return;
+
+    // Check if any Beatport cards are in active states
+    const activeCharts = Object.values(beatportChartStates).filter(state =>
+        state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
+    );
+
+    const hasActiveCharts = activeCharts.length > 0;
+    const hasAnyCharts = Object.keys(beatportChartStates).length > 0;
+
+    if (!hasAnyCharts) {
+        // No charts at all
+        clearBtn.disabled = true;
+        clearBtn.textContent = '🗑️ Clear';
+        clearBtn.style.opacity = '0.5';
+        clearBtn.style.cursor = 'not-allowed';
+        clearBtn.title = 'No Beatport charts to clear';
+    } else if (hasActiveCharts) {
+        // Has charts but some are active
+        clearBtn.disabled = true;
+        clearBtn.textContent = '🚫 Clear Blocked';
+        clearBtn.style.opacity = '0.6';
+        clearBtn.style.cursor = 'not-allowed';
+        const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
+        clearBtn.title = `Cannot clear: ${activeCharts.length} chart(s) are currently active: ${activeNames}`;
+    } else {
+        // Has charts and none are active
+        clearBtn.disabled = false;
+        clearBtn.textContent = '🗑️ Clear';
+        clearBtn.style.opacity = '1';
+        clearBtn.style.cursor = 'pointer';
+        clearBtn.title = 'Clear all Beatport charts';
+    }
+}
+
+async function clearBeatportPlaylists() {
+    const container = document.getElementById('beatport-playlist-container');
+    const clearBtn = document.getElementById('beatport-clear-btn');
+
+    if (Object.keys(beatportChartStates).length === 0) {
+        showToast('No Beatport playlists to clear', 'info');
+        return;
+    }
+
+    // Check if any Beatport cards are in active states (discovering, syncing, or downloading)
+    const activeCharts = Object.values(beatportChartStates).filter(state =>
+        state.phase === 'discovering' || state.phase === 'syncing' || state.phase === 'downloading'
+    );
+
+    if (activeCharts.length > 0) {
+        const activeNames = activeCharts.map(state => state.chart?.name || 'Unknown').join(', ');
+        showToast(`Cannot clear: ${activeCharts.length} chart(s) are currently discovering, syncing, or downloading: ${activeNames}`, 'warning');
+        return;
+    }
+
+    // Show loading state
+    clearBtn.disabled = true;
+    clearBtn.textContent = '🗑️ Clearing...';
+
+    try {
+        // Clear all Beatport chart states
+        Object.keys(beatportChartStates).forEach(chartHash => {
+            // Close any open modals for this chart
+            const modal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
+            if (modal) {
+                modal.remove();
+            }
+
+            // Remove from YouTube states (since Beatport reuses that infrastructure)
+            if (youtubePlaylistStates[chartHash]) {
+                // Clean up any active download processes for this Beatport chart
+                const ytState = youtubePlaylistStates[chartHash];
+                if (ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
+                    const downloadProcess = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
+                    if (downloadProcess) {
+                        console.log(`🗑️ Cleaning up download process for Beatport chart: ${chartHash}`);
+                        if (downloadProcess.modalElement) {
+                            downloadProcess.modalElement.remove();
+                        }
+                        delete activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
+                    }
+                }
+
+                delete youtubePlaylistStates[chartHash];
+            }
+        });
+
+        // Clear Beatport states
+        const chartHashesToClear = Object.keys(beatportChartStates);
+        beatportChartStates = {};
+
+        // Clear backend state for all charts
+        for (const chartHash of chartHashesToClear) {
+            try {
+                await fetch(`/api/beatport/charts/delete/${chartHash}`, {
+                    method: 'DELETE'
+                });
+                console.log(`🗑️ Deleted backend state for Beatport chart: ${chartHash}`);
+            } catch (error) {
+                console.warn(`⚠️ Error deleting backend state for chart ${chartHash}:`, error);
+            }
+        }
+
+        // Reset container to placeholder
+        container.innerHTML = `
+            <div class="playlist-placeholder">Your created Beatport playlists will appear here.</div>
+        `;
+
+        console.log(`🗑️ Cleared ${chartHashesToClear.length} Beatport charts from frontend and backend`);
+        showToast('Cleared all Beatport playlists', 'success');
+
+        // Update clear button state after clearing all charts
+        updateBeatportClearButtonState();
+
+    } catch (error) {
+        console.error('Error clearing Beatport playlists:', error);
+        showToast(`Error clearing playlists: ${error.message}`, 'error');
+    } finally {
+        clearBtn.disabled = false;
+        clearBtn.textContent = '🗑️ Clear';
+    }
+}
+
+function handleBeatportCategoryClick(category) {
+    console.log(`🎵 Beatport category clicked: ${category}`);
+
+    // Only handle genres category now - homepage has direct chart buttons
+    switch (category) {
+        case 'genres':
+            showBeatportSubView('genres');
+            loadBeatportGenres(); // Load genres dynamically
+            break;
+        default:
+            showToast(`Unknown category: ${category}`, 'error');
+    }
+}
+
+async function loadBeatportGenres() {
+    console.log('🔍 Loading Beatport genres dynamically...');
+
+    const genreGrid = document.querySelector('#beatport-genres-view .beatport-genre-grid');
+    if (!genreGrid) {
+        console.error('❌ Could not find genre grid element');
+        return;
+    }
+
+    // Show loading state
+    genreGrid.innerHTML = `
+        <div class="genre-loading-placeholder">
+            <div class="loading-spinner"></div>
+            <p>🔍 Discovering current Beatport genres...</p>
+        </div>
+    `;
+
+    try {
+        // First, fetch genres quickly without images
+        console.log('🚀 Fetching genres without images for fast loading...');
+        const fastResponse = await fetch('/api/beatport/genres');
+        if (!fastResponse.ok) {
+            throw new Error(`API returned ${fastResponse.status}: ${fastResponse.statusText}`);
+        }
+
+        const fastData = await fastResponse.json();
+        const genres = fastData.genres || [];
+
+        if (genres.length === 0) {
+            genreGrid.innerHTML = `
+                <div class="genre-error-placeholder">
+                    <p>⚠️ No genres available</p>
+                    <button onclick="loadBeatportGenres()" class="refresh-genres-btn">🔄 Retry</button>
+                </div>
+            `;
+            return;
+        }
+
+        // Generate genre cards dynamically (without images first)
+        const genreCardsHTML = genres.map(genre => `
+            <div class="beatport-genre-item"
+                 data-genre-slug="${genre.slug}"
+                 data-genre-id="${genre.id}"
+                 data-genre-name="${genre.name}">
+                <div class="genre-icon">🎵</div>
+                <h3>${genre.name}</h3>
+                <span class="track-count">Top 100</span>
+            </div>
+        `).join('');
+
+        genreGrid.innerHTML = genreCardsHTML;
+
+        // Add click handlers to dynamically created genre items
+        const genreItems = genreGrid.querySelectorAll('.beatport-genre-item');
+        genreItems.forEach(item => {
+            item.addEventListener('click', () => {
+                const genreSlug = item.dataset.genreSlug;
+                const genreId = item.dataset.genreId;
+                const genreName = item.dataset.genreName;
+                handleBeatportGenreClick(genreSlug, genreId, genreName);
+            });
+        });
+
+        console.log(`✅ Loaded ${genres.length} Beatport genres dynamically (fast mode)`);
+        showToast(`Loaded ${genres.length} current Beatport genres`, 'success');
+
+        // Now fetch images progressively in the background if there are many genres
+        if (genres.length > 10) {
+            console.log('🖼️ Loading genre images progressively...');
+            loadGenreImagesProgressively(genres);
+        }
+
+    } catch (error) {
+        console.error('❌ Error loading Beatport genres:', error);
+        genreGrid.innerHTML = `
+            <div class="genre-error-placeholder">
+                <p>❌ Failed to load genres: ${error.message}</p>
+                <button onclick="loadBeatportGenres()" class="refresh-genres-btn">🔄 Retry</button>
+            </div>
+        `;
+        showToast(`Error loading Beatport genres: ${error.message}`, 'error');
+    }
+}
+
+async function loadGenreImagesProgressively(genres) {
+    // Load genre images with 2 concurrent workers for faster loading
+
+    const imageQueue = [...genres]; // Create a copy for processing
+    let imagesLoaded = 0;
+    const maxWorkers = 2;
+
+    console.log(`🖼️ Starting progressive image loading with ${maxWorkers} workers for ${imageQueue.length} genres`);
+
+    // Function to process a single image
+    async function processImage(genre) {
+        try {
+            // Fetch individual genre image from backend
+            const response = await fetch(`/api/beatport/genre-image/${genre.slug}/${genre.id}`);
+
+            if (response.ok) {
+                const data = await response.json();
+
+                if (data.success && data.image_url) {
+                    // Find the genre item in the DOM
+                    const genreItem = document.querySelector(
+                        `[data-genre-slug="${genre.slug}"][data-genre-id="${genre.id}"]`
+                    );
+
+                    if (genreItem) {
+                        const iconElement = genreItem.querySelector('.genre-icon');
+                        if (iconElement) {
+                            // Create new image element with smooth transition
+                            const imageDiv = document.createElement('div');
+                            imageDiv.className = 'genre-image';
+                            imageDiv.style.backgroundImage = `url('${data.image_url}')`;
+                            imageDiv.style.opacity = '0';
+                            imageDiv.style.transition = 'opacity 0.3s ease';
+
+                            // Replace icon with image
+                            iconElement.replaceWith(imageDiv);
+
+                            // Trigger fade-in animation
+                            setTimeout(() => {
+                                imageDiv.style.opacity = '1';
+                            }, 50);
+
+                            imagesLoaded++;
+                            console.log(`🖼️ [${imagesLoaded}/${imageQueue.length}] Loaded image for ${genre.name}`);
+                        }
+                    }
+                }
+            }
+        } catch (error) {
+            console.warn(`⚠️ Failed to load image for ${genre.name}:`, error);
+        }
+    }
+
+    // Worker function that processes images from the queue
+    async function imageWorker(workerId) {
+        while (imageQueue.length > 0) {
+            const genre = imageQueue.shift(); // Take next image from queue
+            if (genre) {
+                await processImage(genre);
+
+                // Small delay between requests to be respectful (500ms per worker = ~2 images per second total)
+                await new Promise(resolve => setTimeout(resolve, 500));
+            }
+        }
+        console.log(`✅ Worker ${workerId} finished`);
+    }
+
+    // Start the workers
+    const workers = [];
+    for (let i = 0; i < maxWorkers; i++) {
+        workers.push(imageWorker(i + 1));
+    }
+
+    // Wait for all workers to complete
+    await Promise.all(workers);
+
+    console.log(`✅ Progressive image loading complete: ${imagesLoaded}/${genres.length} images loaded`);
+}
+
+function setupHomepageChartTypeHandlers() {
+    console.log('🔧 Setting up homepage chart type handlers...');
+
+    // Select all homepage chart type cards (following genre page pattern)
+    const chartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
+
+    chartTypeCards.forEach(card => {
+        // Remove existing listeners by cloning (following genre page pattern)
+        card.replaceWith(card.cloneNode(true));
+    });
+
+    // Re-select after cloning to ensure clean event listeners (following genre page pattern)
+    const newChartTypeCards = document.querySelectorAll('.homepage-main-charts-section .genre-chart-type-card[data-chart-type], .homepage-releases-section .genre-chart-type-card[data-chart-type], .homepage-hype-section .genre-chart-type-card[data-chart-type]');
+
+    newChartTypeCards.forEach(card => {
+        card.addEventListener('click', () => {
+            const chartType = card.dataset.chartType;
+            const chartEndpoint = card.dataset.chartEndpoint;
+            const chartName = card.querySelector('.chart-type-info h3').textContent;
+            console.log(`🔥 Homepage chart clicked: ${chartName} (${chartType})`);
+            handleHomepageChartTypeClick(chartType, chartEndpoint, chartName);
+        });
+    });
+
+    console.log(`✅ Setup ${newChartTypeCards.length} homepage chart handlers`);
+}
+
+async function handleHomepageChartTypeClick(chartType, chartEndpoint, chartName) {
+    console.log(`🔥 Homepage chart type clicked: ${chartType} (${chartName})`);
+
+    // Map chart types to API endpoints and create descriptive names (following genre page pattern)
+    const chartTypeMap = {
+        'top-10': {
+            endpoint: `/api/beatport/top-100`,  // Use top-100 endpoint and limit to 10
+            name: `Beatport Top 10`,
+            limit: 10
+        },
+        'top-100': {
+            endpoint: `/api/beatport/top-100`,
+            name: `Beatport Top 100`,
+            limit: 100
+        },
+        'releases-top-10': {
+            endpoint: `/api/beatport/homepage/top-10-releases`,  // Working route
+            name: `Top 10 Releases`,
+            limit: 10
+        },
+        'releases-top-100': {
+            endpoint: `/api/beatport/top-100-releases`,
+            name: `Top 100 Releases`,
+            limit: 100
+        },
+        'latest-releases': {
+            endpoint: `/api/beatport/homepage/new-releases`,  // Use new-releases as fallback for now
+            name: `Latest Releases`,
+            limit: 50
+        },
+        'hype-top-10': {
+            endpoint: `/api/beatport/hype-top-100`,  // Use hype-100 endpoint and limit to 10
+            name: `Hype Top 10`,
+            limit: 10
+        },
+        'hype-top-100': {
+            endpoint: `/api/beatport/hype-top-100`,
+            name: `Hype Top 100`,
+            limit: 100
+        },
+        'hype-picks': {
+            endpoint: `/api/beatport/homepage/hype-picks`,  // Working route
+            name: `Hype Picks`,
+            limit: 50
+        }
+    };
+
+    const chartConfig = chartTypeMap[chartType];
+    if (!chartConfig) {
+        console.error(`❌ Unknown homepage chart type: ${chartType}`);
+        showToast(`Unknown chart type: ${chartType}`, 'error');
+        return;
+    }
+
+    try {
+        showToast(`Loading ${chartConfig.name}...`, 'info');
+        showLoadingOverlay(`Loading ${chartConfig.name}...`);
+
+        const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(`No tracks found in ${chartConfig.name}`);
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
+
+    } catch (error) {
+        console.error(`❌ Error loading ${chartConfig.name}:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
+    }
+}
+
+
+
+async function openBeatportDiscoveryModal(chartHash, chartData) {
+    console.log(`🎵 Opening Beatport discovery modal (reusing YouTube modal): ${chartData.name}`);
+
+    // Create YouTube-style state entry for this Beatport chart
+    const beatportState = {
+        phase: 'fresh',
+        playlist: {
+            name: chartData.name,
+            tracks: chartData.tracks,
+            description: `${chartData.track_count} tracks from ${chartData.name}`,
+            source: 'beatport'
+        },
+        is_beatport_playlist: true,
+        beatport_chart_type: chartData.chart_type,
+        beatport_chart_hash: chartHash  // Link to Beatport card state
+    };
+
+    // Store in YouTube playlist states (reusing the infrastructure)
+    youtubePlaylistStates[chartHash] = beatportState;
+
+    // Start discovery automatically (like Tidal does)
+    try {
+        console.log(`🔍 Starting Beatport discovery for: ${chartData.name}`);
+
+        // Update card phase to discovering immediately
+        updateBeatportCardPhase(chartHash, 'discovering');
+
+        // Call the discovery start endpoint with chart data
+        const response = await fetch(`/api/beatport/discovery/start/${chartHash}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                chart_data: chartData
+            })
+        });
+
+        const result = await response.json();
+        if (result.success) {
+            // Update state to discovering
+            youtubePlaylistStates[chartHash].phase = 'discovering';
+
+            // Start polling for progress
+            startBeatportDiscoveryPolling(chartHash);
+
+            console.log(`✅ Started Beatport discovery for: ${chartData.name}`);
+        } else {
+            console.error('❌ Error starting Beatport discovery:', result.error);
+            showToast(`Error starting discovery: ${result.error}`, 'error');
+            // Revert card phase on error
+            updateBeatportCardPhase(chartHash, 'fresh');
+        }
+    } catch (error) {
+        console.error('❌ Error starting Beatport discovery:', error);
+        showToast(`Error starting discovery: ${error.message}`, 'error');
+        // Revert card phase on error
+        updateBeatportCardPhase(chartHash, 'fresh');
+    }
+
+    // Open the existing YouTube discovery modal infrastructure
+    openYouTubeDiscoveryModal(chartHash);
+
+    console.log(`✅ Beatport discovery modal opened for ${chartData.name} with ${chartData.tracks.length} tracks`);
+}
+
+function startBeatportDiscoveryPolling(urlHash) {
+    console.log(`🔄 Starting Beatport discovery polling for: ${urlHash}`);
+
+    // Stop any existing polling (reuse YouTube polling infrastructure)
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [urlHash] });
+        _discoveryProgressCallbacks[urlHash] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+                return;
+            }
+            if (youtubePlaylistStates[urlHash]) {
+                const transformed = {
+                    progress: data.progress || 0, spotify_matches: data.spotify_matches || 0, spotify_total: data.spotify_total || 0,
+                    results: (data.results || []).map((r, i) => ({
+                        index: r.index !== undefined ? r.index : i,
+                        yt_track: r.beatport_track ? r.beatport_track.title : 'Unknown',
+                        yt_artist: r.beatport_track ? r.beatport_track.artist : 'Unknown',
+                        status: (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found') ? '✅ Found' : (r.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                        status_class: r.status_class || ((r.status === 'found' || r.status === '✅ Found') ? 'found' : (r.status === 'error' ? 'error' : 'not-found')),
+                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
+                        spotify_artist: r.spotify_data && r.spotify_data.artists ? r.spotify_data.artists.map(a => a.name || a).join(', ') : (r.spotify_artist || '-'),
+                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
+                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match
+                    }))
+                };
+                const st = youtubePlaylistStates[urlHash];
+                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
+                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
+                st.discovery_results = data.results; st.discoveryResults = transformed.results;
+                st.phase = data.phase || 'discovering';
+                const chartHash = st.beatport_chart_hash || urlHash;
+                updateBeatportCardPhase(chartHash, data.phase || 'discovering');
+                updateBeatportCardProgress(chartHash, { spotify_total: data.spotify_total || 0, spotify_matches: data.spotify_matches || 0, failed: (data.spotify_total || 0) - (data.spotify_matches || 0) });
+                if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = data.phase || 'discovering';
+                updateYouTubeDiscoveryModal(urlHash, transformed);
+            }
+            if (data.phase === 'discovered' || data.phase === 'error') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/beatport/discovery/status/${urlHash}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling Beatport discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            // Update state and modal (reuse YouTube infrastructure like Tidal)
+            if (youtubePlaylistStates[urlHash]) {
+                // Transform Beatport results to YouTube modal format (like Tidal does)
+                const transformedStatus = {
+                    progress: status.progress || 0,
+                    spotify_matches: status.spotify_matches || 0,
+                    spotify_total: status.spotify_total || 0,
+                    results: (status.results || []).map((result, index) => ({
+                        index: result.index !== undefined ? result.index : index,
+                        yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
+                        yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
+                        status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                        status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
+                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                        spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                            result.spotify_data.artists.map(a => a.name || a).join(', ') : (result.spotify_artist || '-'),
+                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                        spotify_data: result.spotify_data, // Pass through
+                        spotify_id: result.spotify_id, // Pass through
+                        manual_match: result.manual_match // Pass through
+                    }))
+                };
+
+                // Update state with both backend and frontend formats (like Tidal)
+                const state = youtubePlaylistStates[urlHash];
+                state.discovery_progress = status.progress; // Backend format
+                state.discoveryProgress = status.progress; // Frontend format - for modal progress display
+                state.spotify_matches = status.spotify_matches; // Backend format
+                state.spotifyMatches = status.spotify_matches; // Frontend format - for button logic
+                state.discovery_results = status.results; // Backend format
+                state.discoveryResults = transformedStatus.results; // Frontend format - for button logic
+                state.phase = status.phase || 'discovering';
+
+                // Update Beatport card phase and progress
+                const chartHash = state.beatport_chart_hash || urlHash;
+                updateBeatportCardPhase(chartHash, status.phase || 'discovering');
+                updateBeatportCardProgress(chartHash, {
+                    spotify_total: status.spotify_total || 0,
+                    spotify_matches: status.spotify_matches || 0,
+                    failed: (status.spotify_total || 0) - (status.spotify_matches || 0)
+                });
+
+                // Sync with backend Beatport chart state
+                if (beatportChartStates[chartHash]) {
+                    beatportChartStates[chartHash].phase = status.phase || 'discovering';
+                }
+
+                // Update modal display with transformed data
+                updateYouTubeDiscoveryModal(urlHash, transformedStatus);
+            }
+
+            // Stop polling when discovery is complete
+            if (status.phase === 'discovered' || status.phase === 'error') {
+                console.log(`✅ Beatport discovery polling complete for: ${urlHash}`);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+            }
+
+        } catch (error) {
+            console.error('❌ Error polling Beatport discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[urlHash];
+        }
+    }, 2000); // Poll every 2 seconds like Tidal
+
+    // Store the interval so we can clean it up later
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+function showBeatportSubView(viewType) {
+    // Hide main category view
+    const mainView = document.getElementById('beatport-main-view');
+    if (mainView) {
+        mainView.classList.remove('active');
+    }
+
+    // Hide all sub-views
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+
+    // Show the requested sub-view
+    const targetView = document.getElementById(`beatport-${viewType}-view`);
+    if (targetView) {
+        targetView.classList.add('active');
+        console.log(`🎵 Showing Beatport ${viewType} view`);
+    } else {
+        console.error(`🎵 Could not find view: beatport-${viewType}-view`);
+    }
+}
+
+function showBeatportMainView() {
+    // Hide all sub-views
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+
+    // Show main category view
+    const mainView = document.getElementById('beatport-main-view');
+    if (mainView) {
+        mainView.classList.add('active');
+        console.log('🎵 Showing Beatport main view');
+    }
+}
+
+// ===============================
+// REBUILD PAGE TOP 10 FUNCTIONALITY
+// ===============================
+
+// Global variable to store rebuild page track data for reuse
+let rebuildPageTrackData = {
+    beatport_top10: null,
+    hype_top10: null
+    // hero_slider removed - now uses individual slide click handlers
+};
+
+async function handleRebuildBeatportTop10Click() {
+    console.log('🎵 Handling Beatport Top 10 click on rebuild page');
+
+    // Use the existing chart creation pattern from Browse Charts EXACTLY
+    await handleRebuildChartClick('beatport_top10', 'Beatport Top 10', 'rebuild_beatport_top10');
+}
+
+async function handleRebuildHypeTop10Click() {
+    console.log('🔥 Handling Hype Top 10 click on rebuild page');
+
+    // Use the existing chart creation pattern from Browse Charts EXACTLY
+    await handleRebuildChartClick('hype_top10', 'Hype Top 10', 'rebuild_hype_top10');
+}
+
+// Hero slider now uses individual slide click handlers instead of container-level clicking
+// The old handleRebuildHeroSliderClick function has been removed in favor of individual release discovery
+
+async function handleRebuildChartClick(trackDataKey, chartName, chartType) {
+    if (_beatportModalOpening) return;
+    _beatportModalOpening = true;
+    setTimeout(() => { _beatportModalOpening = false; }, 2000);
+
+    try {
+        // Get basic track data from DOM
+        const trackData = await getRebuildPageTrackData(trackDataKey);
+        if (!trackData || trackData.length === 0) {
+            throw new Error(`No track data found for ${chartName}`);
+        }
+
+        console.log(`✅ Got ${trackData.length} tracks from ${chartName}, enriching one-by-one...`);
+        showLoadingOverlay(`Fetching track metadata... (0/${trackData.length})`);
+
+        const enrichedTracks = await _enrichTracksWithProgress(trackData, chartName);
+
+        console.log(`✅ Enriched ${enrichedTracks.length} tracks`);
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+    } catch (error) {
+        hideLoadingOverlay();
+        console.error(`❌ Error handling ${chartName} click:`, error);
+        showToast(`Error loading ${chartName}: ${error.message}`, 'error');
+    }
+}
+
+async function getRebuildPageTrackData(trackDataKey) {
+    // First check if we have cached data from when the rebuild page was loaded
+    if (rebuildPageTrackData[trackDataKey]) {
+        console.log(`📦 Using cached ${trackDataKey} data`);
+        return rebuildPageTrackData[trackDataKey];
+    }
+
+    // If no cached data, extract from DOM (fallback)
+    console.log(`🔍 Extracting ${trackDataKey} data from rebuild page DOM`);
+
+    let containerSelector, cardSelector;
+    if (trackDataKey === 'beatport_top10') {
+        containerSelector = '#beatport-top10-list';
+        cardSelector = '.beatport-top10-card[data-url]';
+    } else if (trackDataKey === 'hype_top10') {
+        containerSelector = '#beatport-hype10-list';
+        cardSelector = '.beatport-hype10-card[data-url]';
+    } else {
+        throw new Error(`Unknown track data key: ${trackDataKey}`);
+    }
+
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+        throw new Error(`Container ${containerSelector} not found`);
+    }
+
+    const trackCards = container.querySelectorAll(cardSelector);
+    if (trackCards.length === 0) {
+        throw new Error(`No track cards found in ${containerSelector}`);
+    }
+
+    // Extract track data from DOM cards
+    const tracks = Array.from(trackCards).map(card => {
+        const title = card.querySelector('.beatport-top10-card-title, .beatport-hype10-card-title')?.textContent?.trim() || 'Unknown Title';
+        const artist = card.querySelector('.beatport-top10-card-artist, .beatport-hype10-card-artist')?.textContent?.trim() || 'Unknown Artist';
+        const label = card.querySelector('.beatport-top10-card-label, .beatport-hype10-card-label')?.textContent?.trim() || 'Unknown Label';
+        const url = card.getAttribute('data-url') || '';
+        const rank = card.querySelector('.beatport-top10-card-rank, .beatport-hype10-card-rank')?.textContent?.trim() || '';
+
+        return {
+            title: title,
+            artist: artist,
+            label: label,
+            url: url,
+            rank: rank
+        };
+    });
+
+    console.log(`📋 Extracted ${tracks.length} tracks from ${containerSelector}`);
+
+    // Cache for future use
+    rebuildPageTrackData[trackDataKey] = tracks;
+
+    return tracks;
+}
+
+// getHeroSliderTrackData function removed - hero slider now uses individual slide click handlers
+// Each slide will create its own discovery modal using handleBeatportReleaseCardClick
+
+// Hook into the loadBeatportTop10Lists function to cache track data
+const originalLoadBeatportTop10Lists = window.loadBeatportTop10Lists;
+if (originalLoadBeatportTop10Lists) {
+    window.loadBeatportTop10Lists = async function () {
+        const result = await originalLoadBeatportTop10Lists.apply(this, arguments);
+
+        // If the load was successful, we can potentially cache the track data
+        // But for now, we'll rely on DOM extraction as it's more reliable
+
+        return result;
+    };
+}
+
+// ===============================
+// BEATPORT CHART FUNCTIONALITY
+// ===============================
+
+function createBeatportCard(chartData) {
+    const state = beatportChartStates[chartData.hash];
+    const phase = state ? state.phase : 'fresh';
+
+    let buttonText = getActionButtonText(phase);
+    let phaseText = getPhaseText(phase);
+    let phaseColor = getPhaseColor(phase);
+
+    return `
+        <div class="youtube-playlist-card" id="beatport-card-${chartData.hash}">
+            <div class="playlist-card-icon">🎧</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(chartData.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">${chartData.track_count} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                <!-- Progress will be dynamically updated based on phase -->
+            </div>
+            <button class="playlist-card-action-btn">${buttonText}</button>
+        </div>
+    `;
+}
+
+function addBeatportCardToContainer(chartData) {
+    const container = document.getElementById('beatport-playlist-container');
+
+    // Remove placeholder if it exists
+    const placeholder = container.querySelector('.playlist-placeholder');
+    if (placeholder) {
+        placeholder.remove();
+    }
+
+    // Check if card already exists
+    const existingCard = document.getElementById(`beatport-card-${chartData.hash}`);
+    if (existingCard) {
+        console.log(`Card already exists for ${chartData.name}, updating instead`);
+        return;
+    }
+
+    // Create and add the card
+    const cardHtml = createBeatportCard(chartData);
+    container.insertAdjacentHTML('beforeend', cardHtml);
+
+    // Initialize state
+    beatportChartStates[chartData.hash] = {
+        phase: 'fresh',
+        chart: chartData,
+        cardElement: document.getElementById(`beatport-card-${chartData.hash}`)
+    };
+
+    // Add click handler
+    const card = document.getElementById(`beatport-card-${chartData.hash}`);
+    if (card) {
+        card.addEventListener('click', async () => await handleBeatportCardClick(chartData.hash));
+    }
+
+    console.log(`🃏 Created Beatport card: ${chartData.name}`);
+
+    // Auto-mirror this Beatport chart
+    if (chartData.tracks && chartData.tracks.length > 0) {
+        mirrorPlaylist('beatport', chartData.hash, chartData.name, chartData.tracks.map(t => ({
+            track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
+            album_name: t.album || '', duration_ms: t.duration_ms || 0,
+            source_track_id: t.id || '', image_url: t.image_url || null
+        })));
+    }
+
+    // Update clear button state after creating card
+    updateBeatportClearButtonState();
+}
+
+async function handleBeatportCardClick(chartHash) {
+    const state = beatportChartStates[chartHash];
+    if (!state) {
+        console.error(`❌ [Card Click] No state found for Beatport chart: ${chartHash}`);
+        showToast('Chart state not found - try refreshing the page', 'error');
+        return;
+    }
+
+    if (!state.chart) {
+        console.error(`❌ [Card Click] No chart data found for Beatport chart: ${chartHash}`);
+        showToast('Chart data missing - try refreshing the page', 'error');
+        return;
+    }
+
+    console.log(`🎧 [Card Click] Beatport card clicked: ${chartHash}, Phase: ${state.phase}`);
+
+    if (state.phase === 'fresh') {
+        // Open discovery modal and start discovery
+        openBeatportDiscoveryModal(chartHash, state.chart);
+    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
+        // Reopen existing modal with preserved discovery results
+        console.log(`🎧 [Card Click] Opening Beatport discovery modal for ${state.phase} phase`);
+
+        // Check if we have the required state data
+        const ytState = youtubePlaylistStates[chartHash];
+        if (!ytState || !ytState.playlist) {
+            console.log(`🔍 [Card Click] Missing playlist data for ${state.phase} phase, fetching from backend...`);
+
+            try {
+                // Fetch the full state from backend
+                const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+
+                    // Restore the missing playlist data
+                    if (fullState.chart_data) {
+                        if (!youtubePlaylistStates[chartHash]) {
+                            youtubePlaylistStates[chartHash] = {};
+                        }
+                        youtubePlaylistStates[chartHash].playlist = fullState.chart_data;
+                        youtubePlaylistStates[chartHash].is_beatport_playlist = true;
+                        youtubePlaylistStates[chartHash].beatport_chart_hash = chartHash;
+
+                        // Also restore discovery results if available
+                        if (fullState.discovery_results) {
+                            youtubePlaylistStates[chartHash].discovery_results = fullState.discovery_results;
+                            console.log(`🔄 [Hydration] Restored ${fullState.discovery_results.length} discovery results`);
+                            console.log(`🔄 [Hydration] First result:`, fullState.discovery_results[0]);
+                        }
+
+                        // Restore discovery progress state
+                        if (fullState.discovery_progress !== undefined) {
+                            youtubePlaylistStates[chartHash].discovery_progress = fullState.discovery_progress;
+                        }
+                        if (fullState.spotify_matches !== undefined) {
+                            youtubePlaylistStates[chartHash].spotify_matches = fullState.spotify_matches;
+                            console.log(`🔄 [Hydration] Restored spotify_matches: ${fullState.spotify_matches}`);
+                        }
+                        if (fullState.spotify_total !== undefined) {
+                            youtubePlaylistStates[chartHash].spotify_total = fullState.spotify_total;
+                        }
+
+                        console.log(`✅ [Card Click] Restored playlist data for ${state.phase} phase`);
+                    }
+                } else {
+                    console.error(`❌ [Card Click] Failed to fetch state for chart: ${chartHash}`);
+                    showToast('Error loading chart data', 'error');
+                    return;
+                }
+            } catch (error) {
+                console.error(`❌ [Card Click] Error fetching chart state:`, error);
+                showToast('Error loading chart data', 'error');
+                return;
+            }
+        }
+
+        openYouTubeDiscoveryModal(chartHash);
+
+        // If still in discovering phase, start polling for live updates
+        if (state.phase === 'discovering') {
+            console.log(`🔄 [Card Click] Starting discovery polling for ${state.phase} phase`);
+
+            // Let the polling handle all modal updates to avoid data structure mismatches
+            console.log(`📊 [Card Click] Starting polling - it will update modal with current progress`);
+
+            startBeatportDiscoveryPolling(chartHash);
+        }
+    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
+        // Open download modal if we have the converted playlist ID (following YouTube/Tidal pattern)
+        const ytState = youtubePlaylistStates[chartHash];
+        if (ytState && ytState.is_beatport_playlist && ytState.convertedSpotifyPlaylistId) {
+            console.log(`📥 [Card Click] Opening download modal for Beatport chart: ${ytState.playlist.name} (phase: ${state.phase})`);
+
+            // Check if modal already exists, if not create it (like Tidal implementation)
+            if (activeDownloadProcesses[ytState.convertedSpotifyPlaylistId]) {
+                const process = activeDownloadProcesses[ytState.convertedSpotifyPlaylistId];
+                if (process.modalElement) {
+                    console.log(`📱 [Card Click] Showing existing download modal for ${state.phase} phase`);
+                    process.modalElement.style.display = 'flex';
+                } else {
+                    console.warn(`⚠️ [Card Click] Download process exists but modal element missing - rehydrating`);
+                    await rehydrateBeatportDownloadModal(chartHash, ytState);
+                }
+            } else {
+                // Need to create the download modal - fetch the discovery results if needed
+                console.log(`🔧 [Card Click] Rehydrating Beatport download modal for ${state.phase} phase`);
+                await rehydrateBeatportDownloadModal(chartHash, ytState);
+            }
+        } else {
+            console.error('❌ [Card Click] No converted Spotify playlist ID found for Beatport download modal');
+            console.log('📊 [Card Click] Available state data:', Object.keys(ytState || {}));
+
+            // Fallback: try to open discovery modal if we have discovery results
+            if (ytState && ytState.discovery_results && ytState.discovery_results.length > 0) {
+                console.log(`🔄 [Card Click] Fallback: Opening discovery modal with ${ytState.discovery_results.length} results`);
+                openYouTubeDiscoveryModal(chartHash);
+            } else {
+                showToast('Unable to open download modal - missing playlist data', 'error');
+            }
+        }
+    }
+}
+
+async function rehydrateBeatportDownloadModal(chartHash, ytState) {
+    try {
+        console.log(`💧 [Rehydration] Attempting fallback rehydration for Beatport chart: ${chartHash}`);
+
+        // This function is only called as a fallback when the modal wasn't created during backend loading
+        // In most cases, the modal should already exist from loadBeatportChartsFromBackend()
+
+        if (!ytState || !ytState.playlist || !ytState.convertedSpotifyPlaylistId) {
+            console.error(`❌ [Rehydration] Invalid state data for Beatport chart: ${chartHash}`);
+            showToast('Cannot open download modal - invalid playlist data', 'error');
+            return;
+        }
+
+        // Get discovery results from backend if not already loaded
+        if (!ytState.discovery_results) {
+            console.log(`🔍 Fetching discovery results from backend for Beatport chart: ${chartHash}`);
+            const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`);
+            if (stateResponse.ok) {
+                const fullState = await stateResponse.json();
+                ytState.discovery_results = fullState.discovery_results;
+                ytState.download_process_id = fullState.download_process_id;
+                console.log(`✅ Loaded ${fullState.discovery_results?.length || 0} discovery results from backend`);
+            } else {
+                console.error('❌ Failed to fetch Beatport discovery results from backend');
+                showToast('Error loading playlist data', 'error');
+                return;
+            }
+        }
+
+        // Extract Spotify tracks from discovery results
+        const spotifyTracks = ytState.discovery_results
+            .filter(result => result.spotify_data)
+            .map(result => {
+                const track = result.spotify_data;
+                // Ensure artists is an array of strings
+                if (track.artists && Array.isArray(track.artists)) {
+                    track.artists = track.artists.map(artist =>
+                        typeof artist === 'string' ? artist : (artist.name || artist)
+                    );
+                } else if (track.artists && typeof track.artists === 'string') {
+                    track.artists = [track.artists];
+                } else {
+                    track.artists = ['Unknown Artist'];
+                }
+                return {
+                    id: track.id,
+                    name: track.name,
+                    artists: track.artists,
+                    album: track.album || 'Unknown Album',
+                    duration_ms: track.duration_ms || 0,
+                    external_urls: track.external_urls || {}
+                };
+            });
+
+        if (spotifyTracks.length === 0) {
+            console.error('❌ No Spotify tracks found for download modal');
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        const virtualPlaylistId = ytState.convertedSpotifyPlaylistId;
+        const playlistName = ytState.playlist.name;
+
+        // Create the download modal
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // Set up the modal for the running state if we have a download process ID
+        if (ytState.download_process_id) {
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                process.status = 'running';
+                process.batchId = ytState.download_process_id;
+
+                // Update UI to reflect running state
+                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                if (beginBtn) beginBtn.style.display = 'none';
+                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                // Start polling for this process
+                startModalDownloadPolling(virtualPlaylistId);
+
+                console.log(`✅ [Rehydration] Fallback modal rehydrated for running download process`);
+            }
+        }
+
+    } catch (error) {
+        console.error(`❌ [Rehydration] Error in fallback rehydration for Beatport chart:`, error);
+        showToast('Error opening download modal', 'error');
+        hideLoadingOverlay();
+    }
+}
+
+function updateBeatportCardPhase(chartHash, phase) {
+    const state = beatportChartStates[chartHash];
+    if (!state) return;
+
+    state.phase = phase;
+
+    // Re-render the card with new phase
+    const card = document.getElementById(`beatport-card-${chartHash}`);
+    if (card) {
+        const newCardHtml = createBeatportCard(state.chart);
+        card.outerHTML = newCardHtml;
+
+        // Re-attach click handler
+        const newCard = document.getElementById(`beatport-card-${chartHash}`);
+        if (newCard) {
+            newCard.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
+            state.cardElement = newCard;
+        }
+    }
+
+    // Update clear button state after phase change
+    updateBeatportClearButtonState();
+}
+
+function updateBeatportCardProgress(chartHash, progress) {
+    const state = beatportChartStates[chartHash];
+    if (!state) return;
+
+    const card = document.getElementById(`beatport-card-${chartHash}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+    if (!progressElement) return;
+
+    const { spotify_total, spotify_matches, failed } = progress;
+    const percentage = spotify_total > 0 ? Math.round((spotify_matches / spotify_total) * 100) : 0;
+
+    progressElement.textContent = `♪ ${spotify_total} / ✓ ${spotify_matches} / ✗ ${failed} / ${percentage}%`;
+    progressElement.classList.remove('hidden');
+
+    console.log('🎧 Updated Beatport card progress:', chartHash, `${spotify_matches}/${spotify_total} (${percentage}%)`);
+}
+
+function switchToBeatportPlaylistsTab() {
+    // Switch from "Browse Charts" to "My Playlists" tab
+    const browseTab = document.querySelector('.beatport-tab-button[data-beatport-tab="browse"]');
+    const playlistsTab = document.querySelector('.beatport-tab-button[data-beatport-tab="playlists"]');
+    const browseContent = document.getElementById('beatport-browse-content');
+    const playlistsContent = document.getElementById('beatport-playlists-content');
+
+    if (browseTab && playlistsTab && browseContent && playlistsContent) {
+        // Update tab buttons
+        browseTab.classList.remove('active');
+        playlistsTab.classList.add('active');
+
+        // Update tab content
+        browseContent.classList.remove('active');
+        playlistsContent.classList.add('active');
+
+        console.log('🔄 Switched to Beatport "My Playlists" tab');
+    }
+}
+
+// ===============================
+// BEATPORT SYNC FUNCTIONALITY
+// ===============================
+
+async function startBeatportPlaylistSync(urlHash) {
+    try {
+        console.log('🎧 Starting Beatport playlist sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_beatport_playlist) {
+            console.error('❌ Invalid Beatport playlist state for sync');
+            showToast('Invalid Beatport playlist state', 'error');
+            return;
+        }
+
+        // Call Beatport sync endpoint
+        const response = await fetch(`/api/beatport/sync/start/${urlHash}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Capture sync_playlist_id for WebSocket subscription (Beatport returns sync_id)
+        const syncPlaylistId = result.sync_id || result.sync_playlist_id;
+        if (state) state.syncPlaylistId = syncPlaylistId;
+
+        // Update state to syncing
+        state.phase = 'syncing';
+        updateBeatportCardPhase(state.beatport_chart_hash || urlHash, 'syncing');
+
+        // Update modal buttons and start polling
+        updateBeatportModalButtons(urlHash, 'syncing');
+        startBeatportSyncPolling(urlHash, syncPlaylistId);
+
+        showToast('Starting Beatport playlist sync...', 'success');
+
+    } catch (error) {
+        console.error('❌ Error starting Beatport sync:', error);
+        showToast(`Error starting sync: ${error.message}`, 'error');
+    }
+}
+
+function startBeatportSyncPolling(urlHash, syncPlaylistId) {
+    // Stop any existing polling (reuse activeYouTubePollers for Beatport)
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    // Resolve syncPlaylistId from argument or stored state
+    const bpState = youtubePlaylistStates[urlHash];
+    syncPlaylistId = syncPlaylistId || (bpState && bpState.syncPlaylistId);
+
+    // Phase 6: Subscribe via WebSocket
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateBeatportModalSyncProgress(urlHash, progress);
+
+            if (data.status === 'finished' || data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+
+                const state = youtubePlaylistStates[urlHash];
+                if (state) {
+                    const chartHash = state.beatport_chart_hash || urlHash;
+                    if (data.status === 'finished') {
+                        state.phase = 'sync_complete';
+                        updateBeatportCardPhase(chartHash, 'sync_complete');
+                        updateBeatportModalButtons(urlHash, 'sync_complete');
+                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
+                    } else {
+                        state.phase = 'discovered';
+                        updateBeatportCardPhase(chartHash, 'discovered');
+                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
+                    }
+                }
+            }
+        };
+    }
+
+    // Define the polling function (HTTP fallback)
+    const pollFunction = async () => {
+        if (socketConnected) return; // Phase 6: WS handles updates
+        try {
+            const response = await fetch(`/api/beatport/sync/status/${urlHash}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling Beatport sync:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            updateBeatportModalSyncProgress(urlHash, status.progress);
+
+            if (status.complete || status.status === 'error') {
+                const state = youtubePlaylistStates[urlHash];
+                if (state) {
+                    const chartHash = state.beatport_chart_hash || urlHash;
+                    if (status.complete) {
+                        state.phase = 'sync_complete';
+                        state.convertedSpotifyPlaylistId = status.converted_spotify_playlist_id;
+                        updateBeatportCardPhase(chartHash, 'sync_complete');
+                        updateBeatportModalButtons(urlHash, 'sync_complete');
+                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'sync_complete';
+                    } else {
+                        state.phase = 'discovered';
+                        updateBeatportCardPhase(chartHash, 'discovered');
+                        if (beatportChartStates[chartHash]) beatportChartStates[chartHash].phase = 'discovered';
+                    }
+                }
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+            }
+        } catch (error) {
+            console.error('❌ Error polling Beatport sync:', error);
+            if (activeYouTubePollers[urlHash]) {
+                clearInterval(activeYouTubePollers[urlHash]);
+                delete activeYouTubePollers[urlHash];
+            }
+        }
+    };
+
+    // Run immediately to get current status (skip if WS active)
+    if (!socketConnected) pollFunction();
+
+    // Then continue polling at regular intervals
+    const pollInterval = setInterval(pollFunction, 2000);
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+async function cancelBeatportSync(urlHash) {
+    try {
+        console.log('❌ Cancelling Beatport sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_beatport_playlist) {
+            console.error('❌ Invalid Beatport playlist state');
+            return;
+        }
+
+        const response = await fetch(`/api/beatport/sync/cancel/${urlHash}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error cancelling sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Stop polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Phase 6: Clean up WS subscription
+        const bpSyncId = state && state.syncPlaylistId;
+        if (bpSyncId && _syncProgressCallbacks[bpSyncId]) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [bpSyncId] });
+            delete _syncProgressCallbacks[bpSyncId];
+        }
+
+        // Revert to discovered phase
+        const chartHash = state.beatport_chart_hash || urlHash;
+        state.phase = 'discovered';
+        updateBeatportCardPhase(chartHash, 'discovered');
+        updateBeatportModalButtons(urlHash, 'discovered');
+
+        // Sync with backend Beatport chart state
+        if (beatportChartStates[chartHash]) {
+            beatportChartStates[chartHash].phase = 'discovered';
+        }
+
+        showToast('Beatport sync cancelled', 'info');
+
+    } catch (error) {
+        console.error('❌ Error cancelling Beatport sync:', error);
+        showToast(`Error cancelling sync: ${error.message}`, 'error');
+    }
+}
+
+function updateBeatportModalSyncProgress(urlHash, progress) {
+    const statusDisplay = document.getElementById(`beatport-sync-status-${urlHash}`);
+    if (!statusDisplay || !progress) return;
+
+    console.log(`📊 Updating Beatport modal sync progress for ${urlHash}:`, progress);
+
+    // Update individual counters with Beatport-specific IDs
+    const totalEl = document.getElementById(`beatport-total-${urlHash}`);
+    const matchedEl = document.getElementById(`beatport-matched-${urlHash}`);
+    const failedEl = document.getElementById(`beatport-failed-${urlHash}`);
+    const percentageEl = document.getElementById(`beatport-percentage-${urlHash}`);
+
+    const total = progress.total_tracks || 0;
+    const matched = progress.matched_tracks || 0;
+    const failed = progress.failed_tracks || 0;
+    const percentage = total > 0 ? Math.round((matched / total) * 100) : 0;
+
+    if (totalEl) totalEl.textContent = total;
+    if (matchedEl) matchedEl.textContent = matched;
+    if (failedEl) failedEl.textContent = failed;
+    if (percentageEl) percentageEl.textContent = percentage;
+}
+
+function updateBeatportModalButtons(urlHash, phase) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (!modal) return;
+
+    const footerLeft = modal.querySelector('.modal-footer-left');
+    if (footerLeft) {
+        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
+    }
+}
+
+async function startBeatportDownloadMissing(urlHash) {
+    try {
+        console.log('🔍 Starting download missing tracks for Beatport chart:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        // Support both camelCase and snake_case
+        const discoveryResults = state?.discoveryResults || state?.discovery_results;
+
+        if (!state || !discoveryResults) {
+            showToast('No discovery results available for download', 'error');
+            return;
+        }
+
+        if (!state.is_beatport_playlist) {
+            console.error('❌ State is not a Beatport playlist');
+            showToast('Invalid Beatport chart state', 'error');
+            return;
+        }
+
+        // Convert Beatport discovery results to Spotify tracks format (like Tidal does)
+        console.log(`🔍 Total discovery results: ${discoveryResults.length}`);
+        console.log(`🔍 First result (full object):`, JSON.stringify(discoveryResults[0], null, 2));
+        console.log(`🔍 Second result (full object):`, JSON.stringify(discoveryResults[1], null, 2));
+        console.log(`🔍 Results with spotify_data:`, discoveryResults.filter(r => r.spotify_data).length);
+        console.log(`🔍 Results with spotify_id:`, discoveryResults.filter(r => r.spotify_id).length);
+
+        const spotifyTracks = discoveryResults
+            .filter(result => {
+                // Accept if has spotify_data OR if has spotify_track (from automatic discovery)
+                return result.spotify_data || (result.spotify_track && result.status_class === 'found');
+            })
+            .map(result => {
+                // Use spotify_data if available, otherwise build from individual fields
+                let track;
+                if (result.spotify_data) {
+                    track = result.spotify_data;
+                } else {
+                    // Build from individual fields (automatic discovery format)
+                    // Convert album to proper object format for wishlist compatibility
+                    const albumData = result.spotify_album || 'Unknown Album';
+                    const albumObject = typeof albumData === 'object' && albumData !== null
+                        ? albumData
+                        : {
+                            name: typeof albumData === 'string' ? albumData : 'Unknown Album',
+                            album_type: 'album',
+                            images: []
+                        };
+
+                    track = {
+                        id: result.spotify_id || 'unknown',
+                        name: result.spotify_track || 'Unknown Track',
+                        artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
+                        album: albumObject,
+                        duration_ms: 0
+                    };
+                }
+
+                // Ensure artists is an array of strings
+                if (track.artists && Array.isArray(track.artists)) {
+                    track.artists = track.artists.map(artist =>
+                        typeof artist === 'string' ? artist : (artist.name || artist)
+                    );
+                } else if (track.artists && typeof track.artists === 'string') {
+                    track.artists = [track.artists];
+                } else {
+                    track.artists = ['Unknown Artist'];
+                }
+
+                // Ensure album is an object (in case it was converted back to string somehow)
+                const albumForReturn = typeof track.album === 'object' && track.album !== null
+                    ? track.album
+                    : {
+                        name: typeof track.album === 'string' ? track.album : 'Unknown Album',
+                        album_type: 'album',
+                        images: []
+                    };
+
+                return {
+                    id: track.id,
+                    name: track.name,
+                    artists: track.artists,
+                    album: albumForReturn,
+                    duration_ms: track.duration_ms || 0,
+                    external_urls: track.external_urls || {}
+                };
+            });
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        console.log(`🎧 Found ${spotifyTracks.length} Spotify tracks for Beatport download`);
+
+        // Create a virtual playlist for the download system
+        const virtualPlaylistId = `beatport_${urlHash}`;
+        const playlistName = state.playlist.name;
+
+        // Store reference for card navigation (but don't change phase yet)
+        state.convertedSpotifyPlaylistId = virtualPlaylistId;
+
+        // Store converted playlist ID in backend but keep current phase
+        const chartHash = state.beatport_chart_hash || urlHash;
+        if (beatportChartStates[chartHash]) {
+            try {
+                await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        phase: state.phase, // Keep current phase (should be 'discovered')
+                        converted_spotify_playlist_id: virtualPlaylistId
+                    })
+                });
+                console.log('✅ Updated backend with Beatport converted playlist ID (phase unchanged)');
+            } catch (error) {
+                console.warn('⚠️ Error updating backend Beatport state:', error);
+            }
+        }
+
+        // Close the discovery modal if it's open
+        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (discoveryModal) {
+            discoveryModal.classList.add('hidden');
+            console.log('🔄 Closed Beatport discovery modal to show download modal');
+        }
+
+        // DON'T update card phase here - let the download modal handle phase changes when "Begin Analysis" is clicked
+
+        // Open download missing tracks modal using the same system as YouTube/Tidal
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+        console.log(`✅ Opened download modal for Beatport chart: ${state.playlist.name}`);
+
+    } catch (error) {
+        console.error('❌ Error starting Beatport download missing tracks:', error);
+        showToast(`Error starting downloads: ${error.message}`, 'error');
+    }
+}
+
+async function handleBeatportChartClick(chartType, chartId, chartName, chartEndpoint) {
+    console.log(`🎵 Beatport chart clicked: ${chartType} - ${chartId} - ${chartName}`);
+
+    try {
+        showToast(`Loading ${chartName}...`, 'info');
+        showLoadingOverlay(`Loading ${chartName}...`);
+
+        const response = await fetch(`${chartEndpoint}?limit=100`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${chartName}: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(`No tracks found in ${chartName}`);
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartName}`);
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(data.tracks, chartName, null);
+
+    } catch (error) {
+        console.error(`❌ Error handling Beatport chart click:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chartName || chartId}: ${error.message}`, 'error');
+    }
+}
+
+function handleBeatportGenreClick(genreSlug, genreId, genreName) {
+    console.log(`🎵 Beatport genre clicked: ${genreName} (${genreSlug}/${genreId}) - SHOWING GENRE DETAIL VIEW`);
+    console.log(`📝 Debug: Parameters received - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
+
+    // Navigate to genre detail view with proper parameters
+    showBeatportGenreDetailView(genreSlug, genreId, genreName);
+}
+
+function showBeatportGenreDetailView(genreSlug, genreId, genreName) {
+    console.log(`🎯 Showing genre detail view for: ${genreName}`);
+    console.log(`📝 Debug: Function called with - Slug: ${genreSlug}, ID: ${genreId}, Name: ${genreName}`);
+
+    // Hide all other beatport views
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+    const mainView = document.getElementById('beatport-main-view');
+    if (mainView) {
+        mainView.classList.remove('active');
+    }
+
+    // Show genre detail view
+    const genreDetailView = document.getElementById('beatport-genre-detail-view');
+    if (genreDetailView) {
+        genreDetailView.classList.add('active');
+        console.log(`📝 Debug: Genre detail view element found and activated`);
+
+        // Update view content
+        const titleElement = document.getElementById('genre-detail-title');
+        const breadcrumbElement = document.getElementById('genre-detail-breadcrumb');
+
+        console.log(`📝 Debug: Title element found: ${!!titleElement}, Breadcrumb element found: ${!!breadcrumbElement}`);
+
+        if (titleElement) {
+            titleElement.textContent = genreName;
+            console.log(`📝 Debug: Updated title to: ${genreName}`);
+        }
+        if (breadcrumbElement) {
+            breadcrumbElement.textContent = `Browse Charts > Genre Explorer > ${genreName} Charts`;
+            console.log(`📝 Debug: Updated breadcrumb`);
+        }
+
+        // Update chart type titles with genre name
+        const chartTitles = [
+            'genre-top-10-title',
+            'genre-top-100-title',
+            'genre-releases-top-10-title',
+            'genre-releases-top-100-title',
+            'genre-staff-picks-title',
+            'genre-latest-releases-title',
+            'genre-new-charts-title'
+        ];
+
+        chartTitles.forEach(titleId => {
+            const element = document.getElementById(titleId);
+            if (element) {
+                console.log(`📝 Debug: Found chart title element: ${titleId}`);
+            } else {
+                console.log(`📝 Debug: Missing chart title element: ${titleId}`);
+            }
+        });
+
+        document.getElementById('genre-top-10-title').textContent = `Top 10 ${genreName}`;
+        document.getElementById('genre-top-100-title').textContent = `Top 100 ${genreName}`;
+        document.getElementById('genre-releases-top-10-title').textContent = `Top 10 ${genreName} Releases`;
+        document.getElementById('genre-releases-top-100-title').textContent = `Top 100 ${genreName} Releases`;
+        document.getElementById('genre-staff-picks-title').textContent = `${genreName} Staff Picks`;
+        document.getElementById('genre-latest-releases-title').textContent = `Latest ${genreName} Releases`;
+
+        // Update Hype section titles
+        document.getElementById('genre-hype-top-10-title').textContent = `${genreName} Hype Top 10`;
+        document.getElementById('genre-hype-top-100-title').textContent = `${genreName} Hype Top 100`;
+        document.getElementById('genre-hype-picks-title').textContent = `${genreName} Hype Picks`;
+
+        // Load new charts directly (no expansion needed)
+        console.log(`🔄 Auto-loading new charts for ${genreName}...`);
+        loadNewChartsInline(genreSlug, genreId, genreName);
+
+        // Store current genre data for chart type handlers
+        genreDetailView.dataset.genreSlug = genreSlug;
+        genreDetailView.dataset.genreId = genreId;
+        genreDetailView.dataset.genreName = genreName;
+
+        // Add click handlers to chart type cards
+        setupGenreChartTypeHandlers();
+
+        console.log(`✅ Genre detail view shown for ${genreName}`);
+    } else {
+        console.error('❌ Genre detail view element not found');
+    }
+}
+
+function setupGenreChartTypeHandlers() {
+    const chartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
+
+    chartTypeCards.forEach(card => {
+        // Remove existing listeners
+        card.replaceWith(card.cloneNode(true));
+    });
+
+    // Re-select after cloning
+    const newChartTypeCards = document.querySelectorAll('#beatport-genre-detail-view .genre-chart-type-card');
+
+    newChartTypeCards.forEach(card => {
+        card.addEventListener('click', () => {
+            const chartType = card.dataset.chartType;
+            const genreDetailView = document.getElementById('beatport-genre-detail-view');
+            const genreSlug = genreDetailView.dataset.genreSlug;
+            const genreId = genreDetailView.dataset.genreId;
+            const genreName = genreDetailView.dataset.genreName;
+
+            // All chart types now go directly to discovery modal
+            handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType);
+        });
+    });
+}
+
+function showBeatportGenresView() {
+    // Hide genre detail view and show genres view
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+
+    const genresView = document.getElementById('beatport-genres-view');
+    if (genresView) {
+        genresView.classList.add('active');
+    }
+}
+
+async function toggleNewChartsExpansion(genreSlug, genreId, genreName) {
+    console.log(`📈 Toggling new charts expansion for: ${genreName}`);
+
+    const expandedContent = document.getElementById('new-charts-expanded');
+    const expandIndicator = document.getElementById('expand-indicator');
+    const chartsCount = document.getElementById('new-charts-count');
+
+    if (!expandedContent || !expandIndicator) {
+        console.error('❌ New charts expansion elements not found');
+        return;
+    }
+
+    // Check if already expanded
+    const isExpanded = expandedContent.style.display !== 'none';
+
+    if (isExpanded) {
+        // Collapse
+        expandedContent.style.display = 'none';
+        expandIndicator.classList.remove('expanded');
+        console.log('📉 Collapsed new charts section');
+    } else {
+        // Expand and load charts
+        expandedContent.style.display = 'block';
+        expandIndicator.classList.add('expanded');
+
+        // Load charts if not already loaded
+        await loadNewChartsInline(genreSlug, genreId, genreName);
+        console.log('📈 Expanded new charts section');
+    }
+}
+
+async function loadNewChartsInline(genreSlug, genreId, genreName) {
+    const chartsGrid = document.getElementById('new-charts-grid');
+    const loadingInline = document.getElementById('charts-loading-inline');
+
+    if (!chartsGrid || !loadingInline) {
+        console.error('❌ Inline charts elements not found');
+        return;
+    }
+
+    // Show loading state
+    loadingInline.style.display = 'block';
+    chartsGrid.style.display = 'none';
+    chartsGrid.innerHTML = '';
+
+    try {
+        console.log(`🔍 Loading inline charts for ${genreName}...`);
+
+        // Fetch charts from the new-charts endpoint
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=20`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch charts: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            // Show empty state
+            chartsGrid.innerHTML = `
+                <div class="new-charts-empty">
+                    <h4>No Charts Available</h4>
+                    <p>No curated charts found for ${genreName} at the moment.</p>
+                </div>
+            `;
+        } else {
+            // Populate charts grid
+            const chartsHTML = data.tracks.map((chart, index) => {
+                const chartName = chart.title || 'Untitled Chart';
+                const artistName = chart.artist || 'Various Artists';
+                const chartUrl = chart.url || '';
+
+                return `
+                    <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
+                        <div class="new-chart-header">
+                            <div class="new-chart-icon">📈</div>
+                            <div class="new-chart-title">
+                                <h5>${chartName}</h5>
+                                <p class="new-chart-artist">by ${artistName}</p>
+                            </div>
+                        </div>
+                        <div class="new-chart-description">
+                            Curated ${genreName} chart collection
+                        </div>
+                        <div class="new-chart-footer">
+                            <div class="new-chart-type">Chart</div>
+                            <div class="new-chart-action">Explore →</div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            chartsGrid.innerHTML = chartsHTML;
+
+            // Add click handlers to chart items
+            setupNewChartItemHandlers(genreSlug, genreId, genreName);
+        }
+
+        // Hide loading and show grid
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        console.log(`✅ Loaded ${data.tracks?.length || 0} inline charts for ${genreName}`);
+        showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
+
+    } catch (error) {
+        console.error(`❌ Error loading inline charts for ${genreName}:`, error);
+
+        // Show error state
+        chartsGrid.innerHTML = `
+            <div class="new-charts-empty">
+                <h4>Error Loading Charts</h4>
+                <p>Unable to load chart collections for ${genreName}.</p>
+            </div>
+        `;
+
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        showToast(`Error loading charts: ${error.message}`, 'error');
+    }
+}
+
+async function loadDJChartsInline() {
+    const chartsGrid = document.getElementById('dj-charts-grid');
+    const loadingInline = document.getElementById('dj-charts-loading-inline');
+
+    if (!chartsGrid || !loadingInline) {
+        console.error('❌ DJ charts elements not found');
+        return;
+    }
+
+    // Show loading state
+    loadingInline.style.display = 'block';
+    chartsGrid.style.display = 'none';
+    chartsGrid.innerHTML = '';
+
+    try {
+        console.log('🔍 Loading DJ charts...');
+
+        // Fetch charts from the dj-charts-improved endpoint
+        const response = await fetch('/api/beatport/dj-charts-improved?limit=20');
+        if (!response.ok) {
+            throw new Error(`Failed to fetch DJ charts: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.charts || data.charts.length === 0) {
+            // Show empty state
+            chartsGrid.innerHTML = `
+                <div class="new-charts-empty">
+                    <h4>No DJ Charts Available</h4>
+                    <p>No DJ curated charts found at the moment.</p>
+                </div>
+            `;
+            loadingInline.style.display = 'none';
+            chartsGrid.style.display = 'grid';
+            return;
+        }
+
+        // Create chart items using New Charts structure
+        const chartsHTML = data.charts.map(chart => {
+            const chartName = chart.name || chart.title || 'Untitled Chart';
+            const artistName = chart.artist || chart.curator || 'Various Artists';
+            const chartUrl = chart.url || chart.chart_url || '';
+
+            return `
+                <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
+                    <div class="new-chart-header">
+                        <div class="new-chart-icon">🎧</div>
+                        <div class="new-chart-title">
+                            <h5>${chartName}</h5>
+                            <p class="new-chart-artist">by ${artistName}</p>
+                        </div>
+                    </div>
+                    <div class="new-chart-description">
+                        DJ curated chart collection
+                    </div>
+                    <div class="new-chart-footer">
+                        <div class="new-chart-type">DJ Chart</div>
+                        <div class="new-chart-action">Explore →</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        chartsGrid.innerHTML = chartsHTML;
+
+        // Hide loading, show content
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        // Setup click handlers for chart items
+        setupDJChartItemHandlers();
+
+        console.log(`✅ Loaded ${data.charts.length} DJ charts`);
+
+    } catch (error) {
+        console.error('❌ Error loading DJ charts:', error);
+
+        // Show error state
+        chartsGrid.innerHTML = `
+            <div class="new-charts-empty">
+                <h4>Error Loading DJ Charts</h4>
+                <p>Unable to load DJ chart collections.</p>
+            </div>
+        `;
+
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        showToast(`Error loading DJ charts: ${error.message}`, 'error');
+    }
+}
+
+async function loadFeaturedChartsInline() {
+    const chartsGrid = document.getElementById('featured-charts-grid');
+    const loadingInline = document.getElementById('featured-charts-loading-inline');
+
+    if (!chartsGrid || !loadingInline) {
+        console.error('❌ Featured charts elements not found');
+        return;
+    }
+
+    // Show loading state
+    loadingInline.style.display = 'block';
+    chartsGrid.style.display = 'none';
+    chartsGrid.innerHTML = '';
+
+    try {
+        console.log('🔍 Loading Featured charts...');
+
+        // Fetch charts from the homepage/featured-charts endpoint
+        const response = await fetch('/api/beatport/homepage/featured-charts?limit=20');
+        if (!response.ok) {
+            throw new Error(`Failed to fetch Featured charts: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            // Show empty state
+            chartsGrid.innerHTML = `
+                <div class="new-charts-empty">
+                    <h4>No Featured Charts Available</h4>
+                    <p>No featured curated charts found at the moment.</p>
+                </div>
+            `;
+            loadingInline.style.display = 'none';
+            chartsGrid.style.display = 'grid';
+            return;
+        }
+
+        // Create chart items using New Charts structure
+        const chartsHTML = data.tracks.map(chart => {
+            const chartName = chart.name || chart.title || 'Untitled Chart';
+            const artistName = chart.artist || chart.curator || 'Various Artists';
+            const chartUrl = chart.url || chart.chart_url || '';
+
+            return `
+                <div class="new-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
+                    <div class="new-chart-header">
+                        <div class="new-chart-icon">⭐</div>
+                        <div class="new-chart-title">
+                            <h5>${chartName}</h5>
+                            <p class="new-chart-artist">by ${artistName}</p>
+                        </div>
+                    </div>
+                    <div class="new-chart-description">
+                        Editor curated chart collection
+                    </div>
+                    <div class="new-chart-footer">
+                        <div class="new-chart-type">Featured Chart</div>
+                        <div class="new-chart-action">Explore →</div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+
+        chartsGrid.innerHTML = chartsHTML;
+
+        // Hide loading, show content
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        // Setup click handlers for chart items
+        setupFeaturedChartItemHandlers();
+
+        console.log(`✅ Loaded ${data.tracks.length} Featured charts`);
+
+    } catch (error) {
+        console.error('❌ Error loading Featured charts:', error);
+
+        // Show error state
+        chartsGrid.innerHTML = `
+            <div class="new-charts-empty">
+                <h4>Error Loading Featured Charts</h4>
+                <p>Unable to load featured chart collections.</p>
+            </div>
+        `;
+
+        loadingInline.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        showToast(`Error loading Featured charts: ${error.message}`, 'error');
+    }
+}
+
+function setupDJChartItemHandlers() {
+    const chartItems = document.querySelectorAll('#dj-charts-grid .new-chart-item');
+
+    chartItems.forEach(item => {
+        item.addEventListener('click', async () => {
+            const chartName = item.dataset.chartName;
+            const chartUrl = item.dataset.chartUrl;
+
+            console.log(`🎧 DJ Chart clicked: ${chartName}`);
+
+            try {
+                showToast(`Loading ${chartName}...`, 'info');
+                showLoadingOverlay(`Scraping ${chartName}...`);
+
+                const response = await fetch('/api/beatport/chart/extract', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to extract chart tracks: ${response.status}`);
+                }
+
+                const data = await response.json();
+                if (!data.success || !data.tracks || data.tracks.length === 0) {
+                    throw new Error('No tracks found in chart');
+                }
+
+                console.log(`✅ Extracted ${data.tracks.length} raw tracks from DJ chart, enriching...`);
+                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+                hideLoadingOverlay();
+                openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+            } catch (error) {
+                console.error('❌ Error extracting DJ chart tracks:', error);
+                hideLoadingOverlay();
+                showToast(`Error loading chart: ${error.message}`, 'error');
+            }
+        });
+    });
+}
+
+function setupFeaturedChartItemHandlers() {
+    const chartItems = document.querySelectorAll('#featured-charts-grid .new-chart-item');
+
+    chartItems.forEach(item => {
+        item.addEventListener('click', async () => {
+            const chartName = item.dataset.chartName;
+            const chartUrl = item.dataset.chartUrl;
+
+            console.log(`⭐ Featured Chart clicked: ${chartName}`);
+
+            try {
+                showToast(`Loading ${chartName}...`, 'info');
+                showLoadingOverlay(`Scraping ${chartName}...`);
+
+                const response = await fetch('/api/beatport/chart/extract', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to extract chart tracks: ${response.status}`);
+                }
+
+                const data = await response.json();
+                if (!data.success || !data.tracks || data.tracks.length === 0) {
+                    throw new Error('No tracks found in chart');
+                }
+
+                console.log(`✅ Extracted ${data.tracks.length} raw tracks from Featured chart, enriching...`);
+                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, chartName);
+
+                hideLoadingOverlay();
+                openBeatportChartAsDownloadModal(enrichedTracks, chartName, null);
+
+            } catch (error) {
+                console.error('❌ Error extracting Featured chart tracks:', error);
+                hideLoadingOverlay();
+                showToast(`Error loading chart: ${error.message}`, 'error');
+            }
+        });
+    });
+}
+
+function setupNewChartItemHandlers(genreSlug, genreId, genreName) {
+    const chartItems = document.querySelectorAll('#new-charts-grid .new-chart-item');
+
+    chartItems.forEach(item => {
+        item.addEventListener('click', async () => {
+            const chartName = item.dataset.chartName;
+            const chartArtist = item.dataset.chartArtist;
+            const chartUrl = item.dataset.chartUrl;
+
+            console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
+
+            const fullChartName = `${chartName} (${genreName})`;
+
+            try {
+                showToast(`Loading ${chartName}...`, 'info');
+                showLoadingOverlay(`Scraping ${chartName}...`);
+
+                const response = await fetch('/api/beatport/chart/extract', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch chart content: ${response.status}`);
+                }
+
+                const data = await response.json();
+                if (!data.success || !data.tracks || data.tracks.length === 0) {
+                    throw new Error('No tracks found in chart');
+                }
+
+                console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
+                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
+
+                hideLoadingOverlay();
+                openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
+
+            } catch (error) {
+                console.error(`❌ Error loading chart: ${error.message}`);
+                hideLoadingOverlay();
+                showToast(`Error loading chart: ${error.message}`, 'error');
+            }
+        });
+    });
+}
+
+function showBeatportGenreDetailViewFromBack() {
+    // Show genre detail view (used by charts list back button)
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+
+    const genreDetailView = document.getElementById('beatport-genre-detail-view');
+    if (genreDetailView) {
+        genreDetailView.classList.add('active');
+    }
+}
+
+async function showBeatportGenreChartsListView(genreSlug, genreId, genreName) {
+    console.log(`📈 Showing charts list for: ${genreName}`);
+
+    // Hide all other beatport views
+    document.querySelectorAll('.beatport-sub-view').forEach(view => {
+        view.classList.remove('active');
+    });
+    const mainView = document.getElementById('beatport-main-view');
+    if (mainView) {
+        mainView.classList.remove('active');
+    }
+
+    // Show charts list view
+    const chartsListView = document.getElementById('beatport-genre-charts-list-view');
+    if (chartsListView) {
+        chartsListView.classList.add('active');
+
+        // Update view content
+        document.getElementById('genre-charts-list-title').textContent = `New ${genreName} Charts`;
+        document.getElementById('genre-charts-list-breadcrumb').textContent = `Browse Charts > Genre Explorer > ${genreName} Charts > New Charts`;
+
+        // Store current genre data for individual chart handlers
+        chartsListView.dataset.genreSlug = genreSlug;
+        chartsListView.dataset.genreId = genreId;
+        chartsListView.dataset.genreName = genreName;
+
+        // Load charts for this genre
+        await loadGenreChartsList(genreSlug, genreId, genreName);
+
+        console.log(`✅ Charts list view shown for ${genreName}`);
+    } else {
+        console.error('❌ Charts list view element not found');
+    }
+}
+
+async function loadGenreChartsList(genreSlug, genreId, genreName) {
+    const chartsGrid = document.getElementById('genre-charts-grid');
+    const loadingPlaceholder = document.getElementById('charts-loading-placeholder');
+
+    if (!chartsGrid || !loadingPlaceholder) {
+        console.error('❌ Charts grid or loading placeholder not found');
+        return;
+    }
+
+    // Show loading state
+    loadingPlaceholder.style.display = 'block';
+    chartsGrid.style.display = 'none';
+    chartsGrid.innerHTML = '';
+
+    try {
+        console.log(`🔍 Loading charts for ${genreName}...`);
+
+        // Fetch charts from the new-charts endpoint
+        const response = await fetch(`/api/beatport/genre/${genreSlug}/${genreId}/new-charts?limit=50`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch charts: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            // Show empty state
+            chartsGrid.innerHTML = `
+                <div class="genre-charts-empty">
+                    <h3>No Charts Available</h3>
+                    <p>No curated charts found for ${genreName} at the moment.<br>Check back later for new DJ and artist chart collections.</p>
+                </div>
+            `;
+        } else {
+            // Populate charts grid
+            const chartsHTML = data.tracks.map((chart, index) => {
+                const chartName = chart.title || 'Untitled Chart';
+                const artistName = chart.artist || 'Various Artists';
+                const chartUrl = chart.url || '';
+
+                // Extract chart ID from URL for click handling
+                const chartId = chartUrl.split('/').pop() || `chart_${index}`;
+
+                return `
+                    <div class="genre-chart-item" data-chart-url="${chartUrl}" data-chart-name="${chartName}" data-chart-artist="${artistName}">
+                        <div class="chart-item-header">
+                            <div class="chart-item-icon">📈</div>
+                            <div class="chart-item-title">
+                                <h4>${chartName}</h4>
+                                <p class="chart-item-artist">by ${artistName}</p>
+                            </div>
+                        </div>
+                        <div class="chart-item-description">
+                            Curated chart collection featuring ${genreName} tracks
+                        </div>
+                        <div class="chart-item-footer">
+                            <div class="chart-item-type">Chart</div>
+                            <div class="chart-item-action">Click to explore →</div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            chartsGrid.innerHTML = chartsHTML;
+
+            // Add click handlers to chart items
+            setupGenreChartItemHandlers(genreSlug, genreId, genreName);
+        }
+
+        // Hide loading and show grid
+        loadingPlaceholder.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        console.log(`✅ Loaded ${data.tracks?.length || 0} charts for ${genreName}`);
+        showToast(`Found ${data.tracks?.length || 0} chart collections`, 'success');
+
+    } catch (error) {
+        console.error(`❌ Error loading charts for ${genreName}:`, error);
+
+        // Show error state
+        chartsGrid.innerHTML = `
+            <div class="genre-charts-empty">
+                <h3>Error Loading Charts</h3>
+                <p>Unable to load chart collections for ${genreName}.<br>Please try again later.</p>
+            </div>
+        `;
+
+        loadingPlaceholder.style.display = 'none';
+        chartsGrid.style.display = 'grid';
+
+        showToast(`Error loading charts: ${error.message}`, 'error');
+    }
+}
+
+function setupGenreChartItemHandlers(genreSlug, genreId, genreName) {
+    const chartItems = document.querySelectorAll('#genre-charts-grid .genre-chart-item');
+
+    chartItems.forEach(item => {
+        item.addEventListener('click', async () => {
+            const chartName = item.dataset.chartName;
+            const chartArtist = item.dataset.chartArtist;
+            const chartUrl = item.dataset.chartUrl;
+
+            console.log(`🎵 Chart clicked: ${chartName} by ${chartArtist}`);
+
+            const fullChartName = `${chartName} (${genreName})`;
+
+            try {
+                showToast(`Loading ${chartName}...`, 'info');
+                showLoadingOverlay(`Scraping ${chartName}...`);
+
+                const response = await fetch('/api/beatport/chart/extract', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ chart_url: chartUrl, chart_name: chartName, limit: 100, enrich: false })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch chart content: ${response.status}`);
+                }
+
+                const data = await response.json();
+                if (!data.success || !data.tracks || data.tracks.length === 0) {
+                    throw new Error('No tracks found in chart');
+                }
+
+                console.log(`✅ Extracted ${data.tracks.length} raw tracks from ${fullChartName}, enriching...`);
+                const enrichedTracks = await _enrichTracksWithProgress(data.tracks, fullChartName);
+
+                hideLoadingOverlay();
+                openBeatportChartAsDownloadModal(enrichedTracks, fullChartName, null);
+
+            } catch (error) {
+                console.error(`❌ Error loading chart: ${error.message}`);
+                hideLoadingOverlay();
+                showToast(`Error loading chart: ${error.message}`, 'error');
+            }
+        });
+    });
+}
+
+async function handleGenreChartTypeClick(genreSlug, genreId, genreName, chartType) {
+    console.log(`🎯 Genre chart type clicked: ${chartType} for ${genreName} (${genreSlug}/${genreId})`);
+
+    // Map chart types to API endpoints and create descriptive names
+    const chartTypeMap = {
+        'top-10': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/top-10`,
+            name: `Top 10 ${genreName}`,
+            limit: 10
+        },
+        'top-100': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/tracks`,
+            name: `Top 100 ${genreName}`,
+            limit: 100
+        },
+        'releases-top-10': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-10`,
+            name: `Top 10 ${genreName} Releases`,
+            limit: 10
+        },
+        'releases-top-100': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/releases-top-100`,
+            name: `Top 100 ${genreName} Releases`,
+            limit: 100
+        },
+        'staff-picks': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/staff-picks`,
+            name: `${genreName} Staff Picks`,
+            limit: 50
+        },
+        'latest-releases': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/latest-releases`,
+            name: `Latest ${genreName} Releases`,
+            limit: 50
+        },
+        'hype-top-10': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-10`,
+            name: `${genreName} Hype Top 10`,
+            limit: 10
+        },
+        'hype-top-100': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-top-100`,
+            name: `${genreName} Hype Top 100`,
+            limit: 100
+        },
+        'hype-picks': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/hype-picks`,
+            name: `${genreName} Hype Picks`,
+            limit: 50
+        },
+        'new-charts': {
+            endpoint: `/api/beatport/genre/${genreSlug}/${genreId}/new-charts`,
+            name: `New ${genreName} Charts`,
+            limit: 100
+        }
+    };
+
+    const chartConfig = chartTypeMap[chartType];
+    if (!chartConfig) {
+        console.error(`❌ Unknown chart type: ${chartType}`);
+        showToast(`Unknown chart type: ${chartType}`, 'error');
+        return;
+    }
+
+    try {
+        showToast(`Loading ${chartConfig.name}...`, 'info');
+        showLoadingOverlay(`Loading ${chartConfig.name}...`);
+
+        const response = await fetch(`${chartConfig.endpoint}?limit=${chartConfig.limit}`);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${chartConfig.name}: ${response.status}`);
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks || data.tracks.length === 0) {
+            throw new Error(`No tracks found in ${chartConfig.name}`);
+        }
+
+        console.log(`✅ Fetched ${data.tracks.length} tracks from ${chartConfig.name}`);
+        hideLoadingOverlay();
+        openBeatportChartAsDownloadModal(data.tracks, chartConfig.name, null);
+
+    } catch (error) {
+        console.error(`❌ Error loading ${chartConfig.name}:`, error);
+        hideLoadingOverlay();
+        showToast(`Error loading ${chartConfig.name}: ${error.message}`, 'error');
+    }
+}
+
+// ===============================
+// SPOTIFY PUBLIC LINK FUNCTIONALITY
+// ===============================
+
+let spotifyPublicPlaylists = []; // Array of loaded Spotify public playlist objects
+let spotifyPublicPlaylistStates = {}; // Key: url_hash, Value: state dict
+
+async function parseSpotifyPublicUrl() {
+    const urlInput = document.getElementById('spotify-public-url-input');
+    const url = urlInput.value.trim();
+
+    if (!url) {
+        showToast('Please enter a Spotify URL', 'error');
+        return;
+    }
+
+    // Basic URL validation
+    if (!url.includes('open.spotify.com/playlist') && !url.includes('open.spotify.com/album') &&
+        !url.startsWith('spotify:playlist:') && !url.startsWith('spotify:album:')) {
+        showToast('Please enter a valid Spotify playlist or album URL', 'error');
+        return;
+    }
+
+    // Check if already loaded
+    if (_isUrlAlreadyLoaded('spotify-public', url)) {
+        showToast('This playlist is already loaded', 'info');
+        urlInput.value = '';
+        return;
+    }
+
+    const parseBtn = document.getElementById('spotify-public-parse-btn');
+    if (parseBtn) {
+        parseBtn.disabled = true;
+        parseBtn.textContent = 'Loading...';
+    }
+
+    try {
+        console.log('🎵 Parsing public Spotify URL:', url);
+
+        const response = await fetch('/api/spotify/parse-public', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url })
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error: ${result.error}`, 'error');
+            return;
+        }
+
+        // Check if already loaded
+        if (spotifyPublicPlaylists.find(p => String(p.url_hash) === String(result.url_hash))) {
+            showToast('This playlist is already loaded', 'info');
+            urlInput.value = '';
+            return;
+        }
+
+        console.log(`✅ Spotify ${result.type} parsed: ${result.name} (${result.track_count} tracks)`);
+
+        spotifyPublicPlaylists.push(result);
+
+        // Auto-mirror
+        if (result.tracks && result.tracks.length > 0) {
+            mirrorPlaylist('spotify_public', result.url_hash, result.name, result.tracks.map(t => ({
+                track_name: t.name || '',
+                artist_name: Array.isArray(t.artists) ? t.artists.map(a => a.name).join(', ') : '',
+                album_name: t.album?.name || '',
+                duration_ms: t.duration_ms || 0,
+                source_track_id: t.id || ''
+            })), { owner: result.subtitle || '', image_url: '', description: result.url || '' });
+        }
+
+        // Save to URL history
+        saveUrlHistory('spotify-public', url, result.name);
+
+        renderSpotifyPublicPlaylists();
+        await loadSpotifyPublicPlaylistStatesFromBackend();
+
+        urlInput.value = '';
+        showToast(`Loaded: ${result.name} (${result.track_count} tracks)`, 'success');
+        console.log(`🎵 Loaded Spotify playlist: ${result.name}`);
+
+    } catch (error) {
+        console.error('❌ Error parsing Spotify URL:', error);
+        showToast(`Error parsing Spotify URL: ${error.message}`, 'error');
+    } finally {
+        if (parseBtn) {
+            parseBtn.disabled = false;
+            parseBtn.textContent = 'Load';
+        }
+    }
+}
+
+function renderSpotifyPublicPlaylists() {
+    const container = document.getElementById('spotify-public-playlist-container');
+    if (spotifyPublicPlaylists.length === 0) {
+        container.innerHTML = `<div class="playlist-placeholder">Paste a Spotify playlist or album URL above to load tracks without needing Spotify API credentials.</div>`;
+        return;
+    }
+
+    container.innerHTML = spotifyPublicPlaylists.map(p => {
+        if (!spotifyPublicPlaylistStates[p.url_hash]) {
+            spotifyPublicPlaylistStates[p.url_hash] = {
+                phase: 'fresh',
+                playlist: p
+            };
+        }
+        return createSpotifyPublicCard(p);
+    }).join('');
+
+    // Add click handlers to cards
+    spotifyPublicPlaylists.forEach(p => {
+        const card = document.getElementById(`spotify-public-card-${p.url_hash}`);
+        if (card) {
+            card.addEventListener('click', () => handleSpotifyPublicCardClick(p.url_hash));
+        }
+    });
+}
+
+function createSpotifyPublicCard(playlist) {
+    const state = spotifyPublicPlaylistStates[playlist.url_hash];
+    const phase = state ? state.phase : 'fresh';
+    const isAlbum = playlist.type === 'album';
+
+    let buttonText = getActionButtonText(phase);
+    let phaseText = getPhaseText(phase);
+    let phaseColor = getPhaseColor(phase);
+
+    return `
+        <div class="youtube-playlist-card spotify-public-card" id="spotify-public-card-${playlist.url_hash}">
+            <div class="playlist-card-icon">${isAlbum ? '💿' : '🎵'}</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-type-badge" style="color: ${isAlbum ? '#b3b3b3' : '#1DB954'}; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px;">${isAlbum ? 'Album' : 'Playlist'}</span>
+                    <span class="playlist-card-track-count">${playlist.track_count || playlist.tracks.length} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${phaseColor};">${phaseText}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                <!-- Progress will be dynamically updated based on phase -->
+            </div>
+            <button class="playlist-card-action-btn">${buttonText}</button>
+        </div>
+    `;
+}
+
+async function handleSpotifyPublicCardClick(urlHash) {
+    const state = spotifyPublicPlaylistStates[urlHash];
+    if (!state) {
+        console.error(`No state found for Spotify public playlist: ${urlHash}`);
+        showToast('Playlist state not found - try refreshing the page', 'error');
+        return;
+    }
+
+    if (!state.playlist) {
+        console.error(`No playlist data found for Spotify public playlist: ${urlHash}`);
+        showToast('Playlist data missing - try refreshing the page', 'error');
+        return;
+    }
+
+    if (!state.phase) {
+        state.phase = 'fresh';
+    }
+
+    console.log(`🎵 [Card Click] Spotify public card clicked: ${urlHash}, Phase: ${state.phase}`);
+
+    if (state.phase === 'fresh') {
+        console.log(`🎵 Using pre-loaded Spotify public playlist data for: ${state.playlist.name}`);
+        openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
+
+    } else if (state.phase === 'discovering' || state.phase === 'discovered' || state.phase === 'syncing' || state.phase === 'sync_complete') {
+        console.log(`🎵 [Card Click] Opening Spotify public discovery modal for ${state.phase} phase`);
+
+        if (state.phase === 'discovered' && (!state.discovery_results || state.discovery_results.length === 0)) {
+            try {
+                const stateResponse = await fetch(`/api/spotify-public/state/${urlHash}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    if (fullState.discovery_results) {
+                        state.discovery_results = fullState.discovery_results;
+                        state.spotify_matches = fullState.spotify_matches || state.spotify_matches;
+                        state.discovery_progress = fullState.discovery_progress || state.discovery_progress;
+                        spotifyPublicPlaylistStates[urlHash] = { ...spotifyPublicPlaylistStates[urlHash], ...state };
+                        console.log(`Restored ${fullState.discovery_results.length} discovery results from backend`);
+                    }
+                }
+            } catch (error) {
+                console.error(`Failed to fetch discovery results from backend: ${error}`);
+            }
+        }
+
+        openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
+    } else if (state.phase === 'downloading' || state.phase === 'download_complete') {
+        if (state.convertedSpotifyPlaylistId) {
+            if (activeDownloadProcesses[state.convertedSpotifyPlaylistId]) {
+                const process = activeDownloadProcesses[state.convertedSpotifyPlaylistId];
+                if (process.modalElement) {
+                    process.modalElement.style.display = 'flex';
+                } else {
+                    await rehydrateSpotifyPublicDownloadModal(urlHash, state);
+                }
+            } else {
+                await rehydrateSpotifyPublicDownloadModal(urlHash, state);
+            }
+        } else {
+            if (state.discovery_results && state.discovery_results.length > 0) {
+                openSpotifyPublicDiscoveryModal(urlHash, state.playlist);
+            } else {
+                showToast('Unable to open download modal - missing playlist data', 'error');
+            }
+        }
+    }
+}
+
+async function rehydrateSpotifyPublicDownloadModal(urlHash, state) {
+    try {
+        if (!state || !state.playlist) {
+            showToast('Cannot open download modal - invalid playlist data', 'error');
+            return;
+        }
+
+        const spotifyTracks = state.discovery_results
+            ?.filter(result => result.spotify_data)
+            ?.map(result => result.spotify_data) || [];
+
+        if (spotifyTracks.length > 0) {
+            const virtualPlaylistId = state.convertedSpotifyPlaylistId || `spotify_public_${urlHash}`;
+            await openDownloadMissingModalForTidal(virtualPlaylistId, state.playlist.name, spotifyTracks);
+
+            if (state.download_process_id) {
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = state.download_process_id;
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+                    startModalDownloadPolling(virtualPlaylistId);
+                }
+            }
+        } else {
+            showToast('No Spotify tracks found for download', 'error');
+        }
+    } catch (error) {
+        console.error(`Error rehydrating Spotify public download modal: ${error}`);
+    }
+}
+
+async function openSpotifyPublicDiscoveryModal(urlHash, playlistData) {
+    console.log(`🎵 Opening Spotify public discovery modal (reusing YouTube modal): ${playlistData.name}`);
+
+    const fakeUrlHash = `spotifypublic_${urlHash}`;
+
+    const cardState = spotifyPublicPlaylistStates[urlHash];
+    const isAlreadyDiscovered = cardState && (cardState.phase === 'discovered' || cardState.phase === 'syncing' || cardState.phase === 'sync_complete');
+    const isCurrentlyDiscovering = cardState && cardState.phase === 'discovering';
+
+    let transformedResults = [];
+    let actualMatches = 0;
+    if (isAlreadyDiscovered && cardState.discovery_results) {
+        transformedResults = cardState.discovery_results.map((result, index) => {
+            const isFound = result.status === 'found' ||
+                result.status === '✅ Found' ||
+                result.status_class === 'found' ||
+                result.spotify_data ||
+                result.spotify_track;
+            if (isFound) actualMatches++;
+
+            return {
+                index: index,
+                yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
+                yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                status: isFound ? '✅ Found' : '❌ Not Found',
+                status_class: isFound ? 'found' : 'not-found',
+                spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                    (Array.isArray(result.spotify_data.artists)
+                        ? result.spotify_data.artists
+                            .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                            .filter(Boolean)
+                            .join(', ') || '-'
+                        : result.spotify_data.artists)
+                    : (result.spotify_artist || '-'),
+                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                spotify_data: result.spotify_data,
+                spotify_id: result.spotify_id,
+                manual_match: result.manual_match
+            };
+        });
+        console.log(`🎵 Spotify public modal: Calculated ${actualMatches} matches from ${transformedResults.length} results`);
+    }
+
+    // Normalize artist objects to strings for the discovery modal table
+    const normalizedTracks = playlistData.tracks.map(t => ({
+        ...t,
+        artists: Array.isArray(t.artists)
+            ? t.artists.map(a => typeof a === 'object' ? a.name : a)
+            : t.artists
+    }));
+
+    const modalPhase = cardState ? cardState.phase : 'fresh';
+    youtubePlaylistStates[fakeUrlHash] = {
+        phase: modalPhase,
+        playlist: {
+            name: playlistData.name,
+            tracks: normalizedTracks
+        },
+        is_spotify_public_playlist: true,
+        spotify_public_playlist_id: urlHash,
+        discovery_progress: isAlreadyDiscovered ? 100 : 0,
+        spotify_matches: isAlreadyDiscovered ? actualMatches : 0,
+        spotifyMatches: isAlreadyDiscovered ? actualMatches : 0,
+        spotify_total: playlistData.tracks.length,
+        discovery_results: transformedResults,
+        discoveryResults: transformedResults,
+        discoveryProgress: isAlreadyDiscovered ? 100 : 0
+    };
+
+    if (!isAlreadyDiscovered && !isCurrentlyDiscovering) {
+        try {
+            console.log(`🔍 Starting Spotify public discovery for: ${playlistData.name}`);
+
+            const response = await fetch(`/api/spotify-public/discovery/start/${urlHash}`, {
+                method: 'POST'
+            });
+
+            const result = await response.json();
+
+            if (result.error) {
+                console.error('Error starting Spotify public discovery:', result.error);
+                showToast(`Error starting discovery: ${result.error}`, 'error');
+                return;
+            }
+
+            console.log('Spotify public discovery started, beginning polling...');
+
+            spotifyPublicPlaylistStates[urlHash].phase = 'discovering';
+            updateSpotifyPublicCardPhase(urlHash, 'discovering');
+            youtubePlaylistStates[fakeUrlHash].phase = 'discovering';
+
+            startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
+
+        } catch (error) {
+            console.error('Error starting Spotify public discovery:', error);
+            showToast(`Error starting discovery: ${error.message}`, 'error');
+        }
+    } else if (isCurrentlyDiscovering) {
+        console.log(`🔄 Resuming Spotify public discovery polling for: ${playlistData.name}`);
+        startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash);
+    } else if (cardState && cardState.phase === 'syncing') {
+        console.log(`🔄 Resuming Spotify public sync polling for: ${playlistData.name}`);
+        startSpotifyPublicSyncPolling(fakeUrlHash);
+    } else {
+        console.log('Using existing results - no need to re-discover');
+    }
+
+    openYouTubeDiscoveryModal(fakeUrlHash);
+}
+
+function startSpotifyPublicDiscoveryPolling(fakeUrlHash, urlHash) {
+    console.log(`🔄 Starting Spotify public discovery polling for: ${urlHash}`);
+
+    if (activeYouTubePollers[fakeUrlHash]) {
+        clearInterval(activeYouTubePollers[fakeUrlHash]);
+    }
+
+    // WebSocket subscription
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [urlHash] });
+        _discoveryProgressCallbacks[urlHash] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+                return;
+            }
+            const transformed = {
+                progress: data.progress, spotify_matches: data.spotify_matches, spotify_total: data.spotify_total,
+                complete: data.complete,
+                results: (data.results || []).map((r, i) => {
+                    const isWingIt = r.wing_it_fallback || r.status_class === 'wing-it';
+                    const isFound = !isWingIt && (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found' || r.spotify_data || r.spotify_track);
+                    return {
+                        index: i, yt_track: r.spotify_public_track ? r.spotify_public_track.name : 'Unknown',
+                        yt_artist: r.spotify_public_track ? (r.spotify_public_track.artists ? r.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isWingIt ? '🎯 Wing It' : (isFound ? '✅ Found' : '❌ Not Found'),
+                        status_class: isWingIt ? 'wing-it' : (isFound ? 'found' : 'not-found'),
+                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
+                        spotify_artist: r.spotify_data && r.spotify_data.artists
+                            ? (Array.isArray(r.spotify_data.artists)
+                                ? (r.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : r.spotify_data.artists)
+                            : (r.spotify_artist || '-'),
+                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) : (r.spotify_album || '-'),
+                        spotify_data: r.spotify_data, spotify_id: r.spotify_id, manual_match: r.manual_match,
+                        wing_it_fallback: isWingIt
+                    };
+                })
+            };
+            const st = youtubePlaylistStates[fakeUrlHash];
+            if (st) {
+                st.discovery_progress = data.progress; st.discoveryProgress = data.progress;
+                st.spotify_matches = data.spotify_matches; st.spotifyMatches = data.spotify_matches;
+                st.discovery_results = data.results; st.discoveryResults = transformed.results;
+                st.phase = data.phase;
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformed);
+            }
+            if (spotifyPublicPlaylistStates[urlHash]) {
+                spotifyPublicPlaylistStates[urlHash].phase = data.phase;
+                spotifyPublicPlaylistStates[urlHash].discovery_results = data.results;
+                spotifyPublicPlaylistStates[urlHash].spotify_matches = data.spotify_matches;
+                spotifyPublicPlaylistStates[urlHash].discovery_progress = data.progress;
+                updateSpotifyPublicCardPhase(urlHash, data.phase);
+            }
+            updateSpotifyPublicCardProgress(urlHash, data);
+            if (data.complete) {
+                if (activeYouTubePollers[fakeUrlHash]) { clearInterval(activeYouTubePollers[fakeUrlHash]); delete activeYouTubePollers[fakeUrlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        if (socketConnected) return;
+        try {
+            const response = await fetch(`/api/spotify-public/discovery/status/${urlHash}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('Error polling Spotify public discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+                return;
+            }
+
+            const transformedStatus = {
+                progress: status.progress,
+                spotify_matches: status.spotify_matches,
+                spotify_total: status.spotify_total,
+                complete: status.complete,
+                results: status.results.map((result, index) => {
+                    const isFound = result.status === 'found' ||
+                        result.status === '✅ Found' ||
+                        result.status_class === 'found' ||
+                        result.spotify_data ||
+                        result.spotify_track;
+
+                    return {
+                        index: index,
+                        yt_track: result.spotify_public_track ? result.spotify_public_track.name : 'Unknown',
+                        yt_artist: result.spotify_public_track ? (result.spotify_public_track.artists ? result.spotify_public_track.artists.join(', ') : 'Unknown') : 'Unknown',
+                        status: isFound ? '✅ Found' : '❌ Not Found',
+                        status_class: isFound ? 'found' : 'not-found',
+                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                        spotify_artist: result.spotify_data && result.spotify_data.artists
+                            ? (Array.isArray(result.spotify_data.artists)
+                                ? (result.spotify_data.artists
+                                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                                    .filter(Boolean)
+                                    .join(', ') || '-')
+                                : result.spotify_data.artists)
+                            : (result.spotify_artist || '-'),
+                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                        spotify_data: result.spotify_data,
+                        spotify_id: result.spotify_id,
+                        manual_match: result.manual_match
+                    };
+                })
+            };
+
+            const state = youtubePlaylistStates[fakeUrlHash];
+            if (state) {
+                state.discovery_progress = status.progress;
+                state.discoveryProgress = status.progress;
+                state.spotify_matches = status.spotify_matches;
+                state.spotifyMatches = status.spotify_matches;
+                state.discovery_results = status.results;
+                state.discoveryResults = transformedStatus.results;
+                state.phase = status.phase;
+
+                updateYouTubeDiscoveryModal(fakeUrlHash, transformedStatus);
+
+                if (spotifyPublicPlaylistStates[urlHash]) {
+                    spotifyPublicPlaylistStates[urlHash].phase = status.phase;
+                    spotifyPublicPlaylistStates[urlHash].discovery_results = status.results;
+                    spotifyPublicPlaylistStates[urlHash].spotify_matches = status.spotify_matches;
+                    spotifyPublicPlaylistStates[urlHash].discovery_progress = status.progress;
+                    updateSpotifyPublicCardPhase(urlHash, status.phase);
+                }
+
+                updateSpotifyPublicCardProgress(urlHash, status);
+
+                console.log(`🔄 Spotify public discovery progress: ${status.progress}% (${status.spotify_matches}/${status.spotify_total} found)`);
+            }
+
+            if (status.complete) {
+                console.log(`Spotify public discovery complete: ${status.spotify_matches}/${status.spotify_total} tracks found`);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[fakeUrlHash];
+            }
+
+        } catch (error) {
+            console.error('Error polling Spotify public discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[fakeUrlHash];
+        }
+    }, 1000);
+
+    activeYouTubePollers[fakeUrlHash] = pollInterval;
+}
+
+async function loadSpotifyPublicPlaylistStatesFromBackend() {
+    try {
+        console.log('🎵 Loading Spotify public playlist states from backend...');
+
+        const response = await fetch('/api/spotify-public/playlists/states');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Spotify public playlist states');
+        }
+
+        const data = await response.json();
+        const states = data.states || [];
+
+        console.log(`🎵 Found ${states.length} stored Spotify public playlist states in backend`);
+
+        if (states.length === 0) return;
+
+        for (const stateInfo of states) {
+            await applySpotifyPublicPlaylistState(stateInfo);
+        }
+
+        // Rehydrate download modals for playlists in downloading/download_complete phases
+        for (const stateInfo of states) {
+            if ((stateInfo.phase === 'downloading' || stateInfo.phase === 'download_complete') &&
+                stateInfo.converted_spotify_playlist_id && stateInfo.download_process_id) {
+
+                const convertedPlaylistId = stateInfo.converted_spotify_playlist_id;
+
+                if (!activeDownloadProcesses[convertedPlaylistId]) {
+                    console.log(`Rehydrating download modal for Spotify public playlist: ${stateInfo.playlist_id}`);
+                    try {
+                        const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(stateInfo.playlist_id));
+                        if (!playlistData) continue;
+
+                        const spotifyTracks = spotifyPublicPlaylistStates[stateInfo.playlist_id]?.discovery_results
+                            ?.filter(result => result.spotify_data)
+                            ?.map(result => result.spotify_data) || [];
+
+                        if (spotifyTracks.length > 0) {
+                            await openDownloadMissingModalForTidal(
+                                convertedPlaylistId,
+                                playlistData.name,
+                                spotifyTracks
+                            );
+
+                            const process = activeDownloadProcesses[convertedPlaylistId];
+                            if (process) {
+                                process.status = 'running';
+                                process.batchId = stateInfo.download_process_id;
+                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                                if (beginBtn) beginBtn.style.display = 'none';
+                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+                                startModalDownloadPolling(convertedPlaylistId);
+                            }
+                        }
+                    } catch (error) {
+                        console.error(`Error rehydrating Spotify public download modal for ${stateInfo.playlist_id}:`, error);
+                    }
+                }
+            }
+        }
+
+        console.log('Spotify public playlist states loaded and applied');
+
+    } catch (error) {
+        console.error('Error loading Spotify public playlist states:', error);
+    }
+}
+
+async function applySpotifyPublicPlaylistState(stateInfo) {
+    const { playlist_id, phase, discovery_progress, spotify_matches, discovery_results, converted_spotify_playlist_id, download_process_id } = stateInfo;
+
+    try {
+        console.log(`🎵 Applying saved state for Spotify public playlist: ${playlist_id}, Phase: ${phase}`);
+
+        const playlistData = spotifyPublicPlaylists.find(p => String(p.url_hash) === String(playlist_id));
+        if (!playlistData) {
+            console.warn(`Playlist data not found for state ${playlist_id} - skipping`);
+            return;
+        }
+
+        if (!spotifyPublicPlaylistStates[playlist_id]) {
+            spotifyPublicPlaylistStates[playlist_id] = {
+                playlist: playlistData,
+                phase: 'fresh'
+            };
+        }
+
+        spotifyPublicPlaylistStates[playlist_id].phase = phase;
+        spotifyPublicPlaylistStates[playlist_id].discovery_progress = discovery_progress;
+        spotifyPublicPlaylistStates[playlist_id].spotify_matches = spotify_matches;
+        spotifyPublicPlaylistStates[playlist_id].discovery_results = discovery_results;
+        spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = converted_spotify_playlist_id;
+        spotifyPublicPlaylistStates[playlist_id].download_process_id = download_process_id;
+        spotifyPublicPlaylistStates[playlist_id].playlist = playlistData;
+
+        if (phase !== 'fresh' && phase !== 'discovering') {
+            try {
+                const stateResponse = await fetch(`/api/spotify-public/state/${playlist_id}`);
+                if (stateResponse.ok) {
+                    const fullState = await stateResponse.json();
+                    if (fullState.discovery_results && spotifyPublicPlaylistStates[playlist_id]) {
+                        spotifyPublicPlaylistStates[playlist_id].discovery_results = fullState.discovery_results;
+                        spotifyPublicPlaylistStates[playlist_id].discovery_progress = fullState.discovery_progress;
+                        spotifyPublicPlaylistStates[playlist_id].spotify_matches = fullState.spotify_matches;
+                        spotifyPublicPlaylistStates[playlist_id].convertedSpotifyPlaylistId = fullState.converted_spotify_playlist_id;
+                        spotifyPublicPlaylistStates[playlist_id].download_process_id = fullState.download_process_id;
+                    }
+                }
+            } catch (error) {
+                console.warn(`Error fetching full discovery results for Spotify public playlist ${playlistData.name}:`, error.message);
+            }
+        }
+
+        updateSpotifyPublicCardPhase(playlist_id, phase);
+
+        if (phase === 'discovered' && spotifyPublicPlaylistStates[playlist_id]) {
+            const progressInfo = {
+                spotify_total: playlistData.track_count || playlistData.tracks?.length || 0,
+                spotify_matches: spotifyPublicPlaylistStates[playlist_id].spotify_matches || 0
+            };
+            updateSpotifyPublicCardProgress(playlist_id, progressInfo);
+        }
+
+        if (phase === 'discovering') {
+            const fakeUrlHash = `spotifypublic_${playlist_id}`;
+            startSpotifyPublicDiscoveryPolling(fakeUrlHash, playlist_id);
+        } else if (phase === 'syncing') {
+            const fakeUrlHash = `spotifypublic_${playlist_id}`;
+            startSpotifyPublicSyncPolling(fakeUrlHash);
+        }
+
+    } catch (error) {
+        console.error(`Error applying Spotify public playlist state for ${playlist_id}:`, error);
+    }
+}
+
+function updateSpotifyPublicCardPhase(urlHash, phase) {
+    const state = spotifyPublicPlaylistStates[urlHash];
+    if (!state) return;
+
+    state.phase = phase;
+
+    const card = document.getElementById(`spotify-public-card-${urlHash}`);
+    if (card) {
+        const newCardHtml = createSpotifyPublicCard(state.playlist);
+        card.outerHTML = newCardHtml;
+
+        const newCard = document.getElementById(`spotify-public-card-${urlHash}`);
+        if (newCard) {
+            newCard.addEventListener('click', () => handleSpotifyPublicCardClick(urlHash));
+        }
+
+        if ((phase === 'syncing' || phase === 'sync_complete') && state.lastSyncProgress) {
+            setTimeout(() => {
+                updateSpotifyPublicCardSyncProgress(urlHash, state.lastSyncProgress);
+            }, 0);
+        }
+    }
+}
+
+function updateSpotifyPublicCardProgress(urlHash, progress) {
+    const state = spotifyPublicPlaylistStates[urlHash];
+    if (!state) return;
+
+    const card = document.getElementById(`spotify-public-card-${urlHash}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+    if (!progressElement) return;
+
+    progressElement.classList.remove('hidden');
+
+    const total = progress.spotify_total || 0;
+    const matches = progress.spotify_matches || 0;
+
+    if (total > 0) {
+        progressElement.innerHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat matched-tracks">✓ ${matches}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+            </div>
+        `;
+    }
+}
+
+// ===============================
+// SPOTIFY PUBLIC SYNC FUNCTIONALITY
+// ===============================
+
+async function startSpotifyPublicPlaylistSync(urlHash) {
+    try {
+        console.log('🎵 Starting Spotify public playlist sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_spotify_public_playlist) {
+            console.error('Invalid Spotify public playlist state for sync');
+            return;
+        }
+
+        const playlistId = state.spotify_public_playlist_id;
+        const response = await fetch(`/api/spotify-public/sync/start/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting sync: ${result.error}`, 'error');
+            return;
+        }
+
+        const syncPlaylistId = result.sync_playlist_id;
+        if (state) state.syncPlaylistId = syncPlaylistId;
+
+        updateSpotifyPublicCardPhase(playlistId, 'syncing');
+        updateSpotifyPublicModalButtons(urlHash, 'syncing');
+
+        startSpotifyPublicSyncPolling(urlHash, syncPlaylistId);
+
+        showToast('Spotify public playlist sync started!', 'success');
+
+    } catch (error) {
+        console.error('Error starting Spotify public sync:', error);
+        showToast(`Error starting sync: ${error.message}`, 'error');
+    }
+}
+
+function startSpotifyPublicSyncPolling(urlHash, syncPlaylistId) {
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    const state = youtubePlaylistStates[urlHash];
+    const playlistId = state.spotify_public_playlist_id;
+
+    syncPlaylistId = syncPlaylistId || (state && state.syncPlaylistId);
+
+    // WebSocket subscription
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateSpotifyPublicCardSyncProgress(playlistId, progress);
+            updateSpotifyPublicModalSyncProgress(urlHash, progress);
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
+                updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
+                showToast('Spotify public playlist sync complete!', 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateSpotifyPublicCardPhase(playlistId, 'discovered');
+                updateSpotifyPublicModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    const pollFunction = async () => {
+        if (socketConnected) return;
+        try {
+            const response = await fetch(`/api/spotify-public/sync/status/${playlistId}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('Error polling Spotify public sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            updateSpotifyPublicCardSyncProgress(playlistId, status.progress);
+            updateSpotifyPublicModalSyncProgress(urlHash, status.progress);
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'sync_complete';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'sync_complete';
+                updateSpotifyPublicCardPhase(playlistId, 'sync_complete');
+                updateSpotifyPublicModalButtons(urlHash, 'sync_complete');
+                showToast('Spotify public playlist sync complete!', 'success');
+            } else if (status.sync_status === 'error') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                if (spotifyPublicPlaylistStates[playlistId]) spotifyPublicPlaylistStates[playlistId].phase = 'discovered';
+                if (youtubePlaylistStates[urlHash]) youtubePlaylistStates[urlHash].phase = 'discovered';
+                updateSpotifyPublicCardPhase(playlistId, 'discovered');
+                updateSpotifyPublicModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
+            }
+        } catch (error) {
+            console.error('Error polling Spotify public sync:', error);
+            if (activeYouTubePollers[urlHash]) {
+                clearInterval(activeYouTubePollers[urlHash]);
+                delete activeYouTubePollers[urlHash];
+            }
+        }
+    };
+
+    if (!socketConnected) pollFunction();
+
+    const pollInterval = setInterval(pollFunction, 1000);
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+async function cancelSpotifyPublicSync(urlHash) {
+    try {
+        console.log('Cancelling Spotify public sync:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_spotify_public_playlist) {
+            console.error('Invalid Spotify public playlist state');
+            return;
+        }
+
+        const playlistId = state.spotify_public_playlist_id;
+        const response = await fetch(`/api/spotify-public/sync/cancel/${playlistId}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error cancelling sync: ${result.error}`, 'error');
+            return;
+        }
+
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        const syncId = state && state.syncPlaylistId;
+        if (syncId && _syncProgressCallbacks[syncId]) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [syncId] });
+            delete _syncProgressCallbacks[syncId];
+        }
+
+        updateSpotifyPublicCardPhase(playlistId, 'discovered');
+        updateSpotifyPublicModalButtons(urlHash, 'discovered');
+
+        showToast('Spotify public sync cancelled', 'info');
+
+    } catch (error) {
+        console.error('Error cancelling Spotify public sync:', error);
+        showToast(`Error cancelling sync: ${error.message}`, 'error');
+    }
+}
+
+function updateSpotifyPublicCardSyncProgress(urlHash, progress) {
+    const state = spotifyPublicPlaylistStates[urlHash];
+    if (!state || !state.playlist || !progress) return;
+
+    state.lastSyncProgress = progress;
+
+    const card = document.getElementById(`spotify-public-card-${urlHash}`);
+    if (!card) return;
+
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    let statusCounterHTML = '';
+    if (progress && progress.total_tracks > 0) {
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const processed = matched + failed;
+        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+        statusCounterHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat matched-tracks">✓ ${matched}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat failed-tracks">✗ ${failed}</span>
+                <span class="sync-stat percentage">(${percentage}%)</span>
+            </div>
+        `;
+    }
+
+    if (statusCounterHTML) {
+        progressElement.innerHTML = statusCounterHTML;
+    }
+}
+
+function updateSpotifyPublicModalSyncProgress(urlHash, progress) {
+    const statusDisplay = document.getElementById(`spotify-public-sync-status-${urlHash}`);
+    if (!statusDisplay || !progress) return;
+
+    const totalEl = document.getElementById(`spotify-public-total-${urlHash}`);
+    const matchedEl = document.getElementById(`spotify-public-matched-${urlHash}`);
+    const failedEl = document.getElementById(`spotify-public-failed-${urlHash}`);
+    const percentageEl = document.getElementById(`spotify-public-percentage-${urlHash}`);
+
+    const total = progress.total_tracks || 0;
+    const matched = progress.matched_tracks || 0;
+    const failed = progress.failed_tracks || 0;
+
+    if (totalEl) totalEl.textContent = total;
+    if (matchedEl) matchedEl.textContent = matched;
+    if (failedEl) failedEl.textContent = failed;
+
+    if (total > 0) {
+        const processed = matched + failed;
+        const percentage = Math.round((processed / total) * 100);
+        if (percentageEl) percentageEl.textContent = percentage;
+    }
+}
+
+function updateSpotifyPublicModalButtons(urlHash, phase) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (!modal) return;
+
+    const footerLeft = modal.querySelector('.modal-footer-left');
+    if (footerLeft) {
+        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
+    }
+}
+
+async function startSpotifyPublicDownloadMissing(urlHash) {
+    try {
+        console.log('🔍 Starting download missing tracks for Spotify public playlist:', urlHash);
+
+        const state = youtubePlaylistStates[urlHash];
+        if (!state || !state.is_spotify_public_playlist) {
+            console.error('Invalid Spotify public playlist state for download');
+            return;
+        }
+
+        const discoveryResults = state.discoveryResults || state.discovery_results;
+
+        if (!discoveryResults) {
+            showToast('No discovery results available for download', 'error');
+            return;
+        }
+
+        const spotifyTracks = [];
+        for (const result of discoveryResults) {
+            if (result.spotify_data) {
+                spotifyTracks.push(result.spotify_data);
+            } else if (result.spotify_track && result.status_class === 'found') {
+                const albumData = result.spotify_album || 'Unknown Album';
+                const albumObject = typeof albumData === 'object' && albumData !== null
+                    ? albumData
+                    : {
+                        name: typeof albumData === 'string' ? albumData : 'Unknown Album',
+                        album_type: 'album',
+                        images: []
+                    };
+
+                spotifyTracks.push({
+                    id: result.spotify_id || 'unknown',
+                    name: result.spotify_track || 'Unknown Track',
+                    artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
+                    album: albumObject,
+                    duration_ms: 0
+                });
+            }
+        }
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        const realUrlHash = state.spotify_public_playlist_id;
+        const virtualPlaylistId = `spotify_public_${realUrlHash}`;
+        const playlistName = state.playlist.name;
+
+        state.convertedSpotifyPlaylistId = virtualPlaylistId;
+
+        // Sync convertedSpotifyPlaylistId to spotifyPublicPlaylistStates for card click routing
+        if (realUrlHash && spotifyPublicPlaylistStates[realUrlHash]) {
+            spotifyPublicPlaylistStates[realUrlHash].convertedSpotifyPlaylistId = virtualPlaylistId;
+        }
+
+        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (discoveryModal) {
+            discoveryModal.classList.add('hidden');
+        }
+
+        await openDownloadMissingModalForTidal(virtualPlaylistId, playlistName, spotifyTracks);
+
+    } catch (error) {
+        console.error('Error starting Spotify public download missing:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+// ===============================
+// URL HISTORY (Saved playlist URLs)
+// ===============================
+
+const URL_HISTORY_MAX = 10;
+const URL_HISTORY_SOURCES = {
+    youtube: { key: 'soulsync-url-history-youtube', icon: '▶', inputId: 'youtube-url-input', containerId: 'youtube-url-history', loadFn: () => parseYouTubePlaylist() },
+    deezer: { key: 'soulsync-url-history-deezer', icon: '🎵', inputId: 'deezer-url-input', containerId: 'deezer-url-history', loadFn: () => loadDeezerPlaylist() },
+    'spotify-public': { key: 'soulsync-url-history-spotify-public', icon: '🎧', inputId: 'spotify-public-url-input', containerId: 'spotify-public-url-history', loadFn: () => parseSpotifyPublicUrl() }
+};
+
+function getUrlHistory(source) {
+    try {
+        const cfg = URL_HISTORY_SOURCES[source];
+        if (!cfg) return [];
+        const raw = localStorage.getItem(cfg.key);
+        return raw ? JSON.parse(raw) : [];
+    } catch { return []; }
+}
+
+function saveUrlHistory(source, url, name) {
+    const cfg = URL_HISTORY_SOURCES[source];
+    if (!cfg || !url) return;
+    let history = getUrlHistory(source);
+    // Remove duplicate (same URL)
+    history = history.filter(h => h.url !== url);
+    // Add to front
+    history.unshift({ url, name: name || url, ts: Date.now() });
+    // Cap
+    if (history.length > URL_HISTORY_MAX) history = history.slice(0, URL_HISTORY_MAX);
+    localStorage.setItem(cfg.key, JSON.stringify(history));
+    renderUrlHistory(source);
+}
+
+function removeUrlHistoryEntry(source, url) {
+    const cfg = URL_HISTORY_SOURCES[source];
+    if (!cfg) return;
+    let history = getUrlHistory(source);
+    history = history.filter(h => h.url !== url);
+    localStorage.setItem(cfg.key, JSON.stringify(history));
+    renderUrlHistory(source);
+}
+
+function renderUrlHistory(source) {
+    const cfg = URL_HISTORY_SOURCES[source];
+    if (!cfg) return;
+    const container = document.getElementById(cfg.containerId);
+    if (!container) return;
+    const history = getUrlHistory(source);
+    if (history.length === 0) {
+        container.style.display = 'none';
+        container.innerHTML = '';
+        return;
+    }
+    container.style.display = 'flex';
+    container.innerHTML = `<span class="url-history-bar-label">Recent</span>` +
+        history.map(h => {
+            const rawName = h.name.length > 30 ? h.name.substring(0, 28) + '...' : h.name;
+            const safeName = escapeHtml(rawName);
+            const safeTitle = escapeHtml(h.name);
+            const safeUrl = h.url.replace(/"/g, '&quot;');
+            return `<div class="url-history-pill" data-url="${safeUrl}" title="${safeTitle}">
+                <span class="url-history-pill-icon">${cfg.icon}</span>
+                <span class="url-history-pill-name">${safeName}</span>
+                <button class="url-history-pill-remove" data-source="${source}" data-url="${safeUrl}">&times;</button>
+            </div>`;
+        }).join('');
+
+    // Pill click → fill input and load (skip if already loaded)
+    container.querySelectorAll('.url-history-pill').forEach(pill => {
+        pill.addEventListener('click', (e) => {
+            // Don't trigger if clicking the X button
+            if (e.target.classList.contains('url-history-pill-remove')) return;
+            const pillUrl = pill.dataset.url;
+            if (_isUrlAlreadyLoaded(source, pillUrl)) {
+                showToast('This playlist is already loaded', 'info');
+                return;
+            }
+            const input = document.getElementById(cfg.inputId);
+            if (input) input.value = pillUrl;
+            cfg.loadFn();
+        });
+    });
+
+    // X button click → remove entry
+    container.querySelectorAll('.url-history-pill-remove').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            removeUrlHistoryEntry(btn.dataset.source, btn.dataset.url);
+        });
+    });
+}
+
+function _isUrlAlreadyLoaded(source, url) {
+    if (source === 'youtube') {
+        // Check for existing YouTube card with this URL
+        const container = document.getElementById('youtube-playlist-container');
+        if (container) {
+            const cards = container.querySelectorAll('.youtube-playlist-card[data-url]');
+            for (const card of cards) {
+                if (card.dataset.url === url) return true;
+            }
+        }
+        return false;
+    } else if (source === 'deezer') {
+        // Extract playlist ID from URL and check deezerPlaylists array
+        const match = url.match(/deezer\.com\/(?:[a-z]{2}\/)?playlist\/(\d+)/i);
+        const id = match ? match[1] : (/^\d+$/.test(url) ? url : null);
+        if (id && deezerPlaylists.find(p => String(p.id) === String(id))) return true;
+        return false;
+    } else if (source === 'spotify-public') {
+        // Extract Spotify ID from URL and compare against loaded playlists
+        const spMatch = url.match(/open\.spotify\.com\/(playlist|album)\/([a-zA-Z0-9]+)/);
+        const spId = spMatch ? spMatch[2] : null;
+        if (spId && spotifyPublicPlaylists.some(p => p.id === spId)) return true;
+        // Fallback: direct URL comparison
+        return spotifyPublicPlaylists.some(p => p.url === url);
+    }
+    return false;
+}
+
+function initUrlHistories() {
+    for (const source of Object.keys(URL_HISTORY_SOURCES)) {
+        renderUrlHistory(source);
+    }
+}
+
+// ===============================
+// YOUTUBE PLAYLIST FUNCTIONALITY
+// ===============================
+
+async function parseYouTubePlaylist() {
+    const urlInput = document.getElementById('youtube-url-input');
+    const url = urlInput.value.trim();
+
+    if (!url) {
+        showToast('Please enter a YouTube playlist URL', 'error');
+        return;
+    }
+
+    // Validate URL format
+    if (!url.includes('youtube.com/playlist') && !url.includes('music.youtube.com/playlist')) {
+        showToast('Please enter a valid YouTube playlist URL', 'error');
+        return;
+    }
+
+    // Check if already loaded
+    if (_isUrlAlreadyLoaded('youtube', url)) {
+        showToast('This playlist is already loaded', 'info');
+        urlInput.value = '';
+        return;
+    }
+
+    try {
+        console.log('🎬 Parsing YouTube playlist:', url);
+
+        // Create card immediately in 'fresh' phase
+        createYouTubeCard(url, 'fresh');
+
+        // Parse playlist via API
+        const response = await fetch('/api/youtube/parse', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ url: url })
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error parsing YouTube playlist: ${result.error}`, 'error');
+            removeYouTubeCard(url);
+            return;
+        }
+
+        console.log('✅ YouTube playlist parsed:', result.name, `(${result.tracks.length} tracks)`);
+
+        // Save to URL history
+        saveUrlHistory('youtube', url, result.name);
+
+        // Update card with parsed data and stay in 'fresh' phase
+        updateYouTubeCardData(result.url_hash, result);
+        updateYouTubeCardPhase(result.url_hash, 'fresh');
+
+        // Auto-mirror this YouTube playlist
+        mirrorPlaylist('youtube', result.url_hash, result.name, result.tracks.map(t => ({
+            track_name: t.name || t.title || '', artist_name: Array.isArray(t.artists) ? t.artists[0] : (t.artist || ''),
+            album_name: '', duration_ms: t.duration_ms || 0, source_track_id: t.id || ''
+        })), { description: url });
+
+        // Clear input
+        urlInput.value = '';
+
+        // Show success message
+        showToast(`YouTube playlist parsed: ${result.name} (${result.tracks.length} tracks)`, 'success');
+
+    } catch (error) {
+        console.error('❌ Error parsing YouTube playlist:', error);
+        showToast(`Error parsing YouTube playlist: ${error.message}`, 'error');
+        removeYouTubeCard(url);
+    }
+}
+
+function createYouTubeCard(url, phase = 'fresh') {
+    const container = document.getElementById('youtube-playlist-container');
+    const placeholder = container.querySelector('.playlist-placeholder');
+
+    // Remove placeholder if it exists
+    if (placeholder) {
+        placeholder.style.display = 'none';
+    }
+
+    // Create temporary URL hash for initial card
+    const tempHash = btoa(url).substring(0, 8);
+
+    const cardHtml = `
+        <div class="youtube-playlist-card" id="youtube-card-${tempHash}" data-url="${url}">
+            <div class="playlist-card-icon youtube-icon">▶</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">Parsing YouTube playlist...</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">-- tracks</span>
+                    <span class="playlist-card-phase-text" style="color: #999;">Loading...</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress hidden">
+                ♪ 0 / ✓ 0 / ✗ 0 / 0%
+            </div>
+            <button class="playlist-card-action-btn" disabled>Parsing...</button>
+        </div>
+    `;
+
+    container.insertAdjacentHTML('beforeend', cardHtml);
+
+    // Store temporary state
+    youtubePlaylistStates[tempHash] = {
+        phase: phase,
+        url: url,
+        cardElement: document.getElementById(`youtube-card-${tempHash}`),
+        tempHash: tempHash
+    };
+
+    console.log('🃏 Created YouTube card for URL:', url);
+}
+
+function updateYouTubeCardData(urlHash, playlistData) {
+    // Find the card by URL or temp hash
+    let state = youtubePlaylistStates[urlHash];
+    if (!state) {
+        // Look for temporary card by URL
+        const tempState = Object.values(youtubePlaylistStates).find(s => s.url === playlistData.url);
+        if (tempState) {
+            // Update the state with real hash
+            delete youtubePlaylistStates[tempState.tempHash];
+            youtubePlaylistStates[urlHash] = tempState;
+            state = tempState;
+
+            // Update card ID
+            if (state.cardElement) {
+                state.cardElement.id = `youtube-card-${urlHash}`;
+            }
+        }
+    }
+
+    if (!state || !state.cardElement) {
+        console.error('❌ Could not find YouTube card for hash:', urlHash);
+        return;
+    }
+
+    const card = state.cardElement;
+
+    // Update card content
+    const nameElement = card.querySelector('.playlist-card-name');
+    const trackCountElement = card.querySelector('.playlist-card-track-count');
+
+    nameElement.textContent = playlistData.name;
+    trackCountElement.textContent = `${playlistData.tracks.length} tracks`;
+
+    // Store playlist data
+    state.playlist = playlistData;
+    state.urlHash = urlHash;
+
+    // Add click handler for card and action button
+    const handleCardClick = () => handleYouTubeCardClick(urlHash);
+    const actionBtn = card.querySelector('.playlist-card-action-btn');
+
+    card.addEventListener('click', handleCardClick);
+    actionBtn.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent card click
+        handleCardClick();
+    });
+
+    console.log('🃏 Updated YouTube card data:', playlistData.name);
+}
+
+function updateYouTubeCardPhase(urlHash, phase) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state || !state.cardElement) return;
+
+    const card = state.cardElement;
+    const phaseTextElement = card.querySelector('.playlist-card-phase-text');
+    const actionBtn = card.querySelector('.playlist-card-action-btn');
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    state.phase = phase;
+
+    switch (phase) {
+        case 'fresh':
+            phaseTextElement.textContent = 'Ready to discover';
+            phaseTextElement.style.color = '#999';
+            actionBtn.textContent = 'Start Discovery';
+            actionBtn.disabled = false;
+            progressElement.classList.add('hidden');
+            break;
+
+        case 'discovering':
+            phaseTextElement.textContent = 'Discovering...';
+            phaseTextElement.style.color = '#ffa500'; // Orange
+            actionBtn.textContent = 'View Progress';
+            actionBtn.disabled = false;
+            progressElement.classList.remove('hidden');
+            break;
+
+        case 'discovered':
+            phaseTextElement.textContent = 'Discovery Complete';
+            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
+            actionBtn.textContent = 'View Details';
+            actionBtn.disabled = false;
+            progressElement.classList.add('hidden');
+            break;
+
+        case 'syncing':
+            phaseTextElement.textContent = 'Syncing...';
+            phaseTextElement.style.color = '#ffa500'; // Orange
+            actionBtn.textContent = 'View Progress';
+            actionBtn.disabled = false;
+            progressElement.classList.remove('hidden');
+            break;
+
+        case 'sync_complete':
+            phaseTextElement.textContent = 'Sync Complete';
+            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
+            actionBtn.textContent = 'View Details';
+            actionBtn.disabled = false;
+            progressElement.classList.add('hidden');
+            break;
+
+        case 'downloading':
+            phaseTextElement.textContent = 'Downloading...';
+            phaseTextElement.style.color = '#ffa500'; // Orange
+            actionBtn.textContent = 'View Downloads';
+            actionBtn.disabled = false;
+            progressElement.classList.remove('hidden');
+            break;
+
+        case 'download_complete':
+            phaseTextElement.textContent = 'Download Complete';
+            phaseTextElement.style.color = 'rgb(var(--accent-rgb))'; // Green
+            actionBtn.textContent = 'View Results';
+            actionBtn.disabled = false;
+            progressElement.classList.add('hidden');
+            break;
+    }
+
+    console.log('🃏 Updated YouTube card phase:', urlHash, phase);
+}
+
+function handleYouTubeCardClick(urlHash) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state) return;
+
+    switch (state.phase) {
+        case 'fresh':
+            // First click: Start discovery and open modal
+            console.log('🎬 Starting YouTube discovery for first time:', urlHash);
+            updateYouTubeCardPhase(urlHash, 'discovering');
+            startYouTubeDiscovery(urlHash);
+            openYouTubeDiscoveryModal(urlHash);
+            break;
+
+        case 'discovering':
+        case 'discovered':
+        case 'syncing':
+        case 'sync_complete':
+            // Open discovery modal with current state
+            console.log('🎬 Opening YouTube discovery modal:', urlHash);
+            openYouTubeDiscoveryModal(urlHash);
+            break;
+
+        case 'downloading':
+        case 'download_complete':
+            // Open download missing tracks modal
+            console.log('🎬 Opening download modal for YouTube playlist:', urlHash);
+            // Need to get playlist ID from converted Spotify data
+            const spotifyPlaylistId = state.convertedSpotifyPlaylistId;
+            if (spotifyPlaylistId) {
+                // Check if we have discovery results, if not load them first
+                if (!state.discoveryResults || state.discoveryResults.length === 0) {
+                    console.log('🔍 Loading discovery results for download modal...');
+                    fetch(`/api/youtube/state/${urlHash}`)
+                        .then(response => response.json())
+                        .then(fullState => {
+                            if (fullState.discovery_results) {
+                                state.discoveryResults = fullState.discovery_results;
+                                console.log(`✅ Loaded ${state.discoveryResults.length} discovery results`);
+
+                                // Now open the modal with the loaded data
+                                const playlistName = state.playlist.name;
+                                const spotifyTracks = state.discoveryResults
+                                    .filter(result => result.spotify_data)
+                                    .map(result => result.spotify_data);
+                                openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
+                            } else {
+                                console.error('❌ No discovery results found for downloads');
+                                showToast('Unable to open download modal - no discovery data', 'error');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('❌ Error loading discovery results:', error);
+                            showToast('Error loading playlist data', 'error');
+                        });
+                } else {
+                    // Use the YouTube-specific function to maintain proper state linking
+                    const playlistName = state.playlist.name;
+                    const spotifyTracks = state.discoveryResults
+                        .filter(result => result.spotify_data)
+                        .map(result => result.spotify_data);
+                    openDownloadMissingModalForYouTube(spotifyPlaylistId, playlistName, spotifyTracks);
+                }
+            } else {
+                console.error('❌ No converted Spotify playlist ID found for downloads');
+                showToast('Unable to open download modal - missing playlist data', 'error');
+            }
+            break;
+    }
+}
+
+function updateYouTubeCardProgress(urlHash, progress) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state || !state.cardElement) return;
+
+    const card = state.cardElement;
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    const total = progress.spotify_total || 0;
+    const matches = progress.spotify_matches || 0;
+    const failed = total - matches;
+    const percentage = total > 0 ? Math.round((matches / total) * 100) : 0;
+
+    progressElement.textContent = `♪ ${total} / ✓ ${matches} / ✗ ${failed} / ${percentage}%`;
+
+    console.log('🃏 Updated YouTube card progress:', urlHash, `${matches}/${total} (${percentage}%)`);
+}
+
+function removeYouTubeCard(url) {
+    const state = Object.values(youtubePlaylistStates).find(s => s.url === url);
+    if (state && state.cardElement) {
+        state.cardElement.remove();
+
+        // Remove from state
+        if (state.urlHash) {
+            delete youtubePlaylistStates[state.urlHash];
+        } else if (state.tempHash) {
+            delete youtubePlaylistStates[state.tempHash];
+        }
+    }
+
+    // Show placeholder if no cards left
+    const container = document.getElementById('youtube-playlist-container');
+    const cards = container.querySelectorAll('.youtube-playlist-card');
+    const placeholder = container.querySelector('.playlist-placeholder');
+
+    if (cards.length === 0 && placeholder) {
+        placeholder.style.display = 'block';
+    }
+}
+
+async function startYouTubeDiscovery(urlHash) {
+    try {
+        console.log('🔍 Starting YouTube Spotify discovery for:', urlHash);
+
+        const response = await fetch(`/api/youtube/discovery/start/${urlHash}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting discovery: ${result.error}`, 'error');
+            return;
+        }
+
+        // Update frontend phase to match backend
+        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
+        if (state) {
+            state.phase = 'discovering';
+        }
+
+        // Update modal buttons to show "Discovering..." instead of "Start Discovery"
+        updateYouTubeModalButtons(urlHash, 'discovering');
+
+        // Start polling for progress
+        startYouTubeDiscoveryPolling(urlHash);
+
+        // Open discovery modal
+        openYouTubeDiscoveryModal(urlHash);
+
+    } catch (error) {
+        console.error('❌ Error starting YouTube discovery:', error);
+        showToast(`Error starting discovery: ${error.message}`, 'error');
+    }
+}
+
+function startYouTubeDiscoveryPolling(urlHash) {
+    // Stop any existing polling
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [urlHash] });
+        _discoveryProgressCallbacks[urlHash] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+                return;
+            }
+            updateYouTubeCardProgress(urlHash, data);
+            const st = youtubePlaylistStates[urlHash];
+            if (st) { st.discoveryResults = data.results || []; st.discovery_results = data.results || []; st.discoveryProgress = data.progress || 0; st.spotifyMatches = data.spotify_matches || 0; st.spotify_matches = data.spotify_matches || 0; }
+            updateYouTubeDiscoveryModal(urlHash, data);
+            if (data.complete) {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('discovery:unsubscribe', { ids: [urlHash] }); delete _discoveryProgressCallbacks[urlHash];
+                // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
+                if (st) st.phase = 'discovered';
+                updateYouTubeCardPhase(urlHash, 'discovered');
+                updateYouTubeModalButtons(urlHash, 'discovered');
+                showToast('Discovery complete!', 'success');
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/youtube/discovery/status/${urlHash}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling YouTube discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            // Update card progress
+            updateYouTubeCardProgress(urlHash, status);
+
+            // Store discovery results and progress in state
+            const state = youtubePlaylistStates[urlHash];
+            if (state) {
+                state.discoveryResults = status.results || [];
+                state.discovery_results = status.results || [];
+                state.discoveryProgress = status.progress || 0;
+                state.spotifyMatches = status.spotify_matches || 0;
+                state.spotify_matches = status.spotify_matches || 0;
+            }
+
+            // Update modal if open
+            updateYouTubeDiscoveryModal(urlHash, status);
+
+            // Check if complete
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+
+                // Update phase in state directly (updateYouTubeCardPhase may skip if no cardElement)
+                if (state) state.phase = 'discovered';
+                // Update card phase to discovered
+                updateYouTubeCardPhase(urlHash, 'discovered');
+
+                // Update modal buttons to show sync and download buttons
+                updateYouTubeModalButtons(urlHash, 'discovered');
+
+                console.log('✅ Discovery complete:', urlHash);
+                showToast('Discovery complete!', 'success');
+            }
+
+        } catch (error) {
+            console.error('❌ Error polling YouTube discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[urlHash];
+        }
+    }, 1000);
+
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+function stopYouTubeDiscoveryPolling(urlHash) {
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+        delete activeYouTubePollers[urlHash];
+        console.log('⏹ Stopped YouTube discovery polling for:', urlHash);
+    }
+}
+
+function openYouTubeDiscoveryModal(urlHash) {
+    // Check ListenBrainz state first, then fallback to YouTube state
+    const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
+    if (!state || !state.playlist) {
+        console.error('❌ No playlist data found for identifier:', urlHash);
+        return;
+    }
+
+    console.log('🎵 Opening discovery modal for:', state.playlist.name);
+
+    // Check if modal already exists
+    let modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+
+    if (modal) {
+        // Modal exists, just show it
+        modal.classList.remove('hidden');
+        console.log('🔄 Showing existing modal with preserved state');
+        console.log('🔄 Current discovery results count:', state.discoveryResults?.length || state.discovery_results?.length || 0);
+
+        // Resume polling if discovery or sync is in progress
+        if (state.phase === 'discovering' && !activeYouTubePollers[urlHash]) {
+            console.log('🔄 Resuming discovery polling...');
+            startYouTubeDiscoveryPolling(urlHash);
+        } else if (state.phase === 'syncing' && !activeYouTubePollers[urlHash]) {
+            console.log('🔄 Resuming sync polling...');
+            if (state.is_tidal_playlist) {
+                startTidalSyncPolling(urlHash);
+            } else if (state.is_deezer_playlist) {
+                startDeezerSyncPolling(urlHash);
+            } else if (state.is_spotify_public_playlist) {
+                startSpotifyPublicSyncPolling(urlHash);
+            } else if (state.is_beatport_playlist) {
+                startBeatportSyncPolling(urlHash);
+            } else if (state.is_listenbrainz_playlist) {
+                startListenBrainzSyncPolling(urlHash);
+            } else {
+                startYouTubeSyncPolling(urlHash);
+            }
+        }
+    } else {
+        // Create new modal (support YouTube, Tidal, Deezer, Beatport, ListenBrainz, Spotify Public, and Mirrored)
+        const isTidal = state.is_tidal_playlist;
+        const isDeezer = state.is_deezer_playlist;
+        const isSpotifyPublic = state.is_spotify_public_playlist;
+        const isBeatport = state.is_beatport_playlist;
+        const isListenBrainz = state.is_listenbrainz_playlist;
+        const isMirrored = state.is_mirrored_playlist;
+        const isLastfmRadio = typeof urlHash === 'string' && urlHash.startsWith('lastfm_radio_');
+        const modalTitle = isMirrored ? '🎵 Mirrored Playlist Discovery' :
+            isSpotifyPublic ? '🎵 Spotify Playlist Discovery' :
+                isDeezer ? '🎵 Deezer Playlist Discovery' :
+                    isTidal ? '🎵 Tidal Playlist Discovery' :
+                        isBeatport ? '🎵 Beatport Chart Discovery' :
+                            isLastfmRadio ? '📻 Last.fm Radio Discovery' :
+                                isListenBrainz ? '🎵 ListenBrainz Playlist Discovery' :
+                                    '🎵 YouTube Playlist Discovery';
+        const sourceLabel = isMirrored ? (state.mirrored_source ? state.mirrored_source.charAt(0).toUpperCase() + state.mirrored_source.slice(1) : 'Source') :
+            isSpotifyPublic ? 'Spotify' :
+                isDeezer ? 'Deezer' :
+                    isTidal ? 'Tidal' :
+                        isBeatport ? 'Beatport' :
+                            isLastfmRadio ? 'Last.fm' :
+                                isListenBrainz ? 'LB' :
+                                    'YT';
+
+        const modalHtml = `
+            <div class="modal-overlay" id="youtube-discovery-modal-${urlHash}">
+                <div class="youtube-discovery-modal">
+                    <div class="modal-header">
+                        <h2>${modalTitle}</h2>
+                        <div class="modal-subtitle">${state.playlist.name} (${state.playlist.tracks.length} tracks)</div>
+                        <div class="modal-description">${getModalDescription(state.phase, isTidal, isBeatport, isListenBrainz, isMirrored, isDeezer, isSpotifyPublic, isLastfmRadio)}</div>
+                        <button class="modal-close-btn" onclick="closeYouTubeDiscoveryModal('${urlHash}')">✕</button>
+                    </div>
+
+                    <div class="modal-body">
+                        <div class="progress-section">
+                            <div class="progress-label">🔍 ${currentMusicSourceName} Discovery Progress</div>
+                            <div class="progress-bar-container">
+                                <div class="progress-bar-fill" id="youtube-discovery-progress-${urlHash}" style="width: 0%;"></div>
+                            </div>
+                            <div class="progress-text" id="youtube-discovery-progress-text-${urlHash}">${getInitialProgressText(state.phase, isTidal, isBeatport, isListenBrainz)}</div>
+                        </div>
+                        
+                        <div class="discovery-table-container">
+                            <table class="discovery-table">
+                                <thead>
+                                    <tr>
+                                        <th>${sourceLabel} Track</th>
+                                        <th>${sourceLabel} Artist</th>
+                                        <th>Status</th>
+                                        <th>${currentMusicSourceName} Track</th>
+                                        <th>${currentMusicSourceName} Artist</th>
+                                        <th>Album</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="youtube-discovery-table-${urlHash}">
+                                    ${generateTableRowsFromState(state, urlHash)}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    
+                    <div class="modal-footer">
+                        <div class="modal-footer-left">
+                            ${getModalActionButtons(urlHash, state.phase, state)}
+                        </div>
+                        <div class="modal-footer-right">
+                            <button class="modal-btn modal-btn-secondary" onclick="closeYouTubeDiscoveryModal('${urlHash}')">🏠 Close</button>
+                        </div>
+                    </div>
+
+                    <!-- Discovery Fix Modal (nested inside) -->
+                    <div class="discovery-fix-modal-overlay hidden" id="discovery-fix-modal-overlay">
+                        <div class="discovery-fix-modal">
+                            <div class="discovery-fix-modal-header">
+                                <h2>Fix Track Match</h2>
+                                <button class="modal-close-btn" onclick="closeDiscoveryFixModal()">✕</button>
+                            </div>
+
+                            <div class="discovery-fix-modal-content">
+                                <!-- Source track info (read-only) -->
+                                <div class="source-track-info">
+                                    <h3>Source Track</h3>
+                                    <div class="source-track-display">
+                                        <div class="source-field">
+                                            <label>Track:</label>
+                                            <span id="fix-modal-source-track">-</span>
+                                        </div>
+                                        <div class="source-field">
+                                            <label>Artist:</label>
+                                            <span id="fix-modal-source-artist">-</span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- Search inputs (editable) -->
+                                <div class="search-inputs-section">
+                                    <h3>Search for Match</h3>
+                                    <div class="search-input-group">
+                                        <input type="text"
+                                               id="fix-modal-track-input"
+                                               placeholder="Track name"
+                                               class="fix-modal-input">
+                                        <input type="text"
+                                               id="fix-modal-artist-input"
+                                               placeholder="Artist name"
+                                               class="fix-modal-input">
+                                        <button class="search-btn" onclick="searchDiscoveryFix()">
+                                            🔍 Search
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <!-- Search results -->
+                                <div class="search-results-section">
+                                    <h3>Results</h3>
+                                    <div id="fix-modal-results" class="fix-modal-results">
+                                        <!-- Auto-populated on modal open, updated on search -->
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="discovery-fix-modal-footer">
+                                <button class="modal-btn secondary" onclick="closeDiscoveryFixModal()">
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        // Add modal to DOM
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+
+        // Store modal reference
+        state.modalElement = modal;
+
+        // Set initial progress if we have discovery results
+        if (state.discoveryResults && state.discoveryResults.length > 0) {
+            // Compute progress from results if discoveryProgress is missing/zero
+            let progress = state.discoveryProgress || 0;
+            const matches = state.spotifyMatches || 0;
+            if (progress === 0 && state.discoveryResults.length > 0 && state.playlist.tracks.length > 0) {
+                progress = Math.min(100, Math.round((state.discoveryResults.length / state.playlist.tracks.length) * 100));
+            }
+            const progressData = {
+                progress: progress,
+                spotify_matches: matches || state.discoveryResults.filter(r => r.status_class === 'found').length,
+                spotify_total: state.playlist.tracks.length,
+                results: state.discoveryResults
+            };
+            updateYouTubeDiscoveryModal(urlHash, progressData);
+        }
+
+        // Start polling immediately if modal is opened in syncing phase
+        if (state.phase === 'syncing') {
+            console.log('🔄 Modal opened in syncing phase - starting immediate polling...');
+            if (state.is_tidal_playlist) {
+                startTidalSyncPolling(urlHash);
+            } else if (state.is_deezer_playlist) {
+                startDeezerSyncPolling(urlHash);
+            } else if (state.is_spotify_public_playlist) {
+                startSpotifyPublicSyncPolling(urlHash);
+            } else if (state.is_beatport_playlist) {
+                startBeatportSyncPolling(urlHash);
+            } else {
+                startYouTubeSyncPolling(urlHash);
+            }
+        }
+
+        console.log('✨ Created new modal with current state');
+    }
+}
+
+function getModalActionButtons(urlHash, phase, state = null) {
+    // Get state if not provided
+    if (!state) {
+        state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
+    }
+
+    const isTidal = state && state.is_tidal_playlist;
+    const isDeezer = state && state.is_deezer_playlist;
+    const isSpotifyPublic = state && state.is_spotify_public_playlist;
+    const isBeatport = state && state.is_beatport_playlist;
+    const isListenBrainz = state && state.is_listenbrainz_playlist;
+
+    // Validate data availability for buttons (support both naming conventions)
+    const hasDiscoveryResults = state && ((state.discoveryResults && state.discoveryResults.length > 0) || (state.discovery_results && state.discovery_results.length > 0));
+    const hasSpotifyMatches = state && ((state.spotifyMatches > 0) || (state.spotify_matches > 0));
+    const hasConvertedPlaylistId = state && state.convertedSpotifyPlaylistId;
+
+    switch (phase) {
+        case 'fresh':
+        case 'discovering':
+            // Show start discovery button for fresh playlists
+            if (phase === 'fresh') {
+                const wingItBtn = ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
+
+                if (isListenBrainz) {
+                    return `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzDiscovery('${urlHash}')">🔍 Start Discovery</button>${wingItBtn}`;
+                } else {
+                    return `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDiscovery('${urlHash}')">🔍 Start Discovery</button>${wingItBtn}`;
+                }
+            } else {
+                // Discovering phase - show progress
+                return `<div class="modal-info">🔍 Discovering ${currentMusicSourceName} matches...</div>`;
+            }
+
+        case 'discovered':
+        case 'downloading':
+        case 'download_complete':
+            // Only show buttons if we actually have discovery data
+            if (!hasDiscoveryResults) {
+                return `<div class="modal-info">⚠️ No discovery results available. Try starting discovery again.</div>`;
+            }
+
+            let buttons = '';
+
+            // Only show sync button if there are Spotify matches (and not standalone mode)
+            if (hasSpotifyMatches && !_isSoulsyncStandalone) {
+                if (isListenBrainz) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isTidal) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isDeezer) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isSpotifyPublic) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isBeatport) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                }
+            }
+
+            // Only show download button if we have matches or a converted playlist ID
+            if (hasSpotifyMatches || hasConvertedPlaylistId) {
+                if (isListenBrainz) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isTidal) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isDeezer) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isSpotifyPublic) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isBeatport) {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else {
+                    buttons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                }
+            }
+
+            // Retry Failed button for mirrored playlists
+            if (state && state.is_mirrored_playlist) {
+                const results = state.discovery_results || state.discoveryResults || [];
+                const failedCount = results.filter(r => r.status_class !== 'found').length;
+                if (failedCount > 0) {
+                    buttons += `<button class="modal-btn modal-btn-secondary" onclick="retryFailedMirroredDiscovery('${urlHash}')">🔄 Retry Failed (${failedCount})</button>`;
+                }
+            }
+
+            // Rediscover button — reset and re-run discovery (only for sources with reset endpoints)
+            if (isBeatport) {
+                buttons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
+            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
+                buttons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
+            }
+
+            // Wing It button — available in discovered phase
+            buttons += ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
+
+            if (!buttons || buttons.trim().startsWith('<button class="modal-btn wing-it-btn"')) {
+                buttons = `<div class="modal-info">ℹ️ No Spotify matches found.</div>` + buttons;
+            }
+
+            return buttons;
+
+        case 'syncing':
+            if (isListenBrainz) {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelYouTubeSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="listenbrainz-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="listenbrainz-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="listenbrainz-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="listenbrainz-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="listenbrainz-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            } else if (isTidal) {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelTidalSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="tidal-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="tidal-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="tidal-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="tidal-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="tidal-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            } else if (isDeezer) {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelDeezerSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="deezer-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="deezer-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="deezer-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="deezer-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="deezer-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            } else if (isSpotifyPublic) {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelSpotifyPublicSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="spotify-public-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="spotify-public-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="spotify-public-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="spotify-public-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="spotify-public-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            } else if (isBeatport) {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelBeatportSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="beatport-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="beatport-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="beatport-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="beatport-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="beatport-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            } else {
+                return `
+                    <button class="modal-btn modal-btn-danger" onclick="cancelYouTubeSync('${urlHash}')">❌ Cancel Sync</button>
+                    <div class="playlist-modal-sync-status" id="youtube-sync-status-${urlHash}" style="display: flex;">
+                        <span class="sync-stat total-tracks">♪ <span id="youtube-total-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="youtube-matched-${urlHash}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="youtube-failed-${urlHash}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="youtube-percentage-${urlHash}">0</span>%)</span>
+                    </div>
+                `;
+            }
+
+        case 'sync_complete':
+            let syncCompleteButtons = '';
+
+            // Only show sync button if there are Spotify matches (and not standalone mode)
+            if (hasSpotifyMatches && !_isSoulsyncStandalone) {
+                if (isListenBrainz) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isTidal) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isSpotifyPublic) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isBeatport) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                }
+            }
+
+            // Only show download button if we have matches or a converted playlist ID
+            if (hasSpotifyMatches || hasConvertedPlaylistId) {
+                if (isListenBrainz) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isTidal) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isSpotifyPublic) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isBeatport) {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else {
+                    syncCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                }
+            }
+
+            // Rediscover button (only for sources with reset endpoints)
+            if (isBeatport) {
+                syncCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
+            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
+                syncCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
+            }
+
+            // Wing It button
+            syncCompleteButtons += ` <span class="wing-it-wrap"><button class="modal-btn wing-it-btn" onclick="_toggleWingItDropdown(this, '${urlHash}')">⚡ Wing It</button></span>`;
+
+            return syncCompleteButtons;
+
+        case 'download_complete':
+            // Same options as sync_complete — allow re-sync, download missing, and reset
+            let dlCompleteButtons = '';
+
+            if (hasSpotifyMatches) {
+                if (isListenBrainz) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startListenBrainzPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isTidal) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isDeezer) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isSpotifyPublic) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else if (isBeatport) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportPlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                } else {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubePlaylistSync('${urlHash}')">🔄 Sync This Playlist</button>`;
+                }
+            }
+
+            if (hasSpotifyMatches || hasConvertedPlaylistId) {
+                if (isListenBrainz) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isTidal) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startTidalDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isDeezer) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startDeezerDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isSpotifyPublic) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startSpotifyPublicDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else if (isBeatport) {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startBeatportDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                } else {
+                    dlCompleteButtons += `<button class="modal-btn modal-btn-primary" onclick="startYouTubeDownloadMissing('${urlHash}')">🔍 Download Missing Tracks</button>`;
+                }
+            }
+
+            // Rediscover button (only for sources with reset endpoints)
+            if (isBeatport) {
+                dlCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetBeatportChart('${urlHash}')">🔄 Rediscover</button>`;
+            } else if (!isListenBrainz && !isTidal && !isDeezer && !isSpotifyPublic) {
+                dlCompleteButtons += `<button class="modal-btn modal-btn-secondary" onclick="resetYouTubePlaylist('${urlHash}')">🔄 Rediscover</button>`;
+            }
+
+            return dlCompleteButtons;
+
+        default:
+            return '';
+    }
+}
+
+function getModalDescription(phase, isTidal = false, isBeatport = false, isListenBrainz = false, isMirrored = false, isDeezer = false, isSpotifyPublic = false, isLastfmRadio = false) {
+    const source = isMirrored ? 'mirrored' : (isSpotifyPublic ? 'Spotify' : (isDeezer ? 'Deezer' : (isLastfmRadio ? 'Last.fm Radio' : (isListenBrainz ? 'ListenBrainz' : (isBeatport ? 'Beatport' : (isTidal ? 'Tidal' : 'YouTube'))))));
+    switch (phase) {
+        case 'fresh':
+            return `Ready to discover clean ${currentMusicSourceName} metadata for ${source} tracks...`;
+        case 'discovering':
+            return `Discovering clean ${currentMusicSourceName} metadata for ${source} tracks...`;
+        case 'discovered':
+        case 'downloading':
+        case 'download_complete':
+            return 'Discovery complete! View the results below.';
+        default:
+            return `Discovering clean ${currentMusicSourceName} metadata for ${source} tracks...`;
+    }
+}
+
+function getInitialProgressText(phase, isTidal = false, isBeatport = false, isListenBrainz = false) {
+    switch (phase) {
+        case 'fresh':
+            return 'Click Start Discovery to begin...';
+        case 'discovering':
+            return 'Starting discovery...';
+        case 'discovered':
+        case 'downloading':
+        case 'download_complete':
+            return 'Discovery completed!';
+        default:
+            return 'Starting discovery...';
+    }
+}
+
+function generateTableRowsFromState(state, urlHash) {
+    const isTidal = state.is_tidal_playlist;
+    const isDeezer = state.is_deezer_playlist;
+    const isSpotifyPublic = state.is_spotify_public_playlist;
+    const isBeatport = state.is_beatport_playlist;
+    const isListenBrainz = state.is_listenbrainz_playlist;
+    const isMirrored = state.is_mirrored_playlist;
+    const platform = isMirrored ? 'mirrored' : (isSpotifyPublic ? 'spotify_public' : (isDeezer ? 'deezer' : (isListenBrainz ? 'listenbrainz' : (isTidal ? 'tidal' : (isBeatport ? 'beatport' : 'youtube')))));
+
+    // Support both camelCase and snake_case
+    const discoveryResults = state.discoveryResults || state.discovery_results;
+
+    if (discoveryResults && discoveryResults.length > 0) {
+        // Generate rows from existing discovery results
+        return discoveryResults.map((result, index) => {
+            // Handle different field names based on platform
+            const trackName = result.lb_track || result.yt_track || result.track_name || '-';
+            const artistName = result.lb_artist || result.yt_artist || result.artist_name || '-';
+
+            return `
+            <tr id="discovery-row-${urlHash}-${result.index}">
+                <td class="yt-track">${trackName}</td>
+                <td class="yt-artist">${artistName}</td>
+                <td class="discovery-status ${result.status_class}">${result.status}</td>
+                <td class="spotify-track">${result.spotify_track || '-'}</td>
+                <td class="spotify-artist">${result.spotify_artist || '-'}</td>
+                <td class="spotify-album">${result.spotify_album || '-'}</td>
+                <td class="discovery-actions">${generateDiscoveryActionButton(result, urlHash, platform)}</td>
+            </tr>
+        `;
+        }).join('');
+    } else {
+        // Generate initial rows from playlist tracks
+        return generateInitialTableRows(state.playlist.tracks, isTidal, urlHash, isBeatport, isListenBrainz);
+    }
+}
+
+function generateInitialTableRows(tracks, isTidal = false, urlHash = '', isBeatport = false, isListenBrainz = false) {
+    return tracks.map((track, index) => {
+        // Handle different track formats based on platform
+        let trackName, artistName;
+
+        if (isListenBrainz) {
+            // ListenBrainz tracks have track_name and artist_name
+            trackName = track.track_name || 'Unknown Track';
+            artistName = track.artist_name || 'Unknown Artist';
+        } else {
+            // YouTube/Tidal/Beatport tracks have name and artists
+            trackName = track.name || 'Unknown Track';
+            artistName = track.artists ? (Array.isArray(track.artists) ? track.artists.join(', ') : track.artists) : 'Unknown Artist';
+        }
+
+        return `
+        <tr id="discovery-row-${urlHash}-${index}">
+            <td class="yt-track">${trackName}</td>
+            <td class="yt-artist">${artistName}</td>
+            <td class="discovery-status">🔍 Pending...</td>
+            <td class="spotify-track">-</td>
+            <td class="spotify-artist">-</td>
+            <td class="spotify-album">-</td>
+            <td class="discovery-actions">-</td>
+        </tr>
+    `;
+    }).join('');
+}
+
+function formatDuration(durationMs) {
+    if (!durationMs) return '0:00';
+    const minutes = Math.floor(durationMs / 60000);
+    const seconds = Math.floor((durationMs % 60000) / 1000);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Generate action button for discovery table row
+ */
+function generateDiscoveryActionButton(result, identifier, platform) {
+    // Show fix button for not_found, error, or any non-found status
+    const isNotFound = result.status === 'not_found' ||
+        result.status_class === 'not-found' ||
+        result.status === '❌ Not Found' ||
+        result.status === 'Not Found';
+
+    const isError = result.status === 'error' ||
+        result.status_class === 'error' ||
+        result.status === '❌ Error';
+
+    const isWingIt = result.wing_it_fallback ||
+        result.status_class === 'wing-it';
+
+    const isFound = result.status === 'found' ||
+        result.status_class === 'found' ||
+        result.status === '✅ Found';
+
+    if (isNotFound || isError) {
+        return `<button class="fix-match-btn"
+                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
+                        title="Manually search for this track">
+                    🔧 Fix
+                </button>`;
+    }
+
+    // For wing-it fallbacks, show fix button so user can find a real match
+    if (isWingIt) {
+        return `<button class="fix-match-btn"
+                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
+                        title="Search for a proper metadata match">
+                    🔧 Fix
+                </button>`;
+    }
+
+    // For found matches, show re-match and unmatch buttons
+    if (isFound) {
+        return `<button class="rematch-btn"
+                        onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${result.index})"
+                        title="Change this match">
+                    ↻
+                </button><button class="rematch-btn" style="margin-left:4px;color:#ff6b6b"
+                        onclick="unmatchDiscoveryTrack('${platform}', '${identifier}', ${result.index})"
+                        title="Remove this match">
+                    ✕
+                </button>`;
+    }
+
+    return '-';
+}
+
+function updateYouTubeDiscoveryModal(urlHash, status) {
+    const progressBar = document.getElementById(`youtube-discovery-progress-${urlHash}`);
+    const progressText = document.getElementById(`youtube-discovery-progress-text-${urlHash}`);
+    const tableBody = document.getElementById(`youtube-discovery-table-${urlHash}`);
+
+    if (!progressBar || !progressText || !tableBody) {
+        console.warn(`⚠️ Missing modal elements for ${urlHash}:`, {
+            progressBar: !!progressBar,
+            progressText: !!progressText,
+            tableBody: !!tableBody
+        });
+        return;
+    }
+
+    // Update progress bar
+    progressBar.style.width = `${status.progress}%`;
+    progressText.textContent = `${status.spotify_matches} / ${status.spotify_total} tracks matched (${status.progress}%)`;
+
+
+    // Update table rows
+    status.results.forEach(result => {
+        const row = document.getElementById(`discovery-row-${urlHash}-${result.index}`);
+        if (!row) return;
+
+        const statusCell = row.querySelector('.discovery-status');
+        const spotifyTrackCell = row.querySelector('.spotify-track');
+        const spotifyArtistCell = row.querySelector('.spotify-artist');
+        const spotifyAlbumCell = row.querySelector('.spotify-album');
+        const actionsCell = row.querySelector('.discovery-actions');
+
+        statusCell.textContent = result.status;
+        statusCell.className = `discovery-status ${result.status_class}`;
+
+        spotifyTrackCell.textContent = result.spotify_track || '-';
+        spotifyArtistCell.textContent = result.spotify_artist || '-';
+        spotifyAlbumCell.textContent = result.spotify_album || '-';
+
+        // Update actions cell with appropriate button
+        if (actionsCell) {
+            const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
+            const platform = state?.is_mirrored_playlist ? 'mirrored' :
+                (state?.is_spotify_public_playlist ? 'spotify_public' :
+                    (state?.is_deezer_playlist ? 'deezer' :
+                        (state?.is_listenbrainz_playlist ? 'listenbrainz' :
+                            (state?.is_tidal_playlist ? 'tidal' :
+                                (state?.is_beatport_playlist ? 'beatport' : 'youtube')))));
+            actionsCell.innerHTML = generateDiscoveryActionButton(result, urlHash, platform);
+        }
+    });
+
+    // Update action buttons and description when discovery is complete.
+    // status.complete is explicitly set by LB/WS polling callers; only act when transitioning
+    // from 'discovering' to avoid interfering with download/sync phases of other playlist types.
+    if (status.complete) {
+        const state = listenbrainzPlaylistStates[urlHash] || youtubePlaylistStates[urlHash];
+        if (state && state.phase === 'discovering') {
+            state.phase = 'discovered';
+            const actionButtonsContainer = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-footer-left`);
+            if (actionButtonsContainer) {
+                actionButtonsContainer.innerHTML = getModalActionButtons(urlHash, 'discovered', state);
+                console.log(`✨ Updated action buttons for completed discovery: ${urlHash}`);
+            }
+            const descEl = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-description`);
+            if (descEl) descEl.textContent = 'Discovery complete! View the results below.';
+        } else if (state && state.phase === 'discovered') {
+            // Already discovered — ensure buttons are correct (e.g. after rehydration)
+            const actionButtonsContainer = document.querySelector(`#youtube-discovery-modal-${urlHash} .modal-footer-left`);
+            if (actionButtonsContainer && actionButtonsContainer.querySelector('.modal-info')) {
+                actionButtonsContainer.innerHTML = getModalActionButtons(urlHash, 'discovered', state);
+            }
+        }
+    }
+}
+
+function refreshYouTubeDiscoveryModalTable(urlHash) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state || !state.modalElement) {
+        console.warn(`⚠️ Cannot refresh modal table: no state or modal for ${urlHash}`);
+        return;
+    }
+
+    console.log(`🔄 Refreshing modal table with ${state.discoveryResults?.length || 0} discovery results`);
+
+    // Update the table body with new discovery results
+    const tableBody = state.modalElement.querySelector(`#youtube-discovery-table-${urlHash}`);
+    if (tableBody) {
+        tableBody.innerHTML = generateTableRowsFromState(state, urlHash);
+        console.log(`✅ Modal table refreshed with discovery data`);
+    } else {
+        console.warn(`⚠️ Could not find table body for modal ${urlHash}`);
+    }
+
+    // Update the progress bar and footer buttons too
+    if (state.discoveryResults && state.discoveryResults.length > 0) {
+        const progressData = {
+            progress: state.discoveryProgress || 100,
+            spotify_matches: state.spotifyMatches || 0,
+            spotify_total: state.playlist.tracks.length,
+            results: state.discoveryResults
+        };
+        updateYouTubeDiscoveryModal(urlHash, progressData);
+    }
+}
+
+function closeYouTubeDiscoveryModal(urlHash) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (modal) {
+        // Hide modal instead of removing it to preserve state
+        modal.classList.add('hidden');
+        console.log('🚪 Hidden YouTube discovery modal (preserving state):', urlHash);
+    }
+
+    // Handle phase reset for completed discovery (Tidal/Beatport pattern)
+    const state = youtubePlaylistStates[urlHash];
+    if (state) {
+        const isTidal = state.is_tidal_playlist;
+        const isDeezer = state.is_deezer_playlist;
+        const isSpotifyPublic = state.is_spotify_public_playlist;
+        const isBeatport = state.is_beatport_playlist;
+
+        // Reset to 'discovered' phase if modal is closed after completion (like Tidal does)
+        if (state.phase === 'sync_complete' || state.phase === 'download_complete') {
+            console.log(`🧹 [Modal Close] Resetting ${isSpotifyPublic ? 'Spotify Public' : (isDeezer ? 'Deezer' : (isBeatport ? 'Beatport' : (isTidal ? 'Tidal' : 'YouTube')))} state after completion`);
+
+            if (isSpotifyPublic) {
+                // Spotify Public: Extract url_hash and reset state
+                const spUrlHash = state.spotify_public_playlist_id || null;
+                if (spUrlHash && spotifyPublicPlaylistStates[spUrlHash]) {
+                    const preservedData = {
+                        playlist: spotifyPublicPlaylistStates[spUrlHash].playlist,
+                        discovery_results: spotifyPublicPlaylistStates[spUrlHash].discovery_results,
+                        spotify_matches: spotifyPublicPlaylistStates[spUrlHash].spotify_matches,
+                        discovery_progress: spotifyPublicPlaylistStates[spUrlHash].discovery_progress,
+                        convertedSpotifyPlaylistId: spotifyPublicPlaylistStates[spUrlHash].convertedSpotifyPlaylistId
+                    };
+
+                    delete spotifyPublicPlaylistStates[spUrlHash].download_process_id;
+                    delete spotifyPublicPlaylistStates[spUrlHash].phase;
+
+                    Object.assign(spotifyPublicPlaylistStates[spUrlHash], preservedData);
+                    spotifyPublicPlaylistStates[spUrlHash].phase = 'discovered';
+
+                    updateSpotifyPublicCardPhase(spUrlHash, 'discovered');
+
+                    try {
+                        fetch(`/api/spotify-public/update_phase/${spUrlHash}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                    } catch (error) {
+                        console.warn('Error updating backend Spotify Public phase:', error);
+                    }
+                }
+            } else if (isDeezer) {
+                // Deezer: Extract playlist ID and reset Deezer state
+                const deezerPlaylistId = state.deezer_playlist_id || null;
+                if (deezerPlaylistId && deezerPlaylistStates[deezerPlaylistId]) {
+                    const preservedData = {
+                        playlist: deezerPlaylistStates[deezerPlaylistId].playlist,
+                        discovery_results: deezerPlaylistStates[deezerPlaylistId].discovery_results,
+                        spotify_matches: deezerPlaylistStates[deezerPlaylistId].spotify_matches,
+                        discovery_progress: deezerPlaylistStates[deezerPlaylistId].discovery_progress,
+                        convertedSpotifyPlaylistId: deezerPlaylistStates[deezerPlaylistId].convertedSpotifyPlaylistId
+                    };
+
+                    delete deezerPlaylistStates[deezerPlaylistId].download_process_id;
+                    delete deezerPlaylistStates[deezerPlaylistId].phase;
+
+                    Object.assign(deezerPlaylistStates[deezerPlaylistId], preservedData);
+                    deezerPlaylistStates[deezerPlaylistId].phase = 'discovered';
+
+                    updateDeezerCardPhase(deezerPlaylistId, 'discovered');
+
+                    try {
+                        fetch(`/api/deezer/update_phase/${deezerPlaylistId}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                    } catch (error) {
+                        console.warn('Error updating backend Deezer phase:', error);
+                    }
+                }
+            } else if (isTidal) {
+                // Tidal: Extract playlist ID and reset Tidal state
+                const tidalPlaylistId = state.tidal_playlist_id || null;
+                if (tidalPlaylistId && tidalPlaylistStates[tidalPlaylistId]) {
+                    // Preserve discovery data but reset phase
+                    const preservedData = {
+                        playlist: tidalPlaylistStates[tidalPlaylistId].playlist,
+                        discovery_results: tidalPlaylistStates[tidalPlaylistId].discovery_results,
+                        spotify_matches: tidalPlaylistStates[tidalPlaylistId].spotify_matches,
+                        discovery_progress: tidalPlaylistStates[tidalPlaylistId].discovery_progress,
+                        convertedSpotifyPlaylistId: tidalPlaylistStates[tidalPlaylistId].convertedSpotifyPlaylistId
+                    };
+
+                    // Clear download state
+                    delete tidalPlaylistStates[tidalPlaylistId].download_process_id;
+                    delete tidalPlaylistStates[tidalPlaylistId].phase;
+
+                    // Restore preserved data and set to discovered phase
+                    Object.assign(tidalPlaylistStates[tidalPlaylistId], preservedData);
+                    tidalPlaylistStates[tidalPlaylistId].phase = 'discovered';
+
+                    updateTidalCardPhase(tidalPlaylistId, 'discovered');
+
+                    // Update backend state
+                    try {
+                        fetch(`/api/tidal/update_phase/${tidalPlaylistId}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                    } catch (error) {
+                        console.warn('⚠️ Error updating backend Tidal phase:', error);
+                    }
+                }
+            } else if (isBeatport) {
+                // Beatport: Reset chart state
+                const chartHash = state.beatport_chart_hash || urlHash;
+                if (beatportChartStates[chartHash]) {
+                    beatportChartStates[chartHash].phase = 'discovered';
+                    updateBeatportCardPhase(chartHash, 'discovered');
+
+                    // Update backend state
+                    try {
+                        fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ phase: 'discovered' })
+                        });
+                    } catch (error) {
+                        console.warn('⚠️ Error updating backend Beatport phase:', error);
+                    }
+                }
+            } else {
+                // YouTube: Reset to discovered phase
+                updateYouTubeCardPhase(urlHash, 'discovered');
+
+                // Update backend state
+                try {
+                    fetch(`/api/youtube/update_phase/${urlHash}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'discovered' })
+                    });
+                } catch (error) {
+                    console.warn('⚠️ Error updating backend YouTube phase:', error);
+                }
+            }
+
+            // Reset frontend state to discovered
+            state.phase = 'discovered';
+            console.log(`✅ [Modal Close] Reset to discovered phase: ${urlHash}`);
+        }
+    }
+
+    // Keep modal reference and all state intact
+    // Discovery polling continues in background if active
+}
+
+// ===============================
+// YOUTUBE SYNC FUNCTIONALITY
+// ===============================
+
+async function startYouTubePlaylistSync(urlHash) {
+    try {
+        console.log('🔄 Starting YouTube playlist sync:', urlHash);
+
+        const response = await fetch(`/api/youtube/sync/start/${urlHash}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error starting sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Capture sync_playlist_id for WebSocket subscription
+        const syncPlaylistId = result.sync_playlist_id;
+        const ytState = youtubePlaylistStates[urlHash];
+        if (ytState) ytState.syncPlaylistId = syncPlaylistId;
+
+        // Update card and modal to syncing phase
+        updateYouTubeCardPhase(urlHash, 'syncing');
+
+        // Update modal buttons if modal is open
+        updateYouTubeModalButtons(urlHash, 'syncing');
+
+        // Start sync polling
+        startYouTubeSyncPolling(urlHash, syncPlaylistId);
+
+        showToast('YouTube playlist sync started!', 'success');
+
+    } catch (error) {
+        console.error('❌ Error starting YouTube sync:', error);
+        showToast(`Error starting sync: ${error.message}`, 'error');
+    }
+}
+
+function startYouTubeSyncPolling(urlHash, syncPlaylistId) {
+    // Stop any existing polling
+    if (activeYouTubePollers[urlHash]) {
+        clearInterval(activeYouTubePollers[urlHash]);
+    }
+
+    // Resolve syncPlaylistId from argument or stored state
+    const ytState = youtubePlaylistStates[urlHash];
+    syncPlaylistId = syncPlaylistId || (ytState && ytState.syncPlaylistId);
+
+    // Phase 6: Subscribe via WebSocket
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateYouTubeCardSyncProgress(urlHash, progress);
+            updateYouTubeModalSyncProgress(urlHash, progress);
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                updateYouTubeCardPhase(urlHash, 'sync_complete');
+                updateYouTubeModalButtons(urlHash, 'sync_complete');
+                showToast('YouTube playlist sync complete!', 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[urlHash]) { clearInterval(activeYouTubePollers[urlHash]); delete activeYouTubePollers[urlHash]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                updateYouTubeCardPhase(urlHash, 'discovered');
+                updateYouTubeModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    // Define the polling function (HTTP fallback)
+    const pollFunction = async () => {
+        if (socketConnected) return; // Phase 6: WS handles updates
+        try {
+            const response = await fetch(`/api/youtube/sync/status/${urlHash}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling YouTube sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                return;
+            }
+
+            updateYouTubeCardSyncProgress(urlHash, status.progress);
+            updateYouTubeModalSyncProgress(urlHash, status.progress);
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                updateYouTubeCardPhase(urlHash, 'sync_complete');
+                updateYouTubeModalButtons(urlHash, 'sync_complete');
+                showToast('YouTube playlist sync complete!', 'success');
+            } else if (status.sync_status === 'error') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[urlHash];
+                updateYouTubeCardPhase(urlHash, 'discovered');
+                updateYouTubeModalButtons(urlHash, 'discovered');
+                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
+            }
+        } catch (error) {
+            console.error('❌ Error polling YouTube sync:', error);
+            if (activeYouTubePollers[urlHash]) {
+                clearInterval(activeYouTubePollers[urlHash]);
+                delete activeYouTubePollers[urlHash];
+            }
+        }
+    };
+
+    // Run immediately to get current status (skip if WS active)
+    if (!socketConnected) pollFunction();
+
+    // Then continue polling at regular intervals
+    const pollInterval = setInterval(pollFunction, 1000);
+    activeYouTubePollers[urlHash] = pollInterval;
+}
+
+async function cancelYouTubeSync(urlHash) {
+    try {
+        console.log('❌ Cancelling YouTube sync:', urlHash);
+
+        const response = await fetch(`/api/youtube/sync/cancel/${urlHash}`, {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            showToast(`Error cancelling sync: ${result.error}`, 'error');
+            return;
+        }
+
+        // Stop polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Phase 6: Clean up WS subscription
+        const ytCancelState = youtubePlaylistStates[urlHash];
+        const ytSyncId = ytCancelState && ytCancelState.syncPlaylistId;
+        if (ytSyncId && _syncProgressCallbacks[ytSyncId]) {
+            if (socketConnected) socket.emit('sync:unsubscribe', { playlist_ids: [ytSyncId] });
+            delete _syncProgressCallbacks[ytSyncId];
+        }
+
+        // Revert to discovered phase
+        updateYouTubeCardPhase(urlHash, 'discovered');
+        updateYouTubeModalButtons(urlHash, 'discovered');
+
+        showToast('YouTube sync cancelled', 'info');
+
+    } catch (error) {
+        console.error('❌ Error cancelling YouTube sync:', error);
+        showToast(`Error cancelling sync: ${error.message}`, 'error');
+    }
+}
+
+function updateYouTubeCardSyncProgress(urlHash, progress) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state || !state.cardElement || !progress) return;
+
+    const card = state.cardElement;
+    const progressElement = card.querySelector('.playlist-card-progress');
+
+    // Build clean status counter HTML exactly like Spotify cards
+    let statusCounterHTML = '';
+    if (progress && progress.total_tracks > 0) {
+        const matched = progress.matched_tracks || 0;
+        const failed = progress.failed_tracks || 0;
+        const total = progress.total_tracks || 0;
+        const processed = matched + failed;
+        const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+        statusCounterHTML = `
+            <div class="playlist-card-sync-status">
+                <span class="sync-stat total-tracks">♪ ${total}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat matched-tracks">✓ ${matched}</span>
+                <span class="sync-separator">/</span>
+                <span class="sync-stat failed-tracks">✗ ${failed}</span>
+                <span class="sync-stat percentage">(${percentage}%)</span>
+            </div>
+        `;
+    }
+
+    // Only update if we have valid sync progress, otherwise preserve existing discovery results
+    if (statusCounterHTML) {
+        progressElement.innerHTML = statusCounterHTML;
+    }
+
+    console.log(`🔄 Updated YouTube sync progress: ♪ ${progress?.total_tracks || 0} / ✓ ${progress?.matched_tracks || 0} / ✗ ${progress?.failed_tracks || 0}`);
+}
+
+function updateYouTubeModalSyncProgress(urlHash, progress) {
+    // Try all source-specific element ID prefixes
+    const prefixes = ['youtube', 'listenbrainz', 'tidal', 'deezer', 'spotify-public', 'beatport'];
+    let statusDisplay = null;
+    let prefix = 'youtube';
+    for (const p of prefixes) {
+        statusDisplay = document.getElementById(`${p}-sync-status-${urlHash}`);
+        if (statusDisplay) { prefix = p; break; }
+    }
+    if (!statusDisplay || !progress) return;
+
+    const totalEl = document.getElementById(`${prefix}-total-${urlHash}`);
+    const matchedEl = document.getElementById(`${prefix}-matched-${urlHash}`);
+    const failedEl = document.getElementById(`${prefix}-failed-${urlHash}`);
+    const percentageEl = document.getElementById(`${prefix}-percentage-${urlHash}`);
+
+    const total = progress.total_tracks || 0;
+    const matched = progress.matched_tracks || 0;
+    const failed = progress.failed_tracks || 0;
+
+    if (totalEl) totalEl.textContent = total;
+    if (matchedEl) matchedEl.textContent = matched;
+    if (failedEl) failedEl.textContent = failed;
+
+    // Calculate percentage like Spotify sync
+    if (total > 0) {
+        const processed = matched + failed;
+        const percentage = Math.round((processed / total) * 100);
+        if (percentageEl) percentageEl.textContent = percentage;
+    }
+
+    console.log(`📊 YouTube modal updated: ♪ ${total} / ✓ ${matched} / ✗ ${failed} (${Math.round((matched + failed) / total * 100)}%)`);
+}
+
+function updateYouTubeModalButtons(urlHash, phase) {
+    const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+    if (!modal) return;
+
+    const footerLeft = modal.querySelector('.modal-footer-left');
+    if (footerLeft) {
+        footerLeft.innerHTML = getModalActionButtons(urlHash, phase);
+    }
+}
+
+// ===============================
+// YOUTUBE DOWNLOAD MISSING TRACKS
+// ===============================
+
+async function startYouTubeDownloadMissing(urlHash) {
+    try {
+        console.log('🔍 Starting download missing tracks:', urlHash);
+
+        // Check both YouTube and ListenBrainz states (like Beatport does)
+        const state = youtubePlaylistStates[urlHash] || listenbrainzPlaylistStates[urlHash];
+        // Support both camelCase and snake_case
+        const discoveryResults = state?.discoveryResults || state?.discovery_results;
+
+        if (!state || !discoveryResults) {
+            showToast('No discovery results available for download', 'error');
+            return;
+        }
+
+        // Determine source type (prefix removed - no longer needed)
+        const isListenBrainz = state.is_listenbrainz_playlist;
+        const isBeatport = state.is_beatport_playlist;
+        const isTidal = state.is_tidal_playlist;
+        const isDeezer = state.is_deezer_playlist;
+
+        // Convert discovery results to a format compatible with the download modal
+        const spotifyTracks = discoveryResults
+            .filter(result => result.spotify_data || (result.spotify_track && result.status_class === 'found'))
+            .map(result => {
+                if (result.spotify_data) {
+                    return result.spotify_data;
+                } else {
+                    // Build from individual fields (automatic discovery format)
+                    // Convert album to proper object format for wishlist compatibility
+                    const albumData = result.spotify_album || 'Unknown Album';
+                    const albumObject = typeof albumData === 'object' && albumData !== null
+                        ? albumData
+                        : {
+                            name: typeof albumData === 'string' ? albumData : 'Unknown Album',
+                            album_type: 'album',
+                            images: []
+                        };
+
+                    return {
+                        id: result.spotify_id || 'unknown',
+                        name: result.spotify_track || 'Unknown Track',
+                        artists: result.spotify_artist ? [result.spotify_artist] : ['Unknown Artist'],
+                        album: albumObject,
+                        duration_ms: 0
+                    };
+                }
+            });
+
+        if (spotifyTracks.length === 0) {
+            showToast('No Spotify matches found for download', 'error');
+            return;
+        }
+
+        // Create a virtual playlist for the download system
+        const virtualPlaylistId = isListenBrainz ? `listenbrainz_${urlHash}` : (isDeezer ? `deezer_${urlHash}` : (isBeatport ? `beatport_${urlHash}` : (isTidal ? `tidal_${urlHash}` : `youtube_${urlHash}`)));
+        const playlistName = state.playlist.name;
+
+        // Store reference for card navigation
+        state.convertedSpotifyPlaylistId = virtualPlaylistId;
+
+        // Close the discovery modal if it's open
+        const discoveryModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (discoveryModal) {
+            discoveryModal.classList.add('hidden');
+            console.log('🔄 Closed YouTube discovery modal to show download modal');
+        }
+
+        // Open download missing tracks modal for YouTube playlist
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // Phase will change to 'downloading' when user clicks "Begin Analysis" button
+
+    } catch (error) {
+        console.error('❌ Error starting download missing tracks:', error);
+        showToast(`Error starting downloads: ${error.message}`, 'error');
+    }
+}
+
+async function resetYouTubePlaylist(urlHash) {
+    const state = youtubePlaylistStates[urlHash];
+    if (!state) return;
+
+    try {
+        console.log(`🔄 Resetting YouTube playlist to fresh state: ${state.playlist.name}`);
+
+        // Call backend reset endpoint
+        const response = await fetch(`/api/youtube/reset/${urlHash}`, {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to reset playlist');
+        }
+
+        // Stop any active polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Update client state to match backend reset
+        state.phase = 'fresh';
+        state.discoveryResults = [];
+        state.discoveryProgress = 0;
+        state.spotifyMatches = 0;
+        state.syncPlaylistId = null;
+        state.syncProgress = {};
+        state.convertedSpotifyPlaylistId = null;
+
+        // Update card to reflect fresh state
+        updateYouTubeCardPhase(urlHash, 'fresh');
+        updateYouTubeCardProgress(urlHash, {
+            discovery_progress: 0,
+            spotify_matches: 0,
+            spotify_total: state.playlist.tracks.length
+        });
+
+        // Close modal
+        closeYouTubeDiscoveryModal(urlHash);
+
+        showToast(`Reset "${state.playlist.name}" to fresh state`, 'success');
+        console.log(`✅ Successfully reset YouTube playlist: ${state.playlist.name}`);
+
+    } catch (error) {
+        console.error(`❌ Error resetting YouTube playlist:`, error);
+        showToast(`Error resetting playlist: ${error.message}`, 'error');
+    }
+}
+
+async function resetBeatportChart(urlHash) {
+    const state = youtubePlaylistStates[urlHash];
+    const chartState = beatportChartStates[urlHash];
+
+    if (!state || !state.is_beatport_playlist || !chartState) {
+        console.error('❌ Invalid Beatport chart state for reset');
+        return;
+    }
+
+    try {
+        console.log(`🔄 Resetting Beatport chart to fresh state: ${state.playlist.name}`);
+
+        // Call backend reset endpoint for Beatport
+        const chartHash = state.beatport_chart_hash || urlHash;
+        const response = await fetch(`/api/beatport/charts/update-phase/${chartHash}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                phase: 'fresh',
+                reset: true
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to reset Beatport chart');
+        }
+
+        // Stop any active polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Update client state to match backend reset
+        state.phase = 'fresh';
+        state.discoveryResults = [];
+        state.discoveryProgress = 0;
+        state.spotifyMatches = 0;
+        state.discovery_results = [];
+        state.discovery_progress = 0;
+        state.spotify_matches = 0;
+        state.syncPlaylistId = null;
+        state.syncProgress = {};
+        state.convertedSpotifyPlaylistId = null;
+
+        // Update Beatport chart state
+        chartState.phase = 'fresh';
+
+        // Update card to reflect fresh state
+        updateBeatportCardPhase(chartHash, 'fresh');
+        updateBeatportCardProgress(chartHash, {
+            spotify_total: state.playlist.tracks.length,
+            spotify_matches: 0,
+            failed: 0
+        });
+
+        // Close modal
+        closeYouTubeDiscoveryModal(urlHash);
+
+        showToast(`Reset "${state.playlist.name}" to fresh state`, 'success');
+        console.log(`✅ Successfully reset Beatport chart: ${state.playlist.name}`);
+
+    } catch (error) {
+        console.error(`❌ Error resetting Beatport chart:`, error);
+        showToast(`Error resetting chart: ${error.message}`, 'error');
+    }
+}
+
+// ============================================================================
+// LISTENBRAINZ PLAYLIST DISCOVERY & SYNC
+// ============================================================================
+
+function startListenBrainzDiscoveryPolling(playlistMbid) {
+    console.log(`🔄 Starting ListenBrainz discovery polling for: ${playlistMbid}`);
+
+    // Stop any existing polling (reuse YouTube polling infrastructure)
+    if (activeYouTubePollers[playlistMbid]) {
+        clearInterval(activeYouTubePollers[playlistMbid]);
+    }
+
+    // Phase 5: Subscribe via WebSocket
+    if (socketConnected) {
+        socket.emit('discovery:subscribe', { ids: [playlistMbid] });
+        _discoveryProgressCallbacks[playlistMbid] = (data) => {
+            if (data.error) {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistMbid] }); delete _discoveryProgressCallbacks[playlistMbid];
+                return;
+            }
+            if (listenbrainzPlaylistStates[playlistMbid]) {
+                const transformed = {
+                    progress: data.progress || 0, spotify_matches: data.spotify_matches || 0, spotify_total: data.spotify_total || 0,
+                    results: (data.results || []).map((r, i) => ({
+                        index: r.index !== undefined ? r.index : i,
+                        yt_track: r.lb_track || r.track_name || 'Unknown',
+                        yt_artist: r.lb_artist || r.artist_name || 'Unknown',
+                        status: (r.status === 'found' || r.status === '✅ Found' || r.status_class === 'found') ? '✅ Found' : (r.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                        status_class: r.status_class || ((r.status === 'found' || r.status === '✅ Found') ? 'found' : (r.status === 'error' ? 'error' : 'not-found')),
+                        spotify_track: r.spotify_data ? r.spotify_data.name : (r.spotify_track || '-'),
+                        spotify_artist: r.spotify_data ? (r.spotify_data.artists && r.spotify_data.artists[0] ? (typeof r.spotify_data.artists[0] === 'object' ? r.spotify_data.artists[0].name : r.spotify_data.artists[0]) : '-') : (r.spotify_artist || '-'),
+                        spotify_album: r.spotify_data ? (typeof r.spotify_data.album === 'object' ? r.spotify_data.album.name : r.spotify_data.album) || '-' : (r.spotify_album || '-'),
+                        spotify_data: r.spotify_data, duration: r.duration || '0:00'
+                    })),
+                    complete: data.complete || data.phase === 'discovered'
+                };
+                const st = listenbrainzPlaylistStates[playlistMbid];
+                st.discovery_results = data.results || []; st.discoveryResults = transformed.results;
+                st.discovery_progress = data.progress || 0; st.discoveryProgress = data.progress || 0;
+                st.spotify_matches = data.spotify_matches || 0; st.spotifyMatches = data.spotify_matches || 0;
+                st.spotify_total = data.spotify_total || 0; st.spotifyTotal = data.spotify_total || 0;
+                updateYouTubeDiscoveryModal(playlistMbid, transformed);
+            }
+            if (data.complete || data.phase === 'discovered') {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('discovery:unsubscribe', { ids: [playlistMbid] }); delete _discoveryProgressCallbacks[playlistMbid];
+                if (listenbrainzPlaylistStates[playlistMbid]) listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
+                updateYouTubeModalButtons(playlistMbid, 'discovered');
+                const _descElWs = document.querySelector(`#youtube-discovery-modal-${playlistMbid} .modal-description`);
+                if (_descElWs) _descElWs.textContent = 'Discovery complete! View the results below.';
+                const playlistIdEl = `discover-lb-playlist-${playlistMbid}`;
+                const syncBtn = document.getElementById(`${playlistIdEl}-sync-btn`);
+                if (syncBtn) syncBtn.style.display = 'inline-block';
+                showToast('ListenBrainz discovery complete!', 'success');
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        // Always poll — no dedicated WebSocket events for discovery progress
+        try {
+            const response = await fetch(`/api/listenbrainz/discovery/status/${playlistMbid}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling ListenBrainz discovery status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+                return;
+            }
+
+            // Update state and modal (reuse YouTube infrastructure like Beatport/Tidal)
+            if (listenbrainzPlaylistStates[playlistMbid]) {
+                // Transform ListenBrainz results to YouTube modal format (like Beatport does)
+                const transformedStatus = {
+                    progress: status.progress || 0,
+                    spotify_matches: status.spotify_matches || 0,
+                    spotify_total: status.spotify_total || 0,
+                    results: (status.results || []).map((result, index) => ({
+                        index: result.index !== undefined ? result.index : index,
+                        yt_track: result.lb_track || result.track_name || 'Unknown',
+                        yt_artist: result.lb_artist || result.artist_name || 'Unknown',
+                        status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                        status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
+                        spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                        spotify_artist: result.spotify_data ? (result.spotify_data.artists && result.spotify_data.artists[0] ? (typeof result.spotify_data.artists[0] === 'object' ? result.spotify_data.artists[0].name : result.spotify_data.artists[0]) : '-') : (result.spotify_artist || '-'),
+                        spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) || '-' : (result.spotify_album || '-'),
+                        spotify_data: result.spotify_data,
+                        duration: result.duration || '0:00'
+                    })),
+                    complete: status.complete || status.phase === 'discovered'
+                };
+
+                // Store both raw and transformed results (support both naming conventions)
+                listenbrainzPlaylistStates[playlistMbid].discovery_results = status.results || [];
+                listenbrainzPlaylistStates[playlistMbid].discoveryResults = transformedStatus.results;
+                listenbrainzPlaylistStates[playlistMbid].discovery_progress = status.progress || 0;
+                listenbrainzPlaylistStates[playlistMbid].discoveryProgress = status.progress || 0;
+                listenbrainzPlaylistStates[playlistMbid].spotify_matches = status.spotify_matches || 0;
+                listenbrainzPlaylistStates[playlistMbid].spotifyMatches = status.spotify_matches || 0;  // camelCase for modal
+                listenbrainzPlaylistStates[playlistMbid].spotify_total = status.spotify_total || 0;
+                listenbrainzPlaylistStates[playlistMbid].spotifyTotal = status.spotify_total || 0;  // camelCase for modal
+
+                // Update modal if open
+                updateYouTubeDiscoveryModal(playlistMbid, transformedStatus);
+            }
+
+            // Check if complete
+            if (status.complete || status.phase === 'discovered') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+
+                // Update phase in backend for persistence (like Beatport does)
+                try {
+                    await fetch(`/api/listenbrainz/update-phase/${playlistMbid}`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ phase: 'discovered' })
+                    });
+                    console.log('✅ Updated ListenBrainz backend phase to discovered');
+                } catch (error) {
+                    console.warn('⚠️ Failed to update backend phase:', error);
+                }
+
+                // Update phase in frontend state
+                if (listenbrainzPlaylistStates[playlistMbid]) {
+                    listenbrainzPlaylistStates[playlistMbid].phase = 'discovered';
+                }
+
+                // Update modal buttons to show sync and download buttons
+                updateYouTubeModalButtons(playlistMbid, 'discovered');
+
+                // Update modal description to "Discovery complete!"
+                const descEl = document.querySelector(`#youtube-discovery-modal-${playlistMbid} .modal-description`);
+                if (descEl) descEl.textContent = 'Discovery complete! View the results below.';
+
+                // Show sync button in playlist listing (hidden by default until discovered)
+                const playlistId = `discover-lb-playlist-${playlistMbid}`;
+                const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
+                if (syncBtn) {
+                    syncBtn.style.display = 'inline-block';
+                    console.log('✅ Showing sync button after discovery completion');
+                }
+
+                console.log('✅ ListenBrainz discovery complete:', playlistMbid);
+                showToast('ListenBrainz discovery complete!', 'success');
+            }
+
+        } catch (error) {
+            console.error('❌ Error polling ListenBrainz discovery:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[playlistMbid];
+        }
+    }, 1000);
+
+    activeYouTubePollers[playlistMbid] = pollInterval;
+}
+
+function startListenBrainzSyncPolling(playlistMbid, syncPlaylistId) {
+    // Stop any existing polling
+    if (activeYouTubePollers[playlistMbid]) {
+        clearInterval(activeYouTubePollers[playlistMbid]);
+    }
+
+    // Resolve syncPlaylistId from argument or stored state
+    const lbState = listenbrainzPlaylistStates[playlistMbid];
+    syncPlaylistId = syncPlaylistId || (lbState && lbState.syncPlaylistId);
+
+    // Phase 6: Subscribe via WebSocket
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            updateYouTubeModalSyncProgress(playlistMbid, progress);
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                updateYouTubeModalButtons(playlistMbid, 'sync_complete');
+                showToast('ListenBrainz playlist sync complete!', 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                updateYouTubeModalButtons(playlistMbid, 'discovered');
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    // Define the polling function (HTTP fallback)
+    const pollFunction = async () => {
+        if (socketConnected) return; // Phase 6: WS handles updates
+        try {
+            const response = await fetch(`/api/listenbrainz/sync/status/${playlistMbid}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling ListenBrainz sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+                return;
+            }
+
+            updateYouTubeModalSyncProgress(playlistMbid, status.progress);
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+                updateYouTubeModalButtons(playlistMbid, 'sync_complete');
+                showToast('ListenBrainz playlist sync complete!', 'success');
+            } else if (status.sync_status === 'error') {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+                updateYouTubeModalButtons(playlistMbid, 'discovered');
+                showToast(`Sync failed: ${status.error || 'Unknown error'}`, 'error');
+            }
+        } catch (error) {
+            console.error('❌ Error polling ListenBrainz sync:', error);
+            if (activeYouTubePollers[playlistMbid]) {
+                clearInterval(activeYouTubePollers[playlistMbid]);
+                delete activeYouTubePollers[playlistMbid];
+            }
+        }
+    };
+
+    // Run immediately to get current status (skip if WS active)
+    if (!socketConnected) pollFunction();
+
+    // Then continue polling at regular intervals
+    const pollInterval = setInterval(pollFunction, 1000);
+    activeYouTubePollers[playlistMbid] = pollInterval;
+}
+
+async function startListenBrainzDiscovery(playlistMbid) {
+    const state = listenbrainzPlaylistStates[playlistMbid];
+    if (!state) {
+        console.error('❌ No ListenBrainz playlist state found');
+        return;
+    }
+
+    try {
+        console.log('🔍 Starting ListenBrainz discovery for:', state.playlist.name);
+
+        // Update local phase to discovering
+        state.phase = 'discovering';
+        state.status = 'discovering';
+
+        // Call backend to start discovery worker
+        const response = await fetch(`/api/listenbrainz/discovery/start/${playlistMbid}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist: state.playlist
+            })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to start discovery');
+        }
+
+        console.log('✅ ListenBrainz discovery started on backend');
+
+        // Start polling for progress
+        startListenBrainzDiscoveryPolling(playlistMbid);
+
+        // Update modal to show discovering state
+        updateYouTubeDiscoveryModal(playlistMbid, {
+            phase: 'discovering',
+            progress: 0,
+            results: []
+        });
+
+        showToast('Starting ListenBrainz discovery...', 'info');
+
+    } catch (error) {
+        console.error('❌ Error starting ListenBrainz discovery:', error);
+        showToast(`Error: ${error.message}`, 'error');
+
+        // Revert phase on error
+        state.phase = 'fresh';
+        state.status = 'pending';
+    }
+}
+
+async function startListenBrainzPlaylistSync(playlistMbid) {
+    const state = listenbrainzPlaylistStates[playlistMbid];
+    if (!state) {
+        console.error('❌ No ListenBrainz playlist state found');
+        return;
+    }
+
+    try {
+        console.log('🔄 Starting ListenBrainz sync for:', state.playlist.name);
+
+        // Check if being called from playlist listing (has UI elements) or modal
+        const listingPlaylistId = `discover-lb-playlist-${playlistMbid}`;
+        const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
+        const isFromListing = statusDisplay !== null;
+
+        if (isFromListing) {
+            console.log('🔄 Sync initiated from playlist listing');
+            // Show status display in listing
+            statusDisplay.style.display = 'block';
+            const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
+            if (syncButton) {
+                syncButton.disabled = true;
+                syncButton.style.opacity = '0.5';
+            }
+        }
+
+        // Call backend to start sync
+        const response = await fetch(`/api/listenbrainz/sync/start/${playlistMbid}`, {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to start sync');
+        }
+
+        // Capture sync_playlist_id for WebSocket subscription
+        const result = await response.json();
+        const syncPlaylistId = result.sync_playlist_id;
+        if (state) state.syncPlaylistId = syncPlaylistId;
+
+        // Update phase to syncing
+        state.phase = 'syncing';
+
+        // Start polling for sync progress
+        if (isFromListing) {
+            startListenBrainzListingSyncPolling(playlistMbid, listingPlaylistId, syncPlaylistId);
+        } else {
+            startListenBrainzSyncPolling(playlistMbid, syncPlaylistId);
+            updateYouTubeModalButtons(playlistMbid, 'syncing');
+        }
+
+        showToast('Starting ListenBrainz sync...', 'info');
+
+    } catch (error) {
+        console.error('❌ Error starting ListenBrainz sync:', error);
+        showToast(`Error: ${error.message}`, 'error');
+    }
+}
+
+function startListenBrainzListingSyncPolling(playlistMbid, listingPlaylistId, syncPlaylistId) {
+    console.log(`🔄 Starting listing sync polling for: ${playlistMbid} (UI: ${listingPlaylistId})`);
+
+    // Stop any existing polling
+    if (activeYouTubePollers[playlistMbid]) {
+        clearInterval(activeYouTubePollers[playlistMbid]);
+    }
+
+    // Resolve syncPlaylistId from argument or stored state
+    const lbState = listenbrainzPlaylistStates[playlistMbid];
+    syncPlaylistId = syncPlaylistId || (lbState && lbState.syncPlaylistId);
+
+    // Phase 6: Subscribe via WebSocket
+    if (socketConnected && syncPlaylistId) {
+        socket.emit('sync:subscribe', { playlist_ids: [syncPlaylistId] });
+        _syncProgressCallbacks[syncPlaylistId] = (data) => {
+            const progress = data.progress || {};
+            const total = progress.total_tracks || 0;
+            const matched = progress.matched_tracks || 0;
+            const failed = progress.failed_tracks || 0;
+            const percentage = total > 0 ? Math.round((matched / total) * 100) : 0;
+
+            const totalEl = document.getElementById(`${listingPlaylistId}-sync-total`);
+            const matchedEl = document.getElementById(`${listingPlaylistId}-sync-matched`);
+            const failedEl = document.getElementById(`${listingPlaylistId}-sync-failed`);
+            const percentageEl = document.getElementById(`${listingPlaylistId}-sync-percentage`);
+
+            if (totalEl) totalEl.textContent = total;
+            if (matchedEl) matchedEl.textContent = matched;
+            if (failedEl) failedEl.textContent = failed;
+            if (percentageEl) percentageEl.textContent = percentage;
+
+            if (data.status === 'finished') {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+
+                const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
+                const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
+                if (statusDisplay) setTimeout(() => { statusDisplay.style.display = 'none'; }, 3000);
+                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; }
+
+                if (listenbrainzPlaylistStates[playlistMbid]) {
+                    listenbrainzPlaylistStates[playlistMbid].phase = 'sync_complete';
+                }
+
+                showToast(`Sync complete: ${matched}/${total} tracks matched`, 'success');
+            } else if (data.status === 'error' || data.status === 'cancelled') {
+                if (activeYouTubePollers[playlistMbid]) { clearInterval(activeYouTubePollers[playlistMbid]); delete activeYouTubePollers[playlistMbid]; }
+                socket.emit('sync:unsubscribe', { playlist_ids: [syncPlaylistId] });
+                delete _syncProgressCallbacks[syncPlaylistId];
+                showToast(`Sync failed: ${data.error || 'Unknown error'}`, 'error');
+            }
+        };
+    }
+
+    const pollInterval = setInterval(async () => {
+        if (socketConnected) return; // Phase 6: WS handles updates
+        try {
+            const response = await fetch(`/api/listenbrainz/sync/status/${playlistMbid}`);
+            const status = await response.json();
+
+            if (status.error) {
+                console.error('❌ Error polling ListenBrainz sync status:', status.error);
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+                return;
+            }
+
+            const totalEl = document.getElementById(`${listingPlaylistId}-sync-total`);
+            const matchedEl = document.getElementById(`${listingPlaylistId}-sync-matched`);
+            const failedEl = document.getElementById(`${listingPlaylistId}-sync-failed`);
+            const percentageEl = document.getElementById(`${listingPlaylistId}-sync-percentage`);
+
+            if (totalEl) totalEl.textContent = status.progress?.total_tracks || 0;
+            if (matchedEl) matchedEl.textContent = status.progress?.matched_tracks || 0;
+            if (failedEl) failedEl.textContent = status.progress?.failed_tracks || 0;
+
+            const percentage = status.progress?.total_tracks > 0
+                ? Math.round(((status.progress?.matched_tracks || 0) / status.progress.total_tracks) * 100)
+                : 0;
+            if (percentageEl) percentageEl.textContent = percentage;
+
+            if (status.complete) {
+                clearInterval(pollInterval);
+                delete activeYouTubePollers[playlistMbid];
+
+                const statusDisplay = document.getElementById(`${listingPlaylistId}-sync-status`);
+                const syncButton = document.getElementById(`${listingPlaylistId}-sync-btn`);
+                if (statusDisplay) setTimeout(() => { statusDisplay.style.display = 'none'; }, 3000);
+                if (syncButton) { syncButton.disabled = false; syncButton.style.opacity = '1'; }
+
+                if (listenbrainzPlaylistStates[playlistMbid]) {
+                    listenbrainzPlaylistStates[playlistMbid].phase = 'sync_complete';
+                }
+
+                showToast(`Sync complete: ${status.progress?.matched_tracks || 0}/${status.progress?.total_tracks || 0} tracks matched`, 'success');
+            }
+        } catch (error) {
+            console.error('❌ Error polling ListenBrainz listing sync:', error);
+            clearInterval(pollInterval);
+            delete activeYouTubePollers[playlistMbid];
+        }
+    }, 1000);
+
+    activeYouTubePollers[playlistMbid] = pollInterval;
+}
+
+// ============================================================================
+
diff --git a/webui/static/sync-spotify.js b/webui/static/sync-spotify.js
new file mode 100644
index 00000000..327006ec
--- /dev/null
+++ b/webui/static/sync-spotify.js
@@ -0,0 +1,2539 @@
+// == SYNC PAGE SPOTIFY FUNCTIONALITY       ==
+// ===========================================
+
+async function loadSyncData() {
+    // This is called when the sync page is navigated to.
+    // Load server playlists first (default active tab)
+    if (!window._serverPlaylistsLoaded) {
+        window._serverPlaylistsLoaded = true;
+        loadServerPlaylists(); // Don't await — load in background
+    }
+
+    if (!spotifyPlaylistsLoaded) {
+        await loadSpotifyPlaylists();
+    }
+
+    // Load YouTube playlists from backend (always refresh to get latest state)
+    await loadYouTubePlaylistsFromBackend();
+
+    // Render saved URL histories for YouTube, Deezer, Spotify Link tabs
+    initUrlHistories();
+}
+
+async function ensureBeatportContentLoaded() {
+    if (beatportContentState.loaded) {
+        showBeatportDownloadsSection();
+        return true;
+    }
+
+    if (beatportContentState.loadingPromise) {
+        return beatportContentState.loadingPromise;
+    }
+
+    beatportContentState.abortController = new AbortController();
+    beatportContentState.loadingPromise = (async () => {
+        try {
+            console.log('🎧 Lazy-loading Beatport content...');
+
+            await hydrateBeatportBubblesFromSnapshot();
+            throwIfBeatportLoadAborted();
+            await loadBeatportChartsFromBackend();
+            throwIfBeatportLoadAborted();
+
+            initializeBeatportRebuildSlider();
+            initializeBeatportReleasesSlider();
+            initializeBeatportHypePicksSlider();
+            initializeBeatportChartsSlider();
+            initializeBeatportDJSlider();
+            throwIfBeatportLoadAborted();
+            await Promise.all([
+                loadBeatportTop10Lists(),
+                loadBeatportTop10Releases()
+            ]);
+            throwIfBeatportLoadAborted();
+            showBeatportDownloadsSection();
+
+            beatportContentState.loaded = true;
+            console.log('✅ Beatport content loaded');
+            return true;
+        } catch (error) {
+            if (error && error.name === 'AbortError') {
+                console.log('⏹ Beatport content load aborted');
+                return false;
+            }
+            console.error('❌ Error loading Beatport content:', error);
+            return false;
+        } finally {
+            beatportContentState.loadingPromise = null;
+            if (beatportContentState.abortController && beatportContentState.abortController.signal.aborted) {
+                beatportContentState.abortController = null;
+            }
+        }
+    })();
+
+    return beatportContentState.loadingPromise;
+}
+
+async function checkForActiveProcesses() {
+    try {
+        const response = await fetch('/api/active-processes');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const processes = data.active_processes || [];
+
+        if (processes.length > 0) {
+            console.log(`🔄 Found ${processes.length} active process(es) from backend. Rehydrating UI...`);
+
+            // Separate download batch processes from YouTube playlist processes
+            const downloadProcesses = processes.filter(p => p.type === 'batch');
+            const youtubeProcesses = processes.filter(p => p.type === 'youtube_playlist');
+
+            console.log(`📊 Process breakdown: ${downloadProcesses.length} download batches, ${youtubeProcesses.length} YouTube playlists`);
+
+            // Rehydrate download modal processes (existing Spotify system)
+            for (const processInfo of downloadProcesses) {
+                if (!activeDownloadProcesses[processInfo.playlist_id]) {
+                    rehydrateModal(processInfo);
+                }
+            }
+
+            // Note: YouTube playlists are handled by loadYouTubePlaylistsFromBackend() and rehydrateYouTubePlaylist()
+            // in loadSyncData(), which provides more complete data than active processes and handles download modal rehydration.
+            console.log(`ℹ️ Skipping ${youtubeProcesses.length} YouTube playlists - handled by full backend loading`);
+        }
+    } catch (error) {
+        console.error('Failed to check for active processes:', error);
+    }
+}
+
+async function rehydrateArtistAlbumModal(virtualPlaylistId, playlistName, batchId) {
+    /**
+     * Rehydrates an artist album download modal from backend process data.
+     * Extracts artist/album info from virtual playlist ID and recreates the modal.
+     */
+    try {
+        console.log(`💧 Rehydrating artist album modal: ${virtualPlaylistId} (${playlistName})`);
+
+        // Extract artist_id and album_id from virtualPlaylistId format: artist_album_[artist_id]_[album_id]
+        const parts = virtualPlaylistId.split('_');
+        if (parts.length < 4 || parts[0] !== 'artist' || parts[1] !== 'album') {
+            console.error(`❌ Invalid virtual playlist ID format: ${virtualPlaylistId}`);
+            return;
+        }
+
+        const artistId = parts[2];
+        const albumId = parts.slice(3).join('_'); // Handle album IDs that might contain underscores
+
+        console.log(`🔍 Extracted from virtual playlist: artistId=${artistId}, albumId=${albumId}`);
+
+        // Fetch the album tracks to get proper artist and album data
+        try {
+            const response = await fetch(`/api/album/${albumId}/tracks`);
+            const data = await response.json();
+
+            if (!data.success || !data.album || !data.tracks) {
+                console.error('❌ Failed to fetch album data for rehydration:', data.error);
+                return;
+            }
+
+            const album = data.album;
+            const tracks = data.tracks;
+
+            // Extract artist info from the first track (all tracks should have same artist)
+            const artist = {
+                id: artistId,
+                name: tracks[0].artists[0] // Use first artist name from first track
+            };
+
+            console.log(`✅ Retrieved album data: "${album.name}" by ${artist.name} (${tracks.length} tracks)`);
+
+            // Create the modal using the same function as normal artist album downloads
+            await openDownloadMissingModalForArtistAlbum(virtualPlaylistId, playlistName, tracks, album, artist);
+
+            // Update the rehydrated process with batch info and hide modal for background rehydration
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                process.status = 'running';
+                process.batchId = batchId;
+                subscribeToDownloadBatch(batchId);
+
+                // Update button states to reflect running status
+                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${virtualPlaylistId}`);
+                if (beginBtn) beginBtn.style.display = 'none';
+                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+                if (wishlistBtn) wishlistBtn.style.display = 'none';
+
+                // Hide the modal - this is background rehydration, not user-requested
+                if (process.modalElement) {
+                    process.modalElement.style.display = 'none';
+                    console.log(`🔍 Hiding rehydrated modal for background processing: ${album.name}`);
+                }
+
+                console.log(`✅ Rehydrated artist album modal: ${artist.name} - ${album.name}`);
+            } else {
+                console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
+            }
+
+        } catch (error) {
+            console.error(`❌ Error fetching album data for rehydration:`, error);
+        }
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating artist album modal:`, error);
+    }
+}
+
+async function rehydrateDiscoverPlaylistModal(virtualPlaylistId, playlistName, batchId) {
+    /**
+     * Rehydrates a discover playlist download modal from backend process data.
+     * Fetches tracks from the appropriate discover API endpoint and recreates the modal.
+     */
+    try {
+        console.log(`💧 Rehydrating discover playlist modal: ${virtualPlaylistId} (${playlistName})`);
+
+        // Handle album downloads from Recent Releases
+        if (virtualPlaylistId.startsWith('discover_album_')) {
+            const albumId = virtualPlaylistId.replace('discover_album_', '');
+            console.log(`💧 Album download - fetching album ${albumId}...`);
+
+            try {
+                const albumResponse = await fetch(`/api/spotify/album/${albumId}`);
+                if (!albumResponse.ok) {
+                    console.error(`❌ Failed to fetch album: ${albumResponse.status}`);
+                    return;
+                }
+
+                const albumData = await albumResponse.json();
+                if (!albumData.tracks || albumData.tracks.length === 0) {
+                    console.error(`❌ No tracks in album`);
+                    return;
+                }
+
+                // Convert tracks to expected format
+                const spotifyTracks = albumData.tracks.map(track => {
+                    let artists = track.artists || [];
+                    if (Array.isArray(artists)) {
+                        artists = artists.map(a => a.name || a);
+                    }
+
+                    return {
+                        id: track.id,
+                        name: track.name,
+                        artists: artists,
+                        album: {
+                            name: albumData.name || playlistName.split(' - ')[0],
+                            images: albumData.images || []
+                        },
+                        duration_ms: track.duration_ms || 0
+                    };
+                });
+
+                console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
+
+                // Create modal
+                await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+                // Update process
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = batchId;
+                    subscribeToDownloadBatch(batchId);
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Hide modal for background rehydration
+                    if (process.modalElement) {
+                        process.modalElement.style.display = 'none';
+                        console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
+                    }
+
+                    console.log(`✅ Rehydrated album modal: ${playlistName}`);
+                }
+                return;
+
+            } catch (error) {
+                console.error(`❌ Error fetching album:`, error);
+                return;
+            }
+        }
+
+        // Determine API endpoint based on playlist ID
+        let apiEndpoint;
+        if (virtualPlaylistId === 'discover_release_radar') {
+            apiEndpoint = '/api/discover/release-radar';
+        } else if (virtualPlaylistId === 'discover_discovery_weekly') {
+            apiEndpoint = '/api/discover/discovery-weekly';
+        } else if (virtualPlaylistId === 'discover_seasonal_playlist') {
+            apiEndpoint = '/api/discover/seasonal-playlist';
+        } else if (virtualPlaylistId === 'discover_popular_picks') {
+            apiEndpoint = '/api/discover/popular-picks';
+        } else if (virtualPlaylistId === 'discover_hidden_gems') {
+            apiEndpoint = '/api/discover/hidden-gems';
+        } else if (virtualPlaylistId === 'discover_discovery_shuffle') {
+            apiEndpoint = '/api/discover/discovery-shuffle';
+        } else if (virtualPlaylistId === 'discover_familiar_favorites') {
+            apiEndpoint = '/api/discover/familiar-favorites';
+        } else if (virtualPlaylistId === 'build_playlist_custom') {
+            apiEndpoint = '/api/discover/build-playlist';
+        } else if (virtualPlaylistId.startsWith('discover_lb_')) {
+            console.log(`💧 ListenBrainz playlist - skipping (no automatic rehydration for ListenBrainz)`);
+            return;
+        } else {
+            console.error(`❌ Unknown discover playlist type: ${virtualPlaylistId}`);
+            return;
+        }
+
+        // Fetch tracks from API
+        console.log(`📡 Fetching tracks from ${apiEndpoint}...`);
+        const response = await fetch(apiEndpoint);
+        if (!response.ok) {
+            console.error(`❌ Failed to fetch discover playlist data: ${response.status}`);
+            return;
+        }
+
+        const data = await response.json();
+        if (!data.success || !data.tracks) {
+            console.error(`❌ Invalid discover playlist data:`, data);
+            return;
+        }
+
+        const tracks = data.tracks;
+        console.log(`✅ Retrieved ${tracks.length} tracks for ${playlistName}`);
+
+        // Transform tracks to format expected by download modal (same as openDownloadModalForDiscoverPlaylist)
+        const spotifyTracks = tracks.map(track => {
+            let spotifyTrack;
+
+            // Use track_data_json if available, otherwise construct from track data
+            if (track.track_data_json) {
+                spotifyTrack = track.track_data_json;
+            } else {
+                // Fallback: construct track object from available data
+                spotifyTrack = {
+                    id: track.spotify_track_id,
+                    name: track.track_name,
+                    artists: [{ name: track.artist_name }],
+                    album: {
+                        name: track.album_name,
+                        images: track.album_cover_url ? [{ url: track.album_cover_url }] : []
+                    },
+                    duration_ms: track.duration_ms || 0
+                };
+            }
+
+            // Normalize artists to array of strings for modal compatibility
+            if (spotifyTrack.artists && Array.isArray(spotifyTrack.artists)) {
+                spotifyTrack.artists = spotifyTrack.artists.map(a => a.name || a);
+            }
+
+            return spotifyTrack;
+        });
+
+        // Create the modal using the same function as normal discover downloads
+        await openDownloadMissingModalForYouTube(virtualPlaylistId, playlistName, spotifyTracks);
+
+        // Update the rehydrated process with batch info and hide modal for background rehydration
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process) {
+            process.status = 'running';
+            process.batchId = batchId;
+            subscribeToDownloadBatch(batchId);
+
+            // Update button states to reflect running status
+            const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+            const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+            if (beginBtn) beginBtn.style.display = 'none';
+            if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+            // Hide the modal - this is background rehydration, not user-requested
+            if (process.modalElement) {
+                process.modalElement.style.display = 'none';
+                console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
+            }
+
+            console.log(`✅ Rehydrated discover playlist modal: ${playlistName}`);
+        } else {
+            console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
+        }
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating discover playlist modal:`, error);
+    }
+}
+
+async function rehydrateEnhancedSearchModal(virtualPlaylistId, playlistName, batchId) {
+    /**
+     * Rehydrates an enhanced search download modal from backend process data.
+     * Fetches item data from searchDownloadBubbles and recreates the modal.
+     */
+    try {
+        console.log(`💧 Rehydrating enhanced search modal: ${virtualPlaylistId} (${playlistName})`);
+
+        // Find the download in searchDownloadBubbles
+        let downloadData = null;
+        for (const artistName in searchDownloadBubbles) {
+            const bubble = searchDownloadBubbles[artistName];
+            const download = bubble.downloads.find(d => d.virtualPlaylistId === virtualPlaylistId);
+            if (download) {
+                downloadData = download;
+                break;
+            }
+        }
+
+        if (!downloadData) {
+            console.warn(`⚠️ No download data found in searchDownloadBubbles for ${virtualPlaylistId}`);
+            return;
+        }
+
+        const { item, type } = downloadData;
+
+        if (type === 'album') {
+            // For albums, fetch tracks (pass name/artist for Hydrabase support)
+            console.log(`💧 Album download - fetching album ${item.id}...`);
+
+            try {
+                const _sap1 = new URLSearchParams({ name: item.name || '', artist: item.artist || '' });
+                const response = await fetch(`/api/spotify/album/${item.id}?${_sap1}`);
+                if (!response.ok) {
+                    console.error(`❌ Failed to fetch album: ${response.status}`);
+                    return;
+                }
+
+                const albumData = await response.json();
+                if (!albumData.tracks || albumData.tracks.length === 0) {
+                    console.error(`❌ No tracks in album`);
+                    return;
+                }
+
+                const spotifyTracks = albumData.tracks.map(track => ({
+                    id: track.id,
+                    name: track.name,
+                    artists: track.artists || [{ name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' }],
+                    album: {
+                        name: item.name,
+                        images: item.image_url ? [{ url: item.image_url }] : []
+                    },
+                    duration_ms: track.duration_ms || 0
+                }));
+
+                console.log(`✅ Retrieved ${spotifyTracks.length} tracks for album`);
+
+                // Create modal
+                await openDownloadMissingModalForArtistAlbum(
+                    virtualPlaylistId,
+                    item.name,
+                    spotifyTracks,
+                    item,
+                    { name: item.artists?.[0]?.name || item.artist || 'Unknown Artist' },
+                    false // Don't show loading overlay
+                );
+
+                // Update process
+                const process = activeDownloadProcesses[virtualPlaylistId];
+                if (process) {
+                    process.status = 'running';
+                    process.batchId = batchId;
+                    subscribeToDownloadBatch(batchId);
+
+                    const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                    const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                    if (beginBtn) beginBtn.style.display = 'none';
+                    if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                    // Hide modal for background rehydration
+                    if (process.modalElement) {
+                        process.modalElement.style.display = 'none';
+                        console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
+                    }
+
+                    // Start polling for live updates
+                    startModalDownloadPolling(virtualPlaylistId);
+
+                    console.log(`✅ Rehydrated enhanced search album modal: ${playlistName}`);
+                } else {
+                    console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
+                }
+
+            } catch (error) {
+                console.error(`❌ Error fetching album:`, error);
+            }
+
+        } else {
+            // For tracks, create enriched track and open modal
+            console.log(`💧 Track download - creating modal for ${item.name}...`);
+
+            const enrichedTrack = {
+                id: item.id,
+                name: item.name,
+                artists: item.artists || [{ name: item.artist || 'Unknown Artist' }],
+                album: item.album || {
+                    name: item.album?.name || 'Unknown Album',
+                    images: item.image_url ? [{ url: item.image_url }] : []
+                },
+                duration_ms: item.duration_ms || 0
+            };
+
+            // Create modal
+            await openDownloadMissingModalForYouTube(
+                virtualPlaylistId,
+                `${enrichedTrack.name} - ${enrichedTrack.artists[0].name || enrichedTrack.artists[0]}`,
+                [enrichedTrack]
+            );
+
+            // Update process
+            const process = activeDownloadProcesses[virtualPlaylistId];
+            if (process) {
+                process.status = 'running';
+                process.batchId = batchId;
+                subscribeToDownloadBatch(batchId);
+
+                const beginBtn = document.getElementById(`begin-analysis-btn-${virtualPlaylistId}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${virtualPlaylistId}`);
+                if (beginBtn) beginBtn.style.display = 'none';
+                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                // Hide modal for background rehydration
+                if (process.modalElement) {
+                    process.modalElement.style.display = 'none';
+                    console.log(`🔍 Hiding rehydrated modal for background processing: ${playlistName}`);
+                }
+
+                // Start polling for live updates
+                startModalDownloadPolling(virtualPlaylistId);
+
+                console.log(`✅ Rehydrated enhanced search track modal: ${playlistName}`);
+            } else {
+                console.error(`❌ Failed to find rehydrated process for ${virtualPlaylistId}`);
+            }
+        }
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating enhanced search modal:`, error);
+    }
+}
+
+async function rehydrateModal(processInfo, userRequested = false) {
+    const { playlist_id, playlist_name, batch_id, current_cycle } = processInfo;
+    console.log(`💧 Rehydrating modal for "${playlist_name}" (batch: ${batch_id}) - User requested: ${userRequested}`);
+
+    // Handle YouTube virtual playlists - skip rehydration here, handled by YouTube system
+    if (playlist_id.startsWith('youtube_')) {
+        console.log(`⏭️ Skipping YouTube virtual playlist rehydration - handled by YouTube system`);
+        return;
+    }
+
+    // Handle Beatport virtual playlists - skip rehydration here, handled by Beatport system
+    if (playlist_id.startsWith('beatport_')) {
+        console.log(`⏭️ Skipping Beatport virtual playlist rehydration - handled by Beatport system`);
+        return;
+    }
+
+    // Handle artist album virtual playlists
+    if (playlist_id.startsWith('artist_album_')) {
+        console.log(`💧 Rehydrating artist album virtual playlist: ${playlist_id}`);
+        await rehydrateArtistAlbumModal(playlist_id, playlist_name, batch_id);
+        return;
+    }
+
+    // Handle discover virtual playlists (Fresh Tape, The Archives)
+    if (playlist_id.startsWith('discover_')) {
+        console.log(`💧 Rehydrating discover playlist: ${playlist_id}`);
+        await rehydrateDiscoverPlaylistModal(playlist_id, playlist_name, batch_id);
+        return;
+    }
+
+    // Handle enhanced search virtual playlists (albums and tracks)
+    if (playlist_id.startsWith('enhanced_search_album_') || playlist_id.startsWith('enhanced_search_track_')) {
+        console.log(`💧 Rehydrating enhanced search virtual playlist: ${playlist_id}`);
+        await rehydrateEnhancedSearchModal(playlist_id, playlist_name, batch_id);
+        return;
+    }
+
+    // Handle wishlist processes specially
+    if (playlist_id === "wishlist") {
+        console.log(`💧 [Rehydrate] Handling wishlist modal for active process: ${batch_id}`);
+
+        // Check if modal already exists and is visible
+        const existingProcess = activeDownloadProcesses[playlist_id];
+        const modalAlreadyOpen = existingProcess && existingProcess.modalElement &&
+            existingProcess.modalElement.style.display === 'flex';
+
+        if (modalAlreadyOpen) {
+            console.log(`💧 [Rehydrate] Wishlist modal already open - updating existing modal with auto-process state`);
+
+            // Update existing process with new batch info
+            existingProcess.status = 'running';
+            existingProcess.batchId = batch_id;
+
+            // Update UI to reflect running state
+            const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
+            const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
+            if (beginBtn) beginBtn.style.display = 'none';
+            if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+            // Ensure polling is active for live updates
+            if (!existingProcess.intervalId) {
+                console.log(`💧 [Rehydrate] Starting polling for existing modal`);
+                startModalDownloadPolling(playlist_id);
+            }
+
+            console.log(`✅ [Rehydrate] Successfully updated existing wishlist modal for auto-process`);
+        } else {
+            // Only create modal if user requested it - don't create for background auto-processing
+            if (userRequested) {
+                console.log(`💧 [Rehydrate] User requested - creating wishlist modal for active process: ${batch_id}`);
+
+                // Create the modal with current server state (pass category filter for auto-processing)
+                await openDownloadMissingWishlistModal(current_cycle);
+                const process = activeDownloadProcesses[playlist_id];
+                if (!process) {
+                    console.error('❌ [Rehydrate] Failed to create wishlist process in activeDownloadProcesses');
+                    return;
+                }
+
+                // Sync process state with server
+                console.log(`✅ [Rehydrate] Syncing wishlist process state - batchId: ${batch_id}, status: running`);
+                process.status = 'running';
+                process.batchId = batch_id;
+
+                // Update UI to reflect running state
+                const beginBtn = document.getElementById(`begin-analysis-btn-${playlist_id}`);
+                const cancelBtn = document.getElementById(`cancel-all-btn-${playlist_id}`);
+                if (beginBtn) beginBtn.style.display = 'none';
+                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                // Start polling for live updates
+                startModalDownloadPolling(playlist_id);
+
+                // Show modal
+                console.log('👤 [Rehydrate] User requested - showing wishlist modal');
+                process.modalElement.style.display = 'flex';
+                WishlistModalState.setVisible();
+                WishlistModalState.clearUserClosed();
+            } else {
+                console.log('🔄 [Rehydrate] Background auto-processing detected - NOT creating modal (user must click wishlist button to see progress)');
+                // Don't create modal for background auto-processing
+                // User must click the wishlist button to see the modal
+            }
+        }
+        return;
+    }
+
+    // Handle Deezer ARL playlist processes — ensure playlist data is in spotifyPlaylists for modal reuse
+    if (playlist_id.startsWith('deezer_arl_') && !spotifyPlaylists.find(p => p.id === playlist_id)) {
+        const rawId = playlist_id.replace('deezer_arl_', '');
+        const deezerPlaylist = deezerArlPlaylists.find(p => String(p.id) === rawId);
+        if (deezerPlaylist) {
+            spotifyPlaylists.push({
+                id: playlist_id,
+                name: deezerPlaylist.name,
+                track_count: deezerPlaylist.track_count || 0,
+                image_url: deezerPlaylist.image_url || '',
+                owner: deezerPlaylist.owner || '',
+            });
+        } else {
+            // Playlists not loaded yet — use process info as fallback
+            spotifyPlaylists.push({
+                id: playlist_id,
+                name: playlist_name || 'Deezer Playlist',
+                track_count: 0,
+            });
+        }
+    }
+
+    // Handle regular Spotify / Deezer ARL playlist processes
+    let playlistData = spotifyPlaylists.find(p => p.id === playlist_id);
+    if (!playlistData) {
+        console.warn(`Cannot rehydrate modal: Playlist data for ${playlist_id} not loaded.`);
+        return;
+    }
+    await openDownloadMissingModal(playlist_id);
+    const process = activeDownloadProcesses[playlist_id];
+    if (!process) return;
+
+    process.status = 'running';
+    process.batchId = batch_id;
+    updatePlaylistCardUI(playlist_id);
+    updateRefreshButtonState();
+
+    document.getElementById(`begin-analysis-btn-${playlist_id}`).style.display = 'none';
+    document.getElementById(`cancel-all-btn-${playlist_id}`).style.display = 'inline-block';
+
+    // Hide wishlist button if it exists
+    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlist_id}`);
+    if (wishlistBtn) wishlistBtn.style.display = 'none';
+
+    startModalDownloadPolling(playlist_id);
+
+    process.modalElement.style.display = 'none';
+}
+
+// ===================================================================
+// YOUTUBE PLAYLIST BACKEND HYDRATION FUNCTIONS
+// ===================================================================
+
+async function loadYouTubePlaylistsFromBackend() {
+    // Load all stored YouTube playlists from backend and recreate cards (similar to Spotify hydration)
+    try {
+        console.log('📋 Loading YouTube playlists from backend...');
+
+        const response = await fetch('/api/youtube/playlists');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch YouTube playlists');
+        }
+
+        const data = await response.json();
+        const playlists = data.playlists || [];
+
+        console.log(`🎬 Found ${playlists.length} stored YouTube playlists in backend`);
+
+        if (playlists.length === 0) {
+            console.log('📋 No YouTube playlists to hydrate');
+            return;
+        }
+
+        const container = document.getElementById('youtube-playlist-container');
+
+        // Create cards for playlists that don't already exist (avoid duplicates)
+        for (const playlistInfo of playlists) {
+            const urlHash = playlistInfo.url_hash;
+
+            // Check if card already exists (from rehydration or previous loading)
+            if (youtubePlaylistStates[urlHash] && youtubePlaylistStates[urlHash].cardElement &&
+                document.body.contains(youtubePlaylistStates[urlHash].cardElement)) {
+                console.log(`⏭️ Skipping existing YouTube playlist card: ${playlistInfo.playlist.name}`);
+
+                // Update existing state with backend data
+                const state = youtubePlaylistStates[urlHash];
+                state.phase = playlistInfo.phase;
+                state.discoveryProgress = playlistInfo.discovery_progress;
+                state.spotifyMatches = playlistInfo.spotify_matches;
+                state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
+
+                // Fetch discovery results for existing cards too if they don't have them
+                if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering' &&
+                    (!state.discoveryResults || state.discoveryResults.length === 0)) {
+                    try {
+                        console.log(`🔍 Fetching missing discovery results for existing card: ${playlistInfo.playlist.name}`);
+                        const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
+                        if (stateResponse.ok) {
+                            const fullState = await stateResponse.json();
+                            if (fullState.discovery_results) {
+                                state.discoveryResults = fullState.discovery_results;
+                                state.syncPlaylistId = fullState.sync_playlist_id;
+                                state.syncProgress = fullState.sync_progress || {};
+                                console.log(`✅ Restored ${state.discoveryResults.length} discovery results for existing card`);
+                            }
+                        }
+                    } catch (error) {
+                        console.warn(`⚠️ Error fetching discovery results for existing card:`, error.message);
+                    }
+                }
+
+                continue;
+            }
+
+            console.log(`🎬 Creating YouTube playlist card: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase})`);
+            createYouTubeCardFromBackendState(playlistInfo);
+
+            // Fetch discovery results for non-fresh playlists (same logic as rehydrateYouTubePlaylist)
+            if (playlistInfo.phase !== 'fresh' && playlistInfo.phase !== 'discovering') {
+                try {
+                    console.log(`🔍 Fetching discovery results for: ${playlistInfo.playlist.name}`);
+                    const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
+                    if (stateResponse.ok) {
+                        const fullState = await stateResponse.json();
+                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
+
+                        // Store discovery results in local state
+                        const state = youtubePlaylistStates[urlHash];
+                        if (fullState.discovery_results && state) {
+                            state.discoveryResults = fullState.discovery_results;
+                            state.syncPlaylistId = fullState.sync_playlist_id;
+                            state.syncProgress = fullState.sync_progress || {};
+                            console.log(`✅ Restored ${state.discoveryResults.length} discovery results for: ${playlistInfo.playlist.name}`);
+                        }
+                    } else {
+                        console.warn(`⚠️ Could not fetch discovery results for: ${playlistInfo.playlist.name}`);
+                    }
+                } catch (error) {
+                    console.warn(`⚠️ Error fetching discovery results for ${playlistInfo.playlist.name}:`, error.message);
+                }
+            }
+        }
+
+        // Rehydrate download modals for YouTube playlists in downloading/download_complete phases
+        for (const playlistInfo of playlists) {
+            if ((playlistInfo.phase === 'downloading' || playlistInfo.phase === 'download_complete') &&
+                playlistInfo.converted_spotify_playlist_id && playlistInfo.download_process_id) {
+
+                const convertedPlaylistId = playlistInfo.converted_spotify_playlist_id;
+
+                if (!activeDownloadProcesses[convertedPlaylistId]) {
+                    console.log(`💧 Rehydrating download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
+                    try {
+                        // Create the download modal using the YouTube-specific function
+                        const spotifyTracks = youtubePlaylistStates[playlistInfo.url_hash]?.discoveryResults
+                            ?.filter(result => result.spotify_data)
+                            ?.map(result => result.spotify_data) || [];
+
+                        if (spotifyTracks.length > 0) {
+                            await openDownloadMissingModalForYouTube(
+                                convertedPlaylistId,
+                                playlistInfo.playlist.name,
+                                spotifyTracks
+                            );
+
+                            // Set the modal to running state with the correct batch ID
+                            const process = activeDownloadProcesses[convertedPlaylistId];
+                            if (process) {
+                                process.status = 'running';
+                                process.batchId = playlistInfo.download_process_id;
+
+                                // Update UI to running state
+                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                                if (beginBtn) beginBtn.style.display = 'none';
+                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                                // Start polling for this process
+                                startModalDownloadPolling(convertedPlaylistId);
+
+                                // Hide modal since this is background rehydration
+                                process.modalElement.style.display = 'none';
+                                console.log(`✅ Rehydrated download modal for YouTube playlist: ${playlistInfo.playlist.name}`);
+                            }
+                        } else {
+                            console.warn(`⚠️ No Spotify tracks found for YouTube download modal: ${playlistInfo.playlist.name}`);
+                        }
+                    } catch (error) {
+                        console.error(`❌ Error rehydrating download modal for ${playlistInfo.playlist.name}:`, error);
+                    }
+                }
+            }
+        }
+
+        console.log(`✅ Successfully hydrated ${playlists.length} YouTube playlists from backend`);
+
+    } catch (error) {
+        console.error('❌ Error loading YouTube playlists from backend:', error);
+        showToast(`Error loading YouTube playlists: ${error.message}`, 'error');
+    }
+}
+
+async function loadBeatportChartsFromBackend() {
+    // Load all stored Beatport charts from backend and recreate cards (similar to YouTube hydration)
+    try {
+        console.log('📋 Loading Beatport charts from backend...');
+
+        const signal = getBeatportContentSignal();
+        const response = await fetch('/api/beatport/charts', signal ? { signal } : undefined);
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch Beatport charts');
+        }
+
+        const charts = await response.json();
+
+        console.log(`🎧 Found ${charts.length} stored Beatport charts in backend`);
+
+        if (charts.length === 0) {
+            console.log('📋 No Beatport charts to hydrate');
+            return;
+        }
+
+        const container = document.getElementById('beatport-playlist-container');
+
+        // Create cards for charts that don't already exist (avoid duplicates)
+        for (const chartInfo of charts) {
+            const chartHash = chartInfo.hash;
+
+            // Check if card already exists (from previous loading)
+            if (beatportChartStates[chartHash] && beatportChartStates[chartHash].cardElement &&
+                document.body.contains(beatportChartStates[chartHash].cardElement)) {
+                console.log(`⏭️ Skipping existing Beatport chart card: ${chartInfo.name}`);
+
+                // Update existing state with backend data
+                const state = beatportChartStates[chartHash];
+                state.phase = chartInfo.phase;
+
+                continue;
+            }
+
+            console.log(`🎧 Creating Beatport chart card: ${chartInfo.name} (Phase: ${chartInfo.phase})`);
+            createBeatportCardFromBackendState(chartInfo);
+
+            // Fetch full state for non-fresh charts to restore discovery results
+            if (chartInfo.phase !== 'fresh') {
+                try {
+                    console.log(`🔍 Fetching full state for: ${chartInfo.name}`);
+                    const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
+                    if (stateResponse.ok) {
+                        const fullState = await stateResponse.json();
+                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
+
+                        // Store in YouTube state system (since Beatport reuses it)
+                        if (fullState.discovery_results && fullState.discovery_results.length > 0) {
+                            // Transform backend results to frontend format (like Tidal does)
+                            const transformedResults = fullState.discovery_results.map((result, index) => ({
+                                index: result.index !== undefined ? result.index : index,
+                                yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
+                                yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
+                                status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                                status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
+                                spotify_track: result.spotify_data ? result.spotify_data.name : '-',
+                                spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                                    result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
+                                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
+                            }));
+
+                            // Create Beatport state in YouTube system for modal functionality
+                            youtubePlaylistStates[chartHash] = {
+                                phase: fullState.phase,
+                                playlist: {
+                                    name: chartInfo.name,
+                                    tracks: chartInfo.chart_data.tracks,
+                                    description: `${chartInfo.track_count} tracks from ${chartInfo.name}`,
+                                    source: 'beatport'
+                                },
+                                is_beatport_playlist: true,
+                                beatport_chart_type: chartInfo.chart_data.chart_type,
+                                beatport_chart_hash: chartHash,
+                                discovery_progress: fullState.discovery_progress,
+                                discoveryProgress: fullState.discovery_progress,
+                                spotify_matches: fullState.spotify_matches,
+                                spotifyMatches: fullState.spotify_matches,
+                                discovery_results: fullState.discovery_results,
+                                discoveryResults: transformedResults,
+                                convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
+                                download_process_id: fullState.download_process_id,
+                                syncPlaylistId: fullState.sync_playlist_id,
+                                syncProgress: fullState.sync_progress || {}
+                            };
+
+                            console.log(`✅ Restored ${transformedResults.length} discovery results for: ${chartInfo.name}`);
+                        }
+                    } else {
+                        console.warn(`⚠️ Could not fetch full state for: ${chartInfo.name}`);
+                    }
+                } catch (error) {
+                    if (error && error.name === 'AbortError') throw error;
+                    console.warn(`⚠️ Error fetching full state for ${chartInfo.name}:`, error.message);
+                }
+            }
+        }
+
+        // Rehydrate download modals for Beatport charts in downloading/download_complete phases
+        for (const chartInfo of charts) {
+            if ((chartInfo.phase === 'downloading' || chartInfo.phase === 'download_complete') &&
+                chartInfo.converted_spotify_playlist_id && chartInfo.download_process_id) {
+
+                const convertedPlaylistId = chartInfo.converted_spotify_playlist_id;
+                console.log(`📥 Rehydrating download modal for Beatport chart: ${chartInfo.name} (Playlist: ${convertedPlaylistId})`);
+
+                // Set up active download process for Beatport chart (like YouTube/Tidal)
+                try {
+                    // Rehydrate the chart state first to get discovery results
+                    await rehydrateBeatportChart(chartInfo, false);
+
+                    // Create the download modal using the Beatport-specific function (like YouTube)
+                    if (!activeDownloadProcesses[convertedPlaylistId]) {
+                        // Get tracks from the rehydrated state
+                        const ytState = youtubePlaylistStates[chartInfo.hash];
+                        let spotifyTracks = [];
+
+                        if (ytState && ytState.discovery_results) {
+                            spotifyTracks = ytState.discovery_results
+                                .filter(result => result.spotify_data)
+                                .map(result => {
+                                    const track = result.spotify_data;
+                                    // Ensure artists is an array of strings
+                                    if (track.artists && Array.isArray(track.artists)) {
+                                        track.artists = track.artists.map(artist =>
+                                            typeof artist === 'string' ? artist : (artist.name || artist)
+                                        );
+                                    } else if (track.artists && typeof track.artists === 'string') {
+                                        track.artists = [track.artists];
+                                    } else {
+                                        track.artists = ['Unknown Artist'];
+                                    }
+                                    return {
+                                        id: track.id,
+                                        name: track.name,
+                                        artists: track.artists,
+                                        album: track.album || 'Unknown Album',
+                                        duration_ms: track.duration_ms || 0,
+                                        external_urls: track.external_urls || {}
+                                    };
+                                });
+                        }
+
+                        if (spotifyTracks.length > 0) {
+                            await openDownloadMissingModalForYouTube(
+                                convertedPlaylistId,
+                                chartInfo.name,
+                                spotifyTracks
+                            );
+
+                            // Set the modal to running state with the correct batch ID
+                            const process = activeDownloadProcesses[convertedPlaylistId];
+                            if (process) {
+                                process.status = chartInfo.phase === 'download_complete' ? 'complete' : 'running';
+                                process.batchId = chartInfo.download_process_id;
+
+                                // Update UI to running state
+                                const beginBtn = document.getElementById(`begin-analysis-btn-${convertedPlaylistId}`);
+                                const cancelBtn = document.getElementById(`cancel-all-btn-${convertedPlaylistId}`);
+                                if (beginBtn) beginBtn.style.display = 'none';
+                                if (cancelBtn) cancelBtn.style.display = 'inline-block';
+
+                                // Start polling for this process
+                                startModalDownloadPolling(convertedPlaylistId);
+
+                                // Hide modal since this is background rehydration
+                                process.modalElement.style.display = 'none';
+                                console.log(`✅ Rehydrated download modal for Beatport chart: ${chartInfo.name}`);
+                            }
+                        } else {
+                            console.warn(`⚠️ No Spotify tracks found for Beatport download modal: ${chartInfo.name}`);
+                        }
+                    }
+                } catch (error) {
+                    if (error && error.name === 'AbortError') throw error;
+                    console.warn(`⚠️ Error setting up download process for Beatport chart "${chartInfo.name}":`, error.message);
+                }
+            }
+        }
+
+        throwIfBeatportLoadAborted();
+        console.log(`✅ Successfully loaded and rehydrated ${charts.length} Beatport charts`);
+
+        // Start polling for any charts that are still in discovering phase
+        for (const chartInfo of charts) {
+            if (chartInfo.phase === 'discovering') {
+                console.log(`🔄 [Backend Loading] Auto-starting polling for discovering chart: ${chartInfo.name}`);
+                throwIfBeatportLoadAborted();
+                startBeatportDiscoveryPolling(chartInfo.hash);
+            }
+        }
+
+        // Update clear button state after loading charts
+        updateBeatportClearButtonState();
+
+    } catch (error) {
+        if (error && error.name === 'AbortError') {
+            console.log('⏹ Beatport chart hydration aborted');
+            return;
+        }
+        console.error('❌ Error loading Beatport charts from backend:', error);
+        showToast(`Error loading Beatport charts: ${error.message}`, 'error');
+    }
+}
+
+async function loadListenBrainzPlaylistsFromBackend() {
+    // Load all stored ListenBrainz playlist states from backend for persistence (similar to Beatport hydration)
+    try {
+        console.log('📋 Loading ListenBrainz playlists from backend...');
+
+        const response = await fetch('/api/listenbrainz/playlists');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch ListenBrainz playlists');
+        }
+
+        const data = await response.json();
+        const playlists = data.playlists || [];
+
+        console.log(`🎵 Found ${playlists.length} stored ListenBrainz playlists in backend`);
+
+        if (playlists.length === 0) {
+            console.log('📋 No ListenBrainz playlists to hydrate');
+            listenbrainzPlaylistsLoaded = true;
+            return;
+        }
+
+        // Restore state for each playlist
+        for (const playlistInfo of playlists) {
+            const playlistMbid = playlistInfo.playlist_mbid;
+
+            console.log(`🎵 Hydrating ListenBrainz playlist: ${playlistInfo.playlist.name} (Phase: ${playlistInfo.phase}, MBID: ${playlistMbid})`);
+
+            // Fetch full state for non-fresh playlists to restore discovery results
+            if (playlistInfo.phase !== 'fresh') {
+                try {
+                    console.log(`🔍 Fetching full state for: ${playlistInfo.playlist.name}`);
+                    const stateResponse = await fetch(`/api/listenbrainz/state/${playlistMbid}`);
+                    if (stateResponse.ok) {
+                        const fullState = await stateResponse.json();
+                        console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
+
+                        // Transform backend results to frontend format (like Beatport does)
+                        const transformedResults = (fullState.discovery_results || []).map((result, index) => ({
+                            index: result.index !== undefined ? result.index : index,
+                            yt_track: result.lb_track || result.track_name || 'Unknown',
+                            yt_artist: result.lb_artist || result.artist_name || 'Unknown',
+                            status: result.status === 'found' || result.status === '✅ Found' || result.status_class === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                            status_class: result.status_class || (result.status === 'found' || result.status === '✅ Found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
+                            spotify_track: result.spotify_data ? result.spotify_data.name : (result.spotify_track || '-'),
+                            spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                                (Array.isArray(result.spotify_data.artists) ? (typeof result.spotify_data.artists[0] === 'object' ? result.spotify_data.artists[0].name : result.spotify_data.artists[0]) : result.spotify_data.artists) : (result.spotify_artist || '-'),
+                            spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : (result.spotify_album || '-'),
+                            spotify_data: result.spotify_data,
+                            duration: result.duration || '0:00'
+                        }));
+
+                        // Create ListenBrainz state with both naming conventions
+                        listenbrainzPlaylistStates[playlistMbid] = {
+                            phase: fullState.phase,
+                            playlist: fullState.playlist,
+                            is_listenbrainz_playlist: true,
+                            playlist_mbid: playlistMbid,
+                            // Store with both naming conventions
+                            discovery_results: fullState.discovery_results || [],
+                            discoveryResults: transformedResults,
+                            discovery_progress: fullState.discovery_progress || 0,
+                            discoveryProgress: fullState.discovery_progress || 0,
+                            spotify_matches: fullState.spotify_matches || 0,
+                            spotifyMatches: fullState.spotify_matches || 0,
+                            spotify_total: fullState.spotify_total || 0,
+                            spotifyTotal: fullState.spotify_total || 0,
+                            convertedSpotifyPlaylistId: fullState.converted_spotify_playlist_id,
+                            download_process_id: fullState.download_process_id
+                        };
+
+                        console.log(`✅ Restored ${transformedResults.length} discovery results for: ${playlistInfo.playlist.name}`);
+                    } else {
+                        console.warn(`⚠️ Could not fetch full state for: ${playlistInfo.playlist.name}`);
+                    }
+                } catch (error) {
+                    console.warn(`⚠️ Error fetching full state for ${playlistInfo.playlist.name}:`, error.message);
+                }
+            }
+        }
+
+        // Start polling for any playlists that are still in discovering phase
+        for (const playlistInfo of playlists) {
+            if (playlistInfo.phase === 'discovering') {
+                console.log(`🔄 [Backend Loading] Auto-starting polling for discovering playlist: ${playlistInfo.playlist.name}`);
+                startListenBrainzDiscoveryPolling(playlistInfo.playlist_mbid);
+            }
+            // Show sync button for discovered playlists (hidden by default)
+            else if (playlistInfo.phase === 'discovered' || playlistInfo.phase === 'syncing' || playlistInfo.phase === 'sync_complete') {
+                const playlistId = `discover-lb-playlist-${playlistInfo.playlist_mbid}`;
+                const syncBtn = document.getElementById(`${playlistId}-sync-btn`);
+                if (syncBtn) {
+                    syncBtn.style.display = 'inline-block';
+                    console.log(`✅ Showing sync button for discovered playlist: ${playlistInfo.playlist.name}`);
+                }
+            }
+        }
+
+        listenbrainzPlaylistsLoaded = true;
+        console.log(`✅ Successfully loaded and rehydrated ${playlists.length} ListenBrainz playlists`);
+
+    } catch (error) {
+        console.error('❌ Error loading ListenBrainz playlists from backend:', error);
+        listenbrainzPlaylistsLoaded = true;  // Mark as loaded even on error to prevent retries
+    }
+}
+
+function createBeatportCardFromBackendState(chartInfo) {
+    // Create Beatport chart card from backend state data
+    const chartHash = chartInfo.hash;
+    const chartData = chartInfo.chart_data;
+    const phase = chartInfo.phase;
+
+    const container = document.getElementById('beatport-playlist-container');
+
+    // Remove placeholder if it exists
+    const placeholder = container.querySelector('.playlist-placeholder');
+    if (placeholder) {
+        placeholder.remove();
+    }
+
+    // Create card HTML using same structure as createBeatportCard
+    const cardHtml = `
+        <div class="youtube-playlist-card" id="beatport-card-${chartHash}">
+            <div class="playlist-card-icon">🎧</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(chartInfo.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">${chartInfo.track_count} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${getPhaseColor(phase)};">${getPhaseText(phase)}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                ♪ ${chartInfo.spotify_total} / ✓ ${chartInfo.spotify_matches} / ✗ ${chartInfo.spotify_total - chartInfo.spotify_matches} (${Math.round((chartInfo.spotify_matches / chartInfo.spotify_total) * 100) || 0}%)
+            </div>
+            <button class="playlist-card-action-btn">${getActionButtonText(phase)}</button>
+        </div>
+    `;
+
+    container.insertAdjacentHTML('beforeend', cardHtml);
+
+    // Initialize state
+    beatportChartStates[chartHash] = {
+        phase: phase,
+        chart: chartData,
+        cardElement: document.getElementById(`beatport-card-${chartHash}`)
+    };
+
+    // Add click handler
+    const card = document.getElementById(`beatport-card-${chartHash}`);
+    if (card) {
+        card.addEventListener('click', async () => await handleBeatportCardClick(chartHash));
+    }
+
+    console.log(`🃏 Created Beatport card from backend state: ${chartInfo.name} (${phase})`);
+}
+
+async function rehydrateBeatportChart(chartInfo, userRequested = false) {
+    // Rehydrate Beatport chart state and optionally open modal (similar to rehydrateYouTubePlaylist)
+    const chartHash = chartInfo.hash;
+    const chartName = chartInfo.name;
+
+    try {
+        console.log(`🔄 [Rehydration] Starting rehydration for Beatport chart: ${chartName}`);
+
+        // Get full state from backend including discovery results
+        let fullState;
+        try {
+            const signal = getBeatportContentSignal();
+            const stateResponse = await fetch(`/api/beatport/charts/status/${chartHash}`, signal ? { signal } : undefined);
+            if (stateResponse.ok) {
+                fullState = await stateResponse.json();
+                console.log(`📋 [Rehydration] Retrieved full backend state with ${fullState.discovery_results?.length || 0} discovery results`);
+            } else {
+                console.warn(`⚠️ [Rehydration] Could not fetch full state, using basic info`);
+            }
+        } catch (error) {
+            if (error && error.name === 'AbortError') return;
+            console.warn(`⚠️ [Rehydration] Error fetching full state:`, error.message);
+        }
+
+        const phase = chartInfo.phase;
+
+        // Create or update Beatport chart state
+        if (!beatportChartStates[chartHash]) {
+            beatportChartStates[chartHash] = {
+                phase: 'fresh',
+                chart: chartInfo.chart_data,
+                cardElement: null
+            };
+        }
+
+        const state = beatportChartStates[chartHash];
+        state.phase = phase;
+
+        // Transform discovery results if available (like Tidal does)
+        let transformedResults = [];
+        if (fullState && fullState.discovery_results) {
+            transformedResults = fullState.discovery_results.map((result, index) => ({
+                index: result.index !== undefined ? result.index : index,
+                yt_track: result.beatport_track ? result.beatport_track.title : 'Unknown',
+                yt_artist: result.beatport_track ? result.beatport_track.artist : 'Unknown',
+                status: result.status === 'found' ? '✅ Found' : (result.status === 'error' ? '❌ Error' : '❌ Not Found'),
+                status_class: result.status_class || (result.status === 'found' ? 'found' : (result.status === 'error' ? 'error' : 'not-found')),
+                spotify_track: result.spotify_data ? result.spotify_data.name : '-',
+                spotify_artist: result.spotify_data && result.spotify_data.artists ?
+                    result.spotify_data.artists.map(a => a.name || a).join(', ') : '-',
+                spotify_album: result.spotify_data ? (typeof result.spotify_data.album === 'object' ? result.spotify_data.album.name : result.spotify_data.album) : '-'
+            }));
+        }
+
+        // Store in YouTube state system (since Beatport reuses it)
+        youtubePlaylistStates[chartHash] = {
+            phase: phase,
+            playlist: {
+                name: chartName,
+                tracks: chartInfo.chart_data.tracks,
+                description: `${chartInfo.track_count} tracks from ${chartName}`,
+                source: 'beatport'
+            },
+            is_beatport_playlist: true,
+            beatport_chart_type: chartInfo.chart_data.chart_type,
+            beatport_chart_hash: chartHash,
+            discovery_progress: fullState?.discovery_progress || chartInfo.discovery_progress,
+            discoveryProgress: fullState?.discovery_progress || chartInfo.discovery_progress,
+            spotify_matches: fullState?.spotify_matches || chartInfo.spotify_matches,
+            spotifyMatches: fullState?.spotify_matches || chartInfo.spotify_matches,
+            discovery_results: fullState?.discovery_results || [],
+            discoveryResults: transformedResults,
+            convertedSpotifyPlaylistId: fullState?.converted_spotify_playlist_id || chartInfo.converted_spotify_playlist_id,
+            download_process_id: fullState?.download_process_id || chartInfo.download_process_id,
+            syncPlaylistId: fullState?.sync_playlist_id,
+            syncProgress: fullState?.sync_progress || {}
+        };
+
+        // Restore discovery results if we have them
+        if (fullState && fullState.discovery_results) {
+            console.log(`✅ Restored ${fullState.discovery_results.length} discovery results from backend`);
+
+            // Update modal if it already exists
+            const existingModal = document.getElementById(`youtube-discovery-modal-${chartHash}`);
+            if (existingModal && !existingModal.classList.contains('hidden')) {
+                console.log(`🔄 Refreshing existing modal with restored discovery results`);
+                refreshYouTubeDiscoveryModalTable(chartHash);
+            }
+        }
+
+        // Update card display
+        updateBeatportCardPhase(chartHash, phase);
+        updateBeatportCardProgress(chartHash, {
+            spotify_total: chartInfo.spotify_total,
+            spotify_matches: chartInfo.spotify_matches,
+            failed: chartInfo.spotify_total - chartInfo.spotify_matches
+        });
+
+        // Handle active polling resumption
+        if (phase === 'discovering') {
+            console.log(`🔍 Resuming discovery polling for: ${chartName}`);
+            startBeatportDiscoveryPolling(chartHash);
+        } else if (phase === 'syncing') {
+            console.log(`🔄 Resuming sync polling for: ${chartName}`);
+            startBeatportSyncPolling(chartHash);
+        }
+
+        // Open modal if user requested
+        if (userRequested) {
+            switch (phase) {
+                case 'discovering':
+                case 'discovered':
+                case 'syncing':
+                case 'sync_complete':
+                    openYouTubeDiscoveryModal(chartHash);
+                    break;
+                case 'downloading':
+                case 'download_complete':
+                    // Open download modal if we have the converted playlist ID
+                    if (chartInfo.converted_spotify_playlist_id) {
+                        await openDownloadMissingModal(chartInfo.converted_spotify_playlist_id);
+                    }
+                    break;
+            }
+        }
+
+        console.log(`✅ Successfully rehydrated Beatport chart: ${chartName}`);
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating Beatport chart "${chartName}":`, error);
+    }
+}
+
+function createYouTubeCardFromBackendState(playlistInfo) {
+    // Create YouTube playlist card from backend state data
+    const urlHash = playlistInfo.url_hash;
+    const playlist = playlistInfo.playlist;
+    const phase = playlistInfo.phase;
+
+    const container = document.getElementById('youtube-playlist-container');
+
+    // Remove placeholder if it exists
+    const placeholder = container.querySelector('.youtube-playlist-placeholder');
+    if (placeholder) {
+        placeholder.remove();
+    }
+
+    // Create card HTML (using EXACT same structure as createYouTubeCard)
+    const cardHtml = `
+        <div class="youtube-playlist-card" id="youtube-card-${urlHash}" data-url="${playlistInfo.url}" onclick="handleYouTubeCardClick('${urlHash}')">
+            <div class="playlist-card-icon youtube-icon">▶</div>
+            <div class="playlist-card-content">
+                <div class="playlist-card-name">${escapeHtml(playlist.name)}</div>
+                <div class="playlist-card-info">
+                    <span class="playlist-card-track-count">${playlist.tracks.length} tracks</span>
+                    <span class="playlist-card-phase-text" style="color: ${getPhaseColor(phase)};">${getPhaseText(phase)}</span>
+                </div>
+            </div>
+            <div class="playlist-card-progress ${phase === 'fresh' ? 'hidden' : ''}">
+                ♪ ${playlistInfo.spotify_total} / ✓ ${playlistInfo.spotify_matches} / ✗ ${playlistInfo.spotify_total - playlistInfo.spotify_matches} / ${Math.round(getProgressWidth(playlistInfo))}%
+            </div>
+            <button class="playlist-card-action-btn">${getActionButtonText(phase)}</button>
+        </div>
+    `;
+
+    container.insertAdjacentHTML('beforeend', cardHtml);
+
+    // Store state for UI management (but backend remains source of truth)
+    youtubePlaylistStates[urlHash] = {
+        phase: phase,
+        url: playlistInfo.url,
+        playlist: playlist,
+        cardElement: document.getElementById(`youtube-card-${urlHash}`),
+        discoveryResults: [],
+        discoveryProgress: playlistInfo.discovery_progress,
+        spotifyMatches: playlistInfo.spotify_matches,
+        convertedSpotifyPlaylistId: playlistInfo.converted_spotify_playlist_id,
+        backendSynced: true  // Flag to indicate this came from backend
+    };
+
+    console.log(`🃏 Created YouTube card from backend state: ${playlist.name} (${phase})`);
+}
+
+function getActionButtonText(phase) {
+    switch (phase) {
+        case 'fresh': return 'Discover';
+        case 'discovering': return 'View Progress';
+        case 'discovered': return 'View Results';
+        case 'syncing': return 'View Sync';
+        case 'sync_complete': return 'Download';
+        case 'downloading': return 'View Downloads';
+        case 'download_complete': return 'Complete';
+        default: return 'Open';
+    }
+}
+
+function getPhaseText(phase) {
+    switch (phase) {
+        case 'fresh': return 'Ready to discover';
+        case 'discovering': return 'Discovering...';
+        case 'discovered': return 'Discovery Complete';
+        case 'syncing': return 'Syncing...';
+        case 'sync_complete': return 'Sync Complete';
+        case 'downloading': return 'Downloading...';
+        case 'download_complete': return 'Download Complete';
+        default: return phase;
+    }
+}
+
+function getPhaseColor(phase) {
+    switch (phase) {
+        case 'fresh': return '#999';
+        case 'discovering': case 'syncing': case 'downloading': return '#ffa500';
+        case 'discovered': case 'sync_complete': case 'download_complete': return 'rgb(var(--accent-rgb))';
+        default: return '#999';
+    }
+}
+
+function getProgressWidth(playlistInfo) {
+    if (playlistInfo.phase === 'fresh') return 0;
+    if (playlistInfo.spotify_total === 0) return 0;
+    return Math.round((playlistInfo.spotify_matches / playlistInfo.spotify_total) * 100);
+}
+
+async function rehydrateYouTubePlaylist(playlistInfo, userRequested = false) {
+    // Rehydrate a YouTube playlist's discovery modal state (similar to rehydrateModal)
+    const urlHash = playlistInfo.url_hash;
+    const playlistName = playlistInfo.playlist_name;
+    const phase = playlistInfo.phase;
+
+    console.log(`💧 Rehydrating YouTube playlist "${playlistName}" (Phase: ${phase}) - User requested: ${userRequested}`);
+
+    try {
+        // First, ensure the card exists (create from backend if needed)
+        if (!youtubePlaylistStates[urlHash] || !youtubePlaylistStates[urlHash].cardElement) {
+            console.log(`🃏 Creating missing YouTube card for rehydration: ${playlistName}`);
+
+            // Since playlistInfo from active processes doesn't have full playlist data,
+            // we need to fetch it from the backend first
+            try {
+                const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
+                if (stateResponse.ok) {
+                    const fullPlaylistState = await stateResponse.json();
+                    createYouTubeCardFromBackendState(fullPlaylistState);
+                } else {
+                    console.error(`❌ Could not fetch full playlist state for card creation: ${playlistName}`);
+                    return; // Can't create card without playlist data
+                }
+            } catch (error) {
+                console.error(`❌ Error fetching playlist state for card creation: ${error.message}`);
+                return;
+            }
+        }
+
+        // Fetch full state from backend to get discovery results
+        let fullState = null;
+        if (phase !== 'fresh' && phase !== 'discovering') {
+            try {
+                console.log(`🔍 Fetching full backend state for: ${playlistName}`);
+                const stateResponse = await fetch(`/api/youtube/state/${urlHash}`);
+                if (stateResponse.ok) {
+                    fullState = await stateResponse.json();
+                    console.log(`📋 Retrieved full state with ${fullState.discovery_results?.length || 0} discovery results`);
+                }
+            } catch (error) {
+                console.warn(`⚠️ Could not fetch full state for ${playlistName}:`, error.message);
+            }
+        }
+
+        // Update local state to match backend
+        const state = youtubePlaylistStates[urlHash];
+        state.phase = phase;
+        state.discoveryProgress = playlistInfo.discovery_progress;
+        state.spotifyMatches = playlistInfo.spotify_matches;
+        state.convertedSpotifyPlaylistId = playlistInfo.converted_spotify_playlist_id;
+
+        // Restore discovery results if we have them
+        if (fullState && fullState.discovery_results) {
+            state.discoveryResults = fullState.discovery_results;
+            state.syncPlaylistId = fullState.sync_playlist_id;
+            state.syncProgress = fullState.sync_progress || {};
+            console.log(`✅ Restored ${state.discoveryResults.length} discovery results from backend`);
+
+            // Update modal if it already exists
+            const existingModal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+            if (existingModal && !existingModal.classList.contains('hidden')) {
+                console.log(`🔄 Refreshing existing modal with restored discovery results`);
+                refreshYouTubeDiscoveryModalTable(urlHash);
+            }
+        }
+
+        // Update card display
+        updateYouTubeCardPhase(urlHash, phase);
+        updateYouTubeCardProgress(urlHash, playlistInfo);
+
+        // Handle active polling resumption
+        if (phase === 'discovering') {
+            console.log(`🔍 Resuming discovery polling for: ${playlistName}`);
+            startYouTubeDiscoveryPolling(urlHash);
+        } else if (phase === 'syncing') {
+            console.log(`🔄 Resuming sync polling for: ${playlistName}`);
+            startYouTubeSyncPolling(urlHash);
+        }
+
+        // Open modal if user requested
+        if (userRequested) {
+            switch (phase) {
+                case 'discovering':
+                case 'discovered':
+                case 'syncing':
+                case 'sync_complete':
+                    openYouTubeDiscoveryModal(urlHash);
+                    break;
+                case 'downloading':
+                case 'download_complete':
+                    // Open download modal if we have the converted playlist ID
+                    if (playlistInfo.converted_spotify_playlist_id) {
+                        await openDownloadMissingModal(playlistInfo.converted_spotify_playlist_id);
+                    }
+                    break;
+            }
+        }
+
+        console.log(`✅ Successfully rehydrated YouTube playlist: ${playlistName}`);
+
+    } catch (error) {
+        console.error(`❌ Error rehydrating YouTube playlist "${playlistName}":`, error);
+    }
+}
+
+async function removeYouTubePlaylistFromBackend(event, urlHash) {
+    // Remove YouTube playlist from backend storage and update UI
+    event.stopPropagation(); // Prevent card click
+
+    const state = youtubePlaylistStates[urlHash];
+    if (!state) return;
+
+    const playlistName = state.playlist.name;
+
+    try {
+        console.log(`🗑️ Removing YouTube playlist from backend: ${playlistName}`);
+
+        const response = await fetch(`/api/youtube/delete/${urlHash}`, {
+            method: 'DELETE'
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to delete playlist');
+        }
+
+        // Remove card from UI
+        if (state.cardElement) {
+            state.cardElement.remove();
+        }
+
+        // Remove from client state
+        delete youtubePlaylistStates[urlHash];
+
+        // Stop any active polling
+        if (activeYouTubePollers[urlHash]) {
+            clearInterval(activeYouTubePollers[urlHash]);
+            delete activeYouTubePollers[urlHash];
+        }
+
+        // Close discovery modal if open
+        const modal = document.getElementById(`youtube-discovery-modal-${urlHash}`);
+        if (modal) {
+            modal.remove();
+        }
+
+        // Show placeholder if no cards left
+        const container = document.getElementById('youtube-playlist-container');
+        const cards = container.querySelectorAll('.youtube-playlist-card');
+        if (cards.length === 0) {
+            container.innerHTML = '<div class="youtube-playlist-placeholder">No YouTube playlists added yet. Parse a YouTube playlist URL above to get started!</div>';
+        }
+
+        showToast(`Removed "${playlistName}" from backend storage`, 'success');
+        console.log(`✅ Successfully removed YouTube playlist: ${playlistName}`);
+
+    } catch (error) {
+        console.error(`❌ Error removing YouTube playlist "${playlistName}":`, error);
+        showToast(`Error removing playlist: ${error.message}`, 'error');
+    }
+}
+
+async function loadSpotifyPlaylists() {
+    const container = document.getElementById('spotify-playlist-container');
+    const refreshBtn = document.getElementById('spotify-refresh-btn');
+
+    container.innerHTML = `<div class="playlist-placeholder">🔄 Loading playlists...</div>`;
+    refreshBtn.disabled = true;
+    refreshBtn.textContent = '🔄 Loading...';
+
+    try {
+        const response = await fetch('/api/spotify/playlists');
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || 'Failed to fetch playlists');
+        }
+        spotifyPlaylists = await response.json();
+        renderSpotifyPlaylists();
+        spotifyPlaylistsLoaded = true;
+
+        await checkForActiveProcesses();
+
+    } catch (error) {
+        container.innerHTML = `<div class="playlist-placeholder">❌ Error: ${error.message}</div>`;
+        showToast(`Error loading playlists: ${error.message}`, 'error');
+    } finally {
+        refreshBtn.disabled = false;
+        refreshBtn.textContent = '🔄 Refresh';
+    }
+}
+
+function renderSpotifyPlaylists() {
+    const container = document.getElementById('spotify-playlist-container');
+    if (spotifyPlaylists.length === 0) {
+        container.innerHTML = `<div class="playlist-placeholder">No Spotify playlists found.</div>`;
+        return;
+    }
+
+    container.innerHTML = spotifyPlaylists.map(p => {
+        let statusClass = 'status-never-synced';
+        if (p.sync_status.startsWith('Synced')) statusClass = 'status-synced';
+        if (p.sync_status === 'Needs Sync') statusClass = 'status-needs-sync';
+
+        // This HTML structure creates the interactive playlist cards
+        return `
+        <div class="playlist-card" data-playlist-id="${p.id}" onclick="togglePlaylistSelection(event)">
+            <div class="playlist-card-main">
+                <div class="playlist-card-content">
+                    <div class="playlist-card-name">${escapeHtml(p.name)}</div>
+                    <div class="playlist-card-info">
+                        <span>${p.track_count} tracks</span> • 
+                        <span class="playlist-card-status ${statusClass}">${p.sync_status}</span>
+                    </div>
+                    <div class="sync-progress-indicator" id="progress-${p.id}"></div>
+                </div>
+                <div class="playlist-card-actions">
+                    <button id="action-btn-${p.id}" onclick="openPlaylistDetailsModal(event, '${p.id}')">Sync / Download</button>
+                    <button id="progress-btn-${p.id}" class="view-progress-btn hidden" onclick="handleViewProgressClick(event, '${p.id}')">
+                        View Progress
+                    </button>
+                </div>
+            </div>
+        </div>
+        `;
+    }).join('');
+}
+
+function handleViewProgressClick(event, playlistId) {
+    event.stopPropagation(); // Prevent the card selection from toggling
+    const process = activeDownloadProcesses[playlistId];
+
+    if (process && process.modalElement) {
+        // If a process is active, just show its modal
+        console.log(`Re-opening active download modal for playlist ${playlistId}`);
+        process.modalElement.style.display = 'flex';
+    }
+}
+
+function updatePlaylistCardUI(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    const progressBtn = document.getElementById(`progress-btn-${playlistId}`);
+    const actionBtn = document.getElementById(`action-btn-${playlistId}`);
+    const card = document.querySelector(`.playlist-card[data-playlist-id="${playlistId}"]`);
+
+    if (!progressBtn || !actionBtn) return;
+
+    if (process && process.status === 'running') {
+        // A process is running: show the progress button
+        progressBtn.classList.remove('hidden');
+        progressBtn.textContent = 'View Progress';
+        progressBtn.style.backgroundColor = '';  // Reset any custom styling
+        actionBtn.textContent = '📥 Downloading...';
+        actionBtn.disabled = true;
+
+        // Remove completion styling from card
+        if (card) card.classList.remove('download-complete');
+
+    } else if (process && process.status === 'complete') {
+        // Process completed: show "ready for review" indicator
+        progressBtn.classList.remove('hidden');
+        progressBtn.textContent = '📋 View Results';
+        progressBtn.style.backgroundColor = '#28a745'; // Green success color
+        progressBtn.style.color = 'white';
+        actionBtn.textContent = '✅ Ready for Review';
+        actionBtn.disabled = false; // Allow clicking to see results
+
+        // Add completion styling to card
+        if (card) card.classList.add('download-complete');
+
+    } else {
+        // No process or it's been cleaned up: normal state
+        progressBtn.classList.add('hidden');
+        progressBtn.style.backgroundColor = '';  // Reset styling
+        progressBtn.style.color = '';  // Reset styling
+        actionBtn.textContent = 'Sync / Download';
+        actionBtn.disabled = false;
+
+        // Remove completion styling from card
+        if (card) card.classList.remove('download-complete');
+    }
+}
+
+async function cleanupDownloadProcess(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) return;
+
+    console.log(`🧹 Cleaning up download process for playlist ${playlistId}`);
+
+    // Stop any active polling first
+    if (process.poller) {
+        console.log(`🛑 Stopping individual polling for ${playlistId}`);
+        clearInterval(process.poller);
+        process.poller = null;
+    }
+
+    // Mark process as no longer running
+    if (process.status === 'running') {
+        process.status = 'complete';
+    }
+
+    // If the process has a batchId, tell the server to clean it up.
+    if (process.batchId) {
+        try {
+            console.log(`🚀 Sending cleanup request to server for batch: ${process.batchId}`);
+            const response = await fetch('/api/playlists/cleanup_batch', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ batch_id: process.batchId })
+            });
+
+            // Handle deferred cleanup (202 = wishlist processing in progress)
+            if (response.status === 202) {
+                console.log(`⏳ Wishlist processing in progress for batch ${process.batchId}, will retry cleanup in 2s...`);
+                // Retry cleanup after delay to allow wishlist processing to complete
+                setTimeout(async () => {
+                    try {
+                        await fetch('/api/playlists/cleanup_batch', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ batch_id: process.batchId })
+                        });
+                        console.log(`✅ Delayed cleanup completed for batch: ${process.batchId}`);
+                    } catch (error) {
+                        console.warn(`⚠️ Delayed cleanup failed:`, error);
+                    }
+                }, 2000); // 2 second delay
+            } else {
+                console.log(`✅ Server cleanup completed for batch: ${process.batchId}`);
+            }
+        } catch (error) {
+            console.warn(`⚠️ Failed to send cleanup request to server:`, error);
+            // Don't show toast for cleanup failures - they're not user-facing
+        }
+    }
+
+    // Remove modal from DOM
+    if (process.modalElement && process.modalElement.parentElement) {
+        process.modalElement.parentElement.removeChild(process.modalElement);
+    }
+
+    // Remove from client-side global state
+    delete activeDownloadProcesses[playlistId];
+
+    // Check if global polling should be stopped
+    checkAndCleanupGlobalPolling();
+
+    // Restore card UI (only for non-wishlist playlists)
+    if (playlistId !== 'wishlist') {
+        updatePlaylistCardUI(playlistId);
+    }
+    updateRefreshButtonState(); // Now safe since hasActiveOperations() excludes wishlist
+}
+
+function togglePlaylistSelection(event) {
+    const card = event.currentTarget;
+    const playlistId = card.dataset.playlistId;
+
+    // Don't toggle if clicking the button
+    if (event.target.tagName === 'BUTTON') return;
+
+    const isSelected = !card.classList.contains('selected');
+    card.classList.toggle('selected', isSelected);
+
+    if (isSelected) {
+        selectedPlaylists.add(playlistId);
+    } else {
+        selectedPlaylists.delete(playlistId);
+    }
+    updateSyncActionsUI();
+}
+
+function updateSyncActionsUI() {
+    // If sequential sync is running, let the manager handle UI updates
+    if (sequentialSyncManager && sequentialSyncManager.isRunning) {
+        sequentialSyncManager.updateUI();
+        return;
+    }
+
+    const selectionInfo = document.getElementById('selection-info');
+    const startSyncBtn = document.getElementById('start-sync-btn');
+    const count = selectedPlaylists.size;
+
+    if (count === 0) {
+        if (selectionInfo) selectionInfo.textContent = 'Select playlists to sync';
+        if (startSyncBtn) startSyncBtn.disabled = true;
+    } else {
+        if (selectionInfo) selectionInfo.textContent = `${count} playlist${count > 1 ? 's' : ''} selected`;
+        if (startSyncBtn) startSyncBtn.disabled = false;
+    }
+}
+
+async function openPlaylistDetailsModal(event, playlistId) {
+    event.stopPropagation();
+
+    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+    if (!playlist) return;
+
+    showLoadingOverlay(`Loading playlist: ${playlist.name}...`);
+
+    try {
+        // --- CACHING LOGIC START ---
+        if (playlistTrackCache[playlistId]) {
+            console.log(`Cache HIT for playlist ${playlistId}. Using cached tracks.`);
+            // Use the cached tracks instead of fetching
+            const fullPlaylist = { ...playlist, tracks: playlistTrackCache[playlistId] };
+            showPlaylistDetailsModal(fullPlaylist);
+        } else {
+            console.log(`Cache MISS for playlist ${playlistId}. Fetching from server...`);
+            // Fetch from the server if not in cache
+            const response = await fetch(`/api/spotify/playlist/${playlistId}`);
+            const fullPlaylist = await response.json();
+            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
+
+            // Store the fetched tracks in the cache
+            playlistTrackCache[playlistId] = fullPlaylist.tracks;
+            console.log(`Cached ${fullPlaylist.tracks.length} tracks for playlist ${playlistId}.`);
+
+            // Auto-mirror this Spotify playlist
+            mirrorPlaylist('spotify', playlistId, fullPlaylist.name, fullPlaylist.tracks.map(t => ({
+                track_name: t.name, artist_name: (t.artists && t.artists[0]) ? (typeof t.artists[0] === 'object' ? t.artists[0].name : t.artists[0]) : '',
+                album_name: t.album ? (typeof t.album === 'object' ? t.album.name : t.album) : '',
+                duration_ms: t.duration_ms || 0,
+                image_url: t.album && typeof t.album === 'object' && t.album.images && t.album.images[0] ? t.album.images[0].url : null,
+                source_track_id: t.id || t.spotify_track_id || ''
+            })), { description: fullPlaylist.description, owner: fullPlaylist.owner, image_url: fullPlaylist.image_url });
+
+            showPlaylistDetailsModal(fullPlaylist);
+        }
+        // --- CACHING LOGIC END ---
+
+    } catch (error) {
+        showToast(`Error: ${error.message}`, 'error');
+    } finally {
+        hideLoadingOverlay();
+    }
+}
+
+function showPlaylistDetailsModal(playlist) {
+    // Create modal if it doesn't exist
+    let modal = document.getElementById('playlist-details-modal');
+    if (!modal) {
+        modal = document.createElement('div');
+        modal.id = 'playlist-details-modal';
+        modal.className = 'modal-overlay';
+        document.body.appendChild(modal);
+    }
+
+    // Check if there's a completed download missing tracks process for this playlist
+    const activeProcess = activeDownloadProcesses[playlist.id];
+    const hasCompletedProcess = activeProcess && activeProcess.status === 'complete';
+
+    // Check if sync is currently running for this playlist
+    const isSyncing = !!activeSyncPollers[playlist.id];
+
+    modal.innerHTML = `
+        <div class="modal-container playlist-modal">
+            <div class="playlist-modal-header">
+                <div class="playlist-header-content">
+                    <h2>${escapeHtml(playlist.name)}</h2>
+                    <div class="playlist-quick-info">
+                        <span class="playlist-track-count">${playlist.track_count} tracks</span>
+                        <span class="playlist-owner">by ${escapeHtml(playlist.owner)}</span>
+                    </div>
+                    <!-- Sync status display (hidden by default, matches GUI) -->
+                    <div class="playlist-modal-sync-status" id="modal-sync-status-${playlist.id}" style="display: none;">
+                        <span class="sync-stat total-tracks">♪ <span id="modal-total-${playlist.id}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat matched-tracks">✓ <span id="modal-matched-${playlist.id}">0</span></span>
+                        <span class="sync-separator">/</span>
+                        <span class="sync-stat failed-tracks">✗ <span id="modal-failed-${playlist.id}">0</span></span>
+                        <span class="sync-stat percentage">(<span id="modal-percentage-${playlist.id}">0</span>%)</span>
+                    </div>
+                </div>
+                <span class="playlist-modal-close" onclick="closePlaylistDetailsModal()">&times;</span>
+            </div>
+            
+            <div class="playlist-modal-body">
+                ${playlist.description ? `<div class="playlist-description">${escapeHtml(playlist.description)}</div>` : ''}
+                
+                <div class="playlist-tracks-container">
+                    <div class="playlist-tracks-list">
+                        ${playlist.tracks.map((track, index) => `
+                            <div class="playlist-track-item">
+                                <span class="playlist-track-number">${index + 1}</span>
+                                <div class="playlist-track-info">
+                                    <div class="playlist-track-name">${escapeHtml(track.name)}</div>
+                                    <div class="playlist-track-artists">${formatArtists(track.artists)}</div>
+                                </div>
+                                <div class="playlist-track-duration">${formatDuration(track.duration_ms)}</div>
+                            </div>
+                        `).join('')}
+                    </div>
+                </div>
+            </div>
+            
+            <div class="playlist-modal-footer">
+                <button class="playlist-modal-btn playlist-modal-btn-secondary" onclick="closePlaylistDetailsModal()">Close</button>
+                <button class="playlist-modal-btn playlist-modal-btn-tertiary" onclick="openDownloadMissingModal('${playlist.id}')">
+                    ${hasCompletedProcess
+            ? '📊 View Download Results'
+            : '📥 Download Missing Tracks'}
+                </button>
+                <button id="sync-btn-${playlist.id}" class="playlist-modal-btn playlist-modal-btn-primary" onclick="startPlaylistSync('${playlist.id}')" ${isSyncing ? 'disabled' : ''} ${_isSoulsyncStandalone ? 'style="display:none"' : ''}>${isSyncing ? '⏳ Syncing...' : 'Sync Playlist'}</button>
+            </div>
+        </div>
+    `;
+
+    modal.style.display = 'flex';
+}
+
+function closePlaylistDetailsModal() {
+    const modal = document.getElementById('playlist-details-modal');
+    if (modal) {
+        modal.style.display = 'none';
+    }
+}
+
+function formatDuration(ms) {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = Math.floor((ms % 60000) / 1000);
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+// ===============================
+// DOWNLOAD MISSING TRACKS MODAL
+// ===============================
+
+let activeAnalysisTaskId = null;
+let currentPlaylistTracks = [];
+let analysisResults = [];
+let missingTracks = [];
+
+// New variables for enhanced modal functionality
+let currentDownloadBatchId = null;
+
+// ===============================
+// HERO SECTION HELPER FUNCTIONS
+// ===============================
+
+/**
+ * Generate hero section HTML for download missing tracks modal
+ * Context-aware display based on available data
+ */
+function generateDownloadModalHeroSection(context) {
+    const { type, playlist, artist, album, trackCount } = context;
+
+    let heroContent = '';
+    let heroBackgroundImage = '';
+
+    switch (type) {
+        case 'album':
+        case 'artist_album':
+            // Artist/album context - show artist + album images
+            const artistImage = artist?.image_url || artist?.images?.[0]?.url;
+            const albumImage = album?.image_url || album?.images?.[0]?.url;
+
+            // Use album image as background if available
+            if (albumImage) {
+                heroBackgroundImage = `<div class="download-missing-modal-hero-bg" style="background-image: url('${albumImage}');"></div>`;
+            }
+
+            heroContent = `
+                <div class="download-missing-modal-hero-content">
+                    <div class="download-missing-modal-hero-images">
+                        ${artistImage ? `<img class="download-missing-modal-hero-image artist" src="${artistImage}" alt="${escapeHtml(artist.name)}">` : ''}
+                        ${albumImage ? `<img class="download-missing-modal-hero-image album" src="${albumImage}" alt="${escapeHtml(album.name)}">` : ''}
+                    </div>
+                    <div class="download-missing-modal-hero-metadata">
+                        <h1 class="download-missing-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
+                        <div class="download-missing-modal-hero-subtitle">by <a href="#" class="hero-artist-link" onclick="event.preventDefault();_navigateToArtistFromModal('${escapeHtml(artist.id || '')}','${escapeForInlineJs(artist.name || '')}','${escapeHtml(artist.image_url || '')}','${escapeHtml(artist.source || '')}','${escapeHtml(context.playlistId || '')}')">${escapeHtml(artist.name || 'Unknown Artist')}</a></div>
+                        <div class="download-missing-modal-hero-details">
+                            <span class="download-missing-modal-hero-detail">${album.album_type || 'Album'}</span>
+                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+
+        case 'playlist':
+            // Playlist context - show playlist info
+            heroContent = `
+                <div class="download-missing-modal-hero-content">
+                    <div class="download-missing-modal-hero-icon">🎵</div>
+                    <div class="download-missing-modal-hero-metadata">
+                        <h1 class="download-missing-modal-hero-title">${escapeHtml(playlist.name)}</h1>
+                        <div class="download-missing-modal-hero-subtitle">by ${escapeHtml(playlist.owner || 'Spotify')}</div>
+                        <div class="download-missing-modal-hero-details">
+                            <span class="download-missing-modal-hero-detail">Playlist</span>
+                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+
+        case 'wishlist':
+            // Wishlist context - show wishlist icon
+            heroContent = `
+                <div class="download-missing-modal-hero-content">
+                    <div class="download-missing-modal-hero-icon">👁️</div>
+                    <div class="download-missing-modal-hero-metadata">
+                        <h1 class="download-missing-modal-hero-title">Wishlist</h1>
+                        <div class="download-missing-modal-hero-subtitle">From watched artists</div>
+                        <div class="download-missing-modal-hero-details">
+                            <span class="download-missing-modal-hero-detail">Wishlist</span>
+                            <span class="download-missing-modal-hero-detail">${trackCount} tracks</span>
+                        </div>
+                    </div>
+                </div>
+            `;
+            break;
+
+        default:
+            // Fallback - basic display
+            heroContent = `
+                <div class="download-missing-modal-hero-content">
+                    <div class="download-missing-modal-hero-icon">📥</div>
+                    <div class="download-missing-modal-hero-metadata">
+                        <h1 class="download-missing-modal-hero-title">Download Missing Tracks</h1>
+                        <div class="download-missing-modal-hero-subtitle">${trackCount} tracks</div>
+                    </div>
+                </div>
+            `;
+            break;
+    }
+
+    return `
+        <div class="download-missing-modal-hero">
+            ${heroBackgroundImage}
+            ${heroContent}
+            <div class="download-dashboard-stats">
+                <div class="dashboard-stat stat-total">
+                    <div class="dashboard-stat-number" id="stat-total-${context.playlistId}">${context.trackCount}</div>
+                    <div class="dashboard-stat-label">Total</div>
+                </div>
+                <div class="dashboard-stat stat-found">
+                    <div class="dashboard-stat-number" id="stat-found-${context.playlistId}">-</div>
+                    <div class="dashboard-stat-label">Found</div>
+                </div>
+                <div class="dashboard-stat stat-missing">
+                    <div class="dashboard-stat-number" id="stat-missing-${context.playlistId}">-</div>
+                    <div class="dashboard-stat-label">Missing</div>
+                </div>
+                <div class="dashboard-stat stat-downloaded">
+                    <div class="dashboard-stat-number" id="stat-downloaded-${context.playlistId}">0</div>
+                    <div class="dashboard-stat-label">Downloaded</div>
+                </div>
+            </div>
+        </div>
+        <div class="download-missing-modal-header-actions">
+            <span class="download-missing-modal-close" onclick="closeDownloadMissingModal('${context.playlistId || 'unknown'}')">&times;</span>
+        </div>
+    `;
+}
+let modalDownloadPoller = null;
+let currentModalPlaylistId = null;
+
+// PHASE 2: Local cancelled track management (GUI PARITY)
+let cancelledTracks = new Set(); // Track cancelled track indices like GUI's cancelled_tracks
+
+const TRACK_RENDER_BATCH_SIZE = 100;
+
+function applyProgressiveTrackRendering(playlistId, totalTrackCount) {
+    if (totalTrackCount <= TRACK_RENDER_BATCH_SIZE) return;
+
+    const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+    if (!modal) return;
+
+    const tbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+    if (!tbody) return;
+
+    const rows = tbody.querySelectorAll('tr[data-track-index]');
+    if (rows.length <= TRACK_RENDER_BATCH_SIZE) return;
+
+    // Hide rows beyond first batch
+    for (let i = TRACK_RENDER_BATCH_SIZE; i < rows.length; i++) {
+        rows[i].classList.add('hidden');
+    }
+
+    let revealedCount = TRACK_RENDER_BATCH_SIZE;
+
+    // Append indicator into .download-tracks-title
+    const titleEl = modal.querySelector('.download-tracks-title');
+    if (titleEl) {
+        const indicator = document.createElement('span');
+        indicator.className = 'track-render-indicator';
+        indicator.id = `track-render-indicator-${playlistId}`;
+        indicator.textContent = `Showing ${revealedCount} of ${totalTrackCount} tracks`;
+        titleEl.appendChild(indicator);
+    }
+
+    // Scroll listener on table container
+    const container = modal.querySelector('.download-tracks-table-container');
+    if (!container) return;
+
+    container.addEventListener('scroll', function onScroll() {
+        const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        if (scrollBottom > 200) return;
+        if (revealedCount >= rows.length) return;
+
+        const nextEnd = Math.min(revealedCount + TRACK_RENDER_BATCH_SIZE, rows.length);
+        for (let i = revealedCount; i < nextEnd; i++) {
+            rows[i].classList.remove('hidden');
+        }
+        revealedCount = nextEnd;
+
+        const indicator = document.getElementById(`track-render-indicator-${playlistId}`);
+        if (indicator) {
+            indicator.textContent = revealedCount >= rows.length
+                ? `Showing all ${totalTrackCount} tracks`
+                : `Showing ${revealedCount} of ${totalTrackCount} tracks`;
+        }
+
+        if (revealedCount >= rows.length) {
+            container.removeEventListener('scroll', onScroll);
+        }
+    });
+}
+
+async function openDownloadMissingModal(playlistId) {
+    showLoadingOverlay('Loading playlist...');
+
+    // **NEW**: Check if a process is already active for this playlist
+    if (activeDownloadProcesses[playlistId]) {
+        console.log(`Modal for ${playlistId} already exists. Showing it.`);
+        closePlaylistDetailsModal(); // Close playlist details modal even when reusing existing modal
+        const process = activeDownloadProcesses[playlistId];
+        if (process.modalElement) {
+            // Show helpful message if it's a completed process
+            if (process.status === 'complete') {
+                showToast('Showing previous results. Close this modal to start a new analysis.', 'info');
+            }
+            process.modalElement.style.display = 'flex';
+        }
+        hideLoadingOverlay();
+        return; // Don't create a new one
+    }
+
+    console.log(`📥 Opening Download Missing Tracks modal for playlist: ${playlistId}`);
+
+    closePlaylistDetailsModal();
+    const playlist = spotifyPlaylists.find(p => p.id === playlistId);
+    if (!playlist) {
+        showToast('Could not find playlist data.', 'error');
+        hideLoadingOverlay();
+        return;
+    }
+
+    let tracks = playlistTrackCache[playlistId];
+    if (!tracks) {
+        try {
+            const fetchUrl = playlistId.startsWith('deezer_arl_')
+                ? `/api/deezer/arl-playlist/${playlistId.replace('deezer_arl_', '')}`
+                : `/api/spotify/playlist/${playlistId}`;
+            const response = await fetch(fetchUrl);
+            const fullPlaylist = await response.json();
+            if (fullPlaylist.error) throw new Error(fullPlaylist.error);
+            tracks = fullPlaylist.tracks;
+            playlistTrackCache[playlistId] = tracks;
+        } catch (error) {
+            showToast(`Failed to fetch tracks: ${error.message}`, 'error');
+            hideLoadingOverlay();
+            return;
+        }
+    }
+
+    currentPlaylistTracks = tracks;
+    currentModalPlaylistId = playlistId;
+
+    let modal = document.createElement('div');
+    modal.id = `download-missing-modal-${playlistId}`; // **NEW**: Unique ID
+    modal.className = 'download-missing-modal'; // **NEW**: Use class for styling
+    modal.style.display = 'none'; // Start hidden
+    document.body.appendChild(modal);
+
+    // **NEW**: Register the new process in our global state tracker
+    activeDownloadProcesses[playlistId] = {
+        status: 'idle', // idle, running, complete, cancelled
+        modalElement: modal,
+        poller: null,
+        batchId: null,
+        playlist: playlist,
+        tracks: tracks
+    };
+
+    // Generate hero section for playlist context
+    const heroContext = {
+        type: 'playlist',
+        playlist: playlist,
+        trackCount: tracks.length,
+        playlistId: playlistId
+    };
+
+    modal.innerHTML = `
+        <div class="download-missing-modal-content" data-context="playlist">
+            <div class="download-missing-modal-header">
+                ${generateDownloadModalHeroSection(heroContext)}
+            </div>
+
+            <div class="download-missing-modal-body">
+                <div class="download-progress-section">
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            🔍 Library Analysis
+                            <span id="analysis-progress-text-${playlistId}">Ready to start</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill analysis" id="analysis-progress-fill-${playlistId}"></div>
+                        </div>
+                    </div>
+                    <div class="progress-item">
+                        <div class="progress-label">
+                            ⏬ Downloads
+                            <span id="download-progress-text-${playlistId}">Waiting for analysis</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress-fill download" id="download-progress-fill-${playlistId}"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="download-tracks-section">
+                    <div class="download-tracks-header">
+                        <h3 class="download-tracks-title">📋 Track Analysis & Download Status</h3>
+                        <span class="track-selection-count" id="track-selection-count-${playlistId}">${tracks.length} / ${tracks.length} tracks selected</span>
+                    </div>
+                    <div class="download-tracks-table-container">
+                        <table class="download-tracks-table">
+                            <thead>
+                                <tr>
+                                    <th class="track-select-header">
+                                        <input type="checkbox" class="track-select-all"
+                                               id="select-all-${playlistId}" checked
+                                               onchange="toggleAllTrackSelections('${playlistId}', this.checked)">
+                                    </th>
+                                    <th>#</th>
+                                    <th>Track</th>
+                                    <th>Artist</th>
+                                    <th>Duration</th>
+                                    <th>Library Match</th>
+                                    <th>Download Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody id="download-tracks-tbody-${playlistId}">
+                                ${tracks.map((track, index) => `
+                                    <tr data-track-index="${index}">
+                                        <td class="track-select-cell">
+                                            <input type="checkbox" class="track-select-cb"
+                                                   data-track-index="${index}" checked
+                                                   onchange="updateTrackSelectionCount('${playlistId}')">
+                                        </td>
+                                        <td class="track-number">${index + 1}</td>
+                                        <td class="track-name" title="${escapeHtml(track.name)}">${escapeHtml(track.name)}</td>
+                                        <td class="track-artist" title="${escapeHtml(formatArtists(track.artists))}">${escapeHtml(formatArtists(track.artists))}</td>
+                                        <td class="track-duration">${formatDuration(track.duration_ms)}</td>
+                                        <td class="track-match-status match-checking" id="match-${playlistId}-${index}">🔍 Pending</td>
+                                        <td class="track-download-status" id="download-${playlistId}-${index}">-</td>
+                                        <td class="track-actions" id="actions-${playlistId}-${index}">-</td>
+                                    </tr>
+                                `).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="download-missing-modal-footer">
+                <div class="download-phase-controls">
+                    <div class="force-download-toggle-container" style="margin-bottom: 0px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;">
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="force-download-all-${playlistId}">
+                            <span>Force Download All</span>
+                        </label>
+                        <label class="force-download-toggle">
+                            <input type="checkbox" id="playlist-folder-mode-${playlistId}">
+                            <span>Organize by Playlist (Downloads/Playlist/Artist - Track.ext)</span>
+                        </label>
+                    </div>
+                    <button class="download-control-btn primary" id="begin-analysis-btn-${playlistId}" onclick="startMissingTracksProcess('${playlistId}')">
+                        Begin Analysis
+                    </button>
+                    <button class="download-control-btn" id="add-to-wishlist-btn-${playlistId}" onclick="addModalTracksToWishlist('${playlistId}')" style="background-color: #9333ea; color: white;">
+                        Add to Wishlist
+                    </button>
+                    <button class="download-control-btn danger" id="cancel-all-btn-${playlistId}" onclick="cancelAllOperations('${playlistId}')" style="display: none;">
+                        Cancel All
+                    </button>
+                </div>
+                <div class="modal-close-section">
+                    <button class="download-control-btn export" onclick="exportPlaylistAsM3U('${playlistId}')">
+                        📋 Export as M3U
+                    </button>
+                    <button class="download-control-btn secondary" onclick="closeDownloadMissingModal('${playlistId}')">Close</button>
+                </div>
+            </div>
+        </div>
+    `;
+
+    applyProgressiveTrackRendering(playlistId, tracks.length);
+    modal.style.display = 'flex';
+    hideLoadingOverlay();
+}
+
+async function autoSavePlaylistM3U(playlistId) {
+    /**
+     * Automatically save M3U file server-side for playlist modals only.
+     * Albums are skipped — they're already grouped by media servers.
+     * The server checks the m3u_export.enabled setting before writing.
+     * Uses real DB file paths via /api/generate-playlist-m3u.
+     */
+    const process = activeDownloadProcesses[playlistId];
+    if (!process || !process.tracks || process.tracks.length === 0) {
+        return;
+    }
+
+    const modal = document.getElementById(`download-missing-modal-${playlistId}`);
+    if (!modal) return;
+
+    // Skip M3U for non-playlist downloads — albums, singles, redownloads, etc.
+    const nonPlaylistPrefixes = [
+        'artist_album_', 'discover_album_', 'enhanced_search_album_', 'enhanced_search_track_',
+        'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_',
+        'issue_download_', 'library_redownload_', 'redownload_',
+    ];
+    if (nonPlaylistPrefixes.some(p => playlistId.startsWith(p))) return;
+
+    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
+    const artistName = process.artist?.name || '';
+    const albumName = process.album?.name || '';
+    const releaseDate = process.album?.release_date || '';
+    const year = releaseDate ? releaseDate.substring(0, 4) : '';
+
+    try {
+        const response = await fetch('/api/generate-playlist-m3u', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_name: playlistName,
+                tracks: _extractM3UTracks(process.tracks),
+                context_type: 'playlist',
+                artist_name: artistName,
+                album_name: albumName,
+                year: year,
+                save_to_disk: true
+            })
+        });
+
+        if (response.ok) {
+            console.log(`✅ Auto-saved M3U for playlist: ${playlistName}`);
+        } else {
+            console.warn(`⚠️ Failed to auto-save M3U for ${playlistName}`);
+        }
+    } catch (error) {
+        console.debug('Auto-save M3U error (non-critical):', error);
+    }
+}
+
+function generateM3UContent(playlistId) {
+    /**
+     * Generate M3U file content from modal data
+     * Shared between manual export and auto-save
+     */
+    const process = activeDownloadProcesses[playlistId];
+    if (!process || !process.tracks || process.tracks.length === 0) {
+        return null;
+    }
+
+    const tracks = process.tracks;
+    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
+
+    // Generate M3U8 content with status information
+    let m3uContent = '#EXTM3U\n';
+    m3uContent += `#PLAYLIST:${playlistName}\n`;
+    m3uContent += `#GENERATED:${new Date().toISOString()}\n\n`;
+
+    let foundCount = 0;
+    let downloadedCount = 0;
+    let missingCount = 0;
+
+    tracks.forEach((track, index) => {
+        const durationSeconds = track.duration_ms ? Math.floor(track.duration_ms / 1000) : -1;
+        let artists = 'Unknown Artist';
+        if (Array.isArray(track.artists)) {
+            artists = track.artists.map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : String(a)).filter(Boolean).join(', ') || 'Unknown Artist';
+        } else if (typeof track.artists === 'string') {
+            artists = track.artists;
+        } else if (track.artist) {
+            artists = typeof track.artist === 'object' ? (track.artist.name || 'Unknown Artist') : String(track.artist);
+        }
+
+        // Check library match status from the modal UI
+        const matchEl = document.getElementById(`match-${playlistId}-${index}`);
+        const downloadEl = document.getElementById(`download-${playlistId}-${index}`);
+
+        const isFoundInLibrary = matchEl && matchEl.textContent.includes('Found');
+        const isDownloaded = downloadEl && downloadEl.textContent.includes('Completed');
+        const isMissing = matchEl && matchEl.textContent.includes('Missing');
+
+        // Track status
+        let status = 'UNKNOWN';
+        if (isDownloaded) {
+            status = 'DOWNLOADED';
+            downloadedCount++;
+        } else if (isFoundInLibrary) {
+            status = 'FOUND_IN_LIBRARY';
+            foundCount++;
+        } else if (isMissing) {
+            status = 'MISSING';
+            missingCount++;
+        }
+
+        // Add track info
+        m3uContent += `#EXTINF:${durationSeconds},${artists} - ${track.name}\n`;
+        m3uContent += `#STATUS:${status}\n`;
+
+        // Generate file path
+        const sanitizedArtist = artists.replace(/[/\\?%*:|"<>]/g, '-');
+        const sanitizedTrack = track.name.replace(/[/\\?%*:|"<>]/g, '-');
+
+        if (isDownloaded || isFoundInLibrary) {
+            m3uContent += `${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
+        } else {
+            m3uContent += `# NOT AVAILABLE: ${sanitizedArtist} - ${sanitizedTrack}.mp3\n\n`;
+        }
+    });
+
+    // Add summary
+    m3uContent += `#SUMMARY\n`;
+    m3uContent += `#TOTAL_TRACKS:${tracks.length}\n`;
+    m3uContent += `#FOUND_IN_LIBRARY:${foundCount}\n`;
+    m3uContent += `#DOWNLOADED:${downloadedCount}\n`;
+    m3uContent += `#MISSING:${missingCount}\n`;
+
+    return m3uContent;
+}
+
+async function exportPlaylistAsM3U(playlistId) {
+    /**
+     * Export the tracks from the download missing tracks modal as an M3U playlist file.
+     * Downloads via browser AND saves server-side to the relevant folder (force=true).
+     * Uses real DB file paths via /api/generate-playlist-m3u.
+     */
+    console.log(`📋 Exporting playlist ${playlistId} as M3U`);
+
+    const process = activeDownloadProcesses[playlistId];
+    if (!process || !process.tracks || process.tracks.length === 0) {
+        showToast('No tracks available to export', 'warning');
+        return;
+    }
+
+    const playlistName = process.playlist?.name || process.playlistName || 'Playlist';
+    const albumPrefixes = ['artist_album_', 'discover_album_', 'enhanced_search_album_', 'seasonal_album_', 'spotify_library_', 'beatport_release_', 'discover_cache_'];
+    const isAlbumExport = albumPrefixes.some(p => playlistId.startsWith(p));
+    const releaseDate = process.album?.release_date || '';
+    const year = releaseDate ? releaseDate.substring(0, 4) : '';
+
+    let m3uContent, foundCount, missingCount;
+    try {
+        const response = await fetch('/api/generate-playlist-m3u', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_name: playlistName,
+                tracks: _extractM3UTracks(process.tracks),
+                context_type: isAlbumExport ? 'album' : 'playlist',
+                artist_name: process.artist?.name || '',
+                album_name: process.album?.name || '',
+                year: year,
+                save_to_disk: true,
+                force: true
+            })
+        });
+        const data = await response.json();
+        if (!data.success) throw new Error(data.error || 'Unknown error');
+        m3uContent = data.m3u_content;
+        foundCount = (data.stats?.found || 0) + (data.stats?.downloaded || 0);
+        missingCount = data.stats?.missing || 0;
+    } catch (error) {
+        showToast('Failed to generate M3U content', 'error');
+        console.error('M3U export error:', error);
+        return;
+    }
+
+    // Browser download
+    const blob = new Blob([m3uContent], { type: 'audio/x-mpegurl;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${playlistName.replace(/[/\\?%*:|"<>]/g, '-')}.m3u`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+
+    showToast(`Exported M3U: ${foundCount} available, ${missingCount} missing`, 'success');
+    console.log(`✅ Exported M3U - Total: ${process.tracks.length}, Available: ${foundCount}, Missing: ${missingCount}`);
+}
+
+function _extractM3UTracks(tracks) {
+    /** Extract simplified track data for the /api/generate-playlist-m3u endpoint. */
+    return tracks.map(t => {
+        let artist = '';
+        if (Array.isArray(t.artists)) {
+            const first = t.artists[0];
+            artist = typeof first === 'object' ? (first.name || '') : String(first || '');
+        } else if (typeof t.artists === 'string') {
+            artist = t.artists;
+        } else if (t.artist) {
+            artist = typeof t.artist === 'object' ? (t.artist.name || '') : String(t.artist);
+        }
+        return { name: t.name || '', artist, duration_ms: t.duration_ms || 0 };
+    });
+}
+
+// ==================================================================================
+
diff --git a/webui/static/wishlist-tools.js b/webui/static/wishlist-tools.js
new file mode 100644
index 00000000..beaa6a1b
--- /dev/null
+++ b/webui/static/wishlist-tools.js
@@ -0,0 +1,7235 @@
+// DISCOVERY FIX MODAL - Manual Track Matching
+// ============================================================================
+
+// Global state for discovery fix
+let currentDiscoveryFix = {
+    platform: null,    // 'youtube', 'tidal', 'beatport'
+    identifier: null,  // url_hash or playlist_id
+    trackIndex: null,
+    sourceTrack: null,
+    sourceArtist: null
+};
+
+// Store event handler reference to allow proper removal
+let discoveryFixEnterHandler = null;
+
+/**
+ * Open discovery fix modal for a specific track
+ */
+function openDiscoveryFixModal(platform, identifier, trackIndex) {
+    console.log(`🔧 Opening fix modal: ${platform} - ${identifier} - track ${trackIndex}`);
+
+    // Get the discovery state
+    // Note: Beatport, Tidal, and ListenBrainz have their own states, but reuse YouTube modal infrastructure
+    let state, result;
+    if (platform === 'youtube') {
+        // Check both states - ListenBrainz also uses YouTube modal infrastructure
+        state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
+    } else if (platform === 'tidal') {
+        state = youtubePlaylistStates[identifier]; // Tidal uses YouTube state infrastructure
+    } else if (platform === 'beatport') {
+        state = youtubePlaylistStates[identifier]; // Beatport uses YouTube state infrastructure
+    } else if (platform === 'listenbrainz') {
+        state = listenbrainzPlaylistStates[identifier]; // ListenBrainz has its own state
+    } else if (platform === 'deezer') {
+        state = youtubePlaylistStates[identifier]; // Deezer uses YouTube state infrastructure
+    } else if (platform === 'mirrored') {
+        state = youtubePlaylistStates[identifier]; // Mirrored playlists use YouTube state infrastructure
+    } else if (platform === 'spotify_public') {
+        state = youtubePlaylistStates[identifier]; // Spotify public playlists use YouTube state infrastructure
+    }
+
+    // Support both camelCase and snake_case for discovery results
+    const results = state?.discoveryResults || state?.discovery_results;
+    result = results?.[trackIndex];
+
+    if (!result) {
+        console.error('❌ Track data not found');
+        console.error('  Platform:', platform);
+        console.error('  Identifier:', identifier);
+        console.error('  State:', state);
+        console.error('  Discovery results (camelCase):', state?.discoveryResults?.length);
+        console.error('  Discovery results (snake_case):', state?.discovery_results?.length);
+        showToast('Track data not found', 'error');
+        return;
+    }
+
+    console.log('✅ Found result:', result);
+
+    // Store context
+    currentDiscoveryFix = {
+        platform,
+        identifier,
+        trackIndex,
+        sourceTrack: result.lb_track || result.yt_track || result.tidal_track?.name || result.beatport_track?.title || result.track_name || 'Unknown Track',
+        sourceArtist: result.lb_artist || result.yt_artist || result.tidal_track?.artist || result.beatport_track?.artist || result.artist_name || 'Unknown Artist'
+    };
+
+    // Find the fix modal within the active discovery modal
+    const discoveryModal = document.getElementById(`youtube-discovery-modal-${identifier}`);
+    if (!discoveryModal) {
+        console.error('❌ Discovery modal not found:', identifier);
+        showToast('Discovery modal not found', 'error');
+        return;
+    }
+
+    const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
+    if (!fixModalOverlay) {
+        console.error('❌ Fix modal not found within discovery modal');
+        showToast('Fix modal not found', 'error');
+        return;
+    }
+
+    console.log('🔍 Source track:', currentDiscoveryFix.sourceTrack);
+    console.log('🔍 Source artist:', currentDiscoveryFix.sourceArtist);
+    console.log('🔍 Fix modal overlay found:', fixModalOverlay);
+
+    // Populate modal - scope within the specific fix modal overlay to handle duplicate IDs
+    const sourceTrackEl = fixModalOverlay.querySelector('#fix-modal-source-track');
+    const sourceArtistEl = fixModalOverlay.querySelector('#fix-modal-source-artist');
+    const trackInput = fixModalOverlay.querySelector('#fix-modal-track-input');
+    const artistInput = fixModalOverlay.querySelector('#fix-modal-artist-input');
+
+    console.log('🔍 Elements found:', {
+        sourceTrackEl,
+        sourceArtistEl,
+        trackInput,
+        artistInput
+    });
+
+    if (!sourceTrackEl || !sourceArtistEl || !trackInput || !artistInput) {
+        console.error('❌ Fix modal elements not found in DOM');
+        showToast('Fix modal not properly initialized', 'error');
+        return;
+    }
+
+    sourceTrackEl.textContent = currentDiscoveryFix.sourceTrack;
+    sourceArtistEl.textContent = currentDiscoveryFix.sourceArtist;
+    trackInput.value = currentDiscoveryFix.sourceTrack;
+    artistInput.value = currentDiscoveryFix.sourceArtist;
+
+    console.log('✅ Populated modal with:', {
+        track: trackInput.value,
+        artist: artistInput.value
+    });
+
+    // Remove old enter key handler if exists
+    if (discoveryFixEnterHandler) {
+        trackInput.removeEventListener('keypress', discoveryFixEnterHandler);
+        artistInput.removeEventListener('keypress', discoveryFixEnterHandler);
+    }
+
+    // Add new enter key handler
+    discoveryFixEnterHandler = function (e) {
+        if (e.key === 'Enter') searchDiscoveryFix();
+    };
+    trackInput.addEventListener('keypress', discoveryFixEnterHandler);
+    artistInput.addEventListener('keypress', discoveryFixEnterHandler);
+
+    // Show modal BEFORE auto-search so elements are visible
+    fixModalOverlay.classList.remove('hidden');
+    console.log('✅ Fix modal opened, starting auto-search...');
+
+    // Auto-search with initial values (delay allows modal layout to settle and prevents accidental clicks)
+    setTimeout(() => searchDiscoveryFix(), 500);
+}
+
+/**
+ * Close discovery fix modal
+ */
+function closeDiscoveryFixModal() {
+    if (!currentDiscoveryFix.identifier) {
+        console.warn('No active fix modal to close');
+        return;
+    }
+
+    const discoveryModal = document.getElementById(`youtube-discovery-modal-${currentDiscoveryFix.identifier}`);
+    if (discoveryModal) {
+        const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
+        if (fixModalOverlay) {
+            fixModalOverlay.classList.add('hidden');
+        }
+    }
+
+    currentDiscoveryFix = { platform: null, identifier: null, trackIndex: null, sourceTrack: null, sourceArtist: null };
+}
+
+/**
+ * Search for tracks in Spotify
+ */
+async function searchDiscoveryFix() {
+    if (!currentDiscoveryFix.identifier) {
+        console.error('No active fix modal context');
+        return;
+    }
+
+    const discoveryModal = document.getElementById(`youtube-discovery-modal-${currentDiscoveryFix.identifier}`);
+    if (!discoveryModal) {
+        console.error('Discovery modal not found');
+        return;
+    }
+
+    const fixModalOverlay = discoveryModal.querySelector('.discovery-fix-modal-overlay');
+    if (!fixModalOverlay) {
+        console.error('Fix modal not found');
+        return;
+    }
+
+    const trackInput = fixModalOverlay.querySelector('#fix-modal-track-input').value.trim();
+    const artistInput = fixModalOverlay.querySelector('#fix-modal-artist-input').value.trim();
+
+    if (!trackInput && !artistInput) {
+        showToast('Enter track name or artist', 'error');
+        return;
+    }
+
+    const resultsContainer = fixModalOverlay.querySelector('#fix-modal-results');
+
+    // Build search params
+    const params = new URLSearchParams();
+    if (trackInput) params.set('track', trackInput);
+    if (artistInput) params.set('artist', artistInput);
+    if (!trackInput && !artistInput) {
+        resultsContainer.innerHTML = '<div class="no-results">Enter a track name or artist.</div>';
+        return;
+    }
+    params.set('limit', '50');
+
+    // Use the user's active metadata source first, then fall back to others
+    const activeSource = (currentMusicSourceName || 'Spotify').toLowerCase();
+    const allSources = [
+        { key: 'spotify', endpoint: '/api/spotify/search_tracks', label: 'Spotify' },
+        { key: 'deezer', endpoint: '/api/deezer/search_tracks', label: 'Deezer' },
+        { key: 'itunes', endpoint: '/api/itunes/search_tracks', label: 'iTunes' },
+    ];
+    // Put the active source first, keep others as fallbacks
+    const activeIdx = allSources.findIndex(s => activeSource.includes(s.key));
+    const searchSources = activeIdx > 0
+        ? [allSources[activeIdx], ...allSources.filter((_, i) => i !== activeIdx)]
+        : allSources;
+
+    resultsContainer.innerHTML = `<div class="loading">🔍 Searching ${searchSources[0].label}...</div>`;
+
+    try {
+        for (let i = 0; i < searchSources.length; i++) {
+            const source = searchSources[i];
+            try {
+                const response = await fetch(`${source.endpoint}?${params.toString()}`);
+                const data = await response.json();
+
+                if (data.tracks && data.tracks.length > 0) {
+                    renderDiscoveryFixResults(data.tracks, fixModalOverlay);
+                    return;
+                }
+                // No results from this source — show next source status if there is one
+                if (i < searchSources.length - 1) {
+                    resultsContainer.innerHTML = `<div class="loading">🔍 Trying ${searchSources[i + 1].label}...</div>`;
+                }
+            } catch (e) {
+                console.warn(`Discovery fix search failed on ${source.label}: ${e.message}`);
+            }
+        }
+        // All sources exhausted
+        resultsContainer.innerHTML = '<div class="no-results">No matches found on any source. Try different search terms.</div>';
+
+    } catch (error) {
+        console.error('Search error:', error);
+        resultsContainer.innerHTML = '<div class="error-message">❌ Search failed. Try again.</div>';
+    }
+}
+
+/**
+ * Render search results as clickable cards
+ */
+function renderDiscoveryFixResults(tracks, fixModalOverlay) {
+    const resultsContainer = fixModalOverlay.querySelector('#fix-modal-results');
+    resultsContainer.innerHTML = '';
+
+    // Sort: standard album versions first, live/remix/cover/soundtrack last
+    const _variantPattern = /\b(live|remix|remaster|refix|cover|acoustic|demo|instrumental|radio edit|single version|deluxe|edition|soundtrack|from .* film|from .* movie|bonus track)\b|\b\w+ mix\b/i;
+    const _albumVariantPattern = /\b(live|greatest hits|best of|collection|compilation|soundtrack|from .* film|from .* movie|remaster|deluxe|redux|expanded|anniversary)\b/i;
+    tracks.sort((a, b) => {
+        const aVariant = _variantPattern.test(a.name || '') || _albumVariantPattern.test(a.album || '');
+        const bVariant = _variantPattern.test(b.name || '') || _albumVariantPattern.test(b.album || '');
+        if (aVariant !== bVariant) return aVariant ? 1 : -1;
+        return 0; // preserve original order within same category
+    });
+
+    tracks.forEach(track => {
+        const card = document.createElement('div');
+        card.className = 'fix-result-card';
+        card.onclick = () => selectDiscoveryFixTrack(track);
+
+        card.innerHTML = `
+            <div class="fix-result-card-content">
+                <div class="fix-result-title">${escapeHtml(track.name || 'Unknown Track')}</div>
+                <div class="fix-result-artist">${escapeHtml((track.artists || ['Unknown Artist']).join(', '))}</div>
+                <div class="fix-result-album">${escapeHtml(track.album || 'Unknown Album')}</div>
+                <div class="fix-result-duration">${formatDuration(track.duration_ms || 0)}</div>
+            </div>
+        `;
+
+        resultsContainer.appendChild(card);
+    });
+}
+
+/**
+ * User selected a track - update discovery state
+ */
+async function selectDiscoveryFixTrack(track) {
+    console.log('✅ User selected track:', track);
+
+    // Confirm selection to prevent accidental clicks from layout shift
+    const artists = (track.artists || ['Unknown Artist']).join(', ');
+    if (!await showConfirmDialog({ title: 'Confirm Match', message: `Match to "${track.name}" by ${artists}?`, confirmText: 'Confirm' })) return;
+
+    const { platform, identifier, trackIndex } = currentDiscoveryFix;
+
+    console.log('📡 Updating backend match:', { platform, identifier, trackIndex, track });
+
+    // Update backend
+    try {
+        // Get the correct backend identifier based on platform
+        let backendIdentifier = identifier;
+
+        if (platform === 'tidal') {
+            // For Tidal, backend expects the actual playlist_id, not url_hash
+            const state = youtubePlaylistStates[identifier];
+            backendIdentifier = state?.tidal_playlist_id || identifier;
+        } else if (platform === 'deezer') {
+            // For Deezer, backend expects the actual playlist_id, not url_hash
+            const state = youtubePlaylistStates[identifier];
+            backendIdentifier = state?.deezer_playlist_id || identifier;
+        } else if (platform === 'spotify_public') {
+            // For Spotify Public, backend expects the url_hash
+            const state = youtubePlaylistStates[identifier];
+            backendIdentifier = state?.spotify_public_playlist_id || identifier;
+        } else if (platform === 'beatport') {
+            // For Beatport, backend expects url_hash (same as identifier)
+            backendIdentifier = identifier;
+        }
+
+        // Mirrored playlists route through the YouTube endpoint (which already handles mirrored_ prefixes)
+        const apiPlatform = platform === 'mirrored' ? 'youtube' : (platform === 'spotify_public' ? 'spotify-public' : platform);
+
+        const requestBody = {
+            identifier: backendIdentifier,
+            track_index: trackIndex,
+            spotify_track: {
+                id: track.id,
+                name: track.name,
+                artists: track.artists,
+                album: track.album,
+                duration_ms: track.duration_ms,
+                image_url: track.image_url || null
+            }
+        };
+
+        console.log('📡 Request body:', requestBody);
+        console.log('📡 Backend identifier:', backendIdentifier);
+
+        const response = await fetch(`/api/${apiPlatform}/discovery/update_match`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestBody)
+        });
+
+        console.log('📡 Response status:', response.status);
+
+        const data = await response.json();
+
+        console.log('📡 Response data:', data);
+
+        if (data.error) {
+            showToast(`Failed to update: ${data.error}`, 'error');
+            console.error('❌ Backend update failed:', data.error);
+            return;
+        }
+
+        showToast('Match updated successfully!', 'success');
+        console.log('✅ Backend update successful');
+
+        // Update frontend state
+        // Note: Beatport and Tidal reuse youtubePlaylistStates for discovery results
+        // ListenBrainz uses its own state but may also be accessed via YouTube
+        let state;
+        if (platform === 'youtube') {
+            state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
+        } else if (platform === 'tidal') {
+            state = youtubePlaylistStates[identifier];
+        } else if (platform === 'deezer') {
+            state = youtubePlaylistStates[identifier];
+        } else if (platform === 'beatport') {
+            state = youtubePlaylistStates[identifier];
+        } else if (platform === 'listenbrainz') {
+            state = listenbrainzPlaylistStates[identifier];
+        } else if (platform === 'mirrored') {
+            state = youtubePlaylistStates[identifier];
+        } else if (platform === 'spotify_public') {
+            state = youtubePlaylistStates[identifier];
+        }
+
+        // Support both camelCase and snake_case
+        const results = state?.discoveryResults || state?.discovery_results;
+        if (state && results && results[trackIndex]) {
+            const result = results[trackIndex];
+            const wasNotFound = result.status !== 'found' && result.status_class !== 'found';
+
+            // Update result
+            result.status = '✅ Found';
+            result.status_class = 'found';
+            result.spotify_track = track.name;
+            result.spotify_artist = Array.isArray(track.artists)
+                ? track.artists
+                    .map(a => (typeof a === 'object' && a !== null) ? (a.name || '') : a)
+                    .filter(Boolean)
+                    .join(', ') || '-'
+                : (track.artists || '-');
+            result.spotify_album = track.album;
+            result.spotify_id = track.id;
+            result.duration = formatDuration(track.duration_ms);
+            result.manual_match = true;
+            // User picked a real metadata match — no longer a wing-it track
+            result.wing_it_fallback = false;
+
+            // IMPORTANT: Also set spotify_data for download/sync compatibility.
+            // Build album as a dict (not a bare string) so the download
+            // pipeline can find cover art via album.image_url / album.images.
+            // This matches the shape that normal discovery produces.
+            const _fixImageUrl = track.image_url || '';
+            let _fixAlbumObj;
+            if (track.album && typeof track.album === 'object') {
+                _fixAlbumObj = { ...track.album };
+                if (_fixImageUrl && !_fixAlbumObj.image_url) _fixAlbumObj.image_url = _fixImageUrl;
+                if (_fixImageUrl && !_fixAlbumObj.images) _fixAlbumObj.images = [{ url: _fixImageUrl }];
+            } else {
+                _fixAlbumObj = { name: track.album || '' };
+                if (_fixImageUrl) {
+                    _fixAlbumObj.image_url = _fixImageUrl;
+                    _fixAlbumObj.images = [{ url: _fixImageUrl }];
+                }
+            }
+            result.spotify_data = {
+                id: track.id,
+                name: track.name,
+                artists: track.artists,
+                album: _fixAlbumObj,
+                duration_ms: track.duration_ms,
+                image_url: _fixImageUrl
+            };
+
+            // Increment match count if this was previously not_found or error
+            if (wasNotFound) {
+                state.spotifyMatches = (state.spotifyMatches || 0) + 1;
+
+                // Update progress bar and text
+                const spotify_total = state.spotify_total || state.playlist?.tracks?.length || 0;
+                const progress = spotify_total > 0 ? Math.round((state.spotifyMatches / spotify_total) * 100) : 0;
+
+                const progressBar = document.getElementById(`youtube-discovery-progress-${identifier}`);
+                const progressText = document.getElementById(`youtube-discovery-progress-text-${identifier}`);
+
+                if (progressBar) {
+                    progressBar.style.width = `${progress}%`;
+                }
+                if (progressText) {
+                    progressText.textContent = `${state.spotifyMatches} / ${spotify_total} tracks matched (${progress}%)`;
+                }
+
+                console.log(`✅ Updated progress: ${state.spotifyMatches}/${spotify_total} (${progress}%)`);
+
+                // Also update the Deezer playlist card if this is a Deezer fix
+                if (platform === 'deezer' && state.deezer_playlist_id) {
+                    const deezerState = deezerPlaylistStates[state.deezer_playlist_id];
+                    if (deezerState) {
+                        deezerState.spotifyMatches = state.spotifyMatches;
+                        updateDeezerCardProgress(state.deezer_playlist_id, {
+                            spotify_matches: state.spotifyMatches,
+                            spotify_total: spotify_total
+                        });
+                    }
+                }
+
+                // Also update the Tidal playlist card if this is a Tidal fix
+                if (platform === 'tidal' && state.tidal_playlist_id) {
+                    const tidalState = tidalPlaylistStates?.[state.tidal_playlist_id];
+                    if (tidalState) {
+                        tidalState.spotifyMatches = state.spotifyMatches;
+                    }
+                }
+
+                // Also update the Spotify Public playlist card if this is a Spotify Public fix
+                if (platform === 'spotify_public' && state.spotify_public_playlist_id) {
+                    const spState = spotifyPublicPlaylistStates?.[state.spotify_public_playlist_id];
+                    if (spState) {
+                        spState.spotifyMatches = state.spotifyMatches;
+                        updateSpotifyPublicCardProgress(state.spotify_public_playlist_id, {
+                            spotify_matches: state.spotifyMatches,
+                            spotify_total: spotify_total
+                        });
+                    }
+                }
+            }
+
+            // Update UI - refresh the table row
+            updateDiscoveryModalSingleRow(platform, identifier, trackIndex);
+        }
+
+        // Close modal
+        closeDiscoveryFixModal();
+
+    } catch (error) {
+        console.error('Error updating match:', error);
+        showToast('Failed to update match', 'error');
+    }
+}
+
+/**
+ * Update a single row in the discovery modal table
+ */
+function updateDiscoveryModalSingleRow(platform, identifier, trackIndex) {
+    // Check both state maps - ListenBrainz uses its own, others reuse youtubePlaylistStates
+    const state = listenbrainzPlaylistStates[identifier] || youtubePlaylistStates[identifier];
+
+    // Support both camelCase and snake_case
+    const results = state?.discoveryResults || state?.discovery_results;
+    if (!state || !results || !results[trackIndex]) {
+        console.warn(`Cannot update row: state or result not found`);
+        return;
+    }
+
+    const result = results[trackIndex];
+    const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
+
+    if (!row) {
+        console.warn(`Cannot update row: row element not found for ${identifier}-${trackIndex}`);
+        return;
+    }
+
+    // Update cells
+    const statusCell = row.querySelector('.discovery-status');
+    const spotifyTrackCell = row.querySelector('.spotify-track');
+    const spotifyArtistCell = row.querySelector('.spotify-artist');
+    const spotifyAlbumCell = row.querySelector('.spotify-album');
+    const actionsCell = row.querySelector('.discovery-actions');
+
+    if (statusCell) {
+        statusCell.textContent = result.status;
+        statusCell.className = `discovery-status ${result.status_class}`;
+    }
+
+    if (spotifyTrackCell) spotifyTrackCell.textContent = result.spotify_track || '-';
+    if (spotifyArtistCell) spotifyArtistCell.textContent = result.spotify_artist || '-';
+    if (spotifyAlbumCell) spotifyAlbumCell.textContent = result.spotify_album || '-';
+
+    // Update action button
+    if (actionsCell) {
+        actionsCell.innerHTML = generateDiscoveryActionButton(result, identifier, platform);
+    }
+
+    console.log(`✅ Updated row ${trackIndex} in discovery modal`);
+}
+
+async function unmatchDiscoveryTrack(platform, identifier, trackIndex) {
+    // Determine the correct API base for this platform
+    const apiBase = platform === 'tidal' ? '/api/tidal'
+        : platform === 'deezer' ? '/api/deezer'
+        : platform === 'spotify-public' ? '/api/spotify-public'
+        : platform === 'beatport' ? '/api/beatport'
+        : platform === 'listenbrainz' ? '/api/listenbrainz'
+        : '/api/youtube';
+
+    try {
+        const response = await fetch(`${apiBase}/discovery/unmatch`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ identifier, track_index: trackIndex })
+        });
+        const data = await response.json();
+        if (data.success) {
+            // Update the row in the discovery modal table
+            const state = youtubePlaylistStates[identifier]
+                || (window.tidalDiscoveryStates && window.tidalDiscoveryStates[identifier])
+                || {};
+            if (state.discovery_results && state.discovery_results[trackIndex]) {
+                const r = state.discovery_results[trackIndex];
+                r.status = '❌ Not Found';
+                r.status_class = 'not-found';
+                r.spotify_track = '-';
+                r.spotify_artist = '-';
+                r.spotify_album = '-';
+                r.spotify_data = null;
+                r.matched_data = null;
+                r.confidence = 0;
+                r.wing_it_fallback = false;
+                r.manual_match = false;
+            }
+            // Re-render the row — discovery rows use id="discovery-row-{urlHash}-{index}"
+            const row = document.getElementById(`discovery-row-${identifier}-${trackIndex}`);
+            if (row) {
+                const statusCell = row.querySelector('.discovery-status');
+                if (statusCell) { statusCell.textContent = '❌ Not Found'; statusCell.className = 'discovery-status not-found'; }
+                const matchedCells = row.querySelectorAll('.spotify-track, .spotify-artist, .spotify-album');
+                matchedCells.forEach(c => c.textContent = '-');
+                const actionsCell = row.querySelector('.discovery-actions');
+                if (actionsCell) {
+                    actionsCell.innerHTML = `<button class="fix-match-btn" onclick="openDiscoveryFixModal('${platform}', '${identifier}', ${trackIndex})" title="Manually search for this track">🔧 Fix</button>`;
+                }
+            }
+            showToast('Match removed', 'success');
+        } else {
+            showToast(data.error || 'Failed to remove match', 'error');
+        }
+    } catch (e) {
+        console.error('Unmatch error:', e);
+        showToast('Failed to remove match', 'error');
+    }
+}
+
+// Make functions available globally for onclick handlers
+window.openDiscoveryFixModal = openDiscoveryFixModal;
+window.closeDiscoveryFixModal = closeDiscoveryFixModal;
+window.searchDiscoveryFix = searchDiscoveryFix;
+window.unmatchDiscoveryTrack = unmatchDiscoveryTrack;
+window.openMatchingModal = openMatchingModal;
+window.closeMatchingModal = closeMatchingModal;
+window.selectArtist = selectArtist;
+window.selectAlbum = selectAlbum;
+window.navigateToPage = navigateToPage;
+window.showSupportModal = showSupportModal;
+window.closeSupportModal = closeSupportModal;
+window.copyAddress = copyAddress;
+window.retryLastSearch = retryLastSearch;
+window.showVersionInfo = showVersionInfo;
+window.closeVersionModal = closeVersionModal;
+window.testConnection = testConnection;
+window.autoDetectPlex = autoDetectPlex;
+window.autoDetectJellyfin = autoDetectJellyfin;
+window.autoDetectSlskd = autoDetectSlskd;
+window.startPlexPinAuth = startPlexPinAuth;
+window.cancelPlexPinAuth = cancelPlexPinAuth;
+window.restartPlexPinAuth = restartPlexPinAuth;
+window.showPlexConfiguration = showPlexConfiguration;
+window.toggleServer = toggleServer;
+window.authenticateSpotify = authenticateSpotify;
+window.authenticateTidal = authenticateTidal;
+window.togglePathLock = togglePathLock;
+window.selectResult = selectResult;
+window.startStream = startStream;
+window.streamTrack = streamTrack;
+window.streamAlbumTrack = streamAlbumTrack;
+window.startDownload = startDownload;
+window.downloadTrack = downloadTrack;
+window.downloadAlbum = downloadAlbum;
+window.toggleAlbumExpansion = toggleAlbumExpansion;
+window.downloadAlbumTrack = downloadAlbumTrack;
+window.switchDownloadTab = switchDownloadTab;
+window.cancelDownloadItem = cancelDownloadItem;
+window.clearFinishedDownloads = clearFinishedDownloads;
+
+window.matchedDownloadTrack = matchedDownloadTrack;
+window.matchedDownloadAlbum = matchedDownloadAlbum;
+window.matchedDownloadAlbumTrack = matchedDownloadAlbumTrack;
+
+/**
+ * Handle post-download cleanup: clear finished downloads from slskd.
+ * Scan and database update are now handled by system automations
+ * (batch_complete → scan_library → library_scan_completed → start_database_update).
+ */
+async function handlePostDownloadAutomation(playlistId, process) {
+    try {
+        const successfulDownloads = getSuccessfulDownloadCount(process);
+        if (successfulDownloads === 0) {
+            console.log(`🔄 [AUTO] No successful downloads for ${playlistId} - skipping cleanup`);
+            return;
+        }
+        console.log(`🔄 [AUTO] Post-download cleanup for ${playlistId} (${successfulDownloads} successful downloads)`);
+
+        // Clear completed downloads from slskd
+        try {
+            const clearResponse = await fetch('/api/downloads/clear-finished', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            if (clearResponse.ok) {
+                console.log(`✅ [AUTO] Completed downloads cleared`);
+            } else {
+                console.warn(`⚠️ [AUTO] Clear downloads failed, continuing anyway`);
+            }
+        } catch (error) {
+            console.warn(`⚠️ [AUTO] Clear error: ${error.message}`);
+        }
+    } catch (error) {
+        console.error(`❌ [AUTO] Error in post-download cleanup: ${error.message}`);
+    }
+}
+
+/**
+ * Extract successful download count from a download process
+ */
+function getSuccessfulDownloadCount(process) {
+    try {
+        // For processes that have completed, check the modal for completed count
+        if (process && process.modalElement) {
+            const statElement = process.modalElement.querySelector('[id*="stat-downloaded-"]');
+            if (statElement && statElement.textContent) {
+                const count = parseInt(statElement.textContent, 10);
+                return isNaN(count) ? 0 : count;
+            }
+        }
+
+        // Fallback: assume successful if process completed without obvious failure
+        if (process && process.status === 'complete') {
+            return 1; // Conservative assumption for single download
+        }
+
+        return 0;
+    } catch (error) {
+        console.warn(`⚠️ [AUTO] Error getting successful download count: ${error.message}`);
+        return 0;
+    }
+}
+
+// ===============================
+// ADD TO WISHLIST MODAL FUNCTIONS
+// ===============================
+
+let currentWishlistModalData = null;
+let wishlistModalVersion = 0;
+
+/**
+ * Open the Add to Wishlist modal for an album/EP/single
+ * @param {Object} album - Album object with id, name, image_url, etc.
+ * @param {Object} artist - Artist object with id, name, image_url
+ * @param {Array} tracks - Array of track objects
+ * @param {string} albumType - Type of release (album, EP, single)
+ */
+async function openAddToWishlistModal(album, artist, tracks, albumType, trackOwnership) {
+    wishlistModalVersion++;
+    showLoadingOverlay('Preparing wishlist...');
+    console.log(`🎵 Opening Add to Wishlist modal for: ${artist.name} - ${album.name}`);
+
+    try {
+        // Store current modal data for use by other functions
+        currentWishlistModalData = {
+            album,
+            artist,
+            tracks,
+            albumType
+        };
+
+        const modal = document.getElementById('add-to-wishlist-modal');
+        const overlay = document.getElementById('add-to-wishlist-modal-overlay');
+
+        if (!modal || !overlay) {
+            console.error('Add to wishlist modal elements not found');
+            return;
+        }
+
+        // Generate and populate hero section
+        const heroContent = generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership);
+        const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
+        if (heroContainer) {
+            heroContainer.innerHTML = heroContent;
+        }
+
+        // Generate and populate track list
+        const trackListHTML = generateWishlistTrackList(tracks, trackOwnership);
+        const trackListContainer = document.getElementById('wishlist-track-list');
+        if (trackListContainer) {
+            trackListContainer.innerHTML = trackListHTML;
+        }
+
+        // Set up the "Add to Wishlist" button click handler
+        const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
+        if (addToWishlistBtn) {
+            addToWishlistBtn.onclick = () => handleAddToWishlist();
+        }
+
+        // Show the modal
+        overlay.classList.remove('hidden');
+        hideLoadingOverlay();
+
+        console.log(`✅ Successfully opened Add to Wishlist modal for: ${album.name}`);
+
+    } catch (error) {
+        console.error('❌ Error opening Add to Wishlist modal:', error);
+        hideLoadingOverlay();
+        showToast(`Error opening wishlist modal: ${error.message}`, 'error');
+    }
+}
+
+/**
+ * Generate the hero section HTML for the wishlist modal
+ */
+function generateWishlistModalHeroSection(album, artist, tracks, albumType, trackOwnership) {
+    const artistImage = artist.image_url || '';
+    const albumImage = album.image_url || '';
+    const trackCount = tracks.length;
+
+    // Calculate missing tracks if ownership info is available
+    let trackDetailText = `${trackCount} track${trackCount !== 1 ? 's' : ''}`;
+    if (trackOwnership) {
+        const ownedCount = Object.values(trackOwnership).filter(v => v === true).length;
+        const missingCount = trackCount - ownedCount;
+        if (missingCount > 0 && ownedCount > 0) {
+            trackDetailText = `${missingCount} of ${trackCount} tracks missing`;
+        }
+    }
+
+    let heroBackgroundImage = '';
+    if (albumImage) {
+        heroBackgroundImage = `<div class="add-to-wishlist-modal-hero-bg" style="background-image: url('${albumImage}');"></div>`;
+    }
+
+    const heroContent = `
+        <div class="add-to-wishlist-modal-hero-content">
+            <div class="add-to-wishlist-modal-hero-images">
+                ${artistImage ? `<img class="add-to-wishlist-modal-hero-image artist" src="${artistImage}" alt="${escapeHtml(artist.name)}">` : ''}
+                ${albumImage ? `<img class="add-to-wishlist-modal-hero-image album" src="${albumImage}" alt="${escapeHtml(album.name)}">` : ''}
+            </div>
+            <div class="add-to-wishlist-modal-hero-metadata">
+                <h1 class="add-to-wishlist-modal-hero-title">${escapeHtml(album.name || 'Unknown Album')}</h1>
+                <div class="add-to-wishlist-modal-hero-subtitle">by ${escapeHtml(artist.name || 'Unknown Artist')}</div>
+                <div class="add-to-wishlist-modal-hero-details">
+                    <span class="add-to-wishlist-modal-hero-detail">${albumType || 'Album'}</span>
+                    <span class="add-to-wishlist-modal-hero-detail">${trackDetailText}</span>
+                </div>
+            </div>
+        </div>
+    `;
+
+    return `
+        ${heroBackgroundImage}
+        ${heroContent}
+    `;
+}
+
+/**
+ * Generate the track list HTML for the wishlist modal
+ */
+function generateWishlistTrackList(tracks, trackOwnership) {
+    if (!tracks || tracks.length === 0) {
+        return '<div style="text-align: center; padding: 40px; color: rgba(255, 255, 255, 0.6);">No tracks found</div>';
+    }
+
+    return tracks.map((track, index) => {
+        const trackNumber = track.track_number || (index + 1);
+        const trackName = escapeHtml(track.name || 'Unknown Track');
+        const artistsString = formatArtists(track.artists) || 'Unknown Artist';
+        const duration = formatDuration(track.duration_ms);
+
+        const trackData = trackOwnership ? trackOwnership[track.name] : null;
+        const isOwned = trackData && (trackData.owned === true || trackData === true);
+        const isKnown = trackData !== null && trackData !== undefined;
+        const ownershipClass = isOwned ? 'owned' : (isKnown && !isOwned ? 'missing' : '');
+        const badge = isOwned
+            ? '<div class="wishlist-track-badge owned"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></div>'
+            : '';
+
+        return `
+            <div class="wishlist-track-item ${ownershipClass}">
+                <div class="wishlist-track-number">${trackNumber}</div>
+                <div class="wishlist-track-info">
+                    <div class="wishlist-track-name">${trackName}</div>
+                    <div class="wishlist-track-artists">${artistsString}</div>
+                </div>
+                <div class="wishlist-track-duration">${duration}</div>
+                ${badge}
+            </div>
+        `;
+    }).join('');
+}
+
+/**
+ * Handle the "Add to Wishlist" button click
+ */
+async function handleAddToWishlist() {
+    if (!currentWishlistModalData) {
+        console.error('❌ No wishlist modal data available');
+        return;
+    }
+
+    const { album, artist, tracks, albumType } = currentWishlistModalData;
+    const addToWishlistBtn = document.getElementById('confirm-add-to-wishlist-btn');
+
+    try {
+        // Show loading state
+        if (addToWishlistBtn) {
+            addToWishlistBtn.classList.add('loading');
+            addToWishlistBtn.textContent = 'Adding...';
+            addToWishlistBtn.disabled = true;
+        }
+
+        console.log(`🔄 Adding ${tracks.length} tracks to wishlist for: ${artist.name} - ${album.name}`);
+
+        let successCount = 0;
+        let errorCount = 0;
+
+        // Add each track to wishlist individually
+        for (const track of tracks) {
+            try {
+                // Ensure artists field is in the correct format (array of objects)
+                let formattedArtists = track.artists;
+                if (typeof track.artists === 'string') {
+                    // If artists is a string, convert to array of objects
+                    formattedArtists = [{ name: track.artists }];
+                } else if (Array.isArray(track.artists)) {
+                    // If artists is already an array, ensure each item is an object
+                    formattedArtists = track.artists.map(artistItem => {
+                        if (typeof artistItem === 'string') {
+                            return { name: artistItem };
+                        } else if (typeof artistItem === 'object' && artistItem !== null) {
+                            return artistItem;
+                        } else {
+                            return { name: 'Unknown Artist' };
+                        }
+                    });
+                } else {
+                    // Fallback to array with single artist object
+                    formattedArtists = [{ name: artist.name }];
+                }
+
+                const formattedTrack = {
+                    ...track,
+                    artists: formattedArtists
+                };
+
+                // Use track's album data if available (from API), falling back to modal's album data
+                // This ensures consistency with how the Artists page handles wishlisting
+                let trackAlbum = track.album;
+                let trackAlbumType = albumType || 'album';
+
+                if (trackAlbum && typeof trackAlbum === 'object') {
+                    // Track has album data from API - use its album_type
+                    trackAlbumType = trackAlbum.album_type || albumType || 'album';
+                    // Ensure album has required fields
+                    if (!trackAlbum.name) {
+                        trackAlbum.name = album.name;
+                    }
+                    if (!trackAlbum.id) {
+                        trackAlbum.id = album.id;
+                    }
+                } else {
+                    // Fall back to the album passed to the modal
+                    trackAlbum = album;
+                }
+
+                console.log(`🔄 Adding track with formatted artists:`, formattedTrack.name, formattedTrack.artists);
+                console.log(`🔄 Using album_type: ${trackAlbumType} (from ${track.album ? 'track.album' : 'modal album'})`);
+
+                const response = await fetch('/api/add-album-to-wishlist', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        track: formattedTrack,
+                        artist: artist,
+                        album: trackAlbum,
+                        source_type: 'album',
+                        source_context: {
+                            album_name: trackAlbum.name,
+                            artist_name: artist.name,
+                            album_type: trackAlbumType
+                        }
+                    })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    successCount++;
+                    console.log(`✅ Added "${track.name}" to wishlist`);
+                } else {
+                    errorCount++;
+                    console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
+                }
+
+            } catch (error) {
+                errorCount++;
+                console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
+            }
+        }
+
+        // Show completion message
+        if (successCount > 0) {
+            const message = errorCount > 0
+                ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
+                : `Added ${successCount} tracks to wishlist`;
+            showToast(message, successCount === tracks.length ? 'success' : 'warning');
+        } else {
+            showToast('Failed to add any tracks to wishlist', 'error');
+        }
+
+        // Close the modal
+        closeAddToWishlistModal();
+
+        console.log(`✅ Wishlist addition complete: ${successCount} successful, ${errorCount} failed`);
+
+    } catch (error) {
+        console.error('❌ Error in handleAddToWishlist:', error);
+        showToast(`Error adding to wishlist: ${error.message}`, 'error');
+    } finally {
+        // Reset button state
+        if (addToWishlistBtn) {
+            addToWishlistBtn.classList.remove('loading');
+            addToWishlistBtn.textContent = 'Add to Wishlist';
+            addToWishlistBtn.disabled = false;
+        }
+    }
+}
+
+/**
+ * Lazy-load per-track ownership indicators into an already-open wishlist modal.
+ * Fetches ownership from the backend, then updates the modal DOM in-place.
+ * If all tracks are owned (Spotify metadata discrepancy), also fixes the source card.
+ */
+async function lazyLoadTrackOwnership(artistName, tracks, sourceCard, albumName = null) {
+    const myVersion = wishlistModalVersion;
+    try {
+        const checkBody = {
+            artist_name: artistName,
+            tracks: tracks.map(t => ({ name: t.name, track_number: t.track_number }))
+        };
+        if (albumName) checkBody.album_name = albumName;
+        const resp = await fetch('/api/library/check-tracks', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(checkBody)
+        });
+        const data = await resp.json();
+        if (!data.success) return;
+
+        // Guard against stale updates if user reopened modal for a different album
+        if (myVersion !== wishlistModalVersion) return;
+
+        const ownership = data.owned_tracks;
+        const trackItems = document.querySelectorAll('#wishlist-track-list .wishlist-track-item');
+
+        let ownedCount = 0;
+        trackItems.forEach((item, index) => {
+            const track = tracks[index];
+            if (!track) return;
+            const trackData = ownership[track.name];
+            const isOwned = trackData && trackData.owned === true;
+            if (isOwned) {
+                ownedCount++;
+                item.classList.add('owned');
+                // Add metadata line below track name
+                const trackInfo = item.querySelector('.wishlist-track-info');
+                if (trackInfo && (trackData.format || trackData.bitrate)) {
+                    const metaDiv = document.createElement('div');
+                    metaDiv.className = 'wishlist-track-meta';
+                    let metaHtml = '';
+                    if (trackData.format === 'MP3' && trackData.bitrate) {
+                        metaHtml += `<span class="wishlist-track-format">MP3 ${trackData.bitrate}</span>`;
+                    } else {
+                        if (trackData.format) {
+                            metaHtml += `<span class="wishlist-track-format">${trackData.format}</span>`;
+                        }
+                        if (trackData.bitrate) {
+                            metaHtml += `<span class="wishlist-track-bitrate">${trackData.bitrate} kbps</span>`;
+                        }
+                    }
+                    metaDiv.innerHTML = metaHtml;
+                    trackInfo.appendChild(metaDiv);
+                }
+                const badge = document.createElement('div');
+                badge.className = 'wishlist-track-badge owned';
+                badge.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+                item.appendChild(badge);
+            } else {
+                item.classList.add('missing');
+            }
+        });
+
+        // Aggregate format summary from owned tracks
+        const formatSet = new Set();
+        for (const trackName of Object.keys(ownership)) {
+            const td = ownership[trackName];
+            if (td && td.owned && td.format) {
+                if (td.format === 'MP3' && td.bitrate) {
+                    formatSet.add(`MP3-${td.bitrate}`);
+                } else {
+                    formatSet.add(td.format);
+                }
+            }
+        }
+        if (formatSet.size > 0) {
+            const heroDetailsContainer = document.querySelector('.add-to-wishlist-modal-hero-details');
+            if (heroDetailsContainer) {
+                // Remove any existing format tag
+                const existing = heroDetailsContainer.querySelector('.modal-format-tag');
+                if (existing) existing.remove();
+                const formatTag = document.createElement('span');
+                formatTag.className = 'modal-format-tag';
+                formatTag.textContent = [...formatSet].sort().join(' / ');
+                heroDetailsContainer.appendChild(formatTag);
+            }
+        }
+
+        // Update hero subtitle with missing count
+        const missingCount = tracks.length - ownedCount;
+        const heroDetails = document.querySelectorAll('.add-to-wishlist-modal-hero-detail');
+        const trackDetailEl = heroDetails.length > 1 ? heroDetails[heroDetails.length - 1] : null;
+        if (trackDetailEl && missingCount > 0 && ownedCount > 0) {
+            trackDetailEl.textContent = `${missingCount} of ${tracks.length} tracks missing`;
+        }
+
+        // If ALL returned tracks are owned, this is a Spotify metadata discrepancy
+        // (e.g. total_tracks says 15 but API only returns 14, and all 14 are owned)
+        // Fix the source card to show complete
+        if (missingCount === 0 && sourceCard && sourceCard._releaseData) {
+            sourceCard._releaseData.track_completion = {
+                owned_tracks: ownedCount,
+                total_tracks: tracks.length,
+                percentage: 100,
+                missing_tracks: 0
+            };
+            const completionText = sourceCard.querySelector('.completion-text');
+            if (completionText) {
+                completionText.textContent = `Complete (${ownedCount})`;
+                completionText.className = 'completion-text complete';
+                completionText.title = '';
+            }
+            const completionFill = sourceCard.querySelector('.completion-fill');
+            if (completionFill) {
+                completionFill.style.width = '100%';
+                completionFill.classList.remove('partial');
+                completionFill.classList.add('complete');
+            }
+        }
+    } catch (e) {
+        console.warn('Could not load track ownership:', e);
+    }
+}
+
+/**
+ * Close the Add to Wishlist modal
+ */
+function closeAddToWishlistModal() {
+    console.log('🔄 Closing Add to Wishlist modal');
+
+    try {
+        const overlay = document.getElementById('add-to-wishlist-modal-overlay');
+        if (overlay) {
+            overlay.classList.add('hidden');
+        }
+
+        // Clear current modal data
+        currentWishlistModalData = null;
+
+        // Clear hero content
+        const heroContainer = document.getElementById('add-to-wishlist-modal-hero');
+        if (heroContainer) {
+            heroContainer.innerHTML = '';
+        }
+
+        // Clear track list
+        const trackListContainer = document.getElementById('wishlist-track-list');
+        if (trackListContainer) {
+            trackListContainer.innerHTML = '';
+        }
+
+        console.log('✅ Add to Wishlist modal closed successfully');
+
+    } catch (error) {
+        console.error('❌ Error closing Add to Wishlist modal:', error);
+    }
+}
+
+/**
+ * Handle "Download Now" button click from the Add to Wishlist modal.
+ * Captures modal data, closes the wishlist modal, then opens the download missing tracks modal.
+ */
+async function handleWishlistDownloadNow() {
+    if (!currentWishlistModalData) {
+        showToast('No album data available', 'error');
+        return;
+    }
+
+    // Capture data before closeAddToWishlistModal clears it
+    const { album, artist, tracks, albumType } = currentWishlistModalData;
+
+    // Close the wishlist modal
+    closeAddToWishlistModal();
+
+    // Build virtual playlist ID and name (same pattern as createArtistAlbumVirtualPlaylist)
+    const virtualPlaylistId = `artist_album_${artist.id}_${album.id}`;
+    const playlistName = `[${artist.name}] ${album.name}`;
+
+    // If a download process already exists for this album, just show the existing modal
+    if (activeDownloadProcesses[virtualPlaylistId]) {
+        const process = activeDownloadProcesses[virtualPlaylistId];
+        if (process.modalElement) {
+            process.modalElement.style.display = 'flex';
+        }
+        return;
+    }
+
+    // Open download missing modal (reuses existing function)
+    showLoadingOverlay('Loading album...');
+    await openDownloadMissingModalForArtistAlbum(
+        virtualPlaylistId, playlistName, tracks, album, artist, false
+    );
+    hideLoadingOverlay();
+
+    // Register download bubble (reuses existing artist bubble system)
+    registerArtistDownload(artist, album, virtualPlaylistId, albumType);
+}
+
+/**
+ * Add all tracks from any download modal to the wishlist
+ * Universal handler for all modal types (artist albums, playlists, YouTube, Tidal, etc.)
+ */
+async function addModalTracksToWishlist(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) {
+        console.error('❌ No active process found for:', playlistId);
+        showToast('Error: Could not find playlist data', 'error');
+        return;
+    }
+
+    // Verify we have tracks
+    if (!process.tracks || process.tracks.length === 0) {
+        console.error('❌ No tracks found in process:', process);
+        showToast('Error: No tracks to add', 'error');
+        return;
+    }
+
+    // Filter tracks based on checkbox selection (if checkboxes exist in this modal)
+    const wishlistTbody = document.getElementById(`download-tracks-tbody-${playlistId}`);
+    let tracks = process.tracks;
+    if (wishlistTbody) {
+        const allCbs = wishlistTbody.querySelectorAll('.track-select-cb');
+        if (allCbs.length > 0) {
+            const checkedCbs = wishlistTbody.querySelectorAll('.track-select-cb:checked');
+            const selectedIndices = new Set([...checkedCbs].map(cb => parseInt(cb.dataset.trackIndex)));
+            tracks = process.tracks.filter((_, i) => selectedIndices.has(i));
+        }
+    }
+
+    // Get album context if available (for artist album downloads)
+    // Artist is resolved per-track below — process.artist is only set for album downloads,
+    // not for playlists, so we must NOT use it as a blanket default.
+    const processArtist = process.artist || null;
+    const album = process.album || process.playlist || { name: 'Playlist', id: playlistId };
+
+    console.log(`🔄 Adding ${tracks.length} tracks from "${album.name}" to wishlist (process artist: ${processArtist?.name || 'per-track'})`);
+
+    // Disable the button to prevent double-clicks
+    const wishlistBtn = document.getElementById(`add-to-wishlist-btn-${playlistId}`);
+    if (wishlistBtn) {
+        wishlistBtn.disabled = true;
+        wishlistBtn.classList.add('loading');
+        wishlistBtn.textContent = 'Adding...';
+    }
+
+    try {
+        let successCount = 0;
+        let errorCount = 0;
+
+        // Add each track to wishlist individually
+        let wingItSkipped = 0;
+        for (const track of tracks) {
+            try {
+                // Skip wing-it fallback tracks — they have no real metadata,
+                // adding them to wishlist would just retry with raw data
+                const trackId = track.id || '';
+                if (String(trackId).startsWith('wing_it_')) {
+                    wingItSkipped++;
+                    console.log(`⏭️ Skipping wing-it track from wishlist: ${track.name}`);
+                    continue;
+                }
+
+                // Format artists field to match backend expectations
+                let formattedArtists = track.artists;
+                if (typeof track.artists === 'string') {
+                    formattedArtists = [{ name: track.artists }];
+                } else if (Array.isArray(track.artists)) {
+                    formattedArtists = track.artists.map(artistItem => {
+                        if (typeof artistItem === 'string') {
+                            return { name: artistItem };
+                        } else if (typeof artistItem === 'object' && artistItem !== null) {
+                            return artistItem;
+                        } else {
+                            return { name: 'Unknown Artist' };
+                        }
+                    });
+                } else {
+                    formattedArtists = [{ name: artist.name }];
+                }
+
+                const formattedTrack = {
+                    ...track,
+                    artists: formattedArtists
+                };
+
+                // Use track's own album data if available
+                // Convert string album names to objects if needed (no Spotify fetch!)
+                let trackAlbum = track.album;
+                let trackAlbumType = 'album';
+
+                // Handle both object and string album formats
+                if (typeof trackAlbum === 'string') {
+                    // Album is just a string - convert to minimal object
+                    trackAlbum = {
+                        name: trackAlbum,
+                        album_type: 'album',
+                        images: []
+                    };
+                    trackAlbumType = 'album';
+                } else if (trackAlbum && typeof trackAlbum === 'object') {
+                    // Album is already an object - extract album_type
+                    trackAlbumType = trackAlbum.album_type || 'album';
+                    // Ensure it has a name
+                    if (!trackAlbum.name) {
+                        trackAlbum.name = 'Unknown Album';
+                    }
+                } else {
+                    // No album data at all - create minimal object
+                    trackAlbum = {
+                        name: 'Unknown Album',
+                        album_type: 'album',
+                        images: []
+                    };
+                    trackAlbumType = 'album';
+                }
+
+                // Resolve artist: for album downloads, use the album-level artist to keep
+                // all tracks grouped under one artist in the wishlist. Per-track artists
+                // (like individual vocalists on a soundtrack) should NOT split the album.
+                let trackArtist;
+                if (processArtist && processArtist.name) {
+                    // Album context exists — use album artist to keep tracks grouped
+                    trackArtist = processArtist;
+                } else if (formattedArtists.length > 0 && formattedArtists[0].name && formattedArtists[0].name !== 'Unknown Artist') {
+                    // No album context (playlist/single) — use track's own artist
+                    trackArtist = formattedArtists[0];
+                } else {
+                    trackArtist = { name: 'Unknown Artist', id: null };
+                }
+
+                const response = await fetch('/api/add-album-to-wishlist', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        track: formattedTrack,
+                        artist: trackArtist,
+                        album: trackAlbum,
+                        source_type: 'album',
+                        source_context: {
+                            album_name: trackAlbum.name,
+                            artist_name: trackArtist.name,
+                            album_type: trackAlbumType
+                        }
+                    })
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    successCount++;
+                } else {
+                    errorCount++;
+                    console.error(`❌ Failed to add "${track.name}" to wishlist: ${result.error}`);
+                }
+            } catch (error) {
+                errorCount++;
+                console.error(`❌ Error adding "${track.name}" to wishlist:`, error);
+            }
+        }
+
+        // Show result toast
+        if (successCount > 0) {
+            let message = errorCount > 0
+                ? `Added ${successCount}/${tracks.length} tracks to wishlist (${errorCount} failed)`
+                : `Added ${successCount} tracks to wishlist`;
+            if (wingItSkipped > 0) message += ` (${wingItSkipped} wing-it skipped)`;
+            showToast(message, 'success');
+
+            // Close the modal on success
+            await closeDownloadMissingModal(playlistId);
+        } else {
+            showToast('Failed to add any tracks to wishlist', 'error');
+        }
+
+    } catch (error) {
+        console.error('❌ Error in addModalTracksToWishlist:', error);
+        showToast(`Error adding to wishlist: ${error.message}`, 'error');
+    } finally {
+        // Re-enable button if still on screen (in case of error)
+        if (wishlistBtn) {
+            wishlistBtn.disabled = false;
+            wishlistBtn.classList.remove('loading');
+            wishlistBtn.textContent = 'Add to Wishlist';
+        }
+    }
+}
+
+/**
+ * Format duration from milliseconds to MM:SS format
+ */
+function formatDuration(durationMs) {
+    if (!durationMs || durationMs <= 0) {
+        return '--:--';
+    }
+
+    const totalSeconds = Math.floor(durationMs / 1000);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+// Download Missing Tracks Modal functions
+window.openDownloadMissingModal = openDownloadMissingModal;
+window.closeDownloadMissingModal = closeDownloadMissingModal;
+window.startMissingTracksProcess = startMissingTracksProcess;
+window.cancelAllOperations = cancelAllOperations;
+window.cancelTrackDownload = cancelTrackDownload; // Legacy system
+window.cancelTrackDownloadV2 = cancelTrackDownloadV2; // NEW V2 system
+window.handleViewProgressClick = handleViewProgressClick;
+
+// Wishlist Modal functions (existing)
+window.openDownloadMissingWishlistModal = openDownloadMissingWishlistModal;
+window.startWishlistMissingTracksProcess = startWishlistMissingTracksProcess;
+window.handleWishlistButtonClick = handleWishlistButtonClick;
+
+// Wishlist Overview Modal functions (new)
+window.openWishlistOverviewModal = openWishlistOverviewModal;
+window.closeWishlistOverviewModal = closeWishlistOverviewModal;
+window.selectWishlistCategory = selectWishlistCategory;
+window.backToCategories = backToCategories;
+window.downloadSelectedCategory = downloadSelectedCategory;
+
+// Add to Wishlist Modal functions (new)
+window.openAddToWishlistModal = openAddToWishlistModal;
+window.closeAddToWishlistModal = closeAddToWishlistModal;
+window.handleAddToWishlist = handleAddToWishlist;
+window.handleWishlistDownloadNow = handleWishlistDownloadNow;
+window.addModalTracksToWishlist = addModalTracksToWishlist;
+
+// Helper functions
+window.escapeHtml = escapeHtml;
+window.formatArtists = formatArtists;
+
+// Artist Download Management functions
+window.closeArtistDownloadModal = closeArtistDownloadModal;
+window.openArtistDownloadProcess = openArtistDownloadProcess;
+window.bulkCompleteArtistDownloads = bulkCompleteArtistDownloads;
+window.refreshAllArtistDownloadStatuses = refreshAllArtistDownloadStatuses;
+
+
+// APPEND THIS JAVASCRIPT SNIPPET (B)
+
+function initializeFilters() {
+    const toggleBtn = document.getElementById('filter-toggle-btn');
+    const container = document.getElementById('filters-container');
+    const content = document.getElementById('filter-content');
+
+    if (toggleBtn && container && content) {
+        // Using .onclick ensures we only ever have one click handler
+        toggleBtn.onclick = () => {
+            const isExpanded = container.classList.contains('expanded');
+
+            if (isExpanded) {
+                // Collapse the container
+                container.classList.remove('expanded');
+                toggleBtn.textContent = '⏷ Filters';
+            } else {
+                // Expand the container
+                content.classList.remove('hidden'); // Make sure content is visible for animation
+                container.classList.add('expanded');
+                toggleBtn.textContent = '⏶ Filters';
+            }
+        };
+    }
+
+    // This part is correct and doesn't need to change
+    document.querySelectorAll('.filter-btn').forEach(button => {
+        button.addEventListener('click', handleFilterClick);
+    });
+}
+
+function handleFilterClick(event) {
+    const button = event.target;
+    const filterType = button.dataset.filterType;
+    const value = button.dataset.value;
+
+    if (filterType === 'type') currentFilterType = value;
+    if (filterType === 'format') currentFilterFormat = value;
+    if (filterType === 'sort') currentSortBy = value;
+
+    if (button.id === 'sort-order-btn') {
+        isSortReversed = !isSortReversed;
+        button.textContent = isSortReversed ? '↑' : '↓';
+    }
+
+    document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
+        btn.classList.remove('active');
+    });
+    if (filterType) { // Don't try to activate the sort order button
+        button.classList.add('active');
+    }
+
+    applyFiltersAndSort();
+}
+
+function resetFilters() {
+    currentFilterType = 'all';
+    currentFilterFormat = 'all';
+    currentSortBy = 'quality_score';
+    isSortReversed = false;
+
+    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
+    document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
+    document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
+    document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
+    document.getElementById('sort-order-btn').textContent = '↓';
+}
+
+function applyFiltersAndSort() {
+    let processedResults = [...allSearchResults];
+    const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
+
+    // 1. Filter by Type
+    if (currentFilterType !== 'all') {
+        processedResults = processedResults.filter(r => r.result_type === currentFilterType);
+    }
+
+    // 2. Filter by Format
+    if (currentFilterFormat !== 'all') {
+        processedResults = processedResults.filter(r => {
+            const quality = (r.dominant_quality || r.quality || '').toLowerCase();
+            return quality === currentFilterFormat;
+        });
+    }
+
+    // 3. Sort Results
+    processedResults.sort((a, b) => {
+        let valA, valB;
+
+        // Special handling for relevance sort
+        if (currentSortBy === 'relevance') {
+            valA = calculateRelevanceScore(a, query);
+            valB = calculateRelevanceScore(b, query);
+            return valB - valA; // Higher score is better
+        }
+
+        // Special handling for availability
+        if (currentSortBy === 'availability') {
+            valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
+            valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
+            return valB - valA;
+        }
+
+        valA = a[currentSortBy] || 0;
+        valB = b[currentSortBy] || 0;
+
+        if (typeof valA === 'string') {
+            // For name/title sort, use the correct property
+            const titleA = (a.album_title || a.title || '').toLowerCase();
+            const titleB = (b.album_title || b.title || '').toLowerCase();
+            return titleA.localeCompare(titleB);
+        }
+
+        // Default numeric sort (descending)
+        return valB - valA;
+    });
+
+    // Handle sort direction toggle
+    const sortDefaults = {
+        relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
+        upload_speed: 'desc', duration: 'desc', availability: 'desc',
+        title: 'asc', username: 'asc'
+    };
+
+    const defaultOrder = sortDefaults[currentSortBy] || 'desc';
+    if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
+        processedResults.reverse();
+    }
+
+    displayDownloadsResults(processedResults);
+}
+
+function calculateRelevanceScore(result, query) {
+    let score = 0.0;
+    const queryTerms = query.split(' ').filter(t => t.length > 1);
+
+    // 1. Search Term Matching (40%)
+    let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
+    let termMatches = 0;
+    for (const term of queryTerms) {
+        if (searchableText.includes(term)) {
+            termMatches++;
+        }
+    }
+    score += (termMatches / queryTerms.length) * 0.40;
+
+    // 2. Quality Score (25%)
+    score += (result.quality_score || 0) * 0.25;
+
+    // 3. User Reliability (Availability & Speed) (20%)
+    const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
+    score += reliability * 0.20;
+
+    // 4. File Completeness (Bitrate & Duration) (15%)
+    const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
+    score += completeness * 0.15;
+
+    return score;
+}
+// APPEND THIS JAVASCRIPT SNIPPET (B)
+
+function initializeFilters() {
+    const toggleBtn = document.getElementById('filter-toggle-btn');
+    const container = document.getElementById('filters-container');
+    const content = document.getElementById('filter-content');
+
+    if (toggleBtn && container && content) {
+        // Using .onclick ensures we only ever have one click handler
+        toggleBtn.onclick = () => {
+            const isExpanded = container.classList.contains('expanded');
+
+            if (isExpanded) {
+                // Collapse the container
+                container.classList.remove('expanded');
+                toggleBtn.textContent = '⏷ Filters';
+            } else {
+                // Expand the container
+                content.classList.remove('hidden'); // Make sure content is visible for animation
+                container.classList.add('expanded');
+                toggleBtn.textContent = '⏶ Filters';
+            }
+        };
+    }
+
+    // This part is correct and doesn't need to change
+    document.querySelectorAll('.filter-btn').forEach(button => {
+        button.addEventListener('click', handleFilterClick);
+    });
+}
+
+function handleFilterClick(event) {
+    const button = event.target;
+    const filterType = button.dataset.filterType;
+    const value = button.dataset.value;
+
+    if (filterType === 'type') currentFilterType = value;
+    if (filterType === 'format') currentFilterFormat = value;
+    if (filterType === 'sort') currentSortBy = value;
+
+    if (button.id === 'sort-order-btn') {
+        isSortReversed = !isSortReversed;
+        button.textContent = isSortReversed ? '↑' : '↓';
+    }
+
+    document.querySelectorAll(`.filter-btn[data-filter-type="${filterType}"]`).forEach(btn => {
+        btn.classList.remove('active');
+    });
+    if (filterType) { // Don't try to activate the sort order button
+        button.classList.add('active');
+    }
+
+    applyFiltersAndSort();
+}
+
+function resetFilters() {
+    currentFilterType = 'all';
+    currentFilterFormat = 'all';
+    currentSortBy = 'quality_score';
+    isSortReversed = false;
+
+    document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
+    document.querySelector('.filter-btn[data-filter-type="type"][data-value="all"]').classList.add('active');
+    document.querySelector('.filter-btn[data-filter-type="format"][data-value="all"]').classList.add('active');
+    document.querySelector('.filter-btn[data-filter-type="sort"][data-value="quality_score"]').classList.add('active');
+    document.getElementById('sort-order-btn').textContent = '↓';
+}
+
+function applyFiltersAndSort() {
+    let processedResults = [...allSearchResults];
+    const query = document.getElementById('downloads-search-input').value.trim().toLowerCase();
+
+    // 1. Filter by Type
+    if (currentFilterType !== 'all') {
+        processedResults = processedResults.filter(r => r.result_type === currentFilterType);
+    }
+
+    // 2. Filter by Format
+    if (currentFilterFormat !== 'all') {
+        processedResults = processedResults.filter(r => {
+            const quality = (r.dominant_quality || r.quality || '').toLowerCase();
+            return quality === currentFilterFormat;
+        });
+    }
+
+    // 3. Sort Results
+    processedResults.sort((a, b) => {
+        let valA, valB;
+
+        // Special handling for relevance sort
+        if (currentSortBy === 'relevance') {
+            valA = calculateRelevanceScore(a, query);
+            valB = calculateRelevanceScore(b, query);
+            return valB - valA; // Higher score is better
+        }
+
+        // Special handling for availability
+        if (currentSortBy === 'availability') {
+            valA = (a.free_upload_slots || 0) - (a.queue_length || 0) * 0.1;
+            valB = (b.free_upload_slots || 0) - (b.queue_length || 0) * 0.1;
+            return valB - valA;
+        }
+
+        valA = a[currentSortBy] || 0;
+        valB = b[currentSortBy] || 0;
+
+        if (typeof valA === 'string') {
+            // For name/title sort, use the correct property
+            const titleA = (a.album_title || a.title || '').toLowerCase();
+            const titleB = (b.album_title || b.title || '').toLowerCase();
+            return titleA.localeCompare(titleB);
+        }
+
+        // Default numeric sort (descending)
+        return valB - valA;
+    });
+
+    // Handle sort direction toggle
+    const sortDefaults = {
+        relevance: 'desc', quality_score: 'desc', size: 'desc', bitrate: 'desc',
+        upload_speed: 'desc', duration: 'desc', availability: 'desc',
+        title: 'asc', username: 'asc'
+    };
+
+    const defaultOrder = sortDefaults[currentSortBy] || 'desc';
+    if ((defaultOrder === 'asc' && isSortReversed) || (defaultOrder === 'desc' && !isSortReversed)) {
+        processedResults.reverse();
+    }
+
+    displayDownloadsResults(processedResults);
+}
+
+function calculateRelevanceScore(result, query) {
+    let score = 0.0;
+    const queryTerms = query.split(' ').filter(t => t.length > 1);
+
+    // 1. Search Term Matching (40%)
+    let searchableText = `${result.title || ''} ${result.artist || ''} ${result.album || ''} ${result.album_title || ''}`.toLowerCase();
+    let termMatches = 0;
+    for (const term of queryTerms) {
+        if (searchableText.includes(term)) {
+            termMatches++;
+        }
+    }
+    score += (termMatches / queryTerms.length) * 0.40;
+
+    // 2. Quality Score (25%)
+    score += (result.quality_score || 0) * 0.25;
+
+    // 3. User Reliability (Availability & Speed) (20%)
+    const reliability = ((result.free_upload_slots || 0) > 0 ? 0.5 : 0) + Math.min(1, (result.upload_speed || 0) / 500) * 0.5;
+    score += reliability * 0.20;
+
+    // 4. File Completeness (Bitrate & Duration) (15%)
+    const completeness = (Math.min(1, (result.bitrate || 0) / 320) * 0.5) + (result.duration > 0 ? 0.5 : 0);
+    score += completeness * 0.15;
+
+    return score;
+}
+
+// Add to global scope for onclick
+window.handleFilterClick = handleFilterClick;
+
+// ===============================
+// MATCHED DOWNLOADS MODAL
+// ===============================
+
+// Global state for matching modal
+let currentMatchingData = {
+    searchResult: null,
+    isAlbumDownload: false,
+    albumResult: null,
+    selectedArtist: null,
+    selectedAlbum: null,
+    currentStage: 'artist' // 'artist' or 'album'
+};
+
+let searchTimers = {
+    artist: null,
+    album: null
+};
+
+function openMatchingModal(searchResult, isAlbumDownload = false, albumResult = null) {
+    console.log('🎯 Opening matching modal for:', searchResult);
+
+    // Store the current matching data
+    currentMatchingData = {
+        searchResult: searchResult,
+        isAlbumDownload: isAlbumDownload,
+        albumResult: albumResult,
+        selectedArtist: null,
+        selectedAlbum: null,
+        currentStage: 'artist'
+    };
+
+    // Show modal
+    const overlay = document.getElementById('matching-modal-overlay');
+    overlay.classList.remove('hidden');
+
+    // Reset modal state
+    resetModalState();
+
+    // Set appropriate title and stage
+    const modalTitle = document.getElementById('matching-modal-title');
+    const artistStageTitle = document.getElementById('artist-stage-title');
+
+    if (isAlbumDownload) {
+        modalTitle.textContent = 'Match Album Download to Spotify';
+        artistStageTitle.textContent = 'Step 1: Select the correct Artist';
+        document.getElementById('album-selection-stage').style.display = 'block';
+    } else {
+        modalTitle.textContent = 'Match Download to Spotify';
+        artistStageTitle.textContent = 'Select the correct Artist for this Single';
+        document.getElementById('album-selection-stage').style.display = 'none';
+    }
+
+    // Generate initial artist suggestions
+    fetchArtistSuggestions();
+
+    // Setup event listeners
+    setupModalEventListeners();
+}
+
+function closeMatchingModal() {
+    const overlay = document.getElementById('matching-modal-overlay');
+    overlay.classList.add('hidden');
+
+    // Clear timers
+    Object.values(searchTimers).forEach(timer => {
+        if (timer) clearTimeout(timer);
+    });
+
+    // Reset state
+    currentMatchingData = {
+        searchResult: null,
+        isAlbumDownload: false,
+        albumResult: null,
+        selectedArtist: null,
+        selectedAlbum: null,
+        currentStage: 'artist'
+    };
+}
+
+function resetModalState() {
+    // Show artist stage, hide album stage
+    document.getElementById('artist-selection-stage').classList.remove('hidden');
+    document.getElementById('album-selection-stage').classList.add('hidden');
+
+    // Clear all suggestion containers
+    document.getElementById('artist-suggestions').innerHTML = '';
+    document.getElementById('artist-manual-results').innerHTML = '';
+    document.getElementById('album-suggestions').innerHTML = '';
+    document.getElementById('album-manual-results').innerHTML = '';
+
+    // Clear search inputs
+    document.getElementById('artist-search-input').value = '';
+    document.getElementById('album-search-input').value = '';
+
+    // Reset button states
+    document.getElementById('confirm-match-btn').disabled = true;
+
+    // Reset selections
+    currentMatchingData.selectedArtist = null;
+    currentMatchingData.selectedAlbum = null;
+    currentMatchingData.currentStage = 'artist';
+}
+
+function setupModalEventListeners() {
+    // Search input listeners
+    const artistInput = document.getElementById('artist-search-input');
+    const albumInput = document.getElementById('album-search-input');
+
+    artistInput.removeEventListener('input', handleArtistSearch);
+    artistInput.addEventListener('input', handleArtistSearch);
+
+    albumInput.removeEventListener('input', handleAlbumSearch);
+    albumInput.addEventListener('input', handleAlbumSearch);
+
+    // Button listeners
+    const skipBtn = document.getElementById('skip-matching-btn');
+    const cancelBtn = document.getElementById('cancel-match-btn');
+    const confirmBtn = document.getElementById('confirm-match-btn');
+
+    skipBtn.onclick = skipMatching;
+    cancelBtn.onclick = closeMatchingModal;
+    confirmBtn.onclick = confirmMatch;
+}
+
+async function fetchArtistSuggestions() {
+    try {
+        showLoadingCards('artist-suggestions', 'Finding artist...');
+
+        const response = await fetch('/api/match/suggestions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                search_result: currentMatchingData.searchResult,
+                context: 'artist',
+                is_album: currentMatchingData.isAlbumDownload,
+                album_result: currentMatchingData.albumResult
+            })
+        });
+
+        const data = await response.json();
+        if (data.suggestions) {
+            renderArtistSuggestions(data.suggestions);
+        } else {
+            showNoResultsMessage('artist-suggestions', 'No artist suggestions found');
+        }
+    } catch (error) {
+        console.error('Error fetching artist suggestions:', error);
+        showNoResultsMessage('artist-suggestions', 'Error loading suggestions');
+    }
+}
+
+async function fetchAlbumSuggestions() {
+    if (!currentMatchingData.selectedArtist) return;
+
+    try {
+        showLoadingCards('album-suggestions', 'Finding album...');
+
+        const response = await fetch('/api/match/suggestions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                search_result: currentMatchingData.searchResult,
+                context: 'album',
+                selected_artist: currentMatchingData.selectedArtist
+            })
+        });
+
+        const data = await response.json();
+        if (data.suggestions) {
+            renderAlbumSuggestions(data.suggestions);
+        } else {
+            showNoResultsMessage('album-suggestions', 'No album suggestions found');
+        }
+    } catch (error) {
+        console.error('Error fetching album suggestions:', error);
+        showNoResultsMessage('album-suggestions', 'Error loading suggestions');
+    }
+}
+
+function renderArtistSuggestions(suggestions) {
+    const container = document.getElementById('artist-suggestions');
+    container.innerHTML = '';
+
+    if (!suggestions.length) {
+        showNoResultsMessage('artist-suggestions', 'No artist matches found');
+        return;
+    }
+
+    suggestions.forEach(suggestion => {
+        const card = createArtistCard(suggestion.artist, suggestion.confidence);
+        container.appendChild(card);
+    });
+}
+
+function renderAlbumSuggestions(suggestions) {
+    const container = document.getElementById('album-suggestions');
+    container.innerHTML = '';
+
+    if (!suggestions.length) {
+        showNoResultsMessage('album-suggestions', 'No album matches found');
+        return;
+    }
+
+    suggestions.forEach(suggestion => {
+        const card = createAlbumCard(suggestion.album, suggestion.confidence);
+        container.appendChild(card);
+    });
+}
+
+function createArtistCard(artist, confidence) {
+    const card = document.createElement('div');
+    card.className = 'suggestion-card';
+    card.onclick = () => selectArtist(artist);
+
+    const imageUrl = artist.image_url || '';
+    const confidencePercent = Math.round(confidence * 100);
+
+    // Add data attribute for lazy loading
+    card.dataset.artistId = artist.id;
+    card.dataset.needsImage = imageUrl ? 'false' : 'true';
+
+    card.innerHTML = `
+        <div class="suggestion-card-overlay"></div>
+        <div class="suggestion-card-content">
+            <div class="suggestion-card-name" title="${escapeHtml(artist.name)}">${escapeHtml(artist.name)}</div>
+            <div class="suggestion-card-details">
+                ${artist.genres && artist.genres.length ? escapeHtml(artist.genres.slice(0, 2).join(', ')) : 'Artist'}
+            </div>
+            <div class="suggestion-card-confidence">${confidencePercent}% match</div>
+        </div>
+    `;
+
+    // Set background image if available
+    if (imageUrl) {
+        card.style.backgroundImage = `url(${imageUrl})`;
+        card.style.backgroundSize = 'cover';
+        card.style.backgroundPosition = 'center';
+    }
+
+    return card;
+}
+
+function createAlbumCard(album, confidence) {
+    const card = document.createElement('div');
+    card.className = 'suggestion-card';
+    card.onclick = () => selectAlbum(album);
+
+    const imageUrl = album.image_url || '';
+    const confidencePercent = Math.round(confidence * 100);
+    const year = album.release_date ? album.release_date.split('-')[0] : '';
+
+    card.innerHTML = `
+        <div class="suggestion-card-overlay"></div>
+        <div class="suggestion-card-content">
+            <div class="suggestion-card-name" title="${escapeHtml(album.name)}">${escapeHtml(album.name)}</div>
+            <div class="suggestion-card-details">
+                ${album.album_type ? escapeHtml(album.album_type.charAt(0).toUpperCase() + album.album_type.slice(1)) : 'Album'}${year ? ` • ${year}` : ''}
+            </div>
+            <div class="suggestion-card-confidence">${confidencePercent}% match</div>
+        </div>
+    `;
+
+    // Set background image if available
+    if (imageUrl) {
+        card.style.backgroundImage = `url(${imageUrl})`;
+        card.style.backgroundSize = 'cover';
+        card.style.backgroundPosition = 'center';
+    }
+
+    return card;
+}
+
+function selectArtist(artist) {
+    // Clear previous selections
+    document.querySelectorAll('#artist-suggestions .suggestion-card').forEach(card => {
+        card.classList.remove('selected');
+    });
+    document.querySelectorAll('#artist-manual-results .suggestion-card').forEach(card => {
+        card.classList.remove('selected');
+    });
+
+    // Mark new selection
+    event.currentTarget.classList.add('selected');
+
+    // Store selection
+    currentMatchingData.selectedArtist = artist;
+
+    console.log('🎯 Selected artist:', artist.name);
+
+    if (currentMatchingData.isAlbumDownload) {
+        // Transition to album selection stage
+        transitionToAlbumStage();
+    } else {
+        // Enable confirm button for single downloads
+        document.getElementById('confirm-match-btn').disabled = false;
+    }
+}
+
+function selectAlbum(album) {
+    // Clear previous selections
+    document.querySelectorAll('#album-suggestions .suggestion-card').forEach(card => {
+        card.classList.remove('selected');
+    });
+    document.querySelectorAll('#album-manual-results .suggestion-card').forEach(card => {
+        card.classList.remove('selected');
+    });
+
+    // Mark new selection
+    event.currentTarget.classList.add('selected');
+
+    // Store selection
+    currentMatchingData.selectedAlbum = album;
+
+    console.log('🎯 Selected album:', album.name);
+
+    // Enable confirm button
+    document.getElementById('confirm-match-btn').disabled = false;
+}
+
+function transitionToAlbumStage() {
+    // Hide artist stage
+    document.getElementById('artist-selection-stage').classList.add('hidden');
+
+    // Show album stage
+    const albumStage = document.getElementById('album-selection-stage');
+    albumStage.classList.remove('hidden');
+
+    // Update selected artist name
+    document.getElementById('selected-artist-name').textContent = currentMatchingData.selectedArtist.name;
+
+    // Update current stage
+    currentMatchingData.currentStage = 'album';
+
+    // Fetch album suggestions
+    fetchAlbumSuggestions();
+}
+
+function handleArtistSearch(event) {
+    const query = event.target.value.trim();
+
+    // Clear previous timer
+    if (searchTimers.artist) {
+        clearTimeout(searchTimers.artist);
+    }
+
+    if (query.length < 2) {
+        document.getElementById('artist-manual-results').innerHTML = '';
+        return;
+    }
+
+    // Debounce search
+    searchTimers.artist = setTimeout(() => {
+        performArtistSearch(query);
+    }, 400);
+}
+
+function handleAlbumSearch(event) {
+    const query = event.target.value.trim();
+
+    // Clear previous timer
+    if (searchTimers.album) {
+        clearTimeout(searchTimers.album);
+    }
+
+    if (query.length < 2) {
+        document.getElementById('album-manual-results').innerHTML = '';
+        return;
+    }
+
+    // Debounce search
+    searchTimers.album = setTimeout(() => {
+        performAlbumSearch(query);
+    }, 400);
+}
+
+async function performArtistSearch(query) {
+    try {
+        showLoadingCards('artist-manual-results', 'Searching artists...');
+
+        const requestBody = {
+            query: query,
+            context: 'artist'
+        };
+        console.log('Manual search request:', requestBody);
+
+        const response = await fetch('/api/match/search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestBody)
+        });
+
+        const data = await response.json();
+        console.log('Manual search response:', data);
+        if (data.provider) currentMatchingData.provider = data.provider;
+        if (data.results) {
+            console.log('Results array:', data.results);
+            renderArtistSearchResults(data.results);
+        } else {
+            showNoResultsMessage('artist-manual-results', 'No artists found');
+        }
+    } catch (error) {
+        console.error('Error searching artists:', error);
+        showNoResultsMessage('artist-manual-results', 'Error searching artists');
+    }
+}
+
+async function performAlbumSearch(query) {
+    if (!currentMatchingData.selectedArtist) return;
+
+    try {
+        showLoadingCards('album-manual-results', 'Searching albums...');
+
+        const response = await fetch('/api/match/search', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                query: query,
+                context: 'album',
+                artist_id: currentMatchingData.selectedArtist.id
+            })
+        });
+
+        const data = await response.json();
+        if (data.results) {
+            renderAlbumSearchResults(data.results);
+        } else {
+            showNoResultsMessage('album-manual-results', 'No albums found');
+        }
+    } catch (error) {
+        console.error('Error searching albums:', error);
+        showNoResultsMessage('album-manual-results', 'Error searching albums');
+    }
+}
+
+function renderArtistSearchResults(results) {
+    const container = document.getElementById('artist-manual-results');
+    container.innerHTML = '';
+
+    results.forEach((result, index) => {
+        console.log(`Manual search result ${index}:`, result);
+        console.log(`  result.artist:`, result.artist);
+        console.log(`  result.confidence:`, result.confidence);
+        try {
+            const card = createArtistCard(result.artist, result.confidence);
+            console.log(`createArtistCard returned:`, card, typeof card, card instanceof Element);
+            if (card && card instanceof Element) {
+                container.appendChild(card);
+            } else {
+                console.error(`Invalid card returned for result ${index}:`, card);
+            }
+        } catch (error) {
+            console.error(`Error calling createArtistCard for result ${index}:`, error);
+        }
+    });
+
+    // Lazy load missing artist images
+    console.log('🖼️ Starting lazy load for artist images in matching modal...');
+    if (typeof lazyLoadArtistImages === 'function') {
+        lazyLoadArtistImages(container);
+    } else if (typeof window.lazyLoadArtistImages === 'function') {
+        window.lazyLoadArtistImages(container);
+    } else {
+        console.error('❌ lazyLoadArtistImages function not found!');
+    }
+}
+
+function renderAlbumSearchResults(results) {
+    const container = document.getElementById('album-manual-results');
+    container.innerHTML = '';
+
+    results.forEach(result => {
+        const card = createAlbumCard(result.album, result.confidence);
+        container.appendChild(card);
+    });
+}
+
+function showLoadingCards(containerId, message) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = `<div class="loading-card">${message}</div>`;
+}
+
+function showNoResultsMessage(containerId, message) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = `<div class="loading-card" style="color: rgba(255,255,255,0.5)">${message}</div>`;
+}
+
+function skipMatching() {
+    console.log('🎯 Skipping matching, proceeding with normal download');
+
+    // Close modal
+    closeMatchingModal();
+
+    // Start normal download
+    if (currentMatchingData.isAlbumDownload) {
+        // For albums, we need to download each track
+        showToast('⬇️ Starting album download (unmatched)', 'info');
+        // This would need to be implemented to download all album tracks
+    } else {
+        // Single track download
+        startDownload(window.currentSearchResults.indexOf(currentMatchingData.searchResult));
+    }
+}
+
+function matchSlskdTracksToSpotify(slskdTracks, spotifyTracks) {
+    /**
+     * Matches Soulseek tracks to Spotify tracks based on filename analysis.
+     * Returns enhanced tracks with full Spotify metadata.
+     */
+    console.log(`🎯 Starting track matching: ${slskdTracks.length} Soulseek tracks vs ${spotifyTracks.length} Spotify tracks`);
+
+    const matched = [];
+    const unmatched = [];
+
+    for (const slskdTrack of slskdTracks) {
+        const filename = slskdTrack.filename || slskdTrack.title || '';
+        const parsedMeta = parseTrackFilename(filename);
+
+        console.log(`🔍 Matching: "${filename}" -> parsed as: "${parsedMeta.title}" (track #${parsedMeta.trackNumber})`);
+
+        // Find best matching Spotify track
+        let bestMatch = null;
+        let bestScore = 0;
+
+        for (const spotifyTrack of spotifyTracks) {
+            let score = 0;
+
+            // Match by track number (highest priority if available)
+            if (parsedMeta.trackNumber && spotifyTrack.track_number === parsedMeta.trackNumber) {
+                score += 50;
+                console.log(`   ✓ Track number match: ${parsedMeta.trackNumber} == ${spotifyTrack.track_number} (+50)`);
+            }
+
+            // Match by title similarity
+            const titleScore = calculateStringSimilarity(
+                parsedMeta.title.toLowerCase(),
+                spotifyTrack.name.toLowerCase()
+            );
+            score += titleScore * 50; // Max 50 points for perfect title match
+
+            console.log(`   Spotify track "${spotifyTrack.name}" (${spotifyTrack.track_number}): score ${score.toFixed(2)}`);
+
+            if (score > bestScore) {
+                bestScore = score;
+                bestMatch = spotifyTrack;
+            }
+        }
+
+        // Accept match if score is above threshold (70/100)
+        if (bestMatch && bestScore >= 70) {
+            console.log(`✅ MATCHED: "${filename}" -> "${bestMatch.name}" (score: ${bestScore.toFixed(2)})`);
+            matched.push({
+                slskd_track: slskdTrack,
+                spotify_track: bestMatch,
+                confidence: bestScore / 100
+            });
+        } else {
+            console.log(`❌ NO MATCH: "${filename}" (best score: ${bestScore.toFixed(2)})`);
+            unmatched.push(slskdTrack);
+        }
+    }
+
+    console.log(`🎯 Matching complete: ${matched.length} matched, ${unmatched.length} unmatched`);
+
+    return {
+        matched: matched,
+        unmatched: unmatched,
+        total: slskdTracks.length
+    };
+}
+
+function parseTrackFilename(filename) {
+    /**
+     * Parse track metadata from filename.
+     * Handles common patterns like:
+     * - "01 - Title.flac"
+     * - "01. Title.flac"
+     * - "Artist - Title.flac"
+     * - "Title.flac"
+     * - YouTube: "video_id||title" (extract title part)
+     */
+    // YouTube special handling: Extract title from encoded format
+    if (filename && filename.includes('||')) {
+        const parts = filename.split('||');
+        const youtubeTitle = parts[1] || parts[0];  // Use title part, fallback to video_id
+        // Remove common YouTube suffixes
+        const cleanTitle = youtubeTitle
+            .replace(/\s*\[.*?\]\s*/g, '')  // Remove [Official Video], [Lyrics], etc.
+            .replace(/\s*\(.*?\)\s*/g, '')  // Remove (Official), (Audio), etc.
+            .trim();
+        return { title: cleanTitle, trackNumber: null };
+    }
+
+    // Remove file extension and path
+    let basename = filename.split('/').pop().split('\\').pop();
+    basename = basename.replace(/\.(flac|mp3|m4a|ogg|wav)$/i, '');
+
+    let trackNumber = null;
+    let title = basename;
+
+    // Pattern 1: "01 - Title" or "01. Title"
+    const pattern1 = /^(\d{1,2})\s*[-\.]\s*(.+)$/;
+    const match1 = basename.match(pattern1);
+    if (match1) {
+        trackNumber = parseInt(match1[1]);
+        title = match1[2].trim();
+        return { title, trackNumber };
+    }
+
+    // Pattern 2: "Artist - Title" (extract title only)
+    const pattern2 = /^.+?\s*[-–]\s*(.+)$/;
+    const match2 = basename.match(pattern2);
+    if (match2) {
+        title = match2[1].trim();
+        return { title, trackNumber };
+    }
+
+    // Fallback: use whole basename as title
+    return { title: basename.trim(), trackNumber };
+}
+
+function calculateStringSimilarity(str1, str2) {
+    /**
+     * Calculate similarity between two strings (0-1 range).
+     * Uses Levenshtein distance for fuzzy matching.
+     */
+    // Normalize strings
+    str1 = str1.trim().toLowerCase();
+    str2 = str2.trim().toLowerCase();
+
+    if (str1 === str2) return 1.0;
+
+    // Simple contains check
+    if (str1.includes(str2) || str2.includes(str1)) {
+        return 0.9;
+    }
+
+    // Levenshtein distance calculation
+    const matrix = [];
+    const len1 = str1.length;
+    const len2 = str2.length;
+
+    for (let i = 0; i <= len1; i++) {
+        matrix[i] = [i];
+    }
+
+    for (let j = 0; j <= len2; j++) {
+        matrix[0][j] = j;
+    }
+
+    for (let i = 1; i <= len1; i++) {
+        for (let j = 1; j <= len2; j++) {
+            const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+            matrix[i][j] = Math.min(
+                matrix[i - 1][j] + 1,      // deletion
+                matrix[i][j - 1] + 1,      // insertion
+                matrix[i - 1][j - 1] + cost // substitution
+            );
+        }
+    }
+
+    const maxLen = Math.max(len1, len2);
+    const distance = matrix[len1][len2];
+    const similarity = 1 - (distance / maxLen);
+
+    return Math.max(0, similarity);
+}
+
+async function confirmMatch() {
+    if (!currentMatchingData.selectedArtist) {
+        showToast('⚠️ Please select an artist first', 'error');
+        return;
+    }
+
+    if (currentMatchingData.isAlbumDownload && !currentMatchingData.selectedAlbum) {
+        showToast('⚠️ Please select an album first', 'error');
+        return;
+    }
+
+    const confirmBtn = document.getElementById('confirm-match-btn');
+    const originalText = confirmBtn.textContent;
+
+    try {
+        console.log('🎯 Confirming match with:', {
+            artist: currentMatchingData.selectedArtist.name,
+            album: currentMatchingData.selectedAlbum?.name
+        });
+
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = 'Starting...';
+
+        // Determine the correct data to send
+        const downloadPayload = currentMatchingData.isAlbumDownload
+            ? currentMatchingData.albumResult
+            : currentMatchingData.searchResult;
+
+        // --- NEW: For album downloads, fetch Spotify tracklist and match tracks ---
+        if (currentMatchingData.isAlbumDownload && currentMatchingData.selectedAlbum) {
+            confirmBtn.textContent = 'Matching tracks...';
+            console.log('🎵 Fetching Spotify tracklist for album:', currentMatchingData.selectedAlbum.name);
+
+            try {
+                // Fetch album tracks (pass name/artist for Hydrabase support)
+                const artistId = currentMatchingData.selectedArtist.id;
+                const albumId = currentMatchingData.selectedAlbum.id;
+                const _aat3 = new URLSearchParams({ name: currentMatchingData.selectedAlbum.name || '', artist: currentMatchingData.selectedArtist.name || '' });
+                const tracksResponse = await fetch(`/api/album/${albumId}/tracks?${_aat3}`);
+
+                if (!tracksResponse.ok) {
+                    throw new Error(`Failed to fetch Spotify tracks: ${tracksResponse.status}`);
+                }
+
+                const tracksData = await tracksResponse.json();
+                const spotifyTracks = tracksData.tracks || [];
+
+                console.log(`✅ Fetched ${spotifyTracks.length} Spotify tracks for matching`);
+
+                // Match each Soulseek track to a Spotify track
+                const enhancedTracks = matchSlskdTracksToSpotify(
+                    downloadPayload.tracks || [],
+                    spotifyTracks
+                );
+
+                console.log(`🎯 Matched ${enhancedTracks.matched.length}/${enhancedTracks.total} tracks to Spotify`);
+
+                // Send enhanced data with full Spotify track objects
+                confirmBtn.textContent = 'Downloading...';
+                const response = await fetch('/api/download/matched', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        search_result: downloadPayload,
+                        spotify_artist: currentMatchingData.selectedArtist,
+                        spotify_album: currentMatchingData.selectedAlbum,
+                        enhanced_tracks: enhancedTracks.matched, // Send matched tracks with full Spotify data
+                        unmatched_tracks: enhancedTracks.unmatched // Send unmatched tracks for basic processing
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showToast(`🎯 Matched ${enhancedTracks.matched.length} tracks to Spotify`, 'success');
+                    closeMatchingModal();
+                } else {
+                    throw new Error(data.error || 'Failed to start matched download');
+                }
+
+            } catch (trackMatchError) {
+                console.error('❌ Track matching failed, falling back to simple matching:', trackMatchError);
+                showToast('⚠️ Track matching failed, using basic matching', 'warning');
+
+                // Fallback to simple matching (current behavior)
+                const response = await fetch('/api/download/matched', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        search_result: downloadPayload,
+                        spotify_artist: currentMatchingData.selectedArtist,
+                        spotify_album: currentMatchingData.selectedAlbum || null
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
+                    closeMatchingModal();
+                } else {
+                    throw new Error(data.error || 'Failed to start matched download');
+                }
+            }
+        } else {
+            // Single track download - fetch Spotify track for full metadata
+            confirmBtn.textContent = 'Searching Spotify...';
+
+            try {
+                // Parse track name from Soulseek filename
+                const filename = downloadPayload.filename || downloadPayload.title || '';
+                const parsedMeta = parseTrackFilename(filename);
+
+                console.log(`🔍 Searching Spotify for: "${parsedMeta.title}" by ${currentMatchingData.selectedArtist.name}`);
+
+                // Search Spotify for this track
+                const searchQuery = `track:${parsedMeta.title} artist:${currentMatchingData.selectedArtist.name}`;
+                const searchResponse = await fetch(`/api/spotify/search?q=${encodeURIComponent(searchQuery)}&type=track&limit=5`);
+
+                if (!searchResponse.ok) {
+                    throw new Error('Failed to search Spotify for track');
+                }
+
+                const searchData = await searchResponse.json();
+                const spotifyTracks = searchData.tracks?.items || [];
+
+                if (spotifyTracks.length === 0) {
+                    throw new Error('No Spotify tracks found for this search');
+                }
+
+                // Find best match (prefer exact artist match)
+                let bestMatch = spotifyTracks.find(track =>
+                    track.artists.some(artist => artist.id === currentMatchingData.selectedArtist.id)
+                ) || spotifyTracks[0];
+
+                console.log(`✅ Found Spotify track: "${bestMatch.name}" (${bestMatch.id})`);
+
+                // Get full track details with album info
+                const trackResponse = await fetch(`/api/spotify/track/${bestMatch.id}`);
+                if (!trackResponse.ok) {
+                    throw new Error('Failed to fetch Spotify track details');
+                }
+
+                const fullTrack = await trackResponse.json();
+
+                // Send with full Spotify metadata (single track enhanced)
+                confirmBtn.textContent = 'Downloading...';
+                const response = await fetch('/api/download/matched', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        search_result: downloadPayload,
+                        spotify_artist: currentMatchingData.selectedArtist,
+                        spotify_album: null,  // Singles don't have album context
+                        spotify_track: fullTrack,  // Full Spotify track object
+                        is_single_track: true  // Flag for single track processing
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showToast(`🎯 Matched single: "${fullTrack.name}"`, 'success');
+                    closeMatchingModal();
+                } else {
+                    throw new Error(data.error || 'Failed to start matched download');
+                }
+
+            } catch (singleMatchError) {
+                console.error('❌ Spotify track matching failed, falling back to basic:', singleMatchError);
+                showToast('⚠️ Spotify matching failed, using basic metadata', 'warning');
+
+                // Fallback to basic matching (current behavior)
+                const response = await fetch('/api/download/matched', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        search_result: downloadPayload,
+                        spotify_artist: currentMatchingData.selectedArtist,
+                        spotify_album: currentMatchingData.selectedAlbum || null
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    showToast(`🎯 Matched download started for "${currentMatchingData.selectedArtist.name}"`, 'success');
+                    closeMatchingModal();
+                } else {
+                    throw new Error(data.error || 'Failed to start matched download');
+                }
+            }
+        }
+
+    } catch (error) {
+        console.error('Error starting matched download:', error);
+        showToast(`❌ Error starting matched download: ${error.message}`, 'error');
+
+        // Re-enable confirm button on failure
+        confirmBtn.disabled = false;
+        confirmBtn.textContent = originalText;
+    }
+}
+
+
+
+
+function matchedDownloadTrack(trackIndex) {
+    const results = window.currentSearchResults;
+    if (!results || !results[trackIndex]) {
+        console.error('Could not find track for matched download:', trackIndex);
+        showToast('Error preparing matched download.', 'error');
+        return;
+    }
+    const trackData = results[trackIndex];
+    // It's a single track, so isAlbumDownload is false and there's no album context.
+    openMatchingModal(trackData, false, null);
+}
+
+function matchedDownloadAlbum(albumIndex) {
+    const results = window.currentSearchResults;
+    if (!results || !results[albumIndex]) {
+        console.error('Could not find album for matched download:', albumIndex);
+        showToast('Error preparing matched download.', 'error');
+        return;
+    }
+    const albumData = results[albumIndex];
+    // The first track is used as a reference for the initial artist search.
+    const firstTrack = albumData.tracks ? albumData.tracks[0] : albumData;
+    openMatchingModal(firstTrack, true, albumData);
+}
+
+function matchedDownloadAlbumTrack(albumIndex, trackIndex) {
+    const results = window.currentSearchResults;
+    if (!results || !results[albumIndex] || !results[albumIndex].tracks || !results[albumIndex].tracks[trackIndex]) {
+        console.error('Could not find album track for matched download:', albumIndex, trackIndex);
+        showToast('Error preparing matched download.', 'error');
+        return;
+    }
+    const albumData = results[albumIndex];
+    const trackData = albumData.tracks[trackIndex];
+
+    // This is the definitive fix.
+    // The second argument MUST be 'false' to treat this as a single track download,
+    // which prevents the modal from asking for an album selection.
+    openMatchingModal(trackData, false, albumData);
+}
+
+// ===========================================
+// == DASHBOARD DATABASE UPDATER FUNCTIONALITY ==
+// ===========================================
+
+// --- State and Polling Management ---
+
+function stopDbStatsPolling() {
+    if (dbStatsInterval) {
+        clearInterval(dbStatsInterval);
+        dbStatsInterval = null;
+    }
+}
+
+function stopDbUpdatePolling() {
+    if (dbUpdateStatusInterval) {
+        console.log('⏹️ Stopping database update polling');
+        clearInterval(dbUpdateStatusInterval);
+        dbUpdateStatusInterval = null;
+    }
+}
+
+// ===================================================================
+// QUALITY SCANNER TOOL
+// ===================================================================
+
+async function handleQualityScanButtonClick() {
+    const button = document.getElementById('quality-scan-button');
+    const currentAction = button.textContent;
+
+    if (currentAction === 'Scan Library') {
+        const scopeSelect = document.getElementById('quality-scan-scope');
+        const scope = scopeSelect.value;
+
+        try {
+            button.disabled = true;
+            button.textContent = 'Starting...';
+            const response = await fetch('/api/quality-scanner/start', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ scope: scope })
+            });
+
+            if (response.ok) {
+                showToast('Quality scan started!', 'success');
+                // Start polling immediately to get live status
+                checkAndUpdateQualityScanProgress();
+            } else {
+                const errorData = await response.json();
+                showToast(`Error: ${errorData.error}`, 'error');
+                button.disabled = false;
+                button.textContent = 'Scan Library';
+            }
+        } catch (error) {
+            showToast('Failed to start quality scan.', 'error');
+            button.disabled = false;
+            button.textContent = 'Scan Library';
+        }
+
+    } else { // "Stop Scan"
+        try {
+            const response = await fetch('/api/quality-scanner/stop', { method: 'POST' });
+            if (response.ok) {
+                showToast('Stop request sent.', 'info');
+            } else {
+                showToast('Failed to send stop request.', 'error');
+            }
+        } catch (error) {
+            showToast('Error sending stop request.', 'error');
+        }
+    }
+}
+
+async function checkAndUpdateQualityScanProgress() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/quality-scanner/status', {
+            signal: AbortSignal.timeout(10000) // 10 second timeout
+        });
+        if (!response.ok) return;
+
+        const state = await response.json();
+        console.debug('🔍 Quality Scanner Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
+        updateQualityScanProgressUI(state);
+
+        // Start polling only if not already polling and status is running
+        if (state.status === 'running' && !qualityScannerStatusInterval) {
+            console.log('🔄 Starting quality scanner polling (1 second interval)');
+            qualityScannerStatusInterval = setInterval(checkAndUpdateQualityScanProgress, 1000);
+        }
+
+    } catch (error) {
+        console.warn('Could not fetch quality scanner status:', error);
+        // Don't stop polling on network errors - keep trying
+    }
+}
+
+function updateQualityScanProgressFromData(data) {
+    const prev = _lastToolStatus['quality-scanner'];
+    _lastToolStatus['quality-scanner'] = data.status;
+    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
+    updateQualityScanProgressUI(data);
+}
+
+function updateQualityScanProgressUI(state) {
+    const button = document.getElementById('quality-scan-button');
+    const phaseLabel = document.getElementById('quality-phase-label');
+    const progressLabel = document.getElementById('quality-progress-label');
+    const progressBar = document.getElementById('quality-progress-bar');
+    const scopeSelect = document.getElementById('quality-scan-scope');
+
+    // Stats
+    const processedStat = document.getElementById('quality-stat-processed');
+    const metStat = document.getElementById('quality-stat-met');
+    const lowStat = document.getElementById('quality-stat-low');
+    const matchedStat = document.getElementById('quality-stat-matched');
+
+    if (!button || !phaseLabel || !progressLabel || !progressBar || !scopeSelect) return;
+
+    // Update stats
+    if (processedStat) processedStat.textContent = state.processed || 0;
+    if (metStat) metStat.textContent = state.quality_met || 0;
+    if (lowStat) lowStat.textContent = state.low_quality || 0;
+    if (matchedStat) matchedStat.textContent = state.matched || 0;
+
+    if (state.status === 'running') {
+        button.textContent = 'Stop Scan';
+        button.disabled = false;
+        scopeSelect.disabled = true;
+
+        phaseLabel.textContent = state.phase || 'Scanning...';
+        progressLabel.textContent = `${state.processed} / ${state.total} tracks scanned (${state.progress.toFixed(1)}%)`;
+        progressBar.style.width = `${state.progress}%`;
+    } else { // idle, finished, or error
+        stopQualityScannerPolling();
+        button.textContent = 'Scan Library';
+        button.disabled = false;
+        scopeSelect.disabled = false;
+
+        if (state.status === 'error') {
+            phaseLabel.textContent = `Error: ${state.error_message}`;
+            progressBar.style.backgroundColor = '#ff4444'; // Red for error
+        } else {
+            phaseLabel.textContent = state.phase || 'Ready to scan';
+            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
+        }
+
+        if (state.status === 'finished') {
+            // Show completion toast with results
+            showToast(`Scan complete! ${state.matched} tracks added to wishlist`, 'success');
+        }
+    }
+}
+
+function stopQualityScannerPolling() {
+    if (qualityScannerStatusInterval) {
+        console.log('⏹️ Stopping quality scanner polling');
+        clearInterval(qualityScannerStatusInterval);
+        qualityScannerStatusInterval = null;
+    }
+}
+
+// ============================================
+// == DUPLICATE CLEANER FUNCTIONS            ==
+// ============================================
+
+async function handleDuplicateCleanButtonClick() {
+    const button = document.getElementById('duplicate-clean-button');
+    const currentAction = button.textContent;
+
+    if (currentAction === 'Clean Duplicates') {
+        try {
+            button.disabled = true;
+            button.textContent = 'Starting...';
+            const response = await fetch('/api/duplicate-cleaner/start', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            if (response.ok) {
+                showToast('Duplicate cleaner started!', 'success');
+                // Start polling immediately to get live status
+                checkAndUpdateDuplicateCleanProgress();
+            } else {
+                const errorData = await response.json();
+                showToast(`Error: ${errorData.error}`, 'error');
+                button.disabled = false;
+                button.textContent = 'Clean Duplicates';
+            }
+        } catch (error) {
+            showToast('Failed to start duplicate cleaner.', 'error');
+            button.disabled = false;
+            button.textContent = 'Clean Duplicates';
+        }
+
+    } else { // "Stop Cleaning"
+        try {
+            const response = await fetch('/api/duplicate-cleaner/stop', { method: 'POST' });
+            if (response.ok) {
+                showToast('Stop request sent.', 'info');
+            } else {
+                showToast('Failed to send stop request.', 'error');
+            }
+        } catch (error) {
+            showToast('Error sending stop request.', 'error');
+        }
+    }
+}
+
+async function checkAndUpdateDuplicateCleanProgress() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/duplicate-cleaner/status', {
+            signal: AbortSignal.timeout(10000) // 10 second timeout
+        });
+        if (!response.ok) return;
+
+        const state = await response.json();
+        console.debug('🧹 Duplicate Cleaner Status:', state.status, `${state.files_scanned}/${state.total_files}`, `${state.progress.toFixed(1)}%`);
+        updateDuplicateCleanProgressUI(state);
+
+        // Start polling only if not already polling and status is running
+        if (state.status === 'running' && !duplicateCleanerStatusInterval) {
+            console.log('🔄 Starting duplicate cleaner polling (1 second interval)');
+            duplicateCleanerStatusInterval = setInterval(checkAndUpdateDuplicateCleanProgress, 1000);
+        }
+
+    } catch (error) {
+        console.warn('Could not fetch duplicate cleaner status:', error);
+        // Don't stop polling on network errors - keep trying
+    }
+}
+
+function updateDuplicateCleanProgressFromData(data) {
+    const prev = _lastToolStatus['duplicate-cleaner'];
+    _lastToolStatus['duplicate-cleaner'] = data.status;
+    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
+    updateDuplicateCleanProgressUI(data);
+}
+
+function updateDuplicateCleanProgressUI(state) {
+    const button = document.getElementById('duplicate-clean-button');
+    const phaseLabel = document.getElementById('duplicate-phase-label');
+    const progressLabel = document.getElementById('duplicate-progress-label');
+    const progressBar = document.getElementById('duplicate-progress-bar');
+
+    // Stats
+    const scannedStat = document.getElementById('duplicate-stat-scanned');
+    const foundStat = document.getElementById('duplicate-stat-found');
+    const deletedStat = document.getElementById('duplicate-stat-deleted');
+    const spaceStat = document.getElementById('duplicate-stat-space');
+
+    if (!button || !phaseLabel || !progressLabel || !progressBar) return;
+
+    // Update stats
+    if (scannedStat) scannedStat.textContent = state.files_scanned || 0;
+    if (foundStat) foundStat.textContent = state.duplicates_found || 0;
+    if (deletedStat) deletedStat.textContent = state.deleted || 0;
+    if (spaceStat) {
+        const spaceMB = state.space_freed_mb || 0;
+        if (spaceMB >= 1024) {
+            spaceStat.textContent = `${(spaceMB / 1024).toFixed(2)} GB`;
+        } else {
+            spaceStat.textContent = `${spaceMB.toFixed(2)} MB`;
+        }
+    }
+
+    if (state.status === 'running') {
+        button.textContent = 'Stop Cleaning';
+        button.disabled = false;
+
+        phaseLabel.textContent = state.phase || 'Scanning...';
+        progressLabel.textContent = `${state.files_scanned} / ${state.total_files} files scanned (${state.progress.toFixed(1)}%)`;
+        progressBar.style.width = `${state.progress}%`;
+    } else { // idle, finished, or error
+        stopDuplicateCleanerPolling();
+        button.textContent = 'Clean Duplicates';
+        button.disabled = false;
+
+        if (state.status === 'error') {
+            phaseLabel.textContent = `Error: ${state.error_message}`;
+            progressBar.style.backgroundColor = '#ff4444'; // Red for error
+        } else {
+            phaseLabel.textContent = state.phase || 'Ready to scan';
+            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
+        }
+
+        if (state.status === 'finished') {
+            // Show completion toast with results
+            const spaceMB = state.space_freed_mb || 0;
+            const spaceDisplay = spaceMB >= 1024 ? `${(spaceMB / 1024).toFixed(2)} GB` : `${spaceMB.toFixed(1)} MB`;
+            showToast(`Cleaning complete! ${state.deleted} files removed, ${spaceDisplay} freed`, 'success');
+        }
+    }
+}
+
+function stopDuplicateCleanerPolling() {
+    if (duplicateCleanerStatusInterval) {
+        console.log('⏹️ Stopping duplicate cleaner polling');
+        clearInterval(duplicateCleanerStatusInterval);
+        duplicateCleanerStatusInterval = null;
+    }
+}
+
+// ============================================
+// == BACKUP MANAGER                         ==
+// ============================================
+
+async function loadBackupList() {
+    try {
+        const res = await fetch('/api/database/backups');
+        const data = await res.json();
+        if (data.success) {
+            updateBackupManagerUI(data);
+            renderBackupList(data.backups);
+        }
+    } catch (e) {
+        console.error('Failed to load backup list:', e);
+    }
+}
+
+function updateBackupManagerUI(data) {
+    const lastEl = document.getElementById('backup-stat-last');
+    const countEl = document.getElementById('backup-stat-count');
+    const latestSizeEl = document.getElementById('backup-stat-latest-size');
+    const dbSizeEl = document.getElementById('backup-stat-db-size');
+
+    if (countEl) countEl.textContent = data.count;
+    if (dbSizeEl) dbSizeEl.textContent = data.db_size_mb + ' MB';
+
+    if (data.backups && data.backups.length > 0) {
+        const newest = data.backups[0];
+        if (lastEl) lastEl.textContent = timeAgo(newest.created);
+        if (latestSizeEl) latestSizeEl.textContent = newest.size_mb + ' MB';
+    } else {
+        if (lastEl) lastEl.textContent = 'Never';
+        if (latestSizeEl) latestSizeEl.textContent = '—';
+    }
+}
+
+function renderBackupList(backups) {
+    const container = document.getElementById('backup-list-container');
+    if (!container) return;
+    if (!backups || backups.length === 0) {
+        container.innerHTML = '';
+        return;
+    }
+
+    container.innerHTML = backups.map(b => {
+        const date = new Date(b.created + (b.created.includes('Z') ? '' : 'Z'));
+        const dateStr = date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+            + ' ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+        const safeName = escapeForInlineJs(b.filename);
+        const versionBadge = b.version ? `<span class="backup-list-version">v${escapeHtml(b.version)}</span>` : '';
+        return `<div class="backup-list-item">
+            <div class="backup-list-info">
+                <span class="backup-list-date">${escapeHtml(dateStr)}</span>
+                <span class="backup-list-size">${b.size_mb} MB</span>
+                ${versionBadge}
+            </div>
+            <div class="backup-list-actions">
+                <button class="backup-dl-btn" onclick="downloadBackup('${safeName}')" title="Download">DL</button>
+                <button class="backup-restore-btn" onclick="restoreBackup('${safeName}')" title="Restore">Restore</button>
+                <button class="backup-delete-btn" onclick="deleteBackup('${safeName}')" title="Delete">Del</button>
+            </div>
+        </div>`;
+    }).join('');
+}
+
+async function handleBackupNowClick() {
+    const button = document.getElementById('backup-now-button');
+    if (!button) return;
+    const origText = button.textContent;
+    button.disabled = true;
+    button.textContent = 'Backing up...';
+    try {
+        const res = await fetch('/api/database/backup', { method: 'POST' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Database backed up (${data.size_mb} MB)`, 'success');
+            await loadBackupList();
+        } else {
+            showToast(`Backup failed: ${data.error}`, 'error');
+        }
+    } catch (e) {
+        showToast('Backup request failed', 'error');
+    }
+    button.disabled = false;
+    button.textContent = origText;
+}
+
+function downloadBackup(filename) {
+    const a = document.createElement('a');
+    a.href = `/api/database/backups/${encodeURIComponent(filename)}/download`;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+
+async function restoreBackup(filename, force = false) {
+    if (!force) {
+        if (!await showConfirmDialog({ title: 'Restore Backup', message: `Restore database from "${filename}"?\n\nA safety backup of the current database will be created first.`, confirmText: 'Restore' })) return;
+    }
+    try {
+        const fetchOpts = { method: 'POST' };
+        if (force) {
+            fetchOpts.headers = { 'Content-Type': 'application/json' };
+            fetchOpts.body = JSON.stringify({ force: true });
+        }
+        const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}/restore`, fetchOpts);
+        const data = await res.json();
+        if (data.success) {
+            let msg = `Database restored from ${data.restored_from} (${data.artist_count} artists). Safety backup: ${data.safety_backup}`;
+            if (data.version_warning) msg += `\n⚠️ ${data.version_warning}`;
+            showToast(msg, 'success');
+            await loadBackupList();
+        } else if (data.version_mismatch) {
+            // Version mismatch — ask user to confirm
+            const confirmed = await showConfirmDialog({
+                title: 'Version Mismatch',
+                message: `This backup was created on SoulSync v${data.backup_version}, but you're running v${data.current_version}.\n\nRestoring an older backup may cause issues if the database schema has changed. A safety backup will be created first.\n\nProceed anyway?`,
+                confirmText: 'Restore Anyway',
+                destructive: true
+            });
+            if (confirmed) {
+                await restoreBackup(filename, true);
+            }
+        } else {
+            showToast(`Restore failed: ${data.error}`, 'error');
+        }
+    } catch (e) {
+        showToast('Restore request failed', 'error');
+    }
+}
+
+async function deleteBackup(filename) {
+    if (!await showConfirmDialog({ title: 'Delete Backup', message: `Delete backup "${filename}"? This cannot be undone.`, confirmText: 'Delete', destructive: true })) return;
+    try {
+        const res = await fetch(`/api/database/backups/${encodeURIComponent(filename)}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            showToast(`Backup deleted: ${data.deleted}`, 'success');
+            await loadBackupList();
+        } else {
+            showToast(`Delete failed: ${data.error}`, 'error');
+        }
+    } catch (e) {
+        showToast('Delete request failed', 'error');
+    }
+}
+
+// ============================================
+// == METADATA CACHE                         ==
+// ============================================
+
+async function loadMetadataCacheStats() {
+    try {
+        const response = await fetch('/api/metadata-cache/stats');
+        if (!response.ok) return;
+        const stats = await response.json();
+
+        const artistsEl = document.getElementById('mcache-stat-artists');
+        const albumsEl = document.getElementById('mcache-stat-albums');
+        const tracksEl = document.getElementById('mcache-stat-tracks');
+        const hitsEl = document.getElementById('mcache-stat-hits');
+
+        if (artistsEl) artistsEl.textContent = (stats.artists?.spotify || 0) + (stats.artists?.itunes || 0) + (stats.artists?.deezer || 0) + (stats.artists?.beatport || 0);
+        if (albumsEl) albumsEl.textContent = (stats.albums?.spotify || 0) + (stats.albums?.itunes || 0) + (stats.albums?.deezer || 0) + (stats.albums?.beatport || 0);
+        if (tracksEl) tracksEl.textContent = (stats.tracks?.spotify || 0) + (stats.tracks?.itunes || 0) + (stats.tracks?.deezer || 0) + (stats.tracks?.beatport || 0);
+        if (hitsEl) hitsEl.textContent = stats.total_hits || 0;
+    } catch (e) {
+        // Silently fail — cache may not be initialized yet
+    }
+}
+
+// ── Library History Modal ────────────────────────────────────────────
+let _libraryHistoryState = { tab: 'download', page: 1, limit: 50 };
+
+function openLibraryHistoryModal() {
+    const overlay = document.getElementById('library-history-overlay');
+    if (overlay) {
+        overlay.classList.remove('hidden');
+        _libraryHistoryState.page = 1;
+        loadLibraryHistory();
+    }
+}
+
+function closeLibraryHistoryModal() {
+    const overlay = document.getElementById('library-history-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+function switchHistoryTab(tab) {
+    _libraryHistoryState.tab = tab;
+    _libraryHistoryState.page = 1;
+    document.querySelectorAll('.library-history-tab').forEach(t => {
+        t.classList.toggle('active', t.dataset.tab === tab);
+    });
+    loadLibraryHistory();
+}
+
+async function loadLibraryHistory() {
+    const { tab, page, limit } = _libraryHistoryState;
+    const list = document.getElementById('library-history-list');
+    const pagination = document.getElementById('library-history-pagination');
+    if (!list) return;
+    list.innerHTML = '<div class="library-history-loading">Loading...</div>';
+    if (pagination) pagination.innerHTML = '';
+
+    try {
+        const resp = await fetch(`/api/library/history?type=${tab}&page=${page}&limit=${limit}`);
+        const data = await resp.json();
+
+        // Update tab counts
+        const dlCount = document.getElementById('history-download-count');
+        const imCount = document.getElementById('history-import-count');
+        if (dlCount) dlCount.textContent = data.stats?.downloads || 0;
+        if (imCount) imCount.textContent = data.stats?.imports || 0;
+
+        // Source breakdown bar (downloads tab only)
+        const sourceBar = document.getElementById('history-source-bar');
+        if (sourceBar) {
+            const sc = data.stats?.source_counts || {};
+            const srcEntries = Object.entries(sc).sort((a, b) => b[1] - a[1]);
+            if (srcEntries.length > 0 && tab === 'download') {
+                const _srcColors = { Soulseek: '#4caf50', Tidal: '#000', YouTube: '#ff0000', Qobuz: '#4285f4', HiFi: '#00bcd4', Deezer: '#a238ff' };
+                sourceBar.innerHTML = srcEntries.map(([src, cnt]) =>
+                    `<span class="history-source-chip" style="border-color:${_srcColors[src] || '#888'};color:${_srcColors[src] || '#888'}">${src}: ${cnt}</span>`
+                ).join('');
+                sourceBar.style.display = '';
+            } else {
+                sourceBar.style.display = 'none';
+            }
+        }
+
+        if (!data.entries || data.entries.length === 0) {
+            const emptyIcon = tab === 'download' ? '📥' : '📚';
+            const emptyText = tab === 'download'
+                ? 'No downloads recorded yet. Completed downloads will appear here.'
+                : 'No server imports recorded yet. New tracks from library scans will appear here.';
+            list.innerHTML = `<div class="library-history-empty">${emptyIcon}<br><br>${emptyText}</div>`;
+            return;
+        }
+
+        list.innerHTML = data.entries.map(renderHistoryEntry).join('');
+        renderHistoryPagination(data.total, page, limit);
+    } catch (err) {
+        console.error('Error loading library history:', err);
+        list.innerHTML = '<div class="library-history-empty">Error loading history</div>';
+    }
+}
+
+function renderHistoryEntry(entry) {
+    // Server import thumb_urls are relative paths (e.g. /library/metadata/...) — use placeholder
+    const hasValidThumb = entry.thumb_url && (entry.thumb_url.startsWith('http://') || entry.thumb_url.startsWith('https://'));
+    const thumb = hasValidThumb
+        ? `<img src="${escapeHtml(entry.thumb_url)}" class="library-history-thumb" loading="lazy" onerror="this.outerHTML='<div class=\\'library-history-thumb-placeholder\\'>${entry.event_type === 'download' ? '📥' : '📚'}</div>'">`
+        : `<div class="library-history-thumb-placeholder">${entry.event_type === 'download' ? '📥' : '📚'}</div>`;
+
+    let badge = '';
+    if (entry.event_type === 'download') {
+        const parts = [];
+        if (entry.download_source) parts.push(entry.download_source);
+        if (entry.quality) parts.push(entry.quality);
+        badge = parts.map(p => `<span class="library-history-badge download">${escapeHtml(p)}</span>`).join('');
+    } else if (entry.event_type === 'import' && entry.server_source) {
+        const sourceName = { plex: 'Plex', jellyfin: 'Jellyfin', navidrome: 'Navidrome' }[entry.server_source] || entry.server_source;
+        badge = `<span class="library-history-badge import">${escapeHtml(sourceName)}</span>`;
+    }
+
+    // AcoustID badge
+    let acoustidBadge = '';
+    if (entry.acoustid_result) {
+        const _aidColors = { pass: '#4caf50', fail: '#ef5350', skip: '#ff9800', disabled: '#666', error: '#ef5350' };
+        const _aidLabels = { pass: 'Verified', fail: 'Failed', skip: 'Skipped', disabled: 'Off', error: 'Error' };
+        const color = _aidColors[entry.acoustid_result] || '#666';
+        const label = _aidLabels[entry.acoustid_result] || entry.acoustid_result;
+        acoustidBadge = `<span class="library-history-badge" style="border-color:${color};color:${color}">AcoustID: ${label}</span>`;
+    }
+
+    const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ');
+
+    // Source provenance — expected vs downloaded
+    let sourceDetail = '';
+    if (entry.event_type === 'download') {
+        const lines = [];
+        // Expected line (what we asked for)
+        if (entry.title || entry.artist_name) {
+            lines.push(`<span class="lh-prov-label">Expected:</span> ${escapeHtml(entry.title || '?')} <span class="lh-prov-dim">by</span> ${escapeHtml(entry.artist_name || '?')}`);
+        }
+        // Downloaded line (what the source provided)
+        const srcTitle = entry.source_track_title || '';
+        const srcArtist = entry.source_artist || '';
+        if (srcTitle || srcArtist) {
+            const isMismatch = (srcTitle && entry.title && srcTitle.toLowerCase() !== entry.title.toLowerCase())
+                || (srcArtist && entry.artist_name && srcArtist.toLowerCase() !== entry.artist_name.toLowerCase());
+            const mismatchClass = isMismatch ? ' lh-prov-mismatch' : '';
+            lines.push(`<span class="lh-prov-label">Downloaded:</span> <span class="${mismatchClass}">${escapeHtml(srcTitle || '?')} <span class="lh-prov-dim">by</span> ${escapeHtml(srcArtist || '?')}</span>`);
+        }
+        // Source file + ID line
+        if (entry.source_filename || entry.source_track_id) {
+            const fileParts = [];
+            if (entry.source_filename) fileParts.push(`<span class="lh-prov-label">File:</span> ${escapeHtml(entry.source_filename)}`);
+            if (entry.source_track_id) fileParts.push(`<span class="lh-prov-label">${entry.source_filename ? '' : 'Source '}ID:</span> ${escapeHtml(entry.source_track_id)}`);
+            lines.push(fileParts.join(` <span class="lh-prov-dim">·</span> `));
+        }
+        if (lines.length > 0) {
+            sourceDetail = `<div class="library-history-entry-source">${lines.join('<br>')}</div>`;
+        }
+    }
+
+    const hasDetails = sourceDetail || acoustidBadge;
+    const expandIndicator = hasDetails ? `<span class="lh-expand-btn">&#x25BE;</span>` : '';
+
+    return `<div class="library-history-entry${hasDetails ? ' lh-expandable' : ''}" ${hasDetails ? 'onclick="this.classList.toggle(\'lh-expanded\')"' : ''}>
+        ${thumb}
+        <div class="library-history-entry-content">
+            <div class="library-history-entry-row1">
+                <div class="library-history-entry-text">
+                    <div class="library-history-entry-title">${escapeHtml(entry.title || 'Unknown')}</div>
+                    <div class="library-history-entry-meta">${escapeHtml(meta)}</div>
+                </div>
+                <div class="library-history-entry-badges">${badge}</div>
+                <div class="library-history-entry-time">${formatHistoryTime(entry.created_at)}</div>
+                ${expandIndicator}
+            </div>
+            ${hasDetails ? `<div class="library-history-entry-details">
+                ${sourceDetail}
+                ${acoustidBadge ? `<div class="library-history-entry-badges" style="margin-top:4px">${acoustidBadge}</div>` : ''}
+            </div>` : ''}
+        </div>
+    </div>`;
+}
+
+function formatHistoryTime(isoStr) {
+    if (!isoStr) return '';
+    try {
+        // SQLite CURRENT_TIMESTAMP is UTC but lacks timezone marker — append Z
+        let normalized = isoStr;
+        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}/.test(normalized) && !normalized.includes('Z') && !normalized.includes('+')) {
+            normalized = normalized.replace(' ', 'T') + 'Z';
+        }
+        const date = new Date(normalized);
+        const now = new Date();
+        const diffMs = now - date;
+        const diffMins = Math.floor(diffMs / 60000);
+        if (diffMins < 1) return 'Just now';
+        if (diffMins < 60) return `${diffMins}m ago`;
+        const diffHours = Math.floor(diffMins / 60);
+        if (diffHours < 24) return `${diffHours}h ago`;
+        const diffDays = Math.floor(diffHours / 24);
+        if (diffDays < 7) return `${diffDays}d ago`;
+        return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+    } catch { return ''; }
+}
+
+function renderHistoryPagination(total, page, limit) {
+    const pagination = document.getElementById('library-history-pagination');
+    if (!pagination) return;
+
+    const totalPages = Math.ceil(total / limit);
+    if (totalPages <= 1) { pagination.innerHTML = ''; return; }
+
+    pagination.innerHTML = `
+        <button class="library-history-page-btn" onclick="changeHistoryPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>Prev</button>
+        <span class="library-history-page-info">Page ${page} of ${totalPages}</span>
+        <button class="library-history-page-btn" onclick="changeHistoryPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>Next</button>
+    `;
+}
+
+function changeHistoryPage(newPage) {
+    if (newPage < 1) return;
+    _libraryHistoryState.page = newPage;
+    loadLibraryHistory();
+}
+
+// ── Sync History Modal ──────────────────────────────────────────────
+const _syncHistoryState = { source: null, page: 1, limit: 20 };
+
+function openSyncHistoryModal() {
+    const overlay = document.getElementById('sync-history-overlay');
+    if (overlay) {
+        overlay.classList.remove('hidden');
+        _syncHistoryState.page = 1;
+        _syncHistoryState.source = null;
+        loadSyncHistory();
+    }
+}
+
+function closeSyncHistoryModal() {
+    const overlay = document.getElementById('sync-history-overlay');
+    if (overlay) overlay.classList.add('hidden');
+}
+
+function switchSyncHistoryTab(source) {
+    _syncHistoryState.source = source;
+    _syncHistoryState.page = 1;
+    document.querySelectorAll('.sync-history-tab').forEach(t => {
+        t.classList.toggle('active', t.dataset.source === (source || 'all'));
+    });
+    loadSyncHistory();
+}
+
+async function loadSyncHistory() {
+    const { source, page, limit } = _syncHistoryState;
+    const list = document.getElementById('sync-history-list');
+    const tabsContainer = document.getElementById('sync-history-tabs');
+    if (!list) return;
+    list.innerHTML = '<div class="sync-history-loading">Loading...</div>';
+
+    try {
+        const params = new URLSearchParams({ page, limit });
+        if (source) params.set('source', source);
+        const resp = await fetch(`/api/sync/history?${params}`);
+        const data = await resp.json();
+
+        // Build tabs from stats
+        if (tabsContainer && data.stats) {
+            const totalCount = Object.values(data.stats).reduce((a, b) => a + b, 0);
+            const sourceLabels = {
+                spotify: 'Spotify', beatport: 'Beatport', youtube: 'YouTube',
+                tidal: 'Tidal', deezer: 'Deezer', wishlist: 'Wishlist',
+                library: 'Library', discover: 'Discover', listenbrainz: 'ListenBrainz',
+                spotify_public: 'Spotify Public', mirrored: 'Mirrored'
+            };
+            let tabsHtml = `<button class="sync-history-tab ${!source ? 'active' : ''}" data-source="all" onclick="switchSyncHistoryTab(null)">All <span class="sync-history-tab-count">${totalCount}</span></button>`;
+            for (const [src, count] of Object.entries(data.stats).sort((a, b) => b[1] - a[1])) {
+                const label = sourceLabels[src] || src;
+                const isActive = source === src ? ' active' : '';
+                tabsHtml += `<button class="sync-history-tab${isActive}" data-source="${src}" onclick="switchSyncHistoryTab('${src}')">${label} <span class="sync-history-tab-count">${count}</span></button>`;
+            }
+            tabsContainer.innerHTML = tabsHtml;
+        }
+
+        // Filter to only show playlist syncs — not album downloads, wishlist, or redownloads
+        const syncEntries = (data.entries || []).filter(e => e.sync_type === 'playlist' || !e.sync_type);
+
+        if (syncEntries.length === 0) {
+            list.innerHTML = '<div class="sync-history-empty">No sync history yet. Completed syncs will appear here.</div>';
+            return;
+        }
+
+        list.innerHTML = syncEntries.map(renderSyncHistoryEntry).join('');
+        renderSyncHistoryPagination(data.total, page, limit);
+    } catch (err) {
+        console.error('Error loading sync history:', err);
+        list.innerHTML = '<div class="sync-history-empty">Error loading sync history</div>';
+    }
+}
+
+function renderSyncHistoryEntry(entry) {
+    const thumb = entry.thumb_url
+        ? `<img src="${escapeHtml(entry.thumb_url)}" class="sync-history-thumb" loading="lazy" onerror="this.outerHTML='<div class=\\'sync-history-thumb-placeholder\\'>&#x1F4E5;</div>'">`
+        : `<div class="sync-history-thumb-placeholder">${_syncSourceIcon(entry.source)}</div>`;
+
+    const sourceBadge = `<span class="sync-history-source-badge ${entry.source}">${escapeHtml(entry.source)}</span>`;
+
+    const title = entry.playlist_name || 'Unknown';
+    const meta = [entry.artist_name, entry.album_name].filter(Boolean).join(' — ') || entry.sync_type;
+
+    // Stats
+    let statsHtml = '';
+    if (entry.completed_at) {
+        const parts = [];
+        if (entry.tracks_found > 0) parts.push(`<span class="sync-history-stat found">${entry.tracks_found} found</span>`);
+        if (entry.tracks_downloaded > 0) parts.push(`<span class="sync-history-stat downloaded">${entry.tracks_downloaded} downloaded</span>`);
+        if (entry.tracks_failed > 0) parts.push(`<span class="sync-history-stat failed">${entry.tracks_failed} failed</span>`);
+        if (parts.length === 0) parts.push(`<span class="sync-history-stat found">${entry.total_tracks} in library</span>`);
+        statsHtml = `<div class="sync-history-stats">${parts.join('')}</div>`;
+    } else {
+        statsHtml = `<div class="sync-history-stats"><span class="sync-history-stat pending">In progress</span></div>`;
+    }
+
+    const timeStr = formatHistoryTime(entry.started_at);
+
+    return `<div class="sync-history-entry-wrapper" id="sync-history-wrapper-${entry.id}">
+        <div class="sync-history-entry">
+            ${thumb}
+            <div class="sync-history-entry-text">
+                <div class="sync-history-entry-title">${escapeHtml(title)}</div>
+                <div class="sync-history-entry-meta">${escapeHtml(meta)}</div>
+            </div>
+            ${sourceBadge}
+            ${statsHtml}
+            <div class="sync-history-entry-time">${timeStr}</div>
+            <button class="sync-history-delete-btn" onclick="deleteSyncHistoryEntry(${entry.id})" title="Delete this entry">&times;</button>
+            <button class="sync-history-resync-btn" id="resync-btn-${entry.id}" onclick="retriggerSync(${entry.id})" title="Re-sync this playlist">Re-sync</button>
+        </div>
+        <div class="sync-history-live-progress" id="sync-history-progress-${entry.id}" style="display:none;">
+            <div class="sync-history-progress-bar-container">
+                <div class="sync-history-progress-bar-fill" id="sync-history-bar-${entry.id}"></div>
+            </div>
+            <div class="sync-history-progress-text">
+                <span class="sync-history-progress-step" id="sync-history-step-${entry.id}">Starting sync...</span>
+                <div class="sync-history-progress-stats">
+                    <span class="matched" id="sync-history-matched-${entry.id}">0 matched</span>
+                    <span class="failed" id="sync-history-failed-${entry.id}">0 failed</span>
+                </div>
+                <button class="sync-history-cancel-btn" id="sync-history-cancel-${entry.id}" onclick="cancelSyncHistoryResync(${entry.id})">Cancel</button>
+            </div>
+        </div>
+    </div>`;
+}
+
+function _syncSourceIcon(source) {
+    const icons = {
+        spotify: '&#x1F3B5;', beatport: '&#x1F3B6;', youtube: '&#x25B6;',
+        tidal: '&#x1F30A;', deezer: '&#x1F3A7;', wishlist: '&#x2B50;',
+        library: '&#x1F4DA;', discover: '&#x1F50D;', mirrored: '&#x1F517;',
+        listenbrainz: '&#x1F3A7;', spotify_public: '&#x1F3B5;'
+    };
+    return icons[source] || '&#x1F4E5;';
+}
+
+function renderSyncHistoryPagination(total, page, limit) {
+    const pagination = document.getElementById('sync-history-pagination');
+    if (!pagination) return;
+    const totalPages = Math.ceil(total / limit);
+    if (totalPages <= 1) { pagination.innerHTML = ''; return; }
+    pagination.innerHTML = `
+        <button class="sync-history-page-btn" onclick="changeSyncHistoryPage(${page - 1})" ${page <= 1 ? 'disabled' : ''}>Prev</button>
+        <span class="sync-history-page-info">Page ${page} of ${totalPages}</span>
+        <button class="sync-history-page-btn" onclick="changeSyncHistoryPage(${page + 1})" ${page >= totalPages ? 'disabled' : ''}>Next</button>
+    `;
+}
+
+function changeSyncHistoryPage(newPage) {
+    if (newPage < 1) return;
+    _syncHistoryState.page = newPage;
+    loadSyncHistory();
+}
+
+// Track active re-syncs from history
+let _activeSyncHistoryResyncs = {};
+
+// Sources that do server playlist sync (match to media server) vs download (Soulseek download)
+const _serverSyncSources = new Set(['spotify', 'tidal', 'deezer', 'youtube', 'mirrored', 'listenbrainz', 'spotify_public', 'beatport']);
+const _downloadSyncSources = new Set(['discover', 'library', 'wishlist']);
+
+async function retriggerSync(entryId) {
+    try {
+        const resp = await fetch(`/api/sync/history/${entryId}`);
+        const data = await resp.json();
+
+        if (!data.success || !data.entry) {
+            showToast('Failed to load sync data', 'error');
+            return;
+        }
+
+        const entry = data.entry;
+
+        // Determine if this is a download-type sync or a server-sync-type
+        const isDownloadSync = entry.is_album_download || _downloadSyncSources.has(entry.source);
+        const isServerSync = _serverSyncSources.has(entry.source) && !entry.is_album_download;
+
+        if (isDownloadSync) {
+            // Download syncs open the download modal (existing behavior)
+            closeSyncHistoryModal();
+
+            const virtualPlaylistId = entry.playlist_id || `resync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+            const albumObj = entry.album_context || {
+                id: `resync_album_${entryId}`,
+                name: entry.playlist_name,
+                album_type: entry.sync_type === 'album' ? 'album' : 'compilation',
+                images: entry.thumb_url ? [{ url: entry.thumb_url }] : [],
+                total_tracks: entry.total_tracks
+            };
+            const artistObj = entry.artist_context || { id: 'resync_artist', name: 'Various Artists' };
+            const contextType = entry.sync_type === 'album' ? 'artist_album' : 'playlist';
+
+            await openDownloadMissingModalForArtistAlbum(
+                virtualPlaylistId, entry.playlist_name, entry.tracks,
+                albumObj, artistObj, false, contextType
+            );
+        } else {
+            // Server sync — start sync and show live progress in the card
+            await _startSyncHistoryResync(entryId, entry);
+        }
+    } catch (err) {
+        console.error('Error re-triggering sync:', err);
+        showToast('Error loading sync data', 'error');
+    }
+}
+
+async function _startSyncHistoryResync(entryId, entry) {
+    // Disable the re-sync button
+    const btn = document.getElementById(`resync-btn-${entryId}`);
+    if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
+
+    // Show the progress area
+    const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
+    const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
+    if (wrapper) wrapper.classList.add('syncing');
+    if (progressArea) progressArea.style.display = '';
+
+    // Build a unique sync playlist ID for this re-sync
+    const syncPlaylistId = `resync_${entryId}_${Date.now()}`;
+
+    // Prepare tracks for the sync API
+    const tracks = (entry.tracks || []).map(t => {
+        const artists = Array.isArray(t.artists)
+            ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
+            : [t.artists || 'Unknown Artist'];
+        const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
+        return {
+            id: t.id || '',
+            name: t.name || '',
+            artists: artists,
+            album: albumName,
+            duration_ms: t.duration_ms || 0,
+            popularity: t.popularity || 0
+        };
+    });
+
+    try {
+        const response = await fetch('/api/sync/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_id: syncPlaylistId,
+                playlist_name: entry.playlist_name,
+                tracks: tracks
+            })
+        });
+
+        const result = await response.json();
+        if (!result.success) {
+            showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
+            _cleanupSyncHistoryResync(entryId);
+            return;
+        }
+
+        // Store active re-sync state
+        _activeSyncHistoryResyncs[entryId] = { syncPlaylistId, entryId };
+
+        // Start polling for progress
+        _pollSyncHistoryProgress(entryId, syncPlaylistId);
+
+    } catch (err) {
+        console.error('Error starting re-sync:', err);
+        showToast('Failed to start sync', 'error');
+        _cleanupSyncHistoryResync(entryId);
+    }
+}
+
+function _pollSyncHistoryProgress(entryId, syncPlaylistId) {
+    const pollInterval = setInterval(async () => {
+        try {
+            const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
+            if (!resp.ok) {
+                clearInterval(pollInterval);
+                _cleanupSyncHistoryResync(entryId, 'error');
+                return;
+            }
+            const state = await resp.json();
+
+            if (state.status === 'syncing' || state.status === 'starting') {
+                const progress = state.progress || {};
+                const matched = progress.matched_tracks || 0;
+                const failed = progress.failed_tracks || 0;
+                const total = progress.total_tracks || 0;
+                const step = progress.current_step || 'Processing';
+                const currentTrack = progress.current_track || '';
+                const processed = matched + failed;
+                const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+                const bar = document.getElementById(`sync-history-bar-${entryId}`);
+                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
+                const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
+                const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
+
+                if (bar) bar.style.width = `${percent}%`;
+                if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
+                if (matchedEl) matchedEl.textContent = `${matched} matched`;
+                if (failedEl) failedEl.textContent = `${failed} failed`;
+
+            } else if (state.status === 'finished') {
+                clearInterval(pollInterval);
+                const progress = state.progress || state.result || {};
+                const matched = progress.matched_tracks || 0;
+                const failed = progress.failed_tracks || 0;
+                const total = progress.total_tracks || 0;
+                const synced = progress.synced_tracks || 0;
+
+                const bar = document.getElementById(`sync-history-bar-${entryId}`);
+                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
+                const matchedEl = document.getElementById(`sync-history-matched-${entryId}`);
+                const failedEl = document.getElementById(`sync-history-failed-${entryId}`);
+
+                if (bar) bar.style.width = '100%';
+                if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
+                if (matchedEl) matchedEl.textContent = `${matched} matched`;
+                if (failedEl) failedEl.textContent = `${failed} failed`;
+
+                // Hide cancel button
+                const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
+                if (cancelBtn) cancelBtn.style.display = 'none';
+
+                showToast(`Re-sync complete: ${matched}/${total} matched`, 'success');
+
+                // Auto-collapse after 5 seconds
+                setTimeout(() => _cleanupSyncHistoryResync(entryId, 'finished'), 5000);
+
+            } else if (state.status === 'cancelled' || state.status === 'error') {
+                clearInterval(pollInterval);
+                const stepEl = document.getElementById(`sync-history-step-${entryId}`);
+                if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error: ${state.error || 'Unknown'}`;
+
+                const cancelBtn = document.getElementById(`sync-history-cancel-${entryId}`);
+                if (cancelBtn) cancelBtn.style.display = 'none';
+
+                setTimeout(() => _cleanupSyncHistoryResync(entryId, state.status), 3000);
+            }
+        } catch (err) {
+            console.error('Error polling sync status:', err);
+            clearInterval(pollInterval);
+            _cleanupSyncHistoryResync(entryId, 'error');
+        }
+    }, 2000);
+
+    // Store interval so cancel can clear it
+    if (_activeSyncHistoryResyncs[entryId]) {
+        _activeSyncHistoryResyncs[entryId].pollInterval = pollInterval;
+    }
+}
+
+async function cancelSyncHistoryResync(entryId) {
+    const active = _activeSyncHistoryResyncs[entryId];
+    if (!active) return;
+
+    try {
+        await fetch('/api/sync/cancel', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ playlist_id: active.syncPlaylistId })
+        });
+
+        const stepEl = document.getElementById(`sync-history-step-${entryId}`);
+        if (stepEl) stepEl.textContent = 'Cancelling...';
+
+    } catch (err) {
+        console.error('Error cancelling sync:', err);
+        showToast('Failed to cancel sync', 'error');
+    }
+}
+
+function _cleanupSyncHistoryResync(entryId, finalStatus) {
+    const active = _activeSyncHistoryResyncs[entryId];
+    if (active && active.pollInterval) {
+        clearInterval(active.pollInterval);
+    }
+    delete _activeSyncHistoryResyncs[entryId];
+
+    const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
+    const progressArea = document.getElementById(`sync-history-progress-${entryId}`);
+    const btn = document.getElementById(`resync-btn-${entryId}`);
+
+    if (wrapper) wrapper.classList.remove('syncing');
+    if (progressArea) progressArea.style.display = 'none';
+    if (btn) { btn.disabled = false; btn.textContent = 'Re-sync'; }
+}
+
+async function deleteSyncHistoryEntry(entryId) {
+    try {
+        const resp = await fetch(`/api/sync/history/${entryId}`, { method: 'DELETE' });
+        const data = await resp.json();
+        if (data.success) {
+            const wrapper = document.getElementById(`sync-history-wrapper-${entryId}`);
+            if (wrapper) {
+                wrapper.style.transition = 'opacity 0.2s ease, max-height 0.3s ease';
+                wrapper.style.opacity = '0';
+                wrapper.style.maxHeight = wrapper.offsetHeight + 'px';
+                requestAnimationFrame(() => { wrapper.style.maxHeight = '0'; wrapper.style.overflow = 'hidden'; });
+                setTimeout(() => wrapper.remove(), 300);
+            }
+        } else {
+            showToast('Failed to delete entry', 'error');
+        }
+    } catch (err) {
+        console.error('Error deleting sync history entry:', err);
+        showToast('Failed to delete entry', 'error');
+    }
+}
+
+// ── Sync Playlist to Server (from Download Modal) ──────────────────
+
+// Track active modal syncs
+let _activeModalSyncs = {};
+
+function _isBeatportPlaylistId(id) {
+    return id.startsWith('beatport_chart_') || id.startsWith('beatport_top100_') || id.startsWith('beatport_hype100_');
+}
+
+async function syncPlaylistToServer(playlistId) {
+    const process = activeDownloadProcesses[playlistId];
+    if (!process) { showToast('No playlist data found', 'error'); return; }
+
+    // Disable the sync button
+    const btn = document.getElementById(`sync-server-btn-${playlistId}`);
+    if (btn) { btn.disabled = true; btn.textContent = 'Syncing...'; }
+
+    // Show progress area
+    const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
+    if (progressArea) progressArea.style.display = '';
+
+    const syncPlaylistId = `beatport_sync_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const playlistName = process.playlist?.name || 'Beatport Playlist';
+
+    // Format tracks for the sync API
+    const tracks = (process.tracks || []).map(t => {
+        const artists = Array.isArray(t.artists)
+            ? (typeof t.artists[0] === 'object' ? t.artists.map(a => a.name || a) : t.artists)
+            : [t.artists || 'Unknown Artist'];
+        const albumName = typeof t.album === 'object' ? (t.album?.name || '') : (t.album || '');
+        return {
+            id: t.id || '',
+            name: t.name || '',
+            artists: artists,
+            album: albumName,
+            duration_ms: t.duration_ms || 0,
+            popularity: t.popularity || 0
+        };
+    });
+
+    try {
+        const response = await fetch('/api/sync/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                playlist_id: syncPlaylistId,
+                playlist_name: playlistName,
+                tracks: tracks
+            })
+        });
+
+        const result = await response.json();
+        if (!result.success) {
+            showToast(`Sync failed: ${result.error || 'Unknown error'}`, 'error');
+            _cleanupModalSync(playlistId);
+            return;
+        }
+
+        _activeModalSyncs[playlistId] = { syncPlaylistId };
+        _pollModalSyncProgress(playlistId, syncPlaylistId);
+
+    } catch (err) {
+        console.error('Error starting playlist sync:', err);
+        showToast('Failed to start sync', 'error');
+        _cleanupModalSync(playlistId);
+    }
+}
+
+function _pollModalSyncProgress(playlistId, syncPlaylistId) {
+    const pollInterval = setInterval(async () => {
+        try {
+            const resp = await fetch(`/api/sync/status/${syncPlaylistId}`);
+            if (!resp.ok) { clearInterval(pollInterval); _cleanupModalSync(playlistId, 'error'); return; }
+            const state = await resp.json();
+
+            const bar = document.getElementById(`modal-sync-bar-${playlistId}`);
+            const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
+            const matchedEl = document.getElementById(`modal-sync-matched-${playlistId}`);
+            const failedEl = document.getElementById(`modal-sync-failed-${playlistId}`);
+
+            if (state.status === 'syncing' || state.status === 'starting') {
+                const p = state.progress || {};
+                const matched = p.matched_tracks || 0;
+                const failed = p.failed_tracks || 0;
+                const total = p.total_tracks || 0;
+                const step = p.current_step || 'Processing';
+                const currentTrack = p.current_track || '';
+                const processed = matched + failed;
+                const percent = total > 0 ? Math.round((processed / total) * 100) : 0;
+
+                if (bar) bar.style.width = `${percent}%`;
+                if (stepEl) stepEl.textContent = currentTrack ? `${step} — ${currentTrack}` : step;
+                if (matchedEl) matchedEl.textContent = `${matched} matched`;
+                if (failedEl) failedEl.textContent = `${failed} failed`;
+
+            } else if (state.status === 'finished') {
+                clearInterval(pollInterval);
+                const p = state.progress || state.result || {};
+                const matched = p.matched_tracks || 0;
+                const failed = p.failed_tracks || 0;
+                const total = p.total_tracks || 0;
+                const synced = p.synced_tracks || 0;
+
+                if (bar) bar.style.width = '100%';
+                if (stepEl) stepEl.textContent = `Sync complete — ${matched}/${total} matched, ${synced} synced`;
+                if (matchedEl) matchedEl.textContent = `${matched} matched`;
+                if (failedEl) failedEl.textContent = `${failed} failed`;
+
+                const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
+                if (cancelBtn) cancelBtn.style.display = 'none';
+
+                showToast(`Server sync complete: ${matched}/${total} matched`, 'success');
+
+                // Re-enable sync button after a delay
+                setTimeout(() => _cleanupModalSync(playlistId, 'finished'), 5000);
+
+            } else if (state.status === 'cancelled' || state.status === 'error') {
+                clearInterval(pollInterval);
+                if (stepEl) stepEl.textContent = state.status === 'cancelled' ? 'Sync cancelled' : `Sync error`;
+                const cancelBtn = document.getElementById(`modal-sync-cancel-${playlistId}`);
+                if (cancelBtn) cancelBtn.style.display = 'none';
+                setTimeout(() => _cleanupModalSync(playlistId, state.status), 3000);
+            }
+        } catch (err) {
+            console.error('Error polling modal sync status:', err);
+            clearInterval(pollInterval);
+            _cleanupModalSync(playlistId, 'error');
+        }
+    }, 2000);
+
+    if (_activeModalSyncs[playlistId]) {
+        _activeModalSyncs[playlistId].pollInterval = pollInterval;
+    }
+}
+
+async function cancelModalSync(playlistId) {
+    const active = _activeModalSyncs[playlistId];
+    if (!active) return;
+
+    try {
+        await fetch('/api/sync/cancel', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ playlist_id: active.syncPlaylistId })
+        });
+        const stepEl = document.getElementById(`modal-sync-step-${playlistId}`);
+        if (stepEl) stepEl.textContent = 'Cancelling...';
+    } catch (err) {
+        console.error('Error cancelling modal sync:', err);
+    }
+}
+
+function _cleanupModalSync(playlistId, finalStatus) {
+    const active = _activeModalSyncs[playlistId];
+    if (active && active.pollInterval) clearInterval(active.pollInterval);
+    delete _activeModalSyncs[playlistId];
+
+    const progressArea = document.getElementById(`modal-sync-progress-${playlistId}`);
+    const btn = document.getElementById(`sync-server-btn-${playlistId}`);
+
+    if (finalStatus === 'finished') {
+        // Keep progress visible but hide after fade
+        if (progressArea) setTimeout(() => { progressArea.style.display = 'none'; }, 300);
+    } else {
+        if (progressArea) progressArea.style.display = 'none';
+    }
+    if (btn) { btn.disabled = false; btn.textContent = 'Sync to Server'; }
+}
+
+// ── Metadata Cache Modal ────────────────────────────────────────────
+let _mcacheCurrentTab = 'artist';
+let _mcachePage = 0;
+let _mcacheSearchTimeout = null;
+// ==================================================================================
+// DOWNLOAD BLACKLIST VIEWER
+// ==================================================================================
+
+async function loadBlacklistCount() {
+    try {
+        const res = await fetch('/api/library/blacklist');
+        const data = await res.json();
+        const el = document.getElementById('blacklist-count');
+        if (el) el.textContent = data.entries?.length || 0;
+    } catch (e) { /* ignore */ }
+}
+
+async function openBlacklistModal() {
+    const existing = document.getElementById('blacklist-modal-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.id = 'blacklist-modal-overlay';
+    overlay.className = 'redownload-overlay';
+    overlay.onclick = e => { if (e.target === overlay) overlay.remove(); };
+
+    overlay.innerHTML = `
+        <div class="blacklist-modal">
+            <div class="blacklist-modal-header">
+                <h3>Download Blacklist</h3>
+                <button class="redownload-close" onclick="document.getElementById('blacklist-modal-overlay')?.remove()">&times;</button>
+            </div>
+            <div class="blacklist-modal-body" id="blacklist-modal-body">
+                <div class="redownload-loading"><div class="server-search-spinner"></div>Loading...</div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+
+    const escH = e => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', escH); } };
+    document.addEventListener('keydown', escH);
+
+    try {
+        const res = await fetch('/api/library/blacklist');
+        const data = await res.json();
+        const body = document.getElementById('blacklist-modal-body');
+
+        if (!data.success || !data.entries || data.entries.length === 0) {
+            body.innerHTML = '<div class="blacklist-empty">No blocked sources. Sources can be blacklisted from the Source Info (ℹ) button on tracks in the enhanced library view.</div>';
+            return;
+        }
+
+        const serviceIcons = { soulseek: '🔍', youtube: '▶️', tidal: '🌊', qobuz: '🎵', hifi: '🎧', deezer_dl: '💜' };
+
+        body.innerHTML = data.entries.map(e => {
+            const displayFile = (e.blocked_filename || '').replace(/\\/g, '/').split('/').pop() || 'Unknown';
+            const svc = e.blocked_username && ['youtube', 'tidal', 'qobuz', 'hifi', 'deezer_dl'].includes(e.blocked_username) ? e.blocked_username : 'soulseek';
+            const icon = serviceIcons[svc] || '🔍';
+            const ago = e.created_at ? timeAgo(e.created_at) : '';
+            return `
+                <div class="blacklist-entry">
+                    <div class="blacklist-entry-icon">${icon}</div>
+                    <div class="blacklist-entry-info">
+                        <div class="blacklist-entry-track">${_esc(e.track_artist || '')}${e.track_artist && e.track_title ? ' — ' : ''}${_esc(e.track_title || '')}</div>
+                        <div class="blacklist-entry-file" title="${_esc(e.blocked_filename || '')}">${_esc(displayFile)}</div>
+                        ${e.blocked_username && svc === 'soulseek' ? `<div class="blacklist-entry-user">from ${_esc(e.blocked_username)}</div>` : ''}
+                    </div>
+                    <div class="blacklist-entry-meta">${ago}</div>
+                    <button class="blacklist-entry-remove" onclick="_removeBlacklistEntry(${e.id}, this)" title="Remove from blacklist">✕</button>
+                </div>`;
+        }).join('');
+
+    } catch (e) {
+        document.getElementById('blacklist-modal-body').innerHTML = `<div class="blacklist-empty">Error: ${e.message}</div>`;
+    }
+}
+
+async function _removeBlacklistEntry(id, btn) {
+    if (!await showConfirmDialog({ title: 'Remove from Blacklist', message: 'Allow this source to be used for downloads again?', confirmText: 'Remove' })) return;
+    try {
+        const res = await fetch(`/api/library/blacklist/${id}`, { method: 'DELETE' });
+        const data = await res.json();
+        if (data.success) {
+            btn.closest('.blacklist-entry').remove();
+            showToast('Removed from blacklist', 'success');
+            loadBlacklistCount();
+        }
+    } catch (e) {
+        showToast('Error: ' + e.message, 'error');
+    }
+}
+
+const MCACHE_PAGE_SIZE = 48;
+
+function openMetadataCacheModal() {
+    const modal = document.getElementById('mcache-browse-modal');
+    if (modal) {
+        modal.style.display = 'flex';
+        _mcacheCurrentTab = 'artist';
+        _mcachePage = 0;
+        // Reset UI
+        document.querySelectorAll('.mcache-tab').forEach(t => t.classList.remove('active'));
+        document.querySelector('.mcache-tab[data-tab="artist"]')?.classList.add('active');
+        const searchInput = document.getElementById('mcache-search');
+        if (searchInput) searchInput.value = '';
+        const sourceFilter = document.getElementById('mcache-source-filter');
+        if (sourceFilter) sourceFilter.value = '';
+        const sortFilter = document.getElementById('mcache-sort-filter');
+        if (sortFilter) sortFilter.value = 'last_accessed_at';
+        loadMetadataCacheBrowseStats();
+        loadMetadataCacheBrowse();
+    }
+}
+
+function closeMetadataCacheModal() {
+    const modal = document.getElementById('mcache-browse-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+async function loadMetadataCacheBrowseStats() {
+    try {
+        const response = await fetch('/api/metadata-cache/stats');
+        if (!response.ok) return;
+        const stats = await response.json();
+
+        const el = (id, val) => {
+            const e = document.getElementById(id);
+            if (e) e.textContent = val;
+        };
+
+        const spotifyTotal = (stats.artists?.spotify || 0) + (stats.albums?.spotify || 0) + (stats.tracks?.spotify || 0);
+        const itunesTotal = (stats.artists?.itunes || 0) + (stats.albums?.itunes || 0) + (stats.tracks?.itunes || 0);
+        const deezerTotal = (stats.artists?.deezer || 0) + (stats.albums?.deezer || 0) + (stats.tracks?.deezer || 0);
+        const beatportTotal = (stats.artists?.beatport || 0) + (stats.albums?.beatport || 0) + (stats.tracks?.beatport || 0);
+        el('mcache-browse-spotify-count', spotifyTotal);
+        el('mcache-browse-itunes-count', itunesTotal);
+        el('mcache-browse-deezer-count', deezerTotal);
+        el('mcache-browse-beatport-count', beatportTotal);
+        const discogsTotal = (stats.artists?.discogs || 0) + (stats.albums?.discogs || 0) + (stats.tracks?.discogs || 0);
+        el('mcache-browse-discogs-count', discogsTotal);
+        el('mcache-browse-musicbrainz-count', stats.musicbrainz_total || 0);
+        el('mcache-browse-hits', stats.total_hits || 0);
+        el('mcache-browse-searches', stats.searches || 0);
+    } catch (e) { /* ignore */ }
+}
+
+function switchMetadataCacheTab(tab) {
+    _mcacheCurrentTab = tab;
+    _mcachePage = 0;
+    document.querySelectorAll('.mcache-tab').forEach(t => {
+        t.classList.toggle('active', t.dataset.tab === tab);
+    });
+    loadMetadataCacheBrowse();
+}
+
+async function loadMetadataCacheBrowse() {
+    const grid = document.getElementById('mcache-grid');
+    if (!grid) return;
+
+    const source = document.getElementById('mcache-source-filter')?.value || '';
+    const search = document.getElementById('mcache-search')?.value || '';
+    const sort = document.getElementById('mcache-sort-filter')?.value || 'last_accessed_at';
+
+    grid.innerHTML = '<div class="mcache-empty"><div class="mcache-empty-icon">...</div><div class="mcache-empty-sub">Loading...</div></div>';
+
+    try {
+        let data;
+        if (source === 'musicbrainz') {
+            // MusicBrainz is a separate cache table — use dedicated endpoint
+            const params = new URLSearchParams({
+                entity_type: _mcacheCurrentTab,
+                page: _mcachePage + 1,
+                limit: MCACHE_PAGE_SIZE
+            });
+            if (search) params.set('search', search);
+            const response = await fetch(`/api/metadata-cache/browse-musicbrainz?${params}`);
+            if (!response.ok) throw new Error('Failed to load');
+            data = await response.json();
+        } else {
+            const params = new URLSearchParams({
+                type: _mcacheCurrentTab,
+                sort: sort,
+                sort_dir: sort === 'name' ? 'asc' : 'desc',
+                offset: _mcachePage * MCACHE_PAGE_SIZE,
+                limit: MCACHE_PAGE_SIZE
+            });
+            if (source) params.set('source', source);
+            if (search) params.set('search', search);
+            const response = await fetch(`/api/metadata-cache/browse?${params}`);
+            if (!response.ok) throw new Error('Failed to load');
+            data = await response.json();
+        }
+
+        if (!data.items || data.items.length === 0) {
+            grid.innerHTML = `
+                <div class="mcache-empty">
+                    <div class="mcache-empty-icon">📦</div>
+                    <div class="mcache-empty-title">No cached ${_mcacheCurrentTab}s yet</div>
+                    <div class="mcache-empty-sub">As you search and browse music in SoulSync, API responses will be cached here automatically.</div>
+                </div>`;
+            renderMetadataCachePagination(0, 0);
+            return;
+        }
+
+        renderMetadataCacheGrid(data.items, _mcacheCurrentTab);
+        renderMetadataCachePagination(data.total, data.offset);
+    } catch (e) {
+        grid.innerHTML = '<div class="mcache-empty"><div class="mcache-empty-sub">Failed to load cache data.</div></div>';
+    }
+}
+
+function renderMetadataCacheGrid(items, entityType) {
+    const grid = document.getElementById('mcache-grid');
+    if (!grid) return;
+
+    grid.innerHTML = items.map(item => {
+        const source = item.source || 'spotify';
+        const sourceBadge = `<span class="mcache-source-badge ${source}">${source}</span>`;
+        const cacheAge = formatCacheAge(item.last_accessed_at);
+        const hits = item.access_count || 1;
+
+        let imageHtml = '';
+        const isArtist = entityType === 'artist';
+        const shapeClass = isArtist ? ' artist' : '';
+
+        if (item.image_url) {
+            imageHtml = `<img class="mcache-card-image${shapeClass}" src="${item.image_url}" alt="" loading="lazy" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="mcache-card-image-placeholder${shapeClass}" style="display:none">${(item.name || '?')[0].toUpperCase()}</div>`;
+        } else {
+            imageHtml = `<div class="mcache-card-image-placeholder${shapeClass}">${(item.name || '?')[0].toUpperCase()}</div>`;
+        }
+
+        let subText = '';
+        let metaText = '';
+
+        if (source === 'musicbrainz') {
+            subText = item.artist_name || '';
+            metaText = item._mb_matched ? `MBID: ${(item._mb_id || '').substring(0, 8)}…` : 'No match found';
+        } else if (entityType === 'artist') {
+            const genres = item.genres ? (typeof item.genres === 'string' ? JSON.parse(item.genres || '[]') : item.genres) : [];
+            subText = genres.length > 0 ? genres.slice(0, 2).join(', ') : '';
+            if (item.popularity) metaText = `Pop: ${item.popularity}`;
+        } else if (entityType === 'album') {
+            subText = item.artist_name || '';
+            const parts = [];
+            if (item.release_date) parts.push(item.release_date.substring(0, 4));
+            if (item.total_tracks) parts.push(`${item.total_tracks} tracks`);
+            if (item.album_type) parts.push(item.album_type);
+            metaText = parts.join(' · ');
+        } else if (entityType === 'track') {
+            subText = item.artist_name || '';
+            const parts = [];
+            if (item.album_name) parts.push(item.album_name);
+            if (item.duration_ms) parts.push(formatDuration(item.duration_ms));
+            metaText = parts.join(' · ');
+        }
+
+        const clickAttr = source === 'musicbrainz' ? '' : `onclick="openMetadataCacheDetail('${source}', '${entityType}', '${encodeURIComponent(item.entity_id)}')"`;
+        const mbStatusClass = source === 'musicbrainz' ? (item._mb_matched ? ' mb-matched' : ' mb-failed') : '';
+
+        return `
+            <div class="mcache-card${mbStatusClass}" ${clickAttr}>
+                <div class="mcache-card-top">
+                    ${imageHtml}
+                    <div class="mcache-card-info">
+                        <div class="mcache-card-name" title="${(item.name || '').replace(/"/g, '&quot;')}">${item.name || 'Unknown'}</div>
+                        ${subText ? `<div class="mcache-card-sub">${subText}</div>` : ''}
+                        ${metaText ? `<div class="mcache-card-meta">${metaText}</div>` : ''}
+                    </div>
+                </div>
+                <div class="mcache-card-bottom">
+                    ${sourceBadge}
+                    <span class="mcache-card-cache-info">${cacheAge} · ${hits}x</span>
+                </div>
+            </div>`;
+    }).join('');
+}
+
+function renderMetadataCachePagination(total, offset) {
+    const container = document.getElementById('mcache-pagination');
+    if (!container) return;
+
+    const totalPages = Math.ceil(total / MCACHE_PAGE_SIZE);
+    const currentPage = Math.floor(offset / MCACHE_PAGE_SIZE);
+
+    if (totalPages <= 1) {
+        container.innerHTML = total > 0 ? `<span style="font-size:11px;color:rgba(255,255,255,0.3)">${total} result${total !== 1 ? 's' : ''}</span>` : '';
+        return;
+    }
+
+    let html = '';
+    html += `<button class="mcache-page-btn" ${currentPage === 0 ? 'disabled' : ''} onclick="_mcachePage=${currentPage - 1};loadMetadataCacheBrowse()">‹</button>`;
+
+    const maxVisible = 7;
+    let start = Math.max(0, currentPage - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages, start + maxVisible);
+    if (end - start < maxVisible) start = Math.max(0, end - maxVisible);
+
+    if (start > 0) {
+        html += `<button class="mcache-page-btn" onclick="_mcachePage=0;loadMetadataCacheBrowse()">1</button>`;
+        if (start > 1) html += `<span style="color:rgba(255,255,255,0.2);padding:0 4px">...</span>`;
+    }
+
+    for (let i = start; i < end; i++) {
+        html += `<button class="mcache-page-btn${i === currentPage ? ' active' : ''}" onclick="_mcachePage=${i};loadMetadataCacheBrowse()">${i + 1}</button>`;
+    }
+
+    if (end < totalPages) {
+        if (end < totalPages - 1) html += `<span style="color:rgba(255,255,255,0.2);padding:0 4px">...</span>`;
+        html += `<button class="mcache-page-btn" onclick="_mcachePage=${totalPages - 1};loadMetadataCacheBrowse()">${totalPages}</button>`;
+    }
+
+    html += `<button class="mcache-page-btn" ${currentPage >= totalPages - 1 ? 'disabled' : ''} onclick="_mcachePage=${currentPage + 1};loadMetadataCacheBrowse()">›</button>`;
+    html += `<span style="font-size:11px;color:rgba(255,255,255,0.25);margin-left:8px">${total} total</span>`;
+
+    container.innerHTML = html;
+}
+
+async function openMetadataCacheDetail(source, entityType, entityId) {
+    const modal = document.getElementById('mcache-detail-modal');
+    const body = document.getElementById('mcache-detail-body');
+    const title = document.getElementById('mcache-detail-title');
+    if (!modal || !body) return;
+
+    modal.style.display = 'flex';
+    body.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,0.4)">Loading...</div>';
+    if (title) title.textContent = 'Loading...';
+
+    try {
+        const response = await fetch(`/api/metadata-cache/entity/${source}/${entityType}/${entityId}`);
+        if (!response.ok) throw new Error('Not found');
+        const data = await response.json();
+
+        if (title) title.textContent = data.name || 'Unknown';
+
+        const isArtist = entityType === 'artist';
+        const shapeClass = isArtist ? ' artist' : '';
+        let imageHtml = '';
+        if (data.image_url) {
+            imageHtml = `<img class="mcache-detail-image${shapeClass}" src="${data.image_url}" alt="" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="mcache-detail-image-placeholder${shapeClass}" style="display:none">${(data.name || '?')[0].toUpperCase()}</div>`;
+        } else {
+            imageHtml = `<div class="mcache-detail-image-placeholder${shapeClass}">${(data.name || '?')[0].toUpperCase()}</div>`;
+        }
+
+        const sourceBadge = `<span class="mcache-source-badge ${source}">${source}</span>`;
+        const typeBadge = `<span class="mcache-type-badge">${entityType}</span>`;
+
+        // Build structured fields table
+        let fieldsHtml = '<table class="mcache-detail-table">';
+        const addRow = (label, value) => {
+            if (value !== null && value !== undefined && value !== '') {
+                fieldsHtml += `<tr><td>${label}</td><td>${value}</td></tr>`;
+            }
+        };
+
+        addRow('Entity ID', data.entity_id);
+        addRow('Name', data.name);
+
+        if (entityType === 'artist') {
+            const genres = data.genres ? (typeof data.genres === 'string' ? JSON.parse(data.genres || '[]') : data.genres) : [];
+            if (genres.length) addRow('Genres', genres.join(', '));
+            if (data.popularity) addRow('Popularity', data.popularity);
+            if (data.followers) addRow('Followers', data.followers.toLocaleString());
+        } else if (entityType === 'album') {
+            addRow('Artist', data.artist_name);
+            addRow('Release Date', data.release_date);
+            addRow('Total Tracks', data.total_tracks);
+            addRow('Album Type', data.album_type);
+            addRow('Label', data.label);
+        } else if (entityType === 'track') {
+            addRow('Artist', data.artist_name);
+            addRow('Album', data.album_name);
+            if (data.duration_ms) addRow('Duration', formatDuration(data.duration_ms));
+            addRow('Track Number', data.track_number);
+            addRow('Disc Number', data.disc_number);
+            addRow('Explicit', data.explicit ? 'Yes' : 'No');
+            addRow('ISRC', data.isrc);
+            if (data.preview_url) addRow('Preview', `<a href="${data.preview_url}" target="_blank" style="color:var(--accent,#6d5dfc)">Listen</a>`);
+        }
+
+        fieldsHtml += '</table>';
+
+        // Cache metadata section
+        let cacheHtml = '<div class="mcache-detail-section-title">Cache Metadata</div>';
+        cacheHtml += '<table class="mcache-detail-table">';
+        if (data.created_at) cacheHtml += `<tr><td>Cached At</td><td>${new Date(data.created_at).toLocaleString()}</td></tr>`;
+        if (data.last_accessed_at) cacheHtml += `<tr><td>Last Accessed</td><td>${new Date(data.last_accessed_at).toLocaleString()}</td></tr>`;
+        if (data.access_count) cacheHtml += `<tr><td>Access Count</td><td>${data.access_count}</td></tr>`;
+        if (data.ttl_days) cacheHtml += `<tr><td>TTL</td><td>${data.ttl_days} days</td></tr>`;
+        cacheHtml += '</table>';
+
+        // Raw JSON section
+        let rawJsonHtml = '';
+        if (data.raw_json) {
+            const rawStr = typeof data.raw_json === 'string' ? data.raw_json : JSON.stringify(data.raw_json, null, 2);
+            const escapedJson = rawStr.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            rawJsonHtml = `
+                <div class="mcache-detail-section-title">Raw API Response</div>
+                <button class="mcache-raw-json-toggle" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'block':'none';this.textContent=this.nextElementSibling.style.display==='none'?'Show Raw JSON':'Hide Raw JSON'">Show Raw JSON</button>
+                <pre class="mcache-raw-json" style="display:none">${escapedJson}</pre>`;
+        }
+
+        body.innerHTML = `
+            <div class="mcache-detail-hero">
+                ${imageHtml}
+                <div class="mcache-detail-hero-info">
+                    <div class="mcache-detail-hero-name">${data.name || 'Unknown'}</div>
+                    ${entityType !== 'artist' && data.artist_name ? `<div class="mcache-detail-hero-sub">${data.artist_name}</div>` : ''}
+                    <div class="mcache-detail-badges">
+                        ${sourceBadge}
+                        ${typeBadge}
+                    </div>
+                </div>
+            </div>
+            <div class="mcache-detail-section-title">Details</div>
+            ${fieldsHtml}
+            ${cacheHtml}
+            ${rawJsonHtml}`;
+    } catch (e) {
+        body.innerHTML = '<div style="text-align:center;padding:40px;color:rgba(255,255,255,0.4)">Failed to load entity details.</div>';
+    }
+}
+
+function closeMetadataCacheDetail() {
+    const modal = document.getElementById('mcache-detail-modal');
+    if (modal) modal.style.display = 'none';
+}
+
+function toggleMcacheClearDropdown(event) {
+    event.stopPropagation();
+    const menu = document.getElementById('mcache-clear-dropdown-menu');
+    if (!menu) return;
+    const isOpen = menu.style.display === 'block';
+    menu.style.display = isOpen ? 'none' : 'block';
+    if (!isOpen) {
+        const closeHandler = (e) => {
+            if (!e.target.closest('#mcache-clear-dropdown')) {
+                menu.style.display = 'none';
+                document.removeEventListener('click', closeHandler);
+            }
+        };
+        setTimeout(() => document.addEventListener('click', closeHandler), 0);
+    }
+}
+
+async function clearMetadataCache() {
+    if (!confirm('Clear ALL cached metadata? This removes all cached API responses.')) return;
+    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
+
+    try {
+        const response = await fetch('/api/metadata-cache/clear', { method: 'DELETE' });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Cleared ${data.cleared} cached entries`, 'success');
+            loadMetadataCacheBrowseStats();
+            loadMetadataCacheBrowse();
+            loadMetadataCacheStats();
+        } else {
+            showToast('Failed to clear cache', 'error');
+        }
+    } catch (e) {
+        showToast('Error clearing cache', 'error');
+    }
+}
+
+async function clearMetadataCacheBySource(source) {
+    if (!confirm(`Clear all ${source} cached metadata?`)) return;
+    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
+
+    try {
+        const response = await fetch(`/api/metadata-cache/clear?source=${source}`, { method: 'DELETE' });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Cleared ${data.cleared} ${source} cache entries`, 'success');
+            loadMetadataCacheBrowseStats();
+            loadMetadataCacheBrowse();
+            loadMetadataCacheStats();
+        } else {
+            showToast(`Failed to clear ${source} cache`, 'error');
+        }
+    } catch (e) {
+        showToast(`Error clearing ${source} cache`, 'error');
+    }
+}
+
+async function clearMusicBrainzCache(failedOnly = false) {
+    const label = failedOnly ? 'failed MusicBrainz lookups' : 'ALL MusicBrainz cache entries';
+    if (!confirm(`Clear ${label}?`)) return;
+    document.getElementById('mcache-clear-dropdown-menu').style.display = 'none';
+
+    try {
+        const url = failedOnly ? '/api/metadata-cache/clear-musicbrainz?failed_only=true' : '/api/metadata-cache/clear-musicbrainz';
+        const response = await fetch(url, { method: 'DELETE' });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Cleared ${data.cleared} MusicBrainz cache entries`, 'success');
+            loadMetadataCacheBrowseStats();
+            loadMetadataCacheBrowse();
+            loadMetadataCacheStats();
+        } else {
+            showToast('Failed to clear MusicBrainz cache', 'error');
+        }
+    } catch (e) {
+        showToast('Error clearing MusicBrainz cache', 'error');
+    }
+}
+
+function debouncedMetadataCacheSearch() {
+    if (_mcacheSearchTimeout) clearTimeout(_mcacheSearchTimeout);
+    _mcacheSearchTimeout = setTimeout(() => {
+        _mcachePage = 0;
+        loadMetadataCacheBrowse();
+    }, 400);
+}
+
+function formatCacheAge(timestamp) {
+    if (!timestamp) return '—';
+    const now = new Date();
+    const then = new Date(timestamp);
+    const diffMs = now - then;
+    const diffMin = Math.floor(diffMs / 60000);
+    if (diffMin < 1) return 'now';
+    if (diffMin < 60) return `${diffMin}m`;
+    const diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return `${diffHr}h`;
+    const diffDays = Math.floor(diffHr / 24);
+    if (diffDays < 30) return `${diffDays}d`;
+    return `${Math.floor(diffDays / 30)}mo`;
+}
+
+// ============================================
+// == TOOL HELP MODAL                        ==
+// ============================================
+
+const TOOL_HELP_CONTENT = {
+    'db-updater': {
+        title: 'Database Updater',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Database Updater syncs your media server library (Plex, Jellyfin, or Navidrome) with SoulSync's internal database.</p>
+
+            <h4>Update Modes</h4>
+            <ul>
+                <li><strong>Incremental Update:</strong> Only scans for new artists, albums, and tracks that have been added since the last update. Fast and efficient for regular updates.</li>
+                <li><strong>Full Refresh:</strong> Completely rebuilds the database from scratch. Use this if you've made significant changes to your library or if data seems out of sync.</li>
+            </ul>
+
+            <h4>When to use it?</h4>
+            <ul>
+                <li>After adding new music to your media server</li>
+                <li>When library statistics seem incorrect</li>
+                <li>After changing media server settings</li>
+            </ul>
+
+            <h4>Progress Persistence</h4>
+            <p>The update runs in the background. You can close this page and return later - progress will be preserved and continue where it left off.</p>
+        `
+    },
+    'metadata-updater': {
+        title: 'Metadata Updater',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Metadata Updater triggers all enrichment workers simultaneously, re-checking every item in your library against all connected services (Spotify, MusicBrainz, iTunes, Deezer, AudioDB, Last.fm, Genius, Tidal, Qobuz).</p>
+
+            <h4>Refresh Interval Options</h4>
+            <ul>
+                <li><strong>6 months:</strong> Only updates metadata for artists not updated in the last 180 days</li>
+                <li><strong>3 months:</strong> Updates metadata for artists not updated in the last 90 days</li>
+                <li><strong>1 month:</strong> Updates metadata for artists not updated in the last 30 days</li>
+                <li><strong>Force All:</strong> Updates all artists regardless of when they were last updated</li>
+            </ul>
+
+            <h4>What gets updated?</h4>
+            <ul>
+                <li>Artist profile photos, genres, and descriptions</li>
+                <li>Album cover artwork, labels, and release info</li>
+                <li>Track ISRCs, explicit flags, and external IDs</li>
+                <li>Service match status for all 9 enrichment workers</li>
+            </ul>
+
+            <h4>Note</h4>
+            <p>Available for <strong>Plex</strong> and <strong>Jellyfin</strong> media servers. Each enrichment worker only runs if its service is authenticated.</p>
+        `
+    },
+    'quality-scanner': {
+        title: 'Quality Scanner',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Quality Scanner identifies tracks in your library that don't meet your preferred quality settings and automatically matches them to Spotify to add to your wishlist for re-downloading.</p>
+
+            <h4>Scan Scope</h4>
+            <ul>
+                <li><strong>Watchlist Artists Only:</strong> Only scans tracks from artists you're watching. Faster and more focused.</li>
+                <li><strong>All Library Tracks:</strong> Scans your entire music library. Comprehensive but takes longer.</li>
+            </ul>
+
+            <h4>How it works</h4>
+            <ol>
+                <li>Scans tracks and checks file format against your quality preferences</li>
+                <li>Identifies tracks below your quality threshold (e.g., MP3 when you prefer FLAC)</li>
+                <li>Uses fuzzy matching to find the track on Spotify (70% confidence minimum)</li>
+                <li>Automatically adds matched tracks to your wishlist for re-download</li>
+            </ol>
+
+            <h4>Quality Tiers</h4>
+            <ul>
+                <li><strong>Tier 1 (Best):</strong> FLAC, WAV, ALAC, AIFF - Lossless formats</li>
+                <li><strong>Tier 2:</strong> OPUS, OGG - High quality lossy</li>
+                <li><strong>Tier 3:</strong> M4A, AAC - Standard lossy</li>
+                <li><strong>Tier 4:</strong> MP3, WMA - Lower quality lossy</li>
+            </ul>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Processed:</strong> Total tracks scanned so far</li>
+                <li><strong>Quality Met:</strong> Tracks that meet your quality standards</li>
+                <li><strong>Low Quality:</strong> Tracks below your quality threshold</li>
+                <li><strong>Matched:</strong> Low quality tracks successfully matched to Spotify and added to wishlist</li>
+            </ul>
+        `
+    },
+    'duplicate-cleaner': {
+        title: 'Duplicate Cleaner',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Duplicate Cleaner scans your output folder for duplicate audio files and automatically removes lower-quality versions, keeping only the best copy.</p>
+
+            <h4>How it detects duplicates</h4>
+            <p>Files are considered duplicates when:</p>
+            <ul>
+                <li>They are in the <strong>same folder</strong></li>
+                <li>They have the <strong>exact same filename</strong> (ignoring file extension)</li>
+            </ul>
+            <p>Example: <code>Song.flac</code> and <code>Song.mp3</code> in the same folder = duplicates ✓</p>
+            <p>Example: <code>Song.flac</code> and <code>Song (Remaster).flac</code> = NOT duplicates ✗</p>
+
+            <h4>Which file is kept?</h4>
+            <p>Priority order (best to worst):</p>
+            <ol>
+                <li><strong>Format priority:</strong> FLAC/Lossless > OPUS/OGG > M4A/AAC > MP3/WMA</li>
+                <li><strong>If same format:</strong> Larger file size is kept (usually indicates better bitrate)</li>
+            </ol>
+
+            <h4>Where do deleted files go?</h4>
+            <p>Removed files are moved to <code>Transfer/deleted/</code> folder (not permanently deleted). You can review and recover them if needed.</p>
+
+            <h4>Safety Features</h4>
+            <ul>
+                <li>Only processes audio files (FLAC, MP3, M4A, etc.)</li>
+                <li>Only removes files with identical names in the same folder</li>
+                <li>Files are moved, not deleted - fully recoverable</li>
+                <li>Preserves original folder structure in the deleted folder</li>
+            </ul>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Files Scanned:</strong> Total audio files checked</li>
+                <li><strong>Duplicates Found:</strong> Number of duplicate files detected</li>
+                <li><strong>Deleted:</strong> Files moved to deleted folder</li>
+                <li><strong>Space Freed:</strong> Total disk space reclaimed</li>
+            </ul>
+        `
+    },
+    'media-scan': {
+        title: 'Media Server Scan',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Media Server Scan tool manually triggers a Plex media library scan to detect newly downloaded music files.</p>
+
+            <h4>When to use it?</h4>
+            <ul>
+                <li>After downloading new tracks to refresh your Plex library</li>
+                <li>When new music isn't showing up in Plex</li>
+                <li>To force an immediate library update instead of waiting for auto-scan</li>
+            </ul>
+
+            <h4>What happens when you scan?</h4>
+            <ol>
+                <li><strong>Plex library scan:</strong> Plex scans your music folder for new/changed files</li>
+                <li><strong>Automatic database update:</strong> After the scan completes, SoulSync automatically updates its internal database with new tracks</li>
+                <li><strong>Library refreshed:</strong> New music appears in Plex and SoulSync within moments</li>
+            </ol>
+
+            <h4>Plex only?</h4>
+            <p>Yes! This tool only appears when Plex is your active media server because:</p>
+            <ul>
+                <li><strong>Jellyfin</strong> automatically detects new files instantly (real-time monitoring)</li>
+                <li><strong>Navidrome</strong> automatically detects new files instantly (real-time monitoring)</li>
+                <li><strong>Plex</strong> requires manual scans or has delayed auto-scanning</li>
+            </ul>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Last Scan:</strong> Time of the most recent scan request</li>
+                <li><strong>Status:</strong> Current scan state (Idle, Scanning, Error)</li>
+            </ul>
+
+            <h4>Scan workflow</h4>
+            <p>This tool replicates the same scan process that runs automatically after completing a download modal - ensuring your new tracks are immediately available in your library!</p>
+        `
+    },
+    'retag-tool': {
+        title: 'Retag Tool',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Retag Tool lets you fix metadata on files that have already been downloaded and processed. If an album was tagged with wrong metadata, you can search for the correct match and re-apply tags.</p>
+
+            <h4>How it works</h4>
+            <ul>
+                <li>Browse your past downloads organized by artist</li>
+                <li>Expand an album or single to see individual tracks</li>
+                <li>Click <strong>Retag</strong> to search for the correct album match</li>
+                <li>Select the right album and confirm &mdash; metadata and file paths are updated automatically</li>
+            </ul>
+
+            <h4>What gets updated?</h4>
+            <ul>
+                <li><strong>File tags:</strong> Title, artist, album, track number, genre, cover art</li>
+                <li><strong>File paths:</strong> Files are moved/renamed to match new metadata (based on your path template)</li>
+                <li><strong>Cover art:</strong> cover.jpg is updated in the album folder</li>
+            </ul>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Groups:</strong> Number of album/single download groups tracked</li>
+                <li><strong>Tracks:</strong> Total individual track files tracked</li>
+                <li><strong>Artists:</strong> Number of unique artists across all groups</li>
+            </ul>
+
+            <h4>Notes</h4>
+            <ul>
+                <li>Only album and single downloads are tracked (not playlists)</li>
+                <li>Deleting a group from the list does <strong>not</strong> delete the files</li>
+                <li>Only one retag operation can run at a time</li>
+            </ul>
+        `
+    },
+    'discover-page': {
+        title: 'Discover Page Guide',
+        content: `
+            <h4>What is the Discover page?</h4>
+            <p>The Discover page is your personalized music discovery hub. It uses your watchlist, library listening history, and <strong>MusicMap</strong> to surface new music, create curated playlists, and organize your collection in dynamic ways.</p>
+
+            <h4>🎯 Hero Section (Featured Artists)</h4>
+            <p>The rotating hero showcases <strong>similar artists</strong> discovered via MusicMap. These are artists you don't already have in your library but might enjoy based on your watchlist.</p>
+            <ul>
+                <li>Auto-rotates every 8 seconds through 10 featured artists</li>
+                <li>Similar artists sourced from MusicMap and matched to Spotify</li>
+                <li>Click arrows to navigate manually</li>
+                <li>Add artists to watchlist or view their full discography</li>
+                <li>Data refreshed when watchlist scanner runs</li>
+            </ul>
+
+            <h4>📀 Recent Releases</h4>
+            <p>New albums from artists you're watching <strong>and their MusicMap similar artists</strong>. Cached from Spotify and updated during watchlist scans.</p>
+            <ul>
+                <li>Shows up to 20 recent albums</li>
+                <li>Click any album to view tracks and add to wishlist</li>
+                <li>Automatically filtered to show albums released in the last 90 days</li>
+                <li>Includes both watchlist artists and similar artists from MusicMap</li>
+            </ul>
+
+            <h4>🍂 Seasonal Content (Auto-detected)</h4>
+            <p>Seasonal albums and playlists that appear automatically based on the current season (Winter, Spring, Summer, Fall).</p>
+            <ul>
+                <li><strong>Seasonal Albums:</strong> Albums matching the current season's vibe</li>
+                <li><strong>Seasonal Playlist:</strong> Curated playlist that refreshes with each season</li>
+                <li>Only visible during the matching season</li>
+                <li>Can download and sync to your media server</li>
+            </ul>
+
+            <h4>🎵 Fresh Tape (Release Radar)</h4>
+            <p>Curated playlist of <strong>brand new releases</strong> from your discovery pool. Focuses on tracks released in the past 30 days.</p>
+            <ul>
+                <li>50 tracks, refreshed weekly by watchlist scanner</li>
+                <li>Stays consistent until next update (not random)</li>
+                <li>Download missing tracks or sync to media server</li>
+                <li>Tracks from watchlist artists and MusicMap similar artists</li>
+            </ul>
+
+            <h4>📚 The Archives (Discovery Weekly)</h4>
+            <p>Curated playlist from your <strong>entire discovery pool</strong> - a mix of new and catalog tracks from MusicMap discoveries.</p>
+            <ul>
+                <li>50 tracks, refreshed weekly by watchlist scanner</li>
+                <li>Stays consistent until next update (not random)</li>
+                <li>Broader selection than Fresh Tape (includes older releases)</li>
+                <li>Download missing tracks or sync to media server</li>
+            </ul>
+
+            <h4>📊 Personalized Library Playlists</h4>
+            <p>Playlists generated from <strong>your existing library</strong> using listening statistics:</p>
+            <ul>
+                <li><strong>Recently Added:</strong> Latest 50 tracks added to your library</li>
+                <li><strong>Your Top 50:</strong> All-time most played tracks (requires play count data)</li>
+                <li><strong>Forgotten Favorites:</strong> Tracks you loved but haven't played recently</li>
+            </ul>
+
+            <h4>🎲 Discovery Pool Playlists</h4>
+            <p>Playlists generated from your <strong>discovery pool</strong> (tracks from watchlist/similar artists you don't own yet):</p>
+            <ul>
+                <li><strong>Popular Picks:</strong> High-popularity tracks (Spotify popularity 70+)</li>
+                <li><strong>Hidden Gems:</strong> Underground discoveries (Spotify popularity &lt;40)</li>
+                <li><strong>Discovery Shuffle:</strong> 50 random tracks - different every time you load</li>
+                <li><strong>Familiar Favorites:</strong> Reliable, mid-popularity tracks (40-70)</li>
+            </ul>
+
+            <h4>🎨 Build a Playlist</h4>
+            <p>Create custom playlists using <strong>MusicMap similar artists</strong> from seed artists you select.</p>
+            <ul>
+                <li>Search for any artist on Spotify (even if not in your library)</li>
+                <li>Select 1-5 seed artists</li>
+                <li>Choose playlist size: 25, 50, 75, or 100 tracks</li>
+                <li>Uses cached MusicMap similar artists from your database</li>
+                <li>Pulls albums from those similar artists to build the playlist</li>
+                <li>Download and sync like any other discover playlist</li>
+            </ul>
+
+            <h4>🧠 ListenBrainz Playlists</h4>
+            <p>Access playlists from your ListenBrainz account (requires ListenBrainz authentication).</p>
+            <ul>
+                <li><strong>Created For You:</strong> Playlists generated by ListenBrainz for you</li>
+                <li><strong>Your Playlists:</strong> Playlists you've created on ListenBrainz</li>
+                <li><strong>Collaborative:</strong> Collaborative playlists you're part of</li>
+                <li>Cached locally for performance - click Refresh to update from ListenBrainz</li>
+                <li>Click any playlist to view tracks and download/sync</li>
+            </ul>
+
+            <h4>⏰ Time Machine (Browse by Decade)</h4>
+            <p>Explore your discovery pool organized by release decade.</p>
+            <ul>
+                <li>Dynamically generated tabs for decades with available content (1950s-2020s)</li>
+                <li>Each decade shows up to 100 tracks from that era</li>
+                <li>Great for discovering older catalog releases from your favorite artists</li>
+            </ul>
+
+            <h4>🎵 Browse by Genre</h4>
+            <p>Explore your discovery pool filtered by music genre.</p>
+            <ul>
+                <li>Shows top genres from your discovery pool</li>
+                <li>Click any genre tab to see up to 100 tracks in that genre</li>
+                <li>Genres sourced from Spotify metadata</li>
+            </ul>
+
+            <h4>💾 What is the Discovery Pool?</h4>
+            <p>The <strong>discovery pool</strong> is a database of tracks from:</p>
+            <ul>
+                <li>Artists in your watchlist</li>
+                <li>Similar artists found via <strong>MusicMap</strong></li>
+                <li>Populated during watchlist scanner runs (scrapes music-map.com, matches to Spotify)</li>
+                <li>Filtered to exclude tracks already in your library</li>
+                <li>Used to generate Fresh Tape, The Archives, and discovery pool playlists</li>
+                <li>Caches up to 50 top similar artists across your watchlist</li>
+            </ul>
+
+            <h4>🗺️ How MusicMap Integration Works</h4>
+            <p>SoulSync uses <strong>MusicMap</strong> (music-map.com) instead of Spotify's recommendation API to find similar artists:</p>
+            <ul>
+                <li>During watchlist scans, each watchlist artist is looked up on MusicMap</li>
+                <li>MusicMap's artist similarity graph is scraped to find related artists</li>
+                <li>Similar artist names are matched to Spotify IDs</li>
+                <li>Up to 10 similar artists per watchlist artist are cached (refreshed every 30 days)</li>
+                <li>These cached similar artists power all discovery features</li>
+                <li>This approach gives you more diverse, community-driven recommendations</li>
+            </ul>
+
+            <h4>⬇️ Download & Sync Features</h4>
+            <p>Most discover playlists support two actions:</p>
+            <ul>
+                <li><strong>Download:</strong> Opens modal to match tracks to Soulseek and add to download queue</li>
+                <li><strong>Sync:</strong> Downloads tracks and automatically transfers them to your media server</li>
+                <li>Sync progress persists - you can close the page and it continues in the background</li>
+                <li>Sync status shows: ✓ completed, ⏳ pending, ✗ failed</li>
+            </ul>
+
+            <h4>🔄 When is data refreshed?</h4>
+            <ul>
+                <li><strong>MusicMap Similar Artists:</strong> Fetched during watchlist scans, cached for 30 days</li>
+                <li><strong>Hero, Recent Releases, Fresh Tape, The Archives:</strong> Updated during watchlist scanner runs (Dashboard page)</li>
+                <li><strong>Discovery Pool:</strong> Fully refreshed every 24 hours during watchlist scans (50 top similar artists, 10 albums each)</li>
+                <li><strong>Seasonal Content:</strong> Auto-detected based on current date</li>
+                <li><strong>Personalized Library Playlists:</strong> Generated on-demand from current library data</li>
+                <li><strong>Discovery Pool Playlists:</strong> Generated on-demand from current discovery pool</li>
+                <li><strong>Build a Playlist:</strong> Generated on-demand from cached MusicMap similar artists</li>
+                <li><strong>ListenBrainz:</strong> Cached locally, manually refreshed via Refresh button</li>
+                <li><strong>Time Machine & Genre:</strong> Generated on-demand from current discovery pool</li>
+            </ul>
+
+            <h4>💡 Pro Tips</h4>
+            <ul>
+                <li>Curated playlists (Fresh Tape, The Archives) stay consistent until next watchlist scan - great for weekly listening routines</li>
+                <li>Discovery Shuffle changes every page load - perfect when you want spontaneous recommendations</li>
+                <li>Use Build a Playlist to explore artists not in your watchlist (if seed artist isn't in watchlist, MusicMap data must be cached first)</li>
+                <li>The discovery pool only includes tracks you <strong>don't own yet</strong> - download them to build your collection!</li>
+                <li>Sync feature is ideal for batch downloading entire playlists to your media server</li>
+                <li>MusicMap provides more diverse recommendations than Spotify's algorithm - expect deeper cuts and underground artists!</li>
+                <li>Add more artists to your watchlist to expand your discovery pool with their MusicMap similar artists</li>
+            </ul>
+        `
+    },
+
+    // ==================== Automation Trigger Help ====================
+
+    'auto-schedule': {
+        title: 'Schedule Timer',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Runs your automation on a repeating interval — every X minutes, hours, or days.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Interval:</strong> How often to repeat (e.g. every 6 hours)</li>
+                <li><strong>Unit:</strong> Minutes, Hours, or Days</li>
+            </ul>
+
+            <h4>When does it first run?</h4>
+            <p>The timer starts when SoulSync boots. If the automation was previously scheduled, it resumes from where it left off.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Regular wishlist processing (every 30 minutes)</li>
+                <li>Periodic database backups (every 12 hours)</li>
+                <li>Any recurring maintenance task</li>
+            </ul>
+        `
+    },
+    'auto-daily_time': {
+        title: 'Daily Time',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Runs your automation once per day at a specific time.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Time:</strong> The wall-clock time to run (e.g. 03:00 for 3 AM)</li>
+            </ul>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Nightly watchlist scans</li>
+                <li>Off-peak database updates</li>
+                <li>Daily backups at a consistent time</li>
+            </ul>
+        `
+    },
+    'auto-weekly_time': {
+        title: 'Weekly Schedule',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Runs your automation on specific days of the week at a set time.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Days:</strong> Select one or more days (Mon–Sun)</li>
+                <li><strong>Time:</strong> The time to run on those days</li>
+            </ul>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Weekend-only quality scans</li>
+                <li>Weekly playlist refreshes</li>
+                <li>Scheduled maintenance on quiet days</li>
+            </ul>
+        `
+    },
+    'auto-app_started': {
+        title: 'App Started',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires once when SoulSync starts up. Useful for tasks you want to run on every boot.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Refreshing mirrored playlists on startup</li>
+                <li>Running a quick database sync</li>
+                <li>Sending a "SoulSync is online" notification</li>
+            </ul>
+
+            <h4>Note</h4>
+            <p>This trigger fires only once per startup — it will not fire again until SoulSync is restarted.</p>
+        `
+    },
+    'auto-track_downloaded': {
+        title: 'Track Downloaded',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires every time a single track finishes downloading and post-processing (tagging, moving to library).</p>
+
+            <h4>Conditions</h4>
+            <p>You can filter which downloads trigger this automation:</p>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+                <li><strong>Title:</strong> Match on track title</li>
+                <li><strong>Album:</strong> Match on album name</li>
+                <li><strong>Quality:</strong> Match on file format (FLAC, MP3, etc.)</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{title}</code>, <code>{album}</code>, <code>{quality}</code></p>
+
+            <h4>Note</h4>
+            <p>This fires per-track, not per-album. For an album with 12 tracks, it fires 12 times. Use <strong>Batch Complete</strong> if you want one event per album.</p>
+        `
+    },
+    'auto-batch_complete': {
+        title: 'Batch Complete',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when an entire album or playlist download batch finishes — all tracks in the batch are done (whether successful or failed).</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Playlist name:</strong> Filter by the name of the album or playlist</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{completed_tracks}</code>, <code>{failed_tracks}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Triggering a media server scan after downloads finish</li>
+                <li>Sending a notification when an album is fully downloaded</li>
+                <li>Running a database update after new content arrives</li>
+            </ul>
+        `
+    },
+    'auto-watchlist_new_release': {
+        title: 'New Release Found',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the watchlist scanner detects new music from an artist you're watching. This means a new album, EP, or single has been released that you don't already have.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific watched artists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{new_tracks}</code>, <code>{added_to_wishlist}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Getting notified when your favorite artists drop new music</li>
+                <li>Auto-processing the wishlist immediately after new releases are found</li>
+            </ul>
+        `
+    },
+    'auto-playlist_synced': {
+        title: 'Playlist Synced',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires after a mirrored playlist is synced to your media server (Plex, Jellyfin, or Navidrome). This means the playlist has been matched and created/updated on your server.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{matched_tracks}</code>, <code>{synced_tracks}</code>, <code>{failed_tracks}</code></p>
+        `
+    },
+    'auto-playlist_changed': {
+        title: 'Playlist Changed',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a mirrored playlist detects that the source playlist (on Spotify, Tidal, YouTube, etc.) has changed — tracks were added or removed.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{playlist_name}</code>, <code>{old_count}</code>, <code>{new_count}</code>, <code>{added}</code>, <code>{removed}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Auto-discovering new tracks after a playlist updates</li>
+                <li>Auto-syncing the playlist to your media server</li>
+                <li>Getting notified when your followed playlists change</li>
+            </ul>
+        `
+    },
+    'auto-discovery_completed': {
+        title: 'Discovery Complete',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when Spotify/iTunes metadata discovery finishes for a mirrored playlist. Discovery is the process of matching playlist tracks to official Spotify or iTunes metadata.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Playlist name:</strong> Only fire for specific playlists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{playlist_name}</code>, <code>{total_tracks}</code>, <code>{discovered_count}</code>, <code>{failed_count}</code>, <code>{skipped_count}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Auto-syncing a playlist after discovery completes</li>
+                <li>Getting notified about discovery results (how many matched vs failed)</li>
+            </ul>
+        `
+    },
+    'auto-wishlist_processing_completed': {
+        title: 'Wishlist Processed',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the auto-wishlist processing batch finishes. This is the automated download cycle that searches Soulseek for wishlist tracks.</p>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{tracks_processed}</code>, <code>{tracks_found}</code>, <code>{tracks_failed}</code></p>
+        `
+    },
+    'auto-watchlist_scan_completed': {
+        title: 'Watchlist Scan Done',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the watchlist artist scan completes. The scan checks all watched artists for new releases and adds new tracks to your wishlist.</p>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artists_scanned}</code>, <code>{new_tracks_found}</code>, <code>{tracks_added}</code></p>
+        `
+    },
+    'auto-database_update_completed': {
+        title: 'Database Updated',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the library database refresh finishes — either incremental or full. This means SoulSync's internal database has been synced with your media server.</p>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{total_artists}</code>, <code>{total_albums}</code>, <code>{total_tracks}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Running a quality scan after the database is refreshed</li>
+                <li>Sending a summary notification with library stats</li>
+            </ul>
+        `
+    },
+    'auto-download_failed': {
+        title: 'Download Failed',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a track permanently fails to download. This means all retry attempts and sources have been exhausted.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+                <li><strong>Title:</strong> Match on track title</li>
+                <li><strong>Reason:</strong> Match on failure reason</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
+        `
+    },
+    'auto-download_quarantined': {
+        title: 'File Quarantined',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a downloaded file fails AcoustID verification and is moved to the quarantine folder. This means the audio fingerprint didn't match what was expected — the file might be the wrong song.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+                <li><strong>Title:</strong> Match on track title</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
+
+            <h4>What is quarantine?</h4>
+            <p>Files that fail audio fingerprint verification are moved to a quarantine folder instead of your library. This prevents wrong songs from polluting your collection. You can review quarantined files manually.</p>
+        `
+    },
+    'auto-wishlist_item_added': {
+        title: 'Wishlist Item Added',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a track is added to your wishlist — whether manually, by the quality scanner, or by the watchlist scan.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+                <li><strong>Title:</strong> Match on track title</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{title}</code>, <code>{reason}</code></p>
+        `
+    },
+    'auto-watchlist_artist_added': {
+        title: 'Artist Watched',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when an artist is added to your watchlist. Watched artists are periodically scanned for new releases.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{artist_id}</code></p>
+        `
+    },
+    'auto-watchlist_artist_removed': {
+        title: 'Artist Unwatched',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when an artist is removed from your watchlist.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{artist}</code>, <code>{artist_id}</code></p>
+        `
+    },
+    'auto-import_completed': {
+        title: 'Import Complete',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when an album or track import operation finishes. Imports bring music from external sources into your library.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Artist:</strong> Only fire for specific artists</li>
+                <li><strong>Album name:</strong> Match on album name</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{track_count}</code>, <code>{album_name}</code>, <code>{artist}</code></p>
+        `
+    },
+    'auto-mirrored_playlist_created': {
+        title: 'Playlist Mirrored',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a new playlist mirror is created — a playlist from Spotify, Tidal, YouTube, ListenBrainz, or Beatport is set up for mirroring.</p>
+
+            <h4>Conditions</h4>
+            <ul>
+                <li><strong>Playlist name:</strong> Match on playlist name</li>
+                <li><strong>Source:</strong> Match on platform (spotify, tidal, youtube, etc.)</li>
+            </ul>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{playlist_name}</code>, <code>{source}</code>, <code>{track_count}</code></p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Auto-discovering tracks immediately after a new mirror is created</li>
+                <li>Getting notified when new playlists are mirrored</li>
+            </ul>
+        `
+    },
+    'auto-quality_scan_completed': {
+        title: 'Quality Scan Done',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the quality scanner finishes. The scanner identifies tracks below your quality preferences and adds them to your wishlist for re-downloading.</p>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{quality_met}</code>, <code>{low_quality}</code>, <code>{total_scanned}</code></p>
+        `
+    },
+    'auto-duplicate_scan_completed': {
+        title: 'Duplicate Scan Done',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when the duplicate cleaner finishes scanning your output folder for duplicate audio files.</p>
+
+            <h4>Available variables for notifications</h4>
+            <p><code>{files_scanned}</code>, <code>{duplicates_found}</code>, <code>{space_freed}</code></p>
+        `
+    },
+    'auto-library_scan_completed': {
+        title: 'Library Scan Done',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when a media server library scan is considered complete. This only happens after a <strong>Scan Library</strong> action was triggered — it cannot fire on its own.</p>
+
+            <h4>How does it know the scan is done?</h4>
+            <p>Your media server (Plex, Jellyfin, Navidrome) doesn't send a "scan finished" signal back to SoulSync. So after telling the server to scan, SoulSync waits <strong>approximately 5 minutes</strong> and then assumes the scan has finished. This is a generous estimate that works for most libraries.</p>
+
+            <h4>Timing</h4>
+            <p>From the moment a download finishes to when this trigger fires, expect roughly <strong>6-7 minutes</strong>:</p>
+            <ol>
+                <li>60 second debounce wait (groups multiple downloads together)</li>
+                <li>Media server scan triggered</li>
+                <li>~5 minute wait (assumed scan completion)</li>
+                <li>This event fires</li>
+            </ol>
+
+            <h4>Default use</h4>
+            <p>The system automation <strong>Auto-Update Database After Scan</strong> listens for this trigger to start an incremental database update, keeping your SoulSync library in sync with your media server.</p>
+
+            <h4>Available variables</h4>
+            <p><code>{server_type}</code> — which media server was scanned (plex, jellyfin, navidrome)</p>
+        `
+    },
+
+    // ==================== Automation Action Help ====================
+
+    'auto-process_wishlist': {
+        title: 'Process Wishlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Searches Soulseek for tracks in your wishlist and downloads them. This is the same process that runs automatically on a timer — this action lets you trigger it manually or chain it to events.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Category:</strong> Process all wishlist tracks, or only Albums/EPs, or only Singles</li>
+            </ul>
+
+            <h4>How it works</h4>
+            <ol>
+                <li>Picks tracks from the wishlist (alternating Albums and Singles cycles)</li>
+                <li>Searches Soulseek for each track</li>
+                <li>Downloads the best quality match found</li>
+                <li>Tags and moves files to your library</li>
+            </ol>
+        `
+    },
+    'auto-scan_watchlist': {
+        title: 'Scan Watchlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Checks all watched artists for new releases you don't already have. New tracks are automatically added to your wishlist for downloading.</p>
+
+            <h4>How it works</h4>
+            <ol>
+                <li>Goes through each artist in your watchlist</li>
+                <li>Fetches their discography from Spotify</li>
+                <li>Compares against your library to find missing releases</li>
+                <li>Adds new tracks to your wishlist</li>
+            </ol>
+        `
+    },
+    'auto-scan_library': {
+        title: 'Scan Library',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Tells your media server (Plex, Jellyfin, or Navidrome) to scan its music library folder for new or changed files. This makes newly downloaded music appear in your media server.</p>
+
+            <h4>How it works</h4>
+            <ol>
+                <li>A <strong>60 second debounce</strong> groups rapid requests — if multiple downloads finish close together, only one scan is triggered</li>
+                <li>After the debounce, your media server is told to scan</li>
+                <li>SoulSync waits <strong>~5 minutes</strong> (your media server doesn't report when it's finished, so this is an assumed completion time)</li>
+                <li>The <strong>Library Scan Done</strong> event fires, which can trigger follow-up actions like a database update</li>
+            </ol>
+
+            <h4>Default use</h4>
+            <p>The system automation <strong>Auto-Scan After Downloads</strong> uses this action to automatically scan your library when a batch download completes. You can disable that automation if you prefer to scan manually.</p>
+
+            <h4>Note</h4>
+            <p>Jellyfin and Navidrome often detect new files automatically, but the scan ensures nothing is missed.</p>
+        `
+    },
+    'auto-refresh_mirrored': {
+        title: 'Refresh Mirrored Playlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Re-fetches a mirrored playlist from its source platform (Spotify, Tidal, YouTube, etc.) and updates the local mirror with any track changes.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Playlist:</strong> Select a specific mirrored playlist, or check "Refresh all" to update all mirrors</li>
+            </ul>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Keeping mirrors in sync with playlists that change frequently</li>
+                <li>Detecting added/removed tracks on the source platform</li>
+            </ul>
+        `
+    },
+    'auto-sync_playlist': {
+        title: 'Sync Playlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Syncs a mirrored playlist to your media server. It matches discovered tracks against your library and creates or updates the playlist on Plex, Jellyfin, or Navidrome.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Playlist:</strong> Select which mirrored playlist to sync</li>
+            </ul>
+
+            <h4>Prerequisites</h4>
+            <p>Tracks should be discovered first (matched to Spotify/iTunes metadata) before syncing. Undiscovered tracks will be skipped.</p>
+        `
+    },
+    'auto-discover_playlist': {
+        title: 'Discover Playlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Finds official Spotify or iTunes metadata for tracks in a mirrored playlist. This is required before syncing — it matches each track to a known release so it can be found in your library.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Playlist:</strong> Select a specific playlist, or check "Discover all" to process all mirrored playlists</li>
+            </ul>
+
+            <h4>How it works</h4>
+            <ol>
+                <li>Takes each track name and artist from the mirror</li>
+                <li>Searches Spotify (or iTunes as fallback) for a match</li>
+                <li>Stores the best match with confidence score in the discovery cache</li>
+                <li>Already-discovered tracks are skipped for efficiency</li>
+            </ol>
+        `
+    },
+    'auto-playlist_pipeline': {
+        title: 'Playlist Pipeline',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Runs the full playlist lifecycle in one automation — no signal wiring needed. Executes four phases sequentially:</p>
+            <ol>
+                <li><strong>Refresh</strong> — Re-fetches playlist tracks from the source platform (Spotify, Tidal, YouTube, Deezer)</li>
+                <li><strong>Discover</strong> — Matches each track to official metadata (Spotify/iTunes/Deezer IDs)</li>
+                <li><strong>Sync</strong> — Pushes the playlist to your media server (Plex, Jellyfin, Navidrome)</li>
+                <li><strong>Download Missing</strong> — Queues unmatched tracks to the wishlist for automatic download</li>
+            </ol>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Playlist:</strong> Select a specific mirrored playlist, or check "Process all" to run the pipeline for every mirrored playlist</li>
+                <li><strong>Skip wishlist:</strong> Check this to skip the download phase (useful if you only want to sync, not download)</li>
+            </ul>
+
+            <h4>How the re-sync loop works</h4>
+            <p>Set this on a schedule (e.g., every 6 hours). Between runs, the wishlist processor downloads missing tracks in the background. On the next pipeline run, those newly downloaded tracks will match during the sync phase — so your server playlist gets more complete with each cycle until fully synced.</p>
+
+            <h4>Replaces</h4>
+            <p>This single automation replaces the 4-automation signal chain pattern (Refresh → signal → Discover → signal → Sync → signal → Download). No signals, no chaining, no room for misconfiguration.</p>
+        `
+    },
+    'auto-notify_only': {
+        title: 'Notify Only',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Nothing — it performs no action. It just passes the event data through to the notification step.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Getting notified about events without taking any automated action</li>
+                <li>Monitoring what's happening in SoulSync (downloads, failures, changes)</li>
+                <li>Pair with any event trigger + Discord/Telegram/Pushbullet notification</li>
+            </ul>
+        `
+    },
+    'auto-start_database_update': {
+        title: 'Update Database',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Refreshes SoulSync's internal library database by syncing with your media server (Plex, Jellyfin, or Navidrome).</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Full refresh:</strong> When checked, completely rebuilds the database from scratch. When unchecked, only scans for new content (faster).</li>
+            </ul>
+        `
+    },
+    'auto-run_duplicate_cleaner': {
+        title: 'Run Duplicate Cleaner',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Scans your output folder for duplicate audio files (same filename, different format) and removes the lower-quality version. For example, if you have both <code>Song.flac</code> and <code>Song.mp3</code>, the MP3 is removed.</p>
+
+            <h4>Safety</h4>
+            <p>Removed files are moved to a <code>deleted/</code> subfolder, not permanently deleted. You can recover them if needed.</p>
+        `
+    },
+    'auto-clear_quarantine': {
+        title: 'Clear Quarantine',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Permanently deletes all files in the quarantine folder. Quarantined files are downloads that failed AcoustID audio fingerprint verification — they might be the wrong song.</p>
+
+            <h4>Warning</h4>
+            <p>This permanently deletes files. Make sure you've reviewed quarantined files before setting up an automation for this.</p>
+        `
+    },
+    'auto-cleanup_wishlist': {
+        title: 'Clean Up Wishlist',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Removes duplicate entries and tracks you already own from your wishlist. Keeps the wishlist lean by removing items that no longer need downloading.</p>
+        `
+    },
+    'auto-update_discovery_pool': {
+        title: 'Update Discovery Pool',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Refreshes the discovery pool with new tracks from your mirrored playlists. The discovery pool tracks which playlist tracks have been successfully matched and which ones failed.</p>
+        `
+    },
+    'auto-start_quality_scan': {
+        title: 'Run Quality Scan',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Scans your library for tracks that don't meet your quality preferences (e.g., MP3 when you prefer FLAC). Low-quality tracks are matched to Spotify and added to your wishlist for re-downloading in better quality.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Scope:</strong> Scan only watchlist artists (faster) or your entire library (thorough)</li>
+            </ul>
+        `
+    },
+    'auto-backup_database': {
+        title: 'Backup Database',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Creates a timestamped backup of SoulSync's SQLite database. Uses the SQLite backup API for a safe hot-copy while the app is running.</p>
+
+            <h4>Retention</h4>
+            <p>Keeps the last 5 backups automatically. Older backups are cleaned up to save disk space.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Nightly automated backups</li>
+                <li>Pre-update safety backups</li>
+                <li>Peace of mind for your library data</li>
+            </ul>
+        `
+    },
+    'auto-refresh_beatport_cache': {
+        title: 'Refresh Beatport Cache',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Scrapes the Beatport homepage for top charts and caches the results locally. Keeps the Beatport charts page loading instantly without needing to scrape on every visit.</p>
+
+            <h4>Cache duration</h4>
+            <p>Cache lasts 24 hours. This action refreshes it early so it's always warm when you visit the charts page.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Keeping Beatport charts available instantly</li>
+                <li>Scheduling daily cache refreshes (e.g. every morning)</li>
+            </ul>
+        `
+    },
+    'auto-clean_search_history': {
+        title: 'Clean Search History',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Removes old search queries from Soulseek. This keeps your search history clean and prevents buildup over time.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Periodic housekeeping</li>
+                <li>Keeping Soulseek search history tidy</li>
+            </ul>
+        `
+    },
+    'auto-clean_completed_downloads': {
+        title: 'Clean Completed Downloads',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Clears completed downloads from the transfer list and removes any empty directories left behind in the import folder.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Automatic cleanup after batch downloads</li>
+                <li>Preventing import folder clutter</li>
+                <li>Chaining after a batch complete trigger</li>
+            </ul>
+        `
+    },
+    'auto-full_cleanup': {
+        title: 'Full Cleanup',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Runs all housekeeping tasks in a single sweep:</p>
+            <ol>
+                <li><strong>Clear Quarantine</strong> — permanently deletes all quarantined files</li>
+                <li><strong>Clear Download Queue</strong> — removes completed, errored, and cancelled downloads from Soulseek</li>
+                <li><strong>Sweep Empty Directories</strong> — removes empty folders left behind in the input directory</li>
+                <li><strong>Sweep Import Folder</strong> — removes empty directories from the import folder</li>
+                <li><strong>Clean Search History</strong> — trims old Soulseek search queries</li>
+            </ol>
+
+            <h4>Safety</h4>
+            <p>Skips download queue cleanup if batches are actively downloading or post-processing. Each step runs independently — a failure in one step won't stop the others.</p>
+
+            <h4>Good for</h4>
+            <ul>
+                <li>Scheduled housekeeping every 12 hours</li>
+                <li>Keeping disk usage and queue clutter under control</li>
+                <li>Running after large batch downloads complete</li>
+            </ul>
+        `
+    },
+    'auto-deep_scan_library': {
+        title: 'Deep Scan Library',
+        content: `
+            <h4>What does this action do?</h4>
+            <p>Walks your entire media server library and compares it against SoulSync's database. Adds any new tracks found and removes stale entries that no longer exist on the server.</p>
+
+            <h4>How is this different from Database Update?</h4>
+            <ul>
+                <li><strong>Database Update:</strong> Incremental — only looks for new artists/albums added since last update</li>
+                <li><strong>Deep Scan:</strong> Full comparison — checks every track on the server against the database, catches anything missed</li>
+            </ul>
+
+            <h4>Safety</h4>
+            <ul>
+                <li>Never overwrites existing enrichment data (genres, Spotify IDs, artwork)</li>
+                <li>Only inserts tracks that don't already exist in the database</li>
+                <li>Stale track removal has a 50% safety threshold — if more than half the library appears missing, removal is skipped</li>
+            </ul>
+        `
+    },
+
+    // ==================== Notification/Then-Action Help ====================
+
+    'auto-discord_webhook': {
+        title: 'Discord Webhook',
+        content: `
+            <h4>What does this then-action do?</h4>
+            <p>Sends a notification to a Discord channel via webhook when the automation's action completes.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Webhook URL:</strong> The Discord webhook URL for your channel (found in Channel Settings → Integrations → Webhooks)</li>
+                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
+            </ul>
+
+            <h4>Available variables</h4>
+            <p>Use these in your message template:</p>
+            <ul>
+                <li><code>{time}</code> — When the automation ran</li>
+                <li><code>{name}</code> — Automation name</li>
+                <li><code>{run_count}</code> — How many times this automation has run</li>
+                <li><code>{status}</code> — Result status of the action</li>
+            </ul>
+        `
+    },
+    'auto-pushbullet': {
+        title: 'Pushbullet',
+        content: `
+            <h4>What does this then-action do?</h4>
+            <p>Sends a push notification to your phone or desktop via Pushbullet when the automation's action completes.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>API Key:</strong> Your Pushbullet access token (found in Pushbullet Settings → Access Tokens)</li>
+                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
+            </ul>
+
+            <h4>Available variables</h4>
+            <p>Use these in your message template:</p>
+            <ul>
+                <li><code>{time}</code> — When the automation ran</li>
+                <li><code>{name}</code> — Automation name</li>
+                <li><code>{run_count}</code> — How many times this automation has run</li>
+                <li><code>{status}</code> — Result status of the action</li>
+            </ul>
+        `
+    },
+    'auto-telegram': {
+        title: 'Telegram',
+        content: `
+            <h4>What does this then-action do?</h4>
+            <p>Sends a message to a Telegram chat via bot when the automation's action completes.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Bot Token:</strong> Your Telegram bot token (from @BotFather)</li>
+                <li><strong>Chat ID:</strong> The chat/group ID to send messages to</li>
+                <li><strong>Message Template:</strong> Custom message with variable placeholders</li>
+            </ul>
+
+            <h4>Available variables</h4>
+            <p>Use these in your message template:</p>
+            <ul>
+                <li><code>{time}</code> — When the automation ran</li>
+                <li><code>{name}</code> — Automation name</li>
+                <li><code>{run_count}</code> — How many times this automation has run</li>
+                <li><code>{status}</code> — Result status of the action</li>
+            </ul>
+        `
+    },
+
+    'auto-webhook': {
+        title: 'Webhook (POST)',
+        content: `
+            <h4>What does this then-action do?</h4>
+            <p>Sends an HTTP POST request with a JSON payload to any URL when the automation's action completes. Use it to integrate with Gotify, Home Assistant, Slack, n8n, or any service that accepts webhooks.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>URL:</strong> The endpoint to POST to (e.g. <code>https://gotify.example.com/message?token=xxx</code>)</li>
+                <li><strong>Headers:</strong> Optional custom headers, one per line in <code>Key: Value</code> format. Useful for auth tokens.</li>
+                <li><strong>Custom Message:</strong> Optional message with variable placeholders. Added as a "message" field in the JSON payload.</li>
+            </ul>
+
+            <h4>JSON payload</h4>
+            <p>The POST body always includes all event variables as JSON fields:</p>
+            <pre style="background:rgba(255,255,255,0.05);padding:8px;border-radius:6px;font-size:11px;">{"time": "2026-04-02 ...", "name": "My Automation", "status": "success", ...}</pre>
+
+            <h4>Available variables</h4>
+            <p>Use these in your message or header values:</p>
+            <ul>
+                <li><code>{time}</code> — When the automation ran</li>
+                <li><code>{name}</code> — Automation name</li>
+                <li><code>{run_count}</code> — How many times this automation has run</li>
+                <li><code>{status}</code> — Result status of the action</li>
+            </ul>
+        `
+    },
+
+    // ==================== Signal System Help ====================
+
+    'auto-signal_received': {
+        title: 'Signal Received',
+        content: `
+            <h4>What is this trigger?</h4>
+            <p>Fires when another automation sends a named signal using the <strong>Fire Signal</strong> then-action. This lets you chain automations together — one automation finishes and wakes up another.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Signal Name:</strong> The name to listen for (e.g. <code>library_ready</code>, <code>scan_done</code>). Must match the name used in the Fire Signal action.</li>
+            </ul>
+
+            <h4>How chaining works</h4>
+            <ol>
+                <li><strong>Automation A:</strong> Trigger = Batch Complete, Action = Scan Library, Then = Fire Signal "scan_done"</li>
+                <li><strong>Automation B:</strong> Trigger = Signal Received "scan_done", Action = Update Database</li>
+                <li>When a download finishes → A scans library → fires signal → B wakes up → updates database</li>
+            </ol>
+
+            <h4>Safety</h4>
+            <ul>
+                <li>Circular signal chains are detected and blocked when you save</li>
+                <li>Maximum chain depth of 5 levels to prevent runaway cascades</li>
+                <li>Same signal can only fire once every 10 seconds (cooldown)</li>
+            </ul>
+
+            <h4>Signal names</h4>
+            <p>Use descriptive lowercase names with underscores: <code>library_ready</code>, <code>scan_complete</code>, <code>downloads_done</code>. Existing signal names from other automations appear as suggestions.</p>
+        `
+    },
+    'auto-fire_signal': {
+        title: 'Fire Signal',
+        content: `
+            <h4>What does this then-action do?</h4>
+            <p>Fires a named signal after the automation's action completes. Any other automation with a <strong>Signal Received</strong> trigger listening for this signal name will wake up and run.</p>
+
+            <h4>Configuration</h4>
+            <ul>
+                <li><strong>Signal Name:</strong> The signal to fire (e.g. <code>library_ready</code>). Use the same name in a Signal Received trigger on another automation to connect them.</li>
+            </ul>
+
+            <h4>Use cases</h4>
+            <ul>
+                <li><strong>Multi-step workflows:</strong> Scan library → fire signal → update database → fire signal → send notification</li>
+                <li><strong>Fan-out:</strong> One signal can trigger multiple automations simultaneously</li>
+                <li><strong>Decoupled logic:</strong> Keep each automation simple with one job, chain them via signals</li>
+            </ul>
+
+            <h4>Combining with notifications</h4>
+            <p>You can add up to 3 then-actions per automation. For example: Fire Signal + Discord notification + Telegram notification — all run after the action completes.</p>
+        `
+    },
+    'backup-manager': {
+        title: 'Backup Manager',
+        content: `
+            <h4>What does this tool do?</h4>
+            <p>The Backup Manager lets you create, view, download, restore, and delete database backups directly from the dashboard.</p>
+
+            <h4>Features</h4>
+            <ul>
+                <li><strong>Backup Now:</strong> Create an instant backup of the current database using SQLite's hot-copy API</li>
+                <li><strong>Download:</strong> Download any backup file to your local machine</li>
+                <li><strong>Restore:</strong> Roll back the database to a previous backup state</li>
+                <li><strong>Delete:</strong> Remove old backups you no longer need</li>
+            </ul>
+
+            <h4>Auto-Backups</h4>
+            <p>SoulSync automatically creates a backup every 3 days via the automation engine. Up to 5 rolling backups are kept (oldest are removed when the limit is exceeded).</p>
+
+            <h4>Restore Safety</h4>
+            <p>When you restore from a backup, a <strong>safety backup</strong> of your current database is created first. This means you can always undo a restore if something goes wrong.</p>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Last Backup:</strong> When the most recent backup was created</li>
+                <li><strong>Backups:</strong> Total number of backup files available</li>
+                <li><strong>Latest Size:</strong> Size of the most recent backup</li>
+                <li><strong>DB Size:</strong> Current size of the live database</li>
+            </ul>
+        `
+    },
+    'metadata-cache': {
+        title: 'Metadata Cache',
+        content: `
+            <h4>What is this?</h4>
+            <p>The Metadata Cache stores every API response from Spotify and iTunes so SoulSync can reuse them instead of making duplicate API calls. This reduces rate limit pressure and speeds up lookups.</p>
+
+            <h4>How it works</h4>
+            <p>When SoulSync fetches artist, album, or track data from Spotify or iTunes, the response is cached locally. The next time the same data is needed, it's served from cache instantly — no API call required. Cached data is even served during Spotify rate limit bans.</p>
+
+            <h4>Browsing the Cache</h4>
+            <p>Click <strong>Browse Cache</strong> to explore all cached metadata. You can filter by entity type (artists, albums, tracks), search by name, filter by source (Spotify/iTunes), and sort by different fields. Click any card to see full details including the raw API response.</p>
+
+            <h4>Cache Management</h4>
+            <ul>
+                <li><strong>TTL:</strong> Entities expire after 30 days, search mappings after 7 days</li>
+                <li><strong>Eviction:</strong> Expired entries are automatically cleaned up</li>
+                <li><strong>Clear:</strong> You can clear the entire cache or filter by source/type</li>
+            </ul>
+
+            <h4>Stats Explained</h4>
+            <ul>
+                <li><strong>Artists:</strong> Total cached artist profiles</li>
+                <li><strong>Albums:</strong> Total cached album records</li>
+                <li><strong>Tracks:</strong> Total cached track records</li>
+                <li><strong>Hits:</strong> Total number of times cached data was served instead of making an API call</li>
+            </ul>
+        `
+    }
+};
+
+function initializeToolHelpButtons() {
+    const helpButtons = document.querySelectorAll('.tool-help-button');
+    const modal = document.getElementById('tool-help-modal');
+    const closeButton = modal.querySelector('.tool-help-modal-close');
+
+    // Attach click handlers to all help buttons
+    helpButtons.forEach(button => {
+        button.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const toolId = button.getAttribute('data-tool');
+            openToolHelpModal(toolId);
+        });
+    });
+
+    // Close modal when clicking close button
+    closeButton.addEventListener('click', closeToolHelpModal);
+
+    // Close modal when clicking outside content
+    modal.addEventListener('click', (e) => {
+        if (e.target === modal) {
+            closeToolHelpModal();
+        }
+    });
+
+    // Close modal on Escape key
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && modal.classList.contains('active')) {
+            closeToolHelpModal();
+        }
+    });
+}
+
+function openToolHelpModal(toolId) {
+    const modal = document.getElementById('tool-help-modal');
+    const titleElement = document.getElementById('tool-help-modal-title');
+    const bodyElement = document.getElementById('tool-help-modal-body');
+
+    const helpData = TOOL_HELP_CONTENT[toolId];
+    if (!helpData) {
+        console.warn(`No help content found for tool: ${toolId}`);
+        return;
+    }
+
+    titleElement.textContent = helpData.title;
+    bodyElement.innerHTML = helpData.content;
+
+    modal.classList.add('active');
+    document.body.style.overflow = 'hidden'; // Prevent background scrolling
+}
+
+function closeToolHelpModal() {
+    const modal = document.getElementById('tool-help-modal');
+    if (modal) modal.classList.remove('active');
+    document.body.style.overflow = ''; // Restore scrolling
+}
+// Global Escape key handler for tool help modal (works even if Tools page wasn't visited)
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        const modal = document.getElementById('tool-help-modal');
+        if (modal && modal.classList.contains('active')) closeToolHelpModal();
+    }
+});
+
+// ===============================
+// == RETAG TOOL FUNCTIONS      ==
+// ===============================
+
+let retagStatusInterval = null;
+let retagCurrentGroupId = null;
+
+async function loadRetagStats() {
+    try {
+        const response = await fetch('/api/retag/stats');
+        const data = await response.json();
+        if (data.success !== false) {
+            const groupsEl = document.getElementById('retag-stat-groups');
+            const tracksEl = document.getElementById('retag-stat-tracks');
+            const artistsEl = document.getElementById('retag-stat-artists');
+            if (groupsEl) groupsEl.textContent = data.groups || 0;
+            if (tracksEl) tracksEl.textContent = data.tracks || 0;
+            if (artistsEl) artistsEl.textContent = data.artists || 0;
+        }
+    } catch (e) {
+        console.warn('Failed to load retag stats:', e);
+    }
+}
+
+async function openRetagModal() {
+    const modal = document.getElementById('retag-modal');
+    if (!modal) return;
+    modal.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+
+    // Reset batch bar and clear-all button
+    const batchBar = document.getElementById('retag-batch-bar');
+    if (batchBar) batchBar.style.display = 'none';
+    const clearBtn = document.getElementById('retag-clear-all-btn');
+    if (clearBtn) { clearBtn.textContent = 'Clear All'; clearBtn.dataset.confirming = ''; clearBtn.style.background = ''; }
+
+    const body = document.getElementById('retag-modal-body');
+    body.innerHTML = '<div class="retag-loading">Loading downloads...</div>';
+
+    try {
+        const response = await fetch('/api/retag/groups');
+        const data = await response.json();
+        if (!data.success || !data.groups || data.groups.length === 0) {
+            body.innerHTML = '<p class="retag-empty">No downloads recorded yet. Downloads will appear here after completing album or single downloads.</p>';
+            if (clearBtn) clearBtn.style.display = 'none';
+            return;
+        }
+        if (clearBtn) clearBtn.style.display = '';
+        renderRetagGroups(data.groups, body);
+    } catch (e) {
+        body.innerHTML = '<p class="retag-error">Failed to load downloads.</p>';
+    }
+}
+
+function closeRetagModal() {
+    const modal = document.getElementById('retag-modal');
+    if (modal) modal.style.display = 'none';
+    document.body.style.overflow = '';
+}
+
+function renderRetagGroups(groups, container) {
+    // Group by artist_name
+    const byArtist = {};
+    groups.forEach(g => {
+        const artist = g.artist_name || 'Unknown Artist';
+        if (!byArtist[artist]) byArtist[artist] = [];
+        byArtist[artist].push(g);
+    });
+
+    let html = '';
+    Object.keys(byArtist).sort((a, b) => a.localeCompare(b)).forEach(artist => {
+        html += `<div class="retag-artist-section">
+            <h3 class="retag-artist-name">${escapeHtml(artist)}</h3>
+            <div class="retag-artist-groups">`;
+
+        byArtist[artist].forEach(group => {
+            const imgHtml = group.image_url
+                ? `<img class="retag-group-image" src="${group.image_url}" alt="" loading="lazy">`
+                : '<div class="retag-group-image-placeholder"></div>';
+            const trackCount = group.track_count || group.total_tracks || 0;
+            const typeLabel = (group.group_type || 'album').charAt(0).toUpperCase() + (group.group_type || 'album').slice(1);
+            const releaseDate = group.release_date ? group.release_date.substring(0, 4) : '';
+            const defaultQuery = (artist + ' ' + (group.album_name || '')).trim();
+
+            html += `<div class="retag-group-card" data-group-id="${group.id}">
+                <div class="retag-group-header" data-group-id="${group.id}" data-default-query="${escapeHtml(defaultQuery).replace(/"/g, '&quot;')}">
+                    <label class="retag-group-checkbox">
+                        <input type="checkbox" class="retag-select-cb" data-group-id="${group.id}">
+                        <span class="retag-checkbox-custom"></span>
+                    </label>
+                    ${imgHtml}
+                    <div class="retag-group-info">
+                        <span class="retag-group-album">${escapeHtml(group.album_name || 'Unknown')}</span>
+                        <span class="retag-group-meta">${typeLabel}${releaseDate ? ' \u00b7 ' + releaseDate : ''} \u00b7 ${trackCount} track${trackCount !== 1 ? 's' : ''}</span>
+                    </div>
+                    <button class="retag-group-btn" data-group-id="${group.id}" title="Re-tag with different album">Retag</button>
+                    <div class="retag-group-delete-area" id="retag-delete-area-${group.id}">
+                        <button class="retag-group-delete-btn" data-group-id="${group.id}" title="Remove from list">&times;</button>
+                    </div>
+                </div>
+                <div class="retag-group-tracks" id="retag-tracks-${group.id}" style="display:none;">
+                    <div class="retag-tracks-loading">Loading tracks...</div>
+                </div>
+            </div>`;
+        });
+
+        html += `</div></div>`;
+    });
+
+    container.innerHTML = html;
+    _attachRetagDelegation(container);
+}
+
+function _attachRetagDelegation(container) {
+    // Single click handler for all retag group interactions
+    container.addEventListener('click', (e) => {
+        const target = e.target;
+
+        // Skip checkbox wrapper clicks — handled by change listener
+        if (target.closest('.retag-group-checkbox')) return;
+
+        // Retag button
+        const retagBtn = target.closest('.retag-group-btn');
+        if (retagBtn) {
+            e.stopPropagation();
+            const groupId = parseInt(retagBtn.dataset.groupId);
+            const header = retagBtn.closest('.retag-group-header');
+            const defaultQuery = header ? header.dataset.defaultQuery || '' : '';
+            openRetagSearch(groupId, defaultQuery);
+            return;
+        }
+
+        // Delete confirm buttons (dynamically injected)
+        const confirmYes = target.closest('.retag-confirm-yes');
+        if (confirmYes) {
+            e.stopPropagation();
+            const card = confirmYes.closest('.retag-group-card');
+            if (card) executeRetagGroupDelete(parseInt(card.dataset.groupId));
+            return;
+        }
+        const confirmNo = target.closest('.retag-confirm-no');
+        if (confirmNo) {
+            e.stopPropagation();
+            const card = confirmNo.closest('.retag-group-card');
+            if (card) cancelRetagDeleteConfirm(parseInt(card.dataset.groupId));
+            return;
+        }
+
+        // Delete button
+        const delBtn = target.closest('.retag-group-delete-btn');
+        if (delBtn) {
+            e.stopPropagation();
+            showRetagDeleteConfirm(parseInt(delBtn.dataset.groupId));
+            return;
+        }
+
+        // Group header click (expand/collapse)
+        const header = target.closest('.retag-group-header');
+        if (header) {
+            toggleRetagGroup(parseInt(header.dataset.groupId));
+            return;
+        }
+    });
+
+    // Separate change handler for checkboxes
+    container.addEventListener('change', (e) => {
+        if (e.target.classList.contains('retag-select-cb')) {
+            updateRetagBatchBar();
+        }
+    });
+}
+
+async function toggleRetagGroup(groupId) {
+    const tracksDiv = document.getElementById(`retag-tracks-${groupId}`);
+    if (!tracksDiv) return;
+
+    if (tracksDiv.style.display === 'none') {
+        tracksDiv.style.display = 'block';
+        if (tracksDiv.querySelector('.retag-tracks-loading')) {
+            try {
+                const response = await fetch(`/api/retag/groups/${groupId}/tracks`);
+                const data = await response.json();
+                if (data.success && data.tracks && data.tracks.length > 0) {
+                    tracksDiv.innerHTML = data.tracks.map(t => {
+                        const discPrefix = t.disc_number > 1 ? `${t.disc_number}-` : '';
+                        const trackNum = t.track_number != null ? `${discPrefix}${String(t.track_number).padStart(2, '0')}` : '--';
+                        return `<div class="retag-track-item">
+                            <span class="retag-track-number">${trackNum}</span>
+                            <span class="retag-track-title">${escapeHtml(t.title || 'Unknown')}</span>
+                            <span class="retag-track-format">${(t.file_format || '').toUpperCase()}</span>
+                        </div>`;
+                    }).join('');
+                } else {
+                    tracksDiv.innerHTML = '<p class="retag-tracks-empty">No tracks found</p>';
+                }
+            } catch (e) {
+                tracksDiv.innerHTML = '<p class="retag-tracks-empty">Failed to load tracks</p>';
+            }
+        }
+    } else {
+        tracksDiv.style.display = 'none';
+    }
+}
+
+function openRetagSearch(groupId, defaultQuery) {
+    retagCurrentGroupId = groupId;
+    const modal = document.getElementById('retag-search-modal');
+    if (!modal) return;
+    modal.style.display = 'flex';
+
+    const input = document.getElementById('retag-search-input');
+    if (input) {
+        input.value = defaultQuery || '';
+        input.focus();
+        if (defaultQuery) {
+            searchRetagAlbums(defaultQuery);
+        }
+    }
+}
+
+function closeRetagSearch() {
+    const modal = document.getElementById('retag-search-modal');
+    if (modal) modal.style.display = 'none';
+    retagCurrentGroupId = null;
+}
+
+let retagSearchTimeout = null;
+document.addEventListener('DOMContentLoaded', () => {
+    const retagSearchInput = document.getElementById('retag-search-input');
+    if (retagSearchInput) {
+        retagSearchInput.addEventListener('input', (e) => {
+            clearTimeout(retagSearchTimeout);
+            retagSearchTimeout = setTimeout(() => searchRetagAlbums(e.target.value), 400);
+        });
+        retagSearchInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                clearTimeout(retagSearchTimeout);
+                searchRetagAlbums(e.target.value);
+            }
+        });
+    }
+
+    // Close retag modals on escape
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            const searchModal = document.getElementById('retag-search-modal');
+            if (searchModal && searchModal.style.display === 'flex') {
+                closeRetagSearch();
+                return;
+            }
+            const mainModal = document.getElementById('retag-modal');
+            if (mainModal && mainModal.style.display === 'flex') {
+                closeRetagModal();
+            }
+        }
+    });
+
+    // Close retag modal on overlay click
+    const retagModal = document.getElementById('retag-modal');
+    if (retagModal) {
+        retagModal.addEventListener('click', (e) => {
+            if (e.target === retagModal) closeRetagModal();
+        });
+    }
+    const retagSearchModal = document.getElementById('retag-search-modal');
+    if (retagSearchModal) {
+        retagSearchModal.addEventListener('click', (e) => {
+            if (e.target === retagSearchModal) closeRetagSearch();
+        });
+    }
+});
+
+async function searchRetagAlbums(query) {
+    if (!query || !query.trim()) return;
+    const resultsDiv = document.getElementById('retag-search-results');
+    if (!resultsDiv) return;
+    resultsDiv.innerHTML = '<div class="retag-search-loading">Searching...</div>';
+
+    try {
+        const response = await fetch(`/api/retag/search?q=${encodeURIComponent(query.trim())}`);
+        const data = await response.json();
+        if (data.success && data.albums && data.albums.length > 0) {
+            resultsDiv.innerHTML = data.albums.map(a => {
+                const imgHtml = a.image_url
+                    ? `<img class="retag-result-image" src="${a.image_url}" alt="" loading="lazy">`
+                    : '<div class="retag-result-image-placeholder"></div>';
+                const typeLabel = (a.album_type || 'album').charAt(0).toUpperCase() + (a.album_type || 'album').slice(1);
+                const releaseYear = a.release_date ? a.release_date.substring(0, 4) : '';
+                return `<div class="retag-search-result" id="retag-result-${a.id}" onclick="showRetagConfirm(this, ${retagCurrentGroupId}, '${a.id}', '${escapeHtml(a.name).replace(/'/g, "\\'")}')">
+                    ${imgHtml}
+                    <div class="retag-result-info">
+                        <span class="retag-result-name">${escapeHtml(a.name || 'Unknown')}</span>
+                        <span class="retag-result-artist">${escapeHtml(a.artist || 'Unknown')}</span>
+                        <span class="retag-result-meta">${typeLabel}${releaseYear ? ' \u00b7 ' + releaseYear : ''} \u00b7 ${a.total_tracks || 0} tracks</span>
+                    </div>
+                </div>`;
+            }).join('');
+        } else {
+            resultsDiv.innerHTML = '<p class="retag-no-results">No albums found.</p>';
+        }
+    } catch (e) {
+        resultsDiv.innerHTML = '<p class="retag-search-error">Search failed.</p>';
+    }
+}
+
+/**
+ * Show inline confirmation on a search result before retagging
+ */
+function showRetagConfirm(el, groupId, albumId, albumName) {
+    // Clear any other confirming states
+    document.querySelectorAll('.retag-search-result.retag-confirming').forEach(r => {
+        r.classList.remove('retag-confirming');
+        const bar = r.querySelector('.retag-result-confirm-bar');
+        if (bar) bar.remove();
+        r.onclick = r._originalOnclick || null;
+    });
+
+    el.classList.add('retag-confirming');
+    el._originalOnclick = el.onclick;
+    el.onclick = null; // Disable clicking the row again
+
+    const confirmBar = document.createElement('div');
+    confirmBar.className = 'retag-result-confirm-bar';
+    confirmBar.innerHTML = `
+        <span>Re-tag with "${escapeHtml(albumName)}"?</span>
+        <div class="retag-result-confirm-actions">
+            <button class="retag-result-confirm-yes" onclick="event.stopPropagation(); executeRetag(${groupId}, '${albumId}', '${albumName.replace(/'/g, "\\'")}')">Confirm</button>
+            <button class="retag-result-confirm-cancel" onclick="event.stopPropagation(); cancelRetagConfirm(this)">Cancel</button>
+        </div>
+    `;
+    el.appendChild(confirmBar);
+}
+
+function cancelRetagConfirm(cancelBtn) {
+    const result = cancelBtn.closest('.retag-search-result');
+    if (!result) return;
+    result.classList.remove('retag-confirming');
+    const bar = result.querySelector('.retag-result-confirm-bar');
+    if (bar) bar.remove();
+    if (result._originalOnclick) {
+        result.onclick = result._originalOnclick;
+    }
+}
+
+async function executeRetag(groupId, albumId, albumName) {
+
+    closeRetagSearch();
+    closeRetagModal();
+
+    try {
+        const response = await fetch('/api/retag/execute', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ group_id: groupId, album_id: albumId })
+        });
+        const data = await response.json();
+        if (data.success) {
+            showToast('Retag operation started', 'success');
+            startRetagPolling();
+        } else {
+            showToast(`Error: ${data.error || 'Unknown error'}`, 'error');
+        }
+    } catch (e) {
+        showToast('Failed to start retag operation', 'error');
+    }
+}
+
+function startRetagPolling() {
+    if (retagStatusInterval) return;
+    retagStatusInterval = setInterval(checkRetagStatus, 1000);
+    checkRetagStatus();
+}
+
+async function checkRetagStatus() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/retag/status');
+        const state = await response.json();
+        updateRetagProgressUI(state);
+
+        if (state.status === 'running' && !retagStatusInterval) {
+            startRetagPolling();
+        }
+
+        if (state.status !== 'running' && retagStatusInterval) {
+            clearInterval(retagStatusInterval);
+            retagStatusInterval = null;
+            if (state.status === 'finished') {
+                showToast('Retag completed successfully', 'success');
+                loadRetagStats();
+            } else if (state.status === 'error') {
+                showToast(`Retag error: ${state.error_message || 'Unknown error'}`, 'error');
+            }
+        }
+    } catch (e) {
+        // Ignore fetch errors during polling
+    }
+}
+
+function updateRetagStatusFromData(data) {
+    const prev = _lastToolStatus['retag'];
+    _lastToolStatus['retag'] = data.status;
+    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
+    updateRetagProgressUI(data);
+    // Handle terminal state toasts (only on transition)
+    if (prev === 'running' || prev === undefined) {
+        if (data.status === 'finished') {
+            showToast('Retag completed successfully', 'success');
+            loadRetagStats();
+        } else if (data.status === 'error') {
+            showToast(`Retag error: ${data.error_message || 'Unknown error'}`, 'error');
+        }
+    }
+}
+
+function updateRetagProgressUI(state) {
+    const phaseLabel = document.getElementById('retag-phase-label');
+    const progressBar = document.getElementById('retag-progress-bar');
+    const progressLabel = document.getElementById('retag-progress-label');
+    const statusEl = document.getElementById('retag-stat-status');
+
+    if (phaseLabel) phaseLabel.textContent = state.phase || 'Ready';
+    if (progressBar) progressBar.style.width = `${state.progress || 0}%`;
+    if (progressLabel) {
+        progressLabel.textContent = `${state.processed || 0} / ${state.total_tracks || 0} tracks (${(state.progress || 0).toFixed(1)}%)`;
+    }
+    if (statusEl) {
+        statusEl.textContent = state.status === 'running' ? 'Running' : 'Idle';
+    }
+
+    // Color the progress bar red on error
+    if (progressBar) {
+        progressBar.style.backgroundColor = state.status === 'error' ? '#ff4444' : '';
+    }
+}
+
+/**
+ * Show inline delete confirmation for a retag group
+ */
+function showRetagDeleteConfirm(groupId) {
+    const area = document.getElementById(`retag-delete-area-${groupId}`);
+    if (!area) return;
+    area.innerHTML = `<div class="retag-confirm-inline">
+        <span>Remove?</span>
+        <button class="retag-confirm-yes">Yes</button>
+        <button class="retag-confirm-no">No</button>
+    </div>`;
+}
+
+function cancelRetagDeleteConfirm(groupId) {
+    const area = document.getElementById(`retag-delete-area-${groupId}`);
+    if (!area) return;
+    area.innerHTML = `<button class="retag-group-delete-btn" data-group-id="${groupId}" title="Remove from list">&times;</button>`;
+}
+
+async function executeRetagGroupDelete(groupId) {
+    try {
+        const response = await fetch(`/api/retag/groups/${groupId}`, { method: 'DELETE' });
+        const data = await response.json();
+        if (data.success) {
+            const card = document.querySelector(`.retag-group-card[data-group-id="${groupId}"]`);
+            if (card) {
+                const section = card.closest('.retag-artist-section');
+                card.remove();
+                if (section && section.querySelectorAll('.retag-group-card').length === 0) {
+                    section.remove();
+                }
+            }
+            loadRetagStats();
+            updateRetagBatchBar();
+            showToast('Group removed', 'success');
+        } else {
+            showToast('Failed to remove group', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to remove group', 'error');
+    }
+}
+
+/**
+ * Update the retag batch action bar based on checkbox selection
+ */
+function updateRetagBatchBar() {
+    const checked = document.querySelectorAll('.retag-select-cb:checked');
+    const bar = document.getElementById('retag-batch-bar');
+    const countEl = document.getElementById('retag-batch-count');
+    if (!bar) return;
+
+    if (checked.length > 0) {
+        bar.style.display = 'flex';
+        countEl.textContent = `${checked.length} selected`;
+    } else {
+        bar.style.display = 'none';
+    }
+}
+
+/**
+ * Batch remove selected retag groups
+ */
+async function batchRemoveRetagGroups() {
+    const checked = document.querySelectorAll('.retag-select-cb:checked');
+    if (checked.length === 0) return;
+
+    const groupIds = Array.from(checked).map(cb => parseInt(cb.getAttribute('data-group-id')));
+
+    try {
+        const response = await fetch('/api/retag/groups/delete-batch', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ group_ids: groupIds })
+        });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Removed ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
+            openRetagModal(); // Refresh
+        } else {
+            showToast('Failed to remove groups', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to remove groups', 'error');
+    }
+}
+
+/**
+ * Clear all retag groups — inline confirm on the button itself
+ */
+function clearAllRetagGroups(btn) {
+    if (!btn) return;
+    if (btn.dataset.confirming === 'true') {
+        // Already confirming — execute
+        btn.dataset.confirming = '';
+        btn.textContent = 'Clear All';
+        executeClearAllRetag();
+        return;
+    }
+    // First click — show confirm state
+    btn.dataset.confirming = 'true';
+    btn.textContent = 'Confirm Clear?';
+    btn.style.background = 'rgba(255, 59, 48, 0.15)';
+    // Auto-reset after 3 seconds if not clicked again
+    setTimeout(() => {
+        if (btn.dataset.confirming === 'true') {
+            btn.dataset.confirming = '';
+            btn.textContent = 'Clear All';
+            btn.style.background = '';
+        }
+    }, 3000);
+}
+
+async function executeClearAllRetag() {
+    try {
+        const response = await fetch('/api/retag/groups/clear-all', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' }
+        });
+        const data = await response.json();
+        if (data.success) {
+            showToast(`Cleared ${data.removed} group${data.removed !== 1 ? 's' : ''}`, 'success');
+            openRetagModal(); // Refresh
+        } else {
+            showToast('Failed to clear groups', 'error');
+        }
+    } catch (e) {
+        showToast('Failed to clear groups', 'error');
+    }
+}
+
+function stopWishlistCountPolling() {
+    if (wishlistCountInterval) {
+        clearInterval(wishlistCountInterval);
+        wishlistCountInterval = null;
+    }
+}
+
+
+
+function resetWishlistModalToIdleState() {
+    // Reset wishlist modal to idle state after background processing completes
+    const playlistId = 'wishlist';
+    const process = activeDownloadProcesses[playlistId];
+
+    if (process) {
+        console.log('🔄 Resetting wishlist modal to idle state...');
+
+        // Reset button states
+        const beginBtn = document.getElementById(`begin-analysis-btn-${playlistId}`);
+        const cancelBtn = document.getElementById(`cancel-all-btn-${playlistId}`);
+        if (beginBtn) {
+            beginBtn.style.display = 'inline-block';
+            beginBtn.disabled = false;
+            beginBtn.textContent = 'Begin Analysis';
+        }
+        if (cancelBtn) {
+            cancelBtn.style.display = 'none';
+        }
+
+        // Show the force download toggle again
+        const forceToggleContainer = document.querySelector(`#force-download-all-${playlistId}`)?.closest('.force-download-toggle-container');
+        if (forceToggleContainer) {
+            forceToggleContainer.style.display = 'flex';
+        }
+
+        // Reset progress displays
+        const analysisText = document.getElementById(`analysis-progress-text-${playlistId}`);
+        const analysisBar = document.getElementById(`analysis-progress-fill-${playlistId}`);
+        const downloadText = document.getElementById(`download-progress-text-${playlistId}`);
+        const downloadBar = document.getElementById(`download-progress-fill-${playlistId}`);
+
+        if (analysisText) analysisText.textContent = 'Ready to start';
+        if (analysisBar) analysisBar.style.width = '0%';
+        if (downloadText) downloadText.textContent = 'Waiting for analysis';
+        if (downloadBar) downloadBar.style.width = '0%';
+
+        // Reset all track rows to pending state
+        const trackRows = document.querySelectorAll(`#download-missing-modal-${CSS.escape(playlistId)} tr[data-track-index]`);
+        trackRows.forEach((row, index) => {
+            const matchCell = row.querySelector(`#match-${playlistId}-${index}`);
+            const downloadCell = row.querySelector(`#download-${playlistId}-${index}`);
+            const actionsCell = row.querySelector(`#actions-${playlistId}-${index}`);
+
+            if (matchCell) matchCell.textContent = '🔍 Pending';
+            if (downloadCell) downloadCell.textContent = '-';
+            if (actionsCell) actionsCell.innerHTML = '-';
+        });
+
+        // Reset stats
+        const foundElement = document.getElementById(`stat-found-${playlistId}`);
+        const missingElement = document.getElementById(`stat-missing-${playlistId}`);
+        const downloadedElement = document.getElementById(`stat-downloaded-${playlistId}`);
+        if (foundElement) foundElement.textContent = '-';
+        if (missingElement) missingElement.textContent = '-';
+        if (downloadedElement) downloadedElement.textContent = '0';
+
+        // Reset process status
+        process.status = 'idle';
+        process.batchId = null;
+        if (process.poller) {
+            clearInterval(process.poller);
+            process.poller = null;
+        }
+
+        console.log('✅ Wishlist modal fully reset to idle state');
+    } else {
+        console.log('⚠️ No wishlist process found to reset');
+    }
+}
+
+let toolsPageState = { isInitialized: false };
+
+async function initializeToolsPage() {
+    // Attach event listeners for tool buttons (idempotent — getElementById returns null if already wired)
+    const updateButton = document.getElementById('db-update-button');
+    if (updateButton && !updateButton._toolsWired) {
+        updateButton.addEventListener('click', handleDbUpdateButtonClick);
+        updateButton._toolsWired = true;
+    }
+
+    const metadataButton = document.getElementById('metadata-update-button');
+    if (metadataButton && !metadataButton._toolsWired) {
+        metadataButton.addEventListener('click', handleMetadataUpdateButtonClick);
+        metadataButton._toolsWired = true;
+    }
+
+    const qualityScanButton = document.getElementById('quality-scan-button');
+    if (qualityScanButton && !qualityScanButton._toolsWired) {
+        qualityScanButton.addEventListener('click', handleQualityScanButtonClick);
+        qualityScanButton._toolsWired = true;
+    }
+
+    const duplicateCleanButton = document.getElementById('duplicate-clean-button');
+    if (duplicateCleanButton && !duplicateCleanButton._toolsWired) {
+        duplicateCleanButton.addEventListener('click', handleDuplicateCleanButtonClick);
+        duplicateCleanButton._toolsWired = true;
+    }
+
+    const retagOpenButton = document.getElementById('retag-open-button');
+    if (retagOpenButton && !retagOpenButton._toolsWired) {
+        retagOpenButton.addEventListener('click', openRetagModal);
+        retagOpenButton._toolsWired = true;
+    }
+
+    const mediaScanButton = document.getElementById('media-scan-button');
+    if (mediaScanButton && !mediaScanButton._toolsWired) {
+        mediaScanButton.addEventListener('click', handleMediaScanButtonClick);
+        mediaScanButton._toolsWired = true;
+    }
+
+    const backupNowButton = document.getElementById('backup-now-button');
+    if (backupNowButton && !backupNowButton._toolsWired) {
+        backupNowButton.addEventListener('click', handleBackupNowClick);
+        backupNowButton._toolsWired = true;
+    }
+
+    // Tool-specific init
+    await checkAndHideMetadataUpdaterForNonPlex();
+    await checkAndRestoreMetadataUpdateState();
+    await checkAndShowMediaScanForPlex();
+    loadBackupList();
+    initializeToolHelpButtons();
+    loadRetagStats();
+    checkRetagStatus();
+    await fetchAndUpdateDbStats();
+    loadDiscoveryPoolStats();
+    loadMetadataCacheStats();
+
+    // Start polling (cleared when navigating away via loadPageData preamble)
+    stopDbStatsPolling();
+    dbStatsInterval = setInterval(fetchAndUpdateDbStats, 10000);
+
+    // Check for ongoing operations
+    await checkAndUpdateDbProgress();
+    await checkAndUpdateQualityScanProgress();
+    await checkAndUpdateDuplicateCleanProgress();
+
+    // Initialize library maintenance section
+    updateRepairStatus();
+    switchRepairTab('jobs');
+
+    toolsPageState.isInitialized = true;
+}
+
+async function loadDashboardData() {
+    // Initial load of wishlist count
+    await updateWishlistCount();
+
+    // Start periodic refresh of wishlist count (every 10 seconds)
+    stopWishlistCountPolling(); // Ensure no duplicates
+    wishlistCountInterval = setInterval(updateWishlistCount, 10000);
+
+    // Initial load of service status, system statistics, and library status
+    await fetchAndUpdateServiceStatus();
+    await fetchAndUpdateSystemStats();
+    await fetchAndUpdateDbStats();
+
+    // Service status is already polled globally (line 311)
+    // System stats polling kept here (dashboard-specific)
+    setInterval(fetchAndUpdateSystemStats, 10000);
+
+    // Initial load of activity feed
+    await fetchAndUpdateActivityFeed();
+
+    // Start periodic refresh of activity feed (every 2 seconds for responsiveness)
+    setInterval(fetchAndUpdateActivityFeed, 2000);
+
+    // Start periodic toast checking (every 3 seconds)
+    setInterval(checkForActivityToasts, 3000);
+
+    // Check for any active download processes that need rehydration
+    await checkForActiveProcesses();
+
+    // Populate the Active Downloads dashboard section with any existing downloads
+    updateDashboardDownloads();
+
+    // Automatic wishlist processing now runs server-side
+}
+
+// --- Data Fetching and UI Updates ---
+
+async function fetchAndUpdateDbStats() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/database/stats');
+        if (!response.ok) return;
+
+        const stats = await response.json();
+
+        // This function updates the stat cards in the top grid
+        updateDashboardStatCards(stats);
+
+        // This function updates the info within the DB Updater tool card
+        updateDbUpdaterCardInfo(stats);
+
+    } catch (error) {
+        console.warn('Could not fetch DB stats:', error);
+    }
+}
+
+function updateDashboardStatCards(stats) {
+    // Update the Library Status card on the dashboard
+    updateLibraryStatusCard(stats);
+}
+
+/**
+ * Smart Library Status card on the Dashboard.
+ * Shows different states: no server, empty library, healthy library, scanning.
+ */
+function updateLibraryStatusCard(dbStats) {
+    const card = document.getElementById('library-status-card');
+    if (!card) return;
+
+    const title = document.getElementById('library-status-title');
+    const subtitle = document.getElementById('library-status-subtitle');
+    const statsRow = document.getElementById('library-status-stats');
+    const scanBtn = document.getElementById('library-status-scan-btn');
+    const scanLabel = document.getElementById('library-status-scan-label');
+    const deepBtn = document.getElementById('library-status-deep-btn');
+    const progressDiv = document.getElementById('library-status-progress');
+    const messageDiv = document.getElementById('library-status-message');
+
+    const artists = dbStats ? (dbStats.artists || 0) : 0;
+    const albums = dbStats ? (dbStats.albums || 0) : 0;
+    const tracks = dbStats ? (dbStats.tracks || 0) : 0;
+    const sizeMb = dbStats ? (dbStats.database_size_mb || 0) : 0;
+    const lastUpdate = dbStats ? dbStats.last_update : null;
+    const serverSource = dbStats ? dbStats.server_source : null;
+
+    // Check if a scan is in progress
+    const isScanning = window._libraryStatusScanning || false;
+
+    // Determine state
+    const serverConnected = _lastServiceStatus && _lastServiceStatus.media_server && _lastServiceStatus.media_server.connected;
+    const serverType = _lastServiceStatus && _lastServiceStatus.active_media_server;
+    const hasData = tracks > 0;
+    const hasServer = !!serverType && serverType !== 'none';
+
+    // Reset classes
+    card.className = 'library-status-card';
+
+    if (isScanning) {
+        // State: Scanning
+        card.classList.add('scanning');
+        if (title) title.textContent = 'Library Scan';
+        if (subtitle) subtitle.textContent = 'Updating library database...';
+        if (scanBtn) {
+            scanBtn.style.display = '';
+            scanBtn.classList.add('scanning');
+            scanLabel.textContent = 'Stop';
+            scanBtn.disabled = false;
+        }
+        if (deepBtn) deepBtn.style.display = 'none';
+        if (statsRow) statsRow.style.display = hasData ? '' : 'none';
+        if (progressDiv) progressDiv.style.display = '';
+        if (messageDiv) messageDiv.style.display = 'none';
+
+    } else if (!hasServer) {
+        // State: No server configured
+        card.classList.add('needs-setup');
+        if (title) title.textContent = 'No Media Server';
+        if (subtitle) subtitle.textContent = 'Connect a server to get started';
+        if (scanBtn) scanBtn.style.display = 'none';
+        if (deepBtn) deepBtn.style.display = 'none';
+        if (statsRow) statsRow.style.display = 'none';
+        if (progressDiv) progressDiv.style.display = 'none';
+        if (messageDiv) {
+            messageDiv.style.display = '';
+            messageDiv.innerHTML = 'SoulSync needs a media server to manage your library. '
+                + 'Go to <span class="link" onclick="navigateToPage(\'settings\')">Settings</span> '
+                + 'to connect Plex, Jellyfin, or Navidrome.';
+        }
+
+    } else if (!serverConnected) {
+        // State: Server configured but not connected
+        card.classList.add('needs-setup');
+        const serverName = _capitalize(serverType);
+        if (title) title.textContent = `${serverName} — Disconnected`;
+        if (subtitle) subtitle.textContent = 'Cannot reach your media server';
+        if (scanBtn) scanBtn.style.display = 'none';
+        if (deepBtn) deepBtn.style.display = 'none';
+        if (statsRow) statsRow.style.display = 'none';
+        if (progressDiv) progressDiv.style.display = 'none';
+        if (messageDiv) {
+            messageDiv.style.display = '';
+            messageDiv.innerHTML = `Your ${serverName} server is configured but not responding. `
+                + 'Check that it\'s running and the connection details are correct in '
+                + '<span class="link" onclick="navigateToPage(\'settings\')">Settings</span>.';
+        }
+
+    } else if (!hasData) {
+        // State: Server connected but library is empty
+        card.classList.add('empty-library');
+        const serverName = _capitalize(serverType);
+        if (title) title.textContent = `${serverName} Connected`;
+        if (subtitle) subtitle.textContent = 'Library database is empty';
+        if (scanBtn) {
+            scanBtn.style.display = '';
+            scanBtn.classList.remove('scanning');
+            scanLabel.textContent = 'Scan Now';
+            scanBtn.disabled = false;
+        }
+        if (deepBtn) deepBtn.style.display = 'none';
+        if (statsRow) statsRow.style.display = 'none';
+        if (progressDiv) progressDiv.style.display = 'none';
+        if (messageDiv) {
+            messageDiv.style.display = '';
+            messageDiv.innerHTML = 'Your server is connected but SoulSync hasn\'t imported your library yet. '
+                + 'Click <strong>Scan Now</strong> to pull your artists, albums, and tracks into SoulSync.';
+        }
+
+    } else {
+        // State: Healthy library with data
+        card.classList.add('has-data');
+        const serverName = _capitalize(serverType);
+        let lastRefreshText = 'Never';
+        if (lastUpdate) {
+            const d = new Date(lastUpdate);
+            if (!isNaN(d.getTime())) {
+                lastRefreshText = typeof _formatTimeAgo === 'function' ? _formatTimeAgo(d) : d.toLocaleDateString();
+            }
+        }
+        if (title) title.textContent = `${serverName} Library`;
+        if (subtitle) subtitle.textContent = `Last refreshed ${lastRefreshText}`;
+        if (scanBtn) {
+            scanBtn.style.display = '';
+            scanBtn.classList.remove('scanning');
+            scanLabel.textContent = 'Refresh';
+            scanBtn.disabled = false;
+        }
+        if (deepBtn) deepBtn.style.display = '';
+        if (statsRow) {
+            statsRow.style.display = '';
+            document.getElementById('library-status-artists').textContent = artists.toLocaleString();
+            document.getElementById('library-status-albums').textContent = albums.toLocaleString();
+            document.getElementById('library-status-tracks').textContent = tracks.toLocaleString();
+            document.getElementById('library-status-size').textContent = sizeMb < 1 ? `${Math.round(sizeMb * 1024)} KB` : `${sizeMb.toFixed(1)} MB`;
+        }
+        if (progressDiv) progressDiv.style.display = 'none';
+        if (messageDiv) messageDiv.style.display = 'none';
+    }
+}
+
+// Track last service status for library card
+let _lastServiceStatus = null;
+let _isSoulsyncStandalone = false;  // Global flag: true when no media server (sync buttons hidden)
+const _origFetchServiceStatus = typeof fetchAndUpdateServiceStatus === 'function' ? fetchAndUpdateServiceStatus : null;
+
+function _capitalize(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : ''; }
+
+/**
+ * Dashboard library scan button handler — triggers incremental DB update.
+ */
+async function dashboardLibraryScan(fullRefresh = false) {
+    const scanBtn = document.getElementById('library-status-scan-btn');
+    const scanLabel = document.getElementById('library-status-scan-label');
+
+    // If already scanning, stop it
+    if (window._libraryStatusScanning) {
+        try {
+            await fetch('/api/database/update/stop', { method: 'POST' });
+            window._libraryStatusScanning = false;
+            showToast('Library scan stopped', 'info');
+            // Refresh the card
+            try {
+                const r = await fetch('/api/database/stats');
+                if (r.ok) updateLibraryStatusCard(await r.json());
+            } catch (e) {}
+        } catch (e) {
+            showToast('Failed to stop scan', 'error');
+        }
+        return;
+    }
+
+    // Start scan
+    try {
+        window._libraryStatusScanning = true;
+        updateLibraryStatusCard(null); // Update to scanning state
+
+        const response = await fetch('/api/database/update', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ full_refresh: fullRefresh })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            window._libraryStatusScanning = false;
+            showToast(data.error || 'Failed to start scan', 'error');
+            return;
+        }
+
+        showToast('Library scan started', 'success');
+
+        // Poll for progress
+        const pollInterval = setInterval(async () => {
+            try {
+                const statusResp = await fetch('/api/database/update/status');
+                if (!statusResp.ok) return;
+                const status = await statusResp.json();
+
+                const phase = document.getElementById('library-status-phase');
+                const barFill = document.getElementById('library-status-bar-fill');
+                const detail = document.getElementById('library-status-progress-detail');
+
+                if (phase) phase.textContent = status.phase || 'Scanning...';
+                if (barFill) barFill.style.width = `${status.progress || 0}%`;
+                if (detail && status.processed !== undefined) {
+                    detail.textContent = `${status.processed} / ${status.total || '?'}`;
+                }
+
+                if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
+                    clearInterval(pollInterval);
+                    window._libraryStatusScanning = false;
+
+                    if (status.status === 'completed' || status.status === 'finished') {
+                        showToast('Library scan complete', 'success');
+                    } else if (status.status === 'error') {
+                        showToast(`Scan error: ${status.error_message || 'Unknown'}`, 'error');
+                    }
+
+                    // Refresh stats
+                    try {
+                        const r = await fetch('/api/database/stats');
+                        if (r.ok) updateLibraryStatusCard(await r.json());
+                    } catch (e) {}
+                }
+            } catch (e) {
+                clearInterval(pollInterval);
+                window._libraryStatusScanning = false;
+            }
+        }, 2000);
+
+    } catch (e) {
+        window._libraryStatusScanning = false;
+        showToast(`Scan failed: ${e.message}`, 'error');
+    }
+}
+
+/**
+ * Dashboard deep scan — finds new tracks, removes stale ones, preserves enrichment data.
+ */
+async function dashboardLibraryDeepScan() {
+    if (window._libraryStatusScanning) {
+        showToast('A scan is already running', 'warning');
+        return;
+    }
+
+    if (!await showConfirmDialog({
+        title: 'Deep Scan Library',
+        message: 'A deep scan re-checks every track in your media server library.\n\n' +
+                 '• Adds any new tracks that were missed\n' +
+                 '• Removes tracks no longer on your server\n' +
+                 '• Preserves all existing metadata and enrichment data\n\n' +
+                 'This may take a while for large libraries. Continue?',
+    })) return;
+
+    // Use the same scan flow as dashboardLibraryScan but with deep_scan flag
+    try {
+        window._libraryStatusScanning = true;
+        updateLibraryStatusCard(null);
+
+        const response = await fetch('/api/database/update', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ deep_scan: true })
+        });
+        const data = await response.json();
+        if (!data.success) {
+            window._libraryStatusScanning = false;
+            showToast(data.error || 'Failed to start deep scan', 'error');
+            try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
+            return;
+        }
+
+        showToast('Deep scan started — this may take a while', 'success');
+
+        const pollInterval = setInterval(async () => {
+            try {
+                const statusResp = await fetch('/api/database/update/status');
+                if (!statusResp.ok) return;
+                const status = await statusResp.json();
+
+                const phase = document.getElementById('library-status-phase');
+                const barFill = document.getElementById('library-status-bar-fill');
+                const detail = document.getElementById('library-status-progress-detail');
+
+                if (phase) phase.textContent = status.phase || 'Deep scanning...';
+                if (barFill) barFill.style.width = `${status.progress || 0}%`;
+                if (detail && status.processed !== undefined) {
+                    detail.textContent = `${status.processed} / ${status.total || '?'}`;
+                }
+
+                if (status.status === 'completed' || status.status === 'finished' || status.status === 'error' || status.status === 'idle') {
+                    clearInterval(pollInterval);
+                    window._libraryStatusScanning = false;
+
+                    if (status.status === 'completed' || status.status === 'finished') {
+                        showToast('Deep scan complete', 'success');
+                    } else if (status.status === 'error') {
+                        showToast(`Deep scan error: ${status.error_message || 'Unknown'}`, 'error');
+                    }
+
+                    try { const r = await fetch('/api/database/stats'); if (r.ok) updateLibraryStatusCard(await r.json()); } catch (e) {}
+                }
+            } catch (e) {
+                clearInterval(pollInterval);
+                window._libraryStatusScanning = false;
+            }
+        }, 2000);
+
+    } catch (e) {
+        window._libraryStatusScanning = false;
+        showToast(`Deep scan failed: ${e.message}`, 'error');
+    }
+}
+
+/**
+ * Update the Active Downloads section on the dashboard.
+ * Called from artist, search, and discover update points (event-driven, no polling).
+ */
+function updateDashboardDownloads() {
+    const section = document.getElementById('dashboard-active-downloads-section');
+    const container = document.getElementById('dashboard-downloads-container');
+    if (!section || !container) return;
+
+    // Collect active entries from each source
+    const activeArtists = Object.keys(artistDownloadBubbles).filter(id =>
+        artistDownloadBubbles[id].downloads.length > 0
+    );
+    const activeSearch = Object.keys(searchDownloadBubbles).filter(name =>
+        searchDownloadBubbles[name].downloads.length > 0
+    );
+    const activeDiscover = Object.keys(discoverDownloads);
+    const activeBeatport = Object.keys(beatportDownloadBubbles).filter(key =>
+        beatportDownloadBubbles[key].downloads.length > 0
+    );
+
+    const totalCount = activeArtists.length + activeSearch.length + activeDiscover.length + activeBeatport.length;
+
+    if (totalCount === 0) {
+        section.style.display = 'none';
+        container.innerHTML = '';
+        return;
+    }
+
+    section.style.display = '';
+    let html = '';
+
+    // --- Artists group ---
+    if (activeArtists.length > 0) {
+        html += `
+            <div class="dashboard-downloads-group">
+                <div class="dashboard-downloads-group-header">
+                    <span class="dashboard-downloads-group-label">Artists</span>
+                    <span class="dashboard-downloads-group-count">${activeArtists.length}</span>
+                </div>
+                <div class="dashboard-bubble-container">
+                    ${activeArtists.map(id => createArtistBubbleCard(artistDownloadBubbles[id])).join('')}
+                </div>
+            </div>`;
+    }
+
+    // --- Search group ---
+    if (activeSearch.length > 0) {
+        html += `
+            <div class="dashboard-downloads-group">
+                <div class="dashboard-downloads-group-header">
+                    <span class="dashboard-downloads-group-label">Search</span>
+                    <span class="dashboard-downloads-group-count">${activeSearch.length}</span>
+                </div>
+                <div class="dashboard-bubble-container">
+                    ${activeSearch.map(name => createSearchBubbleCard(searchDownloadBubbles[name])).join('')}
+                </div>
+            </div>`;
+    }
+
+    // --- Discover group ---
+    if (activeDiscover.length > 0) {
+        html += `
+            <div class="dashboard-downloads-group">
+                <div class="dashboard-downloads-group-header">
+                    <span class="dashboard-downloads-group-label">Discover</span>
+                    <span class="dashboard-downloads-group-count">${activeDiscover.length}</span>
+                </div>
+                <div class="dashboard-bubble-container">
+                    ${activeDiscover.map(pid => createDashboardDiscoverBubble(pid)).join('')}
+                </div>
+            </div>`;
+    }
+
+    // --- Beatport group ---
+    if (activeBeatport.length > 0) {
+        html += `
+            <div class="dashboard-downloads-group">
+                <div class="dashboard-downloads-group-header">
+                    <span class="dashboard-downloads-group-label">Beatport</span>
+                    <span class="dashboard-downloads-group-count">${activeBeatport.length}</span>
+                </div>
+                <div class="dashboard-bubble-container">
+                    ${activeBeatport.map(key => createBeatportBubbleCard(beatportDownloadBubbles[key])).join('')}
+                </div>
+            </div>`;
+    }
+
+    container.innerHTML = html;
+
+    // Post-render: attach artist bubble click handlers + dynamic glow
+    activeArtists.forEach(artistId => {
+        const card = container.querySelector(`.artist-bubble-card[data-artist-id="${artistId}"]`);
+        if (card) {
+            card.addEventListener('click', () => openArtistDownloadModal(artistId));
+            const artist = artistDownloadBubbles[artistId].artist;
+            if (artist.image_url) {
+                extractImageColors(artist.image_url, (colors) => {
+                    applyDynamicGlow(card, colors);
+                });
+            }
+        }
+    });
+    // Beatport bubble click handlers + glow
+    activeBeatport.forEach(chartKey => {
+        const card = container.querySelector(`.artist-bubble-card[data-chart-key="${chartKey}"]`);
+        if (card) {
+            card.addEventListener('click', () => openBeatportBubbleModal(chartKey));
+            const chartImage = beatportDownloadBubbles[chartKey].chart.image;
+            if (chartImage) {
+                extractImageColors(chartImage, (colors) => {
+                    applyDynamicGlow(card, colors);
+                });
+            }
+        }
+    });
+    // Search and discover cards use inline onclick — no post-render needed
+}
+
+/**
+ * Create a 150px circle card for a discover download (dashboard variant).
+ * Matches artist/search bubble sizing.
+ */
+function createDashboardDiscoverBubble(playlistId) {
+    const download = discoverDownloads[playlistId];
+    if (!download) return '';
+
+    const isCompleted = download.status === 'completed';
+    const imageUrl = download.imageUrl || '';
+    const backgroundStyle = imageUrl
+        ? `background-image: url('${imageUrl}');`
+        : `background: linear-gradient(135deg, rgba(29, 185, 84, 0.3) 0%, rgba(24, 156, 71, 0.2) 100%);`;
+
+    return `
+        <div class="dashboard-discover-bubble ${isCompleted ? 'completed' : ''}"
+             onclick="openDiscoverDownloadModal('${playlistId}')"
+             title="${escapeHtml(download.name)} - Click to view">
+            <div class="dashboard-discover-bubble-image" style="${backgroundStyle}"></div>
+            <div class="dashboard-discover-bubble-overlay"></div>
+            <div class="dashboard-discover-bubble-content">
+                <div class="dashboard-discover-bubble-name">${escapeHtml(download.name)}</div>
+                <div class="dashboard-discover-bubble-status">${isCompleted ? 'Completed' : 'In Progress'}</div>
+            </div>
+        </div>
+    `;
+}
+
+
+
+function updateDbUpdaterCardInfo(stats) {
+    // Update the detailed stats within the DB Updater tool card
+    const lastRefreshEl = document.getElementById('db-last-refresh');
+    const artistsStatEl = document.getElementById('db-stat-artists');
+    const albumsStatEl = document.getElementById('db-stat-albums');
+    const tracksStatEl = document.getElementById('db-stat-tracks');
+    const sizeStatEl = document.getElementById('db-stat-size');
+
+    if (lastRefreshEl) {
+        if (stats.last_full_refresh) {
+            const date = new Date(stats.last_full_refresh);
+            lastRefreshEl.textContent = date.toLocaleString();
+        } else {
+            lastRefreshEl.textContent = 'Never';
+        }
+    }
+
+    if (artistsStatEl) artistsStatEl.textContent = stats.artists.toLocaleString() || '0';
+    if (albumsStatEl) albumsStatEl.textContent = stats.albums.toLocaleString() || '0';
+    if (tracksStatEl) tracksStatEl.textContent = stats.tracks.toLocaleString() || '0';
+    if (sizeStatEl) sizeStatEl.textContent = `${stats.database_size_mb.toFixed(2)} MB`;
+
+    // Update the title of the tool card to show which server is active
+    const toolCardTitle = document.querySelector('#db-updater-card .tool-card-title');
+    if (toolCardTitle && stats.server_source) {
+        const serverName = stats.server_source.charAt(0).toUpperCase() + stats.server_source.slice(1);
+        toolCardTitle.textContent = `${serverName} Database Updater`;
+    }
+}
+
+// --- Wishlist Count Functions ---
+
+async function updateWishlistCount() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/wishlist/count');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const count = data.count || 0;
+
+        _updateHeroBtnCount('wishlist-button', 'wishlist-badge', count);
+        // Update sidebar nav badge
+        const wlNavBadge = document.getElementById('wishlist-nav-badge');
+        if (wlNavBadge) {
+            wlNavBadge.textContent = count;
+            wlNavBadge.classList.toggle('hidden', count === 0);
+        }
+        const wishlistButton = document.getElementById('wishlist-button');
+        if (wishlistButton) {
+            if (count === 0) {
+                wishlistButton.classList.remove('wishlist-active');
+                wishlistButton.classList.add('wishlist-inactive');
+            } else {
+                wishlistButton.classList.remove('wishlist-inactive');
+                wishlistButton.classList.add('wishlist-active');
+            }
+        }
+
+        // Check for auto-initiated wishlist processes that user should see immediately
+        await checkForAutoInitiatedWishlistProcess();
+
+    } catch (error) {
+        console.warn('Could not fetch wishlist count:', error);
+    }
+}
+
+async function checkForAutoInitiatedWishlistProcess() {
+    try {
+        const playlistId = 'wishlist';
+
+        // Only check if we're on the dashboard and no modal is currently visible
+        if (currentPage !== 'dashboard') {
+            return;
+        }
+
+        // Don't override if user has manually closed the modal during auto-processing
+        if (WishlistModalState.wasUserClosed()) {
+            return;
+        }
+
+        // Check for active wishlist processes
+        const response = await fetch('/api/active-processes');
+        if (!response.ok) return;
+
+        const data = await response.json();
+        const processes = data.active_processes || [];
+        const serverWishlistProcess = processes.find(p => p.playlist_id === playlistId);
+        const clientWishlistProcess = activeDownloadProcesses[playlistId];
+
+        if (serverWishlistProcess && serverWishlistProcess.auto_initiated) {
+            console.log('🤖 [Auto-Processing] Detected auto-initiated wishlist process during polling');
+
+            // Only sync frontend state if needed, but don't auto-show modal
+            const needsSync = !clientWishlistProcess ||
+                clientWishlistProcess.batchId !== serverWishlistProcess.batch_id ||
+                !clientWishlistProcess.modalElement ||
+                !document.body.contains(clientWishlistProcess.modalElement);
+
+            if (needsSync) {
+                console.log('🔄 [Auto-Processing] Syncing frontend state for auto-processing (background mode)');
+                await rehydrateModal(serverWishlistProcess, false); // Background sync only
+            }
+
+            // Note: Modal visibility is controlled by user interaction only
+            // User must click wishlist button to see auto-processing progress
+        }
+
+    } catch (error) {
+        console.warn('Error checking for auto-initiated wishlist process:', error);
+    }
+}
+
+async function checkAndUpdateDbProgress() {
+    if (socketConnected) return; // WebSocket handles this
+    try {
+        const response = await fetch('/api/database/update/status', {
+            signal: AbortSignal.timeout(10000) // 10 second timeout
+        });
+        if (!response.ok) return;
+
+        const state = await response.json();
+        console.debug('📊 DB Status:', state.status, `${state.processed}/${state.total}`, `${state.progress.toFixed(1)}%`);
+        updateDbProgressUI(state);
+
+        // Start polling only if not already polling and status is running
+        if (state.status === 'running' && !dbUpdateStatusInterval) {
+            console.log('🔄 Starting database update polling (1 second interval)');
+            dbUpdateStatusInterval = setInterval(checkAndUpdateDbProgress, 1000);
+        }
+
+    } catch (error) {
+        console.warn('Could not fetch DB update status:', error);
+        // Don't stop polling on network errors - keep trying
+    }
+}
+
+function updateDbProgressFromData(data) {
+    const prev = _lastToolStatus['db-update'];
+    _lastToolStatus['db-update'] = data.status;
+    if (prev !== undefined && data.status === prev && data.status !== 'running') return;
+    updateDbProgressUI(data);
+}
+
+function updateDbProgressUI(state) {
+    const button = document.getElementById('db-update-button');
+    const phaseLabel = document.getElementById('db-phase-label');
+    const progressLabel = document.getElementById('db-progress-label');
+    const progressBar = document.getElementById('db-progress-bar');
+    const refreshSelect = document.getElementById('db-refresh-type');
+
+    if (!button || !phaseLabel || !progressLabel || !progressBar || !refreshSelect) return;
+
+    if (state.status === 'running') {
+        button.textContent = 'Stop Update';
+        button.disabled = false;
+        refreshSelect.disabled = true;
+
+        phaseLabel.textContent = state.phase || 'Processing...';
+        progressLabel.textContent = `${state.processed} / ${state.total} artists (${state.progress.toFixed(1)}%)`;
+        progressBar.style.width = `${state.progress}%`;
+    } else { // idle, finished, or error
+        stopDbUpdatePolling();
+        button.textContent = 'Update Database';
+        button.disabled = false;
+        refreshSelect.disabled = false;
+
+        if (state.status === 'error') {
+            phaseLabel.textContent = `Error: ${state.error_message}`;
+            progressBar.style.backgroundColor = '#ff4444'; // Red for error
+        } else {
+            phaseLabel.textContent = state.phase || 'Idle';
+            progressBar.style.backgroundColor = 'rgb(var(--accent-rgb))'; // Green for normal
+        }
+
+        if (state.status === 'finished' || state.status === 'error') {
+            // Final stats refresh after completion/error
+            setTimeout(fetchAndUpdateDbStats, 500);
+        }
+    }
+}
+
+// ===================================================================
+